@page-speed/forms 0.7.2 → 0.7.4

package/dist/core.cjs

@@ -1,38 +1,38 @@
 'use strict';
 
 require('./chunk-V7JSGFCI.cjs');
-var chunkV4HMVPAB_cjs = require('./chunk-V4HMVPAB.cjs');
-require('./chunk-WQ4HD5UD.cjs');
+var chunkMBOEVE6D_cjs = require('./chunk-MBOEVE6D.cjs');
+require('./chunk-PDMFWP5I.cjs');
 
 
 
 Object.defineProperty(exports, "ButtonGroupForm", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.ButtonGroupForm; }
+  get: function () { return chunkMBOEVE6D_cjs.ButtonGroupForm; }
 });
 Object.defineProperty(exports, "Field", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.Field; }
+  get: function () { return chunkMBOEVE6D_cjs.Field; }
 });
 Object.defineProperty(exports, "Form", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.Form; }
+  get: function () { return chunkMBOEVE6D_cjs.Form; }
 });
 Object.defineProperty(exports, "FormContext", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.FormContext; }
+  get: function () { return chunkMBOEVE6D_cjs.FormContext; }
 });
 Object.defineProperty(exports, "FormFeedback", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.FormFeedback; }
+  get: function () { return chunkMBOEVE6D_cjs.FormFeedback; }
 });
 Object.defineProperty(exports, "useField", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.useField; }
+  get: function () { return chunkMBOEVE6D_cjs.useField; }
 });
 Object.defineProperty(exports, "useForm", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.useForm; }
+  get: function () { return chunkMBOEVE6D_cjs.useForm; }
 });
 //# sourceMappingURL=core.cjs.map
 //# sourceMappingURL=core.cjs.map

package/dist/core.js

@@ -1,5 +1,5 @@
 import './chunk-UBDA7CS5.js';
-export { ButtonGroupForm, Field, Form, FormContext, FormFeedback, useField, useForm } from './chunk-AG67TUZI.js';
-import './chunk-SUF7WJS6.js';
+export { ButtonGroupForm, Field, Form, FormContext, FormFeedback, useField, useForm } from './chunk-HX7733ID.js';
+import './chunk-QHAQYOBT.js';
 //# sourceMappingURL=core.js.map
 //# sourceMappingURL=core.js.map

package/dist/index.cjs

@@ -1,54 +1,54 @@
 'use strict';
 
 require('./chunk-V7JSGFCI.cjs');
-var chunkV4HMVPAB_cjs = require('./chunk-V4HMVPAB.cjs');
-var chunkWQ4HD5UD_cjs = require('./chunk-WQ4HD5UD.cjs');
+var chunkMBOEVE6D_cjs = require('./chunk-MBOEVE6D.cjs');
+var chunkPDMFWP5I_cjs = require('./chunk-PDMFWP5I.cjs');
 
 
 
 Object.defineProperty(exports, "Field", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.Field; }
+  get: function () { return chunkMBOEVE6D_cjs.Field; }
 });
 Object.defineProperty(exports, "Form", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.Form; }
+  get: function () { return chunkMBOEVE6D_cjs.Form; }
 });
 Object.defineProperty(exports, "FormContext", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.FormContext; }
+  get: function () { return chunkMBOEVE6D_cjs.FormContext; }
 });
 Object.defineProperty(exports, "FormFeedback", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.FormFeedback; }
+  get: function () { return chunkMBOEVE6D_cjs.FormFeedback; }
 });
 Object.defineProperty(exports, "useField", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.useField; }
+  get: function () { return chunkMBOEVE6D_cjs.useField; }
 });
 Object.defineProperty(exports, "useForm", {
   enumerable: true,
-  get: function () { return chunkV4HMVPAB_cjs.useForm; }
+  get: function () { return chunkMBOEVE6D_cjs.useForm; }
 });
 Object.defineProperty(exports, "FieldDescription", {
   enumerable: true,
-  get: function () { return chunkWQ4HD5UD_cjs.FieldDescription; }
+  get: function () { return chunkPDMFWP5I_cjs.FieldDescription; }
 });
 Object.defineProperty(exports, "FieldError", {
   enumerable: true,
-  get: function () { return chunkWQ4HD5UD_cjs.FieldError; }
+  get: function () { return chunkPDMFWP5I_cjs.FieldError; }
 });
 Object.defineProperty(exports, "FieldGroup", {
   enumerable: true,
-  get: function () { return chunkWQ4HD5UD_cjs.FieldGroup; }
+  get: function () { return chunkPDMFWP5I_cjs.FieldGroup; }
 });
 Object.defineProperty(exports, "FieldWrapper", {
   enumerable: true,
-  get: function () { return chunkWQ4HD5UD_cjs.Field; }
+  get: function () { return chunkPDMFWP5I_cjs.Field; }
 });
 Object.defineProperty(exports, "FormFieldLabel", {
   enumerable: true,
-  get: function () { return chunkWQ4HD5UD_cjs.FieldLabel; }
+  get: function () { return chunkPDMFWP5I_cjs.FieldLabel; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,5 +1,5 @@
 import './chunk-UBDA7CS5.js';
-export { Field, Form, FormContext, FormFeedback, useField, useForm } from './chunk-AG67TUZI.js';
-export { FieldDescription, FieldError, FieldGroup, Field as FieldWrapper, FieldLabel as FormFieldLabel } from './chunk-SUF7WJS6.js';
+export { Field, Form, FormContext, FormFeedback, useField, useForm } from './chunk-HX7733ID.js';
+export { FieldDescription, FieldError, FieldGroup, Field as FieldWrapper, FieldLabel as FormFieldLabel } from './chunk-QHAQYOBT.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/inputs.cjs

@@ -1,57 +1,57 @@
 'use strict';
 
-var chunk4K6J2DOK_cjs = require('./chunk-4K6J2DOK.cjs');
-var chunkWQ4HD5UD_cjs = require('./chunk-WQ4HD5UD.cjs');
+var chunk3VSPIJNK_cjs = require('./chunk-3VSPIJNK.cjs');
+var chunkPDMFWP5I_cjs = require('./chunk-PDMFWP5I.cjs');
 
 
 
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
-  get: function () { return chunk4K6J2DOK_cjs.Checkbox; }
+  get: function () { return chunk3VSPIJNK_cjs.Checkbox; }
 });
 Object.defineProperty(exports, "CheckboxGroup", {
   enumerable: true,
-  get: function () { return chunk4K6J2DOK_cjs.CheckboxGroup; }
+  get: function () { return chunk3VSPIJNK_cjs.CheckboxGroup; }
 });
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
-  get: function () { return chunk4K6J2DOK_cjs.DatePicker; }
+  get: function () { return chunk3VSPIJNK_cjs.DatePicker; }
 });
 Object.defineProperty(exports, "DateRangePicker", {
   enumerable: true,
-  get: function () { return chunk4K6J2DOK_cjs.DateRangePicker; }
+  get: function () { return chunk3VSPIJNK_cjs.DateRangePicker; }
 });
 Object.defineProperty(exports, "FileInput", {
   enumerable: true,
-  get: function () { return chunk4K6J2DOK_cjs.FileInput; }
+  get: function () { return chunk3VSPIJNK_cjs.FileInput; }
 });
 Object.defineProperty(exports, "MultiSelect", {
   enumerable: true,
-  get: function () { return chunk4K6J2DOK_cjs.MultiSelect; }
+  get: function () { return chunk3VSPIJNK_cjs.MultiSelect; }
 });
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
-  get: function () { return chunk4K6J2DOK_cjs.Radio; }
+  get: function () { return chunk3VSPIJNK_cjs.Radio; }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunk4K6J2DOK_cjs.Select; }
+  get: function () { return chunk3VSPIJNK_cjs.Select; }
 });
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
-  get: function () { return chunk4K6J2DOK_cjs.Switch; }
+  get: function () { return chunk3VSPIJNK_cjs.Switch; }
 });
 Object.defineProperty(exports, "TextArea", {
   enumerable: true,
-  get: function () { return chunk4K6J2DOK_cjs.TextArea; }
+  get: function () { return chunk3VSPIJNK_cjs.TextArea; }
 });
 Object.defineProperty(exports, "TimePicker", {
   enumerable: true,
-  get: function () { return chunk4K6J2DOK_cjs.TimePicker; }
+  get: function () { return chunk3VSPIJNK_cjs.TimePicker; }
 });
 Object.defineProperty(exports, "TextInput", {
   enumerable: true,
-  get: function () { return chunkWQ4HD5UD_cjs.TextInput; }
+  get: function () { return chunkPDMFWP5I_cjs.TextInput; }
 });
 //# sourceMappingURL=inputs.cjs.map
 //# sourceMappingURL=inputs.cjs.map

