@edux-design/forms 0.0.9 → 0.0.11

package/README.md

@@ -82,6 +82,7 @@ Every `Field` instance mounts a internal context. `Label`, `Input`, `Textarea`,
 - Provides layout (`flex`, `gap-8`) and context wiring.
 - Accepts any children; typically wraps `Label`, a control (`Input`, `Textarea`, `Radio`), and optional `Field.Feedback`.
 - Set `orientation="horizontal"` when you need inline layouts (e.g., Switch + label) without affecting other form groups.
+- Use `justify="between"` with `orientation="horizontal"` to align left labels and right controls across a column.
 - Re-exports `Field.Feedback` for ergonomic composition.
 
 ### `<Label>`

package/dist/index.d.mts

@@ -20,6 +20,7 @@ declare function Label({ children, hint, description, ...props }: {
  *   clearable?: boolean,
  *   startIcon?: React.ReactNode,
  *   endIcon?: React.ReactNode|string,
+ *   size?: "default"|"small",
  *   value?: any,
  *   onChange?: (e: React.ChangeEvent<HTMLInputElement> | { target: { value: string } }) => void,
  * }} InputProps
@@ -48,6 +49,7 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     clearable?: boolean;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode | string;
+    size?: "default" | "small";
     value?: any;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | {
         target: {
@@ -177,7 +179,10 @@ type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
  * @returns {React.ReactElement}
  */
 declare function Feedback({ id, tone, children, className, ...rest }: FeedbackProps): React.ReactElement;
-declare function Field({ children, orientation, className, }: FieldProps): React.ReactElement;
+declare function Field({ children, orientation, justify, className, }: FieldProps & {
+    orientation?: "vertical" | "horizontal";
+    justify?: "start" | "between";
+}): React.ReactElement;
 declare namespace Field {
     export { Feedback };
 }
@@ -241,6 +246,7 @@ declare const Option: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
  * @property {string} [contentClassName] - optional class for the popover content
  * @property {string} [listClassName] - optional class for the list element
  * @property {string} [optionClassName] - optional class for each option
+ * @property {"default"|"small"} [size="default"] - size variant for the combobox input
  */
 declare const ComboboxRoot: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
 

package/dist/index.d.ts

@@ -20,6 +20,7 @@ declare function Label({ children, hint, description, ...props }: {
  *   clearable?: boolean,
  *   startIcon?: React.ReactNode,
  *   endIcon?: React.ReactNode|string,
+ *   size?: "default"|"small",
  *   value?: any,
  *   onChange?: (e: React.ChangeEvent<HTMLInputElement> | { target: { value: string } }) => void,
  * }} InputProps
@@ -48,6 +49,7 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     clearable?: boolean;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode | string;
+    size?: "default" | "small";
     value?: any;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | {
         target: {
@@ -177,7 +179,10 @@ type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
  * @returns {React.ReactElement}
  */
 declare function Feedback({ id, tone, children, className, ...rest }: FeedbackProps): React.ReactElement;
-declare function Field({ children, orientation, className, }: FieldProps): React.ReactElement;
+declare function Field({ children, orientation, justify, className, }: FieldProps & {
+    orientation?: "vertical" | "horizontal";
+    justify?: "start" | "between";
+}): React.ReactElement;
 declare namespace Field {
     export { Feedback };
 }
@@ -241,6 +246,7 @@ declare const Option: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
  * @property {string} [contentClassName] - optional class for the popover content
  * @property {string} [listClassName] - optional class for the list element
  * @property {string} [optionClassName] - optional class for each option
+ * @property {"default"|"small"} [size="default"] - size variant for the combobox input
  */
 declare const ComboboxRoot: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
 

package/dist/index.js

@@ -147,14 +147,19 @@ var Input = (0, import_react4.forwardRef)(
     validation,
     variant = "primary",
     clearable = false,
+    size = "default",
     startIcon,
     endIcon,
     ...props
   }, ref) => {
     const { labelHTMLForId } = useFieldContext();
     const hasValue = Boolean(props.value);
-    const defaults = "h-[44px] bg-white w-full border-2 rounded-md border-border-base focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out pl-5";
-    const fonts = "font-normal text-base";
+    const defaults = "bg-white w-full border-2 rounded-md border-border-base focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out pl-5";
+    const fonts = size === "small" ? "font-normal text-sm" : "font-normal text-base";
+    const sizes = {
+      default: "h-[44px]",
+      small: "h-[36px]"
+    };
     const variants = {
       primary: "hover:border-2 hover:border-border-primary-base focus:border-2 focus:border-border-primary-base focus-within:border-2 focus-within:border-border-primary-base",
       error: "border-border-danger-base bg-bg-danger-subtle",
@@ -165,6 +170,7 @@ var Input = (0, import_react4.forwardRef)(
     const INPUT_STYLES = (0, import_utils.cx)(
       defaults,
       fonts,
+      sizes[size],
       variants[variant],
       startIcon && "pl-10",
       clearable && endIcon && "pr-10",
@@ -231,9 +237,12 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var Field = ({
   children,
   orientation = "vertical",
+  justify = "start",
   className
 }) => {
-  const orientationClasses = orientation === "horizontal" ? "flex-row items-center gap-6" : "flex-col items-start gap-8";
+  const isHorizontal = orientation === "horizontal";
+  const horizontalClasses = justify === "between" ? "flex-row items-center justify-between gap-0" : "flex-row items-center gap-6";
+  const orientationClasses = isHorizontal ? horizontalClasses : "flex-col items-start gap-8";
   const FIELD_GROUP_WRAPPER_STYLES = (0, import_utils2.cx)(
     "flex relative",
     orientationClasses,
@@ -875,6 +884,7 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
     contentClassName,
     listClassName,
     optionClassName,
+    size = "default",
     ...inputProps
   }, ref) => {
     const {
@@ -1143,6 +1153,16 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
       setOpen(true);
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     };
+    const sizeStyles = {
+      default: {
+        container: "min-h-[44px] px-4 py-2",
+        input: "text-base py-1"
+      },
+      small: {
+        container: "min-h-[36px] px-3 py-1",
+        input: "text-sm py-0.5"
+      }
+    };
     const selectedChips = isMultiSelectEnabled && multiSelectedOptions.length > 0 ? multiSelectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_chips.Chip,
       {
@@ -1168,7 +1188,8 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
             "div",
             {
               className: (0, import_utils7.cx)(
-                "w-full min-h-[44px] border-2 rounded-md bg-white px-4 py-2 flex items-center gap-3 cursor-text",
+                "w-full border-2 rounded-md bg-white flex items-center gap-3 cursor-text",
+                sizeStyles[size].container,
                 "border-border-base hover:border-border-primary-base focus-within:border-border-primary-base focus-within:shadow-focus",
                 disabled && "bg-bg-inactive text-fg-inactive cursor-not-allowed border-border-subtle"
               ),
@@ -1181,7 +1202,8 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
                     {
                       ref: mergedRef,
                       className: (0, import_utils7.cx)(
-                        "flex-1 basis-[140px] min-w-[120px] border-none bg-transparent outline-none text-base leading-tight py-1 pl-5",
+                        "flex-1 basis-[140px] min-w-[120px] border-none bg-transparent outline-none leading-tight pl-5",
+                        sizeStyles[size].input,
                         disabled && "cursor-not-allowed text-fg-inactive"
                       ),
                       value: inputDisplayValue,
@@ -1227,6 +1249,7 @@ var ComboboxRoot = (0, import_react10.forwardRef)(
               value: inputDisplayValue,
               disabled,
               readOnly: selectOnly,
+              size,
               autoComplete: "off",
               onChange: handleInputChange,
               onFocus: handleFocus,

package/dist/index.mjs

@@ -109,14 +109,19 @@ var Input = forwardRef(
     validation,
     variant = "primary",
     clearable = false,
+    size = "default",
     startIcon,
     endIcon,
     ...props
   }, ref) => {
     const { labelHTMLForId } = useFieldContext();
     const hasValue = Boolean(props.value);
-    const defaults = "h-[44px] bg-white w-full border-2 rounded-md border-border-base focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out pl-5";
-    const fonts = "font-normal text-base";
+    const defaults = "bg-white w-full border-2 rounded-md border-border-base focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out pl-5";
+    const fonts = size === "small" ? "font-normal text-sm" : "font-normal text-base";
+    const sizes = {
+      default: "h-[44px]",
+      small: "h-[36px]"
+    };
     const variants = {
       primary: "hover:border-2 hover:border-border-primary-base focus:border-2 focus:border-border-primary-base focus-within:border-2 focus-within:border-border-primary-base",
       error: "border-border-danger-base bg-bg-danger-subtle",
@@ -127,6 +132,7 @@ var Input = forwardRef(
     const INPUT_STYLES = cx(
       defaults,
       fonts,
+      sizes[size],
       variants[variant],
       startIcon && "pl-10",
       clearable && endIcon && "pr-10",
@@ -193,9 +199,12 @@ import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var Field = ({
   children,
   orientation = "vertical",
+  justify = "start",
   className
 }) => {
-  const orientationClasses = orientation === "horizontal" ? "flex-row items-center gap-6" : "flex-col items-start gap-8";
+  const isHorizontal = orientation === "horizontal";
+  const horizontalClasses = justify === "between" ? "flex-row items-center justify-between gap-0" : "flex-row items-center gap-6";
+  const orientationClasses = isHorizontal ? horizontalClasses : "flex-col items-start gap-8";
   const FIELD_GROUP_WRAPPER_STYLES = cx2(
     "flex relative",
     orientationClasses,
@@ -846,6 +855,7 @@ var ComboboxRoot = forwardRef6(
     contentClassName,
     listClassName,
     optionClassName,
+    size = "default",
     ...inputProps
   }, ref) => {
     const {
@@ -1114,6 +1124,16 @@ var ComboboxRoot = forwardRef6(
       setOpen(true);
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     };
+    const sizeStyles = {
+      default: {
+        container: "min-h-[44px] px-4 py-2",
+        input: "text-base py-1"
+      },
+      small: {
+        container: "min-h-[36px] px-3 py-1",
+        input: "text-sm py-0.5"
+      }
+    };
     const selectedChips = isMultiSelectEnabled && multiSelectedOptions.length > 0 ? multiSelectedOptions.map((option) => /* @__PURE__ */ jsx9(
       Chip,
       {
@@ -1139,7 +1159,8 @@ var ComboboxRoot = forwardRef6(
             "div",
             {
               className: cx7(
-                "w-full min-h-[44px] border-2 rounded-md bg-white px-4 py-2 flex items-center gap-3 cursor-text",
+                "w-full border-2 rounded-md bg-white flex items-center gap-3 cursor-text",
+                sizeStyles[size].container,
                 "border-border-base hover:border-border-primary-base focus-within:border-border-primary-base focus-within:shadow-focus",
                 disabled && "bg-bg-inactive text-fg-inactive cursor-not-allowed border-border-subtle"
               ),
@@ -1152,7 +1173,8 @@ var ComboboxRoot = forwardRef6(
                     {
                       ref: mergedRef,
                       className: cx7(
-                        "flex-1 basis-[140px] min-w-[120px] border-none bg-transparent outline-none text-base leading-tight py-1 pl-5",
+                        "flex-1 basis-[140px] min-w-[120px] border-none bg-transparent outline-none leading-tight pl-5",
+                        sizeStyles[size].input,
                         disabled && "cursor-not-allowed text-fg-inactive"
                       ),
                       value: inputDisplayValue,
@@ -1198,6 +1220,7 @@ var ComboboxRoot = forwardRef6(
               value: inputDisplayValue,
               disabled,
               readOnly: selectOnly,
+              size,
               autoComplete: "off",
               onChange: handleInputChange,
               onFocus: handleFocus,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/forms",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "sideEffects": [
     "**/*.css"
   ],
@@ -32,14 +32,13 @@
     "@tailwindcss/cli": "^4.1.12",
     "@tailwindcss/postcss": "^4.1.12"
   },
-  "dependencies": {
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "@edux-design/utils": "*",
     "@edux-design/icons": "*",
     "@edux-design/popovers": "*",
     "@edux-design/chips": "*"
-  },
-  "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
   }
 }