@pathscale/ui 2.1.1 → 2.2.0

package/dist/components/text/Text.generated.js

@@ -9,7 +9,6 @@ const __solidLayoutTextRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "size",
@@ -25,7 +24,7 @@ const __solidLayoutTextRoot = (_stable, p)=>{
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.base, local.class, local.className)
+                class: twMerge(CLASSES.base, local.class)
             }), {
             "data-slot": "text",
             get ["data-size"] () {

package/dist/components/textarea/Textarea.generated.d.ts

@@ -1,10 +1,19 @@
 import type { Component as __LayoutComponent } from "solid-js";
-import { TextArea, TextAreaRoot, type TextAreaProps as BaseTextAreaProps, type TextAreaRootProps as BaseTextAreaRootProps, type TextAreaVariant as BaseTextAreaVariant } from "../text-area";
-export type TextareaVariant = BaseTextAreaVariant;
-export type TextareaRootProps = BaseTextAreaRootProps;
-export type TextareaProps = BaseTextAreaProps;
-declare const Textarea: __LayoutComponent<BaseTextAreaProps> & {
-    Root: __LayoutComponent<BaseTextAreaProps>;
+import "./Textarea.css";
+import { type JSX } from "solid-js";
+import type { UIBaseProps, State, Issue } from "../vocabulary";
+export type TextareaVariant = "primary" | "secondary";
+export type TextareaRootProps = Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, "children"> & UIBaseProps & {
+    variant?: TextareaVariant;
+    fullWidth?: boolean;
+    issues?: Issue[];
+    state?: State;
+    disabled?: boolean;
+};
+declare const TextareaRoot: __LayoutComponent<TextareaRootProps>;
+declare const Textarea: __LayoutComponent<TextareaRootProps> & {
+    Root: __LayoutComponent<TextareaRootProps>;
 };
 export default Textarea;
-export { Textarea, TextArea, TextAreaRoot };
+export { Textarea, TextareaRoot };
+export type { TextareaRootProps as TextareaProps };

package/dist/components/textarea/Textarea.generated.js

@@ -1,17 +1,57 @@
-import { createComponent, mergeProps } from "solid-js/web";
+import { mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
+import "./Textarea.css";
 import { splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
-import { TextArea, TextAreaRoot } from "../text-area/index.js";
 import { CLASSES, componentRecipe } from "./Textarea.recipe.js";
+import { resolveState } from "../vocabulary.js";
+var _tmpl$ = /*#__PURE__*/ template("<textarea>");
 const __solidLayoutTextareaRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className"
+        "dataTheme",
+        "style",
+        "variant",
+        "fullWidth",
+        "issues",
+        "state",
+        "disabled"
     ]);
-    return createComponent(TextAreaRoot, mergeProps(others, ()=>({
-            class: twMerge(CLASSES.base, local.class, local.className)
-        })));
+    const variant = ()=>local.variant ?? "primary";
+    const fullWidth = ()=>Boolean(local.fullWidth);
+    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues));
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, {
+            get ["class"] () {
+                return twMerge(CLASSES.base, CLASSES.variant[variant()], fullWidth() && CLASSES.flag.fullWidth, local.class);
+            },
+            "data-slot": "textarea",
+            get ["data-invalid"] () {
+                return isInvalid() ? "true" : void 0;
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : void 0;
+            },
+            get ["aria-invalid"] () {
+                return isInvalid() ? "true" : void 0;
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : void 0;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get disabled () {
+                return isDisabled();
+            }
+        }), false, false);
+        return _el$;
+    })();
 };
 const TextareaRoot = defineComponent({
     recipe: componentRecipe,
@@ -23,4 +63,4 @@ const Textarea = Object.assign(TextareaRoot, {
 });
 const Textarea_generated = Textarea;
 export default Textarea_generated;
-export { TextArea, TextAreaRoot, Textarea };
+export { Textarea, TextareaRoot };

package/dist/components/textarea/Textarea.recipe.d.ts

@@ -1,9 +1,17 @@
 export declare const CLASSES: {
-    readonly base: "";
+    readonly base: "textarea";
+    readonly variant: {
+        readonly primary: "textarea--primary";
+        readonly secondary: "textarea--secondary";
+    };
+    readonly flag: {
+        readonly fullWidth: "textarea--full-width";
+    };
 };
 export declare const componentRecipe: import("solid-layouts").Recipe<{
     readonly component: "textarea";
     readonly slots: {
         readonly root: {};
+        readonly textarea: {};
     };
 }>;

package/dist/components/textarea/Textarea.recipe.js

@@ -1,22 +1,35 @@
 import { recipe } from "../../lib/layouts/index.js";
 const CLASSES = {
-    base: ""
+    base: "textarea",
+    variant: {
+        primary: "textarea--primary",
+        secondary: "textarea--secondary"
+    },
+    flag: {
+        fullWidth: "textarea--full-width"
+    }
 };
 const componentRecipe = recipe({
     component: "textarea",
     slots: {
-        root: {}
+        root: {},
+        textarea: {}
     },
     _layouts: {
         slots: {
             root: {
                 base: "",
                 axes: {}
+            },
+            textarea: {
+                base: "",
+                axes: {}
             }
         },
         stateKeys: [],
         slotIds: {
-            root: 0
+            root: 0,
+            textarea: 1
         }
     }
 });

package/dist/components/textarea/index.d.ts

@@ -1,2 +1 @@
-export { default as Textarea } from "./Textarea.generated";
-export { default, TextArea, TextAreaRoot, type TextareaProps as TextAreaProps, type TextareaRootProps as TextAreaRootProps, type TextareaVariant as TextAreaVariant, } from "./Textarea.generated";
+export { default, Textarea, TextareaRoot, type TextareaProps, type TextareaRootProps, type TextareaVariant, } from "./Textarea.generated";

package/dist/components/textarea/index.js

@@ -1 +1 @@
-export { TextArea, TextAreaRoot, default as Textarea, default } from "./Textarea.generated.js";
+export { Textarea, TextareaRoot, default } from "./Textarea.generated.js";

package/dist/components/theme-color-picker/ThemeColorPicker.generated.d.ts

@@ -1,10 +1,10 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 import { type OverlayPlacement } from "../_shared/overlayPosition";
 export type ThemeColorPickerAlign = "start" | "end";
 export type ThemeColorPickerPlacement = OverlayPlacement;
-export interface ThemeColorPickerProps extends IComponentBaseProps {
+export interface ThemeColorPickerProps extends UIBaseProps {
     /**
      * Prefix for localStorage keys (e.g., "myapp" becomes "myapp_theme_color")
      * @default "theme"

package/dist/components/theme-color-picker/ThemeColorPicker.generated.js

@@ -25,7 +25,6 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
         "autoFlip",
         "children",
         "class",
-        "className",
         "style",
         "dataTheme"
     ]);
@@ -114,7 +113,7 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
             onChange: handleColorChange,
             onFormatChange: ()=>{}
         });
-    const classes = ()=>twMerge(CLASSES.base, local.class, local.className);
+    const classes = ()=>twMerge(CLASSES.base, local.class);
     const popoverClasses = ()=>CLASSES.popover;
     const overlayPosition = createOverlayPosition({
         open: isOpen,
@@ -154,7 +153,7 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
                 },
                 get children () {
                     return local.children ?? createComponent(icon, mergeProps({
-                        name: "icon-[mdi--palette]",
+                        src: "icon-[mdi--palette]",
                         width: 16,
                         height: 16
                     }, ()=>({

package/dist/components/time-field/TimeField.generated.d.ts

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./TimeField.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State, Issue } from "../vocabulary";
 export type TimeFieldVariant = "primary" | "secondary";
 export type TimeFieldRenderProps = {
     value: string;
@@ -9,7 +9,7 @@ export type TimeFieldRenderProps = {
     isDisabled: boolean;
     isRequired: boolean;
 };
-export type TimeFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onBlur"> & IComponentBaseProps & {
+export type TimeFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onBlur"> & UIBaseProps & {
     children?: JSX.Element | ((props: TimeFieldRenderProps) => JSX.Element);
     name?: string;
     value?: string;
@@ -18,32 +18,31 @@ export type TimeFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "child
     onBlur?: JSX.EventHandlerUnion<HTMLInputElement, FocusEvent>;
     fullWidth?: boolean;
     variant?: TimeFieldVariant;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
-    isInvalid?: boolean;
-    isRequired?: boolean;
+    issues?: Issue[];
     required?: boolean;
 };
-export type TimeFieldGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type TimeFieldGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element | ((props: TimeFieldRenderProps) => JSX.Element);
 };
-export type TimeFieldInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput" | "type"> & IComponentBaseProps & {
+export type TimeFieldInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput" | "type"> & UIBaseProps & {
     onInput?: JSX.EventHandlerUnion<HTMLInputElement, InputEvent>;
 };
-export type TimeFieldInputContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type TimeFieldInputContainerProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 export type TimeFieldSegmentValue = {
     type?: string;
     text?: string;
     isPlaceholder?: boolean;
     isFocused?: boolean;
-    isInvalid?: boolean;
-    isDisabled?: boolean;
+    issues?: Issue[];
+    state?: State;
 };
-export type TimeFieldSegmentProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps & {
+export type TimeFieldSegmentProps = JSX.HTMLAttributes<HTMLSpanElement> & UIBaseProps & {
     segment?: TimeFieldSegmentValue;
 };
-export type TimeFieldPrefixProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
-export type TimeFieldSuffixProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type TimeFieldPrefixProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
+export type TimeFieldSuffixProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 declare const TimeFieldRoot: __LayoutComponent<TimeFieldRootProps>;
 declare const TimeFieldGroup: __LayoutComponent<TimeFieldGroupProps>;
 declare const TimeFieldInput: __LayoutComponent<TimeFieldInputProps>;

package/dist/components/time-field/TimeField.generated.js

@@ -4,6 +4,7 @@ import "./TimeField.css";
 import { createContext, createSignal, splitProps, useContext } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { CLASSES, componentRecipe } from "./TimeField.recipe.js";
+import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<input>"), _tmpl$3 = /*#__PURE__*/ template("<span>");
 const TimeFieldContext = createContext();
 const invokeEventHandler = (handler, event)=>{
@@ -14,7 +15,6 @@ const __solidLayoutTimeFieldRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "name",
@@ -24,10 +24,9 @@ const __solidLayoutTimeFieldRoot = (_stable, p)=>{
         "onBlur",
         "fullWidth",
         "variant",
-        "isDisabled",
+        "state",
         "disabled",
-        "isInvalid",
-        "isRequired",
+        "issues",
         "required"
     ]);
     const [internalValue, setInternalValue] = createSignal(local.defaultValue ?? "");
@@ -35,9 +34,9 @@ const __solidLayoutTimeFieldRoot = (_stable, p)=>{
     const value = ()=>isControlled() ? local.value ?? "" : internalValue();
     const variant = ()=>local.variant ?? "primary";
     const fullWidth = ()=>Boolean(local.fullWidth);
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
-    const isInvalid = ()=>Boolean(local.isInvalid);
-    const isRequired = ()=>Boolean(local.isRequired) || Boolean(local.required);
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
+    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues));
+    const isRequired = ()=>Boolean(local.required) || Boolean(local.required);
     const setValue = (nextValue)=>{
         if (!isControlled()) setInternalValue(nextValue);
         local.onChange?.(nextValue);
@@ -64,7 +63,7 @@ const __solidLayoutTimeFieldRoot = (_stable, p)=>{
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], fullWidth() && CLASSES.Root.flag.fullWidth, local.class, local.className)
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], fullWidth() && CLASSES.Root.flag.fullWidth, local.class)
                 }), {
                 "data-slot": "time-field",
                 get ["data-invalid"] () {
@@ -111,7 +110,6 @@ const __solidLayoutTimeFieldGroup = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -124,7 +122,7 @@ const __solidLayoutTimeFieldGroup = (_stable, p)=>{
     return (()=>{
         var _el$2 = _tmpl$();
         spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Group.base, CLASSES.Group.variant[context?.variant() ?? "primary"], context?.fullWidth() && CLASSES.Group.flag.fullWidth, local.class, local.className)
+                class: twMerge(CLASSES.Group.base, CLASSES.Group.variant[context?.variant() ?? "primary"], context?.fullWidth() && CLASSES.Group.flag.fullWidth, local.class)
             }), {
             "data-slot": "date-input-group",
             get ["data-invalid"] () {
@@ -156,7 +154,6 @@ const __solidLayoutTimeFieldInput = (_stable, p)=>{
     const context = useContext(TimeFieldContext);
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style",
         "onInput",
@@ -177,7 +174,7 @@ const __solidLayoutTimeFieldInput = (_stable, p)=>{
         spread(_el$3, mergeProps(others, {
             type: "time"
         }, ()=>({
-                class: twMerge(CLASSES.Input.base, local.class, local.className)
+                class: twMerge(CLASSES.Input.base, local.class)
             }), {
             "data-slot": "date-input-group-input",
             get ["data-theme"] () {
@@ -219,14 +216,13 @@ const __solidLayoutTimeFieldInputContainer = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$4 = _tmpl$();
         spread(_el$4, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.InputContainer.base, local.class, local.className)
+                class: twMerge(CLASSES.InputContainer.base, local.class)
             }), {
             "data-slot": "date-input-group-input-container",
             get ["data-theme"] () {
@@ -249,7 +245,6 @@ const __solidLayoutTimeFieldSegment = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "segment"
@@ -257,7 +252,7 @@ const __solidLayoutTimeFieldSegment = (_stable, p)=>{
     return (()=>{
         var _el$5 = _tmpl$3();
         spread(_el$5, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Segment.base, local.class, local.className)
+                class: twMerge(CLASSES.Segment.base, local.class)
             }), {
             "data-slot": "date-input-group-segment",
             get ["data-type"] () {
@@ -267,13 +262,13 @@ const __solidLayoutTimeFieldSegment = (_stable, p)=>{
                 return local.segment?.isPlaceholder ? "true" : void 0;
             },
             get ["data-invalid"] () {
-                return local.segment?.isInvalid ? "true" : void 0;
+                return local.segment?.issues?.length ? "true" : void 0;
             },
             get ["data-focused"] () {
                 return local.segment?.isFocused ? "true" : void 0;
             },
             get ["data-disabled"] () {
-                return local.segment?.isDisabled ? "true" : void 0;
+                return local.segment?.state === "disabled" ? "true" : void 0;
             },
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -295,14 +290,13 @@ const __solidLayoutTimeFieldPrefix = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$6 = _tmpl$();
         spread(_el$6, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Prefix.base, local.class, local.className)
+                class: twMerge(CLASSES.Prefix.base, local.class)
             }), {
             "data-slot": "date-input-group-prefix",
             get ["data-theme"] () {
@@ -325,14 +319,13 @@ const __solidLayoutTimeFieldSuffix = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$7 = _tmpl$();
         spread(_el$7, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Suffix.base, local.class, local.className)
+                class: twMerge(CLASSES.Suffix.base, local.class)
             }), {
             "data-slot": "date-input-group-suffix",
             get ["data-theme"] () {

package/dist/components/toast/Toast.css

@@ -41,8 +41,8 @@
 
   .toast-region:focus-visible,
   .toast-region[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);
   }
 
   .toast-region__stack {
@@ -91,7 +91,7 @@
     color: var(--color-overlay-foreground, var(--color-base-content));
     box-shadow: var(
       --shadow-overlay,
-      0 24px 48px color-mix(in oklab, black 24%, transparent)
+      0 24px 48px color-mix(in oklab, rgb(var(--shadow-color, 0 0 0)) 24%, transparent)
     );
   }
 
@@ -179,7 +179,7 @@
   .toast__spinner {
     width: 1rem;
     height: 1rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     border: 2px solid currentColor;
     border-top-color: transparent;
     animation: toast-spinner 600ms linear infinite;

package/dist/components/toast/Toast.generated.d.ts

@@ -3,7 +3,7 @@ import "./Toast.css";
 import { type Component, type JSX, type ParentComponent } from "solid-js";
 import { type ButtonProps } from "../button";
 import { type CloseButtonProps } from "../close-button";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 export declare const DEFAULT_GAP = 12;
 export declare const DEFAULT_MAX_VISIBLE_TOAST = 3;
 export declare const DEFAULT_SCALE_FACTOR = 0.05;
@@ -18,7 +18,7 @@ export interface ToastContentValue {
     description?: JSX.Element;
     variant?: ToastVariant;
     actionProps?: ToastActionProps;
-    isLoading?: boolean;
+    state?: State;
 }
 export interface ToastQueueAddOptions {
     key?: string;
@@ -65,31 +65,31 @@ export declare class ToastQueue<T extends object = ToastContentValue> {
     get visibleToasts(): ToastQueueItem<T>[];
     getQueue(): ToastQueue<T>;
 }
-export type ToastRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "title"> & IComponentBaseProps & {
+export type ToastRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "title"> & UIBaseProps & {
     children?: JSX.Element;
     title?: JSX.Element;
     description?: JSX.Element;
     variant?: ToastVariant;
     indicator?: JSX.Element;
     actionProps?: ToastActionProps;
-    isLoading?: boolean;
+    state?: State;
     onClose?: () => void;
     isFrontmost?: boolean;
     isHidden?: boolean;
     isEntering?: boolean;
     isExiting?: boolean;
 };
-export type ToastContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type ToastContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
 };
-export type ToastIndicatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type ToastIndicatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
     variant?: ToastVariant;
 };
-export type ToastTitleProps = Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "children"> & IComponentBaseProps & {
+export type ToastTitleProps = Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
 };
-export type ToastDescriptionProps = Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "children"> & IComponentBaseProps & {
+export type ToastDescriptionProps = Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
 };
 export type ToastActionButtonProps = ToastActionProps;
@@ -102,7 +102,7 @@ declare const ToastActionButton: __LayoutComponent<ToastActionButtonProps>;
 declare const ToastCloseButton: __LayoutComponent<ToastCloseButtonProps>;
 declare const ToastRoot: __LayoutComponent<ToastRootProps>;
 export type ToastRenderFn = (toast: ToastQueueItem<ToastContentValue>, dismiss: () => void) => JSX.Element;
-export type ToastProviderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type ToastProviderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
     placement?: ToastPlacement;
     queue?: ToastQueue<ToastContentValue> | null;
@@ -118,7 +118,7 @@ export interface HeroUIToastOptions {
     indicator?: JSX.Element;
     variant?: ToastVariant;
     actionProps?: ToastActionProps;
-    isLoading?: boolean;
+    state?: State;
     timeout?: number;
     onClose?: () => void;
 }