@gv-tech/design-system 2.5.0 → 2.5.2

package/apps/playground-web/src/pages/native/SearchDocs.tsx

@@ -1,150 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function SearchDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Quick Search"
-        description="A shortcut-ready search trigger for headers. Press Cmd+K or Ctrl+K to open."
-        code={`<Search>
-  <CommandInput placeholder="Type a command or search..." />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Suggestions">
-      <CommandItem>Calendar</CommandItem>
-      <CommandItem>Search Emoji</CommandItem>
-      <CommandItem>Calculator</CommandItem>
-    </CommandGroup>
-  </CommandList>
-</Search>
-<SearchTrigger onClick={() => setOpen(true)} placeholder="Search documentation..." />`}
-      />
-
-      <ComponentShowcase
-        title="Compact Variant"
-        description="A smaller version of the trigger, ideal for dense headers or mobile-first layouts."
-        code={`<SearchTrigger variant="compact" />`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Search Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              required: false,
-              description: 'Whether the search dialog is open.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              required: false,
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'children',
-              type: 'ReactNode',
-              required: false,
-              description: 'The search content (CommandInput, CommandList, etc.).',
-            },
-          ]}
-        />
-      </div>
-
-      <div className="mt-8 space-y-4">
-        <h3 className="text-xl font-semibold">SearchTrigger Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'className',
-              type: 'string',
-              required: false,
-              description: 'Additional CSS classes to apply.',
-            },
-            {
-              name: 'onClick',
-              type: 'MouseEventHandler',
-              required: false,
-              description: 'Click event handler to trigger the search.',
-            },
-            {
-              name: 'placeholder',
-              type: 'string',
-              defaultValue: '"Search docs..."',
-              required: false,
-              description: 'The placeholder text to display in the trigger.',
-            },
-            {
-              name: 'variant',
-              type: '"default" | "compact"',
-              defaultValue: '"default"',
-              required: false,
-              description: 'The visual style of the trigger.',
-            },
-          ]}
-        />
-      </div>
-
-      <div className="mt-12 space-y-6">
-        <div>
-          <h3 className="text-xl font-semibold">Integrations</h3>
-          <p className="mt-2 text-muted-foreground">
-            The Search component is designed to be highly composable, making it easy to integrate with external search
-            providers like Algolia, ElasticSearch, or custom APIs.
-          </p>
-        </div>
-
-        <div className="rounded-lg border bg-muted/50 p-6">
-          <h4 className="font-medium">External Provider Pattern</h4>
-          <p className="mt-1 text-sm text-muted-foreground">
-            You can use the `onValueChange` prop of `CommandInput` to trigger external searches and dynamically render
-            `CommandGroup` and `CommandItem` components with the results.
-          </p>
-          <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-xs">
-            <code>{`const [results, setResults] = React.useState([]);
-
-const handleSearch = async (query) => {
-  const data = await algoliaIndex.search(query);
-  setResults(data.hits);
-};
-
-return (
-  <Search>
-    <CommandInput 
-      placeholder="Search docs..." 
-      onValueChange={handleSearch} 
-    />
-    <CommandList>
-      {results.length > 0 ? (
-        <CommandGroup heading="Results">
-          {results.map((hit) => (
-            <CommandItem key={hit.objectID}>
-              {hit.title}
-            </CommandItem>
-          ))}
-        </CommandGroup>
-      ) : (
-        <CommandEmpty>No results found.</CommandEmpty>
-      )}
-    </CommandList>
-  </Search>
-);`}</code>
-          </pre>
-        </div>
-      </div>
-    </>
-  );
-}

package/apps/playground-web/src/pages/native/SelectDocs.tsx

@@ -1,141 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function SelectDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default select component."
-        code={`<Select>
-  <SelectTrigger className="w-[180px]">
-    <SelectValue placeholder="Select a fruit" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectGroup>
-      <SelectLabel>Fruits</SelectLabel>
-      <SelectItem value="apple" label="Apple">Apple</SelectItem>
-      <SelectItem value="banana" label="Banana">Banana</SelectItem>
-      <SelectItem value="blueberry" label="Blueberry">Blueberry</SelectItem>
-      <SelectItem value="grapes" label="Grapes">Grapes</SelectItem>
-      <SelectItem value="pineapple" label="Pineapple">Pineapple</SelectItem>
-    </SelectGroup>
-  </SelectContent>
-</Select>`}
-      />
-
-      <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>
-    </>
-  );
-}

package/apps/playground-web/src/pages/native/SeparatorDocs.tsx

