@simplysm/solid 13.0.75 → 13.0.77

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={() => {
@@ -104,11 +98,6 @@ interface TabsProps {
   children?: JSX.Element;
 }
 
-interface TabsComponent {
-  (props: TabsProps): JSX.Element;
-  Tab: typeof TabsTabInner;
-}
-
 const TabsInner: ParentComponent<TabsProps> = (props) => {
   const [local, rest] = splitProps(props, [
     "value",
@@ -132,20 +121,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,
+});
+//#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,127 +1,13 @@
 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";
-
-export type BarcodeType =
-  | "auspost"
-  | "azteccode"
-  | "azteccodecompact"
-  | "aztecrune"
-  | "bc412"
-  | "channelcode"
-  | "codablockf"
-  | "code11"
-  | "code128"
-  | "code16k"
-  | "code2of5"
-  | "code32"
-  | "code39"
-  | "code39ext"
-  | "code49"
-  | "code93"
-  | "code93ext"
-  | "codeone"
-  | "coop2of5"
-  | "daft"
-  | "databarexpanded"
-  | "databarexpandedcomposite"
-  | "databarexpandedstacked"
-  | "databarexpandedstackedcomposite"
-  | "databarlimited"
-  | "databarlimitedcomposite"
-  | "databaromni"
-  | "databaromnicomposite"
-  | "databarstacked"
-  | "databarstackedcomposite"
-  | "databarstackedomni"
-  | "databarstackedomnicomposite"
-  | "databartruncated"
-  | "databartruncatedcomposite"
-  | "datalogic2of5"
-  | "datamatrix"
-  | "datamatrixrectangular"
-  | "datamatrixrectangularextension"
-  | "dotcode"
-  | "ean13"
-  | "ean13composite"
-  | "ean14"
-  | "ean2"
-  | "ean5"
-  | "ean8"
-  | "ean8composite"
-  | "flattermarken"
-  | "gs1-128"
-  | "gs1-128composite"
-  | "gs1-cc"
-  | "gs1datamatrix"
-  | "gs1datamatrixrectangular"
-  | "gs1dldatamatrix"
-  | "gs1dlqrcode"
-  | "gs1dotcode"
-  | "gs1northamericancoupon"
-  | "gs1qrcode"
-  | "hanxin"
-  | "hibcazteccode"
-  | "hibccodablockf"
-  | "hibccode128"
-  | "hibccode39"
-  | "hibcdatamatrix"
-  | "hibcdatamatrixrectangular"
-  | "hibcmicropdf417"
-  | "hibcpdf417"
-  | "hibcqrcode"
-  | "iata2of5"
-  | "identcode"
-  | "industrial2of5"
-  | "interleaved2of5"
-  | "isbn"
-  | "ismn"
-  | "issn"
-  | "itf14"
-  | "japanpost"
-  | "kix"
-  | "leitcode"
-  | "mailmark"
-  | "mands"
-  | "matrix2of5"
-  | "maxicode"
-  | "micropdf417"
-  | "microqrcode"
-  | "msi"
-  | "onecode"
-  | "pdf417"
-  | "pdf417compact"
-  | "pharmacode"
-  | "pharmacode2"
-  | "planet"
-  | "plessey"
-  | "posicode"
-  | "postnet"
-  | "pzn"
-  | "qrcode"
-  | "rationalizedCodabar"
-  | "raw"
-  | "rectangularmicroqrcode"
-  | "royalmail"
-  | "sscc18"
-  | "swissqrcode"
-  | "symbol"
-  | "telepen"
-  | "telepennumeric"
-  | "ultracode"
-  | "upca"
-  | "upcacomposite"
-  | "upce"
-  | "upcecomposite";
+import type { BarcodeType } from "./Barcode.types";
 
 export interface BarcodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
   type: BarcodeType;
   value?: string;
 }
 
-const baseClass = clsx("inline-block");
-
 export const Barcode: Component<BarcodeProps> = (props) => {
   const [local, rest] = splitProps(props, ["type", "value", "class"]);
   let containerRef!: HTMLDivElement;
@@ -149,10 +35,12 @@ export const Barcode: Component<BarcodeProps> = (props) => {
           svgEl.setAttribute("height", parts[3]);
         }
       }
-    } catch {
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.warn("Barcode render failed:", err);
       containerRef.innerHTML = "";
     }
   });
 
-  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/Barcode.types.ts

