@gv-tech/design-system 1.1.0 → 1.2.0

package/src/pages/components/RadioGroupDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 
@@ -10,7 +11,7 @@ export function RadioGroupDocs() {
     >
       <ComponentShowcase
         title="Default"
-        description="A basic radio group."
+        description="A default radio group."
         code={`<RadioGroup defaultValue="option-one">
   <div className="flex items-center space-x-2">
     <RadioGroupItem value="option-one" id="option-one" />
@@ -33,6 +34,99 @@ export function RadioGroupDocs() {
           </div>
         </RadioGroup>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Radio Group component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/radio-group"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Radio Group
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">RadioGroup (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultValue',
+              type: 'string',
+              description: 'The value of the radio item that should be checked when initially rendered.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'The controlled value of the radio item to check.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string) => void',
+              description: 'Event handler called when the value changes.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with radio items.',
+            },
+            {
+              name: 'required',
+              type: 'boolean',
+              description:
+                'When true, indicates that the user must check a radio item before the owning form can be submitted.',
+            },
+            {
+              name: 'name',
+              type: 'string',
+              description: 'The name of the group. Submitted with its owning form as part of a name/value pair.',
+            },
+            {
+              name: 'dir',
+              type: '"ltr" | "rtl"',
+              description: 'The reading direction of the radio group.',
+            },
+            {
+              name: 'orientation',
+              type: '"horizontal" | "vertical"',
+              defaultValue: '"vertical"',
+              description: 'The orientation of the component.',
+            },
+            {
+              name: 'loop',
+              type: 'boolean',
+              defaultValue: 'true',
+              description: 'When true, keyboard navigation will loop from last item to first, and vice versa.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">RadioGroupItem</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'value',
+              type: 'string',
+              required: true,
+              description: 'The value given as data when submitted with a name.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with the radio item.',
+            },
+            {
+              name: 'required',
+              type: 'boolean',
+              description:
+                'When true, indicates that the user must check the radio item before the owning form can be submitted.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/ResizableDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 
 export function ResizableDocs() {
@@ -8,9 +9,12 @@ export function ResizableDocs() {
       description="Accessible resizable panel groups and layouts with keyboard support."
     >
       <ComponentShowcase
-        title="Horizontal"
-        description="A horizontally resizable panel group."
-        code={`<ResizablePanelGroup direction="horizontal" className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]">
+        title="Default"
+        description="A resizable panel group with three panels."
+        code={`<ResizablePanelGroup
+  direction="horizontal"
+  className="max-w-md rounded-lg border"
+>
   <ResizablePanel defaultSize={50}>
     <div className="flex h-[200px] items-center justify-center p-6">
       <span className="font-semibold">One</span>
@@ -18,16 +22,23 @@ export function ResizableDocs() {
   </ResizablePanel>
   <ResizableHandle />
   <ResizablePanel defaultSize={50}>
-    <div className="flex h-[200px] items-center justify-center p-6">
-      <span className="font-semibold">Two</span>
-    </div>
+    <ResizablePanelGroup direction="vertical">
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Two</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Three</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
   </ResizablePanel>
 </ResizablePanelGroup>`}
       >
-        <ResizablePanelGroup
-          direction="horizontal"
-          className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
-        >
+        <ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
           <ResizablePanel defaultSize={50}>
             <div className="flex h-[200px] items-center justify-center p-6">
               <span className="font-semibold">One</span>
@@ -35,76 +46,92 @@ export function ResizableDocs() {
           </ResizablePanel>
           <ResizableHandle />
           <ResizablePanel defaultSize={50}>
-            <div className="flex h-[200px] items-center justify-center p-6">
-              <span className="font-semibold">Two</span>
-            </div>
+            <ResizablePanelGroup direction="vertical">
+              <ResizablePanel defaultSize={25}>
+                <div className="flex h-full items-center justify-center p-6">
+                  <span className="font-semibold">Two</span>
+                </div>
+              </ResizablePanel>
+              <ResizableHandle />
+              <ResizablePanel defaultSize={75}>
+                <div className="flex h-full items-center justify-center p-6">
+                  <span className="font-semibold">Three</span>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
           </ResizablePanel>
         </ResizablePanelGroup>
       </ComponentShowcase>
 
-      <ComponentShowcase
-        title="Vertical"
-        description="A vertically resizable panel group."
-        code={`<ResizablePanelGroup direction="vertical" className="min-h-[300px] max-w-md rounded-lg border">
-  <ResizablePanel defaultSize={25}>
-    <div className="flex h-full items-center justify-center p-6">
-      <span className="font-semibold">Header</span>
-    </div>
-  </ResizablePanel>
-  <ResizableHandle />
-  <ResizablePanel defaultSize={75}>
-    <div className="flex h-full items-center justify-center p-6">
-      <span className="font-semibold">Content</span>
-    </div>
-  </ResizablePanel>
-</ResizablePanelGroup>`}
-      >
-        <ResizablePanelGroup direction="vertical" className="min-h-[300px] max-w-md rounded-lg border">
-          <ResizablePanel defaultSize={25}>
-            <div className="flex h-full items-center justify-center p-6">
-              <span className="font-semibold">Header</span>
-            </div>
-          </ResizablePanel>
-          <ResizableHandle />
-          <ResizablePanel defaultSize={75}>
-            <div className="flex h-full items-center justify-center p-6">
-              <span className="font-semibold">Content</span>
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </ComponentShowcase>
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Resizable component is built on top of{' '}
+          <a
+            href="https://github.com/bvaughn/react-resizable-panels"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            react-resizable-panels
+          </a>
+          .
+        </p>
 
-      <ComponentShowcase
-        title="With Handle"
-        description="Resizable panels with a visible handle."
-        code={`<ResizablePanelGroup direction="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
-  <ResizablePanel defaultSize={25}>
-    <div className="flex h-full items-center justify-center p-6">
-      <span className="font-semibold">Sidebar</span>
-    </div>
-  </ResizablePanel>
-  <ResizableHandle withHandle />
-  <ResizablePanel defaultSize={75}>
-    <div className="flex h-full items-center justify-center p-6">
-      <span className="font-semibold">Content</span>
-    </div>
-  </ResizablePanel>
-</ResizablePanelGroup>`}
-      >
-        <ResizablePanelGroup direction="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
-          <ResizablePanel defaultSize={25}>
-            <div className="flex h-full items-center justify-center p-6">
-              <span className="font-semibold">Sidebar</span>
-            </div>
-          </ResizablePanel>
-          <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={75}>
-            <div className="flex h-full items-center justify-center p-6">
-              <span className="font-semibold">Content</span>
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </ComponentShowcase>
+        <h4 className="text-lg font-medium mt-6">ResizablePanelGroup</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'direction',
+              type: '"horizontal" | "vertical"',
+              required: true,
+              description: 'The direction of the panels.',
+            },
+            {
+              name: 'onLayout',
+              type: '(sizes: number[]) => void',
+              description: 'Event handler called when the layout changes.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">ResizablePanel</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultSize',
+              type: 'number',
+              description: 'The initial size of the panel in percent.',
+            },
+            {
+              name: 'minSize',
+              type: 'number',
+              description: 'The minimum size of the panel in percent.',
+            },
+            {
+              name: 'maxSize',
+              type: 'number',
+              description: 'The maximum size of the panel in percent.',
+            },
+            {
+              name: 'onResize',
+              type: '(size: number) => void',
+              description: 'Event handler called when the panel is resized.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">ResizableHandle</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'withHandle',
+              type: 'boolean',
+              description: 'Whether to render a grip handle.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/ScrollAreaDocs.tsx

@@ -1,31 +1,27 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 
 const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
 
-const works = [
-  { artist: 'Ornella Binni', art: 'Reflection' },
-  { artist: 'Tom Byrom', art: 'Mountain View' },
-  { artist: 'Vladimir Malyavko', art: 'Harmony' },
-  { artist: 'Magicle', art: 'Dreams' },
-];
-
 export function ScrollAreaDocs() {
   return (
     <ComponentSection
-      title="Scroll Area"
+      title="Scroll-area"
       description="Augments native scroll functionality for custom, cross-browser styling."
     >
       <ComponentShowcase
-        title="Vertical"
-        description="A vertically scrolling area."
+        title="Default"
+        description="A default scroll area."
         code={`<ScrollArea className="h-72 w-48 rounded-md border">
   <div className="p-4">
     <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
     {tags.map((tag) => (
       <>
-        <div key={tag} className="text-sm">{tag}</div>
+        <div key={tag} className="text-sm">
+          {tag}
+        </div>
         <Separator className="my-2" />
       </>
     ))}
@@ -45,45 +41,62 @@ export function ScrollAreaDocs() {
         </ScrollArea>
       </ComponentShowcase>
 
-      <ComponentShowcase
-        title="Horizontal"
-        description="A horizontally scrolling area."
-        code={`<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
-  <div className="flex w-max space-x-4 p-4">
-    {works.map((work) => (
-      <figure key={work.artist} className="shrink-0">
-        <div className="overflow-hidden rounded-md">
-          <div className="h-[150px] w-[150px] bg-muted flex items-center justify-center">
-            {work.art}
-          </div>
-        </div>
-        <figcaption className="pt-2 text-xs text-muted-foreground">
-          Photo by <span className="font-semibold text-foreground">{work.artist}</span>
-        </figcaption>
-      </figure>
-    ))}
-  </div>
-  <ScrollBar orientation="horizontal" />
-</ScrollArea>`}
-      >
-        <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
-          <div className="flex w-max space-x-4 p-4">
-            {works.map((work) => (
-              <figure key={work.artist} className="shrink-0">
-                <div className="overflow-hidden rounded-md">
-                  <div className="h-[150px] w-[150px] bg-muted flex items-center justify-center text-sm">
-                    {work.art}
-                  </div>
-                </div>
-                <figcaption className="pt-2 text-xs text-muted-foreground">
-                  Photo by <span className="font-semibold text-foreground">{work.artist}</span>
-                </figcaption>
-              </figure>
-            ))}
-          </div>
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
-      </ComponentShowcase>
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Scroll Area component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/scroll-area"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Scroll Area
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">ScrollArea (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'type',
+              type: '"auto" | "always" | "scroll" | "hover"',
+              defaultValue: '"hover"',
+              description: 'Describes the nature of scrollbar visibility.',
+            },
+            {
+              name: 'scrollHideDelay',
+              type: 'number',
+              defaultValue: '600',
+              description:
+                'If type is "scroll" or "hover", this property determines how long the scrollbar remains visible before hiding.',
+            },
+            {
+              name: 'dir',
+              type: '"ltr" | "rtl"',
+              description: 'The reading direction of the scroll area.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">ScrollBar</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'orientation',
+              type: '"horizontal" | "vertical"',
+              defaultValue: '"vertical"',
+              description: 'The orientation of the scrollbar.',
+            },
+            {
+              name: 'forceMount',
+              type: 'boolean',
+              description: 'Used to force mounting when more control is needed.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/SelectDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import {
   Select,
   SelectContent,
@@ -13,75 +14,145 @@ export function SelectDocs() {
   return (
     <ComponentSection
       title="Select"
-      description="Displays a list of options for the user to pick from, triggered by a button."
+      description="Displays a list of options for the user to pick from—triggered by a button."
     >
       <ComponentShowcase
         title="Default"
-        description="A basic select component."
+        description="A default select component."
         code={`<Select>
   <SelectTrigger className="w-[180px]">
     <SelectValue placeholder="Select a fruit" />
   </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="apple">Apple</SelectItem>
-    <SelectItem value="banana">Banana</SelectItem>
-    <SelectItem value="orange">Orange</SelectItem>
-  </SelectContent>
-</Select>`}
-      >
-        <Select>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Select a fruit" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="orange">Orange</SelectItem>
-          </SelectContent>
-        </Select>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="With Groups"
-        description="Options can be organized into groups with labels."
-        code={`<Select>
-  <SelectTrigger className="w-[180px]">
-    <SelectValue placeholder="Select a timezone" />
-  </SelectTrigger>
   <SelectContent>
     <SelectGroup>
-      <SelectLabel>North America</SelectLabel>
-      <SelectItem value="est">Eastern Time (EST)</SelectItem>
-      <SelectItem value="cst">Central Time (CST)</SelectItem>
-      <SelectItem value="pst">Pacific Time (PST)</SelectItem>
-    </SelectGroup>
-    <SelectGroup>
-      <SelectLabel>Europe</SelectLabel>
-      <SelectItem value="gmt">GMT</SelectItem>
-      <SelectItem value="cet">Central European Time (CET)</SelectItem>
+      <SelectLabel>Fruits</SelectLabel>
+      <SelectItem value="apple">Apple</SelectItem>
+      <SelectItem value="banana">Banana</SelectItem>
+      <SelectItem value="blueberry">Blueberry</SelectItem>
+      <SelectItem value="grapes">Grapes</SelectItem>
+      <SelectItem value="pineapple">Pineapple</SelectItem>
     </SelectGroup>
   </SelectContent>
 </Select>`}
       >
         <Select>
-          <SelectTrigger className="w-[220px]">
-            <SelectValue placeholder="Select a timezone" />
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select a fruit" />
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
-              <SelectLabel>North America</SelectLabel>
-              <SelectItem value="est">Eastern Time (EST)</SelectItem>
-              <SelectItem value="cst">Central Time (CST)</SelectItem>
-              <SelectItem value="pst">Pacific Time (PST)</SelectItem>
-            </SelectGroup>
-            <SelectGroup>
-              <SelectLabel>Europe</SelectLabel>
-              <SelectItem value="gmt">GMT</SelectItem>
-              <SelectItem value="cet">Central European Time (CET)</SelectItem>
+              <SelectLabel>Fruits</SelectLabel>
+              <SelectItem value="apple">Apple</SelectItem>
+              <SelectItem value="banana">Banana</SelectItem>
+              <SelectItem value="blueberry">Blueberry</SelectItem>
+              <SelectItem value="grapes">Grapes</SelectItem>
+              <SelectItem value="pineapple">Pineapple</SelectItem>
             </SelectGroup>
           </SelectContent>
         </Select>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Select component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/select"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Select
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">Select (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultValue',
+              type: 'string',
+              description: 'The value of the select when initially rendered.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'The controlled value of the select.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string) => void',
+              description: 'Event handler called when the value changes.',
+            },
+            {
+              name: 'open',
+              type: 'boolean',
+              description: 'The controlled open state of the select.',
+            },
+            {
+              name: 'onOpenChange',
+              type: '(open: boolean) => void',
+              description: 'Event handler called when the open state changes.',
+            },
+            {
+              name: 'dir',
+              type: '"ltr" | "rtl"',
+              description: 'The reading direction of the select.',
+            },
+            {
+              name: 'name',
+              type: 'string',
+              description: 'The name of the select. Submitted with its owning form as part of a name/value pair.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with select.',
+            },
+            {
+              name: 'required',
+              type: 'boolean',
+              description:
+                'When true, indicates that the user must select a value before the owning form can be submitted.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">SelectTrigger</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'asChild',
+              type: 'boolean',
+              description: 'Change the default rendered element for the one passed as a child.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">SelectItem</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'value',
+              type: 'string',
+              required: true,
+              description: 'The value given as data when submitted with a name.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with the item.',
+            },
+            {
+              name: 'textValue',
+              type: 'string',
+              description:
+                'Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the Item.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }