ai-design-system 0.1.0

package/components/primitives/Icon/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Icon Primitive
+ *
+ * Central export point for the Icon primitive component and its related types.
+ */
+export { Icon } from "./Icon";
+
+export type { IconProps } from "./Icon";

package/components/primitives/Input/Input.stories.tsx

@@ -0,0 +1,370 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Input } from "./Input"
+
+/**
+ * Input Primitive Stories
+ *
+ * The Input primitive provides a consistent text input experience across the application.
+ * It supports various input types, validation states, and accessibility features.
+ */
+
+const meta = {
+  title: "Primitives/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A foundational input component built on shadcn/ui Input. Supports all native HTML input types, validation states, and accessibility features including ARIA attributes for error states.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["text", "email", "password", "number", "tel", "url", "search"],
+      description: "The type of input field",
+      table: {
+        defaultValue: { summary: "text" },
+      },
+    },
+    size: {
+      control: "select",
+      options: ["sm", "default", "lg"],
+      description: "Size variant of the input",
+      table: {
+        defaultValue: { summary: "default" },
+      },
+    },
+    state: {
+      control: "select",
+      options: ["default", "error", "success", "warning"],
+      description: "Visual state of the input",
+      table: {
+        defaultValue: { summary: "default" },
+      },
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text displayed when input is empty",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the input is disabled",
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    "aria-invalid": {
+      control: "boolean",
+      description: "Indicates whether the input value is invalid",
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+} satisfies Meta<typeof Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default text input
+ */
+export const Default: Story = {
+  args: {
+    type: "text",
+    placeholder: "Enter text...",
+  },
+}
+
+/**
+ * Email input with appropriate keyboard on mobile devices
+ */
+export const Email: Story = {
+  args: {
+    type: "email",
+    placeholder: "email@example.com",
+  },
+}
+
+/**
+ * Password input with masked characters
+ */
+export const Password: Story = {
+  args: {
+    type: "password",
+    placeholder: "Enter password",
+  },
+}
+
+/**
+ * Number input with increment/decrement controls
+ */
+export const Number: Story = {
+  args: {
+    type: "number",
+    placeholder: "Enter number",
+  },
+}
+
+/**
+ * Search input with search icon styling
+ */
+export const Search: Story = {
+  args: {
+    type: "search",
+    placeholder: "Search...",
+  },
+}
+
+/**
+ * Telephone input with appropriate keyboard on mobile devices
+ */
+export const Telephone: Story = {
+  args: {
+    type: "tel",
+    placeholder: "+1 (555) 000-0000",
+  },
+}
+
+/**
+ * URL input with URL validation
+ */
+export const URL: Story = {
+  args: {
+    type: "url",
+    placeholder: "https://example.com",
+  },
+}
+
+/**
+ * Disabled input that cannot be interacted with
+ */
+export const Disabled: Story = {
+  args: {
+    type: "text",
+    placeholder: "Disabled input",
+    disabled: true,
+  },
+}
+
+/**
+ * Input with pre-filled value
+ */
+export const WithValue: Story = {
+  args: {
+    type: "text",
+    defaultValue: "Pre-filled value",
+  },
+}
+
+/**
+ * Invalid input showing error state
+ */
+export const Invalid: Story = {
+  args: {
+    type: "email",
+    placeholder: "email@example.com",
+    defaultValue: "invalid-email",
+    "aria-invalid": true,
+  },
+}
+
+/**
+ * File input for file selection
+ */
+export const File: Story = {
+  args: {
+    type: "file",
+  },
+}
+
+/**
+ * Small input size
+ */
+export const Small: Story = {
+  args: {
+    type: "text",
+    placeholder: "Small input",
+    size: "sm",
+  },
+}
+
+/**
+ * Large input size
+ */
+export const Large: Story = {
+  args: {
+    type: "text",
+    placeholder: "Large input",
+    size: "lg",
+  },
+}
+
+/**
+ * Error state input
+ */
+export const ErrorState: Story = {
+  args: {
+    type: "email",
+    placeholder: "email@example.com",
+    defaultValue: "invalid-email",
+    state: "error",
+  },
+}
+
+/**
+ * Success state input
+ */
+export const SuccessState: Story = {
+  args: {
+    type: "email",
+    placeholder: "email@example.com",
+    defaultValue: "valid@email.com",
+    state: "success",
+  },
+}
+
+/**
+ * Warning state input
+ */
+export const WarningState: Story = {
+  args: {
+    type: "text",
+    placeholder: "Enter text",
+    defaultValue: "This might need attention",
+    state: "warning",
+  },
+}
+
+/**
+ * Size variants showcase
+ */
+export const SizeVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-80">
+      <div>
+        <label className="text-sm font-medium mb-1 block">Small</label>
+        <Input type="text" placeholder="Small input" size="sm" />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Default</label>
+        <Input type="text" placeholder="Default input" size="default" />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Large</label>
+        <Input type="text" placeholder="Large input" size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+/**
+ * State variants showcase
+ */
+export const StateVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-80">
+      <div>
+        <label className="text-sm font-medium mb-1 block">Default State</label>
+        <Input type="text" placeholder="Default state" state="default" />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Error State</label>
+        <Input type="text" placeholder="Error state" state="error" defaultValue="Invalid input" />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Success State</label>
+        <Input type="text" placeholder="Success state" state="success" defaultValue="Valid input" />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Warning State</label>
+        <Input type="text" placeholder="Warning state" state="warning" defaultValue="Needs attention" />
+      </div>
+    </div>
+  ),
+}
+
+/**
+ * Combined variants showcase
+ */
+export const CombinedVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-80">
+      <div>
+        <label className="text-sm font-medium mb-1 block">Small Error</label>
+        <Input type="text" placeholder="Small error" size="sm" state="error" />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Default Success</label>
+        <Input type="text" placeholder="Default success" size="default" state="success" />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Large Warning</label>
+        <Input type="text" placeholder="Large warning" size="lg" state="warning" />
+      </div>
+    </div>
+  ),
+}
+
+/**
+ * All input variants and states showcased together
+ */
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-80">
+      <div>
+        <label className="text-sm font-medium mb-1 block">Default Text</label>
+        <Input type="text" placeholder="Enter text..." />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">Email</label>
+        <Input type="email" placeholder="email@example.com" />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">Password</label>
+        <Input type="password" placeholder="Enter password" />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">Number</label>
+        <Input type="number" placeholder="Enter number" />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">Search</label>
+        <Input type="search" placeholder="Search..." />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">With Value</label>
+        <Input type="text" defaultValue="Pre-filled value" />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">Disabled</label>
+        <Input type="text" placeholder="Disabled input" disabled />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">Invalid</label>
+        <Input
+          type="email"
+          placeholder="email@example.com"
+          defaultValue="invalid-email"
+          aria-invalid
+        />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium mb-1 block">File</label>
+        <Input type="file" />
+      </div>
+    </div>
+  ),
+}

