@fragments-sdk/ui 0.14.0 → 0.16.0

package/dist/components/ColorPicker/ColorPicker.module.scss.cjs

@@ -1,39 +1,47 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_1x6q3_1";
-const sizeSm = "_sizeSm_1x6q3_6";
-const inputWrapper = "_inputWrapper_1x6q3_6";
-const swatch = "_swatch_1x6q3_9";
-const hexInput = "_hexInput_1x6q3_13";
-const label = "_label_1x6q3_17";
-const sizeLg = "_sizeLg_1x6q3_21";
-const hexInputField = "_hexInputField_1x6q3_99";
-const positioner = "_positioner_1x6q3_104";
-const popup = "_popup_1x6q3_109";
-const description = "_description_1x6q3_135";
+const wrapper = "_wrapper_1848v_1";
+const label = "_label_1848v_6";
+const required = "_required_1848v_14";
+const helper = "_helper_1848v_19";
+const helperError = "_helperError_1848v_26";
+const errorMessage = "_errorMessage_1848v_30";
+const sizeSm = "_sizeSm_1848v_36";
+const inputWrapper = "_inputWrapper_1848v_36";
+const swatch = "_swatch_1848v_39";
+const hexInput = "_hexInput_1848v_43";
+const sizeLg = "_sizeLg_1848v_51";
+const hexInputField = "_hexInputField_1848v_121";
+const positioner = "_positioner_1848v_126";
+const popup = "_popup_1848v_131";
 const styles = {
   wrapper,
+  label,
+  required,
+  helper,
+  helperError,
+  errorMessage,
   sizeSm,
   inputWrapper,
   swatch,
   hexInput,
-  label,
   sizeLg,
   hexInputField,
   positioner,
-  popup,
-  description
+  popup
 };
 exports.default = styles;
-exports.description = description;
+exports.errorMessage = errorMessage;
+exports.helper = helper;
+exports.helperError = helperError;
 exports.hexInput = hexInput;
 exports.hexInputField = hexInputField;
 exports.inputWrapper = inputWrapper;
 exports.label = label;
 exports.popup = popup;
 exports.positioner = positioner;
+exports.required = required;
 exports.sizeLg = sizeLg;
 exports.sizeSm = sizeSm;
 exports.swatch = swatch;
 exports.wrapper = wrapper;
-//# sourceMappingURL=ColorPicker.module.scss.cjs.map

package/dist/components/ColorPicker/ColorPicker.module.scss.js

@@ -1,39 +1,47 @@
-const wrapper = "_wrapper_1x6q3_1";
-const sizeSm = "_sizeSm_1x6q3_6";
-const inputWrapper = "_inputWrapper_1x6q3_6";
-const swatch = "_swatch_1x6q3_9";
-const hexInput = "_hexInput_1x6q3_13";
-const label = "_label_1x6q3_17";
-const sizeLg = "_sizeLg_1x6q3_21";
-const hexInputField = "_hexInputField_1x6q3_99";
-const positioner = "_positioner_1x6q3_104";
-const popup = "_popup_1x6q3_109";
-const description = "_description_1x6q3_135";
+const wrapper = "_wrapper_1848v_1";
+const label = "_label_1848v_6";
+const required = "_required_1848v_14";
+const helper = "_helper_1848v_19";
+const helperError = "_helperError_1848v_26";
+const errorMessage = "_errorMessage_1848v_30";
+const sizeSm = "_sizeSm_1848v_36";
+const inputWrapper = "_inputWrapper_1848v_36";
+const swatch = "_swatch_1848v_39";
+const hexInput = "_hexInput_1848v_43";
+const sizeLg = "_sizeLg_1848v_51";
+const hexInputField = "_hexInputField_1848v_121";
+const positioner = "_positioner_1848v_126";
+const popup = "_popup_1848v_131";
 const styles = {
   wrapper,
+  label,
+  required,
+  helper,
+  helperError,
+  errorMessage,
   sizeSm,
   inputWrapper,
   swatch,
   hexInput,
-  label,
   sizeLg,
   hexInputField,
   positioner,
-  popup,
-  description
+  popup
 };
 export {
   styles as default,
-  description,
+  errorMessage,
+  helper,
+  helperError,
   hexInput,
   hexInputField,
   inputWrapper,
   label,
   popup,
   positioner,
+  required,
   sizeLg,
   sizeSm,
   swatch,
   wrapper
 };
-//# sourceMappingURL=ColorPicker.module.scss.js.map

