@simplysm/solid 13.0.75 → 13.0.76

package/src/components/feedback/busy/BusyContainer.tsx

@@ -5,13 +5,13 @@ import {
   createEffect,
   onCleanup,
   Show,
-  useContext,
 } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { BusyContext, type BusyVariant } from "./BusyContext";
+import { bg, text } from "../../../styles/base.styles";
+import { useBusy, type BusyVariant } from "./BusyProvider";
 import { createMountTransition } from "../../../hooks/createMountTransition";
-import "./BusyContainer.css";
+import "./BusyContainer.animate.css";
 
 export interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
   /** Show loading overlay (children are preserved) */
@@ -24,39 +24,6 @@ export interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivEleme
   children?: JSX.Element;
 }
 
-const baseClass = clsx("relative", "size-full", "min-h-[70px] min-w-[70px]", "overflow-auto");
-
-// eslint-disable-next-line tailwindcss/enforces-shorthand -- inset is only supported in Chrome 87+
-const screenBaseClass = clsx(
-  "absolute bottom-0 left-0 right-0 top-0",
-  "z-busy",
-  "bg-white/70 dark:bg-base-900/70",
-  "transition-opacity duration-150",
-);
-
-const spinnerClass = clsx(
-  "size-8",
-  "border-[6px] border-base-200 border-b-primary-500",
-  "dark:border-base-700 dark:border-b-primary-400",
-  "rounded-full",
-  "animate-spin",
-  "shadow-md",
-  "mx-auto mt-5",
-);
-
-const messageClass = clsx("w-full", "text-center font-bold", "text-base-700 dark:text-base-200");
-
-const progressTrackClass = clsx("absolute left-0 top-0", "h-1 w-full", "bg-white dark:bg-base-800");
-
-const progressBarClass = clsx(
-  "h-1 w-full",
-  "bg-primary-500 dark:bg-primary-400",
-  "transition-transform duration-100 ease-in",
-  "origin-left",
-);
-
-const barIndicatorClass = clsx("absolute left-0 top-0", "h-1 w-full", "bg-white dark:bg-base-800");
-
 export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
   const [local, rest] = splitProps(props, [
     "busy",
@@ -68,7 +35,12 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
     "children",
   ]);
 
-  const busyCtx = useContext(BusyContext);
+  let busyCtx: ReturnType<typeof useBusy> | undefined;
+  try {
+    busyCtx = useBusy();
+  } catch {
+    // Not inside BusyProvider
+  }
   const currVariant = (): BusyVariant => local.variant ?? busyCtx?.variant() ?? "spinner";
 
   // Animation state (mount transition)
@@ -100,9 +72,10 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
     );
   });
 
+   
   const screenClass = () =>
     clsx(
-      screenBaseClass,
+      "absolute inset-0 z-busy bg-white/70 transition-opacity duration-150 dark:bg-base-900/70",
       animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
     );
 
