@page-speed/forms 0.5.7 → 0.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/dist/FormContext-089h0j0Q.d.ts +153 -0
  2. package/dist/FormContext-iHzBALZa.d.cts +153 -0
  3. package/dist/{chunk-A7R6GEMA.js → chunk-455PI4LV.js} +84 -3
  4. package/dist/chunk-455PI4LV.js.map +1 -0
  5. package/dist/{chunk-5WWMVS2I.js → chunk-4ROWNTY6.js} +334 -415
  6. package/dist/chunk-4ROWNTY6.js.map +1 -0
  7. package/dist/{chunk-FIDKDYT7.cjs → chunk-ED4UK63G.cjs} +439 -521
  8. package/dist/chunk-ED4UK63G.cjs.map +1 -0
  9. package/dist/chunk-IXHDJ7E5.js +263 -0
  10. package/dist/chunk-IXHDJ7E5.js.map +1 -0
  11. package/dist/{chunk-Q7VR374Y.js → chunk-MJYEXJ3U.js} +3 -3
  12. package/dist/{chunk-Q7VR374Y.js.map → chunk-MJYEXJ3U.js.map} +1 -1
  13. package/dist/{chunk-KPHMVGTU.cjs → chunk-MUBEMXI7.cjs} +6 -6
  14. package/dist/{chunk-KPHMVGTU.cjs.map → chunk-MUBEMXI7.cjs.map} +1 -1
  15. package/dist/chunk-Q7WXLZN5.cjs +287 -0
  16. package/dist/chunk-Q7WXLZN5.cjs.map +1 -0
  17. package/dist/{chunk-QQSBW6N3.cjs → chunk-QRI5TMES.cjs} +85 -2
  18. package/dist/chunk-QRI5TMES.cjs.map +1 -0
  19. package/dist/core.cjs +13 -9
  20. package/dist/core.d.cts +66 -141
  21. package/dist/core.d.ts +66 -141
  22. package/dist/core.js +3 -3
  23. package/dist/index.cjs +14 -14
  24. package/dist/index.d.cts +2 -2
  25. package/dist/index.d.ts +2 -2
  26. package/dist/index.js +3 -3
  27. package/dist/inputs.cjs +16 -16
  28. package/dist/inputs.d.cts +1 -1
  29. package/dist/inputs.d.ts +1 -1
  30. package/dist/inputs.js +2 -2
  31. package/dist/integration.cjs +17 -17
  32. package/dist/integration.d.cts +1 -1
  33. package/dist/integration.d.ts +1 -1
  34. package/dist/integration.js +3 -3
  35. package/dist/{types-CnOCn7b3.d.ts → types-BemGfSPA.d.cts} +27 -1
  36. package/dist/{types-CnOCn7b3.d.cts → types-BemGfSPA.d.ts} +27 -1
  37. package/dist/validation-rules.d.cts +1 -1
  38. package/dist/validation-rules.d.ts +1 -1
  39. package/dist/validation-utils.d.cts +1 -1
  40. package/dist/validation-utils.d.ts +1 -1
  41. package/dist/validation-valibot.d.cts +1 -1
  42. package/dist/validation-valibot.d.ts +1 -1
  43. package/dist/validation.d.cts +1 -1
  44. package/dist/validation.d.ts +1 -1
  45. package/package.json +1 -1
  46. package/dist/chunk-5WWMVS2I.js.map +0 -1
  47. package/dist/chunk-A7R6GEMA.js.map +0 -1
  48. package/dist/chunk-FIDKDYT7.cjs.map +0 -1
  49. package/dist/chunk-N2HOVRRN.js +0 -150
  50. package/dist/chunk-N2HOVRRN.js.map +0 -1
  51. package/dist/chunk-O4ZLR7AN.cjs +0 -173
  52. package/dist/chunk-O4ZLR7AN.cjs.map +0 -1
  53. package/dist/chunk-QQSBW6N3.cjs.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/lib/utils.ts","../src/components/ui/label.tsx","../src/components/ui/field.tsx","../src/components/ui/input.tsx","../src/inputs/TextInput.tsx","../src/components/ui/button.tsx","../src/core/label-group.tsx"],"names":["twMerge","clsx","React","LabelPrimitive","React2","React3","React4","cva","Slot","React5","React6"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AAKO,IAAM,4BAAA,GACX;;;ACNF,SAAS,KAAA,CAAM;AAAA,EACb,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqD;AACnD,EAAA,uBACEC,iBAAA,CAAA,aAAA;AAAA,IAACC,aAAA,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,GAAcC,iBAAA,CAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,WAAA,GAAc,UAAA,EAAY,UAAU,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC3E,IAAA,uBACEA,iBAAA,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;AAAA,UAET,WAAA,KAAgB,eACZ,yBAAA,GACA,aAAA;AAAA,UACJ;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AAAC;AACD,KAAA,CAAM,WAAA,GAAc,OAAA;AAOpB,IAAM,UAAA,GAAmBA,6BAGvB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,uBACEA,iBAAA,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,GAAmBA,iBAAA,CAAA,UAAA,CAKvB,CAAC,EAAE,SAAA,EAAW,UAAU,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACtD,EAAA,uBACEA,iBAAA,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,oBAAYA,iBAAA,CAAA,aAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2BAAwB,GAAC;AAAA,GACxD;AAEJ,CAAC;AACD,UAAA,CAAW,WAAA,GAAc,YAAA;AAOzB,IAAM,gBAAA,GAAyBA,6BAG7B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,uBACEA,iBAAA,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,GAAmBA,6BAGvB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,uBACEA,iBAAA,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;ACnHzB,IAAM,KAAA,GAAcC,iBAAA,CAAA,UAAA;AAAA,EAClB,CAAC,EAAE,SAAA,EAAW,MAAM,GAAG,KAAA,IAAS,GAAA,KAAQ;AACtC,IAAA,uBACEA,iBAAA,CAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA;AAAA,QACA,WAAA,EAAU,OAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA;AAAA,UAET,wDAAA;AAAA,UACA,8CAAA;AAAA,UACA,2CAAA;AAAA;AAAA,UAGA,8CAAA;AAAA;AAAA,UAGA,mFAAA;AAAA;AAAA,UAGA,8EAAA;AAAA;AAAA,UAGA,6DAAA;AAAA,UACA,+BAAA;AAAA;AAAA,UAGA,4BAAA;AAAA,UAEA;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,KAAA,CAAM,WAAA,GAAc,OAAA;;;AChBb,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,KAAA,GAAQ,KAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,IAAA,GAAO,MAAA;AAAA,EACP,EAAA,GAAK,MAAA;AAAA,EACL,GAAG;AACL,CAAA,EAEG;AACD,EAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAA2C;AAC/D,IAAA,QAAA,CAAS,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,EACzB,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,MAAA,IAAS;AAAA,EACX,CAAA;AAEA,EAAA,MAAM,WAAW,MAAA,CAAO,KAAA,IAAS,EAAE,CAAA,CAAE,IAAA,GAAO,MAAA,GAAS,CAAA;AAErD,EAAA,uBACEC,iBAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,EAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAO,KAAA,IAAS,EAAA;AAAA,MAChB,QAAA,EAAU,YAAA;AAAA,MACV,MAAA,EAAQ,UAAA;AAAA,MACR,WAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA;AAAA,QAET,CAAC,SAAS,QAAA,IAAY,kBAAA;AAAA;AAAA,QAEtB;AAAA,OACF;AAAA,MACA,cAAA,EAAc,KAAA,IAAS,KAAA,CAAM,cAAc,CAAA;AAAA,MAC3C,kBAAA,EAAkB,MAAM,kBAAkB,CAAA;AAAA,MAC1C,eAAA,EAAe,QAAA,IAAY,KAAA,CAAM,eAAe,CAAA;AAAA,MAC/C,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AC7ExB,IAAM,cAAA,GAAiBC,0BAAA;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,GAAUC,YAAA,CAAK,IAAA,GAAO,QAAA;AAEnC,EAAA,uBACEC,iBAAA,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;AC3CA,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,iBAAA,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,iBAAA,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,mDACG,QAAA,EAAA,EAAO,WAAA,EAAU,gBAAe,SAAA,EAAW,cAAA,EAAA,EACzC,SACA,iBACH,CAAA;AAAA,IAEJ,CAAA,MAAO;AACL,MAAA,cAAA,mDACG,KAAA,EAAA,EAAI,WAAA,EAAU,eAAc,SAAA,EAAW,cAAA,EAAA,EACrC,SACA,iBACH,CAAA;AAAA,IAEJ;AAAA,EACF;AAEA,EAAA,MAAM,mBAAmB,SAAA,mBACvBA,iBAAA,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,iBAAA,CAAA,aAAA,CAAAA,iBAAA,CAAA,QAAA,EAAA,IAAA,EACG,gBACA,gBACH,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEA,iBAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAAA,EACZ,gBACA,gBACH,CAAA;AAEJ","file":"chunk-QRI5TMES.cjs","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 // Use space-y instead of flex to avoid interfering with parent grid layouts\n orientation === \"horizontal\"\n ? \"flex items-center gap-2\"\n : \"space-y-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 { cn } from \"../../lib/utils\";\nimport { INPUT_AUTOFILL_RESET_CLASSES } from \"../../lib/utils\";\n\n/**\n * Input component - Optimized for dynamic theming across thousands of client brands\n *\n * CRITICAL: This component must work with dynamic Section backgrounds (light/dark/primary/etc)\n * Only uses CSS variables that adapt automatically - NO hardcoded semantic colors\n *\n * See: SHADCN_INTEGRATION_GUIDE.md for full documentation\n */\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n ({ className, type, ...props }, ref) => {\n return (\n <input\n ref={ref}\n type={type}\n data-slot=\"input\"\n className={cn(\n // Core structure - no hardcoded colors, uses CSS variables\n \"flex h-9 w-full min-w-0 rounded-md border border-input\",\n \"bg-transparent px-3 py-1 text-base shadow-sm\",\n \"transition-colors outline-none md:text-sm\",\n\n // Focus state - uses ring-ring CSS variable (adapts to theme)\n \"focus-visible:ring-1 focus-visible:ring-ring\",\n\n // Error state - uses destructive CSS variables (adapts to theme)\n \"aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive\",\n\n // Disabled state - no color hardcoding\n \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n\n // File input specific - inherits text color from parent\n \"file:inline-flex file:h-7 file:border-0 file:bg-transparent\",\n \"file:text-sm file:font-medium\",\n\n // Autofill reset - prevents browser from overriding our dynamic colors\n INPUT_AUTOFILL_RESET_CLASSES,\n\n className,\n )}\n {...props}\n />\n );\n },\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n","\"use client\";\n\nimport * as React from \"react\";\nimport type { InputProps } from \"../core/types\";\nimport { Input } from \"../components/ui/input\";\nimport { cn } from \"../lib/utils\";\n\n/**\n * TextInput - High-performance text input component (ShadCN-based)\n *\n * Built on ShadCN Input component with form-specific behavior:\n * - Error state handling\n * - Valid value indicator (ring-2)\n * - Form integration (onChange, onBlur)\n * - Full accessibility support\n *\n * @example\n * ```tsx\n * const form = useForm({ initialValues: { email: '' } });\n *\n * <TextInput\n * {...form.getFieldProps('email')}\n * type=\"email\"\n * placeholder=\"Enter your email\"\n * error={!!form.errors.email}\n * aria-invalid={!!form.errors.email}\n * aria-describedby={form.errors.email ? 'email-error' : undefined}\n * />\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/text-input\n */\nexport function TextInput({\n name,\n value,\n onChange,\n onBlur,\n placeholder,\n disabled = false,\n required = false,\n error = false,\n className = \"\",\n type = \"text\",\n id = \"text\",\n ...props\n}: InputProps<string> & {\n type?: \"text\" | \"email\" | \"password\" | \"url\" | \"tel\" | \"search\";\n}) {\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.target.value);\n };\n\n const handleBlur = () => {\n onBlur?.();\n };\n\n const hasValue = String(value ?? \"\").trim().length > 0;\n\n return (\n <Input\n type={type}\n id={id}\n name={name}\n value={value ?? \"\"}\n onChange={handleChange}\n onBlur={handleBlur}\n placeholder={placeholder}\n disabled={disabled}\n required={required}\n className={cn(\n // Valid value indicator - ring-2 when has value and no error\n !error && hasValue && \"ring-2 ring-ring\",\n // Error state - handled by Input component via aria-invalid\n className,\n )}\n aria-invalid={error || props[\"aria-invalid\"]}\n aria-describedby={props[\"aria-describedby\"]}\n aria-required={required || props[\"aria-required\"]}\n {...props}\n />\n );\n}\n\nTextInput.displayName = \"TextInput\";\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 { FieldDescription, FieldLabel } 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/core.cjs CHANGED