package/dist/components/ColorPicker/index.d.ts

@@ -9,8 +9,14 @@ export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     defaultValue?: string;
     /** Called with new color value when changed */
     onChange?: (color: string) => void;
+    /** Alias for onChange (Radix convention) */
+    onValueChange?: (color: string) => void;
     /** Helper text below the picker */
+    helperText?: string;
+    /** @deprecated Use helperText instead. */
     description?: string;
+    /** Show error styling */
+    error?: boolean;
     /** Disable the color picker */
     disabled?: boolean;
     /** Size variant */

package/dist/components/ColorPicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,OAAO,2BAA2B,CAAC;AAEnC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAC/G,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA+GD,eAAO,MAAM,WAAW;;CAEtB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,OAAO,2BAA2B,CAAC;AAEnC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAC/G,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA0HD,eAAO,MAAM,WAAW;;CAEtB,CAAC"}

package/dist/components/Combobox/Combobox.module.scss.cjs

@@ -1,23 +1,39 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const multiContainer = "_multiContainer_g9rct_1";
-const inputWrapper = "_inputWrapper_g9rct_7";
-const input = "_input_g9rct_7";
-const chips = "_chips_g9rct_59";
-const chip = "_chip_g9rct_59";
-const chipLabel = "_chipLabel_g9rct_81";
-const chipRemove = "_chipRemove_g9rct_87";
-const trigger = "_trigger_g9rct_119";
-const positioner = "_positioner_g9rct_162";
-const popup = "_popup_g9rct_167";
-const item = "_item_g9rct_195";
-const itemIndicator = "_itemIndicator_g9rct_239";
-const empty = "_empty_g9rct_252";
-const group = "_group_g9rct_267";
-const groupLabel = "_groupLabel_g9rct_273";
+const wrapper = "_wrapper_raaiw_1";
+const label = "_label_raaiw_6";
+const helper = "_helper_raaiw_19";
+const helperError = "_helperError_raaiw_26";
+const errorMessage = "_errorMessage_raaiw_30";
+const inputWrapperSm = "_inputWrapperSm_raaiw_36";
+const inputWrapperLg = "_inputWrapperLg_raaiw_40";
+const inputWrapper = "_inputWrapper_raaiw_36";
+const inputSm = "_inputSm_raaiw_72";
+const inputLg = "_inputLg_raaiw_77";
+const input = "_input_raaiw_36";
+const chips = "_chips_raaiw_106";
+const chip = "_chip_raaiw_106";
+const chipLabel = "_chipLabel_raaiw_125";
+const chipRemove = "_chipRemove_raaiw_131";
+const trigger = "_trigger_raaiw_166";
+const positioner = "_positioner_raaiw_209";
+const popup = "_popup_raaiw_214";
+const item = "_item_raaiw_245";
+const itemIndicator = "_itemIndicator_raaiw_289";
+const empty = "_empty_raaiw_302";
+const group = "_group_raaiw_317";
+const groupLabel = "_groupLabel_raaiw_323";
 const styles = {
-  multiContainer,
+  wrapper,
+  label,
+  helper,
+  helperError,
+  errorMessage,
+  inputWrapperSm,
+  inputWrapperLg,
   inputWrapper,
+  inputSm,
+  inputLg,
   input,
   chips,
   chip,
@@ -38,14 +54,21 @@ exports.chipRemove = chipRemove;
 exports.chips = chips;
 exports.default = styles;
 exports.empty = empty;
+exports.errorMessage = errorMessage;
 exports.group = group;
 exports.groupLabel = groupLabel;
+exports.helper = helper;
+exports.helperError = helperError;
 exports.input = input;
+exports.inputLg = inputLg;
+exports.inputSm = inputSm;
 exports.inputWrapper = inputWrapper;
+exports.inputWrapperLg = inputWrapperLg;
+exports.inputWrapperSm = inputWrapperSm;
 exports.item = item;
 exports.itemIndicator = itemIndicator;
-exports.multiContainer = multiContainer;
+exports.label = label;
 exports.popup = popup;
 exports.positioner = positioner;
 exports.trigger = trigger;
-//# sourceMappingURL=Combobox.module.scss.cjs.map
+exports.wrapper = wrapper;

package/dist/components/Combobox/Combobox.module.scss.js

@@ -1,21 +1,37 @@
-const multiContainer = "_multiContainer_g9rct_1";
-const inputWrapper = "_inputWrapper_g9rct_7";
-const input = "_input_g9rct_7";
-const chips = "_chips_g9rct_59";
-const chip = "_chip_g9rct_59";
-const chipLabel = "_chipLabel_g9rct_81";
-const chipRemove = "_chipRemove_g9rct_87";
-const trigger = "_trigger_g9rct_119";
-const positioner = "_positioner_g9rct_162";
-const popup = "_popup_g9rct_167";
-const item = "_item_g9rct_195";
-const itemIndicator = "_itemIndicator_g9rct_239";
-const empty = "_empty_g9rct_252";
-const group = "_group_g9rct_267";
-const groupLabel = "_groupLabel_g9rct_273";
+const wrapper = "_wrapper_raaiw_1";
+const label = "_label_raaiw_6";
+const helper = "_helper_raaiw_19";
+const helperError = "_helperError_raaiw_26";
+const errorMessage = "_errorMessage_raaiw_30";
+const inputWrapperSm = "_inputWrapperSm_raaiw_36";
+const inputWrapperLg = "_inputWrapperLg_raaiw_40";
+const inputWrapper = "_inputWrapper_raaiw_36";
+const inputSm = "_inputSm_raaiw_72";
+const inputLg = "_inputLg_raaiw_77";
+const input = "_input_raaiw_36";
+const chips = "_chips_raaiw_106";
+const chip = "_chip_raaiw_106";
+const chipLabel = "_chipLabel_raaiw_125";
+const chipRemove = "_chipRemove_raaiw_131";
+const trigger = "_trigger_raaiw_166";
+const positioner = "_positioner_raaiw_209";
+const popup = "_popup_raaiw_214";
+const item = "_item_raaiw_245";
+const itemIndicator = "_itemIndicator_raaiw_289";
+const empty = "_empty_raaiw_302";
+const group = "_group_raaiw_317";
+const groupLabel = "_groupLabel_raaiw_323";
 const styles = {
-  multiContainer,
+  wrapper,
+  label,
+  helper,
+  helperError,
+  errorMessage,
+  inputWrapperSm,
+  inputWrapperLg,
   inputWrapper,
+  inputSm,
+  inputLg,
   input,
   chips,
   chip,
@@ -37,15 +53,22 @@ export {
   chips,
   styles as default,
   empty,
+  errorMessage,
   group,
   groupLabel,
+  helper,
+  helperError,
   input,
+  inputLg,
+  inputSm,
   inputWrapper,
+  inputWrapperLg,
+  inputWrapperSm,
   item,
   itemIndicator,
-  multiContainer,
+  label,
   popup,
   positioner,
-  trigger
+  trigger,
+  wrapper
 };
-//# sourceMappingURL=Combobox.module.scss.js.map

package/dist/components/Combobox/index.cjs

@@ -2,21 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const combobox = require("@base-ui/react/combobox");
+const aria = require("../../utils/aria.cjs");
 const Combobox_module = require("./Combobox.module.scss.cjs");
-const ComboboxItemIndicator = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/item-indicator/ComboboxItemIndicator.cjs");
-const ComboboxRoot$1 = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/root/ComboboxRoot.cjs");
-const ComboboxGroupLabel$1 = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/group-label/ComboboxGroupLabel.cjs");
-const ComboboxGroup$1 = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/group/ComboboxGroup.cjs");
-const ComboboxEmpty$1 = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/empty/ComboboxEmpty.cjs");
-const ComboboxItem$1 = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/item/ComboboxItem.cjs");
-const ComboboxPortal = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/portal/ComboboxPortal.cjs");
-const ComboboxPositioner = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/positioner/ComboboxPositioner.cjs");
-const ComboboxPopup = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/popup/ComboboxPopup.cjs");
-const ComboboxTrigger$1 = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/trigger/ComboboxTrigger.cjs");
-const ComboboxInput$1 = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/input/ComboboxInput.cjs");
-const ComboboxChips = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/chips/ComboboxChips.cjs");
-const ComboboxChip = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/chip/ComboboxChip.cjs");
-const ComboboxChipRemove = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/chip-remove/ComboboxChipRemove.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -99,7 +87,8 @@ const ComboboxContext = React__namespace.createContext({
   },
   explicitTriggerCount: 0,
   registerTrigger: () => () => {
-  }
+  },
+  size: "md"
 });
 function getNodeText(node) {
   if (node == null || typeof node === "boolean") return "";
@@ -109,7 +98,7 @@ function getNodeText(node) {
     return getNodeText(node.props.children);
   return "";
 }
-function ComboboxRoot({
+const ComboboxRoot = React__namespace.forwardRef(function ComboboxRoot2({
   children,
   value,
   defaultValue,
@@ -123,8 +112,13 @@ function ComboboxRoot({
   required,
   name,
   placeholder,
-  autoHighlight = true
-}) {
+  autoHighlight = true,
+  label,
+  helperText,
+  error,
+  size = "md",
+  className
+}, ref) {
   const [internalValue, setInternalValue] = React__namespace.useState(
     value ?? defaultValue ?? (multiple ? [] : null)
   );
@@ -170,10 +164,20 @@ function ComboboxRoot({
       itemsVersion,
       incrementItemsVersion,
       explicitTriggerCount,
-      registerTrigger
+      registerTrigger,
+      size
     }),
-    [placeholder, multiple, selectedValues, itemsVersion, incrementItemsVersion, explicitTriggerCount, registerTrigger]
+    [placeholder, multiple, selectedValues, itemsVersion, incrementItemsVersion, explicitTriggerCount, registerTrigger, size]
   );
+  const { labelId, helperId, errorId, hasError, errorMessage } = aria.useFormFieldIds("combobox", { label, helperText, error });
+  const wrapperClasses = [Combobox_module.default.wrapper, className].filter(Boolean).join(" ");
+  const helperClasses = [Combobox_module.default.helper, hasError && Combobox_module.default.helperError].filter(Boolean).join(" ");
+  const wrapperContent = (inner) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: wrapperClasses, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: Combobox_module.default.label, children: label }),
+    inner,
+    helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { id: helperId, className: helperClasses, children: helperText }),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsx("span", { id: errorId, className: Combobox_module.default.errorMessage, children: errorMessage })
+  ] });
   if (multiple) {
     const controlledValue2 = value;
     const uncontrolledValue2 = defaultValue;
@@ -184,23 +188,27 @@ function ComboboxRoot({
       }
       emitChange2 == null ? void 0 : emitChange2(newValue);
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ComboboxRoot$1.ComboboxRoot,
-      {
-        value: controlledValue2,
-        defaultValue: uncontrolledValue2,
-        onValueChange: handleValueChange2,
-        open,
-        defaultOpen,
-        onOpenChange: (nextOpen) => handleOpenChange(nextOpen),
-        disabled,
-        required,
-        name,
-        multiple: true,
-        autoHighlight,
-        itemToStringLabel,
-        children
-      }
+    return /* @__PURE__ */ jsxRuntime.jsx(ComboboxContext.Provider, { value: contextValue, children: wrapperContent(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        combobox.Combobox.Root,
+        {
+          value: controlledValue2,
+          defaultValue: uncontrolledValue2,
+          onValueChange: handleValueChange2,
+          open,
+          defaultOpen,
+          onOpenChange: (nextOpen) => handleOpenChange(nextOpen),
+          disabled,
+          required,
+          name,
+          multiple: true,
+          autoHighlight,
+          itemToStringLabel,
+          "aria-labelledby": labelId,
+          "aria-describedby": aria.mergeAriaIds(errorId, helperId),
+          children
+        }
+      )
     ) });
   }
   const controlledValue = value;
@@ -212,65 +220,70 @@ function ComboboxRoot({
     }
     emitChange == null ? void 0 : emitChange(newValue);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-    ComboboxRoot$1.ComboboxRoot,
-    {
-      value: controlledValue,
-      defaultValue: uncontrolledValue ?? null,
-      onValueChange: handleValueChange,
-      open,
-      defaultOpen,
-      onOpenChange: (nextOpen) => handleOpenChange(nextOpen),
-      disabled,
-      required,
-      name,
-      multiple: false,
-      autoHighlight,
-      itemToStringLabel,
-      children
-    }
+  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxContext.Provider, { value: contextValue, children: wrapperContent(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      combobox.Combobox.Root,
+      {
+        value: controlledValue,
+        defaultValue: uncontrolledValue ?? null,
+        onValueChange: handleValueChange,
+        open,
+        defaultOpen,
+        onOpenChange: (nextOpen) => handleOpenChange(nextOpen),
+        disabled,
+        required,
+        name,
+        multiple: false,
+        autoHighlight,
+        itemToStringLabel,
+        "aria-labelledby": labelId,
+        "aria-describedby": aria.mergeAriaIds(errorId, helperId),
+        children
+      }
+    )
   ) });
-}
+});
 function ComboboxInput({ className, showTrigger = true, ...htmlProps }) {
   const context = React__namespace.useContext(ComboboxContext);
-  const classes = [Combobox_module.default.input, className].filter(Boolean).join(" ");
+  const inputSizeClass = context.size === "sm" ? Combobox_module.default.inputSm : context.size === "lg" ? Combobox_module.default.inputLg : void 0;
+  const wrapperSizeClass = context.size === "sm" ? Combobox_module.default.inputWrapperSm : context.size === "lg" ? Combobox_module.default.inputWrapperLg : void 0;
+  const classes = [Combobox_module.default.input, inputSizeClass, className].filter(Boolean).join(" ");
+  const wrapperClasses = [Combobox_module.default.inputWrapper, wrapperSizeClass].filter(Boolean).join(" ");
   const renderTrigger = showTrigger && context.explicitTriggerCount === 0;
   if (context.multiple) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Combobox_module.default.multiContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Combobox_module.default.inputWrapper, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ComboboxInput$1.ComboboxInput,
-          {
-            placeholder: context.selectedValues.length === 0 ? context.placeholder : void 0,
-            ...htmlProps,
-            className: classes
-          }
-        ),
-        renderTrigger && /* @__PURE__ */ jsxRuntime.jsx(ComboboxTrigger$1.ComboboxTrigger, { className: Combobox_module.default.trigger, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
-      ] }),
-      context.selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ComboboxChips.ComboboxChips, { className: Combobox_module.default.chips, children: context.selectedValues.map((chipValue) => /* @__PURE__ */ jsxRuntime.jsxs(ComboboxChip.ComboboxChip, { className: Combobox_module.default.chip, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
+      context.selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Chips, { className: Combobox_module.default.chips, children: context.selectedValues.map((chipValue) => /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Chip, { className: Combobox_module.default.chip, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: Combobox_module.default.chipLabel, children: context.itemsRef.current.get(chipValue) ?? chipValue }),
-        /* @__PURE__ */ jsxRuntime.jsx(ComboboxChipRemove.ComboboxChipRemove, { className: Combobox_module.default.chipRemove, children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {}) })
-      ] }, chipValue)) })
+        /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.ChipRemove, { className: Combobox_module.default.chipRemove, children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {}) })
+      ] }, chipValue)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        combobox.Combobox.Input,
+        {
+          placeholder: context.selectedValues.length === 0 ? context.placeholder : void 0,
+          ...htmlProps,
+          className: classes
+        }
+      ),
+      renderTrigger && /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Trigger, { className: Combobox_module.default.trigger, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Combobox_module.default.inputWrapper, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      ComboboxInput$1.ComboboxInput,
+      combobox.Combobox.Input,
       {
         placeholder: context.placeholder,
         ...htmlProps,
         className: classes
       }
     ),
