@thesage/ui 0.1.0 → 1.0.1

package/dist/dnd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/DragDrop.tsx","../src/lib/utils.ts"],"sourcesContent":["'use client';\n\nimport React, { createContext, useContext } from 'react';\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  DragEndEvent,\n  DragOverlay,\n  DragStartEvent,\n} from '@dnd-kit/core';\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n  rectSortingStrategy,\n  SortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { GripVertical } from 'lucide-react';\nimport { cn } from '../../lib/utils';\n\n/**\n * Item interface for drag and drop lists\n */\nexport interface DragDropItem {\n  id: string;\n  [key: string]: any;\n}\n\n/**\n * Context for sharing drag handle listeners\n */\ninterface DragHandleContextValue {\n  attributes: any;\n  listeners: any;\n  setActivatorNodeRef?: (element: HTMLElement | null) => void;\n}\n\nconst DragHandleContext = createContext<DragHandleContextValue | null>(null);\n\n/**\n * Props for DragDropList component\n */\nexport interface DragDropListProps<T extends DragDropItem> {\n  /**\n   * Array of items to display\n   */\n  items: T[];\n  /**\n   * Callback fired when items are reordered\n   */\n  onReorder: (items: T[]) => void;\n  /**\n   * Render function for each item\n   */\n  renderItem: (item: T, isDragging: boolean) => React.ReactNode;\n  /**\n   * Enable drag handle mode (only drag from handle)\n   * @default false\n   */\n  withHandle?: boolean;\n  /**\n   * Custom class name for the list container\n   */\n  className?: string;\n  /**\n   * Custom class name for list items\n   */\n  itemClassName?: string;\n  /**\n   * Sorting strategy for the drag & drop behavior\n   * - verticalListSortingStrategy: For vertical lists (default)\n   * - rectSortingStrategy: For grid layouts\n   * @default verticalListSortingStrategy\n   */\n  strategy?: SortingStrategy;\n}\n\n/**\n * Props for sortable item\n */\ninterface SortableItemProps {\n  id: string;\n  children: React.ReactNode;\n  withHandle?: boolean;\n  className?: string;\n}\n\n/**\n * Internal sortable item component\n */\nfunction SortableItem({ id, children, withHandle, className }: SortableItemProps) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id });\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n    opacity: isDragging ? 0.5 : 1,\n  };\n\n  // If using handle, don't attach listeners to the item\n  const itemProps = withHandle ? {} : { ...listeners, ...attributes };\n\n  const content = withHandle ? (\n    <DragHandleContext.Provider value={{ attributes, listeners, setActivatorNodeRef }}>\n      {children}\n    </DragHandleContext.Provider>\n  ) : (\n    children\n  );\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={cn(\n        'relative transition-opacity',\n        isDragging && 'z-50',\n        className\n      )}\n      {...itemProps}\n    >\n      {content}\n    </div>\n  );\n}\n\n/**\n * Drag handle component for manual drag control\n * Must be used within a DragDropList with withHandle={true}\n */\nexport interface DragDropHandleProps {\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Handle icon\n   */\n  icon?: React.ReactNode;\n}\n\nexport function DragDropHandle({ className, icon }: DragDropHandleProps) {\n  const context = useContext(DragHandleContext);\n\n  if (!context) {\n    console.warn('DragDropHandle must be used within a DragDropList with withHandle={true}');\n    return null;\n  }\n\n  const { attributes, listeners, setActivatorNodeRef } = context;\n\n  return (\n    <div\n      ref={setActivatorNodeRef}\n      {...attributes}\n      {...listeners}\n      className={cn(\n        'flex items-center justify-center cursor-grab active:cursor-grabbing',\n        'text-[var(--color-text-secondary)] hover:text-[var(--color-foreground)]',\n        'transition-colors',\n        className\n      )}\n    >\n      {icon || <GripVertical className=\"w-4 h-4\" />}\n    </div>\n  );\n}\n\n/**\n * DragDropList - Sortable list component with drag and drop functionality\n *\n * @example\n * ```tsx\n * const [items, setItems] = useState([\n *   { id: '1', name: 'Item 1' },\n *   { id: '2', name: 'Item 2' },\n * ]);\n *\n * <DragDropList\n *   items={items}\n *   onReorder={setItems}\n *   renderItem={(item) => (\n *     <div className=\"p-4 bg-surface rounded\">{item.name}</div>\n *   )}\n * />\n * ```\n */\nexport function DragDropList<T extends DragDropItem>({\n  items,\n  onReorder,\n  renderItem,\n  withHandle = false,\n  className,\n  itemClassName,\n  strategy = verticalListSortingStrategy,\n}: DragDropListProps<T>) {\n  const [activeId, setActiveId] = React.useState<string | null>(null);\n\n  // Configure sensors for touch/mouse/keyboard support\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5, // Prevents accidental drags on mobile\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  );\n\n  const handleDragStart = (event: DragStartEvent) => {\n    setActiveId(event.active.id as string);\n  };\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    if (over && active.id !== over.id) {\n      const oldIndex = items.findIndex((item) => item.id === active.id);\n      const newIndex = items.findIndex((item) => item.id === over.id);\n      onReorder(arrayMove(items, oldIndex, newIndex));\n    }\n\n    setActiveId(null);\n  };\n\n  const activeItem = items.find((item) => item.id === activeId);\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={items} strategy={strategy}>\n        <div className={cn(strategy === verticalListSortingStrategy && 'space-y-2', className)}>\n          {items.map((item) => (\n            <SortableItem\n              key={item.id}\n              id={item.id}\n              withHandle={withHandle}\n              className={itemClassName}\n            >\n              {renderItem(item, item.id === activeId)}\n            </SortableItem>\n          ))}\n        </div>\n      </SortableContext>\n\n      <DragOverlay>\n        {activeId && activeItem ? (\n          <div className=\"opacity-80 shadow-lg\">\n            {renderItem(activeItem, true)}\n          </div>\n        ) : null}\n      </DragOverlay>\n    </DndContext>\n  );\n}\n\n/**\n * Props for DragDropTable component\n */\nexport interface DragDropTableProps<T extends DragDropItem> {\n  /**\n   * Array of items to display\n   */\n  items: T[];\n  /**\n   * Callback fired when items are reordered\n   */\n  onReorder: (items: T[]) => void;\n  /**\n   * Table columns configuration\n   */\n  columns: {\n    key: string;\n    header: string;\n    render?: (item: T) => React.ReactNode;\n  }[];\n  /**\n   * Custom class name for the table\n   */\n  className?: string;\n}\n\n/**\n * DragDropTable - Sortable table with draggable rows\n *\n * @example\n * ```tsx\n * <DragDropTable\n *   items={data}\n *   onReorder={setData}\n *   columns={[\n *     { key: 'name', header: 'Name' },\n *     { key: 'email', header: 'Email' },\n *   ]}\n * />\n * ```\n */\nexport function DragDropTable<T extends DragDropItem>({\n  items,\n  onReorder,\n  columns,\n  className,\n}: DragDropTableProps<T>) {\n  const [activeId, setActiveId] = React.useState<string | null>(null);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  );\n\n  const handleDragStart = (event: DragStartEvent) => {\n    setActiveId(event.active.id as string);\n  };\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    if (over && active.id !== over.id) {\n      const oldIndex = items.findIndex((item) => item.id === active.id);\n      const newIndex = items.findIndex((item) => item.id === over.id);\n      onReorder(arrayMove(items, oldIndex, newIndex));\n    }\n\n    setActiveId(null);\n  };\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n    >\n      <div className={cn('overflow-x-auto', className)}>\n        <table className=\"w-full border-collapse\">\n          <thead>\n            <tr className=\"border-b border-[var(--color-border)]\">\n              <th className=\"w-12\"></th>\n              {columns.map((column) => (\n                <th\n                  key={column.key}\n                  className=\"text-left p-3 text-sm font-medium text-[var(--color-text-secondary)]\"\n                >\n                  {column.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            <SortableContext items={items} strategy={verticalListSortingStrategy}>\n              {items.map((item) => (\n                <TableRow\n                  key={item.id}\n                  item={item}\n                  columns={columns}\n                  isDragging={item.id === activeId}\n                />\n              ))}\n            </SortableContext>\n          </tbody>\n        </table>\n      </div>\n    </DndContext>\n  );\n}\n\ninterface TableRowProps<T extends DragDropItem> {\n  item: T;\n  columns: { key: string; header: string; render?: (item: T) => React.ReactNode }[];\n  isDragging: boolean;\n}\n\nfunction TableRow<T extends DragDropItem>({ item, columns, isDragging }: TableRowProps<T>) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({ id: item.id });\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n    opacity: isDragging ? 0.5 : 1,\n  };\n\n  return (\n    <tr\n      ref={setNodeRef}\n      style={style}\n      className={cn(\n        'border-b border-[var(--color-border)] hover:bg-[var(--color-hover)]',\n        'transition-colors',\n        isDragging && 'bg-[var(--color-active)]'\n      )}\n    >\n      <td className=\"p-3\">\n        <div\n          {...attributes}\n          {...listeners}\n          className=\"cursor-grab active:cursor-grabbing text-[var(--color-text-secondary)] hover:text-[var(--color-foreground)] transition-colors\"\n        >\n          <GripVertical className=\"w-4 h-4\" />\n        </div>\n      </td>\n      {columns.map((column) => (\n        <td key={column.key} className=\"p-3 text-sm\">\n          {column.render ? column.render(item) : (item as any)[column.key]}\n        </td>\n      ))}\n    </tr>\n  );\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":[]}

