@invana/forms 0.0.30 → 0.0.32

package/dist/index.js

@@ -1,6 +1,6 @@
-import { cn, Accordion, AccordionItem, AccordionTrigger, Badge, AccordionContent, Card, CardContent, Separator, Button } from '@invana/ui';
 import * as React2 from 'react';
 import { useMemo } from 'react';
+import { cn, Eyebrow, Accordion, AccordionItem, AccordionTrigger, Badge, AccordionContent, Button, Card, CardContent, Separator } from '@invana/ui';
 import { Slot } from '@radix-ui/react-slot';
 import { useFormContext, Controller, FormProvider } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -67,7 +67,7 @@ var FormLabel = React2.forwardRef(({ className, ...props }, ref) => {
     Label,
     {
       ref,
-      className: cn(error && "text-destructive", className),
+      className: cn(className, error && "text-destructive"),
       htmlFor: formItemId,
       ...props
     }
@@ -126,8 +126,9 @@ var Input = React2.forwardRef(
       {
         type,
         className: cn(
-          inputSize === "sm" ? "h-[26px] px-2 py-0" : "h-10 px-3 py-2",
-          "flex w-full rounded-control border border-input bg-background text-base ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "py-0",
+          inputSize === "sm" ? "h-control-sm px-2" : inputSize === "lg" ? "h-control-lg px-3" : "h-control-md px-2.5",
+          "flex w-full rounded-control border border-input bg-background text-base ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
           className
         ),
         ref,
@@ -137,6 +138,176 @@ var Input = React2.forwardRef(
   }
 );
 Input.displayName = "Input";
+var Textarea = React2.forwardRef(({ className, inputSize = "default", ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: cn(
+        inputSize === "sm" ? "min-h-[52px] px-2 py-1" : "min-h-[80px] px-3 py-2",
+        "flex w-full rounded-control border border-input bg-background text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+var InputGroupControl = React2.createContext({});
+function InputGroup({
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...props
+}) {
+  const wiring = React2.useMemo(
+    () => ({ id, "aria-describedby": describedBy, "aria-invalid": invalid }),
+    [id, describedBy, invalid]
+  );
+  return /* @__PURE__ */ jsx(InputGroupControl.Provider, { value: wiring, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-control border outline-none transition-[color,box-shadow]",
+        "h-control-md has-[>textarea]:h-auto",
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+var inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-control [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = cva(
+  "flex items-center gap-2 shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-control-xs gap-1 rounded-control px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-control-sm gap-1.5 rounded-control px-2.5 has-[>svg]:px-2.5",
+        "icon-xs": "size-control-xs rounded-control p-0 has-[>svg]:p-0",
+        "icon-sm": "size-control-sm p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-muted-foreground flex items-center gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  const wiring = React2.useContext(InputGroupControl);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...wiring,
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  const wiring = React2.useContext(InputGroupControl);
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      ...wiring,
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var PasswordInput = React2.forwardRef(
   ({ className, visible, onVisibleChange, disabled, ...props }, ref) => {
     const [internalVisible, setInternalVisible] = React2.useState(false);
@@ -175,21 +346,6 @@ var PasswordInput = React2.forwardRef(
   }
 );
 PasswordInput.displayName = "PasswordInput";
-var Textarea = React2.forwardRef(({ className, inputSize = "default", ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      className: cn(
-        inputSize === "sm" ? "min-h-[52px] px-2 py-1" : "min-h-[80px] px-3 py-2",
-        "flex w-full rounded-control border border-input bg-background text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ref,
-      ...props
-    }
-  );
-});
-Textarea.displayName = "Textarea";
 var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
@@ -263,8 +419,9 @@ var SelectTrigger = React2.forwardRef(({ className, children, triggerSize = "def
   {
     ref,
     className: cn(
-      triggerSize === "sm" ? "h-[26px] px-2 py-0" : "h-9 px-3 py-2",
-      "flex w-full items-center justify-between whitespace-nowrap rounded-control border border-input bg-transparent  shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "py-0",
+      triggerSize === "sm" ? "h-control-sm px-2" : triggerSize === "lg" ? "h-control-lg px-3" : "h-control-md px-2.5",
+      "flex w-full items-center justify-between whitespace-nowrap rounded-control border border-input bg-transparent  shadow-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -306,7 +463,7 @@ var SelectContent = React2.forwardRef(({ className, children, position = "popper
   {
     ref,
     className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-surface border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -376,12 +533,15 @@ var ColorSwatches = ({
 }) => {
   const [customColor, setCustomColor] = React2.useState(value || defaultValue);
   const [isCustom, setIsCustom] = React2.useState(false);
-  React2.useEffect(() => {
-    if (!value) return;
+  const [seen, setSeen] = React2.useState({
+    presetColors
+  });
+  if (value && (value !== seen.value || presetColors !== seen.presetColors)) {
+    setSeen({ value, presetColors });
     const isPreset = presetColors.some((c) => c.value === value);
     setIsCustom(!isPreset);
     if (!isPreset) setCustomColor(value);
-  }, [value, presetColors]);
+  }
   const select = (newColor, custom = false) => {
     setIsCustom(custom);
     if (custom) setCustomColor(newColor);
@@ -461,9 +621,11 @@ var SliderNumber = ({
   className
 }) => {
   const [local, setLocal] = React2.useState(value);
-  React2.useEffect(() => {
+  const [seen, setSeen] = React2.useState(value);
+  if (value !== seen) {
+    setSeen(value);
     setLocal(value);
-  }, [value]);
+  }
   const set = (n) => {
     setLocal(n);
     onChange?.(n);
@@ -496,7 +658,7 @@ var SliderNumber = ({
 };
 var IconInput = ({ value, onChange }) => {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-control border bg-muted", children: value ? value.slice(0, 2) : "\u2013" }),
+    /* @__PURE__ */ jsx("div", { className: "flex size-control-md shrink-0 items-center justify-center rounded-control border bg-muted", children: value ? value.slice(0, 2) : "\u2013" }),
     /* @__PURE__ */ jsx(
       Input,
       {
@@ -504,17 +666,21 @@ var IconInput = ({ value, onChange }) => {
         value: value ?? "",
         onChange: (e) => onChange?.(e.target.value),
         placeholder: "icon name",
-        className: "h-8"
+        className: "h-control-md"
       }
     )
   ] });
 };
 var SIZE = {
+  // The dense tier — an ask in a conversation, an inspector. Controls are the
+  // scale's `sm` (26px), the text stays at the 13px floor; the field label is
+  // muted and regular so the values, not the labels, carry the weight.
   xs: {
-    input: "h-9",
-    select: "h-9",
+    input: "h-control-sm py-0",
+    select: "h-control-sm py-0",
     textarea: "",
     label: "text-base",
+    fieldLabel: "font-normal text-muted-foreground",
     desc: "text-base",
     gap: "gap-x-3 gap-y-2.5",
     section: "space-y-3",
@@ -527,10 +693,11 @@ var SIZE = {
     radio: "h-4 w-4"
   },
   sm: {
-    input: "h-9",
-    select: "h-9",
+    input: "h-control-md",
+    select: "h-control-md",
     textarea: "",
     label: "text-base",
+    fieldLabel: "",
     desc: "text-base",
     gap: "gap-x-3 gap-y-2",
     section: "space-y-3",
@@ -543,10 +710,11 @@ var SIZE = {
     radio: "h-4 w-4"
   },
   md: {
-    input: "",
-    select: "",
+    input: "h-control-lg px-3",
+    select: "h-control-lg px-3",
     textarea: "",
     label: "text-base",
+    fieldLabel: "",
     desc: "text-base",
     gap: "gap-4",
     section: "space-y-4",
@@ -561,7 +729,9 @@ var SIZE = {
 };
 function itemClasses(labelPosition, size, className) {
   return cn(
-    labelPosition === "side" && cn("grid grid-cols-3 items-center", SIZE[size].sideGap),
+    // `space-y-0` undoes FormItem's own stacking, whose margin would push the
+    // control below its label in a row.
+    labelPosition === "side" && cn("grid grid-cols-3 items-center space-y-0", SIZE[size].sideGap),
     labelPosition === "top" && SIZE[size].stack,
     className
   );
@@ -586,17 +756,30 @@ function FieldLabel({
   className
 }) {
   if (!label && !badge) return null;
-  return /* @__PURE__ */ jsxs(FormLabel, { className: cn(SIZE[size].label, className), children: [
+  return /* @__PURE__ */ jsxs(FormLabel, { className: cn(SIZE[size].label, SIZE[size].fieldLabel, className), children: [
     label,
     badge && /* @__PURE__ */ jsx(StatusPill, { badge })
   ] });
 }
+var AffixedInput = React2.forwardRef(({ unit, aside, className, ...props }, ref) => {
+  if (!unit && !aside) return /* @__PURE__ */ jsx(Input, { ref, className, ...props });
+  return /* @__PURE__ */ jsxs(InputGroup, { className: cn("bg-background dark:bg-background", className), children: [
+    /* @__PURE__ */ jsx(InputGroupInput, { ref, className: "h-full", ...props }),
+    /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-end", className: "font-mono font-normal", children: [
+      unit && /* @__PURE__ */ jsx("span", { children: unit }),
+      aside && /* @__PURE__ */ jsx("span", { children: aside })
+    ] })
+  ] });
+});
+AffixedInput.displayName = "AffixedInput";
 var InputField = ({
   label,
   description,
   placeholder,
   value,
   onChange,
+  unit,
+  aside,
   labelPosition = "side",
   size = "sm",
   labelClassName,
@@ -606,9 +789,11 @@ var InputField = ({
   /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
     /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
-      Input,
+      AffixedInput,
       {
         className: SIZE[size].input,
+        unit,
+        aside,
         placeholder,
         value: value ?? "",
         onChange: (e) => onChange?.(e.target.value)
@@ -893,6 +1078,8 @@ var NumberField = ({
   min,
   max,
   step,
+  unit,
+  aside,
   labelPosition = "side",
   size = "sm",
   labelClassName,
@@ -901,7 +1088,7 @@ var NumberField = ({
 }) => /* @__PURE__ */ jsxs(FormItem, { className: itemClasses(labelPosition, size, className), children: [
   /* @__PURE__ */ jsx(FieldLabel, { label, badge, size, className: labelClassName }),
   /* @__PURE__ */ jsxs("div", { className: inputWrapper(labelPosition, size), children: [
-    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(FormControl, { children: min != null && max != null ? /* @__PURE__ */ jsx(
       SliderNumber,
       {
         value: typeof value === "number" ? value : 0,
@@ -910,6 +1097,19 @@ var NumberField = ({
         max,
         step
       }
+    ) : /* @__PURE__ */ jsx(
+      AffixedInput,
+      {
+        type: "number",
+        className: SIZE[size].input,
+        unit,
+        aside,
+        min,
+        max,
+        step,
+        value: typeof value === "number" ? value : "",
+        onChange: (e) => onChange?.(e.target.value === "" ? void 0 : Number(e.target.value))
+      }
     ) }),
     description && /* @__PURE__ */ jsx(FormDescription, { className: SIZE[size].desc, children: description }),
     /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
@@ -933,18 +1133,6 @@ var IconField = ({
     /* @__PURE__ */ jsx(FormMessage, { className: SIZE[size].desc })
   ] })
 ] });
-var Field = {
-  Input: InputField,
-  Password: PasswordField,
-  Textarea: TextareaField,
-  Boolean: BooleanField,
-  Radio: RadioField,
-  CheckboxGroup: CheckboxGroupField,
-  Color: ColorField,
-  Number: NumberField,
-  Select: SelectField,
-  Icon: IconField
-};
 function humanize(name) {
   return name.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase()).trim();
 }
@@ -955,6 +1143,7 @@ function renderField(field, parentName, control, labelPosition, size) {
       control,
       name: `${parentName}.${field.name}`,
       defaultValue: field.defaultValue,
+      rules: field.rules,
       render: ({ field: rhf }) => {
         const common = {
           label: field.label ?? humanize(field.name),
@@ -971,6 +1160,8 @@ function renderField(field, parentName, control, labelPosition, size) {
           boxed: field.boxed,
           labelClassName: field.labelClassName,
           badge: field.badge,
+          unit: field.unit,
+          aside: field.aside,
           labelPosition,
           size,
           value: rhf.value,
@@ -1022,8 +1213,21 @@ function renderField(field, parentName, control, labelPosition, size) {
     field.name
   );
 }
-function renderGrid(fields, parentName, control, labelPosition, size, columns, key) {
+function renderGrid(fields, parentName, control, labelPosition, size, columns, key, fit = "viewport") {
   const customCols = columns !== 2;
+  if (fit === "container") {
+    return /* @__PURE__ */ jsx("div", { className: "@container", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-1",
+          SIZE[size].gap,
+          columns > 1 && "@min-[280px]:grid-cols-2 @min-[280px]:[&>*:last-child:nth-child(odd)]:col-span-2"
+        ),
+        children: fields.map((f) => /* @__PURE__ */ jsx("div", { className: f.className, children: renderField(f, parentName, control, labelPosition, size) }, f.name))
+      }
+    ) }, key);
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1052,9 +1256,9 @@ function renderGrid(fields, parentName, control, labelPosition, size, columns, k
     key
   );
 }
-function renderRows(fields, rowConfig, parentName, control, labelPosition, size, columns) {
+function renderRows(fields, rowConfig, parentName, control, labelPosition, size, columns, fit = "viewport") {
   if (!rowConfig || rowConfig.length === 0) {
-    return renderGrid(fields, parentName, control, labelPosition, size, columns);
+    return renderGrid(fields, parentName, control, labelPosition, size, columns, void 0, fit);
   }
   const used = new Set(rowConfig.flatMap((r) => r.fields));
   const unassigned = fields.filter((f) => !used.has(f.name));
@@ -1070,7 +1274,8 @@ function renderRows(fields, rowConfig, parentName, control, labelPosition, size,
         labelPosition,
         size,
         columns,
-        row.id
+        row.id,
+        fit
       );
     }),
     unassigned.length > 0 && renderGrid(
@@ -1080,7 +1285,8 @@ function renderRows(fields, rowConfig, parentName, control, labelPosition, size,
       labelPosition,
       size,
       columns,
-      "_unassigned"
+      "_unassigned",
+      fit
     )
   ] });
 }
@@ -1092,7 +1298,9 @@ var ObjectField = ({
   groupConfig,
   labelPosition = "side",
   size = "sm",
-  columns = 2
+  columns = 2,
+  fit = "viewport",
+  groupAs = "accordion"
 }) => {
   const grouped = fields.reduce((acc, f) => {
     const key = f.group ?? "_ungrouped";
@@ -1113,9 +1321,14 @@ var ObjectField = ({
       control,
       labelPosition,
       size,
-      columns
+      columns,
+      fit
     ) }),
-    groupedEntries.length > 0 && /* @__PURE__ */ jsx(
+    groupedEntries.length > 0 && groupAs === "section" && /* @__PURE__ */ jsx("div", { className: SIZE[size].section, children: groupedEntries.map(([group, gFields]) => /* @__PURE__ */ jsxs("section", { className: SIZE[size].stack, children: [
+      /* @__PURE__ */ jsx(Eyebrow, { children: groupConfigById.get(group)?.label ?? humanize(group) }),
+      renderRows(gFields, rowConfig, name, control, labelPosition, size, columns, fit)
+    ] }, group)) }),
+    groupedEntries.length > 0 && groupAs === "accordion" && /* @__PURE__ */ jsx(
       Accordion,
       {
         type: "multiple",
@@ -1152,7 +1365,8 @@ var ObjectField = ({
               control,
               labelPosition,
               size,
-              columns
+              columns,
+              fit
             ) }) })
           ] }, group);
         })
@@ -1241,7 +1455,7 @@ function FieldGroup({ className, ...props }) {
     }
   );
 }
-cva(
+var fieldVariants = cva(
   "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
   {
     variants: {
@@ -1264,6 +1478,22 @@ cva(
     }
   }
 );
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
 function FieldContent({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -1466,146 +1696,6 @@ var ParamRow = React2.forwardRef(
   )
 );
 ParamRow.displayName = "ParamRow";
-function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "input-group",
-      role: "group",
-      className: cn(
-        "group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-control border outline-none transition-[color,box-shadow]",
-        "h-9 has-[>textarea]:h-auto",
-        // Variants based on alignment.
-        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-        // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
-        // Error state.
-        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-control [&>svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      align: {
-        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
-        "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
-        "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5"
-      }
-    },
-    defaultVariants: {
-      align: "inline-start"
-    }
-  }
-);
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "group",
-      "data-slot": "input-group-addon",
-      "data-align": align,
-      className: cn(inputGroupAddonVariants({ align }), className),
-      onClick: (e) => {
-        if (e.target.closest("button")) {
-          return;
-        }
-        e.currentTarget.parentElement?.querySelector("input")?.focus();
-      },
-      ...props
-    }
-  );
-}
-var inputGroupButtonVariants = cva(
-  "flex items-center gap-2 shadow-none",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 rounded-control px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "h-8 gap-1.5 rounded-control px-2.5 has-[>svg]:px-2.5",
-        "icon-xs": "size-6 rounded-control p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
-      }
-    },
-    defaultVariants: {
-      size: "xs"
-    }
-  }
-);
-function InputGroupButton({
-  className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      type,
-      "data-size": size,
-      variant,
-      className: cn(inputGroupButtonVariants({ size }), className),
-      ...props
-    }
-  );
-}
-function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "text-muted-foreground flex items-center gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function InputGroupInput({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      "data-slot": "input-group-control",
-      className: cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function InputGroupTextarea({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Textarea,
-    {
-      "data-slot": "input-group-control",
-      className: cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      ),
-      ...props
-    }
-  );
-}
 
 export { BooleanField, Checkbox, CheckboxGroupField, ColorField, ColorSwatches, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel2 as FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField2 as FormField, FormItem, FormLabel, FormMessage, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, NumberField, ObjectField, PARAM_SOURCES, ParamRow, PasswordField, PasswordInput, RadioField, RadioGroup, RadioGroupItem, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SettingsPanel, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };
 //# sourceMappingURL=index.js.map