package/components/primitives/Input/Input.tsx

@@ -0,0 +1,88 @@
+import * as React from "react"
+import {
+  Input as ShadcnInput,
+  inputVariants,
+} from "../../ui/input"
+import type { VariantProps } from "class-variance-authority"
+
+/**
+ * Input Primitive
+ *
+ * A foundational input component that wraps shadcn/ui Input with design system
+ * enhancements. This primitive serves as the single source of truth for all text
+ * input interactions across the application.
+ *
+ * @example
+ * ```tsx
+ * <Input type="text" placeholder="Enter your name" />
+ *
+ * <Input type="email" placeholder="email@example.com" size="sm" />
+ *
+ * <Input
+ *   type="password"
+ *   placeholder="Enter password"
+ *   state="error"
+ * />
+ *
+ * <Input
+ *   type="text"
+ *   placeholder="Success state"
+ *   state="success"
+ *   size="lg"
+ * />
+ * ```
+ *
+ * @see https://ui.shadcn.com/docs/components/input - shadcn/ui Input documentation
+ */
+
+/**
+ * Input component props
+ * Extends the native input element props with variant options
+ */
+export type InputProps = React.ComponentProps<"input"> &
+  VariantProps<typeof inputVariants>
+
+/**
+ * Input component
+ *
+ * A versatile input component built on shadcn/ui foundation with full accessibility support.
+ * Optimized with React.memo for performance in high-frequency rendering scenarios.
+ *
+ * Features:
+ * - Full WCAG 2.1 Level AA compliance
+ * - Support for all native input types
+ * - Size variants (sm, default, lg) for different contexts
+ * - State variants (default, error, success, warning) for visual feedback
+ * - Validation state styling via aria-invalid
+ * - Dark mode support
+ * - Placeholder and disabled states
+ */
+export const Input = React.memo(
+  React.forwardRef<HTMLInputElement, InputProps>(
+    (props, ref) => {
+      return <ShadcnInput ref={ref} {...props} />
+    }
+  )
+)
+
+Input.displayName = "Input"
+
+/**
+ * Re-export inputVariants for consumers who need direct access to the variant generator.
+ * This is useful for creating custom input-like components that need consistent styling.
+ *
+ * @example
+ * ```tsx
+ * import { inputVariants } from './Input'
+ *
+ * <div className={inputVariants({ size: "sm", state: "error" })}>
+ *   Custom input-like div
+ * </div>
+ * ```
+ */
+export { inputVariants }
+
+/**
+ * Re-export VariantProps for type inference in consuming components
+ */
+export type { VariantProps }

