@moduix/react 1.1.0

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

@@ -0,0 +1,39 @@
+import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
+import { ComponentProps } from "react";
+import { ColorPicker, parseColor } from "@ark-ui/react/color-picker";
+
+//#region src/components/color-picker/ColorPicker.d.ts
+type ColorPickerRootProps = ComponentProps<typeof ColorPicker.Root> & OverlayPortalProps;
+type ColorPickerRootProviderProps = ComponentProps<typeof ColorPicker.RootProvider> & OverlayPortalProps;
+declare const ColorPicker$1: import("react").ForwardRefExoticComponent<Omit<ColorPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<ColorPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<ColorPickerRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<ColorPicker.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<ColorPicker.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Positioner: import("react").ForwardRefExoticComponent<Omit<ColorPicker.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Area: import("react").ForwardRefExoticComponent<Omit<ColorPicker.AreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  AreaBackground: import("react").ForwardRefExoticComponent<Omit<ColorPicker.AreaBackgroundProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  AreaThumb: import("react").ForwardRefExoticComponent<Omit<ColorPicker.AreaThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ChannelSlider: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ChannelSliderTrack: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderTrackProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ChannelSliderThumb: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ChannelSliderLabel: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderLabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  ChannelSliderValueText: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelSliderValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  ChannelInput: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ChannelInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  EyeDropperTrigger: import("react").ForwardRefExoticComponent<Omit<ColorPicker.EyeDropperTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  FormatSelect: import("react").ForwardRefExoticComponent<Omit<ColorPicker.FormatSelectProps & import("react").RefAttributes<HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
+  FormatTrigger: import("react").ForwardRefExoticComponent<Omit<ColorPicker.FormatTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  SwatchGroup: import("react").ForwardRefExoticComponent<Omit<ColorPicker.SwatchGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  SwatchTrigger: import("react").ForwardRefExoticComponent<Omit<ColorPicker.SwatchTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Swatch: import("react").ForwardRefExoticComponent<Omit<ColorPicker.SwatchProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  SwatchIndicator: import("react").ForwardRefExoticComponent<Omit<ColorPicker.SwatchIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  TransparencyGrid: import("react").ForwardRefExoticComponent<Omit<ColorPicker.TransparencyGridProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ValueSwatch: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ValueSwatchProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ValueText: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  View: import("react").ForwardRefExoticComponent<Omit<ColorPicker.ViewProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<Omit<ColorPicker.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+};
+//#endregion
+export { ColorPicker$1 as ColorPicker, parseColor };

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