@@ -1,34 +1,38 @@
1
1
  'use strict';
2
2
 
3
- var chunkO4ZLR7AN_cjs = require('./chunk-O4ZLR7AN.cjs');
4
- var chunkKPHMVGTU_cjs = require('./chunk-KPHMVGTU.cjs');
5
- require('./chunk-QQSBW6N3.cjs');
3
+ var chunkQ7WXLZN5_cjs = require('./chunk-Q7WXLZN5.cjs');
4
+ var chunkMUBEMXI7_cjs = require('./chunk-MUBEMXI7.cjs');
5
+ require('./chunk-QRI5TMES.cjs');
6
6
 
7
7
 
8
8
 
9
+ Object.defineProperty(exports, "ButtonGroupForm", {
10
+ enumerable: true,
11
+ get: function () { return chunkQ7WXLZN5_cjs.ButtonGroupForm; }
12
+ });
9
13
  Object.defineProperty(exports, "Form", {
10
14
  enumerable: true,
11
- get: function () { return chunkO4ZLR7AN_cjs.Form; }
15
+ get: function () { return chunkQ7WXLZN5_cjs.Form; }
12
16
  });
13
17
  Object.defineProperty(exports, "FormFeedback", {
14
18
  enumerable: true,
15
- get: function () { return chunkO4ZLR7AN_cjs.FormFeedback; }
19
+ get: function () { return chunkQ7WXLZN5_cjs.FormFeedback; }
16
20
  });
