@hyddenlabs/hydn-ui 0.3.0-alpha.164 → 0.3.0-alpha.166

package/dist/index.d.cts

@@ -53,6 +53,14 @@ declare namespace ColorModeToggle {
 }
 
 type StatusColorProp = 'default' | 'primary' | 'success' | 'warning' | 'error';
+declare const alignments: readonly ["left", "center", "right"];
+type Alignment = (typeof alignments)[number];
+/**
+ * HTML autocomplete attribute values for form inputs
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+ */
+declare const autocompleteOptions: readonly ["on", "off", "address-line1", "address-line2", "address-line3", "address-level1", "address-level2", "address-level3", "address-level4", "street-address", "country", "country-name", "postal-code", "name", "additional-name", "family-name", "given-name", "honoric-prefix", "honoric-suffix", "nickname", "organization-title", "username", "new-password", "current-password", "bday", "bday-day", "bday-month", "bday-year", "sex", "one-time-code", "organization", "cc-name", "cc-given-name", "cc-additional-name", "cc-family-name", "cc-number", "cc-exp", "cc-exp-month", "cc-exp-year", "cc-csc", "cc-type", "transaction-currency", "transaction-amount", "language", "url", "email", "photo", "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-local-prefix", "tel-local-suffix", "tel-extension", "impp"];
+type AutocompleteOption = (typeof autocompleteOptions)[number];
 
 /**
  * Unified Size System for hydn-ui
@@ -257,6 +265,7 @@ declare const inputWidthSizes: {
     readonly '1/2': "w-1/2";
     readonly '3/4': "w-3/4";
     readonly full: "w-full";
+    readonly auto: "w-auto";
 };
 type InputWidth = keyof typeof inputWidthSizes;
 declare const badgeSizes: {
@@ -1811,10 +1820,10 @@ type ButtonProps = {
     rounded?: 'default' | 'pill' | 'square' | 'circle';
     /** Shows loading spinner and disables interaction */
     loading?: boolean;
-    /** Expands button to fill container width */
-    fullWidth?: boolean;
-    /** Adds extra horizontal padding for emphasis */
-    wide?: boolean;
+    /** Width of the button */
+    width?: InputWidth;
+    /** Aligns the button within its container: left, center, or right */
+    align?: Alignment;
     /** Applies active/pressed state styling */
     active?: boolean;
 };
@@ -3350,16 +3359,8 @@ type FormProps = {
     id?: string;
     /** Accessible label for screen readers */
     ariaLabel?: string;
-    /** Layout direction for form fields */
-    direction?: 'horizontal' | 'vertical';
-    /** Gap spacing between form elements */
-    spacing?: FormSpacing | GapSize;
-    /** Cross-axis alignment */
-    align?: 'start' | 'center' | 'end' | 'stretch';
-    /** Main-axis alignment */
-    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
-    /** Makes the form take full width */
-    fullWidth?: boolean;
+    /** Spacing between form elements */
+    spacing?: FormSpacing;
 };
 /**
  * Form - Semantic form wrapper with layout support
@@ -3377,7 +3378,7 @@ type FormProps = {
  * </Form>
  * ```
  */
-declare function Form({ children, onSubmit, method, action, noValidate, id, ariaLabel, direction, spacing, align, justify, fullWidth }: Readonly<FormProps>): react_jsx_runtime.JSX.Element;
+declare function Form({ children, onSubmit, method, action, noValidate, id, ariaLabel, spacing }: Readonly<FormProps>): react_jsx_runtime.JSX.Element;
 declare namespace Form {
     var displayName: string;
 }
@@ -3399,6 +3400,12 @@ type FormFieldProps = {
     disabled?: boolean;
     /** HTML id for the input - auto-generated if not provided */
     id?: string;
+    /** Width of the form field - uses semantic sizing */
+    width?: InputWidth;
+    /** Aligns the form field - left, center, or right */
+    align?: Alignment;
+    /** Reserve space for helper/error text to prevent layout shift */
+    reserveMessageSpace?: boolean;
 };
 /**
  * FormField - Simple wrapper for form inputs with label and error display
@@ -3417,7 +3424,7 @@ type FormFieldProps = {
  * </FormField>
  * ```
  */
