Docs updates improvements mar 30 2025

docs/app/docs/components/accordion/docs/codeUsage.js

@@ -7,7 +7,7 @@ const example_1_SourceCode = await getSourceCodeFromPath('docs/app/docs/componen
 
 
 const scss_SourceCode = await getSourceCodeFromPath('styles/themes/components/accordion.scss');
-const anatomy_SourceCode = await getSourceCodeFromPath('docs/app/docs/components/accordion/docs/accordion_anatomy.tsx');
+const anatomy_SourceCode = await getSourceCodeFromPath('docs/app/docs/components/accordion/docs/anatomy.tsx');
 
 export const code = {
  javascript: {

docs/app/docs/components/accordion/page.mdx

@@ -16,5 +16,5 @@ import {code, anatomy, keyboardShortcuts} from "./docs/codeUsage"
  <Documentation.Anatomy code={anatomy.code} />
 
  {/* Keyboard Shortcuts */}
- <Documentation.KeyboardShortcuts keyboardShortcuts={keyboardShortcuts} />
+ <Documentation.Table title="Keyboard Interactions" columns={keyboardShortcuts.columns} data={keyboardShortcuts.data} />
 </Documentation>

docs/components/layout/Documentation/Documentation.js

@@ -8,7 +8,7 @@ import CodeBlock from '@/components/layout/Documentation/helpers/CodeBlock';
 import ComponentHero from '@/components/layout/Documentation/helpers/ComponentHero/ComponentHero';
 import ComponentFeatures from '@/components/layout/Documentation/helpers/ComponentFeatures/ComponentFeatures';
 import { BookMarkLink } from '@/components/layout/Documentation/utils';
-import KeyboardInteractionsTable from './helpers/KeyboardInteractionsTable';
+
 
 
 const LeftArrow = () => {
@@ -65,9 +65,7 @@ const UnderConstruction = ({ children }) => {
  </div>;
 };
 
-const KeyboardShortcuts = ({ keyboardShortcuts }) => {
- return <KeyboardInteractionsTable columns={keyboardShortcuts.columns} data={keyboardShortcuts.data} />
-};
+
 
 Documentation.UnderConstruction = UnderConstruction;
 Documentation.Anatomy = Anatomy;
@@ -76,6 +74,5 @@ Documentation.ComponentHero = ComponentHero;
 Documentation.ComponentFeatures = ComponentFeatures;
 Documentation.CodeBlock = CodeBlock;
 Documentation.Table = DocsTable;
-Documentation.KeyboardShortcuts = KeyboardShortcuts;
 
 export default Documentation;

docs/components/layout/Documentation/helpers/CodeBlock.js

@@ -30,7 +30,7 @@ const renderElement = (element, index) => {
  }
 };
 
-const CodeBlock = ({ children, language = 'jsx' }) => {
+const CodeBlock = ({ children, inline=false, language = 'jsx' }) => {
  const [expanded, setExpanded] = useState(false);
  let code = refractor.highlight(children, language);
  code = code.children.map((child, index) => renderElement(child, index));
@@ -39,25 +39,46 @@ const CodeBlock = ({ children, language = 'jsx' }) => {
  const copyContent = children
  .replace(/\n{2,}/g, '\n') // Replace multiple newlines with single newline
  .trim(); // Remove leading/trailing whitespace
-
+
+ let height = 'auto';
+ let maxHeight = 'auto';
+
+ if(expanded) {
+ if(!inline){
+ height = 'auto';
+ maxHeight = 640;
+ }
+
+ }
+ else{
+ if(!inline){
+ height = 180;
+ maxHeight = 640;
+ }
+
+
+
+ }
  return (
  <pre className="relative mb-8">
  <div className="relative ">
  <code className={`language-${language} whitespace-pre-wrap`} style={{ wordBreak: 'break-word' }}
  style={{
- height: expanded ? 'auto' : 180,
- maxHeight: 640,
+ height: height,
+ maxHeight: maxHeight,
  overflowY: expanded ? 'scroll' : 'hidden',
-
  }}
  >{code}</code>
- {!expanded && <div className="code-block-blur"></div>}
- <div className="flex justify-center w-full bg-gradient-to-t from-background to-transparent bg-gray-100 px-4 py-2">
-
- <Button size="small" onClick={() => setExpanded(!expanded)}>
- Show {expanded ? 'less' : 'more'}
- </Button>
- </div>
+ {!inline && <>
+ {!expanded && <div className="code-block-blur"></div>}
+ <div className="flex justify-center w-full bg-gradient-to-t from-background to-transparent bg-gray-100 px-4 py-2">
+
+ <Button size="small" onClick={() => setExpanded(!expanded)}>
+ Show {expanded ? 'less' : 'more'}
+ </Button>
+ </div>
+ </>}
+
  </div>
  <span className="absolute top-2 right-2">
  <Tooltip label="Copy" placement="bottom">

docs/components/layout/Documentation/helpers/DocsTable.js

@@ -5,9 +5,10 @@ import Heading from '@radui/ui/Heading';
 
 
 const DocsTable = ({ title = 'API Documentation', columns = [], data = [] }) => {
- return <div>
- <BookMarkLink id="api-documentation"> <Heading as="h6" className="mb-4">{title}</Heading> </BookMarkLink>
-
+ return <div className="my-10">
+ <div className="mb-4">
+ <BookMarkLink id="api-documentation"> <Heading as="h6">{title}</Heading> </BookMarkLink>
+ </div>
  <Table.Root>
  <Table.Head>
  <Table.Row>

docs/mdx-components.tsx

@@ -34,7 +34,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
  <Text className="text-gray-1000 inline-block font-bold" >{children}</Text>
  ),
  code: ({ children }) => (
- <Documentation.CodeBlock>
+ <Documentation.CodeBlock inline>
  {children}
  </Documentation.CodeBlock>
  ),

src/components/ui/Dropdown/Dropdown.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Popper from '~/components/tools/Popper/Popper';
 
 // TODO: fix any
 export type DropdownProps ={
@@ -8,7 +7,7 @@
 }
 
 const Dropdown = ({ list = [], selected }: DropdownProps) => {
  const PopElem = () => {
  return <ul className='bg-white px-2 py-2 shadow-lg rounded-md'>
  {list.map((item, index) => {
  return <li key={index}>{item.value}</li>;
@@ -16,9 +15,9 @@
  </ul>;
  };
  return <div className='relative'>
- <Popper open={false} placement="bottom-start" popperName="dropdown" pop={<PopElem/>}>
-  <span>Dropdown</span>
- </Popper>
+
+ <span>Dropdown</span>
+
  </div>;
 };
 

src/components/ui/Tooltip/Tooltip.tsx

@@ -1,25 +1,17 @@
+'use client';
 import React from 'react';
-import Popper, { PopperProps } from '~/components/tools/Popper/Popper';
 
-const COMPONENT_NAME = 'Tooltip';
+import TooltipRoot from './fragments/TooltipRoot';
+import TooltipTrigger from './fragments/TooltipTrigger';
+import TooltipContent from './fragments/TooltipContent';
 
-type TooltipProps = {
- children: React.ReactNode;
- label?: string;
- placement?: PopperProps['placement'];
-} & JSX.IntrinsicElements['span'];
-
-const Tooltip = ({ children, label = '', placement = 'top', ...props }: TooltipProps) => {
- return (
- <Popper
- popperName={COMPONENT_NAME}
- pop={label}
- placement={placement}
- {...props}
- >
- {children}
- </Popper>
- );
+const Tooltip = () => {
+ console.warn('Direct usage of Tabs is not supported. Please use Tabs.Root, Tabs.List, etc. instead.');
+ return null;
 };
 
+Tooltip.Root = TooltipRoot;
+Tooltip.Trigger = TooltipTrigger;
+Tooltip.Content = TooltipContent;
+
 export default Tooltip;

src/components/ui/Tooltip/context/TooltipContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const TooltipContext = createContext<null | TTooltipContext>(null);
+
+export default TooltipContext;

src/components/ui/Tooltip/fragments/TooltipContent.tsx

@@ -0,0 +1,30 @@
+import React, { useContext, forwardRef } from 'react';
+import clsx from 'clsx';
+
+import TooltipContext from '../context/TooltipContext';
+import { useMergeRefs, FloatingPortal, FloatingArrow } from '@floating-ui/react';
+import Primitive from '~/core/primitives/Primitive';
+
+const TooltipContent = forwardRef(({ children, showArrow = true, ...props }: { children: React.ReactNode, showArrow?: boolean } & JSX.IntrinsicElements['div'], propRef: React.Ref<HTMLDivElement>) => {
+ const { isOpen, data, interactions, context, arrowRef } = useContext(TooltipContext);
+
+ const ref = useMergeRefs([context.refs.setFloating, propRef]);
+
+ if (!isOpen) return null;
+
+ const { getFloatingProps } = interactions;
+
+ return (
+ <FloatingPortal>
+ <Primitive.div className="rad-ui-tooltip-floating-element" ref={ref} style={{ ...data.floatingStyles }} {...getFloatingProps(props)}>
+ {showArrow && <FloatingArrow className={clsx('rad-ui-arrow rad-ui-arrow')} ref={arrowRef} context={context} />}
+ {children}
+ </Primitive.div>
+ </FloatingPortal>
+
+ );
+});
+
+TooltipContent.displayName = 'TooltipContent';
+
+export default TooltipContent;

src/components/ui/Tooltip/fragments/TooltipRoot.tsx

@@ -0,0 +1,63 @@
+import React, { useState, useRef } from 'react';
+
+import TooltipContext from '../context/TooltipContext';
+import { useFloating, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, arrow } from '@floating-ui/react';
+
+const COMPONENT_NAME = 'Tooltip';
+
+const TooltipRoot = ({ children, placement = 'top' }: { children: React.ReactNode, placement?: Placement } & JSX.IntrinsicElements['div']) => {
+ const arrowRef = useRef<HTMLDivElement>(null);
+
+ const [isOpen, setIsOpen] = useState(false);
+
+ const data = useFloating({
+ placement,
+ strategy: 'fixed',
+ onOpenChange: setIsOpen,
+ middleware: [
+ arrow({
+ element: arrowRef,
+ padding: 4
+ }),
+ offset(5),
+ flip({
+ crossAxis: true,
+ fallbackAxisSideDirection: 'start',
+ padding: 5
+ }),
+ shift({ padding: 5 })
+ ]
+ });
+
+ const context = data.context;
+
+ const hover = useHover(context, {
+ move: false
+ // enabled: isOpen// make this controlled open
+ });
+
+ const focus = useFocus(context, {
+ // enabled: isOpen // make this controlled open
+ });
+
+ const dismiss = useDismiss(context);
+
+ const role = useRole(context, { role: 'tooltip' });
+
+ const interactions = useInteractions([
+ hover,
+ focus,
+ dismiss,
+ role
+ ]);
+
+ return (
+ <TooltipContext.Provider value={{ isOpen, setIsOpen, data, interactions, context }}>
+ {children}
+ </TooltipContext.Provider>
+ );
+};
+
+TooltipRoot.displayName = COMPONENT_NAME;
+
+export default TooltipRoot;

src/components/ui/Tooltip/fragments/TooltipTrigger.tsx

@@ -0,0 +1,25 @@
+import React, { useContext, forwardRef } from 'react';
+
+import TooltipContext from '../context/TooltipContext';
+import Primitive from '~/core/primitives/Primitive';
+import { useMergeRefs } from '@floating-ui/react';
+
+const TooltipTrigger = forwardRef(({ children, asChild, ...props }: { children: React.ReactNode, asChild?: boolean } & JSX.IntrinsicElements['button'], propRef: React.Ref<HTMLButtonElement>) => {
+ const { setIsOpen, isOpen, interactions, data, context } = useContext(TooltipContext);
+
+ const { getReferenceProps } = interactions;
+
+ const childrenRef = (children as any).ref;
+
+ const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+
+ return (
+ <Primitive.button asChild={asChild} ref={ref} data-state={isOpen ? 'open' : 'closed'} {...getReferenceProps(props)} >
+ {children}
+ </Primitive.button>
+ );
+});
+
+TooltipTrigger.displayName = 'TooltipTrigger';
+
+export default TooltipTrigger;

src/components/ui/Tooltip/stories/Tooltip.stories.tsx

@@ -19,11 +19,16 @@ type Story = StoryObj<typeof Tooltip>;
 export const Basic: Story = {
  render: () => (
  <SandboxEditor>
- <div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] justify-center gap-3">
+ <div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] justify-center gap-3 p-[200px]">
  {placement.map((p) => (
- <Tooltip label={p} placement={p} key={p} className='capitalize border border-neutral-600 p-4 rounded-md'>
- <span>{p}</span>
- </Tooltip>
+ <Tooltip.Root key={p} placement={p}>
+ <Tooltip.Trigger asChild>
+ <button className='bg-red-500'>Trigger</button>
+ </Tooltip.Trigger>
+ <Tooltip.Content>
+ <p>{p}</p>
+ </Tooltip.Content>
+ </Tooltip.Root>
  ))}
  </div>
  </SandboxEditor>

src/core/primitives/Floater/index.tsx

@@ -1,4 +1,4 @@
-import { FloatingOverlay, FloatingPortal, FloatingFocusManager, useFloating, FloatingArrow, arrow, useRole, useInteractions, useDismiss, useHover, flip, shift, hide, offset } from '@floating-ui/react';
+import { FloatingOverlay, FloatingPortal, FloatingFocusManager, useFloating, FloatingArrow, arrow, useRole, useInteractions, useDismiss, useHover, useFocus, flip, shift, hide, offset, useMergeRefs } from '@floating-ui/react';
 
 const Floater = {
  Portal: FloatingPortal,
@@ -8,13 +8,15 @@ const Floater = {
  Arrow: FloatingArrow,
  arrow,
  useRole,
+ useFocus,
  useInteractions,
  useDismiss,
  useHover,
  flip,
  shift,
  hide,
- offset
+ offset,
+ useMergeRefs
 };
 
 export default Floater;