17
21
  Object.defineProperty(exports, "Field", {
18
22
  enumerable: true,
19
- get: function () { return chunkKPHMVGTU_cjs.Field; }
23
+ get: function () { return chunkMUBEMXI7_cjs.Field; }
20
24
  });
21
25
  Object.defineProperty(exports, "FormContext", {
22
26
  enumerable: true,
23
- get: function () { return chunkKPHMVGTU_cjs.FormContext; }
27
+ get: function () { return chunkMUBEMXI7_cjs.FormContext; }
24
28
  });
25
29
  Object.defineProperty(exports, "useField", {
26
30
  enumerable: true,
27
- get: function () { return chunkKPHMVGTU_cjs.useField; }
31
+ get: function () { return chunkMUBEMXI7_cjs.useField; }
28
32
  });
29
33
  Object.defineProperty(exports, "useForm", {
30
34
  enumerable: true,
31
- get: function () { return chunkKPHMVGTU_cjs.useForm; }
35
+ get: function () { return chunkMUBEMXI7_cjs.useForm; }
32
36
  });
33
37
  //# sourceMappingURL=core.cjs.map
34
38
  //# sourceMappingURL=core.cjs.map
package/dist/core.d.cts CHANGED
@@ -1,154 +1,79 @@
1
- import { b as FormValues, U as UseFormOptions, m as UseFormReturn, p as UseFieldOptions, q as UseFieldReturn, r as FormProps, s as FieldProps } from './types-CnOCn7b3.cjs';
2
- export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, I as InputProps, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, a as ValidationMode, V as ValidationSchema } from './types-CnOCn7b3.cjs';
1
+ export { b as Field, F as Form, d as FormContext, c as FormFeedback, e as FormFeedbackProps, a as useField, u as useForm } from './FormContext-iHzBALZa.cjs';
3
2
  import * as React from 'react';
3
+ import { I as InputProps } from './types-BemGfSPA.cjs';
4
+ export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, s as FieldProps, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, r as FormProps, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, b as FormValues, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, p as UseFieldOptions, q as UseFieldReturn, U as UseFormOptions, m as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-BemGfSPA.cjs';
4
5
 
6
+ type ButtonGroupFormSize = "xs" | "sm" | "default" | "lg";
7
+ type ButtonGroupFormProps = {
8
+ /**
9
+ * Field name
10
+ */
11
+ name: string;
12
+ /**
13
+ * Optional label above the input
14
+ */
15
+ label?: React.ReactNode;
16
+ /**
17
+ * Placeholder text for the input
18
+ */
19
+ placeholder?: string;
20
+ /**
21
+ * Input props from form field
22
+ */
23
+ inputProps: InputProps<string> & {
24
+ type?: "text" | "email" | "password" | "url" | "tel" | "search";
25
+ };
26
+ /**
27
+ * Submit button label
28
+ */
29
+ submitLabel?: React.ReactNode;
30
+ /**
31
+ * Submit button size
32
+ */
33
+ size?: ButtonGroupFormSize;
34
+ /**
35
+ * Submit button variant
36
+ */
37
+ submitVariant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
38
+ /**
39
+ * Whether form is submitting
40
+ */
41
+ isSubmitting?: boolean;
42
+ /**
43
+ * Additional className for the container
44
+ */
45
+ className?: string;
46
+ /**
47
+ * Additional className for the label
48
+ */
49
+ labelClassName?: string;
50
+ };
5
51
  /**
6
- * useForm - High-performance form state management with field-level reactivity
52
+ * ButtonGroupForm - Inline form layout with input and submit button grouped together
7
53
  *
8
- * Built on @legendapp/state for optimal performance:
9
- * - Field-level reactivity: Only re-render the specific field that changed
10
- * - Observable-based state: ~1 re-render per change vs ~10 for traditional hooks
11
- * - Tree-shakable: Only bundle what you use
54
+ * Commonly used for newsletter signups and other simple single-field forms.
55
+ * The input and button automatically adjust sizing together.
12
56
  *
13
- * @example
14
- * ```tsx
15
- * const form = useForm({
16
- * initialValues: { email: '', password: '' },
17
- * onSubmit: async (values) => {
18
- * await login(values);
19
- * },
20
- * validationSchema: {
21
- * email: (value) => !value ? 'Required' : undefined,
22
- * password: (value) => value.length < 8 ? 'Too short' : undefined,
23
- * },
24
- * });
25
- *
26
- * return (
27
- * <form onSubmit={form.handleSubmit}>
28
- * <input {...form.getFieldProps('email')} />
29
- * {form.errors.email && <span>{form.errors.email}</span>}
30
- * </form>
31
- * );
32
- * ```
33
- *
34
- * @see https://opensite.ai/developers/page-speed/forms/use-form
35
- */
36
- declare function useForm<T extends FormValues = FormValues>(options: UseFormOptions<T>): UseFormReturn<T>;
37
-
38
- /**
39
- * useField - Field-level reactive hook for form inputs
40
- *
41
- * Provides isolated reactivity for individual form fields.
42
- * Only re-renders when the specific field changes, not when other fields update.
43
- *
44
- * Must be used within a FormContext (inside <Form> component).
45
- *
46
- * @example
47
- * ```tsx
48
- * function EmailInput() {
49
- * const { field, meta, helpers } = useField({ name: 'email' });
50
- *
51
- * return (
52
- * <div>
53
- * <input {...field} type="email" />
54
- * {meta.touched && meta.error && <span>{meta.error}</span>}
55
- * </div>
56
- * );
57
- * }
58
- * ```
59
- *
60
- * @see https://opensite.ai/developers/page-speed/forms/use-field
61
- */
62
- declare function useField<T = any>(options: UseFieldOptions<T>): UseFieldReturn<T>;
63
-
64
- /**
65
- * Form - Progressive enhancement form component
66
- *
67
- * Provides form context to child components and handles form submission.
68
- * Supports progressive enhancement with server-side fallback.
69
- *
70
- * Features:
71
- * - Provides FormContext for useField hook
72
- * - Handles form submission with validation
73
- * - Progressive enhancement support (works without JavaScript)
74
- * - Accessible form semantics
75
- *
76
- * @example
77
- * ```tsx
78
- * const form = useForm({
79
- * initialValues: { email: '' },
80
- * onSubmit: async (values) => {
81
- * await submitForm(values);
82
- * },
83
- * });
84
- *
85
- * return (
86
- * <Form form={form} action="/api/submit" method="post">
87
- * <input {...form.getFieldProps('email')} />
88
- * <button type="submit">Submit</button>
89
- * </Form>
90
- * );
91
- * ```
92
- *
93
- * @see https://opensite.ai/developers/page-speed/forms/form
94
- */
95
- declare function Form<T extends FormValues = FormValues>({ form, children, className, action, method, noValidate, submissionConfig, successMessage, submissionError, successMessageClassName, errorMessageClassName, onNewSubmission, notificationConfig, styleConfig, formConfig, ...props }: FormProps<T> & React.FormHTMLAttributes<HTMLFormElement>): React.JSX.Element;
96
- declare namespace Form {
97
- var displayName: string;
98
- }
99
-
100
- /**
101
- * Field - Field wrapper component with label, description, and error display
102
- *
103
- * Provides a complete field UI with automatic error handling and accessibility.
104
- * Uses useField hook internally for field-level reactivity.
105
- *
106
- * Features:
107
- * - Automatic label association
108
- * - Error display with accessibility
109
- * - Optional description text
110
- * - Render prop pattern for flexibility
111
- * - Full accessibility support
57
+ * Size mappings:
58
+ * - xs: h-8 text-xs
59
+ * - sm: h-9 text-sm
60
+ * - default: h-10 text-sm
61
+ * - lg: h-12 text-base
112
62
  *
113
63
  * @example
114
64
  * ```tsx
115
- * <Field name="email" label="Email Address" description="We'll never share your email">
116
- * {({ field, meta }) => (
117
- * <input
118
- * {...field}
119
- * type="email"
120
- * className={meta.error && meta.touched ? 'error' : ''}
121
- * />
122
- * )}
123
- * </Field>
65
+ * <ButtonGroupForm
66
+ * name="email"
67
+ * placeholder="Enter your email"
68
+ * inputProps={form.getFieldProps('email')}
69
+ * submitLabel="Subscribe"
70
+ * size="default"
71
+ * />
124
72
  * ```
125
- *
126
- * @see https://opensite.ai/developers/page-speed/forms/field
127
73
  */
