@kinetixui/ui 0.1.0

package/src/index.ts

@@ -0,0 +1,305 @@
+"use client";
+
+// @kinetixui/ui — public entrypoint
+
+/* Design-source native API (variant props mirror Figma component properties) */
+export { Button, buttonVariants, type ButtonProps } from "./components/button";
+export { Input, inputVariants, type InputProps } from "./components/input";
+export { Textarea, textareaVariants, type TextareaProps } from "./components/textarea";
+
+/* Ported onto the KinetixUI token contract (common component API conventions) */
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./components/accordion";
+export { Alert, AlertTitle, AlertDescription } from "./components/alert";
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "./components/alert-dialog";
+export { AspectRatio } from "./components/aspect-ratio";
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, type AvatarGroupProps } from "./components/avatar";
+export { Badge, badgeVariants, type BadgeProps } from "./components/badge";
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from "./components/breadcrumb";
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "./components/card";
+export { Checkbox } from "./components/checkbox";
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./components/collapsible";
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from "./components/dialog";
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from "./components/dropdown-menu";
+export { HoverCard, HoverCardTrigger, HoverCardContent } from "./components/hover-card";
+export { Label } from "./components/label";
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from "./components/pagination";
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "./components/popover";
+export { Progress } from "./components/progress";
+export { RadioGroup, RadioGroupItem } from "./components/radio-group";
+export { ScrollArea, ScrollBar } from "./components/scroll-area";
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+} from "./components/select";
+export { Separator } from "./components/separator";
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+} from "./components/sheet";
+export { Modal, type ModalType, type ModalProps } from "./components/modal";
+export { Skeleton } from "./components/skeleton";
+export { Slider } from "./components/slider";
+export { Toaster, toast } from "./components/sonner";
+export { Switch } from "./components/switch";
+export { Tag, tagVariants, type TagProps } from "./components/tag";
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from "./components/table";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./components/tabs";
+export { Toggle, toggleVariants } from "./components/toggle";
+export { ToggleGroup, ToggleGroupItem } from "./components/toggle-group";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./components/tooltip";
+
+/* Batch 2 — compositions + charting + layout */
+export { Calendar, type CalendarProps } from "./components/calendar";
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  type CarouselApi,
+} from "./components/carousel";
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  type ChartConfig,
+} from "./components/chart";
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+} from "./components/command";
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+} from "./components/context-menu";
+export { DataTable } from "./components/data-table";
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+} from "./components/drawer";
+export {
+  Field,
+  FieldLabel,
+  FieldControl,
+  FieldDescription,
+  FieldMessage,
+  messageVariants,
+} from "./components/field";
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+} from "./components/form";
+export {
+  InputGroup,
+  InputGroupInput,
+  InputGroupAddon,
+  InputGroupText,
+  InputGroupButton,
+} from "./components/input-group";
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./components/input-otp";
+export { PasswordInput } from "./components/password-input";
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+} from "./components/menubar";
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+} from "./components/navigation-menu";
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "./components/resizable";
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarProvider,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from "./components/sidebar";
+
+/* Batch 3 — additional gap-fill components */
+export { AudioPlayer, type AudioPlayerProps } from "./components/audio-player";
+export { CircularProgress, type CircularProgressProps } from "./components/circular-progress";
+export { Image, type ImageProps } from "./components/image";
+export { Inform, informVariants, type InformProps } from "./components/inform";
+
+/* Batch 4 — mobile-pattern gap-fill components */
+export { Rating, type RatingProps } from "./components/rating";
+export { Spinner, spinnerVariants, type SpinnerProps } from "./components/spinner";
+export { List, ListItem, type ListItemProps } from "./components/list";
+export { Stepper, type StepperProps, type StepperStep } from "./components/stepper";
+export { Fab, fabVariants, type FabProps } from "./components/fab";
+export { TabBar, TabBarItem, type TabBarItemProps } from "./components/tab-bar";
+export { NavigationBar, type NavigationBarProps } from "./components/navigation-bar";
+export {
+  FileUpload,
+  FileUploadItem,
+  formatBytes,
+  type UploadFile,
+  type FileUploadProps,
+  type FileUploadItemProps,
+} from "./components/file-upload";
+export { DatePicker, type DatePickerProps } from "./components/date-picker";
+
+/* Batch 5 — web-pattern gap-fill components */
+export { CodeBlock, type CodeBlockProps, type CodeBlockFile } from "./components/code-block";
+export { Metric, type MetricProps } from "./components/metric";
+export { NumberInput, type NumberInputProps } from "./components/number-input";
+export { Quote, type QuoteProps } from "./components/quote";
+export { Footer, FooterColumn, FooterLink, FooterBottom, type FooterColumnProps } from "./components/footer";
+export { TableOfContents, type TableOfContentsProps, type TocItem } from "./components/table-of-contents";
+
+export { cn } from "./lib/utils";

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merges Tailwind class names, resolving conflicts (clsx + tailwind-merge). */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/stories/Button.stories.tsx

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../components/button";
+
+const VARIANTS = ["Primary", "Secondary", "Outline", "Destructive", "Ghost", "Link"] as const;
+const SIZES = ["sm", "md", "lg", "icon"] as const;
+const STATES = ["Default", "Hover", "Focus", "Active", "Disabled"] as const;
+
+const meta = {
+  title: "Controls & Actions/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Generated from Figma `KinetixUI` › UI Components › 02. Controls & Actions › Button (node 54863:351). 6 variants × 4 sizes × 5 states = 120 permutations, mirrored 1:1 from the Figma component properties.",
+      },
+    },
+  },
+  args: { children: "Button", variant: "Primary", size: "md", state: "Default" },
+  argTypes: {
+    variant: { control: "inline-radio", options: VARIANTS },
+    size: { control: "inline-radio", options: SIZES },
+    state: { control: "inline-radio", options: STATES },
+    asChild: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* ---- interactive playground ---------------------------------------------- */
+export const Playground: Story = {};
+
+/* ---- every variant ----------------------------------------------------- */
+export const Variants: Story = {
+  render: (args) => (
+    <div className="flex flex-wrap items-center gap-3">
+      {VARIANTS.map((variant) => (
+        <Button key={variant} {...args} variant={variant}>
+          {variant}
+        </Button>
+      ))}
+    </div>
+  ),
+};
+
+/* ---- every size ------------------------------------------------------- */
+export const Sizes: Story = {
+  render: (args) => (
+    <div className="flex flex-wrap items-center gap-3">
+      {SIZES.map((size) => (
+        <Button key={size} {...args} size={size}>
+          {size === "icon" ? "★" : `Size ${size}`}
+        </Button>
+      ))}
+    </div>
+  ),
+};
+
+/* ---- full matrix (mirrors the Figma component sheet) ------------------- */
+export const Matrix: Story = {
+  parameters: { layout: "padded" },
+  render: (args) => (
+    <table className="border-separate border-spacing-3 text-left align-middle">
+      <thead>
+        <tr>
+          <th className="text-xs font-medium text-muted-foreground">variant \ state</th>
+          {STATES.map((s) => (
+            <th key={s} className="text-xs font-medium text-muted-foreground">
+              {s}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {VARIANTS.map((variant) => (
+          <tr key={variant}>
+            <td className="text-xs font-medium text-muted-foreground">{variant}</td>
+            {STATES.map((state) => (
+              <td key={state}>
+                <Button {...args} variant={variant} state={state}>
+                  Button
+                </Button>
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+};
+
+/* ---- asChild (Radix Slot) ------------------------------------------------ */
+export const AsChildLink: Story = {
+  render: (args) => (
+    <Button {...args} asChild variant="Link">
+      <a href="https://figma.com" target="_blank" rel="noreferrer">
+        Open Figma
+      </a>
+    </Button>
+  ),
+};
+
+/* ---- multi-platform usage (rendered in the Docs tab) ------------------- */
+export const CrossPlatformUsage: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: [
+          "/* ── Web · React (@kinetixui/ui) ────────────────────────────── */",
+          '<Button variant="Primary" size="md">Save</Button>',
+          "",
+          "/* ── Web · HTML + CSS (token contract) ───────────────────── */",
+          '<button class="kx-btn kx-btn--primary kx-btn--md">Save</button>',
+          "/* uses --primary / --primary-foreground / --radius from globals.css */",
+          "",
+          "/* ── Angular (kx-button) ─────────────────────────────── */",
+          '<button kx-button variant="primary" size="md">Save</button>',
+          "",
+          "/* ── Flutter (AppTheme) ──────────────────────────────────── */",
+          "FilledButton(",
+          "  style: FilledButton.styleFrom(",
+          "    backgroundColor: AppColors.primary,",
+          "    foregroundColor: AppColors.primaryForeground,",
+          "    shape: RoundedRectangleBorder(",
+          "      borderRadius: BorderRadius.circular(AppTheme.radius)),",
+          "  ),",
+          "  onPressed: onSave,",
+          "  child: const Text('Save'),",
+          ")",
+          "",
+          "/* ── iOS · SwiftUI (KinetixTheme) ─────────────────────────── */",
+          "Button('Save', action: save)",
+          "  .padding(.horizontal, 16).padding(.vertical, 12)",
+          "  .background(KinetixTheme.light.primary)",
+          "  .foregroundStyle(KinetixTheme.light.primaryForeground)",
+          "  .clipShape(RoundedRectangle(cornerRadius: KinetixTheme.light.radius))",
+          "",
+          "/* ── Android · Jetpack Compose (KinetixTheme) ─────────────── */",
+          "Button(",
+          "  onClick = onSave,",
+          "  colors = ButtonDefaults.buttonColors(",
+          "    containerColor = KinetixTheme.primary,",
+          "    contentColor = KinetixTheme.primaryForeground),",
+          "  shape = RoundedCornerShape(KinetixTheme.radius),",
+          ") { Text(\"Save\") }",
+        ].join("\n"),
+        language: "tsx",
+      },
+    },
+  },
+  render: (args) => <Button {...args}>Save</Button>,
+};

package/src/stories/Input.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "../components/input";
+
+const STATES = ["Default", "Focus", "Error", "Disabled"] as const;
+
+const meta = {
+  title: "Form Inputs/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Generated from Figma `KinetixUI` › UI Components › 01. Form Inputs › Input (node 54855:13836). State matrix mirrors the Figma component property `state = Default | Focus | Error | Disabled`; Focus is `:focus-visible`, Disabled is native, `state=\"Error\"` sets `aria-invalid`.",
+      },
+    },
+  },
+  args: { placeholder: "Placeholder text" },
+  argTypes: {
+    state: { control: "inline-radio", options: [undefined, ...STATES] },
+    disabled: { control: "boolean" },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 320 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const States: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-4">
+      {STATES.map((state) => (
+        <label key={state} className="flex flex-col gap-2">
+          <span className="text-[14px] font-medium tracking-[0.1px]">{state}</span>
+          <Input {...args} state={state} defaultValue={state === "Error" ? "Not quite right" : undefined} />
+        </label>
+      ))}
+    </div>
+  ),
+};
+
+/** reproduces the full Figma field: label + control + helper, colour tracks state */
+export const WithFieldChrome: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-6">
+      {STATES.map((state) => {
+        const tone =
+          state === "Error" ? "text-destructive" : state === "Focus" ? "text-primary" : "text-foreground";
+        const helperTone = state === "Error" ? "text-destructive" : "text-muted-foreground";
+        return (
+          <div key={state} className={state === "Disabled" ? "opacity-50" : undefined}>
+            <label className="flex flex-col gap-2">
+              <span className={`text-[14px] font-medium leading-5 tracking-[0.1px] ${tone}`}>Label</span>
+              <Input {...args} state={state} />
+              <span className={`text-[12px] leading-4 ${helperTone}`}>Helper text</span>
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  ),
+};
+
+export const Types: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-3">
+      <Input {...args} type="email" placeholder="you@example.com" />
+      <Input {...args} type="password" placeholder="••••••••" />
+      <Input {...args} type="number" placeholder="42" />
+    </div>
+  ),
+};

package/src/stories/Textarea.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Textarea } from "../components/textarea";
+
+const STATES = ["Default", "Focus", "Error", "Disabled"] as const;
+
+const meta = {
+  title: "Form Inputs/Textarea",
+  component: Textarea,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Generated from Figma `KinetixUI` › UI Components › 01. Form Inputs › Textarea (node 54855:13857). Same state matrix and tokens as Input; multi-line with `min-h-[100px]` (Figma `h: 100`) and vertical resize.",
+      },
+    },
+  },
+  args: { placeholder: "Placeholder text", rows: 4 },
+  argTypes: {
+    state: { control: "inline-radio", options: [undefined, ...STATES] },
+    disabled: { control: "boolean" },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 320 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const States: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-4">
+      {STATES.map((state) => (
+        <label key={state} className="flex flex-col gap-2">
+          <span className="text-[14px] font-medium tracking-[0.1px]">{state}</span>
+          <Textarea {...args} state={state} defaultValue={state === "Error" ? "Too short." : undefined} />
+        </label>
+      ))}
+    </div>
+  ),
+};
+
+export const WithFieldChrome: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-6">
+      {STATES.map((state) => {
+        const tone =
+          state === "Error" ? "text-destructive" : state === "Focus" ? "text-primary" : "text-foreground";
+        const helperTone = state === "Error" ? "text-destructive" : "text-muted-foreground";
+        return (
+          <div key={state} className={state === "Disabled" ? "opacity-50" : undefined}>
+            <label className="flex flex-col gap-2">
+              <span className={`text-[14px] font-medium leading-5 tracking-[0.1px] ${tone}`}>Label</span>
+              <Textarea {...args} state={state} />
+              <span className={`text-[12px] leading-4 ${helperTone}`}>Helper text</span>
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  ),
+};