@otfdashkit/ui 0.1.1 → 0.1.2

package/dist/index.mjs

@@ -21,10 +21,9 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { useFormContext, useForm } from 'react-hook-form';
-import * as LabelPrimitive from '@radix-ui/react-label';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import { OTPInput, OTPInputContext } from 'input-otp';
+import * as LabelPrimitive from '@radix-ui/react-label';
 import * as MenubarPrimitive from '@radix-ui/react-menubar';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -56,6 +55,8 @@ import { Table as Table$1 } from '@tiptap/extension-table';
 import { TableRow as TableRow$1 } from '@tiptap/extension-table-row';
 import { TableCell as TableCell$1 } from '@tiptap/extension-table-cell';
 import { TableHeader as TableHeader$1 } from '@tiptap/extension-table-header';
+import { useForm, Controller, useFormContext } from 'react-hook-form';
+export { FormProvider as Form } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
 import { HexAlphaColorPicker, HexColorPicker, RgbStringColorPicker, HslStringColorPicker } from 'react-colorful';
@@ -1580,104 +1581,6 @@ var DropdownMenuSubContent = React131__default.forwardRef(({ className, ...props
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-var Label3 = React131.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  LabelPrimitive.Root,
-  {
-    ref,
-    className: cn(labelVariants(), className),
-    ...props
-  }
-));
-Label3.displayName = LabelPrimitive.Root.displayName;
-var FormFieldContext = React131.createContext(null);
-var useFormField = () => {
-  const fieldContext = React131.useContext(FormFieldContext);
-  const itemContext = React131.useContext(FormItemContext);
-  const { getFieldState, formState } = 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.createContext(null);
-var FormItem = React131.forwardRef(({ className, ...props }, ref) => {
-  const id = React131.useId();
-  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
-});
-FormItem.displayName = "FormItem";
-var FormLabel = React131.forwardRef(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    Label3,
-    {
-      ref,
-      className: cn(error && "text-destructive", className),
-      htmlFor: formItemId,
-      ...props
-    }
-  );
-});
-FormLabel.displayName = "FormLabel";
-var FormControl = React131.forwardRef(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    Slot,
-    {
-      ref,
-      id: formItemId,
-      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
-      "aria-invalid": !!error,
-      ...props
-    }
-  );
-});
-FormControl.displayName = "FormControl";
-var FormDescription = React131.forwardRef(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      ref,
-      id: formDescriptionId,
-      className: cn("text-[0.8rem] text-muted-foreground", className),
-      ...props
-    }
-  );
-});
-FormDescription.displayName = "FormDescription";
-var FormMessage = React131.forwardRef(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : children;
-  if (!body) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      ref,
-      id: formMessageId,
-      className: cn("text-[0.8rem] font-medium text-destructive", className),
-      ...props,
-      children: body
-    }
-  );
-});
-FormMessage.displayName = "FormMessage";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
 var HoverCardContent = React131.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -1751,6 +1654,18 @@ var Input = React131__default.forwardRef(
   )
 );
 Input.displayName = "Input";
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label3 = React131.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label3.displayName = LabelPrimitive.Root.displayName;
 var LogoCarousel = React131__default.forwardRef(
   ({
     className,
@@ -3162,6 +3077,27 @@ function Breadcrumb({ children, className }) {
   });
   return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "shrink-0 text-[hsl(var(--muted-foreground))] h-4 w-4 flex items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: label }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: description })
+        ] }),
+        shortcut && /* @__PURE__ */ 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__default.useState(false);
   const [val, setVal] = React131__default.useState(String(initial ?? ""));
@@ -3317,14 +3253,53 @@ var EmptyStateIcon = React131__default.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-3 py-12 text-center", className), children: [
-    icon && /* @__PURE__ */ jsx(EmptyStateIcon, { children: icon }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[hsl(var(--foreground))]", children: title }),
-      description && /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center text-center", sizeMap[size], className), children: [
+    icon && /* @__PURE__ */ jsx(EmptyStateIcon, { className: iconSizeMap[size], children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1 max-w-sm", children: [
+      /* @__PURE__ */ jsx("h3", { className: cn(titleSizeMap[size], "text-[hsl(var(--foreground))]"), children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: cn(descSizeMap[size], "text-[hsl(var(--muted-foreground))]"), children: description })
     ] }),
