@a2v2ai/uikit 0.0.1 → 0.0.3

package/InputOTP/InputOTP.stories.tsx

@@ -0,0 +1,246 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+} from "./InputOTP"
+import { Typography } from "../Typography/Typography"
+import { Flex } from "../Flex/Flex"
+
+const meta: Meta<typeof InputOTP> = {
+  title: "Components/InputOTP",
+  component: InputOTP,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof InputOTP>
+
+export const Default: Story = {
+  render: () => (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+}
+
+export const WithSeparator: Story = {
+  render: () => (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+}
+
+export const FourDigits: Story = {
+  render: () => (
+    <InputOTP maxLength={4}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <InputOTP maxLength={6} disabled>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+}
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = React.useState("")
+
+    return (
+      <Flex direction="column" gap={4} align="center">
+        <InputOTP
+          maxLength={6}
+          value={value}
+          onChange={(value: string) => setValue(value)}
+        >
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+        <Typography variant="body2" color="grey-500">
+          Value: {value || "(empty)"}
+        </Typography>
+      </Flex>
+    )
+  },
+}
+
+export const WithPattern: Story = {
+  render: () => (
+    <Flex direction="column" gap={4} align="center">
+      <Typography variant="body2" color="grey-500">
+        Only digits allowed
+      </Typography>
+      <InputOTP maxLength={6} pattern="^[0-9]+$">
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Flex>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <Flex direction="column" gap={6} align="center">
+      <div>
+        <Typography variant="body2" color="grey-500" className="mb-2 text-center">
+          Small
+        </Typography>
+        <InputOTP maxLength={4}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} slotSize="sm" />
+            <InputOTPSlot index={1} slotSize="sm" />
+            <InputOTPSlot index={2} slotSize="sm" />
+            <InputOTPSlot index={3} slotSize="sm" />
+          </InputOTPGroup>
+        </InputOTP>
+      </div>
+      <div>
+        <Typography variant="body2" color="grey-500" className="mb-2 text-center">
+          Default
+        </Typography>
+        <InputOTP maxLength={4}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+          </InputOTPGroup>
+        </InputOTP>
+      </div>
+      <div>
+        <Typography variant="body2" color="grey-500" className="mb-2 text-center">
+          Large
+        </Typography>
+        <InputOTP maxLength={4}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} slotSize="lg" />
+            <InputOTPSlot index={1} slotSize="lg" />
+            <InputOTPSlot index={2} slotSize="lg" />
+            <InputOTPSlot index={3} slotSize="lg" />
+          </InputOTPGroup>
+        </InputOTP>
+      </div>
+    </Flex>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={8}>
+      <div>
+        <Typography variant="h4" className="mb-4">6-Digit Code</Typography>
+        <InputOTP maxLength={6}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+      </div>
+
+      <div>
+        <Typography variant="h4" className="mb-4">With Separator (3-3)</Typography>
+        <InputOTP maxLength={6}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+          </InputOTPGroup>
+          <InputOTPSeparator />
+          <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+      </div>
+
+      <div>
+        <Typography variant="h4" className="mb-4">4-Digit PIN</Typography>
+        <InputOTP maxLength={4}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+          </InputOTPGroup>
+        </InputOTP>
+      </div>
+
+      <div>
+        <Typography variant="h4" className="mb-4">Disabled State</Typography>
+        <InputOTP maxLength={6} disabled>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+      </div>
+    </Flex>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+}

package/InputOTP/InputOTP.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Minus } from "lucide-react"
+import { cva } from "class-variance-authority"
+import { cn } from "../lib/utils"
+
+type InputOTPSlotSize = "sm" | "default" | "lg"
+
+const inputOTPVariants = cva(
+  "flex items-center gap-2 has-[:disabled]:opacity-50",
+  {
+    variants: {},
+    defaultVariants: {},
+  }
+)
+
+export interface InputOTPProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof OTPInput>, "render"> {
+  children?: React.ReactNode
+}
+
+const InputOTP = React.forwardRef<HTMLInputElement, InputOTPProps>(
+  ({ className, containerClassName, children, ...props }, ref) => (
+    <OTPInput
+      ref={ref}
+      containerClassName={cn(
+        "flex items-center gap-2 has-[:disabled]:opacity-50",
+        containerClassName
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+      render={({ slots, isFocused, isHovering }) => (
+        <OTPInputContext.Provider value={{ slots, isFocused, isHovering }}>
+          {children}
+        </OTPInputContext.Provider>
+      )}
+    />
+  )
+)
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const inputOTPSlotVariants = cva(
+  // Match Input component styles: border-grey-300, rounded-lg, focus ring
+  "relative flex items-center justify-center bg-white border border-grey-300 text-main-950 font-sans transition-all first:rounded-l-lg last:rounded-r-lg first:border-l border-l-0",
+  {
+    variants: {
+      slotSize: {
+        sm: "h-8 w-8 text-sm rounded-md first:rounded-l-md last:rounded-r-md",
+        default: "h-9 w-9 text-sm",
+        lg: "h-10 w-10 text-base",
+      },
+    },
+    defaultVariants: {
+      slotSize: "default",
+    },
+  }
+)
+
+export interface InputOTPSlotProps
+  extends React.ComponentPropsWithoutRef<"div"> {
+  index: number
+  slotSize?: InputOTPSlotSize
+}
+
+const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(
+  ({ index, className, slotSize, ...props }, ref) => {
+    const inputOTPContext = React.useContext(OTPInputContext)
+    const slot = inputOTPContext.slots[index]
+
+    if (!slot) {
+      return null
+    }
+
+    const { char, hasFakeCaret, isActive } = slot
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          inputOTPSlotVariants({ slotSize }),
+          // Match Input focus style: ring-[3px] ring-grey-300/50
+          isActive && "z-10 border-grey-300 ring-[3px] ring-grey-300/50",
+          className
+        )}
+        {...props}
+      >
+        {char}
+        {hasFakeCaret && (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            <div className="h-4 w-px animate-caret-blink bg-main-950 duration-1000" />
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Minus className="text-grey-400" />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+  inputOTPVariants,
+  inputOTPSlotVariants,
+}
+export type { InputOTPSlotSize }

package/Label/Label.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Input } from "../Input/Input"
+import { Checkbox } from "../Checkbox/Checkbox"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Label } from "./Label"
+
+const meta: Meta<typeof Label> = {
+  title: "Components/Label",
+  component: Label,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "muted", "error"],
+      description: "The visual variant of the label",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <Label>Email address</Label>,
+}
+
+export const WithInput: Story = {
+  render: () => (
+    <Flex direction="column" gap={2} className="w-[300px]">
+      <Label htmlFor="email">Email</Label>
+      <Input type="email" id="email" placeholder="Enter your email" />
+    </Flex>
+  ),
+}
+
+export const WithCheckbox: Story = {
+  render: () => (
+    <Flex align="center" gap={2}>
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </Flex>
+  ),
+}
+
+export const Muted: Story = {
+  render: () => <Label variant="muted">Optional field</Label>,
+}
+
+export const Error: Story = {
+  render: () => (
+    <Flex direction="column" gap={2} className="w-[300px]">
+      <Label htmlFor="email-error" variant="error">Email</Label>
+      <Input type="email" id="email-error" variant="error" placeholder="Enter your email" />
+      <Typography variant="caption" color="error-500">Please enter a valid email address</Typography>
+    </Flex>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={6}>
+      <Typography variant="h4" className="text-white">Label Variants</Typography>
+
+      <Flex direction="column" gap={4}>
+        <Flex direction="column" gap={2} className="w-[300px]">
+          <Label htmlFor="default">Default Label</Label>
+          <Input id="default" placeholder="Default input" />
+        </Flex>
+
+        <Flex direction="column" gap={2} className="w-[300px]">
+          <Flex gap={2} align="center">
+            <Label htmlFor="with-optional">Name</Label>
+            <Label variant="muted">(optional)</Label>
+          </Flex>
+          <Input id="with-optional" placeholder="Enter your name" />
+        </Flex>
+
+        <Flex direction="column" gap={2} className="w-[300px]">
+          <Label htmlFor="error-field" variant="error">Password</Label>
+          <Input id="error-field" type="password" variant="error" placeholder="Enter password" />
+          <Typography variant="caption" color="error-500">Password must be at least 8 characters</Typography>
+        </Flex>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">With Form Controls</Typography>
+
+      <Flex direction="column" gap={3}>
+        <Flex align="center" gap={2}>
+          <Checkbox id="newsletter" />
+          <Label htmlFor="newsletter">Subscribe to newsletter</Label>
+        </Flex>
+
+        <Flex align="center" gap={2}>
+          <Checkbox id="updates" defaultChecked />
+          <Label htmlFor="updates">Receive product updates</Label>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}

package/Label/Label.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type LabelVariant = "default" | "muted" | "error"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      variant: {
+        default: "text-main-950",
+        muted: "text-grey-500",
+        error: "text-error-600",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface LabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+  variant?: LabelVariant
+}
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  LabelProps
+>(({ className, variant, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants({ variant }), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label, labelVariants }
+export type { LabelVariant }

package/Loader/Loader.stories.tsx

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "../Button/Button"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Loader } from "./Loader"
+
+const meta: Meta<typeof Loader> = {
+  title: "Components/Loader",
+  component: Loader,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["mini", "small", "regular", "large"],
+      description: "The size of the loader",
+    },
+    color: {
+      control: "select",
+      options: ["main", "grey", "white", "current"],
+      description: "The color of the loader",
+    },
+    label: {
+      control: "text",
+      description: "Accessibility label for the loader",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Loader>
+
+export const Default: Story = {
+  args: {
+    size: "regular",
+    color: "main",
+  },
+}
+
+export const Mini: Story = {
+  args: {
+    size: "mini",
+    color: "main",
+  },
+}
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    color: "main",
+  },
+}
+
+export const Regular: Story = {
+  args: {
+    size: "regular",
+    color: "main",
+  },
+}
+
+export const Large: Story = {
+  args: {
+    size: "large",
+    color: "main",
+  },
+}
+
+export const Grey: Story = {
+  args: {
+    size: "regular",
+    color: "grey",
+  },
+}
+
+export const White: Story = {
+  args: {
+    size: "regular",
+    color: "white",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="bg-main-600 p-4 rounded-lg">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const InButton: Story = {
+  render: () => (
+    <Button disabled>
+      <Loader size="small" color="current" className="mr-2" />
+      Loading...
+    </Button>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={8}>
+      {/* Sizes */}
+      <Flex direction="column" gap={4}>
+        <Typography variant="subtitle1" color="main-700">Sizes</Typography>
+        <Flex align="center" gap={6}>
+          <Flex direction="column" align="center" gap={2}>
+            <Loader size="mini" />
+            <Typography variant="body3" color="main-500">Mini</Typography>
+          </Flex>
+          <Flex direction="column" align="center" gap={2}>
+            <Loader size="small" />
+            <Typography variant="body3" color="main-500">Small</Typography>
+          </Flex>
+          <Flex direction="column" align="center" gap={2}>
+            <Loader size="regular" />
+            <Typography variant="body3" color="main-500">Regular</Typography>
+          </Flex>
+          <Flex direction="column" align="center" gap={2}>
+            <Loader size="large" />
+            <Typography variant="body3" color="main-500">Large</Typography>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Colors */}
+      <Flex direction="column" gap={4}>
+        <Typography variant="subtitle1" color="main-700">Colors</Typography>
+        <Flex align="center" gap={6}>
+          <Flex direction="column" align="center" gap={2}>
+            <Loader color="main" />
+            <Typography variant="body3" color="main-500">Main</Typography>
+          </Flex>
+          <Flex direction="column" align="center" gap={2}>
+            <Loader color="grey" />
+            <Typography variant="body3" color="main-500">Grey</Typography>
+          </Flex>
+          <Flex direction="column" align="center" gap={2} className="bg-main-600 p-3 rounded-lg">
+            <Loader color="white" />
+            <Typography variant="body3" className="text-white">White</Typography>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Usage Examples */}
+      <Flex direction="column" gap={4}>
+        <Typography variant="subtitle1" color="main-700">Usage Examples</Typography>
+        <Flex direction="column" gap={4}>
+          <Flex align="center" gap={4}>
+            <Button disabled>
+              <Loader size="small" color="current" className="mr-2" />
+              Loading...
+            </Button>
+            <Typography variant="body3" color="main-500">In Button</Typography>
+          </Flex>
+          <Flex align="center" gap={4}>
+            <Flex align="center" gap={2} className="text-main-600">
+              <Loader size="small" color="current" />
+              <Typography variant="body2">Processing...</Typography>
+            </Flex>
+            <Typography variant="body3" color="main-500">Inline with text</Typography>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}