package/dist/forms.d.mts

@@ -0,0 +1,38 @@
+import * as react_hook_form from 'react-hook-form';
+import { FormProvider, FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+
+declare const Form: typeof FormProvider;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const FormLabel: ({ ref, className, ...props }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof LabelPrimitive.Root>>;
+}) => react_jsx_runtime.JSX.Element;
+declare const FormControl: ({ ref, ...props }: React.ComponentPropsWithoutRef<typeof Slot> & {
+    ref?: React.Ref<React.ElementRef<typeof Slot>>;
+}) => react_jsx_runtime.JSX.Element;
+declare const FormDescription: ({ ref, className, ...props }: React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const FormMessage: ({ ref, className, children, ...props }: React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement>;
+}) => react_jsx_runtime.JSX.Element | null;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/forms.d.ts

@@ -0,0 +1,38 @@
+import * as react_hook_form from 'react-hook-form';
+import { FormProvider, FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+
+declare const Form: typeof FormProvider;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const FormLabel: ({ ref, className, ...props }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    ref?: React.Ref<React.ElementRef<typeof LabelPrimitive.Root>>;
+}) => react_jsx_runtime.JSX.Element;
+declare const FormControl: ({ ref, ...props }: React.ComponentPropsWithoutRef<typeof Slot> & {
+    ref?: React.Ref<React.ElementRef<typeof Slot>>;
+}) => react_jsx_runtime.JSX.Element;
+declare const FormDescription: ({ ref, className, ...props }: React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const FormMessage: ({ ref, className, children, ...props }: React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement>;
+}) => react_jsx_runtime.JSX.Element | null;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/forms.js