package/dist/inputs.d.cts

@@ -9,6 +9,7 @@ import { I as InputProps } from './types-BfZYTL89.cjs';
  * - Valid value indicator (ring-2)
  * - Form integration (onChange, onBlur)
  * - Full accessibility support
+ * - Optional start/end icon support with automatic padding
  *
  * @example
  * ```tsx
@@ -26,7 +27,7 @@ import { I as InputProps } from './types-BfZYTL89.cjs';
  *
  * @see https://opensite.ai/developers/page-speed/forms/text-input
  */
-declare function TextInput({ name, value, onChange, onBlur, placeholder, disabled, required, error, className, type, id, suppressValueRing, ...props }: InputProps<string> & {
+declare function TextInput({ name, value, onChange, onBlur, placeholder, disabled, required, error, className, type, id, suppressValueRing, iconStart, iconEnd, ...props }: InputProps<string> & {
     type?: "text" | "email" | "password" | "url" | "tel" | "search";
     /**
      * When true, suppresses the `ring-2 ring-ring` applied when a value is
@@ -34,6 +35,16 @@ declare function TextInput({ name, value, onChange, onBlur, placeholder, disable
      * ButtonGroupForm) that renders its own unified ring.
      */
     suppressValueRing?: boolean;
+    /**
+     * Optional icon rendered at the start (left) of the input.
+     * Automatically adjusts input padding when provided.
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Optional icon rendered at the end (right) of the input.
+     * Automatically adjusts input padding when provided.
+     */
+    iconEnd?: React.ReactNode;
 }): React.JSX.Element;
 declare namespace TextInput {
     var displayName: string;

package/dist/inputs.d.ts

@@ -9,6 +9,7 @@ import { I as InputProps } from './types-BfZYTL89.js';
  * - Valid value indicator (ring-2)
  * - Form integration (onChange, onBlur)
  * - Full accessibility support
+ * - Optional start/end icon support with automatic padding
  *
  * @example
  * ```tsx
@@ -26,7 +27,7 @@ import { I as InputProps } from './types-BfZYTL89.js';
  *
  * @see https://opensite.ai/developers/page-speed/forms/text-input
  */
