@pathscale/ui 2.1.1 → 2.2.0

package/dist/components/pagination/Pagination.generated.js

@@ -45,17 +45,16 @@ const getPaginationTokens = (page, total)=>{
 const __solidLayoutPagination = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "page",
         "total",
         "onChange",
-        "isDisabled"
+        "state"
     ]);
     const safeTotal = ()=>Math.max(1, Math.floor(local.total || 0));
     const currentPage = ()=>clampPage(local.page, safeTotal());
     const tokens = ()=>getPaginationTokens(currentPage(), safeTotal());
-    const disabled = ()=>Boolean(local.isDisabled);
+    const disabled = ()=>Boolean("disabled" === local.state);
     const handleChange = (nextPage)=>{
         if (disabled()) return;
         const bounded = clampPage(nextPage, safeTotal());
@@ -68,7 +67,7 @@ const __solidLayoutPagination = (_stable, p)=>{
             "aria-label": "pagination",
             role: "navigation"
         }, ()=>({
-                class: twMerge(CLASSES.base, local.class, local.className)
+                class: twMerge(CLASSES.base, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/password-field/PasswordField.css

@@ -0,0 +1,12 @@
+@layer components {
+  .password-field {
+    width: 100%;
+  }
+
+  .password-field__toggle {
+    height: 1.75rem;
+    min-height: 1.75rem;
+    width: 1.75rem;
+    min-width: 1.75rem;
+  }
+}

package/dist/components/password-field/PasswordField.generated.d.ts

@@ -0,0 +1,29 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./PasswordField.css";
+import { type JSX } from "solid-js";
+import type { UIBaseProps } from "../vocabulary";
+export type PasswordFieldProps = UIBaseProps & {
+    id?: string;
+    name?: string;
+    label?: JSX.Element;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    autofocus?: boolean;
+    autocomplete?: "current-password" | "new-password" | "off";
+    "aria-describedby"?: string;
+    startIcon?: JSX.Element;
+    showLabel: string;
+    hideLabel: string;
+    value?: string;
+    inputRef?: (el: HTMLInputElement) => void;
+    onInput?: (value: string) => void;
+    onBlur?: () => void;
+    visibleIcon?: JSX.Element;
+    hiddenIcon?: JSX.Element;
+    onVisibilityChange?: (visible: boolean) => void;
+    class?: string;
+    inputClass?: string;
+};
+export declare const PasswordFieldLayout: __LayoutComponent<PasswordFieldProps>;

package/dist/components/password-field/PasswordField.generated.js

@@ -0,0 +1,95 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./PasswordField.css";
+import { createSignal } from "solid-js";
+import button_0 from "../button/index.js";
+import icon from "../icon/index.js";
+import input from "../input/index.js";
+import { passwordField } from "./PasswordField.recipe.js";
+import { capturePasswordToggleSnapshot, createPasswordFieldInputContract, preventPasswordTogglePointerDown, schedulePasswordFieldRestore, selectPasswordToggleIcon } from "./PasswordField.interactions.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>");
+const __solidLayoutPasswordFieldLayout = (_stable, p)=>{
+    const [isVisible, setIsVisible] = createSignal(false);
+    let fieldRef;
+    const toggleLabel = ()=>isVisible() ? p.hideLabel : p.showLabel;
+    const toggleIcon = ()=>selectPasswordToggleIcon(isVisible(), p.visibleIcon, p.hiddenIcon, createComponent(icon, {
+            width: 16,
+            height: 16,
+            get src () {
+                return isVisible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]";
+            }
+        }));
+    const setFieldRef = (el)=>{
+        fieldRef = el;
+        p.inputRef?.(el);
+    };
+    const toggleVisibility = ()=>{
+        const snapshot = capturePasswordToggleSnapshot(fieldRef, "u" > typeof document ? document.activeElement : null);
+        const nextVisible = !isVisible();
+        setIsVisible(nextVisible);
+        p.onVisibilityChange?.(nextVisible);
+        schedulePasswordFieldRestore(fieldRef, snapshot);
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(()=>_stable.slot.root, {
+            get ["data-visible"] () {
+                return isVisible() ? "true" : "false";
+            }
+        }), false, true);
+        insert(_el$, createComponent(input, mergeProps(()=>createPasswordFieldInputContract({
+                id: p.id,
+                name: p.name,
+                label: p.label,
+                isVisible: isVisible(),
+                placeholder: p.placeholder,
+                required: p.required,
+                autofocus: p.autofocus,
+                autocomplete: p.autocomplete,
+                "aria-describedby": p["aria-describedby"],
+                value: p.value,
+                disabled: p.disabled,
+                invalid: p.invalid,
+                startIcon: p.startIcon,
+                inputClass: p.inputClass
+            }), {
+            ref: setFieldRef,
+            onInput: (event)=>{
+                p.onInput?.(event.currentTarget.value);
+            },
+            onBlur: ()=>p.onBlur?.(),
+            get endIcon () {
+                return createComponent(button_0, mergeProps(()=>_stable.slot.toggle, {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    width: "square",
+                    get state () {
+                        return p.disabled ? "disabled" : "default";
+                    },
+                    onPointerDown: preventPasswordTogglePointerDown,
+                    onClick: toggleVisibility,
+                    get ["aria-label"] () {
+                        return toggleLabel();
+                    },
+                    get ["aria-pressed"] () {
+                        return isVisible();
+                    },
+                    get title () {
+                        return toggleLabel();
+                    },
+                    get children () {
+                        return toggleIcon();
+                    }
+                }));
+            }
+        })));
+        return _el$;
+    })();
+};
+const PasswordFieldLayout = defineComponent({
+    recipe: passwordField,
+    layout: __solidLayoutPasswordFieldLayout,
+    embedded: true
+});
+export { PasswordFieldLayout };