@@ -0,0 +1,111 @@
+export type BarcodeType =
+  | "auspost"
+  | "azteccode"
+  | "azteccodecompact"
+  | "aztecrune"
+  | "bc412"
+  | "channelcode"
+  | "codablockf"
+  | "code11"
+  | "code128"
+  | "code16k"
+  | "code2of5"
+  | "code32"
+  | "code39"
+  | "code39ext"
+  | "code49"
+  | "code93"
+  | "code93ext"
+  | "codeone"
+  | "coop2of5"
+  | "daft"
+  | "databarexpanded"
+  | "databarexpandedcomposite"
+  | "databarexpandedstacked"
+  | "databarexpandedstackedcomposite"
+  | "databarlimited"
+  | "databarlimitedcomposite"
+  | "databaromni"
+  | "databaromnicomposite"
+  | "databarstacked"
+  | "databarstackedcomposite"
+  | "databarstackedomni"
+  | "databarstackedomnicomposite"
+  | "databartruncated"
+  | "databartruncatedcomposite"
+  | "datalogic2of5"
+  | "datamatrix"
+  | "datamatrixrectangular"
+  | "datamatrixrectangularextension"
+  | "dotcode"
+  | "ean13"
+  | "ean13composite"
+  | "ean14"
+  | "ean2"
+  | "ean5"
+  | "ean8"
+  | "ean8composite"
+  | "flattermarken"
+  | "gs1-128"
+  | "gs1-128composite"
+  | "gs1-cc"
+  | "gs1datamatrix"
+  | "gs1datamatrixrectangular"
+  | "gs1dldatamatrix"
+  | "gs1dlqrcode"
+  | "gs1dotcode"
+  | "gs1northamericancoupon"
+  | "gs1qrcode"
+  | "hanxin"
+  | "hibcazteccode"
+  | "hibccodablockf"
+  | "hibccode128"
+  | "hibccode39"
+  | "hibcdatamatrix"
+  | "hibcdatamatrixrectangular"
+  | "hibcmicropdf417"
+  | "hibcpdf417"
+  | "hibcqrcode"
+  | "iata2of5"
+  | "identcode"
+  | "industrial2of5"
+  | "interleaved2of5"
+  | "isbn"
+  | "ismn"
+  | "issn"
+  | "itf14"
+  | "japanpost"
+  | "kix"
+  | "leitcode"
+  | "mailmark"
+  | "mands"
+  | "matrix2of5"
+  | "maxicode"
+  | "micropdf417"
+  | "microqrcode"
+  | "msi"
+  | "onecode"
+  | "pdf417"
+  | "pdf417compact"
+  | "pharmacode"
+  | "pharmacode2"
+  | "planet"
+  | "plessey"
+  | "posicode"
+  | "postnet"
+  | "pzn"
+  | "qrcode"
+  | "rationalizedCodabar"
+  | "raw"
+  | "rectangularmicroqrcode"
+  | "royalmail"
+  | "sscc18"
+  | "swissqrcode"
+  | "symbol"
+  | "telepen"
+  | "telepennumeric"
+  | "ultracode"
+  | "upca"
+  | "upcacomposite"
+  | "upce"
+  | "upcecomposite";

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

@@ -3,37 +3,33 @@ import {
   createEffect,
   createSignal,
   onCleanup,
+  onMount,
   splitProps,
   type JSX,
 } from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
-import type * as echartsType from "echarts";
-import clsx from "clsx";
+import * as echarts from "echarts";
 import { twMerge } from "tailwind-merge";
 
 export interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  option: echartsType.EChartsOption;
+  option: echarts.EChartsOption;
   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;
-  let chart: echartsType.EChartsType | undefined;
+  let chart: echarts.EChartsType | undefined;
   const [ready, setReady] = createSignal(false);
 
-  // On mount, dynamically load echarts + initialize chart
-  createEffect(() => {
-    void import("echarts").then((echarts) => {
-      chart = echarts.init(containerRef, null, { renderer: "svg" });
-      setReady(true);
-    });
-
-    onCleanup(() => chart?.dispose());
+  // Initialize chart on mount
+  onMount(() => {
+    chart = echarts.init(containerRef, null, { renderer: "svg" });
+    setReady(true);
   });
 
+  onCleanup(() => chart?.dispose());
+
   // Detect option changes
   createEffect(() => {
     if (!ready()) return;
@@ -55,5 +51,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,15 +7,30 @@ export interface AddressSearchResult {
   buildingName: string | undefined;
 }
 
-export const AddressSearchContent: Component = () => {
-  const dialogInstance = useDialogInstance<AddressSearchResult>();
+interface DaumPostcodeResult {
+  userSelectedType: "R" | "J";
+  roadAddress: string;
+  jibunAddress: string;
+  zonecode: string;
+  bname: string;
+  buildingName: string;
+  apartment: "Y" | "N";
+}
+
+interface DaumPostcodeSize {
+  width: number;
+  height: number;
+}
 
+export const AddressSearchContent: Component<{
+  close?: (result?: AddressSearchResult) => void;
+}> = (props) => {
   const [initialized, setInitialized] = createSignal(false);
   let contentEl!: HTMLDivElement;
 
   onMount(async () => {
     if (!document.getElementById("daum_address")) {
-      await new Promise<void>((resolve) => {
+      await new Promise<void>((resolve, reject) => {
         const scriptEl = document.createElement("script");
         scriptEl.src = "//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
         scriptEl.setAttribute("id", "daum_address");
@@ -27,13 +41,16 @@ export const AddressSearchContent: Component = () => {
             resolve();
           });
         };
+        scriptEl.onerror = () => {
+          reject(new Error("Failed to load Daum postcode script"));
+        };
         document.head.appendChild(scriptEl);
       });
     }
 
     // @ts-expect-error -- Daum Postcode global API
     new daum.Postcode({
-      oncomplete: (data: any): void => {
+      oncomplete: (data: DaumPostcodeResult): void => {
         const addr = data.userSelectedType === "R" ? data.roadAddress : data.jibunAddress;
 
         let extraAddr = "";
@@ -51,13 +68,13 @@ export const AddressSearchContent: Component = () => {
           }
         }
 
-        dialogInstance?.close({
+        props.close?.({
           postNumber: data.zonecode,
           address: addr + extraAddr,
           buildingName: data.buildingName,
         });
       },
-      onresize: (size: any): void => {
+      onresize: (size: DaumPostcodeSize): void => {
         contentEl.style.height = size.height + "px";
       },
       width: "100%",