ai-design-system 0.1.0

package/components/primitives/ToggleGroup/ToggleGroup.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup"
+import * as React from "react"
+
+const meta = {
+  title: "Primitives/ToggleGroup",
+  component: ToggleGroup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ToggleGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <ToggleGroup type="single">
+      <ToggleGroupItem value="left">Left</ToggleGroupItem>
+      <ToggleGroupItem value="center">Center</ToggleGroupItem>
+      <ToggleGroupItem value="right">Right</ToggleGroupItem>
+    </ToggleGroup>
+  ),
+}
+
+export const Multiple: Story = {
+  render: () => (
+    <ToggleGroup type="multiple">
+      <ToggleGroupItem value="bold">B</ToggleGroupItem>
+      <ToggleGroupItem value="italic">I</ToggleGroupItem>
+      <ToggleGroupItem value="underline">U</ToggleGroupItem>
+    </ToggleGroup>
+  ),
+}
+
+export const Outline: Story = {
+  render: () => (
+    <ToggleGroup type="single" variant="outline">
+      <ToggleGroupItem value="left">Left</ToggleGroupItem>
+      <ToggleGroupItem value="center">Center</ToggleGroupItem>
+      <ToggleGroupItem value="right">Right</ToggleGroupItem>
+    </ToggleGroup>
+  ),
+}
+
+export const WithSpacing: Story = {
+  render: () => (
+    <ToggleGroup type="single" variant="outline" spacing={4}>
+      <ToggleGroupItem value="left">Left</ToggleGroupItem>
+      <ToggleGroupItem value="center">Center</ToggleGroupItem>
+      <ToggleGroupItem value="right">Right</ToggleGroupItem>
+    </ToggleGroup>
+  ),
+}
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = React.useState("center")
+
+    return (
+      <div className="flex flex-col gap-4">
+        <ToggleGroup type="single" value={value} onValueChange={setValue}>
+          <ToggleGroupItem value="left">Left</ToggleGroupItem>
+          <ToggleGroupItem value="center">Center</ToggleGroupItem>
+          <ToggleGroupItem value="right">Right</ToggleGroupItem>
+        </ToggleGroup>
+        <p className="text-sm text-muted-foreground">Selected: {value}</p>
+      </div>
+    )
+  },
+}
+
+export const DarkMode: Story = {
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+  render: () => (
+    <div className="dark">
+      <ToggleGroup type="single">
+        <ToggleGroupItem value="left">Left</ToggleGroupItem>
+        <ToggleGroupItem value="center">Center</ToggleGroupItem>
+        <ToggleGroupItem value="right">Right</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+}

package/components/primitives/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import {
+  ToggleGroup as ShadcnToggleGroup,
+  ToggleGroupItem,
+} from "../../ui/toggle-group"
+import { toggleVariants } from "../../ui/toggle"
+import type { VariantProps } from "class-variance-authority"
+
+/**
+ * ToggleGroup Primitive
+ *
+ * A set of two-state toggle buttons that can work independently or as radio group.
+ * Built on Radix UI ToggleGroup primitive with WCAG 2.1 Level AA compliance.
+ *
+ * @see https://ui.shadcn.com/docs/components/toggle-group
+ * @see https://www.radix-ui.com/primitives/docs/components/toggle-group
+ */
+
+export type ToggleGroupProps = React.ComponentProps<typeof ShadcnToggleGroup> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+
+export type ToggleGroupItemProps = React.ComponentProps<typeof ToggleGroupItem> &
+  VariantProps<typeof toggleVariants>
+
+/**
+ * ToggleGroup component
+ *
+ * A set of two-state toggle buttons that can work independently or as a radio group.
+ * Built on Radix UI ToggleGroup primitive with full accessibility support.
+ *
+ * Features:
+ * - Single or multiple selection modes
+ * - Keyboard navigation
+ * - ARIA attributes
+ * - Multiple visual variants
+ * - Dark mode support
+ */
+export const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ShadcnToggleGroup>,
+  ToggleGroupProps
+>((props, ref) => {
+  return <ShadcnToggleGroup {...props} />
+})
+
+ToggleGroup.displayName = "ToggleGroup"
+
+/**
+ * Re-export ToggleGroupItem for composition
+ */
+export { ToggleGroupItem }

package/components/primitives/ToggleGroup/index.ts

@@ -0,0 +1,6 @@
+export {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "./ToggleGroup"
+
+export type { ToggleGroupProps, ToggleGroupItemProps } from "./ToggleGroup"

package/components/primitives/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,336 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip";
+import { Button } from "../Button";
+
+/**
+ * Tooltip component displays contextual information when hovering or focusing on an element.
+ *
+ * ## Features
+ * - Keyboard accessible (focus trigger)
+ * - Customizable positioning (top, right, bottom, left)
+ * - Configurable delay
+ * - Arrow indicator
+ * - Portal rendering
+ * - WCAG 2.1 Level AA compliant
+ *
+ * ## Usage
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>Hover me</TooltipTrigger>
+ *   <TooltipContent>Helpful information</TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * ## Accessibility
+ * - Triggered by both hover and keyboard focus
+ * - Dismissed with Escape key
+ * - Screen reader compatible
+ * - Proper ARIA attributes
+ */
+const meta: Meta<typeof Tooltip> = {
+  title: "Primitives/Tooltip",
+  component: Tooltip,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A popup that displays information when hovering or focusing on an element.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+/**
+ * Default tooltip on top
+ */
+export const Default: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Hover me</Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>This is a helpful tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+/**
+ * Tooltip positioned on different sides
+ */
+export const Positions: Story = {
+  render: () => (
+    <div className="flex gap-4 flex-wrap items-center justify-center">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Top</Button>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          <p>Tooltip on top</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Right</Button>
+        </TooltipTrigger>
+        <TooltipContent side="right">
+          <p>Tooltip on right</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Bottom</Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>Tooltip on bottom</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Left</Button>
+        </TooltipTrigger>
+        <TooltipContent side="left">
+          <p>Tooltip on left</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+/**
+ * Tooltip with custom delay duration
+ */
+export const WithDelay: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Tooltip delayDuration={0}>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Instant</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>No delay (0ms)</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip delayDuration={500}>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Delayed</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>500ms delay</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip delayDuration={1000}>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Very Delayed</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>1000ms delay</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+/**
+ * Tooltip on icon button
+ */
+export const OnIconButton: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <span className="sr-only">Settings</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Settings</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <span className="sr-only">Help</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+              <path d="M12 17h.01" />
+            </svg>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Help & Documentation</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+/**
+ * Tooltip with rich content
+ */
+export const RichContent: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">View Details</Button>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-xs">
+        <div className="space-y-1">
+          <p className="font-semibold">User Information</p>
+          <p className="text-xs opacity-90">John Doe</p>
+          <p className="text-xs opacity-90">john.doe@example.com</p>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+/**
+ * Disabled element with tooltip
+ */
+export const OnDisabledElement: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="inline-block">
+          <Button variant="outline" disabled className="pointer-events-none">
+            Disabled Button
+          </Button>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>This action is currently unavailable</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+/**
+ * Multiple tooltips
+ */
+export const MultipleTooltips: Story = {
+  render: () => (
+    <div className="flex gap-4 flex-wrap">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Save</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Save changes (Ctrl+S)</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Copy</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Copy to clipboard (Ctrl+C)</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Paste</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Paste from clipboard (Ctrl+V)</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Undo</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Undo last action (Ctrl+Z)</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+/**
+ * Dark mode support
+ */
+export const DarkMode: Story = {
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+  render: () => (
+    <div className="dark">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Dark Mode Tooltip</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Tooltip in dark mode</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+/**
+ * With custom side offset
+ */
+export const WithSideOffset: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Default Offset</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Default offset (0px)</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Large Offset</Button>
+        </TooltipTrigger>
+        <TooltipContent sideOffset={20}>
+          <p>Large offset (20px)</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};

package/components/primitives/Tooltip/Tooltip.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import * as React from "react";
+import {
+  Tooltip as ShadcnTooltip,
+  TooltipContent as ShadcnTooltipContent,
+  TooltipTrigger as ShadcnTooltipTrigger,
+  TooltipProvider as ShadcnTooltipProvider,
+} from "@/components/ui/tooltip";
+
+/**
+ * Tooltip Primitive
+ *
+ * A popup that displays information related to an element when the element
+ * receives keyboard focus or the mouse hovers over it.
+ *
+ * Features:
+ * - Keyboard focus support
+ * - Customizable delay duration
+ * - Arrow indicator
+ * - Side positioning (top, right, bottom, left)
+ * - Portal rendering for proper z-index
+ * - WCAG 2.1 Level AA compliant
+ */
+
+export type TooltipProps = React.ComponentProps<typeof ShadcnTooltip>;
+export type TooltipTriggerProps = React.ComponentProps<typeof ShadcnTooltipTrigger>;
+export type TooltipContentProps = React.ComponentProps<typeof ShadcnTooltipContent>;
+export type TooltipProviderProps = React.ComponentProps<typeof ShadcnTooltipProvider>;
+
+/**
+ * TooltipProvider - Wraps your app to provide tooltip context
+ * Usually placed at the root of your app
+ */
+export const TooltipProvider = React.memo<TooltipProviderProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnTooltipProvider>, TooltipProviderProps>(
+    (props, ref) => {
+      return <ShadcnTooltipProvider {...props} />;
+    }
+  )
+);
+TooltipProvider.displayName = "TooltipProvider";
+
+/**
+ * Tooltip - Root component that manages tooltip state
+ */
+export const Tooltip = React.memo<TooltipProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnTooltip>, TooltipProps>(
+    (props, ref) => {
+      return <ShadcnTooltip {...props} />;
+    }
+  )
+);
+Tooltip.displayName = "Tooltip";
+
+/**
+ * TooltipTrigger - The element that triggers the tooltip
+ */
+export const TooltipTrigger = React.memo<TooltipTriggerProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnTooltipTrigger>, TooltipTriggerProps>(
+    (props, ref) => {
+      return <ShadcnTooltipTrigger ref={ref} {...props} />;
+    }
+  )
+);
+TooltipTrigger.displayName = "TooltipTrigger";
+
+/**
+ * TooltipContent - The popup content that appears
+ */
+export const TooltipContent = React.memo<TooltipContentProps>(
+  React.forwardRef<React.ElementRef<typeof ShadcnTooltipContent>, TooltipContentProps>(
+    (props, ref) => {
+      return <ShadcnTooltipContent ref={ref} {...props} />;
+    }
+  )
+);
+TooltipContent.displayName = "TooltipContent";

package/components/primitives/Tooltip/index.ts

@@ -0,0 +1,10 @@
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  type TooltipProps,
+  type TooltipContentProps,
+  type TooltipProviderProps,
+  type TooltipTriggerProps,
+} from "./Tooltip";

package/components/primitives/index.ts

@@ -0,0 +1,34 @@
+// Primitives - Design System Foundation Components
+// These are the atomic building blocks of the UI library
+
+export * from "./Accordion"
+export * from "./Alert"
+export * from "./AlertDialog"
+export * from "./Avatar"
+export * from "./Badge"
+export * from "./Button"
+export * from "./Card"
+export * from "./Carousel"
+export * from "./Chart"
+export * from "./Checkbox"
+export * from "./Collapsible"
+export * from "./Command"
+export * from "./Dialog"
+export * from "./Drawer"
+export * from "./DropdownMenu"
+export * from "./HoverCard"
+export * from "./Icon"
+export * from "./Input"
+export * from "./InputGroup"
+export * from "./Label"
+export * from "./Popover"
+export * from "./Progress"
+export * from "./ScrollArea"
+export * from "./Select"
+export * from "./Separator"
+export * from "./Sidebar"
+export * from "./Table"
+export * from "./Tabs"
+export * from "./Textarea"
+export * from "./ToggleGroup"
+export * from "./Tooltip"

package/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }