@gunkin/uiify 0.0.24-alpha → 0.0.25-alpha

package/dist/components/collapsible/types.d.ts

@@ -1,10 +1,32 @@
-import type { ReactNode } from "react";
-export interface CollapsibleProps {
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { ConsumerDataAttributes } from "../../core/slot-props.js";
+type CollapsibleTriggerOwnedAttributes = {
+    readonly "aria-disabled"?: never;
+    readonly "data-part"?: never;
+    readonly "data-uiify-details"?: never;
+    readonly disabled?: never;
+    readonly part?: never;
+    readonly tabIndex?: never;
+};
+type CollapsiblePanelOwnedAttributes = {
+    readonly "data-part"?: never;
+    readonly "data-uiify-details"?: never;
+    readonly part?: never;
+};
+export type CollapsibleTriggerSlotProps = Omit<ComponentPropsWithRef<"summary">, "aria-disabled" | "children" | "dangerouslySetInnerHTML" | "data-part" | "data-uiify-details" | "disabled" | "part" | "tabIndex"> & CollapsibleTriggerOwnedAttributes & ConsumerDataAttributes;
+export type CollapsiblePanelSlotProps = Omit<ComponentPropsWithRef<"div">, "children" | "dangerouslySetInnerHTML" | "data-part" | "data-uiify-details" | "part"> & CollapsiblePanelOwnedAttributes & ConsumerDataAttributes;
+export interface CollapsibleSlotProps {
+    readonly trigger?: CollapsibleTriggerSlotProps;
+    readonly panel?: CollapsiblePanelSlotProps;
+}
+export interface CollapsibleOwnProps {
     readonly id: string;
     readonly label: ReactNode;
     readonly content: ReactNode;
     readonly defaultOpen?: boolean;
     readonly disabled?: boolean;
-    readonly className?: string;
+    readonly slotProps?: CollapsibleSlotProps;
 }
+export type CollapsibleProps = CollapsibleOwnProps & Omit<ComponentPropsWithRef<"details">, keyof CollapsibleOwnProps | "children" | "dangerouslySetInnerHTML" | "data-disabled" | "data-uiify-collapsible" | "data-uiify-details" | "open" | "name">;
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/collapsible/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAEvE,KAAK,iCAAiC,GAAG;IACvC,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC;IACjC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC;IAC7B,QAAQ,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC;IACtC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;CAC3B,CAAC;AAEF,KAAK,+BAA+B,GAAG;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC;IAC7B,QAAQ,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC;IACtC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,IAAI,CAC5C,qBAAqB,CAAC,SAAS,CAAC,EAC9B,eAAe,GACf,UAAU,GACV,yBAAyB,GACzB,WAAW,GACX,oBAAoB,GACpB,UAAU,GACV,MAAM,GACN,UAAU,CACb,GACC,iCAAiC,GACjC,sBAAsB,CAAC;AAEzB,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,GAAG,yBAAyB,GAAG,WAAW,GAAG,oBAAoB,GAAG,MAAM,CACrF,GACC,+BAA+B,GAC/B,sBAAsB,CAAC;AAEzB,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,OAAO,CAAC,EAAE,2BAA2B,CAAC;IAC/C,QAAQ,CAAC,KAAK,CAAC,EAAE,yBAAyB,CAAC;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAC3C;AAED,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,GAChD,IAAI,CACF,qBAAqB,CAAC,SAAS,CAAC,EAC9B,MAAM,mBAAmB,GACzB,UAAU,GACV,yBAAyB,GACzB,eAAe,GACf,wBAAwB,GACxB,oBAAoB,GACpB,MAAM,GACN,MAAM,CACT,CAAC"}

package/dist/components/color-picker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+C,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAwGjE;yBAxGe,WAAW"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+C,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAKvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAsNjE;yBAtNe,WAAW"}

package/dist/components/color-picker/ColorPicker.js

