@gv-tech/design-system 2.5.0 → 2.5.2

package/apps/playground-web/src/pages/web/ThemeToggleDocs.tsx

@@ -1,303 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { ThemeToggle } from '@gv-tech/ui-web';
-import { useState } from 'react';
-
-export function ThemeToggleDocs() {
-  const [binaryTheme, setBinaryTheme] = useState('light');
-  const [ternaryTheme, setTernaryTheme] = useState('system');
-  const [customTheme, setCustomTheme] = useState('light');
-
-  return (
-    <>
-      <ComponentShowcase
-        title="Binary Mode"
-        description="The default mode allows toggling between light and dark themes. (Controlled example shown to prevent site theme changes)"
-        code={`<ThemeToggle variant="binary" />`}
-      >
-        <ThemeToggle variant="binary" customTheme={binaryTheme} onThemeChange={setBinaryTheme} />
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Ternary Mode"
-        description="Ternary mode allows choosing between light, dark, and system themes using a dropdown menu. (Controlled example shown to prevent site theme changes)"
-        code={`<ThemeToggle variant="ternary" />`}
-      >
-        <ThemeToggle variant="ternary" customTheme={ternaryTheme} onThemeChange={setTernaryTheme} />
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Controlled Mode"
-        description="You can control the theme externally by passing customTheme and onThemeChange props. This is useful for testing or when using a different theme provider."
-        code={`const [theme, setTheme] = useState('light');
-
-<ThemeToggle
-  customTheme={theme}
-  onThemeChange={setTheme}
-/>
-
-<p>Current Theme: {theme}</p>`}
-      >
-        <div className="flex flex-col items-center gap-4">
-          <ThemeToggle customTheme={customTheme} onThemeChange={setCustomTheme} />
-          <p className="text-sm font-medium">Current Selection: {customTheme}</p>
-        </div>
-      </ComponentShowcase>
-
-      {/* ThemeProvider Section */}
-      <div className="mt-12 space-y-6">
-        <div>
-          <h3 className="text-xl font-semibold">ThemeProvider</h3>
-          <p className="mt-2 text-muted-foreground">
-            The design system exports a pre-configured{' '}
-            <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code> that wraps{' '}
-            <code className="text-sm bg-muted px-1.5 py-0.5 rounded">next-themes</code> with sensible defaults. Wrap
-            your application with it to enable theme switching for all design system components.
-          </p>
-        </div>
-
-        <div className="rounded-md border bg-muted p-4">
-          <pre className="text-xs">
-            <code>
-              {`import { ThemeProvider, ThemeToggle } from '@gv-tech/design-system';
-import '@gv-tech/design-system/style.css';
-
-function App() {
-  return (
-    <ThemeProvider>
-      <ThemeToggle variant="ternary" />
-      {/* Your app content */}
-    </ThemeProvider>
-  );
-}`}
-            </code>
-          </pre>
-        </div>
-
-        <div className="space-y-4">
-          <h4 className="font-medium text-foreground">Defaults</h4>
-          <p className="text-sm text-muted-foreground">
-            Out of the box, <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code> applies these
-            defaults. You can override any of them by passing the corresponding prop.
-          </p>
-          <div className="rounded-md border">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b bg-muted/50">
-                  <th className="p-3 text-left font-medium">Prop</th>
-                  <th className="p-3 text-left font-medium">Default</th>
-                  <th className="p-3 text-left font-medium">Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr className="border-b">
-                  <td className="p-3">
-                    <code className="text-xs bg-muted px-1 py-0.5 rounded">attribute</code>
-                  </td>
-                  <td className="p-3">
-                    <code className="text-xs bg-muted px-1 py-0.5 rounded">"class"</code>
-                  </td>
-                  <td className="p-3 text-muted-foreground">Applies the theme as a CSS class on the HTML element</td>
-                </tr>
-                <tr className="border-b">
-                  <td className="p-3">
-                    <code className="text-xs bg-muted px-1 py-0.5 rounded">defaultTheme</code>
-                  </td>
-                  <td className="p-3">
-                    <code className="text-xs bg-muted px-1 py-0.5 rounded">"system"</code>
-                  </td>
-                  <td className="p-3 text-muted-foreground">Respects the user's operating system preference</td>
-                </tr>
-                <tr>
-                  <td className="p-3">
-                    <code className="text-xs bg-muted px-1 py-0.5 rounded">enableSystem</code>
-                  </td>
-                  <td className="p-3">
-                    <code className="text-xs bg-muted px-1 py-0.5 rounded">true</code>
-                  </td>
-                  <td className="p-3 text-muted-foreground">Enables automatic detection of the OS color scheme</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        <div className="rounded-md border bg-muted p-4">
-          <p className="text-xs font-medium text-muted-foreground mb-2">Overriding defaults:</p>
-          <pre className="text-xs">
-            <code>
-              {`<ThemeProvider
-  defaultTheme="dark"
-  storageKey="my-app-theme"
-  themes={['light', 'dark', 'ocean']}
->
-  <App />
-</ThemeProvider>`}
-            </code>
-          </pre>
-        </div>
-      </div>
-
-      {/* useTheme Section */}
-      <div className="mt-12 space-y-4">
-        <h3 className="text-xl font-semibold">useTheme Hook</h3>
-        <p className="text-sm text-muted-foreground">
-          The <code className="text-sm bg-muted px-1.5 py-0.5 rounded">useTheme</code> hook provides access to the
-          current theme, theme controls, and the active design tokens. It must be used within a{' '}
-          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code>.
-        </p>
-        <div className="rounded-md border bg-muted p-4">
-          <pre className="text-xs">
-            <code>
-              {`import { useTheme } from '@gv-tech/design-system';
-
-export function MyComponent() {
-  const { theme, setTheme, resolvedTheme, tokens } = useTheme();
-
-  return (
-    <div style={{ backgroundColor: tokens.background }}>
-      <p>Current theme: {theme}</p>
-      <p>Resolved theme: {resolvedTheme}</p>
-      <button onClick={() => setTheme('dark')}>Dark Mode</button>
-    </div>
-  );
-}`}
-            </code>
-          </pre>
-        </div>
-
-        <PropsTable
-          props={[
-            {
-              name: 'theme',
-              type: 'string',
-              required: false,
-              description: 'The current theme name ("light", "dark", or "system").',
-            },
-            {
-              name: 'setTheme',
-              type: '(theme: string) => void',
-              required: false,
-              description: 'Function to programmatically change the theme.',
-            },
-            {
-              name: 'resolvedTheme',
-              type: 'string',
-              required: false,
-              description:
-                'The resolved theme ("light" or "dark"). Useful when theme is "system" and you need the actual value.',
-            },
-            {
-              name: 'tokens',
-              type: 'ThemeTokens',
-              required: false,
-              description:
-                'The active color tokens for the current resolved theme (light or dark). Contains background, foreground, primary, and other design token values.',
-            },
-          ]}
-        />
-      </div>
-
-      {/* ThemeToggle Props Section */}
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">ThemeToggle Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'variant',
-              type: '"binary" | "ternary"',
-              defaultValue: '"binary"',
-              required: false,
-              description:
-                "The toggle behavior. 'binary' switches between light/dark, while 'ternary' includes system.",
-            },
-            {
-              name: 'onThemeChange',
-              type: '(theme: string) => void',
-              required: false,
-              description: 'Optional callback for custom theme management logic.',
-            },
-            {
-              name: 'customTheme',
-              type: 'string',
-              required: false,
-              description: 'Overrides the internal theme detection (useful for previews or external control).',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              required: false,
-              description: 'Additional CSS classes for the toggle button.',
-            },
-          ]}
-        />
-      </div>
-
-      {/* Integration Section */}
-      <div className="mt-12 space-y-6">
-        <div>
-          <h3 className="text-xl font-semibold">Integration</h3>
-          <p className="mt-2 text-muted-foreground">
-            The <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeToggle</code> component works seamlessly
-            with the design system's <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code>. It
-            can also be used in a fully controlled manner with any theme provider or custom state.
-          </p>
-        </div>
-
-        <div className="grid gap-6 md:grid-cols-2">
-          <div className="rounded-lg border bg-muted/50 p-6">
-            <h4 className="font-medium text-foreground">With ThemeProvider (Recommended)</h4>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Wrap your app with the design system's{' '}
-              <code className="text-xs bg-muted px-1 py-0.5 rounded">ThemeProvider</code> and drop in the toggle.
-              Everything connects automatically.
-            </p>
-            <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-xs">
-              <code>{`import { ThemeProvider, ThemeToggle } from '@gv-tech/design-system';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-// @ts-ignore
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const isNative = false as boolean;
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-// @ts-ignore
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const platform = 'web' as string;
-
-
-<ThemeProvider>
-  <ThemeToggle />
-</ThemeProvider>`}</code>
-            </pre>
-          </div>
-
-          <div className="rounded-lg border bg-muted/50 p-6">
-            <h4 className="font-medium text-foreground">Controlled / Custom State</h4>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Pass your own theme state and change handler to integrate with custom logic or external storage.
-            </p>
-            <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-xs">
-              <code>{`const [theme, setTheme] = useState("light")
-
-<ThemeToggle 
-  customTheme={theme} 
-  onThemeChange={setTheme} 
-/>`}</code>
-            </pre>
-          </div>
-        </div>
-
-        <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-6">
-          <h4 className="font-medium text-amber-600 dark:text-amber-400">⚠️ Important: Shared Context</h4>
-          <p className="mt-1 text-sm text-muted-foreground">
-            The design system marks <code className="text-xs bg-muted px-1 py-0.5 rounded">next-themes</code> as a{' '}
-            <strong>peer dependency</strong>, meaning it uses the same instance as your project. This ensures that{' '}
-            <code className="text-xs bg-muted px-1 py-0.5 rounded">useTheme</code>,{' '}
-            <code className="text-xs bg-muted px-1 py-0.5 rounded">ThemeToggle</code>, and your own components all share
-            the same theme context — no duplicate providers needed.
-          </p>
-        </div>
-      </div>
-    </>
-  );
-}

