@pathscale/ui 2.1.1 → 2.2.0

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

@@ -1,14 +1,13 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
 import { splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import button_0 from "../button/index.js";
 import { componentRecipe } from "./Table.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template('<div><span class="text-sm text-base-content/70"data-slot=table-inline-confirm-prompt></span><div class="inline-flex items-center gap-2"data-slot=table-inline-confirm-actions>');
-const toButtonVariant = (variant)=>{
-    if ("danger" === variant) return "danger";
-    if ("warning" === variant) return "secondary";
-    return "primary";
+const toButtonFlavor = (variant)=>{
+    if ("danger" === variant) return "destructive";
+    if ("warning" === variant) return "warning";
 };
 const __solidLayoutInlineConfirm = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
@@ -19,18 +18,17 @@ const __solidLayoutInlineConfirm = (_stable, p)=>{
         "onCancel",
         "loading",
         "disabled",
-        "confirmVariant",
+        "confirmFlavor",
         "class",
-        "className",
         "dataTheme"
     ]);
     const isBusy = ()=>Boolean(local.loading);
     const isDisabled = ()=>Boolean(local.disabled) || isBusy();
-    const confirmVariant = ()=>toButtonVariant(local.confirmVariant ?? "primary");
+    const confirmFlavor = ()=>toButtonFlavor(local.confirmFlavor ?? "primary");
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
         spread(_el$, mergeProps(rest, ()=>({
-                class: twMerge("inline-flex flex-wrap items-center gap-2", local.class, local.className)
+                class: twMerge("inline-flex flex-wrap items-center gap-2", local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -40,14 +38,11 @@ const __solidLayoutInlineConfirm = (_stable, p)=>{
         insert(_el$2, ()=>local.prompt);
         insert(_el$3, createComponent(button_0, {
             size: "sm",
-            get variant () {
-                return confirmVariant();
+            get flavor () {
+                return confirmFlavor();
             },
-            get isPending () {
-                return isBusy();
-            },
-            get isDisabled () {
-                return isDisabled();
+            get state () {
+                return memo(()=>!!isBusy())() ? "loading" : isDisabled() ? "disabled" : "default";
             },
             get onClick () {
                 return local.onConfirm;
@@ -62,8 +57,8 @@ const __solidLayoutInlineConfirm = (_stable, p)=>{
         insert(_el$3, createComponent(button_0, {
             size: "sm",
             variant: "ghost",
-            get isDisabled () {
-                return isDisabled();
+            get state () {
+                return isDisabled() ? "disabled" : "default";
             },
             get onClick () {
                 return local.onCancel;

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

@@ -1,6 +1,6 @@
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type MobileListViewProps<TRow> = IComponentBaseProps & {
+import type { UIBaseProps } from "../vocabulary";
+export type MobileListViewProps<TRow> = UIBaseProps & {
     rows: TRow[];
     renderRow?: (row: TRow, index: number) => JSX.Element;
     empty?: JSX.Element;

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

@@ -2,7 +2,7 @@ import { createComponent, insert, mergeProps, spread, template } from "solid-js/
 import { defineComponent } from "solid-layouts/application-boundary";
 import { For, Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
-import { EmptyState } from "../empty-state/index.js";
+import { Empty } from "../empty/index.js";
 import icon from "../icon/index.js";
 import { componentRecipe } from "./Table.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div><ul>"), _tmpl$2 = /*#__PURE__*/ template("<li class=py-8 data-slot=table-mobile-list-view-empty>"), _tmpl$3 = /*#__PURE__*/ template("<li>");
@@ -17,7 +17,6 @@ const __solidLayoutMobileListView = (_stable, p)=>{
         "emptyTitle",
         "emptyIcon",
         "class",
-        "className",
         "dataTheme"
     ]);
     const renderRow = (row, index)=>{
@@ -28,13 +27,13 @@ const __solidLayoutMobileListView = (_stable, p)=>{
     const emptyContent = ()=>{
         if (local.empty) return local.empty;
         if (!local.emptyTitle) return null;
-        return createComponent(EmptyState, {
+        return createComponent(Empty, {
             get children () {
                 return [
-                    createComponent(EmptyState.Icon, {
+                    createComponent(Empty.Icon, {
                         get children () {
                             return createComponent(icon, {
-                                get name () {
+                                get src () {
                                     return local.emptyIcon ?? "icon-[mdi--inbox-outline]";
                                 },
                                 width: 24,
@@ -42,7 +41,7 @@ const __solidLayoutMobileListView = (_stable, p)=>{
                             });
                         }
                     }),
-                    createComponent(EmptyState.Title, {
+                    createComponent(Empty.Title, {
                         get children () {
                             return local.emptyTitle;
                         }
@@ -54,7 +53,7 @@ const __solidLayoutMobileListView = (_stable, p)=>{
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
         spread(_el$, mergeProps(rest, ()=>({
-                class: twMerge("w-full", local.class, local.className)
+                class: twMerge("w-full", local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;

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

@@ -1,8 +1,8 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 export type SortIconState = "asc" | "desc" | "none";
-export type SortIconProps = IComponentBaseProps & {
+export type SortIconProps = UIBaseProps & {
     state: SortIconState;
     size?: number;
     ascIcon?: JSX.Element;

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

@@ -13,7 +13,6 @@ const __solidLayoutSortIcon = (_stable, p)=>{
         "descIcon",
         "neutralIcon",
         "class",
-        "className",
         "dataTheme"
     ]);
     const iconSize = ()=>local.size ?? 16;
@@ -30,7 +29,7 @@ const __solidLayoutSortIcon = (_stable, p)=>{
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(rest, ()=>({
-                class: twMerge("inline-flex shrink-0 items-center justify-center", local.class, local.className)
+                class: twMerge("inline-flex shrink-0 items-center justify-center", local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -47,7 +46,7 @@ const __solidLayoutSortIcon = (_stable, p)=>{
             },
             get fallback () {
                 return createComponent(icon, {
-                    get name () {
+                    get src () {
                         return iconName();
                     },
                     get width () {

package/dist/components/table/Table.css

@@ -27,7 +27,7 @@
   .table__scroll-container {
     overflow-x: auto;
     scrollbar-width: thin;
-    scrollbar-color: oklch(0% 0 0 / 0.15) transparent;
+    scrollbar-color: rgb(var(--shadow-color, 0 0 0) / 15%) transparent;
   }
 
   .table__scroll-container::-webkit-scrollbar {
@@ -40,12 +40,12 @@
   }
 
   .table__scroll-container::-webkit-scrollbar-thumb {
-    background: oklch(0% 0 0 / 0.15);
+    background: rgb(var(--shadow-color, 0 0 0) / 15%);
     border-radius: 3px;
   }
 
   .table__scroll-container::-webkit-scrollbar-thumb:hover {
-    background: oklch(0% 0 0 / 0.25);
+    background: rgb(var(--shadow-color, 0 0 0) / 25%);
   }
 
   :is([data-theme="dark"], .dark) .table__scroll-container {
@@ -88,7 +88,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     .table__header {
-      border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
+      border-bottom: var(--border, 1px) solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
     }
   }
 
@@ -124,7 +124,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     .table-root--secondary .table__row .table__cell {
-      border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 5%, transparent);
+      border-bottom: var(--border, 1px) solid color-mix(in oklch, var(--color-base-content) 5%, transparent);
     }
   }
 
@@ -279,7 +279,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     .table__cell {
-      border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 5%, transparent);
+      border-bottom: var(--border, 1px) solid color-mix(in oklch, var(--color-base-content) 5%, transparent);
     }
   }
 
@@ -328,7 +328,7 @@
   .table__page-size-select {
     min-width: 4.5rem;
     border-radius: 0.75rem;
-    border: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+    border: var(--border, 1px) solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
     background-color: var(--color-base-100);
     padding-inline: 0.75rem;
     padding-block: 0.5rem;

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

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Table.css";
 import { type Accessor, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 type TableVariant = "primary" | "secondary";
 type TableSortDirection = "ascending" | "descending";
 type TableSortDescriptor = {
@@ -21,41 +21,41 @@ type TableContentContextValue = {
 };
 export declare const useTableContext: () => TableContextValue;
 export declare const useTableContentContext: () => TableContentContextValue;
-export type TableRootProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
+export type TableRootProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps & {
     variant?: TableVariant;
 };
 declare const TableRoot: __LayoutComponent<TableRootProps>;
-export type TableScrollContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type TableScrollContainerProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 declare const TableScrollContainer: __LayoutComponent<TableScrollContainerProps>;
-export type TableContentProps = JSX.HTMLAttributes<HTMLTableElement> & IComponentBaseProps & {
+export type TableContentProps = JSX.HTMLAttributes<HTMLTableElement> & UIBaseProps & {
     sortDescriptor?: TableSortDescriptor;
     onSortChange?: (descriptor: TableSortDescriptor) => void;
 };
 declare const TableContent: __LayoutComponent<TableContentProps>;
-export type TableHeaderProps = JSX.HTMLAttributes<HTMLTableSectionElement> & IComponentBaseProps;
+export type TableHeaderProps = JSX.HTMLAttributes<HTMLTableSectionElement> & UIBaseProps;
 declare const TableHeader: __LayoutComponent<TableHeaderProps>;
-export type TableColumnProps = Omit<JSX.ThHTMLAttributes<HTMLTableCellElement>, "id" | "children"> & IComponentBaseProps & {
+export type TableColumnProps = Omit<JSX.ThHTMLAttributes<HTMLTableCellElement>, "id" | "children"> & UIBaseProps & {
     id: string;
     allowsSorting?: boolean;
     children?: TableColumnChildren;
 };
 declare const TableColumn: __LayoutComponent<TableColumnProps>;
-export type TableBodyProps = JSX.HTMLAttributes<HTMLTableSectionElement> & IComponentBaseProps;
+export type TableBodyProps = JSX.HTMLAttributes<HTMLTableSectionElement> & UIBaseProps;
 declare const TableBody: __LayoutComponent<TableBodyProps>;
-export type TableRowProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponentBaseProps;
+export type TableRowProps = JSX.HTMLAttributes<HTMLTableRowElement> & UIBaseProps;
 declare const TableRow: __LayoutComponent<TableRowProps>;
-export type TableCellProps = JSX.TdHTMLAttributes<HTMLTableCellElement> & IComponentBaseProps;
+export type TableCellProps = JSX.TdHTMLAttributes<HTMLTableCellElement> & UIBaseProps;
 declare const TableCell: __LayoutComponent<TableCellProps>;
-export type TableExpandedRowProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponentBaseProps & {
+export type TableExpandedRowProps = JSX.HTMLAttributes<HTMLTableRowElement> & UIBaseProps & {
     colSpan: number;
     cellClass?: string;
     cellClassName?: string;
     cellDataTheme?: string;
 };
 declare const TableExpandedRow: __LayoutComponent<TableExpandedRowProps>;
-export type TableFooterProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type TableFooterProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 declare const TableFooter: __LayoutComponent<TableFooterProps>;
-export type TablePageSizeProps = Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, "onChange"> & IComponentBaseProps & {
+export type TablePageSizeProps = Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, "onChange"> & UIBaseProps & {
     value: number;
     options: readonly number[];
     onChange: (value: number) => void;
@@ -64,13 +64,13 @@ export type TablePageSizeProps = Omit<JSX.SelectHTMLAttributes<HTMLSelectElement
     selectClassName?: string;
 };
 declare const TablePageSize: __LayoutComponent<TablePageSizeProps>;
-export type TableResizableContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type TableResizableContainerProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 declare const TableResizableContainer: __LayoutComponent<TableResizableContainerProps>;
-export type TableColumnResizerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type TableColumnResizerProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 declare const TableColumnResizer: __LayoutComponent<TableColumnResizerProps>;
-export type TableLoadMoreProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponentBaseProps;
+export type TableLoadMoreProps = JSX.HTMLAttributes<HTMLTableRowElement> & UIBaseProps;
 declare const TableLoadMore: __LayoutComponent<TableLoadMoreProps>;
-export type TableLoadMoreContentProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type TableLoadMoreContentProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 declare const TableLoadMoreContent: __LayoutComponent<TableLoadMoreContentProps>;
 export type { TableVariant, TableSortDirection, TableSortDescriptor, TableColumnRenderProps, };
 export { TableRoot, TableScrollContainer, TableContent, TableHeader, TableColumn, TableBody, TableRow, TableCell, TableExpandedRow, TableFooter, TablePageSize, TableResizableContainer, TableColumnResizer, TableLoadMore, TableLoadMoreContent, };

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

@@ -30,7 +30,6 @@ const __solidLayoutTableRoot = (_stable, p)=>{
         "children",
         "variant",
         "class",
-        "className",
         "dataTheme"
     ]);
     const variant = ()=>local.variant ?? "primary";
@@ -41,7 +40,7 @@ const __solidLayoutTableRoot = (_stable, p)=>{
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(()=>({
-                    class: twMerge(CLASSES.root.base, CLASSES.root.variant[variant()], local.class, local.className)
+                    class: twMerge(CLASSES.root.base, CLASSES.root.variant[variant()], local.class)
                 }), {
                 get ["data-theme"] () {
                     return local.dataTheme;
@@ -65,13 +64,12 @@ const __solidLayoutTableScrollContainer = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme"
     ]);
     return (()=>{
         var _el$2 = _tmpl$();
         spread(_el$2, mergeProps(()=>({
-                class: twMerge(CLASSES.scroll, local.class, local.className)
+                class: twMerge(CLASSES.scroll, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -91,7 +89,6 @@ const __solidLayoutTableContent = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "sortDescriptor",
         "onSortChange"
@@ -106,7 +103,7 @@ const __solidLayoutTableContent = (_stable, p)=>{
         get children () {
             var _el$3 = _tmpl$2();
             spread(_el$3, mergeProps(()=>({
-                    class: twMerge(CLASSES.content, local.class, local.className)
+                    class: twMerge(CLASSES.content, local.class)
                 }), {
                 get ["data-theme"] () {
                     return local.dataTheme;
@@ -133,13 +130,12 @@ const __solidLayoutTableHeader = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme"
     ]);
     return (()=>{
         var _el$4 = _tmpl$3();
         spread(_el$4, mergeProps(()=>({
-                class: twMerge(CLASSES.header, local.class, local.className)
+                class: twMerge(CLASSES.header, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -162,7 +158,6 @@ const __solidLayoutTableColumn = (_stable, p)=>{
         "allowsSorting",
         "children",
         "class",
-        "className",
         "dataTheme",
         "onClick",
         "onKeyDown",
@@ -203,7 +198,7 @@ const __solidLayoutTableColumn = (_stable, p)=>{
     return (()=>{
         var _el$5 = _tmpl$4();
         spread(_el$5, mergeProps(()=>({
-                class: twMerge(CLASSES.column, local.class, local.className)
+                class: twMerge(CLASSES.column, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -240,13 +235,12 @@ const __solidLayoutTableBody = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme"
     ]);
     return (()=>{
         var _el$6 = _tmpl$5();
         spread(_el$6, mergeProps(()=>({
-                class: twMerge(CLASSES.body, local.class, local.className)
+                class: twMerge(CLASSES.body, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -266,13 +260,12 @@ const __solidLayoutTableRow = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme"
     ]);
     return (()=>{
         var _el$7 = _tmpl$6();
         spread(_el$7, mergeProps(()=>({
-                class: twMerge(CLASSES.row, local.class, local.className)
+                class: twMerge(CLASSES.row, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -292,13 +285,12 @@ const __solidLayoutTableCell = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme"
     ]);
     return (()=>{
         var _el$8 = _tmpl$7();
         spread(_el$8, mergeProps(()=>({
-                class: twMerge(CLASSES.cell, local.class, local.className)
+                class: twMerge(CLASSES.cell, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -318,7 +310,6 @@ const __solidLayoutTableExpandedRow = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "colSpan",
         "cellClass",
@@ -326,7 +317,7 @@ const __solidLayoutTableExpandedRow = (_stable, p)=>{
         "cellDataTheme"
     ]);
     return createComponent(TableRow, mergeProps(()=>({
-            class: twMerge(CLASSES.expandedRow, local.class, local.className)
+            class: twMerge(CLASSES.expandedRow, local.class)
         }), {
         get ["data-theme"] () {
             return local.dataTheme;
@@ -360,13 +351,12 @@ const __solidLayoutTableFooter = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme"
     ]);
     return (()=>{
         var _el$9 = _tmpl$();
         spread(_el$9, mergeProps(()=>({
-                class: twMerge(CLASSES.footer, local.class, local.className)
+                class: twMerge(CLASSES.footer, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -385,7 +375,6 @@ const TableFooter = defineComponent({
 const __solidLayoutTablePageSize = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "value",
         "options",
@@ -397,7 +386,7 @@ const __solidLayoutTablePageSize = (_stable, p)=>{
     return (()=>{
         var _el$0 = _tmpl$8(), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling;
         spread(_el$0, mergeProps(()=>({
-                class: twMerge(CLASSES.pageSize, local.class, local.className)
+                class: twMerge(CLASSES.pageSize, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -436,13 +425,12 @@ const __solidLayoutTableResizableContainer = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme"
     ]);
     return (()=>{
         var _el$12 = _tmpl$();
         spread(_el$12, mergeProps(()=>({
-                class: twMerge(CLASSES.resizableContainer, local.class, local.className)
+                class: twMerge(CLASSES.resizableContainer, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -462,7 +450,6 @@ const __solidLayoutTableColumnResizer = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "role",
         "aria-orientation"
@@ -477,7 +464,7 @@ const __solidLayoutTableColumnResizer = (_stable, p)=>{
                 return local["aria-orientation"] ?? "vertical";
             }
         }, ()=>({
-                class: twMerge(CLASSES.columnResizer, local.class, local.className)
+                class: twMerge(CLASSES.columnResizer, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -497,13 +484,12 @@ const __solidLayoutTableLoadMore = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme"
     ]);
     return (()=>{
         var _el$14 = _tmpl$6();
         spread(_el$14, mergeProps(()=>({
-                class: twMerge(CLASSES.loadMore, local.class, local.className)
+                class: twMerge(CLASSES.loadMore, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -523,13 +509,12 @@ const __solidLayoutTableLoadMoreContent = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme"
     ]);
     return (()=>{
         var _el$15 = _tmpl$();
         spread(_el$15, mergeProps(()=>({
-                class: twMerge(CLASSES.loadMoreContent, local.class, local.className)
+                class: twMerge(CLASSES.loadMoreContent, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;

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

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type VirtualSpacerRowProps = IComponentBaseProps & {
+import type { UIBaseProps } from "../vocabulary";
+export type VirtualSpacerRowProps = UIBaseProps & {
     height: number;
     colSpan: number;
 };

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

@@ -9,7 +9,6 @@ const __solidLayoutVirtualSpacerRow = (_stable, p)=>{
         "height",
         "colSpan",
         "class",
-        "className",
         "dataTheme"
     ]);
     return (()=>{
@@ -19,7 +18,7 @@ const __solidLayoutVirtualSpacerRow = (_stable, p)=>{
                 return local.colSpan;
             }
         }, ()=>({
-                class: twMerge("border-0 bg-transparent p-0", local.class, local.className)
+                class: twMerge("border-0 bg-transparent p-0", local.class)
             }), {
             get style () {
                 return {

package/dist/components/tabs/Tabs.css

@@ -94,8 +94,8 @@
 
   .tabs__tab:focus-visible,
   .tabs__tab[data-focus-visible="true"] {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
+    outline: var(--focus-ring-width, 2px) solid currentColor;
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
   .tabs__separator {
@@ -147,7 +147,7 @@
     opacity: 0;
     pointer-events: none;
     background-color: var(--color-base-100);
-    box-shadow: 0 1px 2px oklch(0% 0 0 / 0.12);
+    box-shadow: 0 1px 2px rgb(var(--shadow-color, 0 0 0) / 12%);
     transition-duration: 250ms;
     transition-property: transform, width, height, opacity;
     transition-timing-function: ease;
@@ -168,7 +168,7 @@
   }
 
   .tabs--secondary .tabs__list[data-orientation="horizontal"] {
-    border-bottom: 1px solid var(--color-base-300);
+    border-bottom: var(--border, 1px) solid var(--color-base-300);
     max-width: 100%;
     overflow-x: auto;
     overflow-y: clip;
@@ -180,7 +180,7 @@
   }
 
   .tabs--secondary .tabs__list[data-orientation="vertical"] {
-    border-left: 1px solid var(--color-base-300);
+    border-left: var(--border, 1px) solid var(--color-base-300);
   }
 
   .tabs--secondary .tabs__tab {

package/dist/components/tabs/Tabs.generated.d.ts

@@ -1,6 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Tabs.css";
 import { type JSX } from "solid-js";
+import type { State } from "../vocabulary";
 type TabsOrientation = "horizontal" | "vertical";
 type TabsVariant = "primary" | "secondary";
 type TabKey = string | number;
@@ -21,7 +22,7 @@ type TabListProps = JSX.HTMLAttributes<HTMLDivElement> & {
 declare const TabList: __LayoutComponent<TabListProps>;
 type TabProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "id"> & {
     id: TabKey;
-    isDisabled?: boolean;
+    state?: State;
 };
 declare const Tab: __LayoutComponent<TabProps>;
 type TabIndicatorProps = JSX.HTMLAttributes<HTMLSpanElement>;

package/dist/components/tabs/Tabs.generated.js

@@ -226,7 +226,7 @@ const __solidLayoutTab = (_stable, p)=>{
         "class",
         "children",
         "id",
-        "isDisabled",
+        "state",
         "onClick",
         "onKeyDown"
     ]);
@@ -240,7 +240,7 @@ const __solidLayoutTab = (_stable, p)=>{
         return _el$6;
     })();
     const isSelected = createMemo(()=>ctx.selectedKey() === local.id);
-    const isDisabled = ()=>Boolean(local.isDisabled);
+    const isDisabled = ()=>Boolean("disabled" === local.state);
     onMount(()=>{
         if (tabRef) ctx.registerTab({
             key: local.id,

package/dist/components/text/Text.generated.d.ts

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Text.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 export type TextSize = "xs" | "sm" | "base" | "lg" | "xl";
 export type TextVariant = "default" | "muted" | "subtle" | "success" | "warning" | "danger";
 export type TextWeight = "normal" | "medium" | "semibold" | "bold";
@@ -9,7 +9,7 @@ export type TextTransform = "none" | "uppercase" | "lowercase" | "capitalize";
 export type TextTracking = "normal" | "wide";
 export type TextLeading = "normal" | "none";
 export type TextFamily = "body" | "heading" | "display" | "mono";
-export type TextRootProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> & IComponentBaseProps & {
+export type TextRootProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> & UIBaseProps & {
     size?: TextSize;
     variant?: TextVariant;
     weight?: TextWeight;