128
- declare function Field({ name, label, description, children, showError, className, errorClassName, required, validate, }: FieldProps): React.JSX.Element;
129
- declare namespace Field {
130
- var displayName: string;
131
- }
132
-
133
- interface FormFeedbackProps {
134
- successMessage?: React.ReactNode;
135
- submissionError?: React.ReactNode;
136
- successMessageClassName?: string;
137
- errorMessageClassName?: string;
138
- }
139
- declare function FormFeedback({ successMessage, submissionError, successMessageClassName, errorMessageClassName, }: FormFeedbackProps): React.JSX.Element | null;
140
- declare namespace FormFeedback {
74
+ declare function ButtonGroupForm({ name, label, inputProps, submitLabel, submitVariant, size, isSubmitting, className, labelClassName, }: ButtonGroupFormProps): React.JSX.Element;
75
+ declare namespace ButtonGroupForm {
141
76
  var displayName: string;
142
77
  }
143
78
 
144
- /**
145
- * FormContext - React context for providing form state to child components
146
- *
147
- * Allows useField hook to access form state without prop drilling.
148
- * Automatically provided by the <Form> component.
149
- *
150
- * @internal
151
- */
152
- declare const FormContext: React.Context<UseFormReturn<any> | null>;
153
-
154
- export { Field, FieldProps, Form, FormContext, FormFeedback, type FormFeedbackProps, FormProps, FormValues, UseFieldOptions, UseFieldReturn, UseFormOptions, UseFormReturn, useField, useForm };
79
+ export { ButtonGroupForm, type ButtonGroupFormProps, type ButtonGroupFormSize, InputProps };
package/dist/core.d.ts CHANGED
@@ -1,154 +1,79 @@
1
- import { b as FormValues, U as UseFormOptions, m as UseFormReturn, p as UseFieldOptions, q as UseFieldReturn, r as FormProps, s as FieldProps } from './types-CnOCn7b3.js';
2
- export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, I as InputProps, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, a as ValidationMode, V as ValidationSchema } from './types-CnOCn7b3.js';
1
+ export { b as Field, F as Form, d as FormContext, c as FormFeedback, e as FormFeedbackProps, a as useField, u as useForm } from './FormContext-089h0j0Q.js';
3
2
  import * as React from 'react';
3
+ import { I as InputProps } from './types-BemGfSPA.js';
4
+ export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, s as FieldProps, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, r as FormProps, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, b as FormValues, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, p as UseFieldOptions, q as UseFieldReturn, U as UseFormOptions, m as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-BemGfSPA.js';
4
5
 
