@gv-tech/design-system 1.1.0 → 2.0.0

package/src/pages/components/ToastDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Button } from '@/components/ui/button';
 import { useToast } from '@/hooks/use-toast';
 
@@ -7,96 +8,134 @@ export function ToastDocs() {
 
   return (
     <ComponentSection title="Toast" description="A succinct message that is displayed temporarily.">
+      <div className="bg-muted/50 border rounded-lg p-6 space-y-4 mb-8">
+        <h3 className="text-lg font-semibold">Which to use?</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="space-y-2">
+            <h4 className="font-medium text-primary">Toast (Radix UI)</h4>
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              Based on Radix UI. Provides more granular control over individual toast elements. Uses the{' '}
+              <code>useToast</code> hook and is best for situations requiring manual state management or complex, custom
+              toast behavior.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <h4 className="font-medium text-primary">Sonner</h4>
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              An opinionated, modern alternative. Features automatic stacking, swipe-to-dismiss, and a simpler API (
+              <code>toast("message")</code>). Best for general feedback and high-quality UX with minimal effort.
+            </p>
+          </div>
+        </div>
+      </div>
+
       <ComponentShowcase
         title="Default"
-        description="A basic toast notification."
-        code={`const { toast } = useToast();
+        description="A default toast."
+        code={`const { toast } = useToast()
 
-<Button onClick={() => toast({ description: "Your message has been sent." })}>
+<Button
+  variant="outline"
+  onClick={() => {
+    toast({
+      description: "Your message has been sent.",
+    })
+  }}
+>
   Show Toast
 </Button>`}
       >
         <Button
-          onClick={() =>
+          variant="outline"
+          onClick={() => {
             toast({
               description: 'Your message has been sent.',
-            })
-          }
+            });
+          }}
         >
           Show Toast
         </Button>
       </ComponentShowcase>
 
       <ComponentShowcase
-        title="With Title"
-        description="A toast with a title and description."
-        code={`<Button onClick={() => toast({
-  title: "Scheduled: Catch up",
-  description: "Friday, February 10, 2023 at 5:57 PM",
-})}>
-  With Title
-</Button>`}
-      >
-        <Button
-          onClick={() =>
-            toast({
-              title: 'Scheduled: Catch up',
-              description: 'Friday, February 10, 2023 at 5:57 PM',
-            })
-          }
-        >
-          With Title
-        </Button>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="With Action"
-        description="A toast with an action button."
-        code={`<Button onClick={() => toast({
-  title: "Uh oh! Something went wrong.",
-  description: "There was a problem with your request.",
-  action: <ToastAction altText="Try again">Try again</ToastAction>,
-})}>
-  With Action
-</Button>`}
+        title="Destructive"
+        description="A destructive toast."
+        code={`const { toast } = useToast()
+ 
+ <Button
+   variant="outline"
+   onClick={() => {
+     toast({
+       variant: "destructive",
+       title: "Uh oh! Something went wrong.",
+       description: "There was a problem with your request.",
+     })
+   }}
+ >
+   Show Toast
+ </Button>`}
       >
         <Button
           variant="outline"
-          onClick={() =>
+          onClick={() => {
             toast({
+              variant: 'destructive',
               title: 'Uh oh! Something went wrong.',
               description: 'There was a problem with your request.',
-            })
-          }
+            });
+          }}
         >
-          With Action
+          Show Toast
         </Button>
       </ComponentShowcase>
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Toast component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/toast"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Toast
+          </a>
+          .
+        </p>
 
-      <ComponentShowcase
-        title="Destructive"
-        description="A destructive toast for error messages."
-        code={`<Button variant="destructive" onClick={() => toast({
-  variant: "destructive",
-  title: "Error",
-  description: "Something went wrong.",
-})}>
-  Destructive
-</Button>`}
-      >
-        <Button
-          variant="destructive"
-          onClick={() =>
-            toast({
-              variant: 'destructive',
-              title: 'Error',
-              description: 'Something went wrong.',
-            })
-          }
-        >
-          Destructive
-        </Button>
-      </ComponentShowcase>
+        <h4 className="text-lg font-medium mt-6">Toast (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'variant',
+              type: '"default" | "destructive"',
+              defaultValue: '"default"',
+              description: 'The visual variant of the toast.',
+            },
+            {
+              name: 'duration',
+              type: 'number',
+              defaultValue: '5000',
+              description: 'The time in milliseconds that the toast should remain visible for.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">Toaster</h4>
+        <p className="text-sm text-muted-foreground">The Toaster component renders all active toasts.</p>
+
+        <h4 className="text-lg font-medium mt-6">useToast</h4>
+        <p className="text-sm text-muted-foreground">The `useToast` hook is used to trigger toasts.</p>
+        <PropsTable
+          props={[
+            {
+              name: 'toast',
+              type: 'function',
+              description: 'Function to trigger a new toast. Returns an object with `id`, `dismiss`, and `update`.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/ToggleDocs.tsx

@@ -1,13 +1,14 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Toggle } from '@/components/ui/toggle';
-import { Bold, Italic, Underline } from 'lucide-react';
+import { Bold } from 'lucide-react';
 
 export function ToggleDocs() {
   return (
     <ComponentSection title="Toggle" description="A two-state button that can be either on or off.">
       <ComponentShowcase
         title="Default"
-        description="A basic toggle button."
+        description="A default toggle."
         code={`<Toggle aria-label="Toggle bold">
   <Bold className="h-4 w-4" />
 </Toggle>`}
@@ -17,43 +18,59 @@ export function ToggleDocs() {
         </Toggle>
       </ComponentShowcase>
 
-      <ComponentShowcase
-        title="Variants"
-        description="Toggle with outline variant."
-        code={`<Toggle variant="outline" aria-label="Toggle italic">
-  <Italic className="h-4 w-4" />
-</Toggle>`}
-      >
-        <Toggle variant="outline" aria-label="Toggle italic">
-          <Italic className="h-4 w-4" />
-        </Toggle>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="With Text"
-        description="Toggle with text content."
-        code={`<Toggle aria-label="Toggle underline">
-  <Underline className="h-4 w-4 mr-2" />
-  Underline
-</Toggle>`}
-      >
-        <Toggle aria-label="Toggle underline">
-          <Underline className="h-4 w-4 mr-2" />
-          Underline
-        </Toggle>
-      </ComponentShowcase>
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Toggle component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/toggle"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Toggle
+          </a>
+          .
+        </p>
 
-      <ComponentShowcase
-        title="Disabled"
-        description="A disabled toggle."
-        code={`<Toggle disabled aria-label="Toggle bold">
-  <Bold className="h-4 w-4" />
-</Toggle>`}
-      >
-        <Toggle disabled aria-label="Toggle bold">
-          <Bold className="h-4 w-4" />
-        </Toggle>
-      </ComponentShowcase>
+        <h4 className="text-lg font-medium mt-6">Toggle</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultPressed',
+              type: 'boolean',
+              description: 'The pressed state of the toggle when it is initially rendered.',
+            },
+            {
+              name: 'pressed',
+              type: 'boolean',
+              description: 'The controlled pressed state of the toggle.',
+            },
+            {
+              name: 'onPressedChange',
+              type: '(pressed: boolean) => void',
+              description: 'Event handler called when the pressed state of the toggle changes.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with the toggle.',
+            },
+            {
+              name: 'variant',
+              type: '"default" | "outline"',
+              defaultValue: '"default"',
+              description: 'The visual variant of the toggle.',
+            },
+            {
+              name: 'size',
+              type: '"default" | "sm" | "lg"',
+              defaultValue: '"default"',
+              description: 'The size of the toggle.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/ToggleGroupDocs.tsx

@@ -1,41 +1,14 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { AlignCenter, AlignLeft, AlignRight, Bold, Italic, Underline } from 'lucide-react';
+import { Bold, Italic, Underline } from 'lucide-react';
 
 export function ToggleGroupDocs() {
   return (
     <ComponentSection title="Toggle Group" description="A set of two-state buttons that can be toggled on or off.">
       <ComponentShowcase
-        title="Single"
-        description="Only one item can be pressed at a time."
-        code={`<ToggleGroup type="single">
-  <ToggleGroupItem value="left" aria-label="Left aligned">
-    <AlignLeft className="h-4 w-4" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="center" aria-label="Center aligned">
-    <AlignCenter className="h-4 w-4" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="right" aria-label="Right aligned">
-    <AlignRight className="h-4 w-4" />
-  </ToggleGroupItem>
-</ToggleGroup>`}
-      >
-        <ToggleGroup type="single">
-          <ToggleGroupItem value="left" aria-label="Left aligned">
-            <AlignLeft className="h-4 w-4" />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="center" aria-label="Center aligned">
-            <AlignCenter className="h-4 w-4" />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="right" aria-label="Right aligned">
-            <AlignRight className="h-4 w-4" />
-          </ToggleGroupItem>
-        </ToggleGroup>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Multiple"
-        description="Multiple items can be pressed at the same time."
+        title="Default"
+        description="A default toggle group."
         code={`<ToggleGroup type="multiple">
   <ToggleGroupItem value="bold" aria-label="Toggle bold">
     <Bold className="h-4 w-4" />
@@ -61,33 +34,98 @@ export function ToggleGroupDocs() {
         </ToggleGroup>
       </ComponentShowcase>
 
-      <ComponentShowcase
-        title="Outline Variant"
-        description="Toggle group with outline styling."
-        code={`<ToggleGroup variant="outline" type="single">
-  <ToggleGroupItem value="left" aria-label="Left aligned">
-    <AlignLeft className="h-4 w-4" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="center" aria-label="Center aligned">
-    <AlignCenter className="h-4 w-4" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="right" aria-label="Right aligned">
-    <AlignRight className="h-4 w-4" />
-  </ToggleGroupItem>
-</ToggleGroup>`}
-      >
-        <ToggleGroup variant="outline" type="single">
-          <ToggleGroupItem value="left" aria-label="Left aligned">
-            <AlignLeft className="h-4 w-4" />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="center" aria-label="Center aligned">
-            <AlignCenter className="h-4 w-4" />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="right" aria-label="Right aligned">
-            <AlignRight className="h-4 w-4" />
-          </ToggleGroupItem>
-        </ToggleGroup>
-      </ComponentShowcase>
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The ToggleGroup component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/toggle-group"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Toggle Group
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">ToggleGroup (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'type',
+              type: '"single" | "multiple"',
+              required: true,
+              description: 'Determines whether a single or multiple items can be pressed at a time.',
+            },
+            {
+              name: 'defaultValue',
+              type: 'string | string[]',
+              description: 'The value of the item to show as pressed when initially rendered.',
+            },
+            {
+              name: 'value',
+              type: 'string | string[]',
+              description: 'The controlled value of the pressed item.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string | string[]) => void',
+              description: 'Event handler called when the value changes.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with the toggle group.',
+            },
+            {
+              name: 'rovingFocus',
+              type: 'boolean',
+              defaultValue: 'true',
+              description: 'When false, roving focus is disabled.',
+            },
+            {
+              name: 'orientation',
+              type: '"horizontal" | "vertical"',
+              description: 'The orientation of the component.',
+            },
+            {
+              name: 'dir',
+              type: '"ltr" | "rtl"',
+              description: 'The reading direction of the toggle group.',
+            },
+            {
+              name: 'variant',
+              type: '"default" | "outline"',
+              defaultValue: '"default"',
+              description: 'The visual variant of the toggle group.',
+            },
+            {
+              name: 'size',
+              type: '"default" | "sm" | "lg"',
+              defaultValue: '"default"',
+              description: 'The size of the toggle group.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">ToggleGroupItem</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'value',
+              type: 'string',
+              required: true,
+              description: 'A unique value for the item.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with the item.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/TooltipDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
@@ -10,11 +11,11 @@ export function TooltipDocs() {
     >
       <ComponentShowcase
         title="Default"
-        description="A basic tooltip."
+        description="A default tooltip."
         code={`<TooltipProvider>
   <Tooltip>
     <TooltipTrigger asChild>
-      <Button variant="outline">Hover me</Button>
+      <Button variant="outline">Hover</Button>
     </TooltipTrigger>
     <TooltipContent>
       <p>Add to library</p>
@@ -25,7 +26,7 @@ export function TooltipDocs() {
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button variant="outline">Hover me</Button>
+              <Button variant="outline">Hover</Button>
             </TooltipTrigger>
             <TooltipContent>
               <p>Add to library</p>
@@ -33,6 +34,114 @@ export function TooltipDocs() {
           </Tooltip>
         </TooltipProvider>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Tooltip component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/tooltip"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Tooltip
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">TooltipProvider</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'delayDuration',
+              type: 'number',
+              defaultValue: '700',
+              description: 'The duration from when the mouse enters a tooltip trigger until the tooltip opens.',
+            },
+            {
+              name: 'skipDelayDuration',
+              type: 'number',
+              defaultValue: '300',
+              description: 'How much time a user has to enter another trigger without incurring a delay again.',
+            },
+            {
+              name: 'disableHoverableContent',
+              type: 'boolean',
+              description:
+                'When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">Tooltip (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultOpen',
+              type: 'boolean',
+              description: 'The open state of the tooltip when it is initially rendered.',
+            },
+            {
+              name: 'open',
+              type: 'boolean',
+              description: 'The controlled open state of the tooltip.',
+            },
+            {
+              name: 'onOpenChange',
+              type: '(open: boolean) => void',
+              description: 'Event handler called when the open state of the tooltip changes.',
+            },
+            {
+              name: 'delayDuration',
+              type: 'number',
+              defaultValue: '700',
+              description: 'The duration from when the mouse enters a tooltip trigger until the tooltip opens.',
+            },
+            {
+              name: 'disableHoverableContent',
+              type: 'boolean',
+              description:
+                'When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">TooltipContent</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'side',
+              type: '"top" | "right" | "bottom" | "left"',
+              defaultValue: '"top"',
+              description: 'The preferred side of the trigger to render against when open.',
+            },
+            {
+              name: 'sideOffset',
+              type: 'number',
+              description: 'The distance in pixels from the trigger.',
+            },
+            {
+              name: 'align',
+              type: '"start" | "center" | "end"',
+              defaultValue: '"center"',
+              description: 'The preferred alignment against the trigger.',
+            },
+            {
+              name: 'alignOffset',
+              type: 'number',
+              description: 'An offset in pixels from the "start" or "end" alignment options.',
+            },
+            {
+              name: 'avoidCollisions',
+              type: 'boolean',
+              defaultValue: 'true',
+              description:
+                'When true, overrides the side and align preferences to prevent collisions with boundary edges.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/index.ts

@@ -1,4 +1,5 @@
 // Getting Started
+export { ColorTokensDocs } from './ColorTokensDocs';
 export { GettingStartedPage, InstallationPage } from './GettingStarted';
 
 // Component Docs
@@ -33,6 +34,7 @@ export { ProgressDocs } from './components/ProgressDocs';
 export { RadioGroupDocs } from './components/RadioGroupDocs';
 export { ResizableDocs } from './components/ResizableDocs';
 export { ScrollAreaDocs } from './components/ScrollAreaDocs';
+export { SearchDocs } from './components/SearchDocs';
 export { SelectDocs } from './components/SelectDocs';
 export { SeparatorDocs } from './components/SeparatorDocs';
 export { SheetDocs } from './components/SheetDocs';
@@ -43,6 +45,7 @@ export { SwitchDocs } from './components/SwitchDocs';
 export { TableDocs } from './components/TableDocs';
 export { TabsDocs } from './components/TabsDocs';
 export { TextareaDocs } from './components/TextareaDocs';
+export { ThemeToggleDocs } from './components/ThemeToggleDocs';
 export { ToastDocs } from './components/ToastDocs';
 export { ToggleDocs } from './components/ToggleDocs';
 export { ToggleGroupDocs } from './components/ToggleGroupDocs';