@@ -1,72 +0,0 @@
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function SeparatorDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A horizontal separator."
-        code={`<div>
-  <div className="space-y-1">
-    <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-    <p className="text-sm text-muted-foreground">
-      An open-source UI component library.
-    </p>
-  </div>
-  <Separator className="my-4" />
-  <div className="flex h-5 items-center space-x-4 text-sm">
-    <div>Blog</div>
-    <Separator orientation="vertical" />
-    <div>Docs</div>
-    <Separator orientation="vertical" />
-    <div>Source</div>
-  </div>
-</div>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Separator component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/separator"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Separator
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Separator (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'orientation',
-              type: '"horizontal" | "vertical"',
-              defaultValue: '"horizontal"',
-              description: 'The orientation of the separator.',
-            },
-            {
-              name: 'decorative',
-              type: 'boolean',
-              description:
-                'When true, signifies that it is purely visual, covers it from the accessibility tree. When false, signifies that it is a semantic separator.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

package/apps/playground-web/src/pages/native/SheetDocs.tsx

@@ -1,140 +0,0 @@
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function SheetDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default sheet."
-        code={`<Sheet>
-  <SheetTrigger asChild>
-    <Button variant="outline">Open</Button>
-  </SheetTrigger>
-  <SheetContent>
-    <SheetHeader>
-      <SheetTitle>Edit profile</SheetTitle>
-      <SheetDescription>
-        Make changes to your profile here. Click save when you're done.
-      </SheetDescription>
-    </SheetHeader>
-    <div className="grid gap-4 py-4">
-      <div className="grid grid-cols-4 items-center gap-4">
-        <Label htmlFor="name" className="text-right">
-          Name
-        </Label>
-        <Input id="name" value="Pedro Duarte" className="col-span-3" />
-      </div>
-      <div className="grid grid-cols-4 items-center gap-4">
-        <Label htmlFor="username" className="text-right">
-          Username
-        </Label>
-        <Input id="username" value="@peduarte" className="col-span-3" />
-      </div>
-    </div>
-    <SheetFooter>
-      <SheetClose asChild>
-        <Button type="submit">Save changes</Button>
-      </SheetClose>
-    </SheetFooter>
-  </SheetContent>
-</Sheet>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Sheet component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/dialog"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Dialog
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Sheet (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the sheet.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'defaultOpen',
-              type: 'boolean',
-              description: 'The open state of the sheet when it is initially rendered.',
-            },
-            {
-              name: 'modal',
-              type: 'boolean',
-              defaultValue: 'true',
-              description: 'The modality of the sheet.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">SheetContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'side',
-              type: '"top" | "bottom" | "left" | "right"',
-              defaultValue: '"right"',
-              description: 'The side of the screen where the sheet appears.',
-            },
-            {
-              name: 'onOpenAutoFocus',
-              type: '(event: Event) => void',
-              description: 'Event handler called when focus moves into the component after opening.',
-            },
-            {
-              name: 'onCloseAutoFocus',
-              type: '(event: Event) => void',
-              description: 'Event handler called when focus moves to the trigger after closing.',
-            },
-            {
-              name: 'onEscapeKeyDown',
-              type: '(event: KeyboardEvent) => void',
-              description: 'Event handler called when the escape key is down.',
-            },
-            {
-              name: 'onPointerDownOutside',
-              type: '(event: PointerDownOutsideEvent) => void',
-              description: 'Event handler called when a pointer event occurs outside the bounds of the component.',
-            },
-            {
-              name: 'onInteractOutside',
-              type: '(event: PointerDownOutsideEvent | FocusOutsideEvent) => void',
-              description:
-                'Event handler called when an interaction (pointer or focus) happens outside the bounds of the component.',
-            },
-            {
-              name: 'forceMount',
-              type: 'boolean',
-              description: 'Used to force mounting when more control is needed.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

package/apps/playground-web/src/pages/native/SkeletonDocs.tsx

@@ -1,44 +0,0 @@
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function SkeletonDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default skeleton."
-        code={`<div className="flex items-center space-x-4">
-  <Skeleton className="h-12 w-12 rounded-full" />
-  <div className="space-y-2">
-    <Skeleton className="h-4 w-[250px]" />
-    <Skeleton className="h-4 w-[200px]" />
-  </div>
-</div>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-
-        <h4 className="text-lg font-medium mt-6">Skeleton</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Additional class names to apply.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

package/apps/playground-web/src/pages/native/SliderDocs.tsx

@@ -1,118 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function SliderDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default slider."
-        code={`<Slider defaultValue={[33]} max={100} step={1} />`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Slider component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/slider"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Slider
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Slider (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'defaultValue',
-              type: 'number[]',
-              description: 'The value of the slider when initially rendered.',
-            },
-            {
-              name: 'value',
-              type: 'number[]',
-              description: 'The controlled value of the slider.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: number[]) => void',
-              description: 'Event handler called when the value changes.',
-            },
-            {
-              name: 'onValueCommit',
-              type: '(value: number[]) => void',
-              description: 'Event handler called when the value changes at the end of an interaction.',
-            },
-            {
-              name: 'name',
-              type: 'string',
-              description: 'The name of the slider. 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 the slider.',
-            },
-            {
-              name: 'orientation',
-              type: '"horizontal" | "vertical"',
-              defaultValue: '"horizontal"',
-              description: 'The orientation of the slider.',
-            },
-            {
-              name: 'dir',
-              type: '"ltr" | "rtl"',
-              description: 'The reading direction of the slider.',
-            },
-            {
-              name: 'min',
-              type: 'number',
-              defaultValue: '0',
-              description: 'The minimum value for the range.',
-            },
-            {
-              name: 'max',
-              type: 'number',
-              defaultValue: '100',
-              description: 'The maximum value for the range.',
-            },
-            {
-              name: 'step',
-              type: 'number',
-              defaultValue: '1',
-              description: 'The stepping interval.',
-            },
-            {
-              name: 'minStepsBetweenThumbs',
-              type: 'number',
-              defaultValue: '0',
-              description: 'The minimum permitted step difference between thumbs.',
-            },
-            {
-              name: 'inverted',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Whether the slider is visually inverted.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}