@a2v2ai/uikit 0.0.1 → 0.0.3

package/Input/Input.stories.tsx

@@ -0,0 +1,456 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Search, Mail, Eye, EyeOff, Info, User, Lock } from "../icons"
+import { Typography } from "../Typography/Typography"
+import { Flex } from "../Flex/Flex"
+import { Button } from "../Button/Button"
+import { Input } from "./Input"
+
+const meta: Meta<typeof Input> = {
+  title: "Components/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["mini", "small", "regular", "large"],
+    },
+    roundness: {
+      control: "select",
+      options: ["default", "round"],
+    },
+    variant: {
+      control: "select",
+      options: ["default", "error"],
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Input>
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter text...",
+  },
+}
+
+export const WithValue: Story = {
+  args: {
+    defaultValue: "Hello World",
+  },
+}
+
+export const Placeholder: Story = {
+  args: {
+    placeholder: "Type something...",
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled input",
+    disabled: true,
+  },
+}
+
+export const DisabledWithValue: Story = {
+  args: {
+    defaultValue: "Cannot edit this",
+    disabled: true,
+  },
+}
+
+export const Error: Story = {
+  args: {
+    defaultValue: "Invalid value",
+    variant: "error",
+  },
+}
+
+export const WithLeftIcon: Story = {
+  args: {
+    placeholder: "Search...",
+    leftIcon: <Search size={16} />,
+  },
+}
+
+export const WithRightIcon: Story = {
+  args: {
+    placeholder: "Enter email",
+    rightIcon: <Info size={16} />,
+  },
+}
+
+export const WithBothIcons: Story = {
+  args: {
+    placeholder: "Search users...",
+    leftIcon: <Search size={16} />,
+    rightIcon: <User size={16} />,
+  },
+}
+
+export const WithAddons: Story = {
+  render: () => (
+    <Flex direction="column" gap={4} style={{ width: "320px" }}>
+      <Flex direction="column" gap={2}>
+        <Typography variant="body3" color="main-500">URL Input</Typography>
+        <Input leftAddon="https://" placeholder="example.com" />
+      </Flex>
+      <Flex direction="column" gap={2}>
+        <Typography variant="body3" color="main-500">Currency Input</Typography>
+        <Input leftAddon="$" rightAddon="USD" placeholder="0.00" />
+      </Flex>
+      <Flex direction="column" gap={2}>
+        <Typography variant="body3" color="main-500">Email Input</Typography>
+        <Input leftIcon={<Mail size={16} />} placeholder="you@example.com" />
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const PasswordInput: Story = {
+  render: function PasswordInputStory() {
+    const [showPassword, setShowPassword] = useState(false)
+    return (
+      <Flex style={{ width: "320px" }}>
+        <Input
+          type={showPassword ? "text" : "password"}
+          placeholder="Enter password"
+          leftIcon={<Lock size={16} />}
+          rightIcon={
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              style={{ background: "none", border: "none", cursor: "pointer", padding: 0 }}
+            >
+              {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+            </button>
+          }
+        />
+      </Flex>
+    )
+  },
+}
+
+export const SearchWithButton: Story = {
+  render: () => (
+    <Flex style={{ width: "320px" }}>
+      <Input
+        placeholder="Type to search..."
+        rightElement={
+          <Button size="small" variant="secondary">
+            Search
+          </Button>
+        }
+      />
+    </Flex>
+  ),
+}
+
+export const AllVariantsAndSizes: Story = {
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: () => (
+    <Flex direction="column" style={{ padding: "32px", backgroundColor: "#ffffff", minHeight: "100vh" }}>
+      {/* Header */}
+      <Flex style={{ borderBottom: "1px solid #e5e7eb", paddingBottom: "24px", marginBottom: "32px" }}>
+        <Typography variant="h3" color="main-950">Input</Typography>
+      </Flex>
+
+      {/* Main Content */}
+      <Flex direction="column" gap={12}>
+        {/* Default Roundness Section */}
+        <Flex direction="column" gap={6}>
+          <Typography variant="subtitle1" color="main-700">Default Roundness</Typography>
+
+          {/* Size Headers */}
+          <Flex>
+            <Flex style={{ width: "120px" }} />
+            <Flex gap={4}>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Regular</Typography>
+              </Flex>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Large</Typography>
+              </Flex>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Small</Typography>
+              </Flex>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Mini</Typography>
+              </Flex>
+            </Flex>
+          </Flex>
+
+          {/* Empty Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Empty</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Placeholder Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Placeholder</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" placeholder="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" placeholder="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" placeholder="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" placeholder="Value" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Value Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Value</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" defaultValue="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" defaultValue="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" defaultValue="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" defaultValue="Value" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Focus Row - simulated with ring */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Focus</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Error Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="error-500">Error</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" defaultValue="Value" variant="error" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" defaultValue="Value" variant="error" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" defaultValue="Value" variant="error" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" defaultValue="Value" variant="error" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Error Focus Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="error-500">Error Focus</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Disabled Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-400">Disabled</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" defaultValue="Value" disabled /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" defaultValue="Value" disabled /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" defaultValue="Value" disabled /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" defaultValue="Value" disabled /></Flex>
+            </Flex>
+          </Flex>
+        </Flex>
+
+        {/* Round Section */}
+        <Flex direction="column" gap={6}>
+          <Typography variant="subtitle1" color="main-700">Round</Typography>
+
+          {/* Size Headers */}
+          <Flex>
+            <Flex style={{ width: "120px" }} />
+            <Flex gap={4}>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Regular</Typography>
+              </Flex>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Large</Typography>
+              </Flex>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Small</Typography>
+              </Flex>
+              <Flex justify="center" style={{ width: "200px" }}>
+                <Typography variant="body3" color="accent-600">Mini</Typography>
+              </Flex>
+            </Flex>
+          </Flex>
+
+          {/* Empty Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Empty</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Placeholder Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Placeholder</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" placeholder="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" placeholder="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" placeholder="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" placeholder="Value" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Value Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Value</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" defaultValue="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" defaultValue="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" defaultValue="Value" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" defaultValue="Value" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Focus Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-500">Focus</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" defaultValue="Value" className="ring-[3px] ring-grey-300/50" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Error Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="error-500">Error</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" defaultValue="Value" variant="error" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" defaultValue="Value" variant="error" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" defaultValue="Value" variant="error" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" defaultValue="Value" variant="error" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Error Focus Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="error-500">Error Focus</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" defaultValue="Value" variant="error" className="ring-[3px] ring-error-200" /></Flex>
+            </Flex>
+          </Flex>
+
+          {/* Disabled Row */}
+          <Flex align="center">
+            <Flex style={{ width: "120px" }}>
+              <Typography variant="body3" color="main-400">Disabled</Typography>
+            </Flex>
+            <Flex gap={4}>
+              <Flex style={{ width: "200px" }}><Input size="regular" roundness="round" defaultValue="Value" disabled /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="large" roundness="round" defaultValue="Value" disabled /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="small" roundness="round" defaultValue="Value" disabled /></Flex>
+              <Flex style={{ width: "200px" }}><Input size="mini" roundness="round" defaultValue="Value" disabled /></Flex>
+            </Flex>
+          </Flex>
+        </Flex>
+
+        {/* Examples Section */}
+        <Flex direction="column" gap={6} style={{ marginTop: "24px", paddingTop: "24px", borderTop: "1px solid #e5e7eb" }}>
+          <Typography variant="subtitle1" color="main-700">Examples</Typography>
+
+          <Flex gap={6} wrap="wrap">
+            {/* Search with results */}
+            <Flex direction="column" gap={2}>
+              <Typography variant="body3" color="main-500">Search Input</Typography>
+              <Input
+                leftIcon={<Search size={16} />}
+                defaultValue="Value"
+                rightAddon="12 results"
+                style={{ width: "280px" }}
+              />
+            </Flex>
+
+            {/* URL Input */}
+            <Flex direction="column" gap={2}>
+              <Typography variant="body3" color="main-500">URL Input</Typography>
+              <Input
+                leftAddon="https://"
+                defaultValue="example.com"
+                rightIcon={<Info size={16} />}
+                style={{ width: "280px" }}
+              />
+            </Flex>
+
+            {/* Search with Button */}
+            <Flex direction="column" gap={2}>
+              <Typography variant="body3" color="main-500">Search with Button</Typography>
+              <Input
+                placeholder="Type to search..."
+                rightElement={
+                  <Button size="small" variant="secondary">
+                    Search
+                  </Button>
+                }
+                style={{ width: "280px" }}
+              />
+            </Flex>
+
+            {/* Currency Input */}
+            <Flex direction="column" gap={2}>
+              <Typography variant="body3" color="main-500">Currency Input</Typography>
+              <Input
+                leftAddon="$"
+                defaultValue="0.00"
+                rightAddon="USD"
+                style={{ width: "280px" }}
+              />
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}

package/Input/Input.tsx

@@ -0,0 +1,129 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+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
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+  leftAddon?: React.ReactNode
+  rightAddon?: React.ReactNode
+  rightElement?: React.ReactNode
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      type = "text",
+      size,
+      roundness,
+      variant,
+      leftIcon,
+      rightIcon,
+      leftAddon,
+      rightAddon,
+      rightElement,
+      ...props
+    },
+    ref
+  ) => {
+    const hasAddons = leftIcon || rightIcon || leftAddon || rightAddon || rightElement
+
+    if (hasAddons) {
+      return (
+        <div
+          className={cn(
+            "flex items-center gap-2 bg-white border font-sans transition-colors",
+            "focus-within:ring-[3px]",
+            variant === "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}
+            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>
+      )
+    }
+
+    return (
+      <input
+        type={type}
+        className={cn(inputVariants({ size, roundness, variant, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input, inputVariants }
+export type { InputSize, InputRoundness, InputVariant }