@@ -0,0 +1,198 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/forms.ts
+var forms_exports = {};
+__export(forms_exports, {
+  Form: () => Form,
+  FormControl: () => FormControl,
+  FormDescription: () => FormDescription,
+  FormField: () => FormField,
+  FormItem: () => FormItem,
+  FormLabel: () => FormLabel,
+  FormMessage: () => FormMessage,
+  useFormField: () => useFormField
+});
+module.exports = __toCommonJS(forms_exports);
+
+// src/components/forms/Form.tsx
+var React = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_react_hook_form = require("react-hook-form");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/forms/Label.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var labelVariants = (0, import_class_variance_authority.cva)(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+);
+
+// src/components/forms/Form.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Form = import_react_hook_form.FormProvider;
+var FormFieldContext = React.createContext(
+  {}
+);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_hook_form.Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = (0, import_react_hook_form.useFormContext)();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  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 = React.createContext(
+  {}
+);
+var FormItem = ({
+  ref,
+  className,
+  ...props
+}) => {
+  const id = React.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
+};
+var FormLabel = ({
+  ref,
+  className,
+  ...props
+}) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Label,
+    {
+      ref,
+      className: cn(error && "text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+};
+var FormControl = ({
+  ref,
+  ...props
+}) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_slot.Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+};
+var FormDescription = ({
+  ref,
+  className,
+  ...props
+}) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+};
+var FormMessage = ({
+  ref,
+  className,
+  children,
+  ...props
+}) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn("text-sm font-medium text-destructive", className),
+      ...props,
+      children: body
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+});
+//# sourceMappingURL=forms.js.map

