@a2v2ai/uikit 0.0.38 → 0.0.39

package/Input/Input.tsx

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

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

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

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

@@ -1,44 +0,0 @@
-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 };