-declare function FormField({ children, label, error, helperText, required, spacing, disabled, id: providedId }: Readonly<FormFieldProps>): react_jsx_runtime.JSX.Element;
+declare function FormField({ children, label, error, helperText, required, spacing, disabled, id: providedId, width, align, reserveMessageSpace }: Readonly<FormFieldProps>): react_jsx_runtime.JSX.Element;
 declare namespace FormField {
     var displayName: string;
 }
@@ -3456,7 +3463,7 @@ type InputProps = {
     /** Visual validation state affecting border color and styling */
     validationState?: ValidationState$2;
     /** HTML autocomplete attribute */
-    autoComplete?: string;
+    autoComplete?: AutocompleteOption;
     /** Maximum length of input value */
     maxLength?: number;
     /** Minimum length of input value */
@@ -3497,6 +3504,10 @@ type FormInputProps = Omit<InputProps, 'validationState'> & {
     pattern?: string;
     /** Custom validation message */
     title?: string;
+    /** Input alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Reserve space for error message to prevent layout shift */
+    reserveMessageSpace?: boolean;
 };
 /**
  * FormInput - Input wrapped with FormField for label and error display
@@ -3531,7 +3542,7 @@ type FormInputProps = Omit<InputProps, 'validationState'> & {
  * <FormInput label="Age" type="number" min={18} max={120} required />
  * ```
  */
-declare function FormInput({ label, helperText, spacing, error, required, disabled, id, pattern, title, ...inputProps }: Readonly<FormInputProps>): react_jsx_runtime.JSX.Element;
+declare function FormInput({ label, helperText, spacing, error, required, disabled, id, pattern, title, width, align, reserveMessageSpace, ...inputProps }: Readonly<FormInputProps>): react_jsx_runtime.JSX.Element;
 declare namespace FormInput {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -53,6 +53,14 @@ declare namespace ColorModeToggle {
 }
 
 type StatusColorProp = 'default' | 'primary' | 'success' | 'warning' | 'error';
+declare const alignments: readonly ["left", "center", "right"];
+type Alignment = (typeof alignments)[number];
+/**
+ * HTML autocomplete attribute values for form inputs
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+ */
+declare const autocompleteOptions: readonly ["on", "off", "address-line1", "address-line2", "address-line3", "address-level1", "address-level2", "address-level3", "address-level4", "street-address", "country", "country-name", "postal-code", "name", "additional-name", "family-name", "given-name", "honoric-prefix", "honoric-suffix", "nickname", "organization-title", "username", "new-password", "current-password", "bday", "bday-day", "bday-month", "bday-year", "sex", "one-time-code", "organization", "cc-name", "cc-given-name", "cc-additional-name", "cc-family-name", "cc-number", "cc-exp", "cc-exp-month", "cc-exp-year", "cc-csc", "cc-type", "transaction-currency", "transaction-amount", "language", "url", "email", "photo", "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-local-prefix", "tel-local-suffix", "tel-extension", "impp"];
+type AutocompleteOption = (typeof autocompleteOptions)[number];
 
 /**
  * Unified Size System for hydn-ui
@@ -257,6 +265,7 @@ declare const inputWidthSizes: {
     readonly '1/2': "w-1/2";
     readonly '3/4': "w-3/4";
     readonly full: "w-full";
+    readonly auto: "w-auto";
 };
 type InputWidth = keyof typeof inputWidthSizes;
 declare const badgeSizes: {
@@ -1811,10 +1820,10 @@ type ButtonProps = {
     rounded?: 'default' | 'pill' | 'square' | 'circle';
     /** Shows loading spinner and disables interaction */
     loading?: boolean;
-    /** Expands button to fill container width */
-    fullWidth?: boolean;
-    /** Adds extra horizontal padding for emphasis */
-    wide?: boolean;
+    /** Width of the button */
+    width?: InputWidth;
+    /** Aligns the button within its container: left, center, or right */
+    align?: Alignment;
     /** Applies active/pressed state styling */
     active?: boolean;
 };
@@ -3350,16 +3359,8 @@ type FormProps = {
     id?: string;
     /** Accessible label for screen readers */
     ariaLabel?: string;
-    /** Layout direction for form fields */
-    direction?: 'horizontal' | 'vertical';
-    /** Gap spacing between form elements */
-    spacing?: FormSpacing | GapSize;
-    /** Cross-axis alignment */
-    align?: 'start' | 'center' | 'end' | 'stretch';
-    /** Main-axis alignment */
-    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
-    /** Makes the form take full width */
-    fullWidth?: boolean;
+    /** Spacing between form elements */
+    spacing?: FormSpacing;
 };
 /**
  * Form - Semantic form wrapper with layout support
@@ -3377,7 +3378,7 @@ type FormProps = {
  * </Form>
  * ```
  */
-declare function Form({ children, onSubmit, method, action, noValidate, id, ariaLabel, direction, spacing, align, justify, fullWidth }: Readonly<FormProps>): react_jsx_runtime.JSX.Element;
+declare function Form({ children, onSubmit, method, action, noValidate, id, ariaLabel, spacing }: Readonly<FormProps>): react_jsx_runtime.JSX.Element;
 declare namespace Form {
     var displayName: string;
 }
@@ -3399,6 +3400,12 @@ type FormFieldProps = {
     disabled?: boolean;
     /** HTML id for the input - auto-generated if not provided */
     id?: string;
+    /** Width of the form field - uses semantic sizing */
+    width?: InputWidth;
+    /** Aligns the form field - left, center, or right */
+    align?: Alignment;
+    /** Reserve space for helper/error text to prevent layout shift */
+    reserveMessageSpace?: boolean;
 };
 /**
  * FormField - Simple wrapper for form inputs with label and error display
@@ -3417,7 +3424,7 @@ type FormFieldProps = {
  * </FormField>
  * ```
  */
-declare function FormField({ children, label, error, helperText, required, spacing, disabled, id: providedId }: Readonly<FormFieldProps>): react_jsx_runtime.JSX.Element;
+declare function FormField({ children, label, error, helperText, required, spacing, disabled, id: providedId, width, align, reserveMessageSpace }: Readonly<FormFieldProps>): react_jsx_runtime.JSX.Element;
 declare namespace FormField {
     var displayName: string;
 }
@@ -3456,7 +3463,7 @@ type InputProps = {
     /** Visual validation state affecting border color and styling */
     validationState?: ValidationState$2;
     /** HTML autocomplete attribute */
-    autoComplete?: string;
+    autoComplete?: AutocompleteOption;
     /** Maximum length of input value */
     maxLength?: number;
     /** Minimum length of input value */
@@ -3497,6 +3504,10 @@ type FormInputProps = Omit<InputProps, 'validationState'> & {
     pattern?: string;
     /** Custom validation message */
     title?: string;
+    /** Input alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Reserve space for error message to prevent layout shift */
+    reserveMessageSpace?: boolean;
 };
 /**
  * FormInput - Input wrapped with FormField for label and error display
@@ -3531,7 +3542,7 @@ type FormInputProps = Omit<InputProps, 'validationState'> & {
  * <FormInput label="Age" type="number" min={18} max={120} required />
  * ```
  */
-declare function FormInput({ label, helperText, spacing, error, required, disabled, id, pattern, title, ...inputProps }: Readonly<FormInputProps>): react_jsx_runtime.JSX.Element;
+declare function FormInput({ label, helperText, spacing, error, required, disabled, id, pattern, title, width, align, reserveMessageSpace, ...inputProps }: Readonly<FormInputProps>): react_jsx_runtime.JSX.Element;
 declare namespace FormInput {
     var displayName: string;
 }

package/dist/index.js

@@ -237,6 +237,11 @@ var colorVariants = {
     error: "bg-destructive/20 text-foreground border-destructive/50 backdrop-blur-sm"
   }
 };
+var inputAlignClasses = {
+  left: "mr-auto",
+  center: "mx-auto",
+  right: "ml-auto"
+};
 
 // src/theme/size-tokens.ts
 var visualSizes = {
@@ -385,8 +390,10 @@ var inputWidthSizes = {
   // 50% of container
   "3/4": "w-3/4",
   // 75% of container
-  full: "w-full"
+  full: "w-full",
   // 100% of container
+  auto: "w-auto"
+  // width based on content
 };
 var badgeSizes = {
   sm: {
@@ -980,7 +987,7 @@ function Container({
   minHeight = "none",
   maxHeight = "none"
 }) {
-  const alignClasses3 = {
+  const alignClasses2 = {
     start: "mr-auto",
     center: "mx-auto",
     end: "ml-auto"
@@ -1000,7 +1007,7 @@ function Container({
   const minHeightClass = minHeight !== "none" ? containerMinHeights[minHeight] : "";
   const maxHeightClass = maxHeight !== "none" ? containerMaxHeights[maxHeight] : "";
   const dimensionClasses = [widthClass, heightClass, minWidthClass, minHeightClass, maxWidthClass, maxHeightClass].join(" ").trim();
-  const alignClass = mX === "none" || mX === "auto" ? alignClasses3[align] : "";
+  const alignClass = mX === "none" || mX === "auto" ? alignClasses2[align] : "";
   const alignItemsClass = alignItems ? alignItemsClasses[alignItems] : "";
   const inlineStyles = {};
   if (minWidth && !containerMinWidths[minWidth]) {
@@ -1154,7 +1161,7 @@ function Text({
     bold: "font-bold",
     extrabold: "font-extrabold"
   };
-  const alignClasses3 = {
+  const alignClasses2 = {
     left: "text-left",
     center: "text-center",
     right: "text-right",
@@ -1232,7 +1239,7 @@ function Text({
     sizeClasses[finalSize],
     weightClasses[weight],
     margin,
-    align && alignClasses3[align],
+    align && alignClasses2[align],
     leading && leadingClasses[leading],
     tracking && trackingClasses[tracking],
     transform && transformClasses[transform],
@@ -1308,13 +1315,13 @@ function Stack({
   margin = "none"
 }) {
   const spacingClasses = gapSizes[spacing];
-  const alignClasses3 = {
+  const alignClasses2 = {
     start: "items-start",
     center: "items-center",
     end: "items-end",
     stretch: "items-stretch"
   };
-  const justifyClasses3 = {
+  const justifyClasses2 = {
     start: "justify-start",
     center: "justify-center",
     end: "justify-end",
@@ -1322,7 +1329,7 @@ function Stack({
     around: "justify-around"
   };
   const directionClass = direction === "horizontal" ? "flex-row" : "flex-col";
-  const justifyClass = justify ? justifyClasses3[justify] : "";
+  const justifyClass = justify ? justifyClasses2[justify] : "";
   const paddingClass = padding ? cardPadding[padding] : "";
   const marginClass = margin ? cardMargin[margin] : "";
   const minWidthClass = minWidth !== "none" ? containerMinWidths[minWidth] : "";
@@ -1333,7 +1340,7 @@ function Stack({
     "div",
     {
       "data-component": "Stack",
-      className: `flex flex-wrap ${directionClass} ${spacingClasses} ${alignClasses3[align]} ${justifyClass} ${paddingClass} ${minWidthClass} ${maxWidthClass} ${widthClass} ${heightClass} ${marginClass} ${className}`,
+      className: `flex flex-wrap ${directionClass} ${spacingClasses} ${alignClasses2[align]} ${justifyClass} ${paddingClass} ${minWidthClass} ${maxWidthClass} ${widthClass} ${heightClass} ${marginClass} ${className}`,
       children
     }
   );
@@ -1735,7 +1742,7 @@ function CardFooter({
     md: "p-6",
     lg: "p-8"
   };
-  const alignClasses3 = {
+  const alignClasses2 = {
     start: "justify-start",
     center: "justify-center",
     end: "justify-end"
@@ -1748,7 +1755,7 @@ function CardFooter({
         flex items-center gap-1
         ${paddingClasses[padding]}
         ${bordered ? "border-t border-border" : ""}
-        ${alignClasses3[align]}
+        ${alignClasses2[align]}
         ${className}
       `.trim().replace(/\s+/g, " "),
       children
@@ -1758,7 +1765,7 @@ function CardFooter({
 CardFooter.displayName = "CardFooter";
 var card_footer_default = CardFooter;
 function CardActions({ children, className = "", align = "end", direction = "row" }) {
-  const alignClasses3 = {
+  const alignClasses2 = {
     start: "justify-start",
     center: "justify-center",
     end: "justify-end",
@@ -1774,7 +1781,7 @@ function CardActions({ children, className = "", align = "end", direction = "row
       className: `
         flex gap-2 px-6 pb-6 pt-2
         ${directionClasses[direction]}
-        ${alignClasses3[align]}
+        ${alignClasses2[align]}
         ${className}
       `.trim().replace(/\s+/g, " "),
       children
@@ -2240,8 +2247,8 @@ var Button = React4.forwardRef(
     size = "md",
     rounded = "default",
     loading = false,
-    fullWidth = false,
-    wide = false,
+    width = "auto",
+    align,
     active = false
   }, ref) => {
     const isIconOnly = icon && !children;
@@ -2284,7 +2291,8 @@ var Button = React4.forwardRef(
       )
     ] }) : icon;
     const styleClasses = getStyleClasses();
-    const widthClasses = fullWidth ? "w-full" : wide ? "px-8" : "";
+    const widthClasses = inputWidthSizes[width];
+    const alignmentClass = align ? inputAlignClasses[align] : "";
     const activeClasses = active ? "active:scale-95" : "";
     return /* @__PURE__ */ jsxs(
       "button",
@@ -2294,7 +2302,7 @@ var Button = React4.forwardRef(
         onClick,
         "aria-label": ariaLabel,
         disabled: disabled || loading,
-        className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
+        className: `inline-flex items-center justify-center ${alignmentClass} ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
         children: [
           displayIcon && iconPosition === "left" && /* @__PURE__ */ jsx("span", { className: `inline-flex ${children ? "mr-2" : ""}`, children: displayIcon }),
           children,
@@ -2777,7 +2785,7 @@ function Nav({
     lg: "gap-7 sm:gap-6",
     xl: "gap-10 sm:gap-8"
   };
-  const alignClasses3 = {
+  const alignClasses2 = {
     start: "items-start",
     center: "items-center",
     end: "items-end",
@@ -2785,7 +2793,7 @@ function Nav({
   };
   const directionClass = direction === "horizontal" ? "flex-row" : "flex-col";
   const spacingClass = spacingClasses[spacing];
-  const alignClass = alignClasses3[align];
+  const alignClass = alignClasses2[align];
   return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: `flex ${directionClass} ${spacingClass} ${alignClass} ${className}`, children });
 }
 Nav.displayName = "Nav";
@@ -3474,20 +3482,20 @@ function TableHeadCell({
   scope = "col",
   ...props
 }) {
-  const alignClasses3 = {
+  const alignClasses2 = {
     left: "text-left",
     center: "text-center",
     right: "text-right"
   };
-  return /* @__PURE__ */ jsx("th", { scope, className: `px-6 py-3 font-medium ${alignClasses3[align]} ${className}`, ...props, children });
+  return /* @__PURE__ */ jsx("th", { scope, className: `px-6 py-3 font-medium ${alignClasses2[align]} ${className}`, ...props, children });
 }
 function TableCell({ children, className = "", align = "left", ...props }) {
-  const alignClasses3 = {
+  const alignClasses2 = {
     left: "text-left",
     center: "text-center",
     right: "text-right"
   };
-  return /* @__PURE__ */ jsx("td", { className: `px-6 py-4 whitespace-nowrap ${alignClasses3[align]} ${className}`, ...props, children });
+  return /* @__PURE__ */ jsx("td", { className: `px-6 py-4 whitespace-nowrap ${alignClasses2[align]} ${className}`, ...props, children });
 }
 var table_default = Table;
 function Checkbox({
@@ -4817,19 +4825,6 @@ function Fieldset({
 }
 Fieldset.displayName = "Fieldset";
 var fieldset_default = Fieldset;
-var alignClasses2 = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch"
-};
-var justifyClasses2 = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around"
-};
 function Form({
   children,
   onSubmit,
@@ -4838,11 +4833,7 @@ function Form({
   noValidate = false,
   id,
   ariaLabel,
-  direction = "vertical",
-  spacing = "md",
-  align = "stretch",
-  justify,
-  fullWidth = true
+  spacing = "md"
 }) {
   const handleSubmit = (e) => {
     if (onSubmit) {
@@ -4850,17 +4841,6 @@ function Form({
       onSubmit(e);
     }
   };
-  let spacingClass;
-  if (spacing in formSpacing) {
-    spacingClass = formSpacing[spacing];
-  } else if (spacing in gapSizes) {
-    spacingClass = gapSizes[spacing];
-  } else {
-    spacingClass = formSpacing["md"];
-  }
-  const directionClass = direction === "horizontal" ? "flex-row flex-wrap" : "flex-col";
-  const justifyClass = justify ? justifyClasses2[justify] : "";
-  const widthClass = fullWidth ? "w-full" : "";
   return /* @__PURE__ */ jsx(
     "form",
     {
@@ -4870,7 +4850,7 @@ function Form({
       noValidate,
       id,
       "aria-label": ariaLabel,
-      className: `flex ${directionClass} ${spacingClass} ${alignClasses2[align]} ${justifyClass} ${widthClass}`.trim(),
+      className: `flex flex-col ${formSpacing[spacing]}`,
       children
     }
   );
@@ -4885,7 +4865,10 @@ function FormField({
   required = false,
   spacing = "sm",
   disabled = false,
-  id: providedId
+  id: providedId,
+  width = "full",
+  align = "center",
+  reserveMessageSpace = false
 }) {
   const autoId = useId();
   const inputId = providedId ?? autoId;
@@ -4900,18 +4883,22 @@ function FormField({
       ...hasMessage ? { "aria-describedby": `${inputId}-message` } : {}
     }
   ) : children;
-  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${formSpacing[spacing]}`, children: [
+  const widthClass = inputWidthSizes[width];
+  const alignmentClass = inputAlignClasses[align];
+  const shouldReserveSpace = reserveMessageSpace && !helperText;
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${widthClass} ${alignmentClass} ${formSpacing[spacing]}`, children: [
     label && /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "text-sm font-semibold text-foreground", children: [
       label,
       required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
     ] }),
     enhancedChild,
-    (error || helperText) && /* @__PURE__ */ jsx(
+    (helperText || error || shouldReserveSpace) && /* @__PURE__ */ jsx(
       "p",
       {
         id: `${inputId}-message`,
         className: `text-sm ${error ? validationTextClasses.error : validationTextClasses.default}`,
-        children: error || helperText
+        "aria-live": "polite",
+        children: error || helperText || "\xA0"
       }
     )
   ] });
@@ -4984,7 +4971,9 @@ function FormInput({
   id,
   pattern,
   title,
-  // Input props
+  width,
+  align = "center",
+  reserveMessageSpace = false,
   ...inputProps
 }) {
   return /* @__PURE__ */ jsx(
@@ -4997,6 +4986,9 @@ function FormInput({
       required,
       disabled,
       id,
+      width,
+      align,
+      reserveMessageSpace,
       children: /* @__PURE__ */ jsx(input_default, { ...inputProps, required, disabled, id, pattern, title })
     }
   );