ai-design-system 0.1.0

package/components/primitives/Select/Select.stories.tsx

@@ -0,0 +1,288 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./Select";
+
+/**
+ * Select component provides a dropdown selection interface with full keyboard support
+ * and accessibility features. Built on Radix UI primitives.
+ *
+ * ## Features
+ * - Keyboard navigation (Arrow keys, Enter, Escape)
+ * - Size variants (sm, default)
+ * - Grouped options with labels
+ * - Scroll indicators for long lists
+ * - Portal rendering for proper z-index handling
+ * - WCAG 2.1 Level AA compliant
+ *
+ * ## Usage
+ * ```tsx
+ * <Select>
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select option" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="option1">Option 1</SelectItem>
+ *     <SelectItem value="option2">Option 2</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ *
+ * ## Accessibility
+ * - Fully keyboard navigable
+ * - Screen reader support with proper ARIA attributes
+ * - Focus management
+ * - Disabled state support
+ */
+const meta: Meta<typeof Select> = {
+  title: "Primitives/Select",
+  component: Select,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A fully accessible select component with keyboard navigation, grouping, and size variants.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+/**
+ * Default select with simple options
+ */
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="orange">Orange</SelectItem>
+        <SelectItem value="grape">Grape</SelectItem>
+        <SelectItem value="mango">Mango</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/**
+ * Small size variant
+ */
+export const SmallSize: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger size="sm" className="w-[180px]">
+        <SelectValue placeholder="Select size" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="xs">Extra Small</SelectItem>
+        <SelectItem value="sm">Small</SelectItem>
+        <SelectItem value="md">Medium</SelectItem>
+        <SelectItem value="lg">Large</SelectItem>
+        <SelectItem value="xl">Extra Large</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/**
+ * Grouped options with labels
+ */
+export const WithGroups: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Select a framework" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Frontend</SelectLabel>
+          <SelectItem value="react">React</SelectItem>
+          <SelectItem value="vue">Vue</SelectItem>
+          <SelectItem value="angular">Angular</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Backend</SelectLabel>
+          <SelectItem value="node">Node.js</SelectItem>
+          <SelectItem value="python">Python</SelectItem>
+          <SelectItem value="go">Go</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Database</SelectLabel>
+          <SelectItem value="postgres">PostgreSQL</SelectItem>
+          <SelectItem value="mysql">MySQL</SelectItem>
+          <SelectItem value="mongodb">MongoDB</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/**
+ * Long list with scroll indicators
+ */
+export const LongList: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Select a country" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="us">United States</SelectItem>
+        <SelectItem value="ca">Canada</SelectItem>
+        <SelectItem value="mx">Mexico</SelectItem>
+        <SelectItem value="uk">United Kingdom</SelectItem>
+        <SelectItem value="fr">France</SelectItem>
+        <SelectItem value="de">Germany</SelectItem>
+        <SelectItem value="it">Italy</SelectItem>
+        <SelectItem value="es">Spain</SelectItem>
+        <SelectItem value="nl">Netherlands</SelectItem>
+        <SelectItem value="se">Sweden</SelectItem>
+        <SelectItem value="no">Norway</SelectItem>
+        <SelectItem value="dk">Denmark</SelectItem>
+        <SelectItem value="fi">Finland</SelectItem>
+        <SelectItem value="pl">Poland</SelectItem>
+        <SelectItem value="cz">Czech Republic</SelectItem>
+        <SelectItem value="at">Austria</SelectItem>
+        <SelectItem value="ch">Switzerland</SelectItem>
+        <SelectItem value="be">Belgium</SelectItem>
+        <SelectItem value="ie">Ireland</SelectItem>
+        <SelectItem value="pt">Portugal</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/**
+ * Disabled select
+ */
+export const Disabled: Story = {
+  render: () => (
+    <Select disabled>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Disabled select" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="1">Option 1</SelectItem>
+        <SelectItem value="2">Option 2</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/**
+ * Disabled individual items
+ */
+export const DisabledItems: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Select subscription" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="free">Free Tier</SelectItem>
+        <SelectItem value="basic">Basic - $9/mo</SelectItem>
+        <SelectItem value="pro">Pro - $29/mo</SelectItem>
+        <SelectItem value="enterprise" disabled>
+          Enterprise - Contact Sales
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/**
+ * Controlled select with default value
+ */
+export const WithDefaultValue: Story = {
+  render: () => (
+    <Select defaultValue="react">
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Select a framework" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="react">React</SelectItem>
+        <SelectItem value="vue">Vue</SelectItem>
+        <SelectItem value="angular">Angular</SelectItem>
+        <SelectItem value="svelte">Svelte</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/**
+ * Form integration example
+ */
+export const InForm: Story = {
+  render: () => (
+    <form className="space-y-4 w-[300px]">
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Country</label>
+        <Select defaultValue="us">
+          <SelectTrigger>
+            <SelectValue placeholder="Select country" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="us">United States</SelectItem>
+            <SelectItem value="ca">Canada</SelectItem>
+            <SelectItem value="uk">United Kingdom</SelectItem>
+            <SelectItem value="au">Australia</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Language</label>
+        <Select defaultValue="en">
+          <SelectTrigger>
+            <SelectValue placeholder="Select language" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="en">English</SelectItem>
+            <SelectItem value="es">Spanish</SelectItem>
+            <SelectItem value="fr">French</SelectItem>
+            <SelectItem value="de">German</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </form>
+  ),
+};
+
+/**
+ * Dark mode support
+ */
+export const DarkMode: Story = {
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+  render: () => (
+    <div className="dark">
+      <Select>
+        <SelectTrigger className="w-[200px]">
+          <SelectValue placeholder="Select theme" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="light">Light</SelectItem>
+          <SelectItem value="dark">Dark</SelectItem>
+          <SelectItem value="system">System</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+};

package/components/primitives/Select/Select.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import * as React from "react";
+import {
+  Select as ShadcnSelect,
+  SelectContent as ShadcnSelectContent,
+  SelectGroup as ShadcnSelectGroup,
+  SelectItem as ShadcnSelectItem,
+  SelectLabel as ShadcnSelectLabel,
+  SelectScrollDownButton as ShadcnSelectScrollDownButton,
+  SelectScrollUpButton as ShadcnSelectScrollUpButton,
+  SelectSeparator as ShadcnSelectSeparator,
+  SelectTrigger as ShadcnSelectTrigger,
+  SelectValue as ShadcnSelectValue,
+} from "@/components/ui/select";
+
+/**
+ * Select Primitive
+ *
+ * A comprehensive select component built on Radix UI with shadcn/ui styling.
+ * Provides a fully accessible dropdown select with keyboard navigation.
+ *
+ * Features:
+ * - Keyboard navigation support
+ * - Size variants (sm, default)
+ * - Grouped options
+ * - Scroll buttons for long lists
+ * - Separator support
+ * - Portal rendering
+ * - WCAG 2.1 Level AA compliant
+ */
+
+export type SelectProps = React.ComponentProps<typeof ShadcnSelect>;
+export type SelectTriggerProps = React.ComponentProps<typeof ShadcnSelectTrigger>;
+export type SelectContentProps = React.ComponentProps<typeof ShadcnSelectContent>;
+export type SelectItemProps = React.ComponentProps<typeof ShadcnSelectItem>;
+export type SelectLabelProps = React.ComponentProps<typeof ShadcnSelectLabel>;
+export type SelectGroupProps = React.ComponentProps<typeof ShadcnSelectGroup>;
+export type SelectValueProps = React.ComponentProps<typeof ShadcnSelectValue>;
+export type SelectSeparatorProps = React.ComponentProps<typeof ShadcnSelectSeparator>;
+export type SelectScrollUpButtonProps = React.ComponentProps<typeof ShadcnSelectScrollUpButton>;
+export type SelectScrollDownButtonProps = React.ComponentProps<typeof ShadcnSelectScrollDownButton>;
+
+/**
+ * Root Select component - controls the select state
+ */
+export const Select = React.memo<SelectProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnSelect>, SelectProps>(
+    (props, ref) => {
+      return <ShadcnSelect {...props} />;
+    }
+  )
+);
+Select.displayName = "Select";
+
+/**
+ * SelectTrigger - The button that opens the select dropdown
+ */
+export const SelectTrigger = React.memo<SelectTriggerProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnSelectTrigger>, SelectTriggerProps>(
+    (props, ref) => {
+      return <ShadcnSelectTrigger ref={ref} {...props} />;
+    }
+  )
+);
+SelectTrigger.displayName = "SelectTrigger";
+
+/**
+ * SelectContent - The dropdown content container
+ */
+export const SelectContent = React.memo<SelectContentProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnSelectContent>, SelectContentProps>(
+    (props, ref) => {
+      return <ShadcnSelectContent ref={ref} {...props} />;
+    }
+  )
+);
+SelectContent.displayName = "SelectContent";
+
+/**
+ * SelectItem - Individual selectable option
+ */
+export const SelectItem = React.memo<SelectItemProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnSelectItem>, SelectItemProps>(
+    (props, ref) => {
+      return <ShadcnSelectItem ref={ref} {...props} />;
+    }
+  )
+);
+SelectItem.displayName = "SelectItem";
+
+/**
+ * SelectLabel - Label for a group of items
+ */
+export const SelectLabel = React.memo<SelectLabelProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnSelectLabel>, SelectLabelProps>(
+    (props, ref) => {
+      return <ShadcnSelectLabel ref={ref} {...props} />;
+    }
+  )
+);
+SelectLabel.displayName = "SelectLabel";
+
+/**
+ * SelectGroup - Groups related select items
+ */
+export const SelectGroup = React.memo<SelectGroupProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnSelectGroup>, SelectGroupProps>(
+    (props, ref) => {
+      return <ShadcnSelectGroup {...props} />;
+    }
+  )
+);
+SelectGroup.displayName = "SelectGroup";
+
+/**
+ * SelectValue - Displays the selected value
+ */
+export const SelectValue = React.memo<SelectValueProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnSelectValue>, SelectValueProps>(
+    (props, ref) => {
+      return <ShadcnSelectValue {...props} />;
+    }
+  )
+);
+SelectValue.displayName = "SelectValue";
+
+/**
+ * SelectSeparator - Visual separator between items
+ */
+export const SelectSeparator = React.memo<SelectSeparatorProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnSelectSeparator>, SelectSeparatorProps>(
+    (props, ref) => {
+      return <ShadcnSelectSeparator ref={ref} {...props} />;
+    }
+  )
+);
+SelectSeparator.displayName = "SelectSeparator";
+
+/**
+ * SelectScrollUpButton - Button to scroll up in long lists
+ */
+export const SelectScrollUpButton = React.memo<SelectScrollUpButtonProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnSelectScrollUpButton>, SelectScrollUpButtonProps>(
+    (props, ref) => {
+      return <ShadcnSelectScrollUpButton ref={ref} {...props} />;
+    }
+  )
+);
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+
+/**
+ * SelectScrollDownButton - Button to scroll down in long lists
+ */
+export const SelectScrollDownButton = React.memo<SelectScrollDownButtonProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnSelectScrollDownButton>, SelectScrollDownButtonProps>(
+    (props, ref) => {
+      return <ShadcnSelectScrollDownButton ref={ref} {...props} />;
+    }
+  )
+);
+SelectScrollDownButton.displayName = "SelectScrollDownButton";

package/components/primitives/Select/index.ts

@@ -0,0 +1,22 @@
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  type SelectProps,
+  type SelectContentProps,
+  type SelectGroupProps,
+  type SelectItemProps,
+  type SelectLabelProps,
+  type SelectScrollDownButtonProps,
+  type SelectScrollUpButtonProps,
+  type SelectSeparatorProps,
+  type SelectTriggerProps,
+  type SelectValueProps,
+} from "./Select";