6
+ type ButtonGroupFormSize = "xs" | "sm" | "default" | "lg";
7
+ type ButtonGroupFormProps = {
8
+ /**
9
+ * Field name
10
+ */
11
+ name: string;
12
+ /**
13
+ * Optional label above the input
14
+ */
15
+ label?: React.ReactNode;
16
+ /**
17
+ * Placeholder text for the input
18
+ */
19
+ placeholder?: string;
20
+ /**
21
+ * Input props from form field
22
+ */
23
+ inputProps: InputProps<string> & {
24
+ type?: "text" | "email" | "password" | "url" | "tel" | "search";
25
+ };
26
+ /**
27
+ * Submit button label
28
+ */
29
+ submitLabel?: React.ReactNode;
30
+ /**
31
+ * Submit button size
32
+ */
33
+ size?: ButtonGroupFormSize;
34
+ /**
35
+ * Submit button variant
36
+ */
37
+ submitVariant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
38
+ /**
39
+ * Whether form is submitting
40
+ */
41
+ isSubmitting?: boolean;
42
+ /**
43
+ * Additional className for the container
44
+ */
45
+ className?: string;
46
+ /**
47
+ * Additional className for the label
48
+ */
49
+ labelClassName?: string;
50
+ };
5
51
  /**
6
- * useForm - High-performance form state management with field-level reactivity
52
+ * ButtonGroupForm - Inline form layout with input and submit button grouped together
7
53
  *
8
- * Built on @legendapp/state for optimal performance:
9
- * - Field-level reactivity: Only re-render the specific field that changed
10
- * - Observable-based state: ~1 re-render per change vs ~10 for traditional hooks
11
- * - Tree-shakable: Only bundle what you use
54
+ * Commonly used for newsletter signups and other simple single-field forms.
55
+ * The input and button automatically adjust sizing together.
12
56
  *
13
- * @example
14
- * ```tsx
15
- * const form = useForm({
16
- * initialValues: { email: '', password: '' },
17
- * onSubmit: async (values) => {
18
- * await login(values);
19
- * },
20
- * validationSchema: {
21
- * email: (value) => !value ? 'Required' : undefined,
22
- * password: (value) => value.length < 8 ? 'Too short' : undefined,
23
- * },
24
- * });
25
- *
26
- * return (
27
- * <form onSubmit={form.handleSubmit}>
28
- * <input {...form.getFieldProps('email')} />
29
- * {form.errors.email && <span>{form.errors.email}</span>}
30
- * </form>
31
- * );
32
- * ```
33
- *
34
- * @see https://opensite.ai/developers/page-speed/forms/use-form
35
- */
36
- declare function useForm<T extends FormValues = FormValues>(options: UseFormOptions<T>): UseFormReturn<T>;
37
-
38
- /**
39
- * useField - Field-level reactive hook for form inputs
40
- *
41
- * Provides isolated reactivity for individual form fields.
42
- * Only re-renders when the specific field changes, not when other fields update.
43
- *
44
- * Must be used within a FormContext (inside <Form> component).
45
- *
46
- * @example
47
- * ```tsx
48
- * function EmailInput() {
49
- * const { field, meta, helpers } = useField({ name: 'email' });
50
- *
51
- * return (
52
- * <div>
53
- * <input {...field} type="email" />
54
- * {meta.touched && meta.error && <span>{meta.error}</span>}
55
- * </div>
56
- * );
57
- * }
58
- * ```
59
- *
60
- * @see https://opensite.ai/developers/page-speed/forms/use-field
61
- */
62
- declare function useField<T = any>(options: UseFieldOptions<T>): UseFieldReturn<T>;
63
-
64
- /**
65
- * Form - Progressive enhancement form component
66
- *
67
- * Provides form context to child components and handles form submission.
68
- * Supports progressive enhancement with server-side fallback.
69
- *
70
- * Features:
71
- * - Provides FormContext for useField hook
72
- * - Handles form submission with validation
73
- * - Progressive enhancement support (works without JavaScript)
74
- * - Accessible form semantics
75
- *
76
- * @example
77
- * ```tsx
78
- * const form = useForm({
79
- * initialValues: { email: '' },
80
- * onSubmit: async (values) => {
81
- * await submitForm(values);
82
- * },
83
- * });
84
- *
85
- * return (
86
- * <Form form={form} action="/api/submit" method="post">
87
- * <input {...form.getFieldProps('email')} />
88
- * <button type="submit">Submit</button>
89
- * </Form>
90
- * );
91
- * ```
92
- *
93
- * @see https://opensite.ai/developers/page-speed/forms/form
94
- */
95
- declare function Form<T extends FormValues = FormValues>({ form, children, className, action, method, noValidate, submissionConfig, successMessage, submissionError, successMessageClassName, errorMessageClassName, onNewSubmission, notificationConfig, styleConfig, formConfig, ...props }: FormProps<T> & React.FormHTMLAttributes<HTMLFormElement>): React.JSX.Element;
96
- declare namespace Form {
97
- var displayName: string;
98
- }
99
-
100
- /**
101
- * Field - Field wrapper component with label, description, and error display
102
- *
103
- * Provides a complete field UI with automatic error handling and accessibility.
104
- * Uses useField hook internally for field-level reactivity.
105
- *
106
- * Features:
107
- * - Automatic label association
108
- * - Error display with accessibility
109
- * - Optional description text
110
- * - Render prop pattern for flexibility
111
- * - Full accessibility support
57
+ * Size mappings:
58
+ * - xs: h-8 text-xs
59
+ * - sm: h-9 text-sm
60
+ * - default: h-10 text-sm
61
+ * - lg: h-12 text-base
112
62
  *
113
63
  * @example
114
64
  * ```tsx
115
- * <Field name="email" label="Email Address" description="We'll never share your email">
116
- * {({ field, meta }) => (
117
- * <input
118
- * {...field}
119
- * type="email"
120
- * className={meta.error && meta.touched ? 'error' : ''}
121
- * />
122
- * )}
123
- * </Field>
65
+ * <ButtonGroupForm
66
+ * name="email"
67
+ * placeholder="Enter your email"
68
+ * inputProps={form.getFieldProps('email')}
69
+ * submitLabel="Subscribe"
70
+ * size="default"
71
+ * />
124
72
  * ```
125
- *
126
- * @see https://opensite.ai/developers/page-speed/forms/field
127
73
  */