-    renderTrigger && /* @__PURE__ */ jsxRuntime.jsx(ComboboxTrigger$1.ComboboxTrigger, { className: Combobox_module.default.trigger, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
+    renderTrigger && /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Trigger, { className: Combobox_module.default.trigger, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
   ] });
 }
 function ComboboxTrigger({ children, className, ...htmlProps }) {
   const { registerTrigger } = React__namespace.useContext(ComboboxContext);
   React__namespace.useEffect(() => registerTrigger(), [registerTrigger]);
   const classes = [Combobox_module.default.trigger, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxTrigger$1.ComboboxTrigger, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Trigger, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) });
 }
 function ComboboxContent({
   children,
@@ -282,14 +295,14 @@ function ComboboxContent({
 }) {
   const popupClasses = [Combobox_module.default.popup, className].filter(Boolean).join(" ");
   const popupStyle = maxVisibleItems != null ? { "--fui-select-max-items": maxVisibleItems + 0.5, ...htmlProps.style } : htmlProps.style;
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxPortal.ComboboxPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    ComboboxPositioner.ComboboxPositioner,
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    combobox.Combobox.Positioner,
     {
       side: "bottom",
       sideOffset,
       align,
       className: Combobox_module.default.positioner,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxPopup.ComboboxPopup, { ...htmlProps, className: popupClasses, style: popupStyle, children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Popup, { ...htmlProps, className: popupClasses, style: popupStyle, children })
     }
   ) });
 }
