@page-speed/forms 0.5.1 → 0.5.3

package/README.md

@@ -100,6 +100,35 @@ export function ContactForm() {
 }
 ```
 
+### Grouped Form Configuration
+
+`Form` supports both classic props and grouped config objects for cleaner callsites.
+
+```tsx
+import * as React from "react";
+import { Form } from "@page-speed/forms";
+
+<Form
+  form={form}
+  notificationConfig={{
+    successMessage: "Thanks, submission received.",
+    submissionError,
+  }}
+  styleConfig={{
+    formClassName: "space-y-6",
+    successMessageClassName: "bg-emerald-600 text-white",
+    errorMessageClassName: "bg-red-600 text-white",
+  }}
+  formConfig={{
+    endpoint: "/api/contact",
+    method: "post",
+    submissionConfig: {
+      behavior: "showConfirmation",
+    },
+  }}
+/>;
+```
+
 ## Package Entry Points
 
 ### Main

package/dist/chunk-232KNGJI.js

@@ -0,0 +1,207 @@
+import * as React2 from 'react';
+import { Label as Label$1, Slot } from 'radix-ui';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+// src/components/ui/field.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var INPUT_AUTOFILL_RESET_CLASSES = "autofill:bg-transparent autofill:text-foreground [&:-webkit-autofill]:[-webkit-text-fill-color:hsl(var(--foreground))] [&:-webkit-autofill]:[caret-color:hsl(var(--foreground))] [&:-webkit-autofill]:[box-shadow:0_0_0px_1000px_hsl(var(--background))_inset] [&:-webkit-autofill:hover]:[box-shadow:0_0_0px_1000px_hsl(var(--background))_inset] [&:-webkit-autofill:focus]:[box-shadow:0_0_0px_1000px_hsl(var(--background))_inset] [&:-webkit-autofill]:[transition:background-color_9999s_ease-out,color_9999s_ease-out]";
+
+// src/components/ui/label.tsx
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React2.createElement(
+    Label$1.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/field.tsx
+var Field = React2.forwardRef(
+  ({ className, orientation = "vertical", invalid = false, ...props }, ref) => {
+    return /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        ref,
+        "data-slot": "field",
+        "data-orientation": orientation,
+        "data-invalid": invalid || void 0,
+        className: cn(
+          "flex",
+          orientation === "horizontal" ? "items-center gap-2" : "flex-col gap-1.5",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Field.displayName = "Field";
+var FieldGroup = React2.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      ref,
+      "data-slot": "field-group",
+      className: cn("flex flex-col gap-4", className),
+      ...props
+    }
+  );
+});
+FieldGroup.displayName = "FieldGroup";
+var FieldLabel = React2.forwardRef(({ className, required, children, ...props }, ref) => {
+  return /* @__PURE__ */ React2.createElement(
+    Label,
+    {
+      ref,
+      "data-slot": "field-label",
+      className: cn(
+        "text-sm font-medium leading-none select-none",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    },
+    children,
+    required && /* @__PURE__ */ React2.createElement("span", { className: "text-destructive ml-1" }, "*")
+  );
+});
+FieldLabel.displayName = "FieldLabel";
+var FieldDescription = React2.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React2.createElement(
+    "p",
+    {
+      ref,
+      "data-slot": "field-description",
+      className: cn("text-sm opacity-70", className),
+      ...props
+    }
+  );
+});
+FieldDescription.displayName = "FieldDescription";
+var FieldError = React2.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React2.createElement(
+    "p",
+    {
+      ref,
+      "data-slot": "field-error",
+      role: "alert",
+      "aria-live": "polite",
+      className: cn("text-sm text-destructive", className),
+      ...props
+    }
+  );
+});
+FieldError.displayName = "FieldError";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ React2.createElement(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var LabelGroup = ({
+  labelHtmlFor,
+  required = false,
+  variant = "label",
+  secondaryId,
+  secondary,
+  primary,
+  primaryClassName,
+  secondaryClassName
+}) => {
+  const primaryClasses = cn(
+    "text-sm font-medium leading-snug",
+    variant === "legend" ? "mb-1.5" : "mb-1 block",
+    primaryClassName
+  );
+  const requiredIndicator = required && variant !== "label" ? /* @__PURE__ */ React2.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
+  let primaryElement = null;
+  if (primary) {
+    if (variant === "label") {
+      primaryElement = /* @__PURE__ */ React2.createElement(
+        FieldLabel,
+        {
+          htmlFor: labelHtmlFor,
+          required,
+          className: primaryClasses
+        },
+        primary
+      );
+    } else if (variant === "legend") {
+      primaryElement = /* @__PURE__ */ React2.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
+    } else {
+      primaryElement = /* @__PURE__ */ React2.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
+    }
+  }
+  const secondaryElement = secondary ? /* @__PURE__ */ React2.createElement(
+    FieldDescription,
+    {
+      id: secondaryId,
+      className: cn("leading-normal font-normal", secondaryClassName)
+    },
+    secondary
+  ) : null;
+  if (!primaryElement && !secondaryElement) return null;
+  if (variant === "legend") {
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, primaryElement, secondaryElement);
+  }
+  return /* @__PURE__ */ React2.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, primaryElement, secondaryElement);
+};
+
+export { Button, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, INPUT_AUTOFILL_RESET_CLASSES, LabelGroup, buttonVariants, cn };
+//# sourceMappingURL=chunk-232KNGJI.js.map
+//# sourceMappingURL=chunk-232KNGJI.js.map

package/dist/chunk-232KNGJI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/ui/label.tsx","../src/components/ui/field.tsx","../src/components/ui/button.tsx","../src/core/label-group.tsx"],"names":["React","LabelPrimitive","React3","React4"],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AAKO,IAAM,4BAAA,GACX;;;ACNF,SAAS,KAAA,CAAM;AAAA,EACb,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqD;AACnD,EAAA,uBACEA,MAAA,CAAA,aAAA;AAAA,IAACC,OAAA,CAAe,IAAA;AAAA,IAAf;AAAA,MACC,WAAA,EAAU,OAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,qNAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;ACFA,IAAM,KAAA,GAAc,MAAA,CAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,WAAA,GAAc,UAAA,EAAY,UAAU,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC3E,IAAA,uBACE,MAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,OAAA;AAAA,QACV,kBAAA,EAAkB,WAAA;AAAA,QAClB,gBAAc,OAAA,IAAW,MAAA;AAAA,QACzB,SAAA,EAAW,EAAA;AAAA,UACT,MAAA;AAAA,UACA,WAAA,KAAgB,eACZ,oBAAA,GACA,kBAAA;AAAA,UACJ;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AAAC;AACD,KAAA,CAAM,WAAA,GAAc,OAAA;AAOpB,IAAM,UAAA,GAAmB,kBAGvB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,uBACE,MAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA;AAAA,MAC7C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AACD,UAAA,CAAW,WAAA,GAAc,YAAA;AAOzB,IAAM,UAAA,GAAmB,MAAA,CAAA,UAAA,CAKvB,CAAC,EAAE,SAAA,EAAW,UAAU,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACtD,EAAA,uBACE,MAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,8CAAA;AAAA,QACA,2DAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA,KAAA;AAAA,IAEH,QAAA;AAAA,IACA,QAAA,oBAAY,MAAA,CAAA,aAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2BAAwB,GAAC;AAAA,GACxD;AAEJ,CAAC;AACD,UAAA,CAAW,WAAA,GAAc,YAAA;AAOzB,IAAM,gBAAA,GAAyB,kBAG7B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,uBACE,MAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,oBAAA,EAAsB,SAAS,CAAA;AAAA,MAC5C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AACD,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAO/B,IAAM,UAAA,GAAmB,kBAGvB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,uBACE,MAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,aAAA;AAAA,MACV,IAAA,EAAK,OAAA;AAAA,MACL,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,0BAAA,EAA4B,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AACD,UAAA,CAAW,WAAA,GAAc,YAAA;ACzHzB,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,uZAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,wDAAA;AAAA,QACT,WAAA,EACE,qFAAA;AAAA,QACF,OAAA,EACE,2FAAA;AAAA,QACF,SAAA,EACE,8DAAA;AAAA,QACF,KAAA,EACE,8CAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,+BAAA;AAAA,QACT,EAAA,EAAI,0FAAA;AAAA,QACJ,EAAA,EAAI,+CAAA;AAAA,QACJ,EAAA,EAAI,sCAAA;AAAA,QACJ,IAAA,EAAM,QAAA;AAAA,QACN,SAAA,EAAW,wDAAA;AAAA,QACX,SAAA,EAAW,QAAA;AAAA,QACX,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV,GAAG;AACL,CAAA,EAGK;AACH,EAAA,MAAM,IAAA,GAAO,OAAA,GAAU,IAAA,CAAK,IAAA,GAAO,QAAA;AAEnC,EAAA,uBACEC,MAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ;ACxCA,IAAM,aAAa,CAAC;AAAA,EAClB,YAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,OAAA;AAAA,EACV,WAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,KAAuB;AACrB,EAAA,MAAM,cAAA,GAAiB,EAAA;AAAA,IACrB,kCAAA;AAAA,IACA,OAAA,KAAY,WAAW,QAAA,GAAW,YAAA;AAAA,IAClC;AAAA,GACF;AAEA,EAAA,MAAM,iBAAA,GACJ,QAAA,IAAY,OAAA,KAAY,OAAA,mBACtBC,MAAA,CAAA,aAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAA,EAA0B,YAAA,EAAW,UAAA,EAAA,EAAW,GAEhE,CAAA,GACE,IAAA;AAEN,EAAA,IAAI,cAAA,GAA4B,IAAA;AAChC,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,IAAI,YAAY,OAAA,EAAS;AACvB,MAAA,cAAA,mBACEA,MAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,YAAA;AAAA,UACT,QAAA;AAAA,UACA,SAAA,EAAW;AAAA,SAAA;AAAA,QAEV;AAAA,OACH;AAAA,IAEJ,CAAA,MAAA,IAAW,YAAY,QAAA,EAAU;AAC/B,MAAA,cAAA,wCACG,QAAA,EAAA,EAAO,WAAA,EAAU,gBAAe,SAAA,EAAW,cAAA,EAAA,EACzC,SACA,iBACH,CAAA;AAAA,IAEJ,CAAA,MAAO;AACL,MAAA,cAAA,wCACG,KAAA,EAAA,EAAI,WAAA,EAAU,eAAc,SAAA,EAAW,cAAA,EAAA,EACrC,SACA,iBACH,CAAA;AAAA,IAEJ;AAAA,EACF;AAEA,EAAA,MAAM,mBAAmB,SAAA,mBACvBA,MAAA,CAAA,aAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,WAAA;AAAA,MACJ,SAAA,EAAW,EAAA,CAAG,4BAAA,EAA8B,kBAAkB;AAAA,KAAA;AAAA,IAE7D;AAAA,GACH,GACE,IAAA;AAEJ,EAAA,IAAI,CAAC,cAAA,IAAkB,CAAC,gBAAA,EAAkB,OAAO,IAAA;AAGjD,EAAA,IAAI,YAAY,QAAA,EAAU;AACxB,IAAA,uBACEA,MAAA,CAAA,aAAA,CAAAA,MAAA,CAAA,QAAA,EAAA,IAAA,EACG,gBACA,gBACH,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEA,MAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAAA,EACZ,gBACA,gBACH,CAAA;AAEJ","file":"chunk-232KNGJI.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * Normalizes browser autofill colors so inputs keep theme colors.\n */\nexport const INPUT_AUTOFILL_RESET_CLASSES =\n  \"autofill:bg-transparent autofill:text-foreground \" +\n  \"[&:-webkit-autofill]:[-webkit-text-fill-color:hsl(var(--foreground))] \" +\n  \"[&:-webkit-autofill]:[caret-color:hsl(var(--foreground))] \" +\n  \"[&:-webkit-autofill]:[box-shadow:0_0_0px_1000px_hsl(var(--background))_inset] \" +\n  \"[&:-webkit-autofill:hover]:[box-shadow:0_0_0px_1000px_hsl(var(--background))_inset] \" +\n  \"[&:-webkit-autofill:focus]:[box-shadow:0_0_0px_1000px_hsl(var(--background))_inset] \" +\n  \"[&:-webkit-autofill]:[transition:background-color_9999s_ease-out,color_9999s_ease-out]\";\n","import * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n","import * as React from \"react\";\nimport { Label } from \"./label\";\nimport { cn } from \"../../lib/utils\";\n\ntype FieldOrientation = \"vertical\" | \"horizontal\";\n\ninterface FieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: FieldOrientation;\n  invalid?: boolean;\n}\n\n/**\n * Field - Container component for form inputs with validation display\n *\n * Provides consistent layout and spacing for form fields with labels,\n * inputs, descriptions, and error messages.\n */\nconst Field = React.forwardRef<HTMLDivElement, FieldProps>(\n({ className, orientation = \"vertical\", invalid = false, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"field\"\n      data-orientation={orientation}\n      data-invalid={invalid || undefined}\n      className={cn(\n        \"flex\",\n        orientation === \"horizontal\"\n          ? \"items-center gap-2\"\n          : \"flex-col gap-1.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nField.displayName = \"Field\";\n\n/**\n * FieldGroup - Container for multiple related fields\n *\n * Used to group fields together (e.g., first name + last name in a row)\n */\nconst FieldGroup = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"field-group\"\n      className={cn(\"flex flex-col gap-4\", className)}\n      {...props}\n    />\n  );\n});\nFieldGroup.displayName = \"FieldGroup\";\n\n/**\n * FieldLabel - Label component for form fields\n *\n * Wrapper around ShadCN Label with consistent styling\n */\nconst FieldLabel = React.forwardRef<\n  HTMLLabelElement,\n  React.LabelHTMLAttributes<HTMLLabelElement> & {\n    required?: boolean;\n  }\n>(({ className, required, children, ...props }, ref) => {\n  return (\n    <Label\n      ref={ref}\n      data-slot=\"field-label\"\n      className={cn(\n        \"text-sm font-medium leading-none select-none\",\n        \"peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {required && <span className=\"text-destructive ml-1\">*</span>}\n    </Label>\n  );\n});\nFieldLabel.displayName = \"FieldLabel\";\n\n/**\n * FieldDescription - Helper text for form fields\n *\n * Displays additional information or instructions for the field\n */\nconst FieldDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <p\n      ref={ref}\n      data-slot=\"field-description\"\n      className={cn(\"text-sm opacity-70\", className)}\n      {...props}\n    />\n  );\n});\nFieldDescription.displayName = \"FieldDescription\";\n\n/**\n * FieldError - Error message display for form fields\n *\n * Shows validation errors with proper styling and accessibility\n */\nconst FieldError = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <p\n      ref={ref}\n      data-slot=\"field-error\"\n      role=\"alert\"\n      aria-live=\"polite\"\n      className={cn(\"text-sm text-destructive\", className)}\n      {...props}\n    />\n  );\n});\nFieldError.displayName = \"FieldError\";\n\nexport { Field, FieldGroup, FieldLabel, FieldDescription, FieldError };\n","import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20\",\n        outline:\n          \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        xs: \"h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","\"use client\";\n\nimport * as React from \"react\";\nimport type { ReactNode } from \"react\";\nimport {\n  FieldDescription,\n  FieldLabel,\n} from \"../components/ui/field\";\nimport { cn } from \"../lib/utils\";\n\nexport type LabelGroupProps = {\n  variant?: \"legend\" | \"label\" | \"text\";\n  secondary?: ReactNode;\n  secondaryId?: string;\n  primary?: ReactNode;\n  labelHtmlFor?: string;\n  required?: boolean;\n  primaryClassName?: string;\n  secondaryClassName?: string;\n};\n\nconst LabelGroup = ({\n  labelHtmlFor,\n  required = false,\n  variant = \"label\",\n  secondaryId,\n  secondary,\n  primary,\n  primaryClassName,\n  secondaryClassName,\n}: LabelGroupProps) => {\n  const primaryClasses = cn(\n    \"text-sm font-medium leading-snug\",\n    variant === \"legend\" ? \"mb-1.5\" : \"mb-1 block\",\n    primaryClassName,\n  );\n\n  const requiredIndicator =\n    required && variant !== \"label\" ? (\n      <span className=\"text-destructive pl-0.5\" aria-label=\"required\">\n        *\n      </span>\n    ) : null;\n\n  let primaryElement: ReactNode = null;\n  if (primary) {\n    if (variant === \"label\") {\n      primaryElement = (\n        <FieldLabel\n          htmlFor={labelHtmlFor}\n          required={required}\n          className={primaryClasses}\n        >\n          {primary}\n        </FieldLabel>\n      );\n    } else if (variant === \"legend\") {\n      primaryElement = (\n        <legend data-slot=\"field-legend\" className={primaryClasses}>\n          {primary}\n          {requiredIndicator}\n        </legend>\n      );\n    } else {\n      primaryElement = (\n        <div data-slot=\"field-label\" className={primaryClasses}>\n          {primary}\n          {requiredIndicator}\n        </div>\n      );\n    }\n  }\n\n  const secondaryElement = secondary ? (\n    <FieldDescription\n      id={secondaryId}\n      className={cn(\"leading-normal font-normal\", secondaryClassName)}\n    >\n      {secondary}\n    </FieldDescription>\n  ) : null;\n\n  if (!primaryElement && !secondaryElement) return null;\n\n  // Legend should remain a direct child of fieldset for proper semantics.\n  if (variant === \"legend\") {\n    return (\n      <>\n        {primaryElement}\n        {secondaryElement}\n      </>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-1 flex-col gap-0.5\">\n      {primaryElement}\n      {secondaryElement}\n    </div>\n  );\n};\n\nexport { LabelGroup };\n"]}

package/dist/chunk-24RPM43T.js

@@ -0,0 +1,373 @@
+import { Field, LabelGroup, FieldError } from './chunk-232KNGJI.js';
+import * as React3 from 'react';
+import { useRef, useCallback, useContext } from 'react';
+import { useObservable, useSelector } from '@legendapp/state/react';
+import { useMap } from '@opensite/hooks/useMap';
+
+function useForm(options) {
+  const {
+    initialValues,
+    validationSchema,
+    validateOn = "onBlur",
+    revalidateOn = "onChange",
+    onSubmit,
+    onError,
+    debug = false
+  } = options;
+  const state$ = useObservable({
+    values: initialValues,
+    errors: {},
+    touched: {},
+    isSubmitting: false,
+    status: "idle",
+    initialValues: { ...initialValues },
+    // Create a copy to prevent reference sharing
+    hasValidated: {}
+  });
+  const validationInProgress = useRef(/* @__PURE__ */ new Set());
+  const [, fieldMetadataActions] = useMap();
+  const validateField = useCallback(
+    async (field) => {
+      const validators = validationSchema?.[field];
+      if (!validators) return void 0;
+      const fieldKey = String(field);
+      validationInProgress.current.add(fieldKey);
+      const currentMeta = fieldMetadataActions.get(fieldKey) || {
+        validationCount: 0
+      };
+      fieldMetadataActions.set(fieldKey, {
+        lastValidated: Date.now(),
+        validationCount: currentMeta.validationCount + 1
+      });
+      try {
+        const value = state$.values[field].get();
+        const allValues = state$.values.get();
+        const validatorArray = Array.isArray(validators) ? validators : [validators];
+        for (const validator of validatorArray) {
+          const error = await validator(value, allValues);
+          if (error) {
+            state$.errors[field].set(error);
+            validationInProgress.current.delete(fieldKey);
+            return error;
+          }
+        }
+        state$.errors[field].set(void 0);
+        validationInProgress.current.delete(fieldKey);
+        return void 0;
+      } catch (error) {
+        validationInProgress.current.delete(fieldKey);
+        const errorMessage = error instanceof Error ? error.message : "Validation error";
+        state$.errors[field].set(errorMessage);
+        return errorMessage;
+      }
+    },
+    [validationSchema, state$, fieldMetadataActions]
+  );
+  const validateForm = useCallback(async () => {
+    if (!validationSchema) return {};
+    const fields = Object.keys(validationSchema);
+    const errors2 = {};
+    await Promise.all(
+      fields.map(async (field) => {
+        const error = await validateField(field);
+        if (error) {
+          errors2[field] = error;
+        }
+      })
+    );
+    state$.errors.set(errors2);
+    return errors2;
+  }, [validationSchema, validateField, state$]);
+  const setFieldValue = useCallback(
+    (field, value) => {
+      state$.values[field].set(value);
+      const shouldRevalidate = revalidateOn === "onChange" && state$.hasValidated[String(field)].get();
+      if (shouldRevalidate && validationSchema?.[field]) {
+        validateField(field);
+      }
+      if (debug) {
+        console.log("[useForm] setFieldValue:", { field, value });
+      }
+    },
+    [state$, revalidateOn, validationSchema, validateField, debug]
+  );
+  const setFieldTouched = useCallback(
+    (field, touched2) => {
+      state$.touched[field].set(touched2);
+      if (touched2 && validateOn === "onBlur" && validationSchema?.[field]) {
+        state$.hasValidated[String(field)].set(true);
+        validateField(field);
+      }
+      if (debug) {
+        console.log("[useForm] setFieldTouched:", { field, touched: touched2 });
+      }
+    },
+    [state$, validateOn, validationSchema, validateField, debug]
+  );
+  const resetForm = useCallback(() => {
+    state$.values.set(state$.initialValues.get());
+    state$.errors.set({});
+    state$.touched.set({});
+    state$.isSubmitting.set(false);
+    state$.status.set("idle");
+    state$.hasValidated.set({});
+    fieldMetadataActions.clear();
+    if (debug) {
+      console.log("[useForm] Form reset");
+    }
+  }, [state$, fieldMetadataActions, debug]);
+  const handleSubmit = useCallback(
+    async (e) => {
+      e?.preventDefault();
+      if (debug) {
+        console.log("[useForm] handleSubmit started");
+      }
+      state$.isSubmitting.set(true);
+      state$.status.set("submitting");
+      try {
+        const errors2 = await validateForm();
+        const hasErrors = Object.keys(errors2).length > 0;
+        if (hasErrors) {
+          state$.status.set("error");
+          onError?.(errors2);
+          if (debug) {
+            console.log("[useForm] Validation errors:", errors2);
+          }
+          return;
+        }
+        const helpers = {
+          setValues: (values2) => {
+            if (typeof values2 === "function") {
+              state$.values.set(values2(state$.values.get()));
+            } else {
+              state$.values.set(values2);
+            }
+          },
+          setFieldValue,
+          setErrors: (errors3) => state$.errors.set(errors3),
+          setFieldError: (field, error) => state$.errors[field].set(error),
+          setTouched: (touched2) => state$.touched.set(touched2),
+          setFieldTouched,
+          setSubmitting: (submitting) => state$.isSubmitting.set(submitting),
+          resetForm
+        };
+        await onSubmit(state$.values.get(), helpers);
+        state$.status.set("success");
+        if (debug) {
+          console.log("[useForm] Submit successful");
+        }
+      } catch (error) {
+        state$.status.set("error");
+        if (debug) {
+          console.error("[useForm] Submit error:", error);
+        }
+        throw error;
+      } finally {
+        state$.isSubmitting.set(false);
+      }
+    },
+    [
+      state$,
+      validateForm,
+      onSubmit,
+      onError,
+      setFieldValue,
+      setFieldTouched,
+      resetForm,
+      debug
+    ]
+  );
+  const getFieldProps = useCallback(
+    (field) => {
+      return {
+        name: String(field),
+        value: state$.values[field].get(),
+        onChange: (value) => setFieldValue(field, value),
+        onBlur: () => setFieldTouched(field, true)
+      };
+    },
+    [state$, setFieldValue, setFieldTouched]
+  );
+  const getFieldMeta = useCallback(
+    (field) => {
+      const fieldKey = String(field);
+      const metadata = fieldMetadataActions.get(fieldKey);
+      return {
+        error: state$.errors[field].get(),
+        touched: state$.touched[field].get() ?? false,
+        isDirty: state$.values[field].get() !== state$.initialValues[field].get(),
+        isValidating: validationInProgress.current.has(fieldKey),
+        // Additional metadata from @opensite/hooks
+        validationCount: metadata?.validationCount,
+        lastValidated: metadata?.lastValidated
+      };
+    },
+    [state$, fieldMetadataActions]
+  );
+  const values = useSelector(() => state$.values.get());
+  const errors = useSelector(() => state$.errors.get());
+  const touched = useSelector(() => state$.touched.get());
+  const isSubmitting = useSelector(() => state$.isSubmitting.get());
+  const status = useSelector(() => state$.status.get());
+  const isValid = useSelector(() => Object.keys(state$.errors.get()).length === 0);
+  const isDirty = useSelector(() => {
+    const currentValues = state$.values.get();
+    const initialValues2 = state$.initialValues.get();
+    return Object.keys(currentValues).some(
+      (key) => currentValues[key] !== initialValues2[key]
+    );
+  });
+  return {
+    // State
+    values,
+    errors,
+    touched,
+    isSubmitting,
+    isValid,
+    isDirty,
+    status,
+    // Actions
+    handleSubmit,
+    setValues: (values2) => {
+      if (typeof values2 === "function") {
+        state$.values.set(values2(state$.values.get()));
+      } else {
+        state$.values.set(values2);
+      }
+    },
+    setFieldValue,
+    setErrors: (errors2) => state$.errors.set(errors2),
+    setFieldError: (field, error) => state$.errors[field].set(error),
+    setTouched: (touched2) => state$.touched.set(touched2),
+    setFieldTouched,
+    validateForm,
+    validateField,
+    resetForm,
+    getFieldProps,
+    getFieldMeta
+  };
+}
+var FormContext = React3.createContext(null);
+FormContext.displayName = "FormContext";
+function useField(options) {
+  const { name, validate, transform } = options;
+  const form = useContext(FormContext);
+  if (!form) {
+    throw new Error(
+      "useField must be used within a FormContext. Wrap your component with <Form> or use useForm's getFieldProps instead."
+    );
+  }
+  const baseFieldProps = form.getFieldProps(name);
+  const field = {
+    ...baseFieldProps,
+    value: baseFieldProps.value,
+    onChange: (value) => {
+      const transformedValue = transform ? transform(value) : value;
+      baseFieldProps.onChange(transformedValue);
+      if (validate) {
+        const result = validate(transformedValue, form.values);
+        if (result instanceof Promise) {
+          result.then((error) => {
+            if (error !== void 0) {
+              form.setFieldError(name, error);
+            }
+          });
+        } else if (result !== void 0) {
+          form.setFieldError(name, result);
+        }
+      }
+    }
+  };
+  const meta = form.getFieldMeta(name);
+  const helpers = {
+    setValue: useCallback(
+      (value) => {
+        const transformedValue = transform ? transform(value) : value;
+        form.setFieldValue(name, transformedValue);
+      },
+      [name, transform, form]
+    ),
+    setTouched: useCallback(
+      (touched) => {
+        form.setFieldTouched(name, touched);
+      },
+      [name, form]
+    ),
+    setError: useCallback(
+      (error) => {
+        form.setFieldError(name, error);
+      },
+      [name, form]
+    )
+  };
+  return {
+    field,
+    meta,
+    helpers
+  };
+}
+var FieldFeedback = ({
+  errorId,
+  errorClassName,
+  error,
+  shouldRenderError
+}) => {
+  const errorText = Array.isArray(error) ? error.join(", ") : error;
+  if (!errorText || !shouldRenderError) return null;
+  return /* @__PURE__ */ React3.createElement(FieldError, { id: errorId, className: errorClassName }, errorText);
+};
+
+// src/core/Field.tsx
+function Field2({
+  name,
+  label,
+  description,
+  children,
+  showError = true,
+  className,
+  errorClassName,
+  required = false,
+  validate
+}) {
+  const fieldState = useField({ name, validate });
+  const { meta } = fieldState;
+  const hasError = React3.useMemo(() => {
+    return showError && meta.touched && meta.error ? true : false;
+  }, [meta?.touched, meta?.error, showError]);
+  const errorId = `${name}-error`;
+  const descriptionId = `${name}-description`;
+  return /* @__PURE__ */ React3.createElement(
+    Field,
+    {
+      className,
+      "data-field": name,
+      invalid: hasError
+    },
+    /* @__PURE__ */ React3.createElement(
+      LabelGroup,
+      {
+        labelHtmlFor: name,
+        required,
+        variant: "label",
+        secondaryId: descriptionId,
+        secondary: description,
+        primary: label
+      }
+    ),
+    /* @__PURE__ */ React3.createElement("div", { "data-slot": "field-control" }, typeof children === "function" ? children(fieldState) : children),
+    /* @__PURE__ */ React3.createElement(
+      FieldFeedback,
+      {
+        errorId,
+        errorClassName,
+        shouldRenderError: hasError,
+        error: meta.error
+      }
+    )
+  );
+}
+Field2.displayName = "Field";
+
+export { Field2 as Field, FormContext, useField, useForm };
+//# sourceMappingURL=chunk-24RPM43T.js.map
+//# sourceMappingURL=chunk-24RPM43T.js.map