@invana/forms 0.0.20 → 0.0.22

package/dist/index.d.cts

@@ -299,7 +299,17 @@ interface IconInputProps {
  */
 declare const IconInput: React$1.FC<IconInputProps>;
 
-declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+/**
+ * `sm` (26px) is the application field — a property editor, a settings row, a
+ * form inside a 420px panel. `default` (40px) stays the form-page size.
+ *
+ * Named `inputSize` because `size` is already an `<input>` attribute meaning
+ * "how many characters wide", and shadowing it would silently drop that.
+ */
+type InputSize = "default" | "sm";
+declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLInputElement> & React$1.InputHTMLAttributes<HTMLInputElement> & {
+    inputSize?: InputSize;
+}, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 type PasswordInputProps = Omit<React$1.ComponentProps<"input">, "type"> & {
     /** Controls visibility in a controlled fashion. Omit for self-managed toggle. */
@@ -313,12 +323,18 @@ type PasswordInputProps = Omit<React$1.ComponentProps<"input">, "type"> & {
  */
 declare const PasswordInput: React$1.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
+declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLTextAreaElement> & React$1.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    /** Matches `Input`'s `inputSize`. `sm` tightens padding and the floor. */
+    inputSize?: "default" | "sm";
+}, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
+    /** Matches `Input`'s `inputSize` — `sm` is the 26px application field. */
+    triggerSize?: "default" | "sm";
+} & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -361,11 +377,11 @@ declare const inputGroupAddonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React$1.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): React$1.JSX.Element;
 declare function InputGroupText({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
 declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
 declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): React$1.JSX.Element;
 
-export { type BooleanControl, BooleanField, Checkbox, CheckboxGroupField, ColorField, type ColorPreset, ColorSwatches, Field, type FieldBadge, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GroupConfig, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PasswordField, PasswordInput, type PasswordInputProps, RadioField, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SettingsPanel, type SettingsPanelProps, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };
+export { type BooleanControl, BooleanField, Checkbox, CheckboxGroupField, ColorField, type ColorPreset, ColorSwatches, Field, type FieldBadge, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GroupConfig, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type InputSize, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PasswordField, PasswordInput, type PasswordInputProps, RadioField, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SettingsPanel, type SettingsPanelProps, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };

package/dist/index.d.ts

@@ -299,7 +299,17 @@ interface IconInputProps {
  */
 declare const IconInput: React$1.FC<IconInputProps>;
 
-declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+/**
+ * `sm` (26px) is the application field — a property editor, a settings row, a
+ * form inside a 420px panel. `default` (40px) stays the form-page size.
+ *
+ * Named `inputSize` because `size` is already an `<input>` attribute meaning
+ * "how many characters wide", and shadowing it would silently drop that.
+ */
+type InputSize = "default" | "sm";
+declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLInputElement> & React$1.InputHTMLAttributes<HTMLInputElement> & {
+    inputSize?: InputSize;
+}, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 type PasswordInputProps = Omit<React$1.ComponentProps<"input">, "type"> & {
     /** Controls visibility in a controlled fashion. Omit for self-managed toggle. */
@@ -313,12 +323,18 @@ type PasswordInputProps = Omit<React$1.ComponentProps<"input">, "type"> & {
  */
 declare const PasswordInput: React$1.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
+declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLTextAreaElement> & React$1.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    /** Matches `Input`'s `inputSize`. `sm` tightens padding and the floor. */
+    inputSize?: "default" | "sm";
+}, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
+    /** Matches `Input`'s `inputSize` — `sm` is the 26px application field. */
+    triggerSize?: "default" | "sm";
+} & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -361,11 +377,11 @@ declare const inputGroupAddonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React$1.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): React$1.JSX.Element;
 declare function InputGroupText({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
 declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
 declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): React$1.JSX.Element;
 
-export { type BooleanControl, BooleanField, Checkbox, CheckboxGroupField, ColorField, type ColorPreset, ColorSwatches, Field, type FieldBadge, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GroupConfig, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PasswordField, PasswordInput, type PasswordInputProps, RadioField, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SettingsPanel, type SettingsPanelProps, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };
+export { type BooleanControl, BooleanField, Checkbox, CheckboxGroupField, ColorField, type ColorPreset, ColorSwatches, Field, type FieldBadge, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GroupConfig, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type InputSize, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PasswordField, PasswordInput, type PasswordInputProps, RadioField, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SettingsPanel, type SettingsPanelProps, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };

package/dist/index.js

@@ -120,13 +120,14 @@ var FormMessage = React2.forwardRef(({ className, children, ...props }, ref) =>
 });
 FormMessage.displayName = "FormMessage";
 var Input = React2.forwardRef(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, inputSize = "default", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
       {
         type,
         className: cn(
-          "flex h-10 w-full rounded-control border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm 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",
+          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",
           className
         ),
         ref,
@@ -174,12 +175,13 @@ var PasswordInput = React2.forwardRef(
   }
 );
 PasswordInput.displayName = "PasswordInput";
-var Textarea = React2.forwardRef(({ className, ...props }, ref) => {
+var Textarea = React2.forwardRef(({ className, inputSize = "default", ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "textarea",
     {
       className: cn(
-        "flex min-h-[80px] w-full rounded-control border border-input bg-background px-3 py-2 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",
+        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,
@@ -256,12 +258,13 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React2.forwardRef(({ className, children, triggerSize = "default", ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
     className: cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-control border border-input bg-transparent px-3 py-2  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",
+      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",
       className
     ),
     ...props,
@@ -330,7 +333,7 @@ var SelectLabel = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   SelectPrimitive.Label,
   {
     ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    className: cn("px-2 py-1.5 font-semibold", className),
     ...props
   }
 ));
@@ -493,7 +496,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 text-sm", children: value ? value.slice(0, 2) : "\u2013" }),
+    /* @__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(
       Input,
       {
@@ -501,7 +504,7 @@ var IconInput = ({ value, onChange }) => {
         value: value ?? "",
         onChange: (e) => onChange?.(e.target.value),
         placeholder: "icon name",
-        className: "h-8 text-sm"
+        className: "h-8"
       }
     )
   ] });
@@ -1219,7 +1222,6 @@ function FieldLegend({
       className: cn(
         "mb-3 font-medium",
         "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
         className
       ),
       ...props
@@ -1299,7 +1301,7 @@ function FieldTitle({ className, ...props }) {
     {
       "data-slot": "field-label",
       className: cn(
-        "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
         className
       ),
       ...props
@@ -1312,7 +1314,7 @@ function FieldDescription({ className, ...props }) {
     {
       "data-slot": "field-description",
       className: cn(
-        "text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "text-muted-foreground font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
         "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className
@@ -1332,7 +1334,7 @@ function FieldSeparator({
       "data-slot": "field-separator",
       "data-content": !!children,
       className: cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        "relative -my-2 h-5 group-data-[variant=outline]/field-group:-mb-2",
         className
       ),
       ...props,
@@ -1378,7 +1380,7 @@ function FieldError({
     {
       role: "alert",
       "data-slot": "field-error",
-      className: cn("text-destructive text-sm font-normal", className),
+      className: cn("text-destructive font-normal", className),
       ...props,
       children: content
     }
@@ -1409,7 +1411,7 @@ function InputGroup({ className, ...props }) {
   );
 }
 var inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-control [&>svg:not([class*='size-'])]:size-4",
+  "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: {
@@ -1447,7 +1449,7 @@ function InputGroupAddon({
   );
 }
 var inputGroupButtonVariants = cva(
-  "flex items-center gap-2 text-sm shadow-none",
+  "flex items-center gap-2 shadow-none",
   {
     variants: {
       size: {
@@ -1485,7 +1487,7 @@ function InputGroupText({ className, ...props }) {
     "span",
     {
       className: cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        "text-muted-foreground flex items-center gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
         className
       ),
       ...props