@@ -306,29 +319,29 @@ function ComboboxItem({ children, value, disabled, className, ...htmlProps }) {
       incrementItemsVersion();
     };
   }, [itemsRef, incrementItemsVersion, value, label]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ComboboxItem$1.ComboboxItem, { ...htmlProps, value, disabled, className: classes, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Item, { ...htmlProps, value, disabled, className: classes, children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsx(ComboboxItemIndicator.ComboboxItemIndicator, { className: Combobox_module.default.itemIndicator, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
+    /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.ItemIndicator, { className: Combobox_module.default.itemIndicator, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
   ] });
 }
 function ComboboxEmpty({ children, className, ...htmlProps }) {
   const classes = [Combobox_module.default.empty, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxEmpty$1.ComboboxEmpty, { ...htmlProps, className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Empty, { ...htmlProps, className: classes, children });
 }
 function ComboboxGroup({ children, className, ...htmlProps }) {
   const classes = [Combobox_module.default.group, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxGroup$1.ComboboxGroup, { ...htmlProps, className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Group, { ...htmlProps, className: classes, children });
 }
 function ComboboxGroupLabel({ children, className, ...htmlProps }) {
   const classes = [Combobox_module.default.groupLabel, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxGroupLabel$1.ComboboxGroupLabel, { ...htmlProps, className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.GroupLabel, { ...htmlProps, className: classes, children });
 }
 const Combobox = Object.assign(ComboboxRoot, {
   Input: ComboboxInput,
   Trigger: ComboboxTrigger,
   Content: ComboboxContent,
   Item: ComboboxItem,
-  ItemIndicator: ComboboxItemIndicator.ComboboxItemIndicator,
+  ItemIndicator: combobox.Combobox.ItemIndicator,
   Empty: ComboboxEmpty,
   Group: ComboboxGroup,
   GroupLabel: ComboboxGroupLabel
@@ -342,4 +355,3 @@ exports.ComboboxInput = ComboboxInput;
 exports.ComboboxItem = ComboboxItem;
 exports.ComboboxRoot = ComboboxRoot;
 exports.ComboboxTrigger = ComboboxTrigger;
-//# sourceMappingURL=index.cjs.map

package/dist/components/Combobox/index.d.ts

@@ -1,15 +1,20 @@
 import * as React from 'react';
-interface ComboboxCommonProps {
+import { type FormFieldProps } from '../../utils/aria';
+interface ComboboxCommonProps extends FormFieldProps {
     children: React.ReactNode;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
-    disabled?: boolean;
     required?: boolean;
     name?: string;
     placeholder?: string;
     /** Auto-highlight first matching item while filtering */
     autoHighlight?: boolean;
+    /** Size variant.
+     * @default "md" */
+    size?: 'sm' | 'md' | 'lg';
+    /** Wrapper class name */
+    className?: string;
 }
 export interface ComboboxSingleProps extends ComboboxCommonProps {
     /** Whether multiple items can be selected */
@@ -68,7 +73,7 @@ export interface ComboboxGroupProps extends React.HTMLAttributes<HTMLElement> {
 export interface ComboboxGroupLabelProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
 }
-declare function ComboboxRoot({ children, value, defaultValue, onValueChange, onChange, multiple, open, defaultOpen, onOpenChange, disabled, required, name, placeholder, autoHighlight, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+declare const ComboboxRoot: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>>;
 declare function ComboboxInput({ className, showTrigger, ...htmlProps }: ComboboxInputProps): import("react/jsx-runtime").JSX.Element;
 declare function ComboboxTrigger({ children, className, ...htmlProps }: ComboboxTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare function ComboboxContent({ children, className, sideOffset, align, maxVisibleItems, ...htmlProps }: ComboboxContentProps): import("react/jsx-runtime").JSX.Element;
@@ -76,7 +81,7 @@ declare function ComboboxItem({ children, value, disabled, className, ...htmlPro
 declare function ComboboxEmpty({ children, className, ...htmlProps }: ComboboxEmptyProps): import("react/jsx-runtime").JSX.Element;
 declare function ComboboxGroup({ children, className, ...htmlProps }: ComboboxGroupProps): import("react/jsx-runtime").JSX.Element;
 declare function ComboboxGroupLabel({ children, className, ...htmlProps }: ComboboxGroupLabelProps): import("react/jsx-runtime").JSX.Element;
-export declare const Combobox: typeof ComboboxRoot & {
+export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>> & {
     Input: typeof ComboboxInput;
     Trigger: typeof ComboboxTrigger;
     Content: typeof ComboboxContent;