@otfdashkit/ui 0.1.1 → 0.1.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Dave Soni
+Copyright (c) 2026 Dave Kurian
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,8 +1,7 @@
 <h1 align="center">@otfdashkit/ui</h1>
 
 <p align="center">
-  Production-quality React component library &mdash; 98 primitives + blocks + layouts + charts.<br/>
-  Radix UI under the hood, Tailwind v4 on top, AI-coding-tool-native by design.
+  137 React components for builders shipping production apps — Radix under the hood, Tailwind v4 on top, AI-agent-readable by design.
 </p>
 
 <p align="center">
@@ -19,13 +18,22 @@
 
 ---
 
-## Live demo
+## What you get
 
-Two production apps, same component library, two completely different products:
+- **Primitives** — Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Button, Calendar, Card, Carousel, Checkbox, Collapsible, Command, ContextMenu, Dialog, Drawer, DropdownMenu, Form, HoverCard, Input, InputOtp, Label, Menubar, NavigationMenu, Pagination, Popover, Progress, Radio, Resizable, ScrollArea, Select, Separator, Sheet, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, Toast, Toggle, Tooltip — full Radix-backed set
+- **App-shell layouts** — AppShell, Sidebar, NavigationMenu, CommandPalette (`⌘K` everywhere)
+- **Blocks** — DataGrid, DataTable, Banner, Breadcrumb, EmptyState, Hotkeys, IconBadge, LoadingOverlay, Persona, PropertyList, Stat, Stepper, StructuredList, Timeline, Toaster
+- **Charts** — BarChart, LineChart, AreaChart, BarList, Sparkline, Heatmap, ActivityHeatmap (recharts under the hood, token-driven colors)
+- **Advanced** — Tiptap editor, ImageCrop, file uploaders, marquees, shiki-powered code blocks, video player
+- **17 themes** out of the box from [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens) — swap palette by changing one attribute on `<html>`
 
