@a2v2ai/uikit 0.0.38 → 0.0.39

package/Slider/Slider.stories.tsx

@@ -1,216 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,210 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,146 +0,0 @@
-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>
-  ),
-}