@simplysm/solid 13.0.75 → 13.0.76

package/src/components/disclosure/Dropdown.tsx

@@ -3,40 +3,25 @@ import {
   type ParentComponent,
   createSignal,
   createEffect,
-  createContext,
   onCleanup,
   Show,
   splitProps,
 } from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import { createControllableSignal } from "../../hooks/createControllableSignal";
-import { createSlotSignal, type SlotAccessor } from "../../hooks/createSlotSignal";
 import { createMountTransition } from "../../hooks/createMountTransition";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { mergeStyles } from "../../helpers/mergeStyles";
-import { createSlotComponent } from "../../helpers/createSlotComponent";
-import { borderSubtle } from "../../styles/tokens.styles";
+import { createSlot } from "../../helpers/createSlot";
+import { bg, border } from "../../styles/base.styles";
 import { tabbable } from "tabbable";
 
-// --- DropdownContext (internal) ---
+// --- DropdownTrigger / DropdownContent slots ---
 
-interface DropdownContextValue {
-  toggle: () => void;
-  setTrigger: (content: SlotAccessor) => void;
-  setContent: (content: SlotAccessor) => void;
-}
-
-const DropdownContext = createContext<DropdownContextValue>();
-
-// --- DropdownTrigger ---
-
-const DropdownTrigger = createSlotComponent(DropdownContext, (ctx) => ctx.setTrigger);
-
-// --- DropdownContent ---
-
-const DropdownContent = createSlotComponent(DropdownContext, (ctx) => ctx.setContent);
+const [DropdownTrigger, createTriggerSlotAccessor] = createSlot<{ children: JSX.Element }>();
+const [DropdownContent, createContentSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
 // --- Dropdown ---
 
@@ -132,7 +117,7 @@ interface DropdownComponent extends ParentComponent<DropdownProps> {
  * </Dropdown>
  * ```
  */
-export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
+const DropdownInner: ParentComponent<DropdownProps> = (props: DropdownProps) => {
   const [local, rest] = splitProps(props, [
     "position",
     "open",
@@ -156,9 +141,9 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     setOpen(!open());
   };
 
-  // Slot registration signals
-  const [triggerSlot, setTrigger] = createSlotSignal();
-  const [contentSlot, setContent] = createSlotSignal();
+  // Slot accessors
+  const [trigger, TriggerProvider] = createTriggerSlotAccessor();
+  const [content, ContentProvider] = createContentSlotAccessor();
 
   // Trigger wrapper ref (needed for position calculation)
   let triggerRef: HTMLDivElement | undefined;
@@ -436,58 +421,64 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
   };
 
   return (
-    <DropdownContext.Provider value={{ toggle, setTrigger, setContent }}>
-      {local.children}
-
-      {/* Render trigger slot (attach click/keyboard handlers to wrapper div) */}
-      <Show when={triggerSlot()}>
-        <div
-          ref={(el) => {
-            triggerRef = el;
-          }}
-          tabIndex={-1}
-          data-dropdown-trigger
-          onClick={toggle}
-          onKeyDown={handleTriggerKeyDown}
-        >
-          {triggerSlot()!()}
-        </div>
-      </Show>
-
-      {/* Content slot: Portal + popup */}
-      <Show when={mounted()}>
-        <Portal>
+    <TriggerProvider>
+      <ContentProvider>
+        {local.children}
+
+        {/* Render trigger slot (attach click/keyboard handlers to wrapper div) */}
+        <Show when={trigger()}>
           <div
-            {...rest}
-            ref={setPopupRef}
-            data-dropdown
-            class={twMerge(
-              clsx(
-                "fixed",
-                "z-dropdown",
-                "bg-white dark:bg-base-800",
-                "border",
-                borderSubtle,
-                "shadow-lg dark:shadow-black/30",
-                "rounded-md",
-                "overflow-y-auto",
-                animationClass(),
-              ),
-              local.class,
-            )}
-            style={mergeStyles(computedStyle(), local.style, {
-              "max-height": `${maxHeight()}px`,
-            })}
-            onTransitionEnd={handleTransitionEnd}
-            onKeyDown={handlePopupKeyDown}
+            ref={(el) => {
+              triggerRef = el;
+            }}
+            tabIndex={-1}
+            data-dropdown-trigger
+            onClick={toggle}
+            onKeyDown={handleTriggerKeyDown}
           >
-            <Show when={contentSlot()}>{contentSlot()!()}</Show>
+            {trigger()!.children}
           </div>
-        </Portal>
-      </Show>
-    </DropdownContext.Provider>
+        </Show>
+
+        {/* Content slot: Portal + popup */}
+        <Show when={mounted()}>
+          <Portal>
+            <div
+              {...rest}
+              ref={setPopupRef}
+              data-dropdown
+              class={twMerge(
+                clsx(
+                  "fixed",
+                  "z-dropdown",
+                  bg.surface,
+                  "border",
+                  border.subtle,
+                  "shadow-lg dark:shadow-black/30",
+                  "rounded-md",
+                  "overflow-y-auto",
+                  animationClass(),
+                ),
+                local.class,
+              )}
+              style={mergeStyles(computedStyle(), local.style, {
+                "max-height": `${maxHeight()}px`,
+              })}
+              onTransitionEnd={handleTransitionEnd}
+              onKeyDown={handlePopupKeyDown}
+            >
+              <Show when={content()}>{content()!.children}</Show>
+            </div>
+          </Portal>
+        </Show>
+      </ContentProvider>
+    </TriggerProvider>
   );
-}) as DropdownComponent;
-
-Dropdown.Trigger = DropdownTrigger;
-Dropdown.Content = DropdownContent;
+};
+
+//#region Export
+export const Dropdown = Object.assign(DropdownInner, {
+  Trigger: DropdownTrigger,
+  Content: DropdownContent,
+}) as unknown as DropdownComponent;
+//#endregion

package/src/components/disclosure/Tabs.tsx

@@ -2,7 +2,9 @@ import { type JSX, type ParentComponent, createContext, splitProps, useContext }
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../hooks/createControllableSignal";
-import { type ComponentSize } from "../../styles/tokens.styles";
+import { border, text } from "../../styles/base.styles";
+import { type ComponentSize, gap, pad } from "../../styles/control.styles";
+import { themeTokens } from "../../styles/theme.styles";
 
 // --- Context ---
 
@@ -29,37 +31,29 @@ function TabsTabInner(props: TabsTabProps) {
 
   const isSelected = () => ctx.value() === props.value;
 
-  const sizeClasses = () => {
-    switch (ctx.size()) {
-      case "sm":
-        return "px-2.5 py-1 text-sm";
-      case "lg":
-        return "px-4 py-2.5 text-base";
-      default:
-        return "px-3 py-1.5 text-sm";
-    }
+  const tabSizeClasses: Record<ComponentSize, string> = {
+    default: "px-3 py-1.5 text-sm",
+    xs: clsx(pad.sm, "text-xs"),
+    sm: "px-2.5 py-1 text-sm",
+    lg: "px-4 py-2.5 text-base",
+    xl: "px-5 py-3 text-lg",
   };
 
-  const baseClass = clsx(
-    "relative cursor-pointer select-none font-medium",
-    "transition-colors",
-    "-mb-px",
-  );
+  const sizeClasses = () => tabSizeClasses[ctx.size() ?? "default"];
 
   const stateClass = () =>
     isSelected()
       ? clsx(
-          "border-b-2 border-primary-500 text-primary-600",
-          "dark:border-primary-400 dark:text-primary-400",
+          "border-b-2 border-primary-500 dark:border-primary-400",
+          themeTokens.primary.text,
         )
       : clsx(
           "border-b-2 border-transparent",
-          "text-base-500 hover:border-base-300 hover:text-base-700",
-          "dark:text-base-400 dark:hover:border-base-600 dark:hover:text-base-200",
+          text.muted,
+          "hover:border-base-300 hover:text-base-700",
+          "dark:hover:border-base-600 dark:hover:text-base-200",
         );
 
-  const disabledClass = "opacity-50 pointer-events-none";
-
   return (
     <button
       type="button"
@@ -68,10 +62,10 @@ function TabsTabInner(props: TabsTabProps) {
       aria-disabled={props.disabled ?? false}
       tabIndex={props.disabled ? -1 : 0}
       class={twMerge(
-        baseClass,
+        "relative cursor-pointer select-none font-medium transition-colors -mb-px",
         sizeClasses(),
         stateClass(),
-        props.disabled && disabledClass,
+        props.disabled && "opacity-50 pointer-events-none",
         props.class,
       )}
       onClick={() => {
@@ -132,20 +126,17 @@ const TabsInner: ParentComponent<TabsProps> = (props) => {
     size: () => local.size,
   };
 
-  const baseClass = clsx(
-    "inline-flex items-center gap-1",
-    "border-b border-base-200",
-    "dark:border-base-700",
-  );
-
   return (
     <TabsContext.Provider value={contextValue}>
-      <div {...rest} role="tablist" class={twMerge(baseClass, local.class)} style={local.style}>
+      <div {...rest} role="tablist" class={twMerge(clsx("inline-flex items-center", gap.default, "border-b", border.default), local.class)} style={local.style}>
         {local.children}
       </div>
     </TabsContext.Provider>
   );
 };
 
-export const Tabs = TabsInner as unknown as TabsComponent;
-Tabs.Tab = TabsTabInner;
+//#region Export
+export const Tabs = Object.assign(TabsInner, {
+  Tab: TabsTabInner,
+}) as unknown as TabsComponent;
+//#endregion

package/src/components/display/Alert.tsx

@@ -1,7 +1,6 @@
 import { type JSX, type ParentComponent, splitProps } from "solid-js";
-import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { themeTokens, type SemanticTheme } from "../../styles/tokens.styles";
+import { themeTokens, type SemanticTheme } from "../../styles/theme.styles";
 
 export type AlertTheme = SemanticTheme;
 
@@ -9,8 +8,6 @@ export interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
   theme?: AlertTheme;
 }
 
-const baseClass = clsx("block", "p-3", "rounded");
-
 const themeClasses = Object.fromEntries(
   Object.entries(themeTokens).map(([theme, t]) => [theme, t.light]),
 ) as Record<AlertTheme, string>;
@@ -20,7 +17,7 @@ export const Alert: ParentComponent<AlertProps> = (props) => {
 
   const getClassName = () => {
     const theme = local.theme ?? "base";
-    return twMerge(baseClass, themeClasses[theme], local.class);
+    return twMerge("block p-3 rounded", themeClasses[theme], local.class);
   };
 
   return (

package/src/components/display/Barcode.tsx

@@ -1,5 +1,4 @@
 import { type Component, createEffect, splitProps, type JSX } from "solid-js";
-import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import bwipjs from "bwip-js/browser";
 
@@ -120,8 +119,6 @@ export interface BarcodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
   value?: string;
 }
 
-const baseClass = clsx("inline-block");
-
 export const Barcode: Component<BarcodeProps> = (props) => {
   const [local, rest] = splitProps(props, ["type", "value", "class"]);
   let containerRef!: HTMLDivElement;
@@ -154,5 +151,5 @@ export const Barcode: Component<BarcodeProps> = (props) => {
     }
   });
 
-  return <div data-barcode ref={containerRef} class={twMerge(baseClass, local.class)} {...rest} />;
+  return <div data-barcode ref={containerRef} class={twMerge("inline-block", local.class)} {...rest} />;
 };

package/src/components/display/Card.animate.css

@@ -0,0 +1,11 @@
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/components/display/Card.tsx

@@ -1,24 +1,23 @@
 import { type JSX, type ParentComponent, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import { bg } from "../../styles/base.styles";
+import "./Card.animate.css";
 
 export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {}
 
-const baseClass = clsx(
-  "block",
-  "bg-white dark:bg-base-800",
-  "rounded-lg",
-  "shadow focus-within:shadow-md hover:shadow-md",
-  "dark:shadow-black/20 dark:focus-within:shadow-black/30 dark:hover:shadow-black/30",
-  "transition-shadow duration-300",
-  "animate-fade-in",
-);
-
 export const Card: ParentComponent<CardProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
 
   return (
-    <div data-card class={twMerge(baseClass, local.class)} {...rest}>
+    <div
+      data-card
+      class={twMerge(
+        clsx("block", bg.surface, "animate-[fade-in_0.6s_ease-out_both] rounded-lg shadow transition-shadow duration-300 focus-within:shadow-md hover:shadow-md dark:shadow-black/20 dark:focus-within:shadow-black/30 dark:hover:shadow-black/30"),
+        local.class,
+      )}
+      {...rest}
+    >
       {local.children}
     </div>
   );

package/src/components/display/Echarts.tsx

@@ -8,7 +8,6 @@ import {
 } from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import type * as echartsType from "echarts";
-import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
@@ -16,8 +15,6 @@ export interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
   busy?: boolean;
 }
 
-const baseClass = clsx("block", "size-full");
-
 export const Echarts: Component<EchartsProps> = (props) => {
   const [local, rest] = splitProps(props, ["option", "busy", "class"]);
   let containerRef!: HTMLDivElement;
@@ -55,5 +52,5 @@ export const Echarts: Component<EchartsProps> = (props) => {
     chart?.resize();
   });
 
-  return <div data-echarts ref={containerRef} class={twMerge(baseClass, local.class)} {...rest} />;
+  return <div data-echarts ref={containerRef} class={twMerge("block size-full", local.class)} {...rest} />;
 };

package/src/components/display/Link.tsx

@@ -1,7 +1,7 @@
 import { type JSX, type ParentComponent, splitProps } from "solid-js";
-import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { disabledOpacity, type SemanticTheme, themeTokens } from "../../styles/tokens.styles";
+import { state } from "../../styles/control.styles";
+import { type SemanticTheme, themeTokens } from "../../styles/theme.styles";
 
 export type LinkTheme = SemanticTheme;
 
@@ -10,8 +10,6 @@ export interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
   disabled?: boolean;
 }
 
-const baseClass = clsx("hover:underline", "cursor-pointer");
-
 const themeClasses: Record<LinkTheme, string> = Object.fromEntries(
   Object.entries(themeTokens).map(([theme, t]) => [theme, t.text]),
 ) as Record<LinkTheme, string>;
@@ -21,7 +19,7 @@ export const Link: ParentComponent<LinkProps> = (props) => {
 
   const getClassName = () => {
     const theme = local.theme ?? "primary";
-    return twMerge(baseClass, themeClasses[theme], local.disabled && disabledOpacity, local.class);
+    return twMerge("hover:underline cursor-pointer", themeClasses[theme], local.disabled && state.disabled, local.class);
   };
 
   return (

package/src/components/display/Tag.tsx

@@ -1,7 +1,6 @@
 import { type JSX, type ParentComponent, splitProps } from "solid-js";
-import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { type SemanticTheme, themeTokens } from "../../styles/tokens.styles";
+import { type SemanticTheme, themeTokens } from "../../styles/theme.styles";
 
 export type TagTheme = SemanticTheme;
 
@@ -9,8 +8,6 @@ export interface TagProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   theme?: TagTheme;
 }
 
-const baseClass = clsx("inline-block", "text-white", "px-1.5", "rounded-md");
-
 const themeClasses: Record<TagTheme, string> = Object.fromEntries(
   Object.entries(themeTokens).map(([theme, t]) => [theme, t.solid]),
 ) as Record<TagTheme, string>;
@@ -20,7 +17,7 @@ export const Tag: ParentComponent<TagProps> = (props) => {
 
   const getClassName = () => {
     const theme = local.theme ?? "base";
-    return twMerge(baseClass, themeClasses[theme], local.class);
+    return twMerge("inline-block text-white px-1.5 rounded-md", themeClasses[theme], local.class);
   };
 
   return (

package/src/components/features/address/AddressSearch.tsx

@@ -1,6 +1,5 @@
 import { type Component, createSignal, onMount } from "solid-js";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
-import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
 
 export interface AddressSearchResult {
   postNumber: string | undefined;
@@ -8,9 +7,9 @@ export interface AddressSearchResult {
   buildingName: string | undefined;
 }
 
-export const AddressSearchContent: Component = () => {
-  const dialogInstance = useDialogInstance<AddressSearchResult>();
-
+export const AddressSearchContent: Component<{
+  close?: (result?: AddressSearchResult) => void;
+}> = (props) => {
   const [initialized, setInitialized] = createSignal(false);
   let contentEl!: HTMLDivElement;
 
@@ -51,7 +50,7 @@ export const AddressSearchContent: Component = () => {
           }
         }
 
-        dialogInstance?.close({
+        props.close?.({
           postNumber: data.zonecode,
           address: addr + extraAddr,
           buildingName: data.buildingName,