package/dist/components/password-field/{PasswordField.d.ts → PasswordField.interactions.d.ts}

@@ -1,39 +1,47 @@
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type PasswordFieldProps = IComponentBaseProps & {
+import type { JSX } from "solid-js";
+/**
+ * Pure helpers behind PasswordField's visibility toggle.
+ *
+ * They live apart from the Layout because they are the part worth testing
+ * directly: swapping an input's `type` is the one operation browsers and
+ * password managers treat as replacing the field, which loses focus, the
+ * selection, and occasionally the value itself.
+ */
+export type PasswordToggleSnapshot = {
+    hadFocus: boolean;
+    selectionStart: number | null;
+    selectionEnd: number | null;
+    selectionDirection: "forward" | "backward" | "none" | null;
+    valueBeforeToggle: string | null;
+};
+export type PasswordFieldLike = {
+    value: string;
+    selectionStart: number | null;
+    selectionEnd: number | null;
+    selectionDirection: "forward" | "backward" | "none" | null;
+    focus: (options?: {
+        preventScroll?: boolean;
+    }) => void;
+    setSelectionRange: (selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none") => void;
+    dispatchEvent: (event: Event) => boolean;
+};
+export type PasswordFieldInputContractParams = {
     id?: string;
     name?: string;
     label?: JSX.Element;
     placeholder?: string;
-    disabled?: boolean;
-    invalid?: boolean;
     required?: boolean;
     autofocus?: boolean;
     autocomplete?: "current-password" | "new-password" | "off";
     "aria-describedby"?: string;
-    startIcon?: JSX.Element;
-    showLabel: string;
-    hideLabel: string;
     value?: string;
-    inputRef?: (el: HTMLInputElement) => void;
-    onInput?: (value: string) => void;
-    onBlur?: () => void;
-    visibleIcon?: JSX.Element;
-    hiddenIcon?: JSX.Element;
-    onVisibilityChange?: (visible: boolean) => void;
-    class?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    startIcon?: JSX.Element;
     inputClass?: string;
-};
-export type PasswordToggleSnapshot = {
-    hadFocus: boolean;
-    selectionStart: number | null;
-    selectionEnd: number | null;
-    selectionDirection: "forward" | "backward" | "none" | null;
-    valueBeforeToggle: string | null;
-};
-type PasswordFieldInputContractParams = Pick<PasswordFieldProps, "id" | "name" | "label" | "placeholder" | "required" | "autofocus" | "autocomplete" | "aria-describedby" | "value" | "disabled" | "invalid" | "startIcon" | "inputClass"> & {
     isVisible: boolean;
 };
+export declare const getPasswordInputType: (isVisible: boolean) => "text" | "password";
 export declare const createPasswordFieldInputContract: (params: PasswordFieldInputContractParams) => {
     id: string | undefined;
     name: string | undefined;
@@ -50,21 +58,15 @@ export declare const createPasswordFieldInputContract: (params: PasswordFieldInp
     startIcon: JSX.Element;
     class: string;
 };
-type PasswordFieldLike = {
-    value: string;
-    selectionStart: number | null;
-    selectionEnd: number | null;
-    selectionDirection: "forward" | "backward" | "none" | null;
-    focus: (options?: {
-        preventScroll?: boolean;
-    }) => void;
-    setSelectionRange: (selectionStart: number, selectionEnd: number, selectionDirection?: "forward" | "backward" | "none") => void;
-    dispatchEvent: (event: Event) => boolean;
-};
-export declare const getPasswordInputType: (isVisible: boolean) => "text" | "password";
 export declare const selectPasswordToggleIcon: (isVisible: boolean, visibleIcon: JSX.Element | undefined, hiddenIcon: JSX.Element | undefined, fallback: JSX.Element) => JSX.Element;
 export declare const capturePasswordToggleSnapshot: (field: PasswordFieldLike | undefined, activeElement: EventTarget | null) => PasswordToggleSnapshot;
 export declare const restorePasswordFieldAfterToggle: (field: PasswordFieldLike | undefined, snapshot: PasswordToggleSnapshot) => void;
+/**
+ * Restore the field after the browser has processed the `type` swap.
+ *
+ * The deferral lives here rather than in the Layout because a `.layout.tsx`
+ * template resolves free identifiers against props: a bare `queueMicrotask`
+ * in that file compiles to `props.queueMicrotask`.
+ */
+export declare const schedulePasswordFieldRestore: (field: PasswordFieldLike | undefined, snapshot: PasswordToggleSnapshot) => void;
 export declare const preventPasswordTogglePointerDown: (event: Pick<PointerEvent, "preventDefault">) => void;
-declare const PasswordField: Component<PasswordFieldProps>;
-export default PasswordField;

package/dist/components/password-field/PasswordField.interactions.js

@@ -0,0 +1,48 @@
+import { twMerge } from "tailwind-merge";
+const getPasswordInputType = (isVisible)=>isVisible ? "text" : "password";
+const createPasswordFieldInputContract = (params)=>({
+        id: params.id,
+        name: params.name,
+        label: params.label,
+        type: getPasswordInputType(params.isVisible),
+        placeholder: params.placeholder,
+        required: params.required,
+        autofocus: params.autofocus,
+        autocomplete: params.autocomplete,
+        "aria-describedby": params["aria-describedby"],
+        value: params.value,
+        isDisabled: Boolean(params.disabled),
+        isInvalid: Boolean(params.invalid),
+        startIcon: params.startIcon,
+        class: twMerge("w-full", params.inputClass)
+    });
+const selectPasswordToggleIcon = (isVisible, visibleIcon, hiddenIcon, fallback)=>(isVisible ? visibleIcon : hiddenIcon) ?? fallback;
+const capturePasswordToggleSnapshot = (field, activeElement)=>({
+        hadFocus: activeElement === field,
+        selectionStart: field?.selectionStart ?? null,
+        selectionEnd: field?.selectionEnd ?? null,
+        selectionDirection: field?.selectionDirection ?? null,
+        valueBeforeToggle: field?.value ?? null
+    });
+const restorePasswordFieldAfterToggle = (field, snapshot)=>{
+    if (!field) return;
+    if (null !== snapshot.valueBeforeToggle && field.value !== snapshot.valueBeforeToggle) {
+        field.value = snapshot.valueBeforeToggle;
+        field.dispatchEvent(new Event("input", {
+            bubbles: true
+        }));
+    }
+    if (!snapshot.hadFocus) return;
+    field.focus({
+        preventScroll: true
+    });
+    if (null === snapshot.selectionStart || null === snapshot.selectionEnd) return;
+    try {
+        field.setSelectionRange(snapshot.selectionStart, snapshot.selectionEnd, snapshot.selectionDirection ?? void 0);
+    } catch  {}
+};
+const schedulePasswordFieldRestore = (field, snapshot)=>{
+    queueMicrotask(()=>restorePasswordFieldAfterToggle(field, snapshot));
+};
+const preventPasswordTogglePointerDown = (event)=>event.preventDefault();
+export { capturePasswordToggleSnapshot, createPasswordFieldInputContract, getPasswordInputType, preventPasswordTogglePointerDown, restorePasswordFieldAfterToggle, schedulePasswordFieldRestore, selectPasswordToggleIcon };

package/dist/components/password-field/PasswordField.recipe.d.ts

@@ -0,0 +1,12 @@
+export declare const passwordField: import("solid-layouts").Recipe<{
+    readonly component: "password-field";
+    readonly element: "div";
+    readonly slots: {
+        readonly root: {
+            readonly base: "password-field";
+        };
+        readonly toggle: {
+            readonly base: "password-field__toggle";
+        };
+    };
+}>;

package/dist/components/password-field/PasswordField.recipe.js

@@ -0,0 +1,31 @@
+import { recipe } from "../../lib/layouts/index.js";
+const passwordField = recipe({
+    component: "password-field",
+    element: "div",
+    slots: {
+        root: {
+            base: "password-field"
+        },
+        toggle: {
+            base: "password-field__toggle"
+        }
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "password-field",
+                axes: {}
+            },
+            toggle: {
+                base: "password-field__toggle",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0,
+            toggle: 1
+        }
+    }
+});
+export { passwordField };

package/dist/components/password-field/index.d.ts

@@ -1 +1,3 @@
-export { default as PasswordField, type PasswordFieldProps } from "./PasswordField";
+export { PasswordFieldLayout as default, PasswordFieldLayout as PasswordField, } from "./PasswordField.generated";
+export type { PasswordFieldProps } from "./PasswordField.generated";
+export { capturePasswordToggleSnapshot, createPasswordFieldInputContract, getPasswordInputType, preventPasswordTogglePointerDown, restorePasswordFieldAfterToggle, selectPasswordToggleIcon, type PasswordFieldLike, type PasswordToggleSnapshot, } from "./PasswordField.interactions";

package/dist/components/password-field/index.js

@@ -1 +1,2 @@
-export { default as PasswordField } from "./PasswordField.js";
+export { PasswordFieldLayout as PasswordField, PasswordFieldLayout as default } from "./PasswordField.generated.js";
+export { capturePasswordToggleSnapshot, createPasswordFieldInputContract, getPasswordInputType, preventPasswordTogglePointerDown, restorePasswordFieldAfterToggle, selectPasswordToggleIcon } from "./PasswordField.interactions.js";

package/dist/components/password-requirements/PasswordRequirements.css

@@ -0,0 +1,42 @@
+@layer components {
+  .password-requirements {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .password-requirements__title {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    opacity: 0.7;
+  }
+
+  .password-requirements__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .password-requirements__item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    opacity: 0.75;
+  }
+
+  .password-requirements__item[data-passed="true"] {
+    color: var(--color-success);
+    opacity: 1;
+  }
+
+  .password-requirements__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/dist/components/password-requirements/PasswordRequirements.generated.d.ts

@@ -0,0 +1,12 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./PasswordRequirements.css";
+import { type JSX } from "solid-js";
+import type { UIBaseProps } from "../vocabulary";
+import type { PasswordRuleResult } from "../../passwordRules";
+export type PasswordRequirementsProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    title?: JSX.Element;
+    results: PasswordRuleResult[];
+    metIcon?: JSX.Element;
+    unmetIcon?: JSX.Element;
+};
+export declare const PasswordRequirementsLayout: __LayoutComponent<PasswordRequirementsProps>;

package/dist/components/password-requirements/PasswordRequirements.generated.js

@@ -0,0 +1,69 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./PasswordRequirements.css";
+import { For, Show } from "solid-js";
+import icon from "../icon/index.js";
+import { passwordRequirements } from "./PasswordRequirements.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<p>"), _tmpl$2 = /*#__PURE__*/ template("<div><ul>"), _tmpl$3 = /*#__PURE__*/ template("<li><span></span><span>");
+const __solidLayoutPasswordRequirementsLayout = (_stable, p)=>(()=>{
+        var _el$ = _tmpl$2(), _el$3 = _el$.firstChild;
+        spread(_el$, mergeProps(()=>_stable.slot.root), false, true);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return p.title;
+            },
+            get children () {
+                var _el$2 = _tmpl$();
+                spread(_el$2, mergeProps(()=>_stable.slot.title), false, true);
+                insert(_el$2, ()=>p.title);
+                return _el$2;
+            }
+        }), _el$3);
+        spread(_el$3, mergeProps(()=>_stable.slot.list), false, true);
+        insert(_el$3, createComponent(For, {
+            get each () {
+                return p.results;
+            },
+            children: (rule)=>(()=>{
+                    var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+                    spread(_el$4, mergeProps(()=>_stable.slot.item, {
+                        get ["data-rule"] () {
+                            return rule.key;
+                        },
+                        get ["data-passed"] () {
+                            return rule.passed ? "true" : "false";
+                        }
+                    }), false, true);
+                    spread(_el$5, mergeProps(()=>_stable.slot.icon, {
+                        "aria-hidden": "true"
+                    }), false, true);
+                    insert(_el$5, createComponent(Show, {
+                        get when () {
+                            return memo(()=>!!rule.passed)() ? p.metIcon : p.unmetIcon;
+                        },
+                        get fallback () {
+                            return createComponent(icon, {
+                                width: 14,
+                                height: 14,
+                                get src () {
+                                    return rule.passed ? "icon-[lucide--check]" : "icon-[lucide--minus]";
+                                }
+                            });
+                        },
+                        get children () {
+                            return memo(()=>!!rule.passed)() ? p.metIcon : p.unmetIcon;
+                        }
+                    }));
+                    spread(_el$6, mergeProps(()=>_stable.slot.message), false, true);
+                    insert(_el$6, ()=>rule.message);
+                    return _el$4;
+                })()
+        }));
+        return _el$;
+    })();
+const PasswordRequirementsLayout = defineComponent({
+    recipe: passwordRequirements,
+    layout: __solidLayoutPasswordRequirementsLayout,
+    embedded: true
+});
+export { PasswordRequirementsLayout };