-- **[saas.otf-kit.dev](https://saas.otf-kit.dev/)** &mdash; Linear-style SaaS dashboard
-- **[fitness-preview.otf-kit.dev](https://fitness-preview.otf-kit.dev/)** &mdash; Apple-Fitness-style mobile-first wellness app
-- **[ui.otf-kit.dev](https://ui.otf-kit.dev/)** &mdash; full Storybook (every component, every variant, every state)
+137 components in [`src/`](src/). Full catalog at the Storybook below.
+
+## Live demos
+
+- **[ui.otf-kit.dev](https://ui.otf-kit.dev/)** — full Storybook: every component, every variant, every state
+- **[saas.otf-kit.dev](https://saas.otf-kit.dev/)** — production SaaS app built end-to-end on this library
+- **[fitness-preview.otf-kit.dev](https://fitness-preview.otf-kit.dev/)** — same component language, different theme
 
 ## Install
 
@@ -56,57 +64,36 @@ export default function SignInCard() {
 }
 ```
 
-## What's included
-
-- **98 primitives** &mdash; Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Command, ContextMenu, Dialog, Drawer, DropdownMenu, Form, HoverCard, Input, InputOtp, Label, Menubar, NavigationMenu, Pagination, Popover, Progress, Radio, Resizable, ScrollArea, Select, Separator, Sheet, Skeleton, Slider, Sonner, Spinner, Switch, Table, Tabs, Textarea, Toast, Toggle, Tooltip, &hellip; (full list in [`src/primitives/`](https://github.com/otf-kit/sdk/tree/main/packages/ui/src/primitives))
-- **App-shell layouts** &mdash; AppShell, Sidebar, NavigationMenu, CommandPalette
-- **Blocks** &mdash; DataGrid, DataTable, Banner, Breadcrumb, EmptyState, Hotkeys, IconBadge, LoadingOverlay, Persona, PropertyList, Stat, Stepper, StructuredList, Timeline, Toaster
-- **Charts** &mdash; BarChart, LineChart, AreaChart, BarList, Sparkline, Heatmap, ActivityHeatmap (recharts under the hood)
-- **17 themes** out of the box from [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens)
-
 ## Theming
 
-Pick a theme by setting an attribute &mdash; tokens cascade to every component:
-
 ```html
 <html data-theme="ocean-teal" class="dark">
 ```
 
-Or write `localStorage('otf-theme')` and the floating theme picker (in the SaaS demo) updates live.
+Tokens cascade to every component. Built-in themes: `mono`, `ocean-teal`, `warm-amber`, `rose-coral`, `lavender`, `glacier`, `forest`, `obsidian`, `solar`, `orchid`, `indigo`, `cosmic-night`, `soft-pop`, `neo-brutalism`, `vintage-paper`, `modern-minimal`, `bubblegum`.
 
-## AI-coding-tool-native
+## Works with
 
-Every component ships with structured JSDoc and tested prompts. Cursor, Claude Code, Copilot, and Lovable all generate correct usage on the first try without bespoke prompting.
+Every component ships structured JSDoc and tested prompts. These agents generate correct usage on the first try:
 
-```ts
-import { Button } from '@otfdashkit/ui'
+- **Claude Code**, **Cursor**, **Lovable**, **Bolt**, **Copilot**
 
-// JSDoc on Button:
-//   variant: 'primary' | 'secondary' | 'destructive' | 'ghost' | 'outline'
-//   size:    'sm' | 'md' | 'lg'
-//   See ai/prompts/add-button.md for tested usage patterns.
-```
-
-## Lint your design system
-
-Pair with [`@otfdashkit/eslint-plugin-otf-design`](https://www.npmjs.com/package/@otfdashkit/eslint-plugin-otf-design) to reject hex literals and default Tailwind palette classes (`gray-500`, `blue-600`, etc.) at lint time. Tokens or it doesn't ship.
+Pair with [`@otfdashkit/eslint-plugin-otf-design`](https://www.npmjs.com/package/@otfdashkit/eslint-plugin-otf-design) to reject hex literals and default Tailwind palette classes (`gray-500`, `blue-600`, …) at lint time. Tokens or it doesn't ship.
 
-## Live demos + Storybook
+## Related packages
 
-- **Web Storybook**: https://ui.otf-kit.dev (every component, every variant)
-- **SaaS dashboard**: [saas.otf-kit.dev](https://saas.otf-kit.dev/) ([source](https://github.com/otf-kit/saas-dashboard))
-- **Fitness app**: [fitness-preview.otf-kit.dev](https://fitness-preview.otf-kit.dev/) ([source](https://github.com/otf-kit/fitness-kit))
+- [`@otfdashkit/ui-native`](https://www.npmjs.com/package/@otfdashkit/ui-native) — mobile counterpart, same component API
+- [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens) — design tokens (CSS vars + Tamagui config)
+- [`@otfdashkit/cli`](https://www.npmjs.com/package/@otfdashkit/cli) — heavy-peer component installer (Skia, Reanimated, MMKV)
 
-## Related packages
+## Community
 
-- [`@otfdashkit/ui-native`](https://www.npmjs.com/package/@otfdashkit/ui-native) &mdash; mobile counterpart, same component API, Tamagui under the hood
-- [`@otfdashkit/tokens`](https://www.npmjs.com/package/@otfdashkit/tokens) &mdash; the design tokens this package consumes
-- [`@otfdashkit/eslint-plugin-otf-design`](https://www.npmjs.com/package/@otfdashkit/eslint-plugin-otf-design) &mdash; design-system lint rules
+Questions, bugs, feature requests: **[discord.gg/gpXyu7SqNZ](https://discord.gg/gpXyu7SqNZ)**.
 
 ## Status
 
-`v0.1.x` &mdash; alpha. APIs may change before `1.0`. Pin exact versions if you ship to production.
+`v0.1.x` — alpha. APIs may change before `1.0`. Pin exact versions in production.
 
 ## License
 
-MIT &copy; otfdashkit
+MIT. You own the source. Eject any time. Copyright &copy; otfdashkit.

package/dist/index.js

@@ -21,10 +21,9 @@ var DialogPrimitive = require('@radix-ui/react-dialog');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
 var vaul = require('vaul');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-var reactHookForm = require('react-hook-form');
-var LabelPrimitive = require('@radix-ui/react-label');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var inputOtp = require('input-otp');
+var LabelPrimitive = require('@radix-ui/react-label');
 var MenubarPrimitive = require('@radix-ui/react-menubar');
 var NavigationMenuPrimitive = require('@radix-ui/react-navigation-menu');
 var PopoverPrimitive = require('@radix-ui/react-popover');
@@ -56,6 +55,7 @@ var extensionTable = require('@tiptap/extension-table');
 var extensionTableRow = require('@tiptap/extension-table-row');
 var extensionTableCell = require('@tiptap/extension-table-cell');
 var extensionTableHeader = require('@tiptap/extension-table-header');
+var reactHookForm = require('react-hook-form');
 var zod = require('@hookform/resolvers/zod');
 var z = require('zod');
 var reactColorful = require('react-colorful');
@@ -96,8 +96,8 @@ var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(Collapsible
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var MenubarPrimitive__namespace = /*#__PURE__*/_interopNamespace(MenubarPrimitive);
 var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
@@ -1634,104 +1634,6 @@ var DropdownMenuSubContent = React131__namespace.default.forwardRef(({ className
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var labelVariants = classVarianceAuthority.cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-var Label3 = React131__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  LabelPrimitive__namespace.Root,
-  {
-    ref,
-    className: cn(labelVariants(), className),
-    ...props
-  }
-));
-Label3.displayName = LabelPrimitive__namespace.Root.displayName;
-var FormFieldContext = React131__namespace.createContext(null);
-var useFormField = () => {
-  const fieldContext = React131__namespace.useContext(FormFieldContext);
-  const itemContext = React131__namespace.useContext(FormItemContext);
-  const { getFieldState, formState } = reactHookForm.useFormContext();
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-  if (!itemContext) {
-    throw new Error("useFormField should be used within <FormItem>");
-  }
-  const fieldState = getFieldState(fieldContext.name, formState);
-  const { id } = itemContext;
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState
-  };
-};
-var FormItemContext = React131__namespace.createContext(null);
-var FormItem = React131__namespace.forwardRef(({ className, ...props }, ref) => {
-  const id = React131__namespace.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
-});
-FormItem.displayName = "FormItem";
-var FormLabel = React131__namespace.forwardRef(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Label3,
-    {
-      ref,
-      className: cn(error && "text-destructive", className),
-      htmlFor: formItemId,
-      ...props
-    }
-  );
-});
-FormLabel.displayName = "FormLabel";
-var FormControl = React131__namespace.forwardRef(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactSlot.Slot,
-    {
-      ref,
-      id: formItemId,
-      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
-      "aria-invalid": !!error,
-      ...props
-    }
-  );
-});
-FormControl.displayName = "FormControl";
-var FormDescription = React131__namespace.forwardRef(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "p",
-    {
-      ref,
-      id: formDescriptionId,
-      className: cn("text-[0.8rem] text-muted-foreground", className),
-      ...props
-    }
-  );
-});
-FormDescription.displayName = "FormDescription";
-var FormMessage = React131__namespace.forwardRef(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : children;
-  if (!body) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "p",
-    {
-      ref,
-      id: formMessageId,
-      className: cn("text-[0.8rem] font-medium text-destructive", className),
-      ...props,
-      children: body
-    }
-  );
-});
-FormMessage.displayName = "FormMessage";
 var HoverCard = HoverCardPrimitive__namespace.Root;
 var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
 var HoverCardContent = React131__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1805,6 +1707,18 @@ var Input = React131__namespace.default.forwardRef(
   )
 );
 Input.displayName = "Input";
+var labelVariants = classVarianceAuthority.cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label3 = React131__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  LabelPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label3.displayName = LabelPrimitive__namespace.Root.displayName;
 var LogoCarousel = React131__namespace.default.forwardRef(
   ({
     className,
@@ -3216,6 +3130,27 @@ function Breadcrumb({ children, className }) {
   });
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: cn("flex flex-wrap items-center gap-1", className), children: withSeparators }) });
 }
+function CommandItem2({ icon, label, description, shortcut, active, onClick, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      onClick,
+      className: cn(
+        "flex items-center gap-3 rounded-md px-3 py-2 cursor-pointer transition-colors",
+        active ? "bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]" : "hover:bg-[hsl(var(--accent)/0.6)]",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[hsl(var(--muted-foreground))] h-4 w-4 flex items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: label }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: description })
+        ] }),
+        shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "shrink-0 pointer-events-none inline-flex h-5 items-center gap-1 rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 text-[10px] font-medium text-[hsl(var(--muted-foreground))]", children: shortcut })
+      ]
+    }
+  );
+}
 function EditableCell({ value: initial, onSave }) {
   const [editing, setEditing] = React131__namespace.default.useState(false);
   const [val, setVal] = React131__namespace.default.useState(String(initial ?? ""));
@@ -3371,14 +3306,53 @@ var EmptyStateIcon = React131__namespace.default.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex h-12 w-12 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]", className), ...props })
 );
 EmptyStateIcon.displayName = "EmptyStateIcon";
-function EmptyState({ icon, title, description, action, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center justify-center gap-3 py-12 text-center", className), children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx(EmptyStateIcon, { children: icon }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-[hsl(var(--foreground))]", children: title }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: description })
+var sizeMap = {
+  sm: "py-8 gap-2",
+  default: "py-12 gap-3",
+  lg: "py-20 gap-4"
+};
+var titleSizeMap = {
+  sm: "text-sm font-semibold",
+  default: "text-base font-semibold",
+  lg: "text-lg font-semibold"
+};
+var descSizeMap = {
+  sm: "text-xs",
+  default: "text-sm",
+  lg: "text-base"
+};
+var iconSizeMap = {
+  sm: "h-10 w-10",
+  default: "h-12 w-12",
+  lg: "h-16 w-16"
+};
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  secondaryAction,
+  size = "default",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center justify-center text-center", sizeMap[size], className), children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx(EmptyStateIcon, { className: iconSizeMap[size], children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 max-w-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn(titleSizeMap[size], "text-[hsl(var(--foreground))]"), children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(descSizeMap[size], "text-[hsl(var(--muted-foreground))]"), children: description })
     ] }),
-    action && /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: action.onClick, className: "mt-1", children: action.label })
+    (action || secondaryAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
+      action && /* @__PURE__ */ jsxRuntime.jsx(Button, { size: size === "sm" ? "sm" : "default", onClick: action.onClick, children: action.label }),
+      secondaryAction && /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "outline",
+          size: size === "sm" ? "sm" : "default",
+          onClick: secondaryAction.onClick,
+          children: secondaryAction.label
+        }
+      )
+    ] })
   ] });
 }
 function HotkeyBadge({ children, className }) {
@@ -3398,13 +3372,13 @@ var colorMap = {
   error: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
   purple: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
 };
-var sizeMap = {
+var sizeMap2 = {
   sm: "h-7 w-7 [&>*]:h-3.5 [&>*]:w-3.5",
   md: "h-10 w-10 [&>*]:h-5 [&>*]:w-5",
   lg: "h-14 w-14 [&>*]:h-7 [&>*]:w-7"
 };
 function IconBadge({ icon, color = "default", size = "md", className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-flex items-center justify-center rounded-full shrink-0", colorMap[color], sizeMap[size], className), children: icon });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-flex items-center justify-center rounded-full shrink-0", colorMap[color], sizeMap2[size], className), children: icon });
 }
 function LoadingOverlay({ loading, text, fullPage, children, className }) {
   if (fullPage) {
@@ -3421,13 +3395,13 @@ function LoadingOverlay({ loading, text, fullPage, children, className }) {
     ] }) })
   ] });
 }
-var sizeMap2 = {
+var sizeMap3 = {
   sm: { avatar: "h-7 w-7", name: "text-sm", subtitle: "text-xs" },
   md: { avatar: "h-9 w-9", name: "text-sm font-medium", subtitle: "text-xs" },
   lg: { avatar: "h-12 w-12", name: "text-base font-medium", subtitle: "text-sm" }
 };
 function Persona({ name, subtitle, src, size = "md", badge, className }) {
-  const s = sizeMap2[size];
+  const s = sizeMap3[size];
   const initials = name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
@@ -3828,7 +3802,7 @@ function InviteModal({ className }) {
     pending.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-[hsl(var(--muted-foreground))]", children: "Pending invites" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-[hsl(var(--border))] rounded-md border border-[hsl(var(--border))]", children: pending.map((p, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "h-6 w-6", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-[10px]", children: p.email[0].toUpperCase() }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "h-6 w-6", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-[10px]", children: p.email.charAt(0).toUpperCase() }) }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-sm truncate", children: p.email }),
         /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0.5 shrink-0", children: p.role }),
         /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setPending((ps) => ps.filter((_, j) => j !== i)), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]" }) })
@@ -4521,7 +4495,7 @@ function NotificationSettings({ className }) {
       NotifRow,
       {
         ...n,
-        checked: states[n.id],
+        checked: states[n.id] ?? false,
         onChange: (val) => setStates((s) => ({ ...s, [n.id]: val }))
       },
       n.id
@@ -4723,7 +4697,7 @@ var ROLES = [
 ];
 function RolesMenu({ value = "member", onChange, className }) {
   const [role, setRole] = React131.useState(value);
-  const current = ROLES.find((r) => r.value === role) ?? ROLES[2];
+  const current = ROLES.find((r) => r.value === role) ?? ROLES[0];
   const handleChange = (v) => {
     setRole(v);
     onChange?.(v);
@@ -7068,7 +7042,7 @@ function Sparkline({
   const max = Math.max(...data);
   const range = max - min || 1;
   const pad = 2;
-  const lastY = pad + (1 - (data[data.length - 1] - min) / range) * (height - pad * 2);
+  const lastY = pad + (1 - ((data.at(-1) ?? 0) - min) / range) * (height - pad * 2);
   const areaPath = type === "area" ? `${path} L ${width - pad},${height - pad} L ${pad},${height - pad} Z` : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -7092,7 +7066,7 @@ var colorMap2 = {
   warning: "bg-yellow-500",
   error: "bg-red-500"
 };
-var sizeMap3 = {
+var sizeMap4 = {
   sm: "h-1.5 w-1.5",
   md: "h-2.5 w-2.5",
   lg: "h-3.5 w-3.5"
@@ -7100,7 +7074,7 @@ var sizeMap3 = {
 function BeaconDot({ color = "primary", size = "md" }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("animate-ping absolute inline-flex h-full w-full rounded-full opacity-75", colorMap2[color]) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("relative inline-flex rounded-full", sizeMap3[size], colorMap2[color]) })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("relative inline-flex rounded-full", sizeMap4[size], colorMap2[color]) })
   ] });
 }
 function Beacon({ color = "primary", size = "md", children, className }) {
@@ -7720,6 +7694,7 @@ function FieldRenderer({ name, field, register, setValue, watch, error }) {
 }
 function AutoForm({ schema, onSubmit, defaultValues, submitLabel = "Submit" }) {
   const { register, handleSubmit, setValue, watch, formState } = reactHookForm.useForm({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     resolver: zod.zodResolver(schema),
     defaultValues
   });
@@ -8023,7 +7998,91 @@ function FileUploadPreview({ files, onRemove, className }) {
     ] })
   ] }, i)) });
 }
-var FormLabel2 = React131__namespace.default.forwardRef(
+var FloatingLabelInput = React131__namespace.default.forwardRef(
+  ({ label, error, hint, wrapperClassName, className, id, value, defaultValue, onFocus, onBlur, onChange, ...props }, ref) => {
+    const autoId = React131.useId();
+    const inputId = id ?? autoId;
+    const errorId = error ? `${inputId}-error` : void 0;
+    const hintId = hint ? `${inputId}-hint` : void 0;
+    const describedBy = [errorId, hintId].filter(Boolean).join(" ") || void 0;
+    const [focused, setFocused] = React131.useState(false);
+    const [filled, setFilled] = React131.useState(() => {
+      if (value !== void 0 && value !== null && value !== "") return true;
+      if (defaultValue !== void 0 && defaultValue !== null && defaultValue !== "") return true;
+      return false;
+    });
+    const isFloated = focused || filled;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "floating-label-input", className: cn("flex flex-col gap-1.5", wrapperClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            value,
+            defaultValue,
+            "data-slot": "input",
+            "data-state": isFloated ? "floated" : "rest",
+            "aria-invalid": Boolean(error) || void 0,
+            "aria-describedby": describedBy,
+            onFocus: (e) => {
+              setFocused(true);
+              onFocus?.(e);
+            },
+            onBlur: (e) => {
+              setFocused(false);
+              onBlur?.(e);
+            },
+            onChange: (e) => {
+              setFilled(e.target.value.length > 0);
+              onChange?.(e);
+            },
+            className: cn(
+              // Reset + structure
+              "peer w-full appearance-none bg-transparent",
+              "h-14 rounded-md border px-3 pt-5 pb-1.5",
+              "text-base text-foreground leading-tight",
+              // Border / focus ring colors
+              "border-input focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30",
+              error && "border-destructive focus:border-destructive focus:ring-destructive/30",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              "placeholder:text-transparent",
+              // hide native placeholder; label takes its job
+              className
+            ),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: inputId,
+            className: cn(
+              "pointer-events-none absolute left-3",
+              "origin-[0_50%] transition-all duration-150 ease-out",
+              "text-muted-foreground",
+              // Rest: centered vertically inside the field, full size
+              !isFloated && "top-1/2 -translate-y-1/2 text-base",
+              // Floated: tucked into the top with a small subtle background
+              isFloated && "top-1.5 text-[11px] uppercase tracking-wider text-foreground/85",
+              error && "text-destructive"
+            ),
+            children: label
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: "text-xs text-destructive", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: hintId, className: "text-xs text-muted-foreground", children: hint }) : null
+    ] });
+  }
+);
+FloatingLabelInput.displayName = "FloatingLabelInput";
+function FormField(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props });
+}
+function FormItem({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+}
+var FormLabel = React131__namespace.default.forwardRef(
   ({ className, error, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "label",
     {
@@ -8037,14 +8096,24 @@ var FormLabel2 = React131__namespace.default.forwardRef(
     }
   )
 );
-FormLabel2.displayName = "FormLabel";
-var FormControl2 = React131__namespace.default.forwardRef(
+FormLabel.displayName = "FormLabel";
+var FormControl = React131__namespace.default.forwardRef(
   ({ ...props }, ref) => {
     const id = React131.useId();
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, id, ...props });
   }
 );
-FormControl2.displayName = "FormControl";
+FormControl.displayName = "FormControl";
+function FormDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs text-[hsl(var(--muted-foreground))]", className), ...props });
+}
+function FormMessage({ className, children, name }) {
+  const { formState } = reactHookForm.useFormContext();
+  const error = name ? formState.errors[name] : void 0;
+  const message = error?.message ? String(error.message) : children;
+  if (!message) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs text-[hsl(var(--destructive))]", className), children: message });
+}
 function ObjectField({
   title,
   description,
@@ -8527,7 +8596,7 @@ var MobileSidebarTrigger = React131__namespace.default.forwardRef(
   }
 );
 MobileSidebarTrigger.displayName = "MobileSidebarTrigger";
-var sizeMap4 = {
+var sizeMap5 = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
   lg: "max-w-screen-lg",
@@ -8541,7 +8610,7 @@ var Container = React131__namespace.default.forwardRef(
       ref,
       className: cn(
         "mx-auto w-full",
-        sizeMap4[size],
+        sizeMap5[size],
         !noPadding && "px-4 sm:px-6 lg:px-8",
         className
       ),
@@ -12733,6 +12802,10 @@ function SortableNav({ items, onReorder, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(core.DndContext, { sensors, collisionDetection: core.closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: items.map((i) => i.id), strategy: sortable.verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "data-slot": "sortable-nav", className: cn("space-y-0.5 px-2 py-1", className), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SortableNavItemWrapper, { item }, item.id)) }) }) });
 }
 
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () { return reactHookForm.FormProvider; }
+});
 Object.defineProperty(exports, "AnimatePresence", {
   enumerable: true,
   get: function () { return react.AnimatePresence; }
@@ -12849,7 +12922,9 @@ exports.CommandDialog = CommandDialog;
 exports.CommandEmpty = CommandEmpty;
 exports.CommandGroup = CommandGroup;
 exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
 exports.CommandList = CommandList;
+exports.CommandListItem = CommandItem2;
 exports.CommandPalette = CommandPalette;
 exports.CommandPaletteProvider = CommandPaletteProvider;
 exports.CommandSeparator = CommandSeparator;
@@ -12934,7 +13009,14 @@ exports.FilterBadge = FilterBadge;
 exports.FilterItem = FilterItem;
 exports.Filters = Filters;
 exports.FloatingActionButton = FloatingActionButton;
+exports.FloatingLabelInput = FloatingLabelInput;
 exports.FloatingThemePicker = FloatingThemePicker;
+exports.FormControl = FormControl;
+exports.FormDescription = FormDescription;
+exports.FormField = FormField;
+exports.FormItem = FormItem;
+exports.FormLabel = FormLabel;
+exports.FormMessage = FormMessage;
 exports.Gantt = Gantt;
 exports.GradientBackground = GradientBackground;
 exports.GradientHeading = GradientHeading;
@@ -13172,7 +13254,6 @@ exports.toggleVariants = toggleVariants;
 exports.useAppShell = useAppShell;
 exports.useCommandBar = useCommandBar;
 exports.useCommandPalette = useCommandPalette;
-exports.useFormField = useFormField;
 exports.useHotkeys = useHotkeys;
 exports.useLayoutId = useLayoutId;
 exports.useSidebar = useSidebar;