@pathscale/ui 2.1.0 → 2.2.0

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

@@ -114,12 +114,11 @@ const __solidLayoutColorPickerArea = (_stable, p)=>{
     const ctx = useContext(ColorPickerContext);
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "onChange",
         "dataTheme"
     ]);
     if (!ctx) return createComponent(color_area, mergeProps(others, ()=>({
-            class: twMerge(CLASSES.slot.area, local.class, local.className)
+            class: twMerge(CLASSES.slot.area, local.class)
         }), {
         get dataTheme () {
             return local.dataTheme;
@@ -136,11 +135,11 @@ const __solidLayoutColorPickerArea = (_stable, p)=>{
         get value () {
             return ctx.value().hsv;
         },
-        get isDisabled () {
-            return ctx.isDisabled();
+        get state () {
+            return ctx.isDisabled() ? "disabled" : void 0;
         }
     }, ()=>({
-            class: twMerge(CLASSES.slot.area, local.class, local.className)
+            class: twMerge(CLASSES.slot.area, local.class)
         }), {
         get dataTheme () {
             return local.dataTheme;
@@ -157,7 +156,6 @@ const __solidLayoutColorPickerSlider = (_stable, p)=>{
     const ctx = useContext(ColorPickerContext);
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "onChange",
         "type",
         "style",
@@ -169,7 +167,7 @@ const __solidLayoutColorPickerSlider = (_stable, p)=>{
             return sliderType();
         }
     }, ()=>({
-            class: twMerge(CLASSES.slot.slider, local.class, local.className)
+            class: twMerge(CLASSES.slot.slider, local.class)
         }), {
         get dataTheme () {
             return local.dataTheme;
@@ -204,11 +202,11 @@ const __solidLayoutColorPickerSlider = (_stable, p)=>{
         get value () {
             return value();
         },
-        get isDisabled () {
-            return ctx.isDisabled();
+        get state () {
+            return ctx.isDisabled() ? "disabled" : void 0;
         }
     }, ()=>({
-            class: twMerge(CLASSES.slot.slider, local.class, local.className)
+            class: twMerge(CLASSES.slot.slider, local.class)
         }), {
         get dataTheme () {
             return local.dataTheme;
@@ -228,14 +226,13 @@ const __solidLayoutColorPickerField = (_stable, p)=>{
     const ctx = useContext(ColorPickerContext);
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "onChange",
         "fullWidth",
         "format",
         "dataTheme"
     ]);
     if (!ctx) return createComponent(color_field, mergeProps(others, ()=>({
-            class: twMerge(CLASSES.slot.field, local.class, local.className)
+            class: twMerge(CLASSES.slot.field, local.class)
         }), {
         get dataTheme () {
             return local.dataTheme;
@@ -258,11 +255,11 @@ const __solidLayoutColorPickerField = (_stable, p)=>{
         get value () {
             return ctx.value().hex;
         },
-        get isDisabled () {
-            return ctx.isDisabled();
+        get state () {
+            return ctx.isDisabled() ? "disabled" : void 0;
         }
     }, ()=>({
-            class: twMerge(CLASSES.slot.field, local.class, local.className)
+            class: twMerge(CLASSES.slot.field, local.class)
         }), {
         get dataTheme () {
             return local.dataTheme;
@@ -284,12 +281,11 @@ const ColorPickerField = defineComponent({
 const __solidLayoutColorPickerRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "children",
         "value",
         "defaultValue",
         "onChange",
-        "isDisabled",
+        "state",
         "dataTheme"
     ]);
     const [internalState, setInternalState] = createSignal(toColorState(local.value ?? local.defaultValue) ?? fallbackState());
@@ -341,7 +337,7 @@ const __solidLayoutColorPickerRoot = (_stable, p)=>{
     };
     const context = createMemo(()=>({
             value: currentState,
-            isDisabled: ()=>Boolean(local.isDisabled),
+            isDisabled: ()=>Boolean("disabled" === local.state),
             setFromArea,
             setFromField,
             setFromSlider
@@ -353,14 +349,14 @@ const __solidLayoutColorPickerRoot = (_stable, p)=>{
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, local.class, local.className)
+                    class: twMerge(CLASSES.base, local.class)
                 }), {
                 get ["data-theme"] () {
                     return local.dataTheme;
                 },
                 "data-slot": "color-picker",
                 get ["data-disabled"] () {
-                    return local.isDisabled ? "true" : "false";
+                    return "disabled" === local.state ? "true" : "false";
                 }
             }), false, true);
             insert(_el$, ()=>local.children ?? [

package/dist/components/color-slider/ColorSlider.css

@@ -4,7 +4,7 @@
     width: 100%;
     min-width: 10rem;
     height: 1.25rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     cursor: pointer;
     outline: none;
     user-select: none;
@@ -21,7 +21,7 @@
     inset: 0;
     border-radius: inherit;
     background: var(--color-slider-track-background);
-    box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.12);
+    box-shadow: inset 0 0 0 1px rgb(var(--shadow-color, 0 0 0) / 12%);
     overflow: hidden;
   }
 
@@ -30,11 +30,11 @@
     top: 50%;
     width: 1rem;
     height: 1rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     border: 2px solid #ffffff;
     box-shadow:
-      0 1px 2px oklch(0% 0 0 / 0.24),
-      0 0 0 1px oklch(0% 0 0 / 0.18);
+      0 1px 2px rgb(var(--shadow-color, 0 0 0) / 24%),
+      0 0 0 1px rgb(var(--shadow-color, 0 0 0) / 18%);
     transform: translate(-50%, -50%);
     transition:
       width 140ms ease,

package/dist/components/color-slider/ColorSlider.generated.d.ts

@@ -1,14 +1,14 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorSlider.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 export type ColorSliderType = "hue" | "alpha";
-export type ColorSliderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+export type ColorSliderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & UIBaseProps & {
     value?: number;
     defaultValue?: number;
     onChange?: (value: number) => void;
     type?: ColorSliderType;
-    isDisabled?: boolean;
+    state?: State;
 };
 declare const ColorSlider: __LayoutComponent<ColorSliderProps>;
 export default ColorSlider;

package/dist/components/color-slider/ColorSlider.generated.js

@@ -22,18 +22,17 @@ const fromPercent = (type, percent)=>{
 const __solidLayoutColorSlider = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "value",
         "defaultValue",
         "onChange",
         "type",
-        "isDisabled",
+        "state",
         "style",
         "dataTheme",
         "aria-label"
     ]);
     const sliderType = ()=>local.type ?? "hue";
-    const isDisabled = ()=>Boolean(local.isDisabled);
+    const isDisabled = ()=>Boolean("disabled" === local.state);
     const initialValue = ()=>{
         const fallback = "alpha" === sliderType() ? 1 : 0;
         return normalizeValue(sliderType(), local.value ?? local.defaultValue ?? fallback);
@@ -119,7 +118,7 @@ const __solidLayoutColorSlider = (_stable, p)=>{
         var _ref$ = sliderRef;
         "function" == typeof _ref$ ? use(_ref$, _el$) : sliderRef = _el$;
         spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.base, "alpha" === sliderType() && CLASSES.flag.alpha, isDragging() && CLASSES.flag.dragging, local.class, local.className)
+                class: twMerge(CLASSES.base, "alpha" === sliderType() && CLASSES.flag.alpha, isDragging() && CLASSES.flag.dragging, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/color-swatch/ColorSwatch.css

@@ -9,7 +9,7 @@
     background:
       linear-gradient(var(--color-swatch-current), var(--color-swatch-current)),
       repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 1rem 1rem;
-    box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.14);
+    box-shadow: inset 0 0 0 1px rgb(var(--shadow-color, 0 0 0) / 14%);
     transition:
       transform 140ms ease,
       box-shadow 140ms ease,
@@ -25,14 +25,14 @@
     box-shadow:
       0 0 0 2px var(--color-base-100),
       0 0 0 4px var(--color-accent),
-      inset 0 0 0 1px oklch(0% 0 0 / 0.14);
+      inset 0 0 0 1px rgb(var(--shadow-color, 0 0 0) / 14%);
   }
 
   .color-swatch:focus-visible,
   .color-swatch[data-focus-visible="true"] {
     box-shadow:
       0 0 0 3px color-mix(in oklab, var(--color-accent) 24%, transparent),
-      inset 0 0 0 1px oklch(0% 0 0 / 0.14);
+      inset 0 0 0 1px rgb(var(--shadow-color, 0 0 0) / 14%);
   }
 
   .color-swatch[data-selected="true"]:focus-visible,
@@ -41,7 +41,7 @@
       0 0 0 2px var(--color-base-100),
       0 0 0 4px var(--color-accent),
       0 0 0 7px color-mix(in oklab, var(--color-accent) 24%, transparent),
-      inset 0 0 0 1px oklch(0% 0 0 / 0.14);
+      inset 0 0 0 1px rgb(var(--shadow-color, 0 0 0) / 14%);
   }
 
   .color-swatch[data-disabled="true"] {
@@ -50,7 +50,7 @@
   }
 
   .color-swatch--circle {
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
   }
 
   .color-swatch--square {

package/dist/components/color-swatch/ColorSwatch.generated.d.ts

@@ -1,16 +1,16 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorSwatch.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 export type ColorSwatchShape = "circle" | "square";
 export type ColorSwatchSize = "xs" | "sm" | "md" | "lg" | "xl";
-export type ColorSwatchProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "onSelect"> & IComponentBaseProps & {
+export type ColorSwatchProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "onSelect"> & UIBaseProps & {
     color: string;
     colorName?: string;
     shape?: ColorSwatchShape;
     size?: ColorSwatchSize;
     isSelected?: boolean;
-    isDisabled?: boolean;
+    state?: State;
     onSelect?: (color: string) => void;
     onChange?: (color: string) => void;
 };

package/dist/components/color-swatch/ColorSwatch.generated.js

@@ -14,13 +14,12 @@ const __solidLayoutColorSwatch = (_stable, p)=>{
     const picker = useContext(ColorSwatchPickerContext);
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "color",
         "colorName",
         "shape",
         "size",
         "isSelected",
-        "isDisabled",
+        "state",
         "disabled",
         "onSelect",
         "onChange",
@@ -37,7 +36,7 @@ const __solidLayoutColorSwatch = (_stable, p)=>{
     const shape = ()=>local.shape ?? "circle";
     const size = ()=>local.size ?? "md";
     const isDisabled = ()=>{
-        const localDisabled = Boolean(local.isDisabled) || Boolean(local.disabled);
+        const localDisabled = Boolean("disabled" === local.state) || Boolean(local.disabled);
         const pickerDisabled = picker ? picker.isDisabled() : false;
         return localDisabled || pickerDisabled;
     };
@@ -82,7 +81,7 @@ const __solidLayoutColorSwatch = (_stable, p)=>{
         spread(_el$, mergeProps(others, {
             type: "button",
             get ["class"] () {
-                return twMerge(CLASSES.base, CLASSES.shape[shape()], CLASSES.size[size()], local.class, local.className);
+                return twMerge(CLASSES.base, CLASSES.shape[shape()], CLASSES.size[size()], local.class);
             },
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/color-swatch-picker/ColorSwatchPicker.generated.d.ts

@@ -1,19 +1,19 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorSwatchPicker.css";
 import { type Accessor, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 export type ColorSwatchPickerContextValue = {
     value: Accessor<string | undefined>;
     isDisabled: Accessor<boolean>;
     select: (value: string) => void;
 };
 export declare const ColorSwatchPickerContext: import("solid-js").Context<ColorSwatchPickerContextValue | undefined>;
-export type ColorSwatchPickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & IComponentBaseProps & {
+export type ColorSwatchPickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & UIBaseProps & {
     children: JSX.Element;
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
-    isDisabled?: boolean;
+    state?: State;
 };
 declare const ColorSwatchPicker: __LayoutComponent<ColorSwatchPickerProps>;
 export { ColorSwatchPicker as default, ColorSwatchPicker };

package/dist/components/color-swatch-picker/ColorSwatchPicker.generated.js

@@ -13,12 +13,11 @@ const ColorSwatchPickerContext = createContext();
 const __solidLayoutColorSwatchPicker = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "children",
         "value",
         "defaultValue",
         "onChange",
-        "isDisabled",
+        "state",
         "dataTheme",
         "role",
         "onKeyDown"
@@ -27,7 +26,7 @@ const __solidLayoutColorSwatchPicker = (_stable, p)=>{
     let rootRef;
     const isControlled = ()=>void 0 !== local.value;
     const currentValue = ()=>isControlled() ? local.value : internalValue();
-    const isDisabled = ()=>Boolean(local.isDisabled);
+    const isDisabled = ()=>Boolean("disabled" === local.state);
     const setValue = (next)=>{
         if (isDisabled()) return;
         if (!isControlled()) setInternalValue(next);
@@ -85,7 +84,7 @@ const __solidLayoutColorSwatchPicker = (_stable, p)=>{
             var _ref$ = rootRef;
             "function" == typeof _ref$ ? use(_ref$, _el$) : rootRef = _el$;
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, local.class, local.className)
+                    class: twMerge(CLASSES.base, local.class)
                 }), {
                 get ["data-theme"] () {
                     return local.dataTheme;

package/dist/components/color-wheel-flower/ColorWheelFlower.css

@@ -35,7 +35,7 @@
   .color-wheel-flower__ring {
     position: absolute;
     inset: 0;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
   }
 
   .color-wheel-flower__ring--outer {
@@ -51,7 +51,7 @@
     z-index: 10;
     width: calc(100% - 5px);
     height: calc(100% - 5px);
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     display: block;
   }
 
@@ -79,7 +79,7 @@
     left: -5px;
     right: -5px;
     bottom: -5px;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     pointer-events: none;
     background: radial-gradient(
       circle,
@@ -93,41 +93,41 @@
     z-index: 10;
     width: 100% !important;
     height: 100% !important;
-    border-radius: 9999px !important;
+    border-radius: var(--radius-pill, 9999px) !important;
     background: var(--color-swatch-current) !important;
     transform: none !important;
-    box-shadow: 0 2px 8px rgb(0 0 0 / 25%) !important;
+    box-shadow: 0 2px 8px rgb(var(--shadow-color, 0 0 0) / 25%) !important;
     transition: box-shadow 200ms ease-out, opacity 140ms ease-out !important;
   }
 
   .color-wheel-flower__swatch:hover:not([data-disabled="true"]) {
     transform: none !important;
-    box-shadow: 0 3px 10px rgb(0 0 0 / 25%) !important;
+    box-shadow: 0 3px 10px rgb(var(--shadow-color, 0 0 0) / 25%) !important;
   }
 
   .color-wheel-flower__swatch[data-selected="true"] {
     box-shadow:
       0 0 0 2px rgb(255 255 255 / 55%),
-      0 3px 10px rgb(0 0 0 / 25%) !important;
+      0 3px 10px rgb(var(--shadow-color, 0 0 0) / 25%) !important;
   }
 
   .color-wheel-flower__swatch:focus-visible,
   .color-wheel-flower__swatch[data-focus-visible="true"] {
     box-shadow:
       0 0 0 2px rgb(255 255 255 / 50%),
-      0 3px 10px rgb(0 0 0 / 25%) !important;
+      0 3px 10px rgb(var(--shadow-color, 0 0 0) / 25%) !important;
   }
 
   .color-wheel-flower__swatch--center {
     box-shadow:
-      inset 0 0 0 1px rgb(0 0 0 / 30%),
-      0 2px 8px rgb(0 0 0 / 25%) !important;
+      inset 0 0 0 1px rgb(var(--shadow-color, 0 0 0) / 30%),
+      0 2px 8px rgb(var(--shadow-color, 0 0 0) / 25%) !important;
   }
 
   .color-wheel-flower__highlight {
     position: absolute;
     inset: 0;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     border: 2px solid rgb(255 255 255 / 100%);
     mix-blend-mode: overlay;
     pointer-events: none;

package/dist/components/color-wheel-flower/ColorWheelFlower.generated.d.ts

@@ -3,7 +3,6 @@ import "./ColorWheelFlower.css";
 import { type ColorWheelFlowerMode } from "./ColorWheelFlower.palette";
 export interface ColorWheelFlowerProps {
     class?: string;
-    className?: string;
     /** Explicit mode. Omit to follow the root `data-theme` attribute. */
     mode?: ColorWheelFlowerMode;
     /** Exactly 31 literal colors, ordered outer ring, middle ring, inner ring, center. */

package/dist/components/color-wheel-flower/ColorWheelFlower.generated.js

@@ -286,7 +286,6 @@ const MAX_WAVE_DELAY = 0.12;
 const __solidLayoutColorWheelFlower = (_stable, p)=>{
     const [local] = splitProps(p, [
         "class",
-        "className",
         "mode",
         "palette"
     ]);
@@ -485,7 +484,7 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
         spread(_el$, mergeProps(()=>({
                 class: twMerge(CLASSES.base, clsx({
                     [CLASSES.flag.disabled]: context.disabled()
-                }), local.class, local.className)
+                }), local.class)
             }), {
             onMouseMove: handlePointerMove,
             onMouseLeave: handlePointerLeave,
@@ -529,8 +528,8 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                 return pickerValue();
             },
             onChange: handlePickerChange,
-            get isDisabled () {
-                return context.disabled();
+            get state () {
+                return context.disabled() ? "disabled" : void 0;
             },
             "aria-label": "Flower color palette",
             get children () {
@@ -679,8 +678,8 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                                 get colorName () {
                                     return memo(()=>!!item.isCenter)() ? "Reset to neutral" : `Theme color ${item.hex}`;
                                 },
-                                get isDisabled () {
-                                    return context.disabled();
+                                get state () {
+                                    return context.disabled() ? "disabled" : void 0;
                                 },
                                 onMouseEnter: ()=>{
                                     if (!context.disabled()) setHoveredIndex(index());

package/dist/components/combo-box/ComboBox.css

@@ -155,8 +155,8 @@
   .combo-box__trigger:focus-visible,
   .combo-box__trigger[data-focus-visible="true"] {
     border-radius: 0.5rem;
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width, 2px) solid var(--color-accent);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
   .combo-box__trigger[data-open="true"] .combo-box__trigger-icon {
@@ -202,11 +202,11 @@
     overflow-y: auto;
     overscroll-behavior: contain;
     border-radius: 1.5rem;
-    border: 1px solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
+    border: var(--border, 1px) solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
     background-color: var(--color-base-100);
     box-shadow:
-      0 20px 32px oklch(0% 0 0 / 0.16),
-      0 8px 18px oklch(0% 0 0 / 0.1);
+      0 20px 32px rgb(var(--shadow-color, 0 0 0) / 16%),
+      0 8px 18px rgb(var(--shadow-color, 0 0 0) / 10%);
     visibility: hidden;
     opacity: 0;
     transform: translateY(-4px) scale(0.98);

package/dist/components/combo-box/ComboBox.generated.d.ts

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ComboBox.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State, Issue } from "../vocabulary";
 export type ComboBoxVariant = "primary" | "secondary";
 export type ComboBoxMenuTrigger = "focus" | "input" | "manual";
 export type ComboBoxKey = string | number;
@@ -12,7 +12,7 @@ export type ComboBoxItem = {
     textValue?: string;
     disabled?: boolean;
 };
-export type ComboBoxRootProps<T = ComboBoxItem> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type ComboBoxRootProps<T = ComboBoxItem> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
     startIcon?: JSX.Element;
     endIcon?: JSX.Element;
@@ -23,36 +23,35 @@ export type ComboBoxRootProps<T = ComboBoxItem> = Omit<JSX.HTMLAttributes<HTMLDi
     inputValue?: string;
     defaultInputValue?: string;
     onInputChange?: (value: string) => void;
-    isOpen?: boolean;
+    open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     fullWidth?: boolean;
     variant?: ComboBoxVariant;
     menuTrigger?: ComboBoxMenuTrigger;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
-    isInvalid?: boolean;
+    issues?: Issue[];
     allowsCustomValue?: boolean;
     placeholder?: string;
     name?: string;
-    isRequired?: boolean;
     required?: boolean;
     defaultFilter?: (textValue: string, inputValue: string) => boolean;
     itemKey?: (item: T, index: number) => ComboBoxKey;
     itemTextValue?: (item: T, index: number) => string;
     itemDisabled?: (item: T, index: number) => boolean;
 };
-export type ComboBoxInputGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type ComboBoxInputGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
 };
-export type ComboBoxInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput" | "disabled"> & IComponentBaseProps & {
+export type ComboBoxInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput" | "disabled"> & UIBaseProps & {
     onInput?: JSX.EventHandlerUnion<HTMLInputElement, InputEvent>;
 };
-export type ComboBoxTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled"> & IComponentBaseProps & {
+export type ComboBoxTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled"> & UIBaseProps & {
     startIcon?: JSX.Element;
     endIcon?: JSX.Element;
 };
-export type ComboBoxPopoverProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type ComboBoxPopoverProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
 };
 export type ComboBoxListRenderItem = {
@@ -63,9 +62,9 @@ export type ComboBoxListRenderItem = {
     isDisabled: boolean;
     item: unknown;
 };
-export type ComboBoxListProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type ComboBoxListProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element | ((item: ComboBoxListRenderItem) => JSX.Element);
-    renderEmptyState?: () => JSX.Element;
+    renderEmpty?: () => JSX.Element;
     endIcon?: JSX.Element;
 };
 declare const ComboBoxRoot: __LayoutComponent<ComboBoxRootProps>;