-    action && /* @__PURE__ */ jsx(Button, { onClick: action.onClick, className: "mt-1", children: action.label })
+    (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
+      action && /* @__PURE__ */ jsx(Button, { size: size === "sm" ? "sm" : "default", onClick: action.onClick, children: action.label }),
+      secondaryAction && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: size === "sm" ? "sm" : "default",
+          onClick: secondaryAction.onClick,
+          children: secondaryAction.label
+        }
+      )
+    ] })
   ] });
 }
 function HotkeyBadge({ children, className }) {
@@ -3344,13 +3319,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__ */ jsx("div", { className: cn("inline-flex items-center justify-center rounded-full shrink-0", colorMap[color], sizeMap[size], className), children: icon });
+  return /* @__PURE__ */ 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) {
@@ -3367,13 +3342,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__ */ jsxs("div", { className: cn("flex items-center gap-2.5", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
@@ -3774,7 +3749,7 @@ function InviteModal({ className }) {
     pending.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[hsl(var(--muted-foreground))]", children: "Pending invites" }),
       /* @__PURE__ */ jsx("div", { className: "divide-y divide-[hsl(var(--border))] rounded-md border border-[hsl(var(--border))]", children: pending.map((p, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [
-        /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[10px]", children: p.email[0].toUpperCase() }) }),
+        /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[10px]", children: p.email.charAt(0).toUpperCase() }) }),
         /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm truncate", children: p.email }),
         /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0.5 shrink-0", children: p.role }),
         /* @__PURE__ */ jsx("button", { onClick: () => setPending((ps) => ps.filter((_, j) => j !== i)), children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]" }) })
@@ -4467,7 +4442,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
@@ -4669,7 +4644,7 @@ var ROLES = [
 ];
 function RolesMenu({ value = "member", onChange, className }) {
   const [role, setRole] = 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);
@@ -7014,7 +6989,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__ */ jsxs(
     "svg",
@@ -7038,7 +7013,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"
@@ -7046,7 +7021,7 @@ var sizeMap3 = {
 function BeaconDot({ color = "primary", size = "md" }) {
   return /* @__PURE__ */ jsxs("span", { className: "relative flex", children: [
     /* @__PURE__ */ jsx("span", { className: cn("animate-ping absolute inline-flex h-full w-full rounded-full opacity-75", colorMap2[color]) }),
-    /* @__PURE__ */ jsx("span", { className: cn("relative inline-flex rounded-full", sizeMap3[size], colorMap2[color]) })
+    /* @__PURE__ */ jsx("span", { className: cn("relative inline-flex rounded-full", sizeMap4[size], colorMap2[color]) })
   ] });
 }
 function Beacon({ color = "primary", size = "md", children, className }) {
@@ -7666,6 +7641,7 @@ function FieldRenderer({ name, field, register, setValue, watch, error }) {
 }
 function AutoForm({ schema, onSubmit, defaultValues, submitLabel = "Submit" }) {
   const { register, handleSubmit, setValue, watch, formState } = useForm({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     resolver: zodResolver(schema),
     defaultValues
   });
@@ -7969,7 +7945,91 @@ function FileUploadPreview({ files, onRemove, className }) {
     ] })
   ] }, i)) });
 }
-var FormLabel2 = React131__default.forwardRef(
+var FloatingLabelInput = React131__default.forwardRef(
+  ({ label, error, hint, wrapperClassName, className, id, value, defaultValue, onFocus, onBlur, onChange, ...props }, ref) => {
+    const autoId = 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] = useState(false);
+    const [filled, setFilled] = 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__ */ jsxs("div", { "data-slot": "floating-label-input", className: cn("flex flex-col gap-1.5", wrapperClassName), children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ 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__ */ 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__ */ jsx("p", { id: errorId, className: "text-xs text-destructive", children: error }) : hint ? /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-muted-foreground", children: hint }) : null
+    ] });
+  }
+);
+FloatingLabelInput.displayName = "FloatingLabelInput";
+function FormField(props) {
+  return /* @__PURE__ */ jsx(Controller, { ...props });
+}
+function FormItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+}
+var FormLabel = React131__default.forwardRef(
   ({ className, error, ...props }, ref) => /* @__PURE__ */ jsx(
     "label",
     {
@@ -7983,14 +8043,24 @@ var FormLabel2 = React131__default.forwardRef(
     }
   )
 );
-FormLabel2.displayName = "FormLabel";
-var FormControl2 = React131__default.forwardRef(
+FormLabel.displayName = "FormLabel";
+var FormControl = React131__default.forwardRef(
   ({ ...props }, ref) => {
     const id = useId();
     return /* @__PURE__ */ jsx("div", { ref, id, ...props });
   }
 );
-FormControl2.displayName = "FormControl";
+FormControl.displayName = "FormControl";
+function FormDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-[hsl(var(--muted-foreground))]", className), ...props });
+}
+function FormMessage({ className, children, name }) {
+  const { formState } = useFormContext();
+  const error = name ? formState.errors[name] : void 0;
+  const message = error?.message ? String(error.message) : children;
+  if (!message) return null;
+  return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-[hsl(var(--destructive))]", className), children: message });
+}
 function ObjectField({
   title,
   description,
@@ -8473,7 +8543,7 @@ var MobileSidebarTrigger = React131__default.forwardRef(
   }
 );
 MobileSidebarTrigger.displayName = "MobileSidebarTrigger";
-var sizeMap4 = {
+var sizeMap5 = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
   lg: "max-w-screen-lg",
@@ -8487,7 +8557,7 @@ var Container = React131__default.forwardRef(
       ref,
       className: cn(
         "mx-auto w-full",
-        sizeMap4[size],
+        sizeMap5[size],
         !noPadding && "px-4 sm:px-6 lg:px-8",
         className
       ),
@@ -12679,6 +12749,6 @@ function SortableNav({ items, onReorder, className }) {
   return /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: items.map((i) => i.id), strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("nav", { "data-slot": "sortable-nav", className: cn("space-y-0.5 px-2 py-1", className), children: items.map((item) => /* @__PURE__ */ jsx(SortableNavItemWrapper, { item }, item.id)) }) }) });
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityHeatmap, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedGradient, AnimatedNumber, AppShell, AppShellMain, AppShellSidebar, AppShellUserMenu, Sidebar as AppSidebar, AreaChart, ArrayField, AspectRatio, AutoForm, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Banner, BarChart, BarList, Beacon, BillingStatus, Body, Breadcrumb, BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator, BulkActions, Button, Calendar, CalendarDayButton, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatDetail, Checkbox, Checklist, ChecklistItem, Code3 as Code, CodeBlock, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, ColorSchemeSelect, Combobox, Command, CommandBar, CommandBarEmpty, CommandBarGroup, CommandBarItem, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandList, CommandPalette, CommandPaletteProvider, CommandSeparator, CommandShortcut, Comparison, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_THEME_OPTIONS, DEFAULT_TRANSITION, DataGrid, DataList, DataListItem, DataTable, DataTableColumnHeader, DataTablePagination, DataTableToolbar, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DottedBackground, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateIcon, EventCalendar, FadeIn, FeedbackModal, Field, FieldDescription, FieldError, FieldLabel, FileCards, FileUpload, FileUploadPreview, FilesList, FilterBadge, FilterItem, Filters, FloatingActionButton, FloatingThemePicker, Gantt, GradientBackground, GradientHeading, GridList, GridListItem, HStack, Heading, Heatmap, HelpSheet, HeroShaderA, HotkeyBadge, Hotkeys, HotkeysProvider, HoverCard, HoverCardContent, HoverCardTrigger, IconBadge, ImageCrop, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, IntegrationCard, IntroDisclosure, InviteModal, Kanban, KanbanCard, KanbanColumn, Label3 as Label, LineChart, LoadingOverlay, LogoCarousel, MOTION_PRESETS, ManageTagsModal, Marquee, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessagesCard, MetricCard, MetricCardWithButton, MetricCardWithIcon, MobileSidebarTrigger, Morph, Navbar, NavbarBrand, NavbarContent, NavbarItem, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NoiseBackground, NotificationSettings, ObjectField, OrgMenu, Page, PageActions, PageBody, PageContainer, PageDescription, PageHeader, PageLayout, PageMain, PageTitle, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaletteSwatches, Parallax, PasswordInput, Persona, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, PropertyItem, PropertyList, QrCode, RadioGroup4 as RadioGroup, RadioGroupItem, Rating, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResizeBox, ResizeHandle, Reveal, RichEditor, Ripple, RolesMenu, ScaleIn, ScrollArea, ScrollBar, ScrollHeader, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectUsersModal, SelectValue, Separator6 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, AppShell2 as Shell, Sidebar2 as Sidebar, SidebarContent, SidebarFooter2 as SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader2 as SidebarHeader, SidebarItem2 as SidebarItem, SidebarLayoutDashboard, SidebarLayoutGroups, SidebarLayoutMinimal, SidebarLayoutSearch, SidebarLayoutUser, SidebarResizer, SidebarSeparator2 as SidebarSeparator, Skeleton, SlideIn, Slider, SortableNav, SortableTaskList, Sparkline, Spinner, SplitPage, SplitPageDetail, SplitPageList, Stack, StackedLayoutBranded, StackedLayoutTabs, Stagger, Stat, StatGroup, StepForm, StepFormNavigation, StepFormStep, Stepper, StepperStep, StructuredList, StructuredListItem, StructuredListSection, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tags, TaskCard, TaskCardWithLabels, TextReveal, Textarea, TextureCard, TextureCardDescription, TextureCardHeader, TextureCardTitle, ThemeSwitch, Timeline, TimelineConnector, TimelineContent, TimelineItem, Toaster, Toggle, ToggleButton, ToggleButtonGroup, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, TourStep, Transition, Tree, Typewriter, UserMenu, VStack, VideoPlayer, WorkspaceMembers, WorkspacesMenu, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, toastFn as toast, toastEmitter, toggleVariants, useAppShell, useCommandBar, useCommandPalette, useFormField, useHotkeys, useLayoutId, useSidebar, useTour };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityHeatmap, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedGradient, AnimatedNumber, AppShell, AppShellMain, AppShellSidebar, AppShellUserMenu, Sidebar as AppSidebar, AreaChart, ArrayField, AspectRatio, AutoForm, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Banner, BarChart, BarList, Beacon, BillingStatus, Body, Breadcrumb, BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator, BulkActions, Button, Calendar, CalendarDayButton, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatDetail, Checkbox, Checklist, ChecklistItem, Code3 as Code, CodeBlock, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, ColorSchemeSelect, Combobox, Command, CommandBar, CommandBarEmpty, CommandBarGroup, CommandBarItem, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandItem2 as CommandListItem, CommandPalette, CommandPaletteProvider, CommandSeparator, CommandShortcut, Comparison, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_THEME_OPTIONS, DEFAULT_TRANSITION, DataGrid, DataList, DataListItem, DataTable, DataTableColumnHeader, DataTablePagination, DataTableToolbar, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DottedBackground, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateIcon, EventCalendar, FadeIn, FeedbackModal, Field, FieldDescription, FieldError, FieldLabel, FileCards, FileUpload, FileUploadPreview, FilesList, FilterBadge, FilterItem, Filters, FloatingActionButton, FloatingLabelInput, FloatingThemePicker, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gantt, GradientBackground, GradientHeading, GridList, GridListItem, HStack, Heading, Heatmap, HelpSheet, HeroShaderA, HotkeyBadge, Hotkeys, HotkeysProvider, HoverCard, HoverCardContent, HoverCardTrigger, IconBadge, ImageCrop, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, IntegrationCard, IntroDisclosure, InviteModal, Kanban, KanbanCard, KanbanColumn, Label3 as Label, LineChart, LoadingOverlay, LogoCarousel, MOTION_PRESETS, ManageTagsModal, Marquee, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessagesCard, MetricCard, MetricCardWithButton, MetricCardWithIcon, MobileSidebarTrigger, Morph, Navbar, NavbarBrand, NavbarContent, NavbarItem, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NoiseBackground, NotificationSettings, ObjectField, OrgMenu, Page, PageActions, PageBody, PageContainer, PageDescription, PageHeader, PageLayout, PageMain, PageTitle, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaletteSwatches, Parallax, PasswordInput, Persona, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, PropertyItem, PropertyList, QrCode, RadioGroup4 as RadioGroup, RadioGroupItem, Rating, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResizeBox, ResizeHandle, Reveal, RichEditor, Ripple, RolesMenu, ScaleIn, ScrollArea, ScrollBar, ScrollHeader, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectUsersModal, SelectValue, Separator6 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, AppShell2 as Shell, Sidebar2 as Sidebar, SidebarContent, SidebarFooter2 as SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader2 as SidebarHeader, SidebarItem2 as SidebarItem, SidebarLayoutDashboard, SidebarLayoutGroups, SidebarLayoutMinimal, SidebarLayoutSearch, SidebarLayoutUser, SidebarResizer, SidebarSeparator2 as SidebarSeparator, Skeleton, SlideIn, Slider, SortableNav, SortableTaskList, Sparkline, Spinner, SplitPage, SplitPageDetail, SplitPageList, Stack, StackedLayoutBranded, StackedLayoutTabs, Stagger, Stat, StatGroup, StepForm, StepFormNavigation, StepFormStep, Stepper, StepperStep, StructuredList, StructuredListItem, StructuredListSection, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tags, TaskCard, TaskCardWithLabels, TextReveal, Textarea, TextureCard, TextureCardDescription, TextureCardHeader, TextureCardTitle, ThemeSwitch, Timeline, TimelineConnector, TimelineContent, TimelineItem, Toaster, Toggle, ToggleButton, ToggleButtonGroup, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, TourStep, Transition, Tree, Typewriter, UserMenu, VStack, VideoPlayer, WorkspaceMembers, WorkspacesMenu, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, toastFn as toast, toastEmitter, toggleVariants, useAppShell, useCommandBar, useCommandPalette, useHotkeys, useLayoutId, useSidebar, useTour };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@otfdashkit/ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "OTF UI — production-quality React component library. 98 primitives + blocks + layouts + charts on Radix + Tailwind v4. Cross-platform parity API with @otfdashkit/ui-native.",
   "keywords": [
     "otfdashkit",
@@ -17,16 +17,17 @@
     "accessible"
   ],
   "license": "MIT",
-  "author": "otfdashkit <dave@otf-kit.dev>",
-  "homepage": "https://github.com/otf-kit/sdk/tree/main/packages/ui#readme",
+  "author": "otf-kit <dave@otf-kit.dev>",
+  "homepage": "https://otf-kit.dev",
   "repository": {
     "type": "git",
-    "url": "https://github.com/otf-kit/sdk.git",
+    "url": "git+https://github.com/otf-kit/sdk.git",
     "directory": "packages/ui"
   },
   "bugs": {
     "url": "https://github.com/otf-kit/sdk/issues"
   },
+  "funding": "https://otf-kit.dev/pricing",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/advanced/BulkActions/BulkActions.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
+import { cn } from '../../utils/cn'
+import { Button } from '../../primitives/button'
 
 interface ActionDef {
   label: string

package/src/advanced/CommandBar/CommandBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Search, X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Dialog, DialogContent, DialogTitle } from '../primitives/dialog'
+import { cn } from '../../utils/cn'
+import { Dialog, DialogContent, DialogTitle } from '../../primitives/dialog'
 
 interface UseCommandBarReturn { open: boolean; setOpen: (v: boolean) => void }
 

package/src/advanced/Filters/Filters.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Plus, X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
-import { Input } from '../primitives/input'
+import { cn } from '../../utils/cn'
+import { Button } from '../../primitives/button'
+import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../primitives/select'
+import { Input } from '../../primitives/input'
 
 export interface FilterDef {
   key: string
@@ -33,7 +33,7 @@ function AddFilterPopover({ filters, onAdd }: { filters: FilterDef[]; onAdd: (v:
 
   const handleAdd = () => {
     if (!key || !val) return
-    onAdd({ key, operator: op || ops[0], value: val })
+    onAdd({ key, operator: op || ops[0]!, value: val })
     setKey(''); setOp(''); setVal('')
     setOpen(false)
   }

package/src/advanced/Kanban/Kanban.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { DndContext, DragEndEvent, DragOverEvent, DragOverlay, DragStartEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { cn } from '../utils/cn'
+import { cn } from '../../utils/cn'
 
 export interface KanbanCardDef { id: string; title: string; description?: string; badge?: string }
 export interface KanbanColumnDef { id: string; title: string; cards: KanbanCardDef[] }

package/src/advanced/ToggleButton/ToggleButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '../utils/cn'
+import { cn } from '../../utils/cn'
 
 interface ToggleButtonProps {
   value: string

package/src/advanced/bulk-actions.tsx

@@ -1,46 +1 @@
-import React from 'react'
-import { X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-
-interface ActionDef {
-  label: string
-  icon?: React.ReactNode
-  onClick: () => void
-  variant?: 'default' | 'destructive'
-}
-
-interface BulkActionsProps {
-  count: number
-  actions: ActionDef[]
-  onClear: () => void
-  className?: string
-}
-
-export function BulkActions({ count, actions, onClear, className }: BulkActionsProps) {
-  if (count === 0) return null
-  return (
-    <div className={cn('fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--card))] px-4 py-2 shadow-lg', className)}>
-      <span className="text-sm font-medium text-[hsl(var(--foreground))] pr-2 border-r border-[hsl(var(--border))]">
-        {count} selected
-      </span>
-      <div className="flex items-center gap-1">
-        {actions.map((action, i) => (
-          <Button
-            key={i}
-            variant={action.variant === 'destructive' ? 'destructive' : 'ghost'}
-            size="sm"
-            className="h-7 gap-1.5 text-xs rounded-full px-3"
-            onClick={action.onClick}
-          >
-            {action.icon}
-            {action.label}
-          </Button>
-        ))}
-      </div>
-      <button onClick={onClear} className="ml-1 rounded-full p-0.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors">
-        <X className="h-4 w-4" />
-      </button>
-    </div>
-  )
-}
+export * from './BulkActions'