@@ -1,6 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
+import { useMergedRefs } from "@gunkin/uiify/hooks";
+import { composeEventHandlers } from "@gunkin/uiify/core/compose-event-handlers";
+import { mergeRepeatedSlotProps, omitProps } from "../../core/slot-props.js";
 import { Field } from "../field/index.js";
 function ColorPicker(props) {
   const {
@@ -16,6 +19,7 @@ function ColorPicker(props) {
     onChange,
     onValueChange,
     ref,
+    slotProps,
     style,
     value,
     ...nativeProps
@@ -32,6 +36,110 @@ function ColorPicker(props) {
     if (name.startsWith("data-")) rootDataProps[name] = propValue;
     else nativeInputProps[name] = propValue;
   }
+  const fieldProps = omitProps(
+    mergeRepeatedSlotProps(
+      { ...rootDataProps, className, style },
+      slotProps?.field
+    ),
+    [
+      "children",
+      "dangerouslySetInnerHTML",
+      "data-disabled",
+      "data-invalid",
+      "data-part",
+      "data-required",
+      "data-uiify-color-picker",
+      "data-uiify-field",
+      "disabled",
+      "id",
+      "invalid",
+      "required"
+    ]
+  );
+  const labelProps = omitProps(slotProps?.label, [
+    "children",
+    "dangerouslySetInnerHTML",
+    "data-disabled",
+    "data-part",
+    "data-required",
+    "data-uiify-color-picker",
+    "fieldId",
+    "htmlFor",
+    "id",
+    "required"
+  ]);
+  const surfaceProps = omitProps(slotProps?.surface, [
+    "children",
+    "dangerouslySetInnerHTML",
+    "data-part",
+    "data-uiify-color-picker",
+    "data-value"
+  ]);
+  const controlProps = omitProps(slotProps?.control, [
+    "aria-describedby",
+    "aria-hidden",
+    "aria-invalid",
+    "aria-labelledby",
+    "aria-required",
+    "children",
+    "dangerouslySetInnerHTML",
+    "defaultValue",
+    "data-disabled",
+    "data-invalid",
+    "data-part",
+    "data-required",
+    "data-uiify-color-picker",
+    "data-uiify-input",
+    "disabled",
+    "fieldId",
+    "id",
+    "name",
+    "readOnly",
+    "required",
+    "tabIndex",
+    "type",
+    "value"
+  ]);
+  const inputProps = omitProps(
+    mergeRepeatedSlotProps(
+      nativeInputProps,
+      omitProps(slotProps?.input, [
+        "alpha",
+        "aria-invalid",
+        "aria-label",
+        "aria-labelledby",
+        "children",
+        "colorspace",
+        "data-part",
+        "data-uiify-color-picker",
+        "defaultValue",
+        "disabled",
+        "dangerouslySetInnerHTML",
+        "id",
+        "required",
+        "type",
+        "value"
+      ])
+    ),
+    [
+      "alpha",
+      "aria-invalid",
+      "aria-label",
+      "aria-labelledby",
+      "children",
+      "colorspace",
+      "data-part",
+      "data-uiify-color-picker",
+      "disabled",
+      "defaultValue",
+      "dangerouslySetInnerHTML",
+      "id",
+      "type",
+      "value"
+    ]
+  );
+  const mergedInputRef = useMergedRefs(ref, inputProps.ref, nativeInputRef);
+  const slotOnChange = inputProps.onChange;
   const controlStyle = {
     "--uiify-color-picker-value": selectedValue
   };
@@ -40,72 +148,80 @@ function ColorPicker(props) {
   return /* @__PURE__ */ jsxs(
     Field.Root,
     {
-      className,
-      ...rootDataProps,
+      ...fieldProps,
       "data-uiify-color-picker": "",
       disabled,
       id: fieldId,
       invalid,
       required,
-      style,
       children: [
         /* @__PURE__ */ jsx(
           Field.Label,
           {
+            ...labelProps,
             disabled,
             fieldId,
-            onClick: (event) => {
+            onClick: composeEventHandlers(labelProps.onClick, (event) => {
               event.preventDefault();
               nativeInputRef.current?.click();
-            },
+            }),
             required,
             children: label
           }
         ),
-        /* @__PURE__ */ jsxs("div", { "data-part": "surface", "data-value": selectedValue, style: controlStyle, children: [
-          /* @__PURE__ */ jsx(
-            Field.Control,
-            {
-              "aria-hidden": "true",
-              as: "input",
-              disabled,
-              fieldId,
-              invalid,
-              readOnly: true,
-              required,
-              tabIndex: -1,
-              type: "text",
-              value: selectedValue
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ...nativeInputProps,
-              "aria-invalid": invalid || void 0,
-              "aria-label": ariaLabel,
-              "aria-labelledby": ariaLabel ? void 0 : `${fieldId}-label`,
-              "data-part": "native-input",
-              disabled,
-              id: inputId,
-              onChange: (event) => {
-                const nextValue = event.currentTarget.value;
-                if (value === void 0) setUncontrolledValue(nextValue);
-                onValueChange?.(nextValue);
-                onChange?.(event);
-              },
-              type: "color",
-              value: selectedValue,
-              ref: (element) => {
-                nativeInputRef.current = element;
-                if (typeof ref === "function") return ref(element);
-                else if (ref) ref.current = element;
-              },
-              ...alpha ? { alpha: "" } : {},
-              ...colorSpace ? { colorspace: colorSpace } : {}
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...surfaceProps,
+            "data-part": "surface",
+            "data-value": selectedValue,
+            style: { ...surfaceProps.style, ...controlStyle },
+            children: [
+              /* @__PURE__ */ jsx(
+                Field.Control,
+                {
+                  ...controlProps,
+                  "aria-hidden": "true",
+                  as: "input",
+                  disabled,
+                  fieldId,
+                  invalid,
+                  readOnly: true,
+                  required,
+                  tabIndex: -1,
+                  type: "text",
+                  value: selectedValue
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ...inputProps,
+                  "aria-invalid": invalid || void 0,
+                  "aria-label": ariaLabel,
+                  "aria-labelledby": ariaLabel ? void 0 : `${fieldId}-label`,
+                  "data-part": "native-input",
+                  disabled,
+                  id: inputId,
+                  onChange: (event) => {
+                    onChange?.(event);
+                    slotOnChange?.(event);
+                    if (event.defaultPrevented) return;
+                    const nextValue = event.currentTarget.value;
+                    if (value === void 0) setUncontrolledValue(nextValue);
+                    onValueChange?.(nextValue);
+                  },
+                  type: "color",
+                  value: selectedValue,
+                  required: required || void 0,
+                  ref: mergedInputRef,
+                  ...alpha ? { alpha: "" } : {},
+                  ...colorSpace ? { colorspace: colorSpace } : {}
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );

package/dist/components/color-picker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, useRef, useState, type CSSProperties, type ReactElement } from \"react\";\nimport { Field } from \"../field/index.js\";\nimport type { ColorPickerProps } from \"./types.js\";\n\nexport function ColorPicker(props: ColorPickerProps): ReactElement {\n  const {\n    alpha = false,\n    \"aria-label\": ariaLabel,\n    \"aria-invalid\": ariaInvalid,\n    className,\n    colorSpace,\n    defaultValue = \"#2563eb\",\n    disabled = false,\n    id,\n    label,\n    onChange,\n    onValueChange,\n    ref,\n    style,\n    value,\n    ...nativeProps\n  } = props;\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const fieldId = `${inputId}-field`;\n  const nativeInputRef = useRef<HTMLInputElement>(null);\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const selectedValue = value ?? uncontrolledValue;\n  const rootDataProps: Record<string, unknown> = {};\n  const nativeInputProps: Record<string, unknown> = {};\n\n  for (const [name, propValue] of Object.entries(nativeProps)) {\n    if (name.startsWith(\"data-\")) rootDataProps[name] = propValue;\n    else nativeInputProps[name] = propValue;\n  }\n\n  const controlStyle = {\n    \"--uiify-color-picker-value\": selectedValue,\n  } as CSSProperties;\n  const invalid =\n    (ariaInvalid !== undefined && ariaInvalid !== false && ariaInvalid !== \"false\") ||\n    rootDataProps[\"data-invalid\"] === true ||\n    rootDataProps[\"data-invalid\"] === \"\" ||\n    rootDataProps[\"data-invalid\"] === \"true\";\n  const required = Boolean(nativeInputProps.required);\n\n  return (\n    <Field.Root\n      className={className}\n      {...rootDataProps}\n      data-uiify-color-picker=\"\"\n      disabled={disabled}\n      id={fieldId}\n      invalid={invalid}\n      required={required}\n      style={style}\n    >\n      <Field.Label\n        disabled={disabled}\n        fieldId={fieldId}\n        onClick={(event) => {\n          event.preventDefault();\n          nativeInputRef.current?.click();\n        }}\n        required={required}\n      >\n        {label}\n      </Field.Label>\n      <div data-part=\"surface\" data-value={selectedValue} style={controlStyle}>\n        <Field.Control\n          aria-hidden=\"true\"\n          as=\"input\"\n          disabled={disabled}\n          fieldId={fieldId}\n          invalid={invalid}\n          readOnly\n          required={required}\n          tabIndex={-1}\n          type=\"text\"\n          value={selectedValue}\n        />\n        <input\n          {...nativeInputProps}\n          aria-invalid={invalid || undefined}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabel ? undefined : `${fieldId}-label`}\n          data-part=\"native-input\"\n          disabled={disabled}\n          id={inputId}\n          onChange={(event) => {\n            const nextValue = event.currentTarget.value;\n            if (value === undefined) setUncontrolledValue(nextValue);\n            onValueChange?.(nextValue);\n            onChange?.(event);\n          }}\n          type=\"color\"\n          value={selectedValue}\n          ref={(element) => {\n            nativeInputRef.current = element;\n            if (typeof ref === \"function\") return ref(element);\n            else if (ref) ref.current = element;\n          }}\n          {...(alpha ? { alpha: \"\" } : {})}\n          {...(colorSpace ? { colorspace: colorSpace } : {})}\n        />\n      </div>\n    </Field.Root>\n  );\n}\nColorPicker.displayName = \"ColorPicker\";\n"],"mappings":";AA2DM,cAWA,YAXA;AAzDN,SAAS,OAAO,QAAQ,gBAAuD;AAC/E,SAAS,aAAa;AAGf,SAAS,YAAY,OAAuC;AACjE,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,GAAG,OAAO;AAC1B,QAAM,iBAAiB,OAAyB,IAAI;AACpD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,YAAY;AACvE,QAAM,gBAAgB,SAAS;AAC/B,QAAM,gBAAyC,CAAC;AAChD,QAAM,mBAA4C,CAAC;AAEnD,aAAW,CAAC,MAAM,SAAS,KAAK,OAAO,QAAQ,WAAW,GAAG;AAC3D,QAAI,KAAK,WAAW,OAAO,EAAG,eAAc,IAAI,IAAI;AAAA,QAC/C,kBAAiB,IAAI,IAAI;AAAA,EAChC;AAEA,QAAM,eAAe;AAAA,IACnB,8BAA8B;AAAA,EAChC;AACA,QAAM,UACH,gBAAgB,UAAa,gBAAgB,SAAS,gBAAgB,WACvE,cAAc,cAAc,MAAM,QAClC,cAAc,cAAc,MAAM,MAClC,cAAc,cAAc,MAAM;AACpC,QAAM,WAAW,QAAQ,iBAAiB,QAAQ;AAElD,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,2BAAwB;AAAA,MACxB;AAAA,MACA,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC;AAAA,YACA;AAAA,YACA,SAAS,CAAC,UAAU;AAClB,oBAAM,eAAe;AACrB,6BAAe,SAAS,MAAM;AAAA,YAChC;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA,qBAAC,SAAI,aAAU,WAAU,cAAY,eAAe,OAAO,cACzD;AAAA;AAAA,YAAC,MAAM;AAAA,YAAN;AAAA,cACC,eAAY;AAAA,cACZ,IAAG;AAAA,cACH;AAAA,cACA;AAAA,cACA;AAAA,cACA,UAAQ;AAAA,cACR;AAAA,cACA,UAAU;AAAA,cACV,MAAK;AAAA,cACL,OAAO;AAAA;AAAA,UACT;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,gBAAc,WAAW;AAAA,cACzB,cAAY;AAAA,cACZ,mBAAiB,YAAY,SAAY,GAAG,OAAO;AAAA,cACnD,aAAU;AAAA,cACV;AAAA,cACA,IAAI;AAAA,cACJ,UAAU,CAAC,UAAU;AACnB,sBAAM,YAAY,MAAM,cAAc;AACtC,oBAAI,UAAU,OAAW,sBAAqB,SAAS;AACvD,gCAAgB,SAAS;AACzB,2BAAW,KAAK;AAAA,cAClB;AAAA,cACA,MAAK;AAAA,cACL,OAAO;AAAA,cACP,KAAK,CAAC,YAAY;AAChB,+BAAe,UAAU;AACzB,oBAAI,OAAO,QAAQ,WAAY,QAAO,IAAI,OAAO;AAAA,yBACxC,IAAK,KAAI,UAAU;AAAA,cAC9B;AAAA,cACC,GAAI,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;AAAA,cAC7B,GAAI,aAAa,EAAE,YAAY,WAAW,IAAI,CAAC;AAAA;AAAA,UAClD;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AACA,YAAY,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, useRef, useState, type CSSProperties, type ReactElement } from \"react\";\nimport { useMergedRefs } from \"@gunkin/uiify/hooks\";\nimport { composeEventHandlers } from \"@gunkin/uiify/core/compose-event-handlers\";\nimport { mergeRepeatedSlotProps, omitProps } from \"../../core/slot-props.js\";\nimport { Field } from \"../field/index.js\";\nimport type { ColorPickerProps } from \"./types.js\";\n\nexport function ColorPicker(props: ColorPickerProps): ReactElement {\n  const {\n    alpha = false,\n    \"aria-label\": ariaLabel,\n    \"aria-invalid\": ariaInvalid,\n    className,\n    colorSpace,\n    defaultValue = \"#2563eb\",\n    disabled = false,\n    id,\n    label,\n    onChange,\n    onValueChange,\n    ref,\n    slotProps,\n    style,\n    value,\n    ...nativeProps\n  } = props;\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const fieldId = `${inputId}-field`;\n  const nativeInputRef = useRef<HTMLInputElement>(null);\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const selectedValue = value ?? uncontrolledValue;\n  const rootDataProps: Record<string, unknown> = {};\n  const nativeInputProps: Record<string, unknown> = {};\n\n  for (const [name, propValue] of Object.entries(nativeProps)) {\n    if (name.startsWith(\"data-\")) rootDataProps[name] = propValue;\n    else nativeInputProps[name] = propValue;\n  }\n\n  const fieldProps = omitProps(\n    mergeRepeatedSlotProps(\n      { ...rootDataProps, className, style },\n      slotProps?.field as Record<string, unknown> | undefined,\n    ),\n    [\n      \"children\",\n      \"dangerouslySetInnerHTML\",\n      \"data-disabled\",\n      \"data-invalid\",\n      \"data-part\",\n      \"data-required\",\n      \"data-uiify-color-picker\",\n      \"data-uiify-field\",\n      \"disabled\",\n      \"id\",\n      \"invalid\",\n      \"required\",\n    ],\n  );\n  const labelProps = omitProps(slotProps?.label, [\n    \"children\",\n    \"dangerouslySetInnerHTML\",\n    \"data-disabled\",\n    \"data-part\",\n    \"data-required\",\n    \"data-uiify-color-picker\",\n    \"fieldId\",\n    \"htmlFor\",\n    \"id\",\n    \"required\",\n  ]);\n  const surfaceProps = omitProps(slotProps?.surface, [\n    \"children\",\n    \"dangerouslySetInnerHTML\",\n    \"data-part\",\n    \"data-uiify-color-picker\",\n    \"data-value\",\n  ]);\n  const controlProps = omitProps(slotProps?.control, [\n    \"aria-describedby\",\n    \"aria-hidden\",\n    \"aria-invalid\",\n    \"aria-labelledby\",\n    \"aria-required\",\n    \"children\",\n    \"dangerouslySetInnerHTML\",\n    \"defaultValue\",\n    \"data-disabled\",\n    \"data-invalid\",\n    \"data-part\",\n    \"data-required\",\n    \"data-uiify-color-picker\",\n    \"data-uiify-input\",\n    \"disabled\",\n    \"fieldId\",\n    \"id\",\n    \"name\",\n    \"readOnly\",\n    \"required\",\n    \"tabIndex\",\n    \"type\",\n    \"value\",\n  ]);\n  const inputProps = omitProps(\n    mergeRepeatedSlotProps(\n      nativeInputProps,\n      omitProps(slotProps?.input, [\n        \"alpha\",\n        \"aria-invalid\",\n        \"aria-label\",\n        \"aria-labelledby\",\n        \"children\",\n        \"colorspace\",\n        \"data-part\",\n        \"data-uiify-color-picker\",\n        \"defaultValue\",\n        \"disabled\",\n        \"dangerouslySetInnerHTML\",\n        \"id\",\n        \"required\",\n        \"type\",\n        \"value\",\n      ]) as Record<string, unknown>,\n    ),\n    [\n      \"alpha\",\n      \"aria-invalid\",\n      \"aria-label\",\n      \"aria-labelledby\",\n      \"children\",\n      \"colorspace\",\n      \"data-part\",\n      \"data-uiify-color-picker\",\n      \"disabled\",\n      \"defaultValue\",\n      \"dangerouslySetInnerHTML\",\n      \"id\",\n      \"type\",\n      \"value\",\n    ],\n  );\n  const mergedInputRef = useMergedRefs(ref, inputProps.ref as typeof ref, nativeInputRef);\n  const slotOnChange = inputProps.onChange as typeof onChange;\n\n  const controlStyle = {\n    \"--uiify-color-picker-value\": selectedValue,\n  } as CSSProperties;\n  const invalid =\n    (ariaInvalid !== undefined && ariaInvalid !== false && ariaInvalid !== \"false\") ||\n    rootDataProps[\"data-invalid\"] === true ||\n    rootDataProps[\"data-invalid\"] === \"\" ||\n    rootDataProps[\"data-invalid\"] === \"true\";\n  const required = Boolean(nativeInputProps.required);\n\n  return (\n    <Field.Root\n      {...fieldProps}\n      data-uiify-color-picker=\"\"\n      disabled={disabled}\n      id={fieldId}\n      invalid={invalid}\n      required={required}\n    >\n      <Field.Label\n        {...labelProps}\n        disabled={disabled}\n        fieldId={fieldId}\n        onClick={composeEventHandlers(labelProps.onClick, (event) => {\n          event.preventDefault();\n          nativeInputRef.current?.click();\n        })}\n        required={required}\n      >\n        {label}\n      </Field.Label>\n      <div\n        {...surfaceProps}\n        data-part=\"surface\"\n        data-value={selectedValue}\n        style={{ ...surfaceProps.style, ...controlStyle }}\n      >\n        <Field.Control\n          {...controlProps}\n          aria-hidden=\"true\"\n          as=\"input\"\n          disabled={disabled}\n          fieldId={fieldId}\n          invalid={invalid}\n          readOnly\n          required={required}\n          tabIndex={-1}\n          type=\"text\"\n          value={selectedValue}\n        />\n        <input\n          {...inputProps}\n          aria-invalid={invalid || undefined}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabel ? undefined : `${fieldId}-label`}\n          data-part=\"native-input\"\n          disabled={disabled}\n          id={inputId}\n          onChange={(event) => {\n            onChange?.(event);\n            slotOnChange?.(event);\n            if (event.defaultPrevented) return;\n            const nextValue = event.currentTarget.value;\n            if (value === undefined) setUncontrolledValue(nextValue);\n            onValueChange?.(nextValue);\n          }}\n          type=\"color\"\n          value={selectedValue}\n          required={required || undefined}\n          ref={mergedInputRef}\n          {...(alpha ? { alpha: \"\" } : {})}\n          {...(colorSpace ? { colorspace: colorSpace } : {})}\n        />\n      </div>\n    </Field.Root>\n  );\n}\nColorPicker.displayName = \"ColorPicker\";\n"],"mappings":"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","names":[]}

package/dist/components/color-picker/index.d.ts

@@ -1,3 +1,3 @@
 export { ColorPicker } from "./ColorPicker.js";
-export type { ColorPickerProps, ColorSpace } from "./types.js";
+export type { ColorPickerControlSlotProps, ColorPickerFieldSlotProps, ColorPickerInputSlotProps, ColorPickerLabelSlotProps, ColorPickerProps, ColorPickerSlotProps, ColorPickerSurfaceSlotProps, ColorSpace, } from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EACV,2BAA2B,EAC3B,yBAAyB,EACzB,yBAAyB,EACzB,yBAAyB,EACzB,gBAAgB,EAChB,oBAAoB,EACpB,2BAA2B,EAC3B,UAAU,GACX,MAAM,YAAY,CAAC"}

package/dist/components/color-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/color-picker/index.ts"],"sourcesContent":["export { ColorPicker } from \"./ColorPicker.js\";\nexport type { ColorPickerProps, ColorSpace } from \"./types.js\";\n"],"mappings":"AAAA,SAAS,mBAAmB;","names":[]}
+{"version":3,"sources":["../../../src/components/color-picker/index.ts"],"sourcesContent":["export { ColorPicker } from \"./ColorPicker.js\";\nexport type {\n  ColorPickerControlSlotProps,\n  ColorPickerFieldSlotProps,\n  ColorPickerInputSlotProps,\n  ColorPickerLabelSlotProps,\n  ColorPickerProps,\n  ColorPickerSlotProps,\n  ColorPickerSurfaceSlotProps,\n  ColorSpace,\n} from \"./types.js\";\n"],"mappings":"AAAA,SAAS,mBAAmB;","names":[]}

package/dist/components/color-picker/types.d.ts

@@ -1,11 +1,44 @@
 import type { ChangeEventHandler, ComponentPropsWithRef, CSSProperties, Ref } from "react";
+import type { ConsumerDataAttributes } from "../../core/slot-props.js";
 export type ColorSpace = "limited-srgb" | "display-p3";
+type ColorPickerPartOwnedAttributes = {
+    readonly "data-part"?: never;
+    readonly "data-uiify-color-picker"?: never;
+};
+type ColorPickerLabelOwnedAttributes = ColorPickerPartOwnedAttributes & {
+    readonly "data-disabled"?: never;
+    readonly "data-required"?: never;
+};
+type ColorPickerSurfaceOwnedAttributes = ColorPickerPartOwnedAttributes & {
+    readonly "data-value"?: never;
+};
+type ColorPickerControlOwnedAttributes = ColorPickerLabelOwnedAttributes & {
+    readonly "data-invalid"?: never;
+    readonly "data-uiify-input"?: never;
+};
+type ColorPickerFieldOwnedAttributes = ColorPickerLabelOwnedAttributes & {
+    readonly "data-invalid"?: never;
+    readonly "data-uiify-field"?: never;
+};
+export type ColorPickerFieldSlotProps = Omit<ComponentPropsWithRef<"div">, "children" | "dangerouslySetInnerHTML" | "data-disabled" | "data-invalid" | "data-part" | "data-required" | "data-uiify-color-picker" | "data-uiify-field" | "id"> & ConsumerDataAttributes & ColorPickerFieldOwnedAttributes;
+export type ColorPickerLabelSlotProps = Omit<ComponentPropsWithRef<"label">, "children" | "dangerouslySetInnerHTML" | "id" | "htmlFor" | "data-disabled" | "data-part" | "data-required" | "data-uiify-color-picker"> & ConsumerDataAttributes & ColorPickerLabelOwnedAttributes;
+export type ColorPickerSurfaceSlotProps = Omit<ComponentPropsWithRef<"div">, "children" | "dangerouslySetInnerHTML" | "data-part" | "data-uiify-color-picker" | "data-value"> & ConsumerDataAttributes & ColorPickerSurfaceOwnedAttributes;
+export type ColorPickerControlSlotProps = Omit<ComponentPropsWithRef<"input">, "children" | "dangerouslySetInnerHTML" | "aria-describedby" | "aria-hidden" | "aria-invalid" | "aria-labelledby" | "aria-required" | "disabled" | "defaultValue" | "id" | "name" | "readOnly" | "required" | "tabIndex" | "type" | "value" | "data-disabled" | "data-invalid" | "data-part" | "data-required" | "data-uiify-color-picker" | "data-uiify-input"> & ConsumerDataAttributes & ColorPickerControlOwnedAttributes;
+export type ColorPickerInputSlotProps = Omit<ComponentPropsWithRef<"input">, "children" | "dangerouslySetInnerHTML" | "aria-invalid" | "aria-label" | "aria-labelledby" | "disabled" | "id" | "type" | "value" | "alpha" | "colorspace" | "defaultValue" | "data-part" | "data-uiify-color-picker" | "required"> & ConsumerDataAttributes & ColorPickerPartOwnedAttributes;
+export interface ColorPickerSlotProps {
+    readonly field?: ColorPickerFieldSlotProps;
+    readonly label?: ColorPickerLabelSlotProps;
+    readonly surface?: ColorPickerSurfaceSlotProps;
+    readonly control?: ColorPickerControlSlotProps;
+    readonly input?: ColorPickerInputSlotProps;
+}
 export interface ColorPickerOwnProps {
     readonly alpha?: boolean;
     readonly colorSpace?: ColorSpace;
     readonly defaultValue?: string;
     readonly label: string;
     readonly onValueChange?: (value: string) => void;
+    readonly slotProps?: ColorPickerSlotProps;
     readonly value?: string;
 }
 export type ColorPickerProps = Omit<ComponentPropsWithRef<"input">, "alpha" | "className" | "colorSpace" | "defaultValue" | "onChange" | "ref" | "style" | "type" | "value"> & ColorPickerOwnProps & {
@@ -13,5 +46,9 @@ export type ColorPickerProps = Omit<ComponentPropsWithRef<"input">, "alpha" | "c
     readonly onChange?: ChangeEventHandler<HTMLInputElement>;
     readonly ref?: Ref<HTMLInputElement>;
     readonly style?: CSSProperties;
+} & {
+    readonly "data-uiify-color-picker"?: never;
+    readonly "data-uiify-field"?: never;
 };
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/color-picker/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3F,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;AAEvD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC;IACjC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,CAAC,OAAO,CAAC,EAC5B,OAAO,GACP,WAAW,GACX,YAAY,GACZ,cAAc,GACd,UAAU,GACV,KAAK,GACL,OAAO,GACP,MAAM,GACN,OAAO,CACV,GACC,mBAAmB,GAAG;IACpB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACzD,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACrC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/types.ts"],"names":[],"mappings":"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"}

package/dist/components/combobox/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,WAAW,EAEX,YAAY,EAEb,MAAM,OAAO,CAAC;AA6Bf,OAAO,KAAK,EAEV,oBAAoB,EAGpB,iBAAiB,EAEjB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAUnD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,GAAG,IAAI,CAkQ1E;yBAlQe,YAAY;;;AAqQ5B,wBAAgB,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC7D,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,GAC/B,YAAY,GAAG,IAAI,CAgBrB;yBAlBe,eAAe;;;AAkE/B,wBAAgB,YAAY,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC1D,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,YAAY,GAAG,IAAI,CAKrB;yBAPe,YAAY;;;AAU5B,wBAAgB,aAAa,CAAC,GAAG,SAAS,WAAW,GAAG,OAAO,EAC7D,KAAK,EAAE,kBAAkB,CAAC,GAAG,CAAC,GAC7B,YAAY,GAAG,IAAI,CAyGrB;AAED,wBAAgB,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,GAC/B,YAAY,GAAG,IAAI,CAgCrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CA+CnF;yBA/Ce,eAAe;;;AAkD/B,wBAAgB,YAAY,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CAmC7E;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CAY/E;AAED,eAAO,MAAM,QAAQ;;;;;;;;;CASpB,CAAC"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,WAAW,EAEX,YAAY,EAEb,MAAM,OAAO,CAAC;AA8Bf,OAAO,KAAK,EAEV,oBAAoB,EAGpB,iBAAiB,EAEjB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAUnD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,GAAG,IAAI,CAkQ1E;yBAlQe,YAAY;;;AAqQ5B,wBAAgB,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC7D,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,GAC/B,YAAY,GAAG,IAAI,CAgBrB;yBAlBe,eAAe;;;AA4E/B,wBAAgB,YAAY,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC1D,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,YAAY,GAAG,IAAI,CAKrB;yBAPe,YAAY;;;AAU5B,wBAAgB,aAAa,CAAC,GAAG,SAAS,WAAW,GAAG,OAAO,EAC7D,KAAK,EAAE,kBAAkB,CAAC,GAAG,CAAC,GAC7B,YAAY,GAAG,IAAI,CAyGrB;AAED,wBAAgB,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,GAC/B,YAAY,GAAG,IAAI,CAgCrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAiDnF;yBAjDe,eAAe;;;AAoD/B,wBAAgB,YAAY,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CA0C7E;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CAa/E;AAED,eAAO,MAAM,QAAQ;;;;;;;;;CASpB,CAAC"}

package/dist/components/combobox/Combobox.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
 import { useCallback, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import {
   useControllableState,
@@ -19,6 +20,7 @@ import { DismissableLayer } from "@gunkin/uiify/core/dismissable-layer";
 import { isComposingKeyEvent } from "@gunkin/uiify/core/ime";
 import { usePopover } from "@gunkin/uiify/core/popover";
 import { useRenderElement } from "@gunkin/uiify/core/render";
+import { resolveRepeatedSlotProps } from "../../core/slot-props.js";
 import {
   createComboboxActiveStore,
   defaultComboboxFilter,
@@ -278,24 +280,31 @@ function ComboboxControl(props) {
 }
 ComboboxControl.displayName = "ComboboxControl";
 function ComboboxTagsMultiple(props) {
-  const { as, render, children, className, ...consumerProps } = props;
+  const { as, render, children, className, slotProps, ...consumerProps } = props;
   const { getValueLabel, removeValue, selectedValues } = useComboboxContext("Tags");
   const tags = selectedValues.map((value) => {
     const label = getValueLabel(value);
-    return /* @__PURE__ */ jsxs("span", { "data-part": "tag", children: [
-      label,
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          "aria-label": `Remove ${label}`,
-          "data-part": "tag-remove",
-          type: "button",
-          onMouseDown: (event) => event.preventDefault(),
-          onClick: () => removeValue(value),
-          children: "\xD7"
-        }
-      )
-    ] }, value);
+    const tagProps = resolveRepeatedSlotProps(slotProps?.tag, value, ["data-part"]);
+    const removeProps = resolveRepeatedSlotProps(slotProps?.remove, value, [
+      "aria-label",
+      "data-part",
+      "type"
+    ]);
+    return /* @__PURE__ */ createElement("span", { ...tagProps, "data-part": "tag", key: value }, label, /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...removeProps,
+        "aria-label": `Remove ${label}`,
+        "data-part": "tag-remove",
+        type: "button",
+        onMouseDown: (event) => {
+          removeProps.onMouseDown?.(event);
+          event.preventDefault();
+        },
+        onClick: composeEventHandlers(removeProps.onClick, () => removeValue(value)),
+        children: "\xD7"
+      }
+    ));
   });
   return useRenderElement({
     as,
@@ -446,7 +455,7 @@ function ComboboxTrigger(props) {
   });
 }
 function ComboboxContent(props) {
-  const { align = "start", children, className, side = "bottom" } = props;
+  const { align = "start", children, className, side = "bottom", ...consumerProps } = props;
   const {
     close,
     filterFn,
@@ -467,11 +476,13 @@ function ComboboxContent(props) {
     if (inputNode) set.add(inputNode);
     return set;
   }, [inputNode]);
-  const mergedRef = useMergedRefs(popupRef, positionerRef);
+  const [consumerRef, domProps] = splitRef(consumerProps);
+  const mergedRef = useMergedRefs(popupRef, positionerRef, consumerRef);
   return /* @__PURE__ */ jsx(
     DismissableLayer,
     {
       branches,
+      ...domProps,
       onDismiss: () => close(),
       ...popupProps,
       ...positionerProps,
@@ -490,10 +501,18 @@ function ComboboxContent(props) {
 }
 ComboboxContent.displayName = "ComboboxContent";
 function ComboboxItem(props) {
-  const { className, item } = props;
+  const {
+    className,
+    item,
+    onClick: consumerOnClick,
+    onMouseDown: consumerOnMouseDown,
+    ref: consumerRef,
+    ...consumerProps
+  } = props;
   const { activeStore, isValueSelected, multiple, selectItem } = useComboboxContext("Item");
   const id = useId();
-  const ref = useCollectionItem({ data: item, id });
+  const collectionRef = useCollectionItem({ data: item, id });
+  const ref = useMergedRefs(collectionRef, consumerRef);
   const active = useSyncExternalStore(
     (onStoreChange) => activeStore.subscribeItem(id, onStoreChange),
     () => activeStore.isActive(id),
@@ -503,6 +522,7 @@ function ComboboxItem(props) {
   return useRenderElement({
     defaultTag: "div",
     props: {
+      ...consumerProps,
       ref,
       id,
       role: "option",
@@ -514,21 +534,20 @@ function ComboboxItem(props) {
       "data-part": "item",
       ...className ? { className } : {},
       children: item.label,
-      onMouseDown(event) {
-        event.preventDefault();
-      },
-      onClick: () => {
+      onMouseDown: composeEventHandlers(consumerOnMouseDown, (event) => event.preventDefault()),
+      onClick: composeEventHandlers(consumerOnClick, () => {
         if (!item.disabled) selectItem(item);
-      }
+      })
     },
     state: { active, disabled: Boolean(item.disabled), selected }
   });
 }
 function ComboboxEmpty(props) {
-  const { children, className } = props;
+  const { children, className, ...consumerProps } = props;
   return useRenderElement({
     defaultTag: "div",
     props: {
+      ...consumerProps,
       role: "presentation",
       "data-part": "empty",
       ...className ? { className } : {},