package/components/primitives/Input/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Input Primitive
+ *
+ * Central export point for the Input primitive component and its related types.
+ */
+export { Input, inputVariants } from "./Input"
+export type { InputProps, VariantProps } from "./Input"

package/components/primitives/InputGroup/InputGroup.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+} from "./InputGroup";
+
+const meta: Meta<typeof InputGroup> = {
+  title: "Primitives/InputGroup",
+  component: InputGroup,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof InputGroup>;
+
+export const Default: Story = {
+  render: () => (
+    <InputGroup className="w-[300px]">
+      <InputGroupAddon align="inline-start">
+        <InputGroupText>$</InputGroupText>
+      </InputGroupAddon>
+      <InputGroupInput type="text" placeholder="0.00" />
+    </InputGroup>
+  ),
+};
+
+export const WithButton: Story = {
+  render: () => (
+    <InputGroup className="w-[300px]">
+      <InputGroupInput type="text" placeholder="Search..." />
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton>Search</InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  ),
+};

package/components/primitives/InputGroup/InputGroup.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+import {
+  InputGroup as ShadcnInputGroup,
+  InputGroupAddon as ShadcnInputGroupAddon,
+  InputGroupButton as ShadcnInputGroupButton,
+  InputGroupInput as ShadcnInputGroupInput,
+  InputGroupText as ShadcnInputGroupText,
+  InputGroupTextarea as ShadcnInputGroupTextarea,
+} from "@/components/ui/input-group";
+
+export type InputGroupProps = React.ComponentProps<typeof ShadcnInputGroup>;
+export type InputGroupAddonProps = React.ComponentProps<typeof ShadcnInputGroupAddon>;
+export type InputGroupButtonProps = React.ComponentProps<typeof ShadcnInputGroupButton>;
+export type InputGroupInputProps = React.ComponentProps<typeof ShadcnInputGroupInput>;
+export type InputGroupTextProps = React.ComponentProps<typeof ShadcnInputGroupText>;
+export type InputGroupTextareaProps = React.ComponentProps<typeof ShadcnInputGroupTextarea>;
+
+export const InputGroup = React.memo<InputGroupProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnInputGroup>, InputGroupProps>(
+    (props, ref) => {
+      return <ShadcnInputGroup ref={ref} {...props} />;
+    }
+  )
+);
+InputGroup.displayName = "InputGroup";
+
+export const InputGroupAddon = React.memo<InputGroupAddonProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnInputGroupAddon>, InputGroupAddonProps>(
+    (props, ref) => {
+      return <ShadcnInputGroupAddon ref={ref} {...props} />;
+    }
+  )
+);
+InputGroupAddon.displayName = "InputGroupAddon";
+
+export const InputGroupButton = React.memo<InputGroupButtonProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnInputGroupButton>, InputGroupButtonProps>(
+    (props, ref) => {
+      return <ShadcnInputGroupButton ref={ref} {...props} />;
+    }
+  )
+);
+InputGroupButton.displayName = "InputGroupButton";
+
+export const InputGroupInput = React.memo<InputGroupInputProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnInputGroupInput>, InputGroupInputProps>(
+    (props, ref) => {
+      return <ShadcnInputGroupInput ref={ref} {...props} />;
+    }
+  )
+);
+InputGroupInput.displayName = "InputGroupInput";
+
+export const InputGroupText = React.memo<InputGroupTextProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnInputGroupText>, InputGroupTextProps>(
+    (props, ref) => {
+      return <ShadcnInputGroupText ref={ref} {...props} />;
+    }
+  )
+);
+InputGroupText.displayName = "InputGroupText";
+
+export const InputGroupTextarea = React.memo<InputGroupTextareaProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnInputGroupTextarea>, InputGroupTextareaProps>(
+    (props, ref) => {
+      return <ShadcnInputGroupTextarea ref={ref} {...props} />;
+    }
+  )
+);
+InputGroupTextarea.displayName = "InputGroupTextarea";

package/components/primitives/InputGroup/index.ts

@@ -0,0 +1,14 @@
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+  type InputGroupProps,
+  type InputGroupAddonProps,
+  type InputGroupButtonProps,
+  type InputGroupInputProps,
+  type InputGroupTextProps,
+  type InputGroupTextareaProps,
+} from "./InputGroup";