128
- declare function Field({ name, label, description, children, showError, className, errorClassName, required, validate, }: FieldProps): React.JSX.Element;
129
- declare namespace Field {
130
- var displayName: string;
131
- }
132
-
133
- interface FormFeedbackProps {
134
- successMessage?: React.ReactNode;
135
- submissionError?: React.ReactNode;
136
- successMessageClassName?: string;
137
- errorMessageClassName?: string;
138
- }
139
- declare function FormFeedback({ successMessage, submissionError, successMessageClassName, errorMessageClassName, }: FormFeedbackProps): React.JSX.Element | null;
140
- declare namespace FormFeedback {
74
+ declare function ButtonGroupForm({ name, label, inputProps, submitLabel, submitVariant, size, isSubmitting, className, labelClassName, }: ButtonGroupFormProps): React.JSX.Element;
75
+ declare namespace ButtonGroupForm {
141
76
  var displayName: string;
142
77
  }
143
78
 
144
- /**
145
- * FormContext - React context for providing form state to child components
146
- *
147
- * Allows useField hook to access form state without prop drilling.
148
- * Automatically provided by the <Form> component.
149
- *
150
- * @internal
151
- */
152
- declare const FormContext: React.Context<UseFormReturn<any> | null>;
153
-
154
- export { Field, FieldProps, Form, FormContext, FormFeedback, type FormFeedbackProps, FormProps, FormValues, UseFieldOptions, UseFieldReturn, UseFormOptions, UseFormReturn, useField, useForm };
79
+ export { ButtonGroupForm, type ButtonGroupFormProps, type ButtonGroupFormSize, InputProps };
package/dist/core.js CHANGED
@@ -1,5 +1,5 @@
1
- export { Form, FormFeedback } from './chunk-N2HOVRRN.js';
2
- export { Field, FormContext, useField, useForm } from './chunk-Q7VR374Y.js';
3
- import './chunk-A7R6GEMA.js';
1
+ export { ButtonGroupForm, Form, FormFeedback } from './chunk-IXHDJ7E5.js';
2
+ export { Field, FormContext, useField, useForm } from './chunk-MJYEXJ3U.js';
3
+ import './chunk-455PI4LV.js';
4
4
  //# sourceMappingURL=core.js.map
5
5
  //# sourceMappingURL=core.js.map
package/dist/index.cjs CHANGED
@@ -1,54 +1,54 @@
1
1
  'use strict';
2
2
 
3
- var chunkO4ZLR7AN_cjs = require('./chunk-O4ZLR7AN.cjs');
4
- var chunkKPHMVGTU_cjs = require('./chunk-KPHMVGTU.cjs');
5
- var chunkQQSBW6N3_cjs = require('./chunk-QQSBW6N3.cjs');
3
+ var chunkQ7WXLZN5_cjs = require('./chunk-Q7WXLZN5.cjs');
4
+ var chunkMUBEMXI7_cjs = require('./chunk-MUBEMXI7.cjs');
5
+ var chunkQRI5TMES_cjs = require('./chunk-QRI5TMES.cjs');
6
6
 
7
7
 
8
8
 
9
9
  Object.defineProperty(exports, "Form", {
10
10
  enumerable: true,
11
- get: function () { return chunkO4ZLR7AN_cjs.Form; }
11
+ get: function () { return chunkQ7WXLZN5_cjs.Form; }
12
12
  });
13
13
  Object.defineProperty(exports, "FormFeedback", {
14
14
  enumerable: true,
15
- get: function () { return chunkO4ZLR7AN_cjs.FormFeedback; }
15
+ get: function () { return chunkQ7WXLZN5_cjs.FormFeedback; }
16
16
  });
17
17
  Object.defineProperty(exports, "Field", {
18
18
  enumerable: true,
19
- get: function () { return chunkKPHMVGTU_cjs.Field; }
19
+ get: function () { return chunkMUBEMXI7_cjs.Field; }
20
20
  });
21
21
  Object.defineProperty(exports, "FormContext", {
22
22
  enumerable: true,
23
- get: function () { return chunkKPHMVGTU_cjs.FormContext; }
23
+ get: function () { return chunkMUBEMXI7_cjs.FormContext; }
24
24
  });
25
25
  Object.defineProperty(exports, "useField", {
26
26
  enumerable: true,
27
- get: function () { return chunkKPHMVGTU_cjs.useField; }
27
+ get: function () { return chunkMUBEMXI7_cjs.useField; }
28
28
  });
29
29
  Object.defineProperty(exports, "useForm", {
30
30
  enumerable: true,
31
- get: function () { return chunkKPHMVGTU_cjs.useForm; }
31
+ get: function () { return chunkMUBEMXI7_cjs.useForm; }
32
32
  });
33
33
  Object.defineProperty(exports, "FieldDescription", {
34
34
  enumerable: true,
35
- get: function () { return chunkQQSBW6N3_cjs.FieldDescription; }
35
+ get: function () { return chunkQRI5TMES_cjs.FieldDescription; }
36
36
  });
37
37
  Object.defineProperty(exports, "FieldError", {
38
38
  enumerable: true,
39
- get: function () { return chunkQQSBW6N3_cjs.FieldError; }
39
+ get: function () { return chunkQRI5TMES_cjs.FieldError; }
40
40
  });
41
41
  Object.defineProperty(exports, "FieldGroup", {
42
42
  enumerable: true,
43
- get: function () { return chunkQQSBW6N3_cjs.FieldGroup; }
43
+ get: function () { return chunkQRI5TMES_cjs.FieldGroup; }
44
44
  });
45
45
  Object.defineProperty(exports, "FieldWrapper", {
46
46
  enumerable: true,
47
- get: function () { return chunkQQSBW6N3_cjs.Field; }
47
+ get: function () { return chunkQRI5TMES_cjs.Field; }
48
48
  });
49
49
  Object.defineProperty(exports, "FormFieldLabel", {
50
50
  enumerable: true,
51
- get: function () { return chunkQQSBW6N3_cjs.FieldLabel; }
51
+ get: function () { return chunkQRI5TMES_cjs.FieldLabel; }
52
52
  });
53
53
  //# sourceMappingURL=index.cjs.map
54
54
  //# sourceMappingURL=index.cjs.map
package/dist/index.d.cts CHANGED
@@ -1,5 +1,5 @@
1
- export { Field, Form, FormContext, FormFeedback, FormFeedbackProps, useField, useForm } from './core.cjs';
2
- export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, s as FieldProps, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, r as FormProps, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, b as FormValues, I as InputProps, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, p as UseFieldOptions, q as UseFieldReturn, U as UseFormOptions, m as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-CnOCn7b3.cjs';
1
+ export { b as Field, F as Form, d as FormContext, c as FormFeedback, e as FormFeedbackProps, a as useField, u as useForm } from './FormContext-iHzBALZa.cjs';
2
+ export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, s as FieldProps, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, r as FormProps, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, b as FormValues, I as InputProps, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, p as UseFieldOptions, q as UseFieldReturn, U as UseFormOptions, m as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-BemGfSPA.cjs';
3
3
  import * as React from 'react';
4
4
 
5
5
  type FieldOrientation = "vertical" | "horizontal";
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export { Field, Form, FormContext, FormFeedback, FormFeedbackProps, useField, useForm } from './core.js';
2
- export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, s as FieldProps, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, r as FormProps, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, b as FormValues, I as InputProps, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, p as UseFieldOptions, q as UseFieldReturn, U as UseFormOptions, m as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-CnOCn7b3.js';
1
+ export { b as Field, F as Form, d as FormContext, c as FormFeedback, e as FormFeedbackProps, a as useField, u as useForm } from './FormContext-089h0j0Q.js';
2
+ export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, s as FieldProps, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, r as FormProps, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, b as FormValues, I as InputProps, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, p as UseFieldOptions, q as UseFieldReturn, U as UseFormOptions, m as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-BemGfSPA.js';
3
3
  import * as React from 'react';
4
4
 
5
5
  type FieldOrientation = "vertical" | "horizontal";
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- export { Form, FormFeedback } from './chunk-N2HOVRRN.js';
2
- export { Field, FormContext, useField, useForm } from './chunk-Q7VR374Y.js';
3
- export { FieldDescription, FieldError, FieldGroup, Field as FieldWrapper, FieldLabel as FormFieldLabel } from './chunk-A7R6GEMA.js';
1
+ export { Form, FormFeedback } from './chunk-IXHDJ7E5.js';
2
+ export { Field, FormContext, useField, useForm } from './chunk-MJYEXJ3U.js';
3
+ export { FieldDescription, FieldError, FieldGroup, Field as FieldWrapper, FieldLabel as FormFieldLabel } from './chunk-455PI4LV.js';
4
4
  //# sourceMappingURL=index.js.map
5
5
  //# sourceMappingURL=index.js.map