-declare function TextInput({ name, value, onChange, onBlur, placeholder, disabled, required, error, className, type, id, suppressValueRing, ...props }: InputProps<string> & {
+declare function TextInput({ name, value, onChange, onBlur, placeholder, disabled, required, error, className, type, id, suppressValueRing, iconStart, iconEnd, ...props }: InputProps<string> & {
     type?: "text" | "email" | "password" | "url" | "tel" | "search";
     /**
      * When true, suppresses the `ring-2 ring-ring` applied when a value is
@@ -34,6 +35,16 @@ declare function TextInput({ name, value, onChange, onBlur, placeholder, disable
      * ButtonGroupForm) that renders its own unified ring.
      */
     suppressValueRing?: boolean;
+    /**
+     * Optional icon rendered at the start (left) of the input.
+     * Automatically adjusts input padding when provided.
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Optional icon rendered at the end (right) of the input.
+     * Automatically adjusts input padding when provided.
+     */
+    iconEnd?: React.ReactNode;
 }): React.JSX.Element;
 declare namespace TextInput {
     var displayName: string;

package/dist/inputs.js

@@ -1,4 +1,4 @@
-export { Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, Select, Switch, TextArea, TimePicker } from './chunk-ZH6XDBWH.js';
-export { TextInput } from './chunk-SUF7WJS6.js';
+export { Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, Select, Switch, TextArea, TimePicker } from './chunk-SF6NKDID.js';
+export { TextInput } from './chunk-QHAQYOBT.js';
 //# sourceMappingURL=inputs.js.map
 //# sourceMappingURL=inputs.js.map

package/dist/integration.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
-var chunkV4HMVPAB_cjs = require('./chunk-V4HMVPAB.cjs');
-var chunk4K6J2DOK_cjs = require('./chunk-4K6J2DOK.cjs');
-var chunkWQ4HD5UD_cjs = require('./chunk-WQ4HD5UD.cjs');
+var chunkMBOEVE6D_cjs = require('./chunk-MBOEVE6D.cjs');
+var chunk3VSPIJNK_cjs = require('./chunk-3VSPIJNK.cjs');
+var chunkPDMFWP5I_cjs = require('./chunk-PDMFWP5I.cjs');
 var React2 = require('react');
+var icon = require('@page-speed/icon');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -394,7 +395,7 @@ function generateValidationSchema(fields) {
       acc[field.name] = (value, allValues) => {
         if (field.required) {
           if (!value || typeof value === "string" && !value.trim()) {
-            const displayName = field.label || chunkWQ4HD5UD_cjs.humanizeFieldName(field.name);
+            const displayName = field.label || chunkPDMFWP5I_cjs.humanizeFieldName(field.name);
             return `${displayName} is required`;
           }
         }
@@ -566,7 +567,7 @@ function useContactForm(options) {
       window.location.assign(destination);
     }, 150);
   }, [navigate, redirectUrl]);
-  const form = chunkV4HMVPAB_cjs.useForm({
+  const form = chunkMBOEVE6D_cjs.useForm({
     initialValues: React2.useMemo(
       () => generateInitialValues(formFields),
       [formFields]
@@ -630,6 +631,28 @@ function useContactForm(options) {
     resetSubmissionState
   };
 }
+var FIELD_TYPE_ICON_MAP = {
+  email: "material-symbols/mark-email-unread-outline-rounded",
+  tel: "material-symbols/phone-iphone-outline",
+  url: "flowbite/link-solid"
+};
+function getDefaultIconStart(field) {
+  const iconName = FIELD_TYPE_ICON_MAP[field.type];
+  if (iconName) {
+    return /* @__PURE__ */ React2__namespace.createElement(icon.Icon, { name: iconName, apiKey: icon.DEFAULT_ICON_API_BASE_URL, size: 18 });
+  }
+  if (field.type === "text" && field.name === "table_server_name") {
+    return /* @__PURE__ */ React2__namespace.createElement(
+      icon.Icon,
+      {
+        name: "majesticons/user-box-line",
+        apiKey: icon.DEFAULT_ICON_API_BASE_URL,
+        size: 18
+      }
+    );
+  }
+  return void 0;
+}
 function DynamicFormField({
   field,
   className,
@@ -640,20 +663,30 @@ function DynamicFormField({
   renderLabel = true
 }) {
   const fieldId = field.name;
+  const usesChoiceCard = React2__namespace.useMemo(() => {
+    return chunkPDMFWP5I_cjs.fieldIsChoiceCard(field);
+  }, [field.type, field.options]);
+  const fieldClassName = React2__namespace.useMemo(() => {
+    if (usesChoiceCard) {
+      return "p-4 border rounded rounded-lg bg-muted/20";
+    } else {
+      return "";
+    }
+  }, [usesChoiceCard]);
   const usesGroupLegend = field.type === "radio" || field.type === "checkbox-group";
   const usesInlineCheckboxLabel = field.type === "checkbox";
   const shouldRenderFieldLabel = renderLabel && !usesGroupLegend && !usesInlineCheckboxLabel;
   return /* @__PURE__ */ React2__namespace.createElement(
-    chunkV4HMVPAB_cjs.Field,
+    chunkMBOEVE6D_cjs.Field,
     {
       name: field.name,
       label: shouldRenderFieldLabel ? field.label : void 0,
       description: shouldRenderFieldLabel ? field.description : void 0,
       required: field.required,
-      className
+      className: chunkPDMFWP5I_cjs.cn(fieldClassName, className)
     },
     ({ field: formField, meta }) => /* @__PURE__ */ React2__namespace.createElement("div", null, (field.type === "text" || field.type === "email" || field.type === "tel" || field.type === "search" || field.type === "password" || field.type === "url") && /* @__PURE__ */ React2__namespace.createElement(
-      chunkWQ4HD5UD_cjs.TextInput,
+      chunkPDMFWP5I_cjs.TextInput,
       {
         ...formField,
         id: fieldId,
@@ -661,10 +694,11 @@ function DynamicFormField({
         placeholder: field.placeholder,
         error: meta.touched && !!meta.error,
         disabled: field.disabled,
-        "aria-label": field.label
+        "aria-label": field.label,
+        iconStart: getDefaultIconStart(field)
       }
     ), field.type === "number" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkWQ4HD5UD_cjs.TextInput,
+      chunkPDMFWP5I_cjs.TextInput,
       {
         ...formField,
         id: fieldId,
@@ -675,7 +709,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "textarea" && /* @__PURE__ */ React2__namespace.createElement(
-      chunk4K6J2DOK_cjs.TextArea,
+      chunk3VSPIJNK_cjs.TextArea,
       {
         ...formField,
         id: fieldId,
@@ -686,7 +720,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "select" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunk4K6J2DOK_cjs.Select,
+      chunk3VSPIJNK_cjs.Select,
       {
         ...formField,
         id: fieldId,
@@ -697,7 +731,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "multi-select" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunk4K6J2DOK_cjs.MultiSelect,
+      chunk3VSPIJNK_cjs.MultiSelect,
       {
         ...formField,
         id: fieldId,
@@ -708,7 +742,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "radio" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunk4K6J2DOK_cjs.Radio,
+      chunk3VSPIJNK_cjs.Radio,
       {
         ...formField,
         id: fieldId,
@@ -722,7 +756,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "checkbox" && /* @__PURE__ */ React2__namespace.createElement(
-      chunk4K6J2DOK_cjs.Checkbox,
+      chunk3VSPIJNK_cjs.Checkbox,
       {
         ...formField,
         id: fieldId,
@@ -736,7 +770,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "checkbox-group" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunk4K6J2DOK_cjs.CheckboxGroup,
+      chunk3VSPIJNK_cjs.CheckboxGroup,
       {
         ...formField,
         id: fieldId,
@@ -750,7 +784,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), (field.type === "date-picker" || field.type === "date") && /* @__PURE__ */ React2__namespace.createElement(
-      chunk4K6J2DOK_cjs.DatePicker,
+      chunk3VSPIJNK_cjs.DatePicker,
       {
         ...formField,
         id: fieldId,
@@ -760,7 +794,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "date-range" && /* @__PURE__ */ React2__namespace.createElement(
-      chunk4K6J2DOK_cjs.DateRangePicker,
+      chunk3VSPIJNK_cjs.DateRangePicker,
       {
         ...formField,
         id: fieldId,
@@ -770,7 +804,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "time" && /* @__PURE__ */ React2__namespace.createElement(
-      chunk4K6J2DOK_cjs.TimePicker,
+      chunk3VSPIJNK_cjs.TimePicker,
       {
         ...formField,
         id: fieldId,
@@ -780,7 +814,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "file" && /* @__PURE__ */ React2__namespace.createElement(
-      chunk4K6J2DOK_cjs.FileInput,
+      chunk3VSPIJNK_cjs.FileInput,
       {
         ...formField,
         id: fieldId,
@@ -920,7 +954,7 @@ function FormEngine(props) {
     };
   }, [isButtonGroup, buttonGroupSetup, api]);
   return /* @__PURE__ */ React2__namespace.createElement("div", { className: styleRules?.formContainer }, /* @__PURE__ */ React2__namespace.createElement(
-    chunkV4HMVPAB_cjs.Form,
+    chunkMBOEVE6D_cjs.Form,
     {
       form,
       fields: isButtonGroup ? formFields : void 0,
@@ -940,8 +974,8 @@ function FormEngine(props) {
     !isButtonGroup && /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(
       "div",
       {
-        className: chunkWQ4HD5UD_cjs.cn(
-          "grid grid-cols-12 gap-6 md:gap-10",
+        className: chunkPDMFWP5I_cjs.cn(
+          "grid grid-cols-12 space-y-8 gap-x-6 md:gap-x-8",
           styleRules?.fieldsContainer
         )
       },
@@ -949,7 +983,7 @@ function FormEngine(props) {
         "div",
         {
           key: field.name,
-          className: chunkWQ4HD5UD_cjs.cn(
+          className: chunkPDMFWP5I_cjs.cn(
             getColumnSpanClass(field.columnSpan ?? 12),
             "min-w-0"
           )
@@ -967,7 +1001,7 @@ function FormEngine(props) {
         )
       ))
     ), /* @__PURE__ */ React2__namespace.createElement(
-      chunkWQ4HD5UD_cjs.Button,
+      chunkPDMFWP5I_cjs.Button,
       {
         type: "submit",
         variant: submitButtonSetup?.submitVariant ?? DEFAULT_BUTTON_VARIANT,