package/dist/components/password-requirements/PasswordRequirements.recipe.d.ts

@@ -0,0 +1,24 @@
+export declare const passwordRequirements: import("solid-layouts").Recipe<{
+    readonly component: "password-requirements";
+    readonly element: "div";
+    readonly slots: {
+        readonly root: {
+            readonly base: "password-requirements";
+        };
+        readonly title: {
+            readonly base: "password-requirements__title";
+        };
+        readonly list: {
+            readonly base: "password-requirements__list";
+        };
+        readonly item: {
+            readonly base: "password-requirements__item";
+        };
+        readonly icon: {
+            readonly base: "password-requirements__icon";
+        };
+        readonly message: {
+            readonly base: "password-requirements__message";
+        };
+    };
+}>;

package/dist/components/password-requirements/PasswordRequirements.recipe.js

@@ -0,0 +1,63 @@
+import { recipe } from "../../lib/layouts/index.js";
+const passwordRequirements = recipe({
+    component: "password-requirements",
+    element: "div",
+    slots: {
+        root: {
+            base: "password-requirements"
+        },
+        title: {
+            base: "password-requirements__title"
+        },
+        list: {
+            base: "password-requirements__list"
+        },
+        item: {
+            base: "password-requirements__item"
+        },
+        icon: {
+            base: "password-requirements__icon"
+        },
+        message: {
+            base: "password-requirements__message"
+        }
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "password-requirements",
+                axes: {}
+            },
+            title: {
+                base: "password-requirements__title",
+                axes: {}
+            },
+            list: {
+                base: "password-requirements__list",
+                axes: {}
+            },
+            item: {
+                base: "password-requirements__item",
+                axes: {}
+            },
+            icon: {
+                base: "password-requirements__icon",
+                axes: {}
+            },
+            message: {
+                base: "password-requirements__message",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 4,
+            title: 5,
+            list: 2,
+            item: 1,
+            icon: 0,
+            message: 3
+        }
+    }
+});
+export { passwordRequirements };

