@pathscale/ui 2.1.1 → 2.2.0

package/dist/components/link/Link.css

@@ -67,8 +67,8 @@
 
   .link:focus-visible,
   .link[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);
     text-decoration-color: currentColor;
   }
 

package/dist/components/link/Link.generated.d.ts

@@ -1,16 +1,16 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Link.css";
 import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 export type LinkVariant = "default";
 export type LinkUnderline = "always" | "hover" | "none";
-export type LinkRootProps = Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "color"> & IComponentBaseProps & {
+export type LinkRootProps = Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "color"> & UIBaseProps & {
     variant?: LinkVariant;
     underline?: LinkUnderline;
     isExternal?: boolean;
-    isDisabled?: boolean;
+    state?: State;
 };
-export type LinkIconProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps;
+export type LinkIconProps = JSX.HTMLAttributes<HTMLSpanElement> & UIBaseProps;
 declare const LinkRoot: __LayoutComponent<LinkRootProps>;
 declare const LinkIcon: __LayoutComponent<LinkIconProps>;
 type LinkComponent = Component<LinkRootProps> & {

package/dist/components/link/Link.generated.js

@@ -16,20 +16,19 @@ const __solidLayoutLinkRoot = (_stable, p)=>{
         "children",
         "href",
         "class",
-        "className",
         "dataTheme",
         "style",
         "variant",
         "underline",
         "isExternal",
-        "isDisabled",
+        "state",
         "target",
         "rel",
         "tabIndex"
     ]);
     const variant = ()=>local.variant ?? "default";
     const underline = ()=>local.underline ?? "always";
-    const isDisabled = ()=>Boolean(local.isDisabled);
+    const isDisabled = ()=>Boolean("disabled" === local.state);
     const isExternal = ()=>Boolean(local.isExternal);
     return (()=>{
         var _el$ = _tmpl$();
@@ -47,7 +46,7 @@ const __solidLayoutLinkRoot = (_stable, p)=>{
                 return memo(()=>!!isDisabled())() ? -1 : local.tabIndex;
             }
         }, ()=>({
-                class: twMerge(CLASSES.base, CLASSES.variant[variant()], CLASSES.underline[underline()], isExternal() && CLASSES.flag.external, isDisabled() && CLASSES.flag.disabled, local.class, local.className)
+                class: twMerge(CLASSES.base, CLASSES.variant[variant()], CLASSES.underline[underline()], isExternal() && CLASSES.flag.external, isDisabled() && CLASSES.flag.disabled, local.class)
             }), {
             "data-slot": "link",
             get ["data-theme"] () {
@@ -78,7 +77,6 @@ const LinkRoot = defineComponent({
 const __solidLayoutLinkIcon = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "children",
         "dataTheme",
         "style"
@@ -87,7 +85,7 @@ const __solidLayoutLinkIcon = (_stable, p)=>{
     return (()=>{
         var _el$2 = _tmpl$2();
         spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.icon, local.class, local.className)
+                class: twMerge(CLASSES.slot.icon, local.class)
             }), {
             "data-slot": "link-icon",
             get ["data-default-icon"] () {

package/dist/components/list-box/ListBox.css

@@ -58,8 +58,8 @@
 
   .list-box-item:focus-visible:not(:focus),
   .list-box-item[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);
   }
 
   .list-box-item:active,

package/dist/components/list-box/ListBox.generated.d.ts

@@ -1,12 +1,12 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ListBox.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 import { type ListBoxSelectionMode, type ListBoxVariant } from "./context";
-export type ListBoxRootProps<T = unknown> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+export type ListBoxRootProps<T = unknown> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & UIBaseProps & {
     children?: JSX.Element | ((item: T) => JSX.Element);
     items?: readonly T[];
-    renderEmptyState?: () => JSX.Element;
+    renderEmpty?: () => JSX.Element;
     variant?: ListBoxVariant;
     selectionMode?: ListBoxSelectionMode;
     selectedKeys?: Iterable<string | number>;
@@ -15,7 +15,7 @@ export type ListBoxRootProps<T = unknown> = Omit<JSX.HTMLAttributes<HTMLDivEleme
     disallowEmptySelection?: boolean;
     onSelectionChange?: (keys: Set<string>) => void;
     onAction?: (key: string) => void;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
 };
 declare const ListBoxRoot: __LayoutComponent<ListBoxRootProps>;

package/dist/components/list-box/ListBox.generated.js

@@ -27,11 +27,10 @@ const __solidLayoutListBoxRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "items",
-        "renderEmptyState",
+        "renderEmpty",
         "variant",
         "selectionMode",
         "selectedKeys",
@@ -40,7 +39,7 @@ const __solidLayoutListBoxRoot = (_stable, p)=>{
         "disallowEmptySelection",
         "onSelectionChange",
         "onAction",
-        "isDisabled",
+        "state",
         "disabled",
         "role",
         "onKeyDown"
@@ -51,7 +50,7 @@ const __solidLayoutListBoxRoot = (_stable, p)=>{
     const variant = ()=>local.variant ?? "default";
     const selectionMode = ()=>local.selectionMode ?? "none";
     const isControlled = ()=>void 0 !== local.selectedKeys;
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
     const selectedKeys = createMemo(()=>isControlled() ? normalizeKeys(local.selectedKeys) : internalSelectedKeys());
     const disabledKeys = createMemo(()=>normalizeKeys(local.disabledKeys));
     const getEnabledItems = ()=>registeredItems().filter((item)=>!item.disabled && !disabledKeys().has(item.key) && !isDisabled());
@@ -152,7 +151,7 @@ const __solidLayoutListBoxRoot = (_stable, p)=>{
         const isItemRenderer = "function" == typeof local.children && local.children.length > 0;
         const resolvedStaticChildren = "function" == typeof local.children ? isItemRenderer ? null : local.children() : local.children ?? null;
         if (local.items) {
-            if (0 === local.items.length) return local.renderEmptyState?.() ?? null;
+            if (0 === local.items.length) return local.renderEmpty?.() ?? null;
             if (isItemRenderer) {
                 const renderItem = local.children;
                 return createComponent(For, {
@@ -206,7 +205,7 @@ const __solidLayoutListBoxRoot = (_stable, p)=>{
                     return isDisabled() ? "true" : "false";
                 },
                 get ["class"] () {
-                    return twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], local.class, local.className);
+                    return twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], local.class);
                 },
                 get style () {
                     return local.style;

package/dist/components/list-box/ListBoxItem.generated.d.ts

@@ -1,21 +1,21 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 import { type ListBoxVariant } from "./context";
 type ListBoxItemRenderProps = {
     isSelected: boolean;
     isFocused: boolean;
     isDisabled: boolean;
 };
-export type ListBoxItemRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type ListBoxItemRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     id?: string | number;
     textValue?: string;
     variant?: ListBoxVariant;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
     children?: JSX.Element | ((props: ListBoxItemRenderProps) => JSX.Element);
 };
-export type ListBoxItemIndicatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+export type ListBoxItemIndicatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & UIBaseProps & {
     children?: JSX.Element | ((props: ListBoxItemRenderProps) => JSX.Element);
 };
 declare const ListBoxItemRoot: __LayoutComponent<ListBoxItemRootProps>;

package/dist/components/list-box/ListBoxItem.generated.js

@@ -23,13 +23,12 @@ const __solidLayoutListBoxItemRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "id",
         "textValue",
         "variant",
-        "isDisabled",
+        "state",
         "disabled",
         "onClick",
         "onKeyDown",
@@ -54,7 +53,7 @@ const __solidLayoutListBoxItemRoot = (_stable, p)=>{
     const isSelectable = ()=>(listBox?.selectionMode() ?? "none") !== "none";
     const isSelected = ()=>listBox?.isSelected(key()) ?? false;
     const isFocused = ()=>listBox?.focusedKey() === key();
-    const isDisabled = ()=>listBox?.isItemDisabled(key(), Boolean(local.isDisabled) || Boolean(local.disabled)) ?? (Boolean(local.isDisabled) || Boolean(local.disabled));
+    const isDisabled = ()=>listBox?.isItemDisabled(key(), Boolean("disabled" === local.state) || Boolean(local.disabled)) ?? (Boolean("disabled" === local.state) || Boolean(local.disabled));
     const renderState = createMemo(()=>({
             isSelected: isSelected(),
             isFocused: isFocused(),
@@ -112,7 +111,7 @@ const __solidLayoutListBoxItemRoot = (_stable, p)=>{
         if (!listBox || !itemRef) return;
         listBox.registerItem({
             key: key(),
-            disabled: Boolean(local.isDisabled) || Boolean(local.disabled),
+            disabled: Boolean("disabled" === local.state) || Boolean(local.disabled),
             ref: itemRef
         });
     });
@@ -160,7 +159,7 @@ const __solidLayoutListBoxItemRoot = (_stable, p)=>{
                     return key();
                 }
             }, ()=>({
-                    class: twMerge(CLASSES.Item.base, CLASSES.Item.variant[variant()], local.class, local.className)
+                    class: twMerge(CLASSES.Item.base, CLASSES.Item.variant[variant()], local.class)
                 }), {
                 get style () {
                     return local.style;
@@ -188,7 +187,6 @@ const __solidLayoutListBoxItemIndicator = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -209,7 +207,7 @@ const __solidLayoutListBoxItemIndicator = (_stable, p)=>{
                 return renderState().isSelected ? "true" : void 0;
             }
         }, ()=>({
-                class: twMerge(CLASSES.ItemIndicator.base, local.class, local.className)
+                class: twMerge(CLASSES.ItemIndicator.base, local.class)
             }), {
             get style () {
                 return local.style;

package/dist/components/list-box/ListBoxSection.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 ListBoxSectionRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+import type { UIBaseProps } from "../vocabulary";
+export type ListBoxSectionRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
     title?: JSX.Element;
 };

package/dist/components/list-box/ListBoxSection.generated.js

@@ -8,7 +8,6 @@ const __solidLayoutListBoxSectionRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "title",
@@ -25,7 +24,7 @@ const __solidLayoutListBoxSectionRoot = (_stable, p)=>{
                 return local.dataTheme;
             }
         }, ()=>({
-                class: twMerge(CLASSES.Section.base, local.class, local.className)
+                class: twMerge(CLASSES.Section.base, local.class)
             }), {
             get style () {
                 return local.style;

package/dist/components/live-chat/LiveChat.css

@@ -8,7 +8,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     border: 0;
     background: var(--color-primary);
     color: var(--color-primary-content);
@@ -28,8 +28,8 @@
   }
 
   .live-chat-bubble:focus-visible {
-    outline: 2px solid color-mix(in oklab, var(--color-primary) 72%, transparent);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width, 2px) solid color-mix(in oklab, var(--color-primary) 72%, transparent);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
   .live-chat-bubble--right {
@@ -51,7 +51,7 @@
     right: -0.25rem;
     width: 1.25rem;
     height: 1.25rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -66,7 +66,7 @@
     pointer-events: none;
     position: absolute;
     inset: 0;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background: var(--color-primary);
     opacity: 0.2;
     animation: live-chat-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
@@ -157,7 +157,7 @@
     flex-shrink: 0;
     width: 2rem;
     height: 2rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -231,7 +231,7 @@
 
   .live-chat-panel__input-area {
     flex-shrink: 0;
-    border-top: 1px solid var(--color-base-300);
+    border-top: var(--border, 1px) solid var(--color-base-300);
     background: var(--color-base-100);
     padding: 0.75rem;
     display: flex;
@@ -249,7 +249,7 @@
   .live-chat-panel__spinner {
     width: 1rem;
     height: 1rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     display: inline-block;
     border: 2px solid color-mix(in oklab, var(--color-primary-content) 30%, transparent);
     border-top-color: var(--color-primary-content);

package/dist/components/live-chat/LiveChatBubble.generated.d.ts

@@ -1,9 +1,9 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./LiveChat.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 import type { LiveChatPanelProps } from "./LiveChatPanel.generated";
-export interface LiveChatBubbleProps extends IComponentBaseProps {
+export interface LiveChatBubbleProps extends UIBaseProps {
     /**
      * Position of the chat bubble
      * @default "bottom-right"

package/dist/components/live-chat/LiveChatBubble.generated.js

@@ -19,7 +19,6 @@ const __solidLayoutLiveChatBubble = (_stable, p)=>{
         "onClose",
         "children",
         "class",
-        "className",
         "style"
     ]);
     const [isOpen, setIsOpen] = createSignal(false);
@@ -41,7 +40,7 @@ const __solidLayoutLiveChatBubble = (_stable, p)=>{
         const pos = local.position ?? "bottom-right";
         return "bottom-left" === pos ? CLASSES.bubble.position.left : CLASSES.bubble.position.right;
     };
-    const buttonClasses = ()=>twMerge(CLASSES.bubble.base, positionClasses(), local.class, local.className);
+    const buttonClasses = ()=>twMerge(CLASSES.bubble.base, positionClasses(), local.class);
     return [
         (()=>{
             var _el$ = _tmpl$2(), _el$3 = _el$.firstChild;

package/dist/components/live-chat/LiveChatPanel.generated.d.ts

@@ -1,8 +1,8 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./LiveChat.css";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 import type { ChatMessage, SendMessagePayload, SendMessageResponse } from "./types";
-export interface LiveChatPanelProps extends IComponentBaseProps {
+export interface LiveChatPanelProps extends UIBaseProps {
     /**
      * Callback when the panel close button is clicked
      */

package/dist/components/live-chat/LiveChatPanel.generated.js

@@ -1,4 +1,4 @@
-import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
+import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
 import "./LiveChat.css";
 import { For, Show, createEffect, createSignal, onCleanup, splitProps } from "solid-js";
@@ -80,7 +80,6 @@ const __solidLayoutLiveChatPanel = (_stable, p)=>{
         "autoScrollBehavior",
         "stickToBottomThreshold",
         "class",
-        "className",
         "style"
     ]);
     const [internalMessages, setInternalMessages] = createSignal([]);
@@ -203,7 +202,7 @@ const __solidLayoutLiveChatPanel = (_stable, p)=>{
             handleSend();
         }
     };
-    const classes = ()=>twMerge(CLASSES.panel.base, local.class, local.className);
+    const classes = ()=>twMerge(CLASSES.panel.base, local.class);
     return (()=>{
         var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$3.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$2.nextSibling, _el$0 = _el$8.nextSibling;
         spread(_el$, mergeProps(others, ()=>({
@@ -321,13 +320,13 @@ const __solidLayoutLiveChatPanel = (_stable, p)=>{
             }))), null);
         insert(_el$0, createComponent(button_0, mergeProps({
             onClick: handleSend,
-            get isDisabled () {
-                return !inputValue().trim() || isSending();
+            get state () {
+                return memo(()=>!!isSending())() ? "loading" : inputValue().trim() ? "default" : "disabled";
             }
         }, ()=>({
                 class: CLASSES.panel.sendButton
             }), {
-            variant: "primary",
+            flavor: "primary",
             get children () {
                 return createComponent(Show, {
                     get when () {

package/dist/components/menu/Menu.css

@@ -68,8 +68,8 @@
 
   .menu-item:focus-visible:not(:focus),
   .menu-item[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);
   }
 
   .menu-item:active,

package/dist/components/menu/Menu.generated.d.ts

@@ -1,14 +1,14 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Menu.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 import { type MenuSelectionMode } from "./context";
 import MenuItem, { MenuItemIndicator, MenuItemRoot } from "./MenuItem.generated";
 import MenuSection, { MenuSectionRoot } from "./MenuSection.generated";
-export type MenuRootProps<T = unknown> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+export type MenuRootProps<T = unknown> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & UIBaseProps & {
     children?: JSX.Element | ((item: T) => JSX.Element);
     items?: readonly T[];
-    renderEmptyState?: () => JSX.Element;
+    renderEmpty?: () => JSX.Element;
     selectionMode?: MenuSelectionMode;
     selectedKeys?: Iterable<string | number>;
     defaultSelectedKeys?: Iterable<string | number>;
@@ -16,7 +16,7 @@ export type MenuRootProps<T = unknown> = Omit<JSX.HTMLAttributes<HTMLDivElement>
     disallowEmptySelection?: boolean;
     onSelectionChange?: (keys: Set<string>) => void;
     onAction?: (key: string) => void;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
 };
 declare const MenuRoot: __LayoutComponent<MenuRootProps>;

package/dist/components/menu/Menu.generated.js

@@ -29,11 +29,10 @@ const __solidLayoutMenuRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "items",
-        "renderEmptyState",
+        "renderEmpty",
         "selectionMode",
         "selectedKeys",
         "defaultSelectedKeys",
@@ -41,7 +40,7 @@ const __solidLayoutMenuRoot = (_stable, p)=>{
         "disallowEmptySelection",
         "onSelectionChange",
         "onAction",
-        "isDisabled",
+        "state",
         "disabled",
         "role",
         "onKeyDown"
@@ -51,7 +50,7 @@ const __solidLayoutMenuRoot = (_stable, p)=>{
     const [registeredItems, setRegisteredItems] = createSignal([]);
     const selectionMode = ()=>local.selectionMode ?? "none";
     const isControlled = ()=>void 0 !== local.selectedKeys;
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
     const selectedKeys = createMemo(()=>isControlled() ? normalizeKeys(local.selectedKeys) : internalSelectedKeys());
     const disabledKeys = createMemo(()=>normalizeKeys(local.disabledKeys));
     const getEnabledItems = ()=>registeredItems().filter((item)=>!item.disabled && !disabledKeys().has(item.key) && !isDisabled());
@@ -150,7 +149,7 @@ const __solidLayoutMenuRoot = (_stable, p)=>{
         const isItemRenderer = "function" == typeof local.children && local.children.length > 0;
         const resolvedStaticChildren = "function" == typeof local.children ? isItemRenderer ? null : local.children() : local.children ?? null;
         if (local.items) {
-            if (0 === local.items.length) return local.renderEmptyState?.() ?? null;
+            if (0 === local.items.length) return local.renderEmpty?.() ?? null;
             if (isItemRenderer) {
                 const renderItem = local.children;
                 return createComponent(For, {
@@ -200,7 +199,7 @@ const __solidLayoutMenuRoot = (_stable, p)=>{
                     return isDisabled() ? "true" : "false";
                 }
             }, ()=>({
-                    class: twMerge(CLASSES.Root.base, local.class, local.className)
+                    class: twMerge(CLASSES.Root.base, local.class)
                 }), {
                 get style () {
                     return local.style;

package/dist/components/menu/MenuItem.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 import { type MenuItemVariant, type MenuSelectionMode } from "./context";
 type MenuItemRenderProps = {
     isSelected: boolean;
@@ -9,22 +9,22 @@ type MenuItemRenderProps = {
     hasSubmenu: boolean;
     selectionMode: MenuSelectionMode;
 };
-export type MenuItemRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type MenuItemRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     id?: string | number;
     textValue?: string;
     variant?: MenuItemVariant;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
     hasSubmenu?: boolean;
     onAction?: (key: string) => void;
     children?: JSX.Element | ((props: MenuItemRenderProps) => JSX.Element);
 };
 export type MenuItemIndicatorType = "checkmark" | "dot";
-export type MenuItemIndicatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+export type MenuItemIndicatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & UIBaseProps & {
     type?: MenuItemIndicatorType;
     children?: JSX.Element | ((props: MenuItemRenderProps) => JSX.Element);
 };
-export type MenuItemSubmenuIndicatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+export type MenuItemSubmenuIndicatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
 };
 declare const MenuItemRoot: __LayoutComponent<MenuItemRootProps>;

package/dist/components/menu/MenuItem.generated.js

@@ -23,13 +23,12 @@ const __solidLayoutMenuItemRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "id",
         "textValue",
         "variant",
-        "isDisabled",
+        "state",
         "disabled",
         "hasSubmenu",
         "onAction",
@@ -56,7 +55,7 @@ const __solidLayoutMenuItemRoot = (_stable, p)=>{
     const selectionMode = ()=>menu?.selectionMode() ?? "none";
     const isSelected = ()=>menu?.isSelected(key()) ?? false;
     const isFocused = ()=>menu?.focusedKey() === key();
-    const isDisabled = ()=>menu?.isItemDisabled(key(), Boolean(local.isDisabled) || Boolean(local.disabled)) ?? (Boolean(local.isDisabled) || Boolean(local.disabled));
+    const isDisabled = ()=>menu?.isItemDisabled(key(), Boolean("disabled" === local.state) || Boolean(local.disabled)) ?? (Boolean("disabled" === local.state) || Boolean(local.disabled));
     const renderState = createMemo(()=>({
             isSelected: isSelected(),
             isFocused: isFocused(),
@@ -126,7 +125,7 @@ const __solidLayoutMenuItemRoot = (_stable, p)=>{
         if (!menu || !itemRef) return;
         menu.registerItem({
             key: key(),
-            disabled: Boolean(local.isDisabled) || Boolean(local.disabled),
+            disabled: Boolean("disabled" === local.state) || Boolean(local.disabled),
             ref: itemRef
         });
     });
@@ -183,7 +182,7 @@ const __solidLayoutMenuItemRoot = (_stable, p)=>{
                     return key();
                 }
             }, ()=>({
-                    class: twMerge(CLASSES.Item.base, CLASSES.Item.variant[variant()], local.class, local.className)
+                    class: twMerge(CLASSES.Item.base, CLASSES.Item.variant[variant()], local.class)
                 }), {
                 get style () {
                     return local.style;
@@ -211,7 +210,6 @@ const __solidLayoutMenuItemIndicator = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "type"
@@ -239,7 +237,7 @@ const __solidLayoutMenuItemIndicator = (_stable, p)=>{
                 return renderState().isSelected ? "true" : void 0;
             }
         }, ()=>({
-                class: twMerge(CLASSES.ItemIndicator.base, local.class, local.className)
+                class: twMerge(CLASSES.ItemIndicator.base, local.class)
             }), {
             get style () {
                 return local.style;
@@ -266,7 +264,6 @@ const __solidLayoutMenuItemSubmenuIndicator = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -280,7 +277,7 @@ const __solidLayoutMenuItemSubmenuIndicator = (_stable, p)=>{
                 return local.dataTheme;
             }
         }, ()=>({
-                class: twMerge(CLASSES.ItemIndicator.base, CLASSES.ItemIndicator.submenu, local.class, local.className)
+                class: twMerge(CLASSES.ItemIndicator.base, CLASSES.ItemIndicator.submenu, local.class)
             }), {
             get style () {
                 return local.style;

package/dist/components/menu/MenuSection.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 MenuSectionRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+import type { UIBaseProps } from "../vocabulary";
+export type MenuSectionRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
     title?: JSX.Element;
 };