@elabs-ai/components-ui 4.0.0 → 4.1.0

package/README.md

@@ -6,15 +6,16 @@
 > Foundation + app UI (Button, Card, Dialog, Tabs, AppShell, …).
 
 Part of **brand-ui**, a source-owned, token-driven React component system.
-These packages are **private** and are not published to any registry — they are
-consumed from this workspace. See `docs/CONSUMING.md`.
+Published to the **public npm registry** under the `@elabs-ai` scope — it
+installs like any other npm dependency, with no registry configuration and
+no token required. See `docs/CONSUMING.md`.
 
 ## Install
 
-Inside this monorepo the packages resolve as workspace dependencies:
-
-```json
-"@elabs-ai/components-ui": "workspace:*"
+```bash
+pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui
+pnpm add @hookform/resolvers@"^3.9.1"  # optional peer
+pnpm add react-hook-form@"^7.54.2"  # optional peer
 ```
 
 ## Set up styling (do not skip)
@@ -40,10 +41,11 @@ import { ThemeProvider } from "@elabs-ai/components-tokens";
 ## This package specifically
 
 - The class-merge helper is at `.../lib/cn` — a pure, server-safe entry point.
+- `react-hook-form` / `@hookform/resolvers` are **optional peers** — install them only if you use `Form` (import it from `.../form`, not the main barrel). `FieldRow` is the headless, react-hook-form-free field primitive and needs neither.
 
 ## What's in it
 
-354 exported components — including `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger`, `AdvancedGroup`.
+379 exported components — including `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger`, `AdvancedGroup`.
 
 Don't guess the API — ask the CLI:
 
@@ -73,6 +75,6 @@ prompt for migrating an existing project: `docs/CONSUMING.md`.
 
 ## License
 
-UNLICENSED — private.
+MIT
 
 <!-- brand-ui:gen:readme:end -->

package/dist/chunk-JKPPTL63.js

@@ -0,0 +1,48 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var TEXT_ROLES = ["display", "title", "subtitle", "body", "caption", "meta", "kpi", "code"];
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: TEXT_ROLES }],
+      // `font-display` is the display-face seam (sibling of font-mono, #187).
+      "font-family": [{ font: ["display"] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/label/label.tsx
+import { forwardRef } from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx } from "react/jsx-runtime";
+var Label = forwardRef(function Label2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+export {
+  __export,
+  cn,
+  Label
+};
+//# sourceMappingURL=chunk-JKPPTL63.js.map

package/dist/chunk-JKPPTL63.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts","../src/components/label/label.tsx"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/**\n * The semantic type roles (`--text-<role>` tokens → `text-<role>` utilities, #187).\n * tailwind-merge doesn't know custom theme keys, so without registration it\n * classifies `text-title` as a text COLOR — and `cn(\"text-kpi\", \"text-foreground\")`\n * would silently drop the role. Registering the roles in the `font-size` class\n * group makes role-vs-role and role-vs-raw-size conflicts resolve correctly while\n * keeping role + color independent.\n */\nconst TEXT_ROLES = [\"display\", \"title\", \"subtitle\", \"body\", \"caption\", \"meta\", \"kpi\", \"code\"];\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": [{ text: TEXT_ROLES }],\n      // `font-display` is the display-face seam (sibling of font-mono, #187).\n      \"font-family\": [{ font: [\"display\"] }],\n    },\n  },\n});\n\n/**\n * Merge class names with conflict resolution. `clsx` handles conditionals;\n * `tailwind-merge` ensures later Tailwind utilities win (e.g. `p-2 p-4` -> `p-4`).\n * Use this in every component that accepts a `className` prop.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cn } from \"../../lib/cn\";\n\nexport const Label = forwardRef<\n  ElementRef<typeof LabelPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(function Label({ className, ...props }, ref) {\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAAA,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAUpC,IAAM,aAAa,CAAC,WAAW,SAAS,YAAY,QAAQ,WAAW,QAAQ,OAAO,MAAM;AAE5F,IAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa,CAAC,EAAE,MAAM,WAAW,CAAC;AAAA;AAAA,MAElC,eAAe,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC;AAAA,IACvC;AAAA,EACF;AACF,CAAC;AAOM,SAAS,MAAM,QAA8B;AAClD,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AC9BA,SAAS,kBAAkE;AAC3E,YAAY,oBAAoB;AAQ5B;AALG,IAAM,QAAQ,WAGnB,SAASA,OAAM,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC7C,SACE;AAAA,IAAgB;AAAA,IAAf;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["Label"]}

package/dist/form.d.ts

@@ -0,0 +1,28 @@
+import * as _radix_ui_react_slot from '@radix-ui/react-slot';
+import * as _radix_ui_react_label from '@radix-ui/react-label';
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: ControllerProps<TFieldValues, TName>): react.JSX.Element;
+declare function 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: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_label.LabelProps & react.RefAttributes<HTMLLabelElement>, "ref"> & react.RefAttributes<HTMLLabelElement>, "ref"> & react.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: react.ForwardRefExoticComponent<Omit<_radix_ui_react_slot.SlotProps & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const FormDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/form.js