package/dist/components/password-requirements/index.d.ts

@@ -1 +1,2 @@
-export { default as PasswordRequirements, type PasswordRequirementsProps } from "./PasswordRequirements";
+export { PasswordRequirementsLayout as default, PasswordRequirementsLayout as PasswordRequirements, } from "./PasswordRequirements.generated";
+export type { PasswordRequirementsProps } from "./PasswordRequirements.generated";

package/dist/components/password-requirements/index.js

@@ -1 +1 @@
-export { default as PasswordRequirements } from "./PasswordRequirements.js";
+export { PasswordRequirementsLayout as PasswordRequirements, PasswordRequirementsLayout as default } from "./PasswordRequirements.generated.js";

package/dist/components/popover/Popover.css

@@ -13,7 +13,7 @@
     line-height: 1.25rem;
     background-color: var(--color-overlay, var(--color-base-100));
     color: var(--color-overlay-foreground, var(--color-base-content));
-    box-shadow: var(--shadow-overlay, 0 24px 48px color-mix(in oklab, black 20%, transparent));
+    box-shadow: var(--shadow-overlay, 0 24px 48px color-mix(in oklab, rgb(var(--shadow-color, 0 0 0)) 20%, transparent));
     opacity: 0;
     pointer-events: none;
     transform: translateY(-4px) scale(0.96);
