@gunkin/uiify 0.0.4-alpha → 0.0.5-alpha

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

@@ -1,37 +1,7 @@
-import type { ReactElement } from "react";
-import type { ColorPickerRootProps, ColorPickerTriggerOwnProps, ColorPickerContentOwnProps, ColorPickerAreaOwnProps, ColorPickerSliderOwnProps, ColorPickerSwatchOwnProps, ColorPickerSwatchGroupOwnProps, ColorPickerFieldOwnProps } from "./types.js";
-export type { Color, ColorFormat } from "./types.js";
-export declare function ColorPickerRoot(props: ColorPickerRootProps): ReactElement | null;
-export declare namespace ColorPickerRoot {
+import { type ReactElement } from "react";
+import type { ColorPickerProps } from "./types.js";
+export declare function ColorPicker(props: ColorPickerProps): ReactElement;
+export declare namespace ColorPicker {
     var displayName: string;
 }
-export declare function ColorPickerTrigger(props: ColorPickerTriggerOwnProps): ReactElement | null;
-export declare namespace ColorPickerTrigger {
-    var displayName: string;
-}
-export declare function ColorPickerContent(props: ColorPickerContentOwnProps): ReactElement | null;
-export declare namespace ColorPickerContent {
-    var displayName: string;
-}
-export declare function ColorPickerArea(props: ColorPickerAreaOwnProps): ReactElement | null;
-export declare namespace ColorPickerArea {
-    var displayName: string;
-}
-export declare function ColorPickerSlider(props: ColorPickerSliderOwnProps): ReactElement | null;
-export declare namespace ColorPickerSlider {
-    var displayName: string;
-}
-export declare function ColorPickerSwatch(props: ColorPickerSwatchOwnProps): ReactElement | null;
-export declare function ColorPickerSwatchGroup(props: ColorPickerSwatchGroupOwnProps): ReactElement | null;
-export declare function ColorPickerField(props: ColorPickerFieldOwnProps): ReactElement | null;
-export declare const ColorPicker: {
-    Area: typeof ColorPickerArea;
-    Content: typeof ColorPickerContent;
-    Field: typeof ColorPickerField;
-    Root: typeof ColorPickerRoot;
-    Slider: typeof ColorPickerSlider;
-    Swatch: typeof ColorPickerSwatch;
-    SwatchGroup: typeof ColorPickerSwatchGroup;
-    Trigger: typeof ColorPickerTrigger;
-};
 //# sourceMappingURL=ColorPicker.d.ts.map

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":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,OAAO,CAAC;AAO1D,OAAO,KAAK,EAGV,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,EAC1B,uBAAuB,EACvB,yBAAyB,EACzB,yBAAyB,EACzB,8BAA8B,EAC9B,wBAAwB,EACzB,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAKrD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CA2BhF;yBA3Be,eAAe;;;AA8B/B,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,GAAG,IAAI,CASzF;yBATe,kBAAkB;;;AAYlC,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,GAAG,IAAI,CAQzF;yBARe,kBAAkB;;;AAWlC,wBAAgB,eAAe,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAmCnF;yBAnCe,eAAe;;;AAsC/B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CA4BvF;yBA5Be,iBAAiB;;;AA+BjC,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CAiBvF;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,8BAA8B,GAAG,YAAY,GAAG,IAAI,CAajG;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,GAAG,IAAI,CAkBrF;AAED,eAAO,MAAM,WAAW;;;;;;;;;CASvB,CAAC"}
+{"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"}

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