@@ -0,0 +1,123 @@
+"use client";
+import {
+  Label,
+  cn
+} from "./chunk-JKPPTL63.js";
+
+// src/components/form/form.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId
+} from "react";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext
+} from "react-hook-form";
+import { jsx } from "react/jsx-runtime";
+var Form = FormProvider;
+var FormFieldContext = createContext({});
+function FormField(props) {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+}
+var FormItemContext = createContext({});
+function useFormField() {
+  const fieldContext = useContext(FormFieldContext);
+  const itemContext = 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 FormItem = forwardRef(
+  function FormItem2({ className, ...props }, ref) {
+    const id = useId();
+    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
+  }
+);
+var FormLabel = forwardRef(function FormLabel2({ className, ...props }, ref) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      ref,
+      htmlFor: formItemId,
+      className: cn(
+        "transition-colors duration-fast ease-standard",
+        // #124: the label's own error-state text, not a mark — ink rung.
+        error && "text-destructive-text",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var FormControl = forwardRef(function FormControl2(props, ref) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+var FormDescription = forwardRef(function FormDescription2({ className, ...props }, ref) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+var FormMessage = forwardRef(
+  function FormMessage2({ 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(
+          // #124: the error message body is running text — ink rung, not the
+          // 3:1 mark rung `text-destructive` guarantees.
+          "text-sm font-medium text-destructive-text animate-in fade-in slide-in-from-top-1 ease-entrance",
+          className
+        ),
+        ...props,
+        children: body
+      }
+    );
+  }
+);
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+};
+//# sourceMappingURL=form.js.map

package/dist/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/form.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  useId,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\";\nimport { cn } from \"../../lib/cn\";\nimport { Label } from \"../label\";\n\nexport const Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = { name: TName };\n\nconst FormFieldContext = createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\nexport function FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(props: ControllerProps<TFieldValues, TName>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n}\n\nconst FormItemContext = createContext<{ id: string }>({} as { id: string });\n\nexport function useFormField() {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n  const fieldState = getFieldState(fieldContext.name, formState);\n  if (!fieldContext) throw new Error(\"useFormField should be used within <FormField>\");\n  const { id } = itemContext;\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\nexport const FormItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function FormItem({ className, ...props }, ref) {\n    const id = useId();\n    return (\n      <FormItemContext.Provider value={{ id }}>\n        <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n      </FormItemContext.Provider>\n    );\n  },\n);\n\nexport const FormLabel = forwardRef<\n  ElementRef<typeof Label>,\n  ComponentPropsWithoutRef<typeof Label>\n>(function FormLabel({ className, ...props }, ref) {\n  const { error, formItemId } = useFormField();\n  return (\n    <Label\n      ref={ref}\n      htmlFor={formItemId}\n      className={cn(\n        \"transition-colors duration-fast ease-standard\",\n        // #124: the label's own error-state text, not a mark — ink rung.\n        error && \"text-destructive-text\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport const FormControl = forwardRef<\n  ElementRef<typeof Slot>,\n  ComponentPropsWithoutRef<typeof Slot>\n>(function FormControl(props, ref) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n});\n\nexport const FormDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(function FormDescription({ className, ...props }, ref) {\n  const { formDescriptionId } = useFormField();\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\nexport const FormMessage = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  function FormMessage({ className, children, ...props }, ref) {\n    const { error, formMessageId } = useFormField();\n    const body = error ? String(error?.message ?? \"\") : children;\n    if (!body) return null;\n    return (\n      <p\n        ref={ref}\n        id={formMessageId}\n        className={cn(\n          // #124: the error message body is running text — ink rung, not the\n          // 3:1 mark rung `text-destructive` guarantees.\n          \"text-sm font-medium text-destructive-text animate-in fade-in slide-in-from-top-1 ease-entrance\",\n          className,\n        )}\n        {...props}\n      >\n        {body}\n      </p>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAmBD;AAfC,IAAM,OAAO;AAOpB,IAAM,mBAAmB,cAAqC,CAAC,CAA0B;AAElF,SAAS,UAGd,OAA6C;AAC7C,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,MAAM,MAAM,KAAK,GACnD,8BAAC,cAAY,GAAG,OAAO,GACzB;AAEJ;AAEA,IAAM,kBAAkB,cAA8B,CAAC,CAAmB;AAEnE,SAAS,eAAe;AAC7B,QAAM,eAAe,WAAW,gBAAgB;AAChD,QAAM,cAAc,WAAW,eAAe;AAC9C,QAAM,EAAE,eAAe,UAAU,IAAI,eAAe;AACpD,QAAM,aAAa,cAAc,aAAa,MAAM,SAAS;AAC7D,MAAI,CAAC,aAAc,OAAM,IAAI,MAAM,gDAAgD;AACnF,QAAM,EAAE,GAAG,IAAI;AACf,SAAO;AAAA,IACL;AAAA,IACA,MAAM,aAAa;AAAA,IACnB,YAAY,GAAG,EAAE;AAAA,IACjB,mBAAmB,GAAG,EAAE;AAAA,IACxB,eAAe,GAAG,EAAE;AAAA,IACpB,GAAG;AAAA,EACL;AACF;AAEO,IAAM,WAAW;AAAA,EACtB,SAASA,UAAS,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9C,UAAM,KAAK,MAAM;AACjB,WACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,GAAG,GACpC,8BAAC,SAAI,KAAU,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OAAO,GACnE;AAAA,EAEJ;AACF;AAEO,IAAM,YAAY,WAGvB,SAASC,WAAU,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACjD,QAAM,EAAE,OAAO,WAAW,IAAI,aAAa;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA;AAAA,QAEA,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,cAAc,WAGzB,SAASC,aAAY,OAAO,KAAK;AACjC,QAAM,EAAE,OAAO,YAAY,mBAAmB,cAAc,IAAI,aAAa;AAC7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,oBAAkB,QAAQ,GAAG,iBAAiB,IAAI,aAAa,KAAK;AAAA,MACpE,gBAAc,CAAC,CAAC;AAAA,MACf,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,kBAAkB,WAG7B,SAASC,iBAAgB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACvD,QAAM,EAAE,kBAAkB,IAAI,aAAa;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,cAAc;AAAA,EACzB,SAASC,aAAY,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,KAAK;AAC3D,UAAM,EAAE,OAAO,cAAc,IAAI,aAAa;AAC9C,UAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI;AACpD,QAAI,CAAC,KAAM,QAAO;AAClB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,WAAW;AAAA;AAAA;AAAA,UAGT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;","names":["FormItem","FormLabel","FormControl","FormDescription","FormMessage"]}