@@ -81,8 +81,8 @@
 
   .popover__trigger:focus-visible,
   .popover__trigger[data-focus-visible="true"] {
-    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);
     border-radius: var(--radius-field, 0.375rem);
   }
 

package/dist/components/popover/Popover.generated.d.ts

@@ -1,12 +1,12 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Popover.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 import { type OverlayPlacement } from "../_shared/overlayPosition";
 export type PopoverPlacement = OverlayPlacement;
-export type PopoverRootProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+export type PopoverRootProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
     children: JSX.Element;
-    isOpen?: boolean;
+    open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     placement?: PopoverPlacement;
@@ -17,24 +17,24 @@ export type PopoverRootProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTM
     onInteractOutside?: (event: Event) => void;
 };
 declare const PopoverRoot: __LayoutComponent<PopoverRootProps>;
-export type PopoverTriggerProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+export type PopoverTriggerProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
     children: JSX.Element;
 };
 declare const PopoverTrigger: __LayoutComponent<PopoverTriggerProps>;
-export type PopoverContentProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+export type PopoverContentProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
     children: JSX.Element;
     sideOffset?: number;
 };
 declare const PopoverContent: __LayoutComponent<PopoverContentProps>;
-export type PopoverDialogProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+export type PopoverDialogProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
     children: JSX.Element;
 };
 declare const PopoverDialog: __LayoutComponent<PopoverDialogProps>;
-export type PopoverArrowProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & {
+export type PopoverArrowProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & {
     children?: JSX.Element;
 };
 declare const PopoverArrow: __LayoutComponent<PopoverArrowProps>;
-export type PopoverHeadingProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & {
+export type PopoverHeadingProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & {
     children: JSX.Element;
 };
 declare const PopoverHeading: __LayoutComponent<PopoverHeadingProps>;