@@ -116,15 +89,15 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
   };
 
   return (
-    <div ref={containerRef} class={twMerge(baseClass, local.class)} {...rest}>
+    <div ref={containerRef} class={twMerge("relative size-full min-h-[70px] min-w-[70px] overflow-auto", local.class)} {...rest}>
       <Show when={mounted()}>
         <div class={screenClass()} onTransitionEnd={handleTransitionEnd}>
           <div class={rectClass()}>
             <Show when={currVariant() === "spinner"}>
-              <div class={spinnerClass} />
+              <div class="mx-auto mt-5 size-8 animate-spin rounded-full border-[6px] border-base-200 border-b-primary-500 shadow-md dark:border-base-700 dark:border-b-primary-400" />
             </Show>
             <Show when={currVariant() === "bar" && (local.ready === false || local.busy)}>
-              <div class={barIndicatorClass}>
+              <div class={clsx("absolute left-0 top-0 h-1 w-full", bg.surface)}>
                 <div
                   class={clsx(
                     "absolute left-0 top-0 h-1 w-full origin-left",
@@ -137,7 +110,7 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
                 <div
                   class={clsx(
                     "absolute left-0 top-0 h-1 w-full origin-left",
-                    "bg-white dark:bg-base-800",
+                    bg.surface,
                   )}
                   style={{
                     animation: "sd-busy-bar-after 2s infinite ease-out",
@@ -146,15 +119,15 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
               </div>
             </Show>
             <Show when={local.message}>
-              <div class={messageClass}>
+              <div class={clsx("w-full text-center font-bold", text.default)}>
                 <pre class="m-0">{local.message}</pre>
               </div>
             </Show>
           </div>
           <Show when={local.progressPercent != null}>
-            <div class={progressTrackClass}>
+            <div class={clsx("absolute left-0 top-0 h-1 w-full", bg.surface)}>
               <div
-                class={progressBarClass}
+                class="h-1 w-full origin-left bg-primary-500 transition-transform duration-100 ease-in dark:bg-primary-400"
                 style={{ transform: `scaleX(${(local.progressPercent ?? 0) / 100})` }}
               />
             </div>

package/src/components/feedback/busy/BusyProvider.tsx

@@ -1,10 +1,43 @@
-import { type ParentComponent, createSignal } from "solid-js";
+import { type ParentComponent, createSignal, createContext, useContext, type Accessor } from "solid-js";
 import { Portal } from "solid-js/web";
-import clsx from "clsx";
-import { BusyContext, type BusyContextValue, type BusyVariant } from "./BusyContext";
 import { BusyContainer } from "./BusyContainer";
 
-const overlayClass = clsx("fixed left-0 top-0", "h-screen w-screen", "overflow-hidden");
+/**
+ * Busy overlay display type
+ * - `spinner`: Full-screen spinner
+ * - `bar`: Top progress bar
+ */
+export type BusyVariant = "spinner" | "bar";
+
+/**
+ * Busy overlay Context value
+ */
+export interface BusyContextValue {
+  /** Current display type */
+  variant: Accessor<BusyVariant>;
+  /** Show overlay (nestable calls, requires matching hide calls) */
+  show: (message?: string) => void;
+  /** Hide overlay (actually hides after all show calls have corresponding hide calls) */
+  hide: () => void;
+  /** Set progress bar progress (0-100, undefined for indeterminate) */
+  setProgress: (percent: number | undefined) => void;
+}
+
+/** Busy overlay Context */
+const BusyCtx = createContext<BusyContextValue>();
+
+/**
+ * Hook to access Busy overlay
+ *
+ * @throws Error if BusyProvider is not present
+ */
+export function useBusy(): BusyContextValue {
+  const context = useContext(BusyCtx);
+  if (!context) {
+    throw new Error("useBusy can only be used inside BusyProvider");
+  }
+  return context;
+}
 
 /** BusyProvider configuration */
 export interface BusyProviderProps {
@@ -51,7 +84,7 @@ export const BusyProvider: ParentComponent<BusyProviderProps> = (props) => {
   };
 
   return (
-    <BusyContext.Provider value={contextValue}>
+    <BusyCtx.Provider value={contextValue}>
       {props.children}
       <Portal>
         <BusyContainer
@@ -59,10 +92,10 @@ export const BusyProvider: ParentComponent<BusyProviderProps> = (props) => {
           variant={variant()}
           message={message()}
           progressPercent={progress()}
-          class={overlayClass}
+          class="fixed left-0 top-0 h-screen w-screen overflow-hidden"
           style={{ "pointer-events": busyCount() > 0 ? "auto" : "none" }}
         />
       </Portal>
-    </BusyContext.Provider>
+    </BusyCtx.Provider>
   );
 };

package/src/components/feedback/notification/NotificationBanner.tsx

@@ -2,27 +2,11 @@ import { type Component, Show } from "solid-js";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
 import { IconX } from "@tabler/icons-solidjs";
-import { useNotification } from "./NotificationContext";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useNotification } from "./NotificationProvider";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { Icon } from "../../display/Icon";
-import { themeTokens } from "../../../styles/tokens.styles";
-
-const baseClass = clsx(
-  "fixed",
-  "top-8",
-  "right-4",
-  "z-notification",
-  "flex",
-  "items-start",
-  "gap-4",
-  "px-3",
-  "py-2",
-  "text-white",
-  "shadow-lg",
-  "dark:shadow-black/30",
-  "rounded-lg",
-  "max-w-[calc(100vw-2rem)]",
-);
+import { themeTokens } from "../../../styles/theme.styles";
+import { gap } from "../../../styles/control.styles";
 
 const themeClasses: Record<string, string> = {
   info: themeTokens.info.solid,
@@ -31,12 +15,6 @@ const themeClasses: Record<string, string> = {
   danger: themeTokens.danger.solid,
 };
 
-const contentClass = clsx("flex flex-col", "gap-0.5", "min-w-0");
-const messageClass = clsx("opacity-90", "overflow-auto");
-const actionsClass = clsx("flex items-center", "gap-2", "shrink-0");
-const actionButtonClass = clsx("rounded", "bg-white/20", "px-3 py-1", "hover:bg-white/30");
-const dismissButtonClass = clsx("rounded", "p-1", "hover:bg-white/20");
-
 export const NotificationBanner: Component = () => {
   const notification = useNotification();
   const i18n = useI18n();
@@ -58,24 +36,27 @@ export const NotificationBanner: Component = () => {
             data-notification-banner
             data-theme={item().theme}
             role="alert"
-            class={clsx(baseClass, themeClasses[item().theme])}
+            class={clsx(
+              "fixed right-4 top-8 z-notification flex max-w-[calc(100vw-2rem)] items-start gap-4 rounded-lg px-3 py-2 text-white shadow-lg dark:shadow-black/30",
+              themeClasses[item().theme],
+            )}
           >
-            <div class={contentClass}>
+            <div class={clsx("flex flex-col", gap.sm, "min-w-0")}>
               <span class="font-bold">{item().title}</span>
               <Show when={item().message}>
-                <pre class={messageClass}>{item().message}</pre>
+                <pre class="overflow-auto opacity-90">{item().message}</pre>
               </Show>
             </div>
-            <div class={actionsClass}>
+            <div class={clsx("flex items-center", gap.xl, "shrink-0")}>
               <Show when={item().action}>
-                <button type="button" class={actionButtonClass} onClick={handleAction}>
+                <button type="button" class="rounded bg-white/20 px-3 py-1 hover:bg-white/30" onClick={handleAction}>
                   {item().action!.label}
                 </button>
               </Show>
               <button
                 type="button"
                 aria-label={i18n.t("notification.close")}
-                class={dismissButtonClass}
+                class="rounded p-1 hover:bg-white/20"
                 onClick={handleDismiss}
               >
                 <Icon icon={IconX} size="1.25em" />

package/src/components/feedback/notification/NotificationBell.tsx

@@ -1,37 +1,19 @@
 import { type Component, createSignal, For, Show } from "solid-js";
 import { IconBell } from "@tabler/icons-solidjs";
 import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
-import { useNotification } from "./NotificationContext";
+import { useNotification } from "./NotificationProvider";
 import { Dropdown } from "../../disclosure/Dropdown";
 import { Icon } from "../../display/Icon";
 import { NotificationBanner } from "./NotificationBanner";
-import { iconButtonBase } from "../../../styles/patterns.styles";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { text } from "../../../styles/base.styles";
+import { gap } from "../../../styles/control.styles";
+import { Button } from "../../form-control/Button";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 export interface NotificationBellProps {
   showBanner?: boolean;
 }
 
-const buttonClass = twMerge(iconButtonBase, "relative", "p-2", "rounded-full");
-
-const badgeClass = clsx(
-  "absolute",
-  "top-0",
-  "right-0",
-  "flex",
-  "items-center",
-  "justify-center",
-  "w-5",
-  "h-5",
-  "px-1",
-  "text-xs",
-  "font-bold",
-  "text-white",
-  "bg-danger-500",
-  "rounded-full",
-);
-
 const themeStyles: Record<string, string> = {
   info: clsx("border-l-info-500", "bg-info-50", "dark:bg-info-900/10"),
   success: clsx("border-l-success-500", "bg-success-50", "dark:bg-success-900/10"),
@@ -39,18 +21,6 @@ const themeStyles: Record<string, string> = {
   danger: clsx("border-l-danger-500", "bg-danger-50", "dark:bg-danger-900/10"),
 };
 
-const dropdownHeaderClass = clsx("mb-2 flex items-center", "justify-between", "px-2");
-const clearButtonClass = clsx(
-  "text-sm",
-  "text-base-500 hover:text-base-700",
-  "dark:text-base-400 dark:hover:text-base-300",
-);
-const emptyClass = clsx("py-8 text-center", "text-base-500 dark:text-base-400");
-const listClass = clsx("flex flex-col", "gap-2");
-const itemBaseClass = clsx("rounded-lg", "border-l-4", "p-2");
-const itemMessageClass = clsx("text-sm", "text-base-600 dark:text-base-400");
-const itemTimeClass = clsx("mt-1 text-xs", "text-base-400");
-
 export const NotificationBell: Component<NotificationBellProps> = (props) => {
   const notification = useNotification();
   const i18n = useI18n();
@@ -76,31 +46,32 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
 
       <Dropdown open={open()} onOpenChange={handleOpenChange} maxHeight={400}>
         <Dropdown.Trigger>
-          <button
-            type="button"
+          <Button
+            variant="ghost"
+            size="xs"
             data-notification-bell
-            class={buttonClass}
+            class="relative rounded-full p-2"
             aria-label={i18n.t("notificationBell.unreadCount", { count: String(notification.unreadCount()) })}
             aria-haspopup="true"
             aria-expanded={open()}
           >
             <Icon icon={IconBell} />
             <Show when={notification.unreadCount() > 0}>
-              <span data-notification-badge aria-hidden="true" class={badgeClass}>
+              <span data-notification-badge aria-hidden="true" class="absolute right-0 top-0 flex size-5 items-center justify-center rounded-full bg-danger-500 px-1 text-xs font-bold text-white">
                 {notification.unreadCount()}
               </span>
             </Show>
-          </button>
+          </Button>
         </Dropdown.Trigger>
         <Dropdown.Content>
           <div class="w-80 p-2">
-            <div class={dropdownHeaderClass}>
+            <div class="mb-2 flex items-center justify-between px-2">
               <span class="font-bold">{i18n.t("notificationBell.notifications")}</span>
               <Show when={notification.items().length > 0}>
                 <button
                   type="button"
                   data-notification-clear
-                  class={clearButtonClass}
+                  class={clsx("text-sm", text.muted, "hover:text-base-700 dark:hover:text-base-300")}
                   onClick={handleClear}
                 >
                   {i18n.t("notificationBell.clearAll")}
@@ -110,17 +81,17 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
 
             <Show
               when={notification.items().length > 0}
-              fallback={<div class={emptyClass}>{i18n.t("notificationBell.noNotifications")}</div>}
+              fallback={<div class={clsx("py-8 text-center", text.muted)}>{i18n.t("notificationBell.noNotifications")}</div>}
             >
-              <div class={listClass}>
+              <div class={clsx("flex flex-col", gap.xl)}>
                 <For each={[...notification.items()].reverse()}>
                   {(item) => (
-                    <div class={clsx(itemBaseClass, themeStyles[item.theme])}>
+                    <div class={clsx("rounded-lg border-l-4 p-2", themeStyles[item.theme])}>
                       <div class="font-medium">{item.title}</div>
                       <Show when={item.message}>
-                        <pre class={itemMessageClass}>{item.message}</pre>
+                        <pre class={clsx("text-sm", text.muted)}>{item.message}</pre>
                       </Show>
-                      <div class={itemTimeClass}>{item.createdAt.toLocaleTimeString()}</div>
+                      <div class={clsx("mt-1 text-xs", text.muted)}>{item.createdAt.toLocaleTimeString()}</div>
                     </div>
                   )}
                 </For>

package/src/components/feedback/notification/NotificationProvider.tsx

@@ -1,14 +1,100 @@
-import { createMemo, createSignal, type ParentComponent, Show } from "solid-js";
-import {
-  NotificationContext,
-  type NotificationContextValue,
-  type NotificationItem,
-  type NotificationOptions,
-  type NotificationTheme,
-  type NotificationUpdateOptions,
-} from "./NotificationContext";
+import { createContext, createMemo, createSignal, type Accessor, type ParentComponent, Show, useContext } from "solid-js";
 import { useLogger } from "../../../hooks/useLogger";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
+
+/** Notification theme */
+export type NotificationTheme = "info" | "success" | "warning" | "danger";
+
+/** Notification action button */
+export interface NotificationAction {
+  /** Button text */
+  label: string;
+  /** Click handler */
+  onClick: () => void;
+}
+
+/** Notification item */
+export interface NotificationItem {
+  /** Unique identifier */
+  id: string;
+  /** Theme (info, success, warning, danger) */
+  theme: NotificationTheme;
+  /** Notification title */
+  title: string;
+  /** Notification message (optional) */
+  message?: string;
+  /** Action button (optional) */
+  action?: NotificationAction;
+  /** Creation time */
+  createdAt: Date;
+  /** Read status */
+  read: boolean;
+}
+
+/** Notification creation options */
+export interface NotificationOptions {
+  /** Action button to display in notification */
+  action?: NotificationAction;
+}
+
+/** Notification update options */
+export interface NotificationUpdateOptions {
+  /** If true, mark read notification as unread (redisplay banner) */
+  renotify?: boolean;
+}
+
+/**
+ * Notification system Context value
+ *
+ * @remarks
+ * Provides methods to create, update, delete, and manage read status of notifications.
+ * Maintains up to 50 notifications; older items are removed when exceeded.
+ */
+export interface NotificationContextValue {
+  // State
+  items: Accessor<NotificationItem[]>;
+  unreadCount: Accessor<number>;
+  latestUnread: Accessor<NotificationItem | undefined>;
+
+  // Create notification (returns id)
+  info: (title: string, message?: string, options?: NotificationOptions) => string;
+  success: (title: string, message?: string, options?: NotificationOptions) => string;
+  warning: (title: string, message?: string, options?: NotificationOptions) => string;
+  danger: (title: string, message?: string, options?: NotificationOptions) => string;
+  error: (err?: any, header?: string) => void;
+
+  // Update notification
+  update: (
+    id: string,
+    updates: Partial<Pick<NotificationItem, "title" | "message" | "theme" | "action">>,
+    options?: NotificationUpdateOptions,
+  ) => void;
+
+  // Delete notification
+  remove: (id: string) => void;
+
+  // Management
+  markAsRead: (id: string) => void;
+  markAllAsRead: () => void;
+  dismissBanner: () => void;
+  clear: () => void;
+}
+
+/** Notification system Context */
+export const NotificationContext = createContext<NotificationContextValue>();
+
+/**
+ * Hook to access the notification system
+ *
+ * @throws Error if used outside NotificationProvider
+ */
+export function useNotification(): NotificationContextValue {
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error("useNotification can only be used inside NotificationProvider");
+  }
+  return context;
+}
 
 const MAX_ITEMS = 50;
 

package/src/components/feedback/notification/index.ts

@@ -1,4 +1,3 @@
-export * from "./NotificationContext";
 export * from "./NotificationProvider";
 export * from "./NotificationBanner";
 export * from "./NotificationBell";

package/src/components/feedback/print/PrintProvider.tsx

@@ -1,10 +1,41 @@
-import { type ParentComponent, createSignal, Show, type JSX } from "solid-js";
+import { createContext, useContext, type ParentComponent, createSignal, Show, type JSX } from "solid-js";
 import { Portal } from "solid-js/web";
 import { jsPDF } from "jspdf";
 import * as htmlToImage from "html-to-image";
-import { useBusy } from "../busy/BusyContext";
-import { PrintContext, type PrintContextValue, type PrintOptions } from "./PrintContext";
-import { PrintInstanceContext, type PrintInstance } from "./PrintInstanceContext";
+import { useBusy } from "../busy/BusyProvider";
+
+// --- Context types ---
+
+export interface PrintOptions {
+  size?: string;
+  margin?: string;
+}
+
+export interface PrintContextValue {
+  toPrinter: (factory: () => JSX.Element, options?: PrintOptions) => Promise<void>;
+  toPdf: (factory: () => JSX.Element, options?: PrintOptions) => Promise<Uint8Array>;
+}
+
+export interface PrintInstance {
+  ready: () => void;
+}
+
+// --- Contexts ---
+
+const PrintContext = createContext<PrintContextValue>();
+const PrintInstanceContext = createContext<PrintInstance>();
+
+// --- Hooks ---
+
+export function usePrint(): PrintContextValue {
+  const ctx = useContext(PrintContext);
+  if (!ctx) throw new Error("usePrint can only be used inside PrintProvider");
+  return ctx;
+}
+
+export function usePrintInstance(): PrintInstance | undefined {
+  return useContext(PrintInstanceContext);
+}
 
 // --- Paper size constants (pt) ---
 

package/src/components/form-control/Button.tsx

@@ -2,12 +2,8 @@ import { type JSX, type ParentComponent, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ripple } from "../../directives/ripple";
-import {
-  themeTokens,
-  type SemanticTheme,
-  type ComponentSize,
-  disabledOpacity,
-} from "../../styles/tokens.styles";
+import { type ComponentSize, state, pad } from "../../styles/control.styles";
+import { themeTokens, type SemanticTheme } from "../../styles/theme.styles";
 
 // Directive usage declaration (for TypeScript)
 void ripple;
@@ -16,37 +12,23 @@ type ButtonTheme = SemanticTheme;
 type ButtonVariant = "solid" | "outline" | "ghost";
 type ButtonSize = ComponentSize;
 
-const baseClass = clsx(
-  "inline-flex items-center",
-  "px-2 py-1",
-  "font-bold",
-  "justify-center",
-  "text-center",
-  "cursor-pointer",
-  "transition",
-  "rounded",
-  "focus:outline-none",
-  "focus-visible:ring-2",
-  "border border-transparent",
-  "min-w-8",
-);
-
 const themeClasses = Object.fromEntries(
   Object.entries(themeTokens).map(([theme, t]) => [
     theme,
     {
       solid: clsx(t.solid, t.solidHover /*, "shadow-md hover:shadow-lg"*/),
       outline: clsx("bg-transparent", t.hoverBg, t.text, t.border),
-      ghost: clsx("bg-transparent", `hover:bg-base-100 dark:hover:bg-base-800/30`, t.text),
+      ghost: clsx("bg-transparent", t.hoverBg, t.text),
     },
   ]),
 ) as Record<ButtonTheme, Record<ButtonVariant, string>>;
 
 const sizeClasses: Record<ButtonSize, string> = {
-  xs: clsx("min-w-4 px-0.5 py-0"),
-  sm: clsx("min-w-6 px-1 py-0.5"),
-  lg: clsx("min-w-9 px-3 py-1.5"),
-  xl: clsx("min-w-10 px-4 py-2 text-lg"),
+  default: clsx("min-w-8", pad.default),
+  xs: clsx("min-w-4", pad.xs),
+  sm: clsx("min-w-6", pad.sm),
+  lg: clsx("min-w-9", pad.lg),
+  xl: clsx("min-w-10", pad.xl, "text-lg"),
 };
 
 export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -73,11 +55,11 @@ export const Button: ParentComponent<ButtonProps> = (props) => {
     const variant = local.variant ?? "outline";
 
     return twMerge(
-      baseClass,
+      "inline-flex items-center font-bold justify-center text-center cursor-pointer transition rounded focus:outline-none focus-visible:ring-2 border border-transparent",
       themeClasses[theme][variant],
-      local.size && sizeClasses[local.size],
+      sizeClasses[local.size ?? "default"],
       local.inset && "rounded-none border-none",
-      local.disabled && disabledOpacity,
+      local.disabled && state.disabled,
       local.class,
     );
   };