@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/{toggle/Toggle.css → switch/Switch.css}

@@ -1,5 +1,5 @@
 @layer components {
-  .toggle {
+  .switch {
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -13,7 +13,7 @@
     --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%);
     --switch-control-bg-pressed: var(--switch-control-bg-hover);
     --switch-control-bg-checked: var(--color-accent);
-    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
     --switch-control-border: color-mix(in oklab, var(--color-base-content) 24%, transparent);
     --switch-control-border-checked: color-mix(
       in oklab,
@@ -22,7 +22,7 @@
     );
   }
 
-  .toggle__input {
+  .switch__input {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -34,16 +34,16 @@
     clip-path: inset(50%);
   }
 
-  .toggle__control {
+  .switch__control {
     position: relative;
     display: flex;
     flex-shrink: 0;
     align-items: center;
     overflow: hidden;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     height: 1.25rem;
     width: 2.5rem;
-    border: 1px solid var(--switch-control-border);
+    border: var(--border, 1px) solid var(--switch-control-border);
     background-color: var(--switch-control-bg);
     transition:
       background-color 250ms ease,
@@ -51,25 +51,25 @@
       box-shadow 150ms ease;
   }
 
-  .toggle__thumb {
+  .switch__thumb {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background-color: white;
     margin-inline-start: 0.125rem;
     height: 1rem;
     width: 1.375rem;
     box-shadow:
-      0 0 5px 0 oklch(0% 0 0 / 0.02),
-      0 2px 10px 0 oklch(0% 0 0 / 0.06),
-      0 0 1px 0 oklch(0% 0 0 / 0.3);
+      0 0 5px 0 rgb(var(--shadow-color, 0 0 0) / 2%),
+      0 2px 10px 0 rgb(var(--shadow-color, 0 0 0) / 6%),
+      0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / 30%);
     transition:
       margin 300ms ease,
       background-color 200ms ease;
   }
 
-  .toggle__icon {
+  .switch__icon {
     display: flex;
     width: 100%;
     height: 100%;
@@ -77,13 +77,13 @@
     justify-content: center;
   }
 
-  .toggle__content {
+  .switch__content {
     display: flex;
     flex-direction: column;
     gap: 0;
   }
 
-  .toggle__description {
+  .switch__description {
     color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
     font-size: 0.75rem;
     line-height: 1rem;
@@ -91,147 +91,167 @@
 
   /* ── Focus state ── */
 
-  .toggle:focus-within .toggle__control,
-  .toggle__input:focus-visible + .toggle__control,
-  .toggle[data-focus-visible="true"] .toggle__control {
+  .switch:focus-within .switch__control,
+  .switch__input:focus-visible + .switch__control,
+  .switch[data-focus-visible="true"] .switch__control {
     box-shadow: 0 0 0 3px color-mix(in oklab, var(--switch-control-bg-checked) 22%, transparent);
   }
 
   /* ── Hover state ── */
 
   @media (hover: hover) {
-    .toggle:hover .toggle__control,
-    .toggle[data-hovered="true"] .toggle__control {
+    .switch:hover .switch__control,
+    .switch[data-hovered="true"] .switch__control {
       background-color: var(--switch-control-bg-hover);
     }
   }
 
   /* ── Pressed state ── */
 
-  .toggle:active .toggle__control,
-  .toggle[data-pressed="true"] .toggle__control {
+  .switch:active .switch__control,
+  .switch[data-pressed="true"] .switch__control {
     background-color: var(--switch-control-bg-pressed);
   }
 
   /* ── Checked state ── */
 
-  .toggle[data-selected="true"] .toggle__control {
+  .switch[data-selected="true"] .switch__control {
     background-color: var(--switch-control-bg-checked);
     border-color: var(--switch-control-border-checked);
   }
 
-  .toggle[data-selected="true"] .toggle__thumb {
+  .switch[data-selected="true"] .switch__thumb {
     margin-inline-start: calc(100% - 1.5rem);
     box-shadow:
-      0 0 5px 0 oklch(0% 0 0 / 0.02),
-      0 2px 10px 0 oklch(0% 0 0 / 0.06),
-      0 0 1px 0 oklch(0% 0 0 / 0.3);
+      0 0 5px 0 rgb(var(--shadow-color, 0 0 0) / 2%),
+      0 2px 10px 0 rgb(var(--shadow-color, 0 0 0) / 6%),
+      0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / 30%);
   }
 
   /* ── Checked + Hover ── */
 
   @media (hover: hover) {
-    .toggle[data-selected="true"]:hover .toggle__control,
-    .toggle[data-selected="true"][data-hovered="true"] .toggle__control {
+    .switch[data-selected="true"]:hover .switch__control,
+    .switch[data-selected="true"][data-hovered="true"] .switch__control {
       background-color: var(--switch-control-bg-checked-hover);
     }
   }
 
   /* ── Checked + Pressed ── */
 
-  .toggle[data-selected="true"]:active .toggle__control,
-  .toggle[data-selected="true"][data-pressed="true"] .toggle__control {
+  .switch[data-selected="true"]:active .switch__control,
+  .switch[data-selected="true"][data-pressed="true"] .switch__control {
     background-color: var(--switch-control-bg-checked-hover);
   }
 
   /* ── Size: sm ── */
 
-  .toggle--sm .toggle__control {
+  .switch--sm .switch__control {
     height: 1rem;
     width: 2rem;
   }
 
-  .toggle--sm .toggle__thumb {
+  .switch--sm .switch__thumb {
     height: 0.75rem;
     width: 1.03125rem;
   }
 
-  .toggle--sm[data-selected="true"] .toggle__thumb {
+  .switch--sm[data-selected="true"] .switch__thumb {
     margin-inline-start: calc(100% - 1.15625rem);
   }
 
   /* ── Size: md (default) ── */
 
-  .toggle--md {
+  .switch--md {
     /* Default size */
   }
 
   /* ── Size: lg ── */
 
-  .toggle--lg .toggle__control {
+  .switch--lg .switch__control {
     height: 1.5rem;
     width: 3rem;
   }
 
-  .toggle--lg .toggle__thumb {
+  .switch--lg .switch__thumb {
     height: 1.25rem;
     width: 1.71875rem;
   }
 
-  .toggle--lg[data-selected="true"] .toggle__thumb {
+  .switch--lg[data-selected="true"] .switch__thumb {
     margin-inline-start: calc(100% - 1.84375rem);
   }
 
   /* ── Color: default ── */
 
-  .toggle--default {
-    --switch-control-bg-checked: var(--color-default-foreground);
-    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
-  }
 
   /* ── Color: accent (default) ── */
 
-  .toggle--accent {
-    --switch-control-bg-checked: var(--color-accent);
-    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
-  }
 
   /* ── Color: success ── */
 
-  .toggle--success {
-    --switch-control-bg-checked: var(--color-success);
-    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
-  }
 
   /* ── Color: warning ── */
 
-  .toggle--warning {
-    --switch-control-bg-checked: var(--color-warning);
-    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
-  }
 
   /* ── Color: danger ── */
 
-  .toggle--danger {
-    --switch-control-bg-checked: var(--color-danger);
-    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
-  }
 
   /* ── Disabled state ── */
 
-  .toggle--disabled,
-  .toggle[data-disabled="true"] {
+  .switch--disabled,
+  .switch[data-disabled="true"] {
     cursor: not-allowed;
     opacity: 0.55;
   }
 
-  .toggle--disabled .toggle__thumb,
-  .toggle[data-disabled="true"] .toggle__thumb {
+  .switch--disabled .switch__thumb,
+  .switch[data-disabled="true"] .switch__thumb {
     background-color: color-mix(in oklab, var(--color-default-foreground) 20%, transparent);
   }
 
-  .toggle--disabled[data-selected="true"] .toggle__thumb,
-  .toggle[data-disabled="true"][data-selected="true"] .toggle__thumb {
+  .switch--disabled[data-selected="true"] .switch__thumb,
+  .switch[data-disabled="true"][data-selected="true"] .switch__thumb {
     opacity: 0.4;
   }
+
+  .switch--flavor-neutral {
+    --switch-control-bg-checked: var(--color-default-foreground);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
+  }
+
+  .switch--flavor-primary {
+    --switch-control-bg-checked: var(--color-primary);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
+  }
+
+  .switch--flavor-secondary {
+    --switch-control-bg-checked: var(--color-secondary);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
+  }
+
+  .switch--flavor-accent {
+    --switch-control-bg-checked: var(--color-accent);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
+  }
+
+  .switch--flavor-destructive {
+    --switch-control-bg-checked: var(--color-danger);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
+  }
+
+  .switch--flavor-success {
+    --switch-control-bg-checked: var(--color-success);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
+  }
+
+  .switch--flavor-warning {
+    --switch-control-bg-checked: var(--color-warning);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
+  }
+
+  .switch--flavor-info {
+    --switch-control-bg-checked: var(--color-info);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), var(--shade, var(--color-base-content)) var(--shade-hover, 8%));
+  }
 }

package/dist/components/{toggle/Toggle.generated.d.ts → switch/Switch.generated.d.ts}

@@ -1,17 +1,17 @@
 import type { Component as __LayoutComponent } from "solid-js";
-import "./Toggle.css";
+import "./Switch.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, Flavor, State } from "../vocabulary";
 export type ToggleColor = "default" | "accent" | "success" | "warning" | "danger";
 export type ToggleSize = "sm" | "md" | "lg";
-export type ToggleProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "color"> & IComponentBaseProps & {
+export type ToggleProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "color"> & UIBaseProps & {
     defaultChecked?: boolean;
     children?: JSX.Element;
     description?: JSX.Element;
     icon?: JSX.Element;
-    isDisabled?: boolean;
-    color?: ToggleColor;
+    state?: State;
+    flavor?: Flavor;
     size?: ToggleSize;
 };
-declare const Toggle: __LayoutComponent<ToggleProps>;
-export default Toggle;
+declare const Switch: __LayoutComponent<ToggleProps>;
+export default Switch;

package/dist/components/{toggle/Toggle.generated.js → switch/Switch.generated.js}

@@ -1,23 +1,22 @@
 import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
-import "./Toggle.css";
+import "./Switch.css";
 import { Show, createSignal, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
-import { CLASSES, componentRecipe } from "./Toggle.recipe.js";
+import { CLASSES, componentRecipe } from "./Switch.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ template("<label><input><span><span>");
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
-const __solidLayoutToggle = (_stable, p)=>{
+const __solidLayoutSwitch = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "children",
         "description",
         "icon",
-        "isDisabled",
-        "color",
+        "state",
+        "flavor",
         "size",
         "checked",
         "defaultChecked",
@@ -28,8 +27,8 @@ const __solidLayoutToggle = (_stable, p)=>{
     const [internalSelected, setInternalSelected] = createSignal(Boolean(local.defaultChecked));
     const isControlled = ()=>void 0 !== local.checked;
     const isSelected = ()=>isControlled() ? Boolean(local.checked) : internalSelected();
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
-    const color = ()=>local.color ?? "accent";
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
+    const color = ()=>local.flavor ?? "accent";
     const size = ()=>local.size ?? "md";
     const hasContent = ()=>null != local.children || null != local.description;
     const handleChange = (event)=>{
@@ -41,12 +40,12 @@ const __solidLayoutToggle = (_stable, p)=>{
     return (()=>{
         var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
         spread(_el$, mergeProps(()=>({
-                class: twMerge(CLASSES.base, CLASSES.size[size()], CLASSES.color[color()], isDisabled() && CLASSES.flag.disabled, local.class, local.className)
+                class: twMerge(CLASSES.base, CLASSES.size[size()], CLASSES.flavor[color()] ?? `switch--flavor-${color()}`, isDisabled() && CLASSES.flag.disabled, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
-            "data-slot": "toggle",
+            "data-slot": "switch",
             get ["data-selected"] () {
                 return isSelected() ? "true" : "false";
             },
@@ -63,7 +62,7 @@ const __solidLayoutToggle = (_stable, p)=>{
         }, ()=>({
                 class: CLASSES.slot.input
             }), {
-            "data-slot": "toggle-input",
+            "data-slot": "switch-input",
             get checked () {
                 return isSelected();
             },
@@ -75,13 +74,13 @@ const __solidLayoutToggle = (_stable, p)=>{
         spread(_el$3, mergeProps(()=>({
                 class: CLASSES.slot.control
             }), {
-            "data-slot": "toggle-control",
+            "data-slot": "switch-control",
             "aria-hidden": "true"
         }), false, true);
         spread(_el$4, mergeProps(()=>({
                 class: CLASSES.slot.thumb
             }), {
-            "data-slot": "toggle-thumb"
+            "data-slot": "switch-thumb"
         }), false, true);
         insert(_el$4, createComponent(Show, {
             get when () {
@@ -92,7 +91,7 @@ const __solidLayoutToggle = (_stable, p)=>{
                 spread(_el$5, mergeProps(()=>({
                         class: CLASSES.slot.icon
                     }), {
-                    "data-slot": "toggle-icon"
+                    "data-slot": "switch-icon"
                 }), false, true);
                 insert(_el$5, ()=>local.icon);
                 return _el$5;
@@ -107,7 +106,7 @@ const __solidLayoutToggle = (_stable, p)=>{
                 spread(_el$6, mergeProps(()=>({
                         class: CLASSES.slot.content
                     }), {
-                    "data-slot": "toggle-content"
+                    "data-slot": "switch-content"
                 }), false, true);
                 insert(_el$6, createComponent(Show, {
                     get when () {
@@ -140,10 +139,10 @@ const __solidLayoutToggle = (_stable, p)=>{
         return _el$;
     })();
 };
-const Toggle = defineComponent({
+const Switch = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutToggle,
+    layout: __solidLayoutSwitch,
     embedded: true
 });
-const Toggle_generated = Toggle;
-export default Toggle_generated;
+const Switch_generated = Switch;
+export default Switch_generated;

package/dist/components/switch/Switch.recipe.d.ts

@@ -0,0 +1,43 @@
+export declare const CLASSES: {
+    readonly base: "switch";
+    readonly slot: {
+        readonly input: "switch__input";
+        readonly control: "switch__control";
+        readonly thumb: "switch__thumb";
+        readonly icon: "switch__icon";
+        readonly content: "switch__content";
+        readonly description: "switch__description";
+    };
+    readonly flavor: {
+        readonly neutral: "switch--flavor-neutral";
+        readonly primary: "switch--flavor-primary";
+        readonly secondary: "switch--flavor-secondary";
+        readonly accent: "switch--flavor-accent";
+        readonly destructive: "switch--flavor-destructive";
+        readonly success: "switch--flavor-success";
+        readonly warning: "switch--flavor-warning";
+        readonly info: "switch--flavor-info";
+    };
+    readonly size: {
+        readonly sm: "switch--sm";
+        readonly md: "switch--md";
+        readonly lg: "switch--lg";
+    };
+    readonly flag: {
+        readonly disabled: "switch--disabled";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "switch";
+    readonly slots: {
+        readonly description: {};
+        readonly label: {};
+        readonly root: {};
+        readonly switch: {};
+        readonly "switch-content": {};
+        readonly "switch-control": {};
+        readonly "switch-icon": {};
+        readonly "switch-input": {};
+        readonly "switch-thumb": {};
+    };
+}>;

package/dist/components/switch/Switch.recipe.js

@@ -0,0 +1,97 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "switch",
+    slot: {
+        input: "switch__input",
+        control: "switch__control",
+        thumb: "switch__thumb",
+        icon: "switch__icon",
+        content: "switch__content",
+        description: "switch__description"
+    },
+    flavor: {
+        neutral: "switch--flavor-neutral",
+        primary: "switch--flavor-primary",
+        secondary: "switch--flavor-secondary",
+        accent: "switch--flavor-accent",
+        destructive: "switch--flavor-destructive",
+        success: "switch--flavor-success",
+        warning: "switch--flavor-warning",
+        info: "switch--flavor-info"
+    },
+    size: {
+        sm: "switch--sm",
+        md: "switch--md",
+        lg: "switch--lg"
+    },
+    flag: {
+        disabled: "switch--disabled"
+    }
+};
+const componentRecipe = recipe({
+    component: "switch",
+    slots: {
+        description: {},
+        label: {},
+        root: {},
+        switch: {},
+        "switch-content": {},
+        "switch-control": {},
+        "switch-icon": {},
+        "switch-input": {},
+        "switch-thumb": {}
+    },
+    _layouts: {
+        slots: {
+            description: {
+                base: "",
+                axes: {}
+            },
+            label: {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            },
+            switch: {
+                base: "",
+                axes: {}
+            },
+            "switch-content": {
+                base: "",
+                axes: {}
+            },
+            "switch-control": {
+                base: "",
+                axes: {}
+            },
+            "switch-icon": {
+                base: "",
+                axes: {}
+            },
+            "switch-input": {
+                base: "",
+                axes: {}
+            },
+            "switch-thumb": {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            description: 0,
+            label: 1,
+            root: 2,
+            switch: 3,
+            "switch-content": 4,
+            "switch-control": 5,
+            "switch-icon": 6,
+            "switch-input": 7,
+            "switch-thumb": 8
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/{toggle → switch}/index.d.ts

@@ -1 +1 @@
-export { default, type ToggleProps, type ToggleColor, type ToggleSize } from "./Toggle.generated";
+export { default, type ToggleProps, type ToggleColor, type ToggleSize } from "./Switch.generated";

package/dist/components/switch/index.js

@@ -0,0 +1 @@
+export { default } from "./Switch.generated.js";

package/dist/components/table/ExpandToggle.generated.d.ts

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type ExpandToggleProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onToggle"> & IComponentBaseProps & {
+import type { UIBaseProps } from "../vocabulary";
+export type ExpandToggleProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onToggle"> & UIBaseProps & {
     expanded: boolean;
     onToggle?: () => void;
     size?: number;

package/dist/components/table/ExpandToggle.generated.js

@@ -13,7 +13,6 @@ const __solidLayoutExpandToggle = (_stable, p)=>{
         "label",
         "disabled",
         "class",
-        "className",
         "onClick",
         "dataTheme"
     ]);
@@ -34,7 +33,7 @@ const __solidLayoutExpandToggle = (_stable, p)=>{
                 return rest.type ?? "button";
             }
         }, ()=>({
-                class: twMerge("inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-base-300 bg-base-100 text-base-content transition-colors hover:bg-base-200", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/60", isDisabled() && "cursor-not-allowed opacity-60 hover:bg-base-100", local.class, local.className)
+                class: twMerge("inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-base-300 bg-base-100 text-base-content transition-colors hover:bg-base-200", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/60", isDisabled() && "cursor-not-allowed opacity-60 hover:bg-base-100", local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -60,7 +59,7 @@ const __solidLayoutExpandToggle = (_stable, p)=>{
             },
             get fallback () {
                 return createComponent(icon, {
-                    name: "icon-[lucide--chevron-right]",
+                    src: "icon-[lucide--chevron-right]",
                     get width () {
                         return iconSize();
                     },
@@ -72,7 +71,7 @@ const __solidLayoutExpandToggle = (_stable, p)=>{
             },
             get children () {
                 return createComponent(icon, {
-                    name: "icon-[lucide--chevron-down]",
+                    src: "icon-[lucide--chevron-down]",
                     get width () {
                         return iconSize();
                     },

package/dist/components/table/InlineConfirm.generated.d.ts

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 export type InlineConfirmVariant = "primary" | "danger" | "warning";
-export type InlineConfirmProps = IComponentBaseProps & {
+export type InlineConfirmProps = UIBaseProps & {
     prompt: string;
     confirmLabel: string;
     cancelLabel: string;
@@ -9,7 +9,7 @@ export type InlineConfirmProps = IComponentBaseProps & {
     onCancel: () => void;
     loading?: boolean;
     disabled?: boolean;
-    confirmVariant?: InlineConfirmVariant;
+    confirmFlavor?: InlineConfirmVariant;
 };
 declare const InlineConfirm: __LayoutComponent<InlineConfirmProps>;
 export default InlineConfirm;