@@ -0,0 +1,275 @@
+import { CheckIcon, PipetteIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
+import ColorPicker_module_default from "./ColorPicker.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { ColorPicker, parseColor } from "@ark-ui/react/color-picker";
+//#region src/components/color-picker/ColorPicker.tsx
+const ColorPickerRoot = forwardRef(function ColorPickerRoot({ className, portalled, portalRef, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(ColorPicker.Root, {
+			ref,
+			"data-slot": "color-picker-root",
+			className: clsx(ColorPicker_module_default.root, normalizeClassName(className)),
+			...props
+		})
+	});
+});
+const ColorPickerRootProvider = forwardRef(function ColorPickerRootProvider({ className, portalled, portalRef, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(ColorPicker.RootProvider, {
+			ref,
+			"data-slot": "color-picker-root-provider",
+			className: clsx(ColorPicker_module_default.root, normalizeClassName(className)),
+			...props
+		})
+	});
+});
+const ColorPickerLabel = forwardRef(function ColorPickerLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.Label, {
+		ref,
+		"data-slot": "color-picker-label",
+		className: clsx(ColorPicker_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerControl = forwardRef(function ColorPickerControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.Control, {
+		ref,
+		"data-slot": "color-picker-control",
+		className: clsx(ColorPicker_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerTrigger = forwardRef(function ColorPickerTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.Trigger, {
+		ref,
+		"data-slot": "color-picker-trigger",
+		className: clsx(ColorPicker_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerPositioner = forwardRef(function ColorPickerPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(ColorPicker.Positioner, {
+		ref,
+		"data-slot": "color-picker-positioner",
+		className: clsx(ColorPicker_module_default.positioner, normalizeClassName(className)),
+		...props
+	}) });
+});
+const ColorPickerContent = forwardRef(function ColorPickerContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.Content, {
+		ref,
+		"data-slot": "color-picker-content",
+		className: clsx(ColorPicker_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerArea = forwardRef(function ColorPickerArea({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.Area, {
+		ref,
+		"data-slot": "color-picker-area",
+		className: clsx(ColorPicker_module_default.area, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerAreaBackground = forwardRef(function ColorPickerAreaBackground({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.AreaBackground, {
+		ref,
+		"data-slot": "color-picker-area-background",
+		className: clsx(ColorPicker_module_default.areaBackground, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerAreaThumb = forwardRef(function ColorPickerAreaThumb({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.AreaThumb, {
+		ref,
+		"data-slot": "color-picker-area-thumb",
+		className: clsx(ColorPicker_module_default.thumb, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerChannelSlider = forwardRef(function ColorPickerChannelSlider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.ChannelSlider, {
+		ref,
+		"data-slot": "color-picker-channel-slider",
+		className: clsx(ColorPicker_module_default.channelSlider, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerChannelSliderTrack = forwardRef(function ColorPickerChannelSliderTrack({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.ChannelSliderTrack, {
+		ref,
+		"data-slot": "color-picker-channel-slider-track",
+		className: clsx(ColorPicker_module_default.channelSliderTrack, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerChannelSliderThumb = forwardRef(function ColorPickerChannelSliderThumb({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.ChannelSliderThumb, {
+		ref,
+		"data-slot": "color-picker-channel-slider-thumb",
+		className: clsx(ColorPicker_module_default.thumb, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerChannelSliderLabel = forwardRef(function ColorPickerChannelSliderLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.ChannelSliderLabel, {
+		ref,
+		"data-slot": "color-picker-channel-slider-label",
+		className: clsx(ColorPicker_module_default.channelSliderLabel, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerChannelSliderValueText = forwardRef(function ColorPickerChannelSliderValueText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.ChannelSliderValueText, {
+		ref,
+		"data-slot": "color-picker-channel-slider-value-text",
+		className: clsx(ColorPicker_module_default.channelSliderValueText, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerChannelInput = forwardRef(function ColorPickerChannelInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.ChannelInput, {
+		ref,
+		"data-slot": "color-picker-channel-input",
+		className: clsx(ColorPicker_module_default.channelInput, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerEyeDropperTrigger = forwardRef(function ColorPickerEyeDropperTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.EyeDropperTrigger, {
+		ref,
+		"data-slot": "color-picker-eye-dropper-trigger",
+		className: clsx(ColorPicker_module_default.eyeDropperTrigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PipetteIcon, {})
+	});
+});
+const ColorPickerFormatSelect = forwardRef(function ColorPickerFormatSelect({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.FormatSelect, {
+		ref,
+		"data-slot": "color-picker-format-select",
+		className: clsx(ColorPicker_module_default.formatSelect, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerFormatTrigger = forwardRef(function ColorPickerFormatTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.FormatTrigger, {
+		ref,
+		"data-slot": "color-picker-format-trigger",
+		className: clsx(ColorPicker_module_default.formatTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerSwatchGroup = forwardRef(function ColorPickerSwatchGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.SwatchGroup, {
+		ref,
+		"data-slot": "color-picker-swatch-group",
+		className: clsx(ColorPicker_module_default.swatchGroup, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerSwatchTrigger = forwardRef(function ColorPickerSwatchTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.SwatchTrigger, {
+		ref,
+		"data-slot": "color-picker-swatch-trigger",
+		className: clsx(ColorPicker_module_default.swatchTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerSwatch = forwardRef(function ColorPickerSwatch({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.Swatch, {
+		ref,
+		"data-slot": "color-picker-swatch",
+		className: clsx(ColorPicker_module_default.swatch, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerSwatchIndicator = forwardRef(function ColorPickerSwatchIndicator({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.SwatchIndicator, {
+		ref,
+		"data-slot": "color-picker-swatch-indicator",
+		className: clsx(ColorPicker_module_default.swatchIndicator, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
+	});
+});
+const ColorPickerTransparencyGrid = forwardRef(function ColorPickerTransparencyGrid({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.TransparencyGrid, {
+		ref,
+		"data-slot": "color-picker-transparency-grid",
+		className: clsx(ColorPicker_module_default.transparencyGrid, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerValueSwatch = forwardRef(function ColorPickerValueSwatch({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.ValueSwatch, {
+		ref,
+		"data-slot": "color-picker-value-swatch",
+		className: clsx(ColorPicker_module_default.valueSwatch, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerValueText = forwardRef(function ColorPickerValueText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.ValueText, {
+		ref,
+		"data-slot": "color-picker-value-text",
+		className: clsx(ColorPicker_module_default.valueText, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerView = forwardRef(function ColorPickerView({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.View, {
+		ref,
+		"data-slot": "color-picker-view",
+		className: clsx(ColorPicker_module_default.view, normalizeClassName(className)),
+		...props
+	});
+});
+const ColorPickerHiddenInput = forwardRef(function ColorPickerHiddenInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ColorPicker.HiddenInput, {
+		ref,
+		"data-slot": "color-picker-hidden-input",
+		className: normalizeClassName(className),
+		...props
+	});
+});
+const ColorPicker$1 = Object.assign(ColorPickerRoot, {
+	Root: ColorPickerRoot,
+	RootProvider: ColorPickerRootProvider,
+	Label: ColorPickerLabel,
+	Control: ColorPickerControl,
+	Trigger: ColorPickerTrigger,
+	Positioner: ColorPickerPositioner,
+	Content: ColorPickerContent,
+	Area: ColorPickerArea,
+	AreaBackground: ColorPickerAreaBackground,
+	AreaThumb: ColorPickerAreaThumb,
+	ChannelSlider: ColorPickerChannelSlider,
+	ChannelSliderTrack: ColorPickerChannelSliderTrack,
+	ChannelSliderThumb: ColorPickerChannelSliderThumb,
+	ChannelSliderLabel: ColorPickerChannelSliderLabel,
+	ChannelSliderValueText: ColorPickerChannelSliderValueText,
+	ChannelInput: ColorPickerChannelInput,
+	EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+	FormatSelect: ColorPickerFormatSelect,
+	FormatTrigger: ColorPickerFormatTrigger,
+	SwatchGroup: ColorPickerSwatchGroup,
+	SwatchTrigger: ColorPickerSwatchTrigger,
+	Swatch: ColorPickerSwatch,
+	SwatchIndicator: ColorPickerSwatchIndicator,
+	TransparencyGrid: ColorPickerTransparencyGrid,
+	ValueSwatch: ColorPickerValueSwatch,
+	ValueText: ColorPickerValueText,
+	View: ColorPickerView,
+	HiddenInput: ColorPickerHiddenInput
+});
+//#endregion
+export { ColorPicker$1 as ColorPicker, parseColor };

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

@@ -0,0 +1,33 @@
+import './ColorPicker.css';
+//#region src/components/color-picker/ColorPicker.module.css
+var ColorPicker_module_default = {
+	"area": "GCUAhG_area",
+	"areaBackground": "GCUAhG_areaBackground",
+	"channelInput": "GCUAhG_channelInput",
+	"channelSlider": "GCUAhG_channelSlider",
+	"channelSliderLabel": "GCUAhG_channelSliderLabel",
+	"channelSliderTrack": "GCUAhG_channelSliderTrack",
+	"channelSliderValueText": "GCUAhG_channelSliderValueText",
+	"color-picker-content-closed": "GCUAhG_color-picker-content-closed",
+	"color-picker-content-open": "GCUAhG_color-picker-content-open",
+	"content": "GCUAhG_content",
+	"control": "GCUAhG_control",
+	"eyeDropperTrigger": "GCUAhG_eyeDropperTrigger",
+	"formatSelect": "GCUAhG_formatSelect",
+	"formatTrigger": "GCUAhG_formatTrigger",
+	"label": "GCUAhG_label",
+	"positioner": "GCUAhG_positioner",
+	"root": "GCUAhG_root",
+	"swatch": "GCUAhG_swatch",
+	"swatchGroup": "GCUAhG_swatchGroup",
+	"swatchIndicator": "GCUAhG_swatchIndicator",
+	"swatchTrigger": "GCUAhG_swatchTrigger",
+	"thumb": "GCUAhG_thumb",
+	"transparencyGrid": "GCUAhG_transparencyGrid",
+	"trigger": "GCUAhG_trigger",
+	"valueSwatch": "GCUAhG_valueSwatch",
+	"valueText": "GCUAhG_valueText",
+	"view": "GCUAhG_view"
+};
+//#endregion
+export { ColorPicker_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ColorPicker, parseColor } from "./ColorPicker.js";
+export { ColorPicker, parseColor };

package/dist/components/combobox/Combobox.css

@@ -0,0 +1,315 @@
+@layer ui.components {
+  @keyframes AqJn2G_combobox-content-open {
+    from {
+      opacity: var(--combobox-content-closed-opacity, 0);
+      transform: scale(var(--combobox-content-closed-scale, var(--scale-popup)));
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes AqJn2G_combobox-content-closed {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: var(--combobox-content-closed-opacity, 0);
+      transform: scale(var(--combobox-content-closed-scale, var(--scale-popup)));
+    }
+  }
+
+  .AqJn2G_root {
+    box-sizing: border-box;
+    width: var(--combobox-width, 16rem);
+    max-width: var(--combobox-max-width, 100%);
+    gap: var(--combobox-root-gap, .375rem);
+    min-width: 0;
+    color: var(--combobox-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .AqJn2G_label {
+    color: var(--combobox-label-color, var(--combobox-color, var(--color-foreground)));
+    font-size: var(--combobox-label-font-size, var(--text-sm));
+    font-weight: var(--combobox-label-font-weight, var(--weight-medium));
+    line-height: var(--combobox-label-line-height, var(--line-height-text-sm));
+    user-select: none;
+    align-items: center;
+    display: inline-flex;
+
+    &[data-disabled] {
+      opacity: var(--combobox-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .AqJn2G_control {
+    border: var(--combobox-border-width, var(--border-width-sm)) solid
+      var(--combobox-border-color, var(--color-border));
+    border-radius: var(--combobox-radius, var(--radius-md));
+    background-color: var(--combobox-bg, var(--color-background));
+    width: 100%;
+    min-width: 0;
+    color: var(--combobox-color, var(--color-foreground));
+    outline: var(--combobox-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline-offset: calc(var(--combobox-focus-ring-width, var(--border-width-sm)) * -1);
+    transition: background-color var(--combobox-transition, var(--transition-default)),
+      border-color var(--combobox-transition, var(--transition-default)),
+      outline-color var(--combobox-transition, var(--transition-default));
+    align-items: center;
+    display: flex;
+    position: relative;
+
+    &[data-state="open"] {
+      background-color: var(--combobox-bg-active, var(--color-muted));
+      border-color: var(--combobox-focus-ring-color, var(--color-ring));
+      outline-color: var(--combobox-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-focus] {
+      border-color: var(--combobox-focus-ring-color, var(--color-ring));
+      outline-color: var(--combobox-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-invalid] {
+      border-color: var(--combobox-invalid-color, var(--color-destructive));
+      outline-color: var(--combobox-invalid-color, var(--color-destructive));
+    }
+
+    &[data-disabled] {
+      opacity: var(--combobox-disabled-opacity, var(--opacity-disabled));
+    }
+
+    &:not([data-disabled]) {
+      @media (hover: hover) {
+        &:hover:not(:has(.AqJn2G_clearTrigger:hover)) {
+          background-color: var(--combobox-bg-hover, var(--color-accent));
+        }
+      }
+    }
+  }
+
+  .AqJn2G_input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: var(--combobox-control-height, var(--size-lg));
+    border-radius: inherit;
+    padding-inline: var(--combobox-input-padding-x-start, .875rem)
+      var(--combobox-input-padding-x-end, 4.25rem);
+    color: inherit;
+    font: inherit;
+    background: none;
+    border: 0;
+    outline: 0;
+    margin: 0;
+
+    &::placeholder {
+      color: var(--combobox-input-placeholder-color, var(--color-muted-foreground));
+    }
+  }
+
+  .AqJn2G_trigger, .AqJn2G_clearTrigger {
+    box-sizing: border-box;
+    width: var(--combobox-action-size, 1.5rem);
+    height: var(--combobox-action-size, 1.5rem);
+    border-radius: var(--combobox-action-radius, var(--radius-sm));
+    background: var(--combobox-action-bg, transparent);
+    color: var(--combobox-icon-color, var(--color-muted-foreground));
+    cursor: pointer;
+    transition: background-color var(--combobox-transition, var(--transition-default)),
+      color var(--combobox-transition, var(--transition-default)),
+      opacity var(--combobox-transition, var(--transition-default));
+    border: 0;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    display: inline-flex;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+
+    & > svg {
+      width: var(--combobox-icon-size, 1rem);
+      height: var(--combobox-icon-size, 1rem);
+      display: block;
+    }
+
+    &:focus-visible {
+      outline: var(--combobox-focus-ring-width, var(--border-width-sm)) solid
+        var(--combobox-focus-ring-color, var(--color-ring));
+      outline-offset: var(--combobox-focus-ring-offset, var(--border-width-sm));
+    }
+
+    &:not(:is([disabled], [data-disabled])) {
+      @media (hover: hover) {
+        &:hover {
+          background-color: var(--combobox-action-bg-hover, var(--color-muted));
+          color: var(--combobox-action-color-hover, var(--color-foreground));
+        }
+      }
+    }
+
+    &:is([disabled], [data-disabled]) {
+      cursor: default;
+    }
+  }
+
+  .AqJn2G_trigger {
+    right: var(--combobox-action-offset-right, .5rem);
+  }
+
+  .AqJn2G_clearTrigger {
+    right: calc(var(--combobox-action-offset-right, .5rem) + var(--combobox-action-size, 1.5rem) +
+        var(--combobox-action-gap, .125rem));
+  }
+
+  .AqJn2G_positioner {
+    z-index: var(--z-index);
+    outline: 0;
+  }
+
+  .AqJn2G_content {
+    box-sizing: border-box;
+    z-index: calc(var(--z-popup) + var(--layer-index, 0));
+    min-width: var(--reference-width);
+    max-width: var(--available-width);
+    max-height: min(var(--combobox-content-max-height, 24rem), var(--available-height));
+    border: var(--combobox-content-border-width, var(--border-width-sm)) solid
+      var(--combobox-content-border-color, var(--color-border));
+    border-radius: var(--combobox-radius, var(--radius-md));
+    padding-block: var(--combobox-content-padding-y, var(--spacing-1));
+    background-color: var(--combobox-content-bg, var(--color-popover));
+    box-shadow: var(--combobox-content-shadow, var(--shadow-lg));
+    color: var(--combobox-content-color, var(--color-popover-foreground));
+    transform-origin: var(--transform-origin);
+    overscroll-behavior: contain;
+    scroll-padding-block: var(--combobox-content-padding-y, var(--spacing-1));
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    overflow: auto;
+
+    &[data-state="open"] {
+      animation: AqJn2G_combobox-content-open var(--combobox-transition, var(--transition-default));
+    }
+
+    &[data-state="closed"] {
+      animation: AqJn2G_combobox-content-closed var(--combobox-transition, var(--transition-default));
+    }
+  }
+
+  .AqJn2G_list {
+    overscroll-behavior: contain;
+    min-height: 0;
+    scroll-padding-block: var(--combobox-content-padding-y, var(--spacing-1));
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    overflow-y: auto;
+
+    &[data-empty] {
+      display: none;
+    }
+  }
+
+  .AqJn2G_empty {
+    padding-block: var(--combobox-empty-padding-y, .75rem);
+    padding-inline: var(--combobox-empty-padding-x, 1rem);
+    color: var(--combobox-empty-color, var(--color-muted-foreground));
+    font-size: var(--combobox-empty-font-size, var(--text-sm));
+    line-height: var(--combobox-empty-line-height, var(--line-height-text-sm));
+  }
+
+  .AqJn2G_itemGroup {
+    flex-direction: column;
+    display: flex;
+
+    & + & {
+      margin-top: var(--combobox-item-group-gap, var(--spacing-2));
+    }
+  }
+
+  .AqJn2G_itemGroupLabel {
+    z-index: 1;
+    padding-block: var(--combobox-item-group-label-padding-y, .35rem);
+    padding-inline: var(--combobox-item-group-label-padding-x, .625rem);
+    background-color: var(--combobox-content-bg, var(--color-popover));
+    color: var(--combobox-item-group-label-color, var(--color-muted-foreground));
+    font-size: var(--combobox-item-group-label-font-size, var(--text-xs));
+    font-weight: var(--combobox-item-group-label-font-weight, var(--weight-semibold));
+    line-height: var(--combobox-item-group-label-line-height, var(--line-height-text-xs));
+    position: sticky;
+    top: 0;
+  }
+
+  .AqJn2G_item {
+    box-sizing: border-box;
+    width: calc(100% - var(--combobox-item-inset-x, var(--spacing-2)));
+    min-height: var(--combobox-item-min-height, 2rem);
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--combobox-item-gap, var(--spacing-2));
+    margin-inline: calc(var(--combobox-item-inset-x, var(--spacing-2)) / 2);
+    border: var(--combobox-item-border-width, 0) solid
+      var(--combobox-item-border-color, transparent);
+    border-radius: var(--combobox-item-radius, var(--radius-sm));
+    padding-block: var(--combobox-item-padding-y, var(--spacing-2));
+    padding-inline: var(--combobox-item-padding-x, .625rem);
+    background-color: var(--combobox-item-bg, transparent);
+    color: var(--combobox-item-color, var(--combobox-content-color, var(--color-foreground)));
+    font: inherit;
+    font-size: var(--combobox-item-font-size, var(--text-sm));
+    line-height: var(--combobox-item-line-height, var(--line-height-text-sm));
+    cursor: default;
+    user-select: none;
+    outline: 0;
+    display: flex;
+    position: relative;
+
+    &[data-highlighted] {
+      background-color: var(--combobox-highlight-bg, var(--color-accent));
+      color: var(--combobox-highlight-color, var(--color-accent-foreground));
+    }
+
+    &[data-state="checked"] {
+      color: var(--combobox-item-checked-color, var(--combobox-item-color, var(--color-foreground)));
+    }
+
+    &[data-disabled] {
+      color: var(--combobox-item-disabled-color, var(--color-muted-foreground));
+      opacity: var(--combobox-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+  }
+
+  .AqJn2G_itemText {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .AqJn2G_itemIndicator {
+    width: var(--combobox-item-indicator-size, .75rem);
+    height: var(--combobox-item-indicator-size, .75rem);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    & > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}