@a2v2ai/uikit 0.0.36 → 0.0.38

package/Input/Input.tsx

@@ -0,0 +1,168 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Typography } from "../Typography/Typography"
+import { Label } from "../Label/Label"
+import { type TextVariant, type TextColor } from "../lib/typography-types"
+
+type InputSize = "mini" | "small" | "regular" | "large"
+type InputRoundness = "default" | "round"
+type InputVariant = "default" | "error"
+
+const inputVariants = cva(
+  "flex w-full bg-white border font-normal font-sans transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-grey-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-grey-50",
+  {
+    variants: {
+      size: {
+        mini: "h-6 px-3 text-xs rounded-md",
+        small: "h-8 px-3 text-sm rounded-md",
+        regular: "h-9 px-3 text-sm rounded-lg",
+        large: "h-10 px-3 text-base rounded-lg",
+      },
+      roundness: {
+        default: "",
+        round: "!rounded-full",
+      },
+      variant: {
+        default: "border-grey-300 focus-visible:border-grey-300 focus-visible:ring-[3px] focus-visible:ring-grey-300/50",
+        error: "border-error-500 focus-visible:border-error-500 focus-visible:ring-[3px] focus-visible:ring-error-200",
+      },
+    },
+    defaultVariants: {
+      size: "regular",
+      roundness: "default",
+      variant: "default",
+    },
+  }
+)
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  size?: InputSize
+  roundness?: InputRoundness
+  variant?: InputVariant
+  label?: string
+  labelVariant?: TextVariant
+  labelColor?: TextColor
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+  leftAddon?: React.ReactNode
+  rightAddon?: React.ReactNode
+  rightElement?: React.ReactNode
+  error?: string
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      type = "text",
+      size,
+      roundness,
+      variant,
+      label,
+      labelVariant="body2",
+      labelColor="main-800",
+      leftIcon,
+      rightIcon,
+      leftAddon,
+      rightAddon,
+      rightElement,
+      error,
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const hasAddons = leftIcon || rightIcon || leftAddon || rightAddon || rightElement
+    const computedVariant = error ? "error" : variant
+
+    if (hasAddons) {
+      return (
+        <div className="flex flex-col gap-2 w-full">
+          {label && (
+            <Label htmlFor={id} variant={labelVariant} color={labelColor}>
+              {label}
+            </Label>
+          )}
+          <div
+            className={cn(
+              "flex items-center gap-2 bg-white border font-sans transition-colors w-full",
+              "focus-within:ring-[3px]",
+              computedVariant === "error"
+                ? "border-error-500 focus-within:border-error-500 focus-within:ring-error-200"
+                : "border-grey-300 focus-within:border-grey-300 focus-within:ring-grey-300/50",
+              size === "mini" && "h-6 pl-3 pr-0.5 text-xs rounded-md",
+              size === "small" && "h-8 pl-3 pr-0.5 text-sm rounded-md",
+              size === "regular" && "h-9 pl-3 pr-0.5 text-sm rounded-lg",
+              size === "large" && "h-10 pl-3 pr-0.5 text-base rounded-lg",
+              !size && "h-9 pl-3 pr-0.5 text-sm rounded-lg",
+              !rightElement && "pr-3",
+              roundness === "round" && "!rounded-full",
+              props.disabled && "opacity-50 cursor-not-allowed bg-grey-50",
+              className
+            )}
+          >
+            {leftIcon && (
+              <span className="shrink-0 text-grey-500 [&_svg]:size-4">{leftIcon}</span>
+            )}
+            {leftAddon && (
+              <span className="shrink-0 text-grey-500">{leftAddon}</span>
+            )}
+            <input
+              type={type}
+              id={id}
+              className={cn(
+                "flex-1 min-w-0 bg-transparent border-0 outline-none placeholder:text-grey-400",
+                "disabled:cursor-not-allowed"
+              )}
+              ref={ref}
+              {...props}
+            />
+            {rightAddon && (
+              <span className="shrink-0 text-grey-500">{rightAddon}</span>
+            )}
+            {rightIcon && (
+              <span className="shrink-0 text-grey-500 [&_svg]:size-4">{rightIcon}</span>
+            )}
+            {rightElement && (
+              <span className="shrink-0">{rightElement}</span>
+            )}
+          </div>
+          {error && (
+            <Typography variant="caption" color="error-600" className="mt-1">
+              {error}
+            </Typography>
+          )}
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex flex-col gap-2 w-full">
+        {label && (
+          <Label htmlFor={id} variant={labelVariant} color={labelColor}>
+            {label}
+          </Label>
+        )}
+        <input
+          type={type}
+          id={id}
+          className={cn(inputVariants({ size, roundness, variant: computedVariant, className }))}
+          ref={ref}
+          {...props}
+        />
+        {error && (
+          <Typography variant="caption" color="error-600" className="mt-1">
+            {error}
+          </Typography>
+        )}
+      </div>
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input, inputVariants }
+export type { InputSize, InputRoundness, InputVariant }

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 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 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 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 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,110 @@
+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: {
+    textVariant: {
+      control: "select",
+      options: ["h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "subtitle3", "body1", "body2", "body3", "caption"],
+      description: "The text variant of the label",
+    },
+    color: {
+      control: "select",
+      options: ["default", "main-950", "main-500", "grey-500", "error-500"],
+      description: "The color 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 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 direction="row" align="center" gap={2}>
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </Flex>
+  ),
+}
+
+export const Muted: Story = {
+  render: () => <Label color="grey-500">Optional field</Label>,
+}
+
+export const Error: Story = {
+  render: () => (
+    <Flex gap={2} className="w-[300px]">
+      <Label htmlFor="email-error" color="error-500">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 gap={6}>
+      <Typography variant="h4" className="text-white">Label Variants</Typography>
+
+      <Flex gap={4}>
+        <Flex gap={2} className="w-[300px]">
+          <Label htmlFor="default">Default Label</Label>
+          <Input id="default" placeholder="Default input" />
+        </Flex>
+
+        <Flex gap={2} className="w-[300px]">
+          <Flex direction="row" gap={2} align="center">
+            <Label htmlFor="with-optional">Name</Label>
+            <Label color="grey-500">(optional)</Label>
+          </Flex>
+          <Input id="with-optional" placeholder="Enter your name" />
+        </Flex>
+
+        <Flex gap={2} className="w-[300px]">
+          <Label htmlFor="error-field" color="error-500">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 gap={3}>
+        <Flex direction="row" align="center" gap={2}>
+          <Checkbox id="newsletter" />
+          <Label htmlFor="newsletter">Subscribe to newsletter</Label>
+        </Flex>
+
+        <Flex direction="row" 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,44 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import {
+  type TextVariant,
+  type TextColor,
+  textVariantClasses,
+  textColorClasses,
+} from "../lib/typography-types";
+
+const labelVariants = cva(
+  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      textVariant: textVariantClasses,
+      color: textColorClasses,
+    },
+    defaultVariants: {
+      textVariant: "body2",
+      color: "main-950",
+    },
+  }
+);
+
+export interface LabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+  variant?: TextVariant;
+  color?: TextColor;
+}
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  LabelProps
+>(({ className, variant, color, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants({ textVariant: variant, color }), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label, labelVariants };