package/dist/forms.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/forms.ts","../src/components/forms/Form.tsx","../src/lib/utils.ts","../src/components/forms/Label.tsx"],"sourcesContent":["export * from './components/forms/Form';\n","\"use client\";\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  ControllerProps,\n  FieldPath,\n  FieldValues,\n  FormProvider,\n  useFormContext,\n} from \"react-hook-form\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Label } from \"./Label\"\n\nconst Form: typeof FormProvider = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nconst FormItem = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.HTMLAttributes<HTMLDivElement> & {\n    ref?: React.Ref<HTMLDivElement>;\n  }\n) => {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  )\n}\n\nconst FormLabel = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {\n    ref?: React.Ref<React.ElementRef<typeof LabelPrimitive.Root>>;\n  }\n) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\nconst FormControl = (\n  {\n    ref,\n    ...props\n  }: React.ComponentPropsWithoutRef<typeof Slot> & {\n    ref?: React.Ref<React.ElementRef<typeof Slot>>;\n  }\n) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nconst FormDescription = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.HTMLAttributes<HTMLParagraphElement> & {\n    ref?: React.Ref<HTMLParagraphElement>;\n  }\n) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nconst FormMessage = (\n  {\n    ref,\n    className,\n    children,\n    ...props\n  }: React.HTMLAttributes<HTMLParagraphElement> & {\n    ref?: React.Ref<HTMLParagraphElement>;\n  }\n) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message) : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-sm font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n","import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cn } from \"../../lib/utils\"\n\nconst labelVariants = cva(\n    \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nconst Label = (\n    {\n        ref,\n        className,\n        ...props\n    }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants> & {\n        ref?: React.Ref<React.ElementRef<typeof LabelPrimitive.Root>>;\n    }\n) => (<LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants(), className)}\n    {...props}\n/>)\n\nexport { Label }\n"],"mappings":"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","names":["import_jsx_runtime"]}

package/dist/forms.mjs

@@ -0,0 +1,159 @@
+"use client";
+
+// src/components/forms/Form.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext
+} from "react-hook-form";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/forms/Label.tsx
+import { cva } from "class-variance-authority";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx } from "react/jsx-runtime";
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+);
+
+// src/components/forms/Form.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Form = FormProvider;
+var FormFieldContext = React.createContext(
+  {}
+);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx2(Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  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 = React.createContext(
+  {}
+);
+var FormItem = ({
+  ref,
+  className,
+  ...props
+}) => {
+  const id = React.useId();
+  return /* @__PURE__ */ jsx2(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx2("div", { ref, className: cn("space-y-2", className), ...props }) });
+};
+var FormLabel = ({
+  ref,
+  className,
+  ...props
+}) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx2(
+    Label,
+    {
+      ref,
+      className: cn(error && "text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+};
+var FormControl = ({
+  ref,
+  ...props
+}) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx2(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+};
+var FormDescription = ({
+  ref,
+  className,
+  ...props
+}) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx2(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+};
+var FormMessage = ({
+  ref,
+  className,
+  children,
+  ...props
+}) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn("text-sm font-medium text-destructive", className),
+      ...props,
+      children: body
+    }
+  );
+};
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+};
+//# sourceMappingURL=forms.mjs.map