@@ -1,185 +1,117 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useControllableState, useId } from "@gunkin/uiify/hooks";
-import { createPartContext } from "@gunkin/uiify/core";
-import { Popup } from "../popup/index.js";
-import { Slider } from "../slider/Slider.js";
-import { useRenderElement } from "@gunkin/uiify/core/render";
-import { colorToHex, createColor, formatColor, hsbToRgb, parseHex, rgbToHsb } from "./color.js";
-const [ColorPickerProvider, useColorPickerContext] = createPartContext("ColorPicker");
-function ColorPickerRoot(props) {
+import { useId, useRef, useState } from "react";
+import { Field } from "../field/index.js";
+function ColorPicker(props) {
   const {
-    alpha = true,
-    children,
-    defaultValue = createColor({ r: 255, g: 0, b: 0, a: 1 }),
-    format = "hex",
+    alpha = false,
+    "aria-label": ariaLabel,
+    "aria-invalid": ariaInvalid,
+    className,
+    colorSpace,
+    defaultValue = "#2563eb",
+    disabled = false,
+    id,
+    label,
     onChange,
-    value: controlledValue
+    onValueChange,
+    ref,
+    style,
+    value,
+    ...nativeProps
   } = props;
-  const [color, setColor] = useControllableState({
-    defaultValue,
-    ...controlledValue !== void 0 ? { value: controlledValue } : {},
-    ...onChange ? { onChange } : {}
-  });
-  const popoverId = useId(void 0, "uiify-color-picker");
-  const contextValue = useMemo(
-    () => ({ alpha, color, format, popoverId, setColor }),
-    [alpha, color, format, popoverId, setColor]
-  );
-  return /* @__PURE__ */ jsx(ColorPickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx(Popup.Root, { id: popoverId, children }) });
-}
-ColorPickerRoot.displayName = "ColorPickerRoot";
-function ColorPickerTrigger(props) {
-  const { children, className } = props;
-  const { color, popoverId } = useColorPickerContext("Trigger");
-  return /* @__PURE__ */ jsx(Popup.Trigger, { __popupId: popoverId, ...className ? { className } : {}, children: children ?? colorToHex(color) });
-}
-ColorPickerTrigger.displayName = "ColorPickerTrigger";
-function ColorPickerContent(props) {
-  const { children, className } = props;
-  const { popoverId } = useColorPickerContext("Content");
-  return /* @__PURE__ */ jsx(Popup.Content, { __popupId: popoverId, ...className ? { className } : {}, children });
-}
-ColorPickerContent.displayName = "ColorPickerContent";
-function ColorPickerArea(props) {
-  const { className } = props;
-  const { color, setColor } = useColorPickerContext("Area");
-  const hsb = rgbToHsb(color.rgb);
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const fieldId = `${inputId}-field`;
+  const nativeInputRef = useRef(null);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const selectedValue = value ?? uncontrolledValue;
+  const rootDataProps = {};
+  const nativeInputProps = {};
+  for (const [name, propValue] of Object.entries(nativeProps)) {
+    if (name.startsWith("data-")) rootDataProps[name] = propValue;
+    else nativeInputProps[name] = propValue;
+  }
+  const controlStyle = {
+    "--uiify-color-picker-value": selectedValue
+  };
+  const invalid = ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false" || rootDataProps["data-invalid"] === true || rootDataProps["data-invalid"] === "" || rootDataProps["data-invalid"] === "true";
+  const required = Boolean(nativeInputProps.required);
   return /* @__PURE__ */ jsxs(
-    "div",
+    Field.Root,
     {
       className,
-      "data-channel": "area",
-      style: {
-        background: `hsl(${Math.round(hsb.h)}, 100%, 50%)`
-      },
+      ...rootDataProps,
+      "data-uiify-color-picker": "",
+      disabled,
+      id: fieldId,
+      invalid,
+      required,
+      style,
       children: [
         /* @__PURE__ */ jsx(
-          Slider,
+          Field.Label,
           {
-            "aria-label": "Saturation",
-            max: 100,
-            min: 0,
-            onValueChange: (value) => {
-              setColor(createColor(hsbToRgb({ ...hsb, s: value })));
+            disabled,
+            fieldId,
+            onClick: (event) => {
+              event.preventDefault();
+              nativeInputRef.current?.click();
             },
-            step: 1,
-            value: hsb.s
+            required,
+            children: label
           }
         ),
-        /* @__PURE__ */ jsx(
-          Slider,
-          {
-            "aria-label": "Brightness",
-            max: 100,
-            min: 0,
-            onValueChange: (value) => {
-              setColor(createColor(hsbToRgb({ ...hsb, b: value })));
-            },
-            step: 1,
-            value: hsb.b
-          }
-        )
+        /* @__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 } : {}
+            }
+          )
+        ] })
       ]
     }
   );
 }
-ColorPickerArea.displayName = "ColorPickerArea";
-function ColorPickerSlider(props) {
-  const { channel, className } = props;
-  const { alpha, color, setColor } = useColorPickerContext("Slider");
-  const hsb = rgbToHsb(color.rgb);
-  if (channel === "alpha" && !alpha) return null;
-  const value = channel === "hue" ? hsb.h : color.rgb.a * 100;
-  const max = channel === "hue" ? 360 : 100;
-  return /* @__PURE__ */ jsx(
-    Slider,
-    {
-      "aria-label": channel,
-      "aria-valuetext": String(Math.round(value)),
-      className,
-      max,
-      min: 0,
-      onValueChange: (next) => {
-        if (channel === "hue") {
-          setColor(createColor(hsbToRgb({ ...hsb, h: next })));
-        } else {
-          setColor(createColor({ ...color.rgb, a: next / 100 }));
-        }
-      },
-      step: 1,
-      value
-    }
-  );
-}
-ColorPickerSlider.displayName = "ColorPickerSlider";
-function ColorPickerSwatch(props) {
-  const { className, value } = props;
-  const { setColor } = useColorPickerContext("Swatch");
-  const parsed = parseHex(value) ?? createColor({ r: 0, g: 0, b: 0, a: 1 });
-  return useRenderElement({
-    defaultTag: "button",
-    props: {
-      type: "button",
-      "aria-label": value,
-      "data-value": value,
-      style: { backgroundColor: value },
-      ...className ? { className } : {},
-      onClick: () => setColor(parsed)
-    },
-    state: {}
-  });
-}
-function ColorPickerSwatchGroup(props) {
-  const { children, className, swatches = [] } = props;
-  return useRenderElement({
-    defaultTag: "div",
-    props: {
-      role: "group",
-      ...className ? { className } : {},
-      children: children ?? swatches.map((swatch) => /* @__PURE__ */ jsx(ColorPickerSwatch, { value: swatch }, swatch))
-    },
-    state: {}
-  });
-}
-function ColorPickerField(props) {
-  const { className } = props;
-  const { color, format, setColor } = useColorPickerContext("Field");
-  return useRenderElement({
-    defaultTag: "input",
-    props: {
-      type: "text",
-      "aria-label": "Color value",
-      value: formatColor(color, format),
-      ...className ? { className } : {},
-      onChange(event) {
-        const parsed = parseHex(event.currentTarget.value);
-        if (parsed) setColor(parsed);
-      }
-    },
-    state: {}
-  });
-}
-const ColorPicker = {
-  Area: ColorPickerArea,
-  Content: ColorPickerContent,
-  Field: ColorPickerField,
-  Root: ColorPickerRoot,
-  Slider: ColorPickerSlider,
-  Swatch: ColorPickerSwatch,
-  SwatchGroup: ColorPickerSwatchGroup,
-  Trigger: ColorPickerTrigger
-};
+ColorPicker.displayName = "ColorPicker";
 export {
-  ColorPicker,
-  ColorPickerArea,
-  ColorPickerContent,
-  ColorPickerField,
-  ColorPickerRoot,
-  ColorPickerSlider,
-  ColorPickerSwatch,
-  ColorPickerSwatchGroup,
-  ColorPickerTrigger
+  ColorPicker
 };
 //# sourceMappingURL=ColorPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport type { ReactElement, SyntheticEvent } from \"react\";\nimport { useControllableState, useId } from \"@gunkin/uiify/hooks\";\nimport { createPartContext } from \"@gunkin/uiify/core\";\nimport { Popup } from \"../popup/index.js\";\nimport { Slider } from \"../slider/Slider.js\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport { colorToHex, createColor, formatColor, hsbToRgb, parseHex, rgbToHsb } from \"./color.js\";\nimport type {\n  Color,\n  ColorPickerContextValue,\n  ColorPickerRootProps,\n  ColorPickerTriggerOwnProps,\n  ColorPickerContentOwnProps,\n  ColorPickerAreaOwnProps,\n  ColorPickerSliderOwnProps,\n  ColorPickerSwatchOwnProps,\n  ColorPickerSwatchGroupOwnProps,\n  ColorPickerFieldOwnProps,\n} from \"./types.js\";\n\nexport type { Color, ColorFormat } from \"./types.js\";\n\nconst [ColorPickerProvider, useColorPickerContext] =\n  createPartContext<ColorPickerContextValue>(\"ColorPicker\");\n\nexport function ColorPickerRoot(props: ColorPickerRootProps): ReactElement | null {\n  const {\n    alpha = true,\n    children,\n    defaultValue = createColor({ r: 255, g: 0, b: 0, a: 1 }),\n    format = \"hex\",\n    onChange,\n    value: controlledValue,\n  } = props;\n\n  const [color, setColor] = useControllableState<Color>({\n    defaultValue,\n    ...(controlledValue !== undefined ? { value: controlledValue } : {}),\n    ...(onChange ? { onChange } : {}),\n  });\n  const popoverId = useId(undefined, \"uiify-color-picker\");\n\n  const contextValue = useMemo(\n    () => ({ alpha, color, format, popoverId, setColor }),\n    [alpha, color, format, popoverId, setColor],\n  );\n\n  return (\n    <ColorPickerProvider value={contextValue}>\n      <Popup.Root id={popoverId}>{children}</Popup.Root>\n    </ColorPickerProvider>\n  );\n}\nColorPickerRoot.displayName = \"ColorPickerRoot\";\n\nexport function ColorPickerTrigger(props: ColorPickerTriggerOwnProps): ReactElement | null {\n  const { children, className } = props;\n  const { color, popoverId } = useColorPickerContext(\"Trigger\");\n\n  return (\n    <Popup.Trigger __popupId={popoverId} {...(className ? { className } : {})}>\n      {children ?? colorToHex(color)}\n    </Popup.Trigger>\n  );\n}\nColorPickerTrigger.displayName = \"ColorPickerTrigger\";\n\nexport function ColorPickerContent(props: ColorPickerContentOwnProps): ReactElement | null {\n  const { children, className } = props;\n  const { popoverId } = useColorPickerContext(\"Content\");\n  return (\n    <Popup.Content __popupId={popoverId} {...(className ? { className } : {})}>\n      {children}\n    </Popup.Content>\n  );\n}\nColorPickerContent.displayName = \"ColorPickerContent\";\n\nexport function ColorPickerArea(props: ColorPickerAreaOwnProps): ReactElement | null {\n  const { className } = props;\n  const { color, setColor } = useColorPickerContext(\"Area\");\n  const hsb = rgbToHsb(color.rgb);\n\n  return (\n    <div\n      className={className}\n      data-channel=\"area\"\n      style={{\n        background: `hsl(${Math.round(hsb.h)}, 100%, 50%)`,\n      }}\n    >\n      <Slider\n        aria-label=\"Saturation\"\n        max={100}\n        min={0}\n        onValueChange={(value) => {\n          setColor(createColor(hsbToRgb({ ...hsb, s: value })));\n        }}\n        step={1}\n        value={hsb.s}\n      />\n      <Slider\n        aria-label=\"Brightness\"\n        max={100}\n        min={0}\n        onValueChange={(value) => {\n          setColor(createColor(hsbToRgb({ ...hsb, b: value })));\n        }}\n        step={1}\n        value={hsb.b}\n      />\n    </div>\n  );\n}\nColorPickerArea.displayName = \"ColorPickerArea\";\n\nexport function ColorPickerSlider(props: ColorPickerSliderOwnProps): ReactElement | null {\n  const { channel, className } = props;\n  const { alpha, color, setColor } = useColorPickerContext(\"Slider\");\n  const hsb = rgbToHsb(color.rgb);\n\n  if (channel === \"alpha\" && !alpha) return null;\n\n  const value = channel === \"hue\" ? hsb.h : color.rgb.a * 100;\n  const max = channel === \"hue\" ? 360 : 100;\n\n  return (\n    <Slider\n      aria-label={channel}\n      aria-valuetext={String(Math.round(value))}\n      className={className}\n      max={max}\n      min={0}\n      onValueChange={(next) => {\n        if (channel === \"hue\") {\n          setColor(createColor(hsbToRgb({ ...hsb, h: next })));\n        } else {\n          setColor(createColor({ ...color.rgb, a: next / 100 }));\n        }\n      }}\n      step={1}\n      value={value}\n    />\n  );\n}\nColorPickerSlider.displayName = \"ColorPickerSlider\";\n\nexport function ColorPickerSwatch(props: ColorPickerSwatchOwnProps): ReactElement | null {\n  const { className, value } = props;\n  const { setColor } = useColorPickerContext(\"Swatch\");\n  const parsed = parseHex(value) ?? createColor({ r: 0, g: 0, b: 0, a: 1 });\n\n  return useRenderElement({\n    defaultTag: \"button\",\n    props: {\n      type: \"button\",\n      \"aria-label\": value,\n      \"data-value\": value,\n      style: { backgroundColor: value },\n      ...(className ? { className } : {}),\n      onClick: () => setColor(parsed),\n    },\n    state: {},\n  });\n}\n\nexport function ColorPickerSwatchGroup(props: ColorPickerSwatchGroupOwnProps): ReactElement | null {\n  const { children, className, swatches = [] } = props;\n\n  return useRenderElement({\n    defaultTag: \"div\",\n    props: {\n      role: \"group\",\n      ...(className ? { className } : {}),\n      children:\n        children ?? swatches.map((swatch) => <ColorPickerSwatch key={swatch} value={swatch} />),\n    },\n    state: {},\n  });\n}\n\nexport function ColorPickerField(props: ColorPickerFieldOwnProps): ReactElement | null {\n  const { className } = props;\n  const { color, format, setColor } = useColorPickerContext(\"Field\");\n\n  return useRenderElement({\n    defaultTag: \"input\",\n    props: {\n      type: \"text\",\n      \"aria-label\": \"Color value\",\n      value: formatColor(color, format),\n      ...(className ? { className } : {}),\n      onChange(event: SyntheticEvent<HTMLInputElement>) {\n        const parsed = parseHex(event.currentTarget.value);\n        if (parsed) setColor(parsed);\n      },\n    },\n    state: {},\n  });\n}\n\nexport const ColorPicker = {\n  Area: ColorPickerArea,\n  Content: ColorPickerContent,\n  Field: ColorPickerField,\n  Root: ColorPickerRoot,\n  Slider: ColorPickerSlider,\n  Swatch: ColorPickerSwatch,\n  SwatchGroup: ColorPickerSwatchGroup,\n  Trigger: ColorPickerTrigger,\n};\n"],"mappings":"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","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 { 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":[]}

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

@@ -1,4 +1,3 @@
-export { ColorPicker, ColorPickerArea, ColorPickerContent, ColorPickerField, ColorPickerRoot, ColorPickerSlider, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerTrigger, } from "./ColorPicker.js";
-export type { ColorPickerAreaOwnProps, ColorPickerContentOwnProps, ColorPickerFieldOwnProps, ColorPickerRootControlledOwnProps, ColorPickerRootShellOwnProps, ColorPickerRootShellProps, ColorPickerRootProps, ColorPickerSliderOwnProps, ColorPickerSwatchGroupOwnProps, ColorPickerSwatchOwnProps, ColorPickerTriggerOwnProps, Color, ColorFormat, HsbColor, HslColor, RgbColor, } from "./types.js";
-export { colorToHex, createColor, formatColor, hsbToRgb, hslToRgb, parseColor, parseHex, rgbToHsb, rgbToHsl, } from "./color.js";
+export { ColorPicker } from "./ColorPicker.js";
+export type { ColorPickerProps, 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,EACL,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,uBAAuB,EACvB,0BAA0B,EAC1B,wBAAwB,EACxB,iCAAiC,EACjC,4BAA4B,EAC5B,yBAAyB,EACzB,oBAAoB,EACpB,yBAAyB,EACzB,8BAA8B,EAC9B,yBAAyB,EACzB,0BAA0B,EAC1B,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,UAAU,EACV,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,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,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

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

@@ -1,43 +1,5 @@
-import {
-  ColorPicker,
-  ColorPickerArea,
-  ColorPickerContent,
-  ColorPickerField,
-  ColorPickerRoot,
-  ColorPickerSlider,
-  ColorPickerSwatch,
-  ColorPickerSwatchGroup,
-  ColorPickerTrigger
-} from "./ColorPicker.js";
-import {
-  colorToHex,
-  createColor,
-  formatColor,
-  hsbToRgb,
-  hslToRgb,
-  parseColor,
-  parseHex,
-  rgbToHsb,
-  rgbToHsl
-} from "./color.js";
+import { ColorPicker } from "./ColorPicker.js";
 export {
-  ColorPicker,
-  ColorPickerArea,
-  ColorPickerContent,
-  ColorPickerField,
-  ColorPickerRoot,
-  ColorPickerSlider,
-  ColorPickerSwatch,
-  ColorPickerSwatchGroup,
-  ColorPickerTrigger,
-  colorToHex,
-  createColor,
-  formatColor,
-  hsbToRgb,
-  hslToRgb,
-  parseColor,
-  parseHex,
-  rgbToHsb,
-  rgbToHsl
+  ColorPicker
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/color-picker/index.ts"],"sourcesContent":["export {\n  ColorPicker,\n  ColorPickerArea,\n  ColorPickerContent,\n  ColorPickerField,\n  ColorPickerRoot,\n  ColorPickerSlider,\n  ColorPickerSwatch,\n  ColorPickerSwatchGroup,\n  ColorPickerTrigger,\n} from \"./ColorPicker.js\";\nexport type {\n  ColorPickerAreaOwnProps,\n  ColorPickerContentOwnProps,\n  ColorPickerFieldOwnProps,\n  ColorPickerRootControlledOwnProps,\n  ColorPickerRootShellOwnProps,\n  ColorPickerRootShellProps,\n  ColorPickerRootProps,\n  ColorPickerSliderOwnProps,\n  ColorPickerSwatchGroupOwnProps,\n  ColorPickerSwatchOwnProps,\n  ColorPickerTriggerOwnProps,\n  Color,\n  ColorFormat,\n  HsbColor,\n  HslColor,\n  RgbColor,\n} from \"./types.js\";\nexport {\n  colorToHex,\n  createColor,\n  formatColor,\n  hsbToRgb,\n  hslToRgb,\n  parseColor,\n  parseHex,\n  rgbToHsb,\n  rgbToHsl,\n} from \"./color.js\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAmBP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}
+{"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":[]}

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

@@ -1,73 +1,17 @@
-import type { ReactNode } from "react";
-export interface RgbColor {
-    readonly r: number;
-    readonly g: number;
-    readonly b: number;
-    readonly a: number;
-}
-export interface HslColor {
-    readonly h: number;
-    readonly s: number;
-    readonly l: number;
-    readonly a: number;
-}
-export interface HsbColor {
-    readonly h: number;
-    readonly s: number;
-    readonly b: number;
-    readonly a: number;
-}
-export type ColorFormat = "hex" | "rgb" | "hsl" | "hsb";
-export interface Color {
-    readonly rgb: RgbColor;
-}
-export interface ColorPickerContextValue {
-    readonly alpha: boolean;
-    readonly color: Color;
-    readonly format: ColorFormat;
-    readonly popoverId: string;
-    readonly setColor: (color: Color) => void;
-}
-export interface ColorPickerRootShellOwnProps {
+import type { ChangeEventHandler, ComponentPropsWithRef, CSSProperties, Ref } from "react";
+export type ColorSpace = "limited-srgb" | "display-p3";
+export interface ColorPickerOwnProps {
     readonly alpha?: boolean;
-    readonly defaultValue?: Color;
-    readonly format?: ColorFormat;
-}
-export interface ColorPickerRootControlledOwnProps {
-    readonly onChange?: (color: Color) => void;
-    readonly value?: Color;
+    readonly colorSpace?: ColorSpace;
+    readonly defaultValue?: string;
+    readonly label: string;
+    readonly onValueChange?: (value: string) => void;
+    readonly value?: string;
 }
-export interface ColorPickerRootShellProps extends ColorPickerRootShellOwnProps {
-    readonly children?: ReactNode;
-}
-export interface ColorPickerRootProps extends ColorPickerRootShellOwnProps, ColorPickerRootControlledOwnProps {
-    readonly children?: ReactNode;
-}
-export interface ColorPickerTriggerOwnProps {
-    readonly children?: ReactNode;
+export type ColorPickerProps = Omit<ComponentPropsWithRef<"input">, "alpha" | "className" | "colorSpace" | "defaultValue" | "onChange" | "ref" | "style" | "type" | "value"> & ColorPickerOwnProps & {
     readonly className?: string;
-}
-export interface ColorPickerContentOwnProps {
-    readonly children?: ReactNode;
-    readonly className?: string;
-}
-export interface ColorPickerAreaOwnProps {
-    readonly className?: string;
-}
-export interface ColorPickerSliderOwnProps {
-    readonly channel: "hue" | "alpha";
-    readonly className?: string;
-}
-export interface ColorPickerSwatchOwnProps {
-    readonly className?: string;
-    readonly value: string;
-}
-export interface ColorPickerSwatchGroupOwnProps {
-    readonly children?: ReactNode;
-    readonly className?: string;
-    readonly swatches?: readonly string[];
-}
-export interface ColorPickerFieldOwnProps {
-    readonly className?: string;
-}
+    readonly onChange?: ChangeEventHandler<HTMLInputElement>;
+    readonly ref?: Ref<HTMLInputElement>;
+    readonly style?: CSSProperties;
+};
 //# 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":"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"}
+{"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"}

package/dist/components/context-menu/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/context-menu/ContextMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,WAAW,EAKX,YAAY,EAEb,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,KAAK,EAEV,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,+BAA+B,EAC/B,4BAA4B,EAC5B,sBAAsB,EACtB,6BAA6B,EAC7B,6BAA6B,EAC9B,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,eAAe,EAAE,CAAC;AAKhC,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CA8DhF;yBA9De,eAAe;;;AAiE/B,wBAAgB,kBAAkB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAChE,KAAK,EAAE,uBAAuB,CAAC,GAAG,CAAC,GAClC,YAAY,GAAG,IAAI,CAsBrB;AAED,wBAAgB,kBAAkB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAChE,KAAK,EAAE,uBAAuB,CAAC,GAAG,CAAC,GAClC,YAAY,GAAG,IAAI,CA4CrB;yBA9Ce,kBAAkB;;;AAiDlC,wBAAgB,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC7D,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,GAC/B,YAAY,GAAG,IAAI,CA6DrB;yBA/De,eAAe;;;AA8F/B,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,+BAA+B,GACrC,YAAY,GAAG,IAAI,CAyCrB;yBA3Ce,uBAAuB;;;AA8CvC,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,4BAA4B,GAAG,YAAY,GAAG,IAAI,CAgC7F;yBAhCe,oBAAoB;;;AA6CpC,wBAAgB,cAAc,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,GAAG,IAAI,CAKjF;yBALe,cAAc;;;AAQ9B,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,6BAA6B,GAAG,YAAY,GAAG,IAAI,CAsC/F;yBAtCe,qBAAqB;;;AAyCrC,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,6BAA6B,GAAG,YAAY,GAAG,IAAI,CAoB/F;AAED,eAAO,MAAM,gBAAgB,kBAAY,CAAC;AAE1C,eAAO,MAAM,oBAAoB,sBAAgB,CAAC;AAElD,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/context-menu/ContextMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,WAAW,EAKX,YAAY,EAEb,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,KAAK,EAEV,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,+BAA+B,EAC/B,4BAA4B,EAC5B,sBAAsB,EACtB,6BAA6B,EAC7B,6BAA6B,EAC9B,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,eAAe,EAAE,CAAC;AAKhC,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CA8DhF;yBA9De,eAAe;;;AAiE/B,wBAAgB,kBAAkB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAChE,KAAK,EAAE,uBAAuB,CAAC,GAAG,CAAC,GAClC,YAAY,GAAG,IAAI,CAsBrB;AAED,wBAAgB,kBAAkB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAChE,KAAK,EAAE,uBAAuB,CAAC,GAAG,CAAC,GAClC,YAAY,GAAG,IAAI,CA6DrB;yBA/De,kBAAkB;;;AAkElC,wBAAgB,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC7D,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,GAC/B,YAAY,GAAG,IAAI,CA6DrB;yBA/De,eAAe;;;AA8F/B,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,+BAA+B,GACrC,YAAY,GAAG,IAAI,CAyCrB;yBA3Ce,uBAAuB;;;AA8CvC,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,4BAA4B,GAAG,YAAY,GAAG,IAAI,CAgC7F;yBAhCe,oBAAoB;;;AA6CpC,wBAAgB,cAAc,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,GAAG,IAAI,CAKjF;yBALe,cAAc;;;AAQ9B,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,6BAA6B,GAAG,YAAY,GAAG,IAAI,CAsC/F;yBAtCe,qBAAqB;;;AAyCrC,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,6BAA6B,GAAG,YAAY,GAAG,IAAI,CAoB/F;AAED,eAAO,MAAM,gBAAgB,kBAAY,CAAC;AAE1C,eAAO,MAAM,oBAAoB,sBAAgB,CAAC;AAElD,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC"}

package/dist/components/context-menu/ContextMenu.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { useMergedRefs } from "@gunkin/uiify/hooks";
+import { useIsomorphicLayoutEffect, useMergedRefs } from "@gunkin/uiify/hooks";
 import { createPartContext, splitRef } from "@gunkin/uiify/core";
 import { composeEventHandlers } from "@gunkin/uiify/core/compose-event-handlers";
 import { RovingFocusItem, RovingFocusRoot } from "@gunkin/uiify/core/roving-focus";
@@ -96,6 +96,18 @@ function ContextMenuContent(props) {
   const { close, contentRef, focusTrigger, open, popupProps, popupRef, positionerProps } = useContextMenuContext("Content");
   const [consumerRef, withoutRef] = splitRef(consumerProps);
   const mergedRef = useMergedRefs(popupRef, contentRef, consumerRef);
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return;
+    const content = contentRef.current;
+    const ownerDocument = content?.ownerDocument;
+    if (!content || !ownerDocument) return;
+    const handlePointerDown = (event) => {
+      if (event.composedPath().includes(content)) return;
+      close();
+    };
+    ownerDocument.addEventListener("pointerdown", handlePointerDown, true);
+    return () => ownerDocument.removeEventListener("pointerdown", handlePointerDown, true);
+  }, [close, contentRef, open]);
   const { onKeyDown: consumerOnKeyDown } = withoutRef;
   const handleKeyDown = (event) => {
     if (event.key === "Escape") {