package/apps/playground-web/src/pages/web/ToastDocs.tsx

@@ -1,149 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button, useToast } from '@gv-tech/ui-web';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function ToastDocs() {
-  const { toast } = useToast();
-
-  return (
-    <>
-      <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 default toast."
-        code={`const { toast } = useToast()
-
-<Button
-  variant="outline"
-  onClick={() => {
-    toast({
-      description: "Your message has been sent.",
-    })
-  }}
->
-  Show Toast
-</Button>`}
-      >
-        <Button
-          variant="outline"
-          onClick={() => {
-            toast({
-              description: 'Your message has been sent.',
-            });
-          }}
-        >
-          Show Toast
-        </Button>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        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={() => {
-            toast({
-              variant: 'destructive',
-              title: 'Uh oh! Something went wrong.',
-              description: 'There was a problem with your request.',
-            });
-          }}
-        >
-          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>
-
-        <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>
-    </>
-  );
-}

package/apps/playground-web/src/pages/web/ToggleDocs.tsx

@@ -1,85 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Toggle } from '@gv-tech/ui-web';
-import { Bold } from 'lucide-react';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function ToggleDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default toggle."
-        code={`<Toggle aria-label="Toggle bold">
-  <Bold className="h-4 w-4" />
-</Toggle>`}
-      >
-        <Toggle aria-label="Toggle bold" pressed={false} onPressedChange={() => {}}>
-          <Bold className="h-4 w-4" />
-        </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>
-
-        <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>
-    </>
-  );
-}

package/apps/playground-web/src/pages/web/ToggleGroupDocs.tsx

@@ -1,140 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { ToggleGroup, ToggleGroupItem } from '@gv-tech/ui-web';
-import { Bold, Italic, Underline } from 'lucide-react';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function ToggleGroupDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default toggle group."
-        code={`<ToggleGroup type="multiple">
-  <ToggleGroupItem value="bold" aria-label="Toggle bold">
-    <Bold className="h-4 w-4" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="italic" aria-label="Toggle italic">
-    <Italic className="h-4 w-4" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="underline" aria-label="Toggle underline">
-    <Underline className="h-4 w-4" />
-  </ToggleGroupItem>
-</ToggleGroup>`}
-      >
-        <ToggleGroup type="multiple">
-          <ToggleGroupItem value="bold" aria-label="Toggle bold">
-            <Bold className="h-4 w-4" />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="italic" aria-label="Toggle italic">
-            <Italic className="h-4 w-4" />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="underline" aria-label="Toggle underline">
-            <Underline 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>
-    </>
-  );
-}