package/dist/forms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/Form.tsx","../src/lib/utils.ts","../src/components/forms/Label.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  ControllerProps,\n  FieldPath,\n  FieldValues,\n  FormProvider,\n  useFormContext,\n} from \"react-hook-form\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Label } from \"./Label\"\n\nconst Form: typeof FormProvider = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nconst FormItem = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.HTMLAttributes<HTMLDivElement> & {\n    ref?: React.Ref<HTMLDivElement>;\n  }\n) => {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  )\n}\n\nconst FormLabel = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {\n    ref?: React.Ref<React.ElementRef<typeof LabelPrimitive.Root>>;\n  }\n) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\nconst FormControl = (\n  {\n    ref,\n    ...props\n  }: React.ComponentPropsWithoutRef<typeof Slot> & {\n    ref?: React.Ref<React.ElementRef<typeof Slot>>;\n  }\n) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nconst FormDescription = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.HTMLAttributes<HTMLParagraphElement> & {\n    ref?: React.Ref<HTMLParagraphElement>;\n  }\n) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nconst FormMessage = (\n  {\n    ref,\n    className,\n    children,\n    ...props\n  }: React.HTMLAttributes<HTMLParagraphElement> & {\n    ref?: React.Ref<HTMLParagraphElement>;\n  }\n) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message) : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-sm font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n","import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cn } from \"../../lib/utils\"\n\nconst labelVariants = cva(\n    \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nconst Label = (\n    {\n        ref,\n        className,\n        ...props\n    }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants> & {\n        ref?: React.Ref<React.ElementRef<typeof LabelPrimitive.Root>>;\n    }\n) => (<LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants(), className)}\n    {...props}\n/>)\n\nexport { Label }\n"],"mappings":"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","names":["jsx"]}

package/dist/hooks.js

@@ -823,7 +823,8 @@ function hexToHSL2(hex) {
   const b = rgb.b / 255;
   const max = Math.max(r, g, b);
   const min = Math.min(r, g, b);
-  let h = 0, s = 0, l = (max + min) / 2;
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
   if (max !== min) {
     const d = max - min;
     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
@@ -988,14 +989,14 @@ var useCustomizer = (0, import_zustand2.create)()(
         const scale = generateColorScale(colors.primary);
         const primaryForeground = getOptimalForeground2(colors.primary);
         let derivedTokens = computeDerivedTokens("--color-primary", colors.primary, mode);
-        let secondary = colors.secondary;
-        let secondaryForeground = secondary ? getOptimalForeground2(secondary) : void 0;
+        const secondary = colors.secondary;
+        const secondaryForeground = secondary ? getOptimalForeground2(secondary) : void 0;
         if (secondary) {
           const secondaryDerived = computeDerivedTokens("--color-secondary", secondary, mode);
           derivedTokens = { ...derivedTokens, ...secondaryDerived };
         }
-        let accent = colors.accent;
-        let accentForeground = accent ? getOptimalForeground2(accent) : void 0;
+        const accent = colors.accent;
+        const accentForeground = accent ? getOptimalForeground2(accent) : void 0;
         if (accent) {
           const accentDerived = computeDerivedTokens("--color-accent", accent, mode);
           derivedTokens = { ...derivedTokens, ...accentDerived };