@a2v2ai/uikit 0.0.36 → 0.0.38

package/Slider/Slider.stories.tsx

@@ -0,0 +1,216 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Slider } from "./Slider"
+
+const meta: Meta<typeof Slider> = {
+  title: "Components/Slider",
+  component: Slider,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    defaultValue: {
+      control: "object",
+      description: "The default value of the slider",
+    },
+    max: {
+      control: "number",
+      description: "The maximum value",
+    },
+    min: {
+      control: "number",
+      description: "The minimum value",
+    },
+    step: {
+      control: "number",
+      description: "The step increment",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the slider is disabled",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <Slider defaultValue={[50]} max={100} step={1} />
+    </div>
+  ),
+}
+
+export const WithValue: Story = {
+  render: function Render() {
+    const [value, setValue] = useState([50])
+
+    return (
+      <div className="w-[300px]">
+        <Flex direction="row" justify="between" className="mb-2">
+          <Typography variant="body2">Volume</Typography>
+          <Typography variant="body2">{value[0]}%</Typography>
+        </Flex>
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          max={100}
+          step={1}
+        />
+      </div>
+    )
+  },
+}
+
+export const Temperature: Story = {
+  render: function Render() {
+    const [value, setValue] = useState([0.5])
+
+    return (
+      <div className="w-[300px] bg-white p-4 rounded-lg">
+        <Flex direction="row" justify="between" className="mb-4">
+          <Typography variant="body1" color="main-900">Temperature</Typography>
+          <Typography variant="body1" color="main-900">{value[0].toFixed(1)}</Typography>
+        </Flex>
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          max={1}
+          min={0}
+          step={0.1}
+        />
+        <Flex direction="row" justify="between" className="mt-2">
+          <Typography variant="body2" color="grey-400">Reserved</Typography>
+          <Typography variant="body2" color="grey-400">Creative</Typography>
+        </Flex>
+      </div>
+    )
+  },
+}
+
+export const Range: Story = {
+  render: function Render() {
+    const [value, setValue] = useState([25, 75])
+
+    return (
+      <div className="w-[300px]">
+        <Flex direction="row" justify="between" className="mb-2">
+          <Typography variant="body2">Price Range</Typography>
+          <Typography variant="body2">${value[0]} - ${value[1]}</Typography>
+        </Flex>
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          max={100}
+          step={1}
+        />
+      </div>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <Slider defaultValue={[50]} max={100} step={1} disabled />
+    </div>
+  ),
+}
+
+export const CustomStep: Story = {
+  render: function Render() {
+    const [value, setValue] = useState([5])
+
+    return (
+      <div className="w-[300px]">
+        <Flex direction="row" justify="between" className="mb-2">
+          <Typography variant="body2">Steps of 5</Typography>
+          <Typography variant="body2">{value[0]}</Typography>
+        </Flex>
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          max={100}
+          min={0}
+          step={5}
+        />
+      </div>
+    )
+  },
+}
+
+export const AllVariants: Story = {
+  render: function Render() {
+    const [volume, setVolume] = useState([50])
+    const [temperature, setTemperature] = useState([0.5])
+    const [priceRange, setPriceRange] = useState([25, 75])
+
+    return (
+      <Flex gap={6} className="w-[350px]">
+        <Typography variant="h4" className="text-white">Slider Examples</Typography>
+
+        <div className="bg-white p-4 rounded-lg space-y-6">
+          <Flex gap={2}>
+            <Flex direction="row" justify="between">
+              <Typography variant="body2" color="main-900">Volume</Typography>
+              <Typography variant="body2" color="main-900">{volume[0]}%</Typography>
+            </Flex>
+            <Slider
+              value={volume}
+              onValueChange={setVolume}
+              max={100}
+              step={1}
+            />
+          </Flex>
+
+          <Flex gap={2}>
+            <Flex direction="row" justify="between">
+              <Typography variant="body2" color="main-900">Temperature</Typography>
+              <Typography variant="body2" color="main-900">{temperature[0].toFixed(1)}</Typography>
+            </Flex>
+            <Slider
+              value={temperature}
+              onValueChange={setTemperature}
+              max={1}
+              min={0}
+              step={0.1}
+            />
+            <Flex direction="row" justify="between">
+              <Typography variant="caption" color="grey-400">Reserved</Typography>
+              <Typography variant="caption" color="grey-400">Creative</Typography>
+            </Flex>
+          </Flex>
+
+          <Flex gap={2}>
+            <Flex direction="row" justify="between">
+              <Typography variant="body2" color="main-900">Price Range</Typography>
+              <Typography variant="body2" color="main-900">${priceRange[0]} - ${priceRange[1]}</Typography>
+            </Flex>
+            <Slider
+              value={priceRange}
+              onValueChange={setPriceRange}
+              max={100}
+              step={1}
+            />
+          </Flex>
+
+          <Flex gap={2}>
+            <Typography variant="body2" color="main-900">Disabled</Typography>
+            <Slider
+              defaultValue={[30]}
+              max={100}
+              step={1}
+              disabled
+            />
+          </Flex>
+        </div>
+      </Flex>
+    )
+  },
+}

package/Slider/Slider.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "../lib/utils"
+
+export interface SliderProps
+  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {}
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  SliderProps
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-grey-300">
+      <SliderPrimitive.Range className="absolute h-full bg-main-900" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block size-3 rounded-full border border-main-900 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

package/Spinner/Spinner.stories.tsx

@@ -0,0 +1,210 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Spinner } from "./Spinner"
+import { Typography } from "../Typography/Typography"
+import { Flex } from "../Flex/Flex"
+import { Button } from "../Button/Button"
+
+const meta: Meta<typeof Spinner> = {
+  title: "Components/Spinner",
+  component: Spinner,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "default", "md", "lg", "xl"],
+      description: "The size of the spinner",
+    },
+    variant: {
+      control: "select",
+      options: ["default", "primary", "secondary", "muted", "white"],
+      description: "The color variant of the spinner",
+    },
+    label: {
+      control: "text",
+      description: "Screen reader label for accessibility",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Spinner>
+
+export const Default: Story = {
+  args: {
+    size: "default",
+    variant: "default",
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <Flex direction="row" gap={6} align="center">
+      <Flex  align="center" gap={2}>
+        <Spinner size="sm" />
+        <Typography variant="caption" color="grey-500">sm</Typography>
+      </Flex>
+      <Flex  align="center" gap={2}>
+        <Spinner size="default" />
+        <Typography variant="caption" color="grey-500">default</Typography>
+      </Flex>
+      <Flex  align="center" gap={2}>
+        <Spinner size="md" />
+        <Typography variant="caption" color="grey-500">md</Typography>
+      </Flex>
+      <Flex  align="center" gap={2}>
+        <Spinner size="lg" />
+        <Typography variant="caption" color="grey-500">lg</Typography>
+      </Flex>
+      <Flex  align="center" gap={2}>
+        <Spinner size="xl" />
+        <Typography variant="caption" color="grey-500">xl</Typography>
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <Flex direction="row" gap={6} align="center">
+      <Flex  align="center" gap={2}>
+        <Spinner variant="primary" />
+        <Typography variant="caption" color="grey-500">primary</Typography>
+      </Flex>
+      <Flex  align="center" gap={2}>
+        <Spinner variant="secondary" />
+        <Typography variant="caption" color="grey-500">secondary</Typography>
+      </Flex>
+      <Flex  align="center" gap={2}>
+        <Spinner variant="muted" />
+        <Typography variant="caption" color="grey-500">muted</Typography>
+      </Flex>
+      <Flex  align="center" gap={2} className="bg-main-900 p-4 rounded">
+        <Spinner variant="white" />
+        <Typography variant="caption" className="text-white">white</Typography>
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const WithText: Story = {
+  render: () => (
+    <Flex direction="row" gap={2} align="center">
+      <Spinner size="sm" />
+      <Typography variant="body2">Loading...</Typography>
+    </Flex>
+  ),
+}
+
+export const InButton: Story = {
+  render: () => (
+    <Flex direction="row" gap={4}>
+      <Button disabled>
+        <Spinner size="sm" variant="muted" className="mr-2" />
+        Loading
+      </Button>
+      <Button variant="primary" disabled>
+        <Spinner size="sm" variant="white" className="mr-2" />
+        Submitting
+      </Button>
+    </Flex>
+  ),
+}
+
+export const Centered: Story = {
+  render: () => (
+    <div className="w-64 h-32 border border-grey-200 rounded-lg flex items-center justify-center">
+      <Spinner size="lg" />
+    </div>
+  ),
+}
+
+export const FullPage: Story = {
+  render: () => (
+    <div className="w-96 h-64 border border-grey-200 rounded-lg relative">
+      <div className="absolute inset-0 flex flex-col items-center justify-center bg-white/80">
+        <Spinner size="lg" />
+        <Typography variant="body2" color="grey-500" className="mt-4">
+          Loading content...
+        </Typography>
+      </div>
+    </div>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex  gap={8}>
+      <div>
+        <Typography variant="h4" className="mb-4">Sizes</Typography>
+        <Flex direction="row" gap={6} align="end">
+          <Flex  align="center" gap={2}>
+            <Spinner size="sm" />
+            <Typography variant="caption" color="grey-500">sm (16px)</Typography>
+          </Flex>
+          <Flex  align="center" gap={2}>
+            <Spinner size="default" />
+            <Typography variant="caption" color="grey-500">default (24px)</Typography>
+          </Flex>
+          <Flex  align="center" gap={2}>
+            <Spinner size="md" />
+            <Typography variant="caption" color="grey-500">md (32px)</Typography>
+          </Flex>
+          <Flex  align="center" gap={2}>
+            <Spinner size="lg" />
+            <Typography variant="caption" color="grey-500">lg (48px)</Typography>
+          </Flex>
+          <Flex  align="center" gap={2}>
+            <Spinner size="xl" />
+            <Typography variant="caption" color="grey-500">xl (64px)</Typography>
+          </Flex>
+        </Flex>
+      </div>
+
+      <div>
+        <Typography variant="h4" className="mb-4">Color Variants</Typography>
+        <Flex direction="row" gap={6} align="center">
+          <Flex  align="center" gap={2}>
+            <Spinner variant="primary" size="md" />
+            <Typography variant="caption" color="grey-500">primary</Typography>
+          </Flex>
+          <Flex  align="center" gap={2}>
+            <Spinner variant="secondary" size="md" />
+            <Typography variant="caption" color="grey-500">secondary</Typography>
+          </Flex>
+          <Flex  align="center" gap={2}>
+            <Spinner variant="muted" size="md" />
+            <Typography variant="caption" color="grey-500">muted</Typography>
+          </Flex>
+          <Flex  align="center" gap={2} className="bg-main-900 p-4 rounded-lg">
+            <Spinner variant="white" size="md" />
+            <Typography variant="caption" className="text-white">white</Typography>
+          </Flex>
+        </Flex>
+      </div>
+
+      <div>
+        <Typography variant="h4" className="mb-4">Use Cases</Typography>
+        <Flex direction="row" gap={6} align="center" wrap="wrap">
+          <Flex direction="row" gap={2} align="center" className="border border-grey-200 rounded-lg p-4">
+            <Spinner size="sm" />
+            <Typography variant="body2">Loading data...</Typography>
+          </Flex>
+          <Button disabled className="min-w-32">
+            <Spinner size="sm" variant="muted" className="mr-2" />
+            Loading
+          </Button>
+          <Button variant="primary" disabled className="min-w-32">
+            <Spinner size="sm" variant="white" className="mr-2" />
+            Saving
+          </Button>
+        </Flex>
+      </div>
+    </Flex>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+}

package/Spinner/Spinner.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { cn } from "../lib/utils"
+
+type SpinnerSize = "sm" | "default" | "md" | "lg" | "xl"
+type SpinnerVariant = "default" | "primary" | "secondary" | "muted" | "white"
+
+const spinnerVariants = cva(
+  "animate-spin",
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        default: "size-6",
+        md: "size-8",
+        lg: "size-12",
+        xl: "size-16",
+      },
+      variant: {
+        default: "text-accent-500",
+        primary: "text-accent-500",
+        secondary: "text-grey-500",
+        muted: "text-grey-400",
+        white: "text-white",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+  }
+)
+
+export interface SpinnerProps
+  extends React.SVGAttributes<SVGSVGElement> {
+  size?: SpinnerSize
+  variant?: SpinnerVariant
+  /**
+   * Screen reader label for accessibility
+   * @default "Loading"
+   */
+  label?: string
+}
+
+const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(
+  ({ className, size, variant, label = "Loading", ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        className={cn(spinnerVariants({ size, variant, className }))}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        role="status"
+        aria-label={label}
+        {...props}
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    )
+  }
+)
+Spinner.displayName = "Spinner"
+
+export { Spinner, spinnerVariants }
+export type { SpinnerSize, SpinnerVariant }

package/Switch/Switch.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Label } from "../Label/Label"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Switch } from "./Switch"
+
+const meta: Meta<typeof Switch> = {
+  title: "Components/Switch",
+  component: Switch,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["small", "regular"],
+      description: "The size of the switch",
+    },
+    checked: {
+      control: "boolean",
+      description: "The checked state",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the switch is disabled",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <Switch />,
+}
+
+export const Checked: Story = {
+  render: () => <Switch defaultChecked />,
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <Flex direction="row" align="center" gap={2}>
+      <Switch id="airplane-mode" />
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </Flex>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Flex  gap={3}>
+      <Flex direction="row" align="center" gap={2}>
+        <Switch id="disabled" disabled />
+        <Label htmlFor="disabled" className="opacity-50">Disabled</Label>
+      </Flex>
+      <Flex direction="row" align="center" gap={2}>
+        <Switch id="disabled-checked" disabled defaultChecked />
+        <Label htmlFor="disabled-checked" className="opacity-50">Disabled checked</Label>
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const Small: Story = {
+  render: () => (
+    <Flex direction="row" align="center" gap={2}>
+      <Switch id="small" size="small" />
+      <Label htmlFor="small" className="text-sm">Small switch</Label>
+    </Flex>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex  gap={6}>
+      <Typography variant="h4" className="text-white">Switch States</Typography>
+
+      <Flex  gap={4}>
+        <Flex direction="row" align="center" gap={2}>
+          <Switch id="off" />
+          <Label htmlFor="off">Off</Label>
+        </Flex>
+
+        <Flex direction="row" align="center" gap={2}>
+          <Switch id="on" defaultChecked />
+          <Label htmlFor="on">On</Label>
+        </Flex>
+
+        <Flex direction="row" align="center" gap={2}>
+          <Switch id="disabled-off" disabled />
+          <Label htmlFor="disabled-off" className="opacity-50">Disabled Off</Label>
+        </Flex>
+
+        <Flex direction="row" align="center" gap={2}>
+          <Switch id="disabled-on" disabled defaultChecked />
+          <Label htmlFor="disabled-on" className="opacity-50">Disabled On</Label>
+        </Flex>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">Sizes</Typography>
+
+      <Flex  gap={4}>
+        <Flex direction="row" align="center" gap={2}>
+          <Switch id="small-size" size="small" defaultChecked />
+          <Label htmlFor="small-size" className="text-sm">Small</Label>
+        </Flex>
+
+        <Flex direction="row" align="center" gap={2}>
+          <Switch id="regular-size" size="regular" defaultChecked />
+          <Label htmlFor="regular-size">Regular</Label>
+        </Flex>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">Settings Example</Typography>
+
+      <div className="w-[300px] bg-white rounded-lg p-4 space-y-4">
+        <Flex direction="row" justify="between" align="center">
+          <Flex  gap={1}>
+            <Typography variant="body2">Dark Mode</Typography>
+            <Typography variant="caption" color="grey-500">Enable dark theme</Typography>
+          </Flex>
+          <Switch defaultChecked />
+        </Flex>
+
+        <Flex direction="row" justify="between" align="center">
+          <Flex  gap={1}>
+            <Typography variant="body2">Notifications</Typography>
+            <Typography variant="caption" color="grey-500">Receive push notifications</Typography>
+          </Flex>
+          <Switch />
+        </Flex>
+
+        <Flex direction="row" justify="between" align="center">
+          <Flex  gap={1}>
+            <Typography variant="body2">Auto-save</Typography>
+            <Typography variant="caption" color="grey-500">Save changes automatically</Typography>
+          </Flex>
+          <Switch defaultChecked />
+        </Flex>
+      </div>
+    </Flex>
+  ),
+}