@simplysm/solid 13.0.0-beta.6

package/dist/components/feedback/notification/NotificationProvider.js

@@ -0,0 +1,101 @@
+import { createSignal, createMemo, Show } from "solid-js";
+import {
+  NotificationContext
+} from "./NotificationContext";
+const MAX_ITEMS = 50;
+const NotificationProvider = (props) => {
+  const [items, setItems] = createSignal([]);
+  const [dismissedBannerId, setDismissedBannerId] = createSignal(null);
+  const unreadItems = createMemo(() => items().filter((i) => !i.read));
+  const unreadCount = createMemo(() => unreadItems().length);
+  const latestUnread = createMemo(() => {
+    const latest = unreadItems().at(-1);
+    if (!latest) return void 0;
+    return latest.id === dismissedBannerId() ? void 0 : latest;
+  });
+  const addNotification = (theme, title, message, options) => {
+    const id = crypto.randomUUID();
+    const newItem = {
+      id,
+      theme,
+      title,
+      message,
+      action: options == null ? void 0 : options.action,
+      createdAt: /* @__PURE__ */ new Date(),
+      read: false
+    };
+    setItems((prev) => {
+      const updated = [...prev, newItem];
+      if (updated.length > MAX_ITEMS) {
+        return updated.slice(-MAX_ITEMS);
+      }
+      return updated;
+    });
+    setDismissedBannerId(null);
+    return id;
+  };
+  const info = (title, message, options) => {
+    return addNotification("info", title, message, options);
+  };
+  const success = (title, message, options) => {
+    return addNotification("success", title, message, options);
+  };
+  const warning = (title, message, options) => {
+    return addNotification("warning", title, message, options);
+  };
+  const danger = (title, message, options) => {
+    return addNotification("danger", title, message, options);
+  };
+  const update = (id, updates, options) => {
+    setItems(
+      (prev) => prev.map((item) => {
+        if (item.id !== id) return item;
+        const updated = { ...item, ...updates };
+        if ((options == null ? void 0 : options.renotify) && item.read) {
+          updated.read = false;
+          setDismissedBannerId(null);
+        }
+        return updated;
+      })
+    );
+  };
+  const remove = (id) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+  const markAsRead = (id) => {
+    setItems((prev) => prev.map((item) => item.id === id ? { ...item, read: true } : item));
+  };
+  const markAllAsRead = () => {
+    setItems((prev) => prev.map((item) => ({ ...item, read: true })));
+  };
+  const dismissBanner = () => {
+    const latest = latestUnread();
+    if (latest) {
+      setDismissedBannerId(latest.id);
+    }
+  };
+  const clear = () => {
+    setItems([]);
+    setDismissedBannerId(null);
+  };
+  const contextValue = {
+    items,
+    unreadCount,
+    latestUnread,
+    info,
+    success,
+    warning,
+    danger,
+    update,
+    remove,
+    markAsRead,
+    markAllAsRead,
+    dismissBanner,
+    clear
+  };
+  return /* @__PURE__ */ React.createElement(NotificationContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", class: "sr-only" }, /* @__PURE__ */ React.createElement(Show, { when: latestUnread() }, (item) => `\uC54C\uB9BC: ${item().title} ${item().message ?? ""}`)), props.children);
+};
+export {
+  NotificationProvider
+};
+//# sourceMappingURL=NotificationProvider.js.map

package/dist/components/feedback/notification/NotificationProvider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/feedback/notification/NotificationProvider.tsx"],
+  "sourcesContent": ["import { type ParentComponent, createSignal, createMemo, Show } from \"solid-js\";\nimport {\n  NotificationContext,\n  type NotificationContextValue,\n  type NotificationItem,\n  type NotificationOptions,\n  type NotificationTheme,\n  type NotificationUpdateOptions,\n} from \"./NotificationContext\";\n\nconst MAX_ITEMS = 50;\n\nexport const NotificationProvider: ParentComponent = (props) => {\n  const [items, setItems] = createSignal<NotificationItem[]>([]);\n  const [dismissedBannerId, setDismissedBannerId] = createSignal<string | null>(null);\n\n  const unreadItems = createMemo(() => items().filter((i) => !i.read));\n  const unreadCount = createMemo(() => unreadItems().length);\n\n  const latestUnread = createMemo(() => {\n    const latest = unreadItems().at(-1);\n    if (!latest) return undefined;\n    return latest.id === dismissedBannerId() ? undefined : latest;\n  });\n\n  const addNotification = (\n    theme: NotificationTheme,\n    title: string,\n    message?: string,\n    options?: NotificationOptions,\n  ): string => {\n    const id = crypto.randomUUID();\n    const newItem: NotificationItem = {\n      id,\n      theme,\n      title,\n      message,\n      action: options?.action,\n      createdAt: new Date(),\n      read: false,\n    };\n\n    setItems((prev) => {\n      const updated = [...prev, newItem];\n      if (updated.length > MAX_ITEMS) {\n        return updated.slice(-MAX_ITEMS);\n      }\n      return updated;\n    });\n\n    setDismissedBannerId(null);\n    return id;\n  };\n\n  const info = (title: string, message?: string, options?: NotificationOptions): string => {\n    return addNotification(\"info\", title, message, options);\n  };\n\n  const success = (title: string, message?: string, options?: NotificationOptions): string => {\n    return addNotification(\"success\", title, message, options);\n  };\n\n  const warning = (title: string, message?: string, options?: NotificationOptions): string => {\n    return addNotification(\"warning\", title, message, options);\n  };\n\n  const danger = (title: string, message?: string, options?: NotificationOptions): string => {\n    return addNotification(\"danger\", title, message, options);\n  };\n\n  const update = (\n    id: string,\n    updates: Partial<Pick<NotificationItem, \"title\" | \"message\" | \"theme\" | \"action\">>,\n    options?: NotificationUpdateOptions,\n  ): void => {\n    setItems((prev) =>\n      prev.map((item) => {\n        if (item.id !== id) return item;\n\n        const updated = { ...item, ...updates };\n\n        // renotify: \uC77D\uC740 \uC0C1\uD0DC\uBA74 \uB2E4\uC2DC \uC77D\uC9C0 \uC54A\uC74C\uC73C\uB85C \uBCC0\uACBD\n        if (options?.renotify && item.read) {\n          updated.read = false;\n          // \uBC30\uB108\uAC00 dismiss\uB41C \uC0C1\uD0DC\uC5D0\uC11C renotify\uB418\uBA74 \uB2E4\uC2DC \uBCF4\uC774\uAC8C\n          setDismissedBannerId(null);\n        }\n\n        return updated;\n      }),\n    );\n  };\n\n  const remove = (id: string): void => {\n    setItems((prev) => prev.filter((item) => item.id !== id));\n  };\n\n  const markAsRead = (id: string) => {\n    setItems((prev) => prev.map((item) => (item.id === id ? { ...item, read: true } : item)));\n  };\n\n  const markAllAsRead = () => {\n    setItems((prev) => prev.map((item) => ({ ...item, read: true })));\n  };\n\n  const dismissBanner = () => {\n    const latest = latestUnread();\n    if (latest) {\n      setDismissedBannerId(latest.id);\n    }\n  };\n\n  const clear = () => {\n    setItems([]);\n    setDismissedBannerId(null);\n  };\n\n  const contextValue: NotificationContextValue = {\n    items,\n    unreadCount,\n    latestUnread,\n    info,\n    success,\n    warning,\n    danger,\n    update,\n    remove,\n    markAsRead,\n    markAllAsRead,\n    dismissBanner,\n    clear,\n  };\n\n  return (\n    <NotificationContext.Provider value={contextValue}>\n      {/* \uC2A4\uD06C\uB9B0 \uB9AC\uB354\uC6A9 Live Region */}\n      <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n        <Show when={latestUnread()}>{(item) => `\uC54C\uB9BC: ${item().title} ${item().message ?? \"\"}`}</Show>\n      </div>\n      {props.children}\n    </NotificationContext.Provider>\n  );\n};\n"],
+  "mappings": "AAAA,SAA+B,cAAc,YAAY,YAAY;AACrE;AAAA,EACE;AAAA,OAMK;AAEP,MAAM,YAAY;AAEX,MAAM,uBAAwC,CAAC,UAAU;AAC9D,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAiC,CAAC,CAAC;AAC7D,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,aAA4B,IAAI;AAElF,QAAM,cAAc,WAAW,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC;AACnE,QAAM,cAAc,WAAW,MAAM,YAAY,EAAE,MAAM;AAEzD,QAAM,eAAe,WAAW,MAAM;AACpC,UAAM,SAAS,YAAY,EAAE,GAAG,EAAE;AAClC,QAAI,CAAC,OAAQ,QAAO;AACpB,WAAO,OAAO,OAAO,kBAAkB,IAAI,SAAY;AAAA,EACzD,CAAC;AAED,QAAM,kBAAkB,CACtB,OACA,OACA,SACA,YACW;AACX,UAAM,KAAK,OAAO,WAAW;AAC7B,UAAM,UAA4B;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,mCAAS;AAAA,MACjB,WAAW,oBAAI,KAAK;AAAA,MACpB,MAAM;AAAA,IACR;AAEA,aAAS,CAAC,SAAS;AACjB,YAAM,UAAU,CAAC,GAAG,MAAM,OAAO;AACjC,UAAI,QAAQ,SAAS,WAAW;AAC9B,eAAO,QAAQ,MAAM,CAAC,SAAS;AAAA,MACjC;AACA,aAAO;AAAA,IACT,CAAC;AAED,yBAAqB,IAAI;AACzB,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,CAAC,OAAe,SAAkB,YAA0C;AACvF,WAAO,gBAAgB,QAAQ,OAAO,SAAS,OAAO;AAAA,EACxD;AAEA,QAAM,UAAU,CAAC,OAAe,SAAkB,YAA0C;AAC1F,WAAO,gBAAgB,WAAW,OAAO,SAAS,OAAO;AAAA,EAC3D;AAEA,QAAM,UAAU,CAAC,OAAe,SAAkB,YAA0C;AAC1F,WAAO,gBAAgB,WAAW,OAAO,SAAS,OAAO;AAAA,EAC3D;AAEA,QAAM,SAAS,CAAC,OAAe,SAAkB,YAA0C;AACzF,WAAO,gBAAgB,UAAU,OAAO,SAAS,OAAO;AAAA,EAC1D;AAEA,QAAM,SAAS,CACb,IACA,SACA,YACS;AACT;AAAA,MAAS,CAAC,SACR,KAAK,IAAI,CAAC,SAAS;AACjB,YAAI,KAAK,OAAO,GAAI,QAAO;AAE3B,cAAM,UAAU,EAAE,GAAG,MAAM,GAAG,QAAQ;AAGtC,aAAI,mCAAS,aAAY,KAAK,MAAM;AAClC,kBAAQ,OAAO;AAEf,+BAAqB,IAAI;AAAA,QAC3B;AAEA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,EACF;AAEA,QAAM,SAAS,CAAC,OAAqB;AACnC,aAAS,CAAC,SAAS,KAAK,OAAO,CAAC,SAAS,KAAK,OAAO,EAAE,CAAC;AAAA,EAC1D;AAEA,QAAM,aAAa,CAAC,OAAe;AACjC,aAAS,CAAC,SAAS,KAAK,IAAI,CAAC,SAAU,KAAK,OAAO,KAAK,EAAE,GAAG,MAAM,MAAM,KAAK,IAAI,IAAK,CAAC;AAAA,EAC1F;AAEA,QAAM,gBAAgB,MAAM;AAC1B,aAAS,CAAC,SAAS,KAAK,IAAI,CAAC,UAAU,EAAE,GAAG,MAAM,MAAM,KAAK,EAAE,CAAC;AAAA,EAClE;AAEA,QAAM,gBAAgB,MAAM;AAC1B,UAAM,SAAS,aAAa;AAC5B,QAAI,QAAQ;AACV,2BAAqB,OAAO,EAAE;AAAA,IAChC;AAAA,EACF;AAEA,QAAM,QAAQ,MAAM;AAClB,aAAS,CAAC,CAAC;AACX,yBAAqB,IAAI;AAAA,EAC3B;AAEA,QAAM,eAAyC;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,oCAAC,oBAAoB,UAApB,EAA6B,OAAO,gBAEnC,oCAAC,SAAI,MAAK,UAAS,aAAU,UAAS,eAAY,QAAO,OAAM,aAC7D,oCAAC,QAAK,MAAM,aAAa,KAAI,CAAC,SAAS,iBAAO,KAAK,EAAE,KAAK,IAAI,KAAK,EAAE,WAAW,EAAE,EAAG,CACvF,GACC,MAAM,QACT;AAEJ;",
+  "names": []
+}

package/dist/components/feedback/notification/index.js

@@ -0,0 +1,5 @@
+export * from "./NotificationContext";
+export * from "./NotificationProvider";
+export * from "./NotificationBanner";
+export * from "./NotificationBell";
+//# sourceMappingURL=index.js.map

package/dist/components/feedback/notification/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/feedback/notification/index.ts"],
+  "sourcesContent": ["export * from \"./NotificationContext\";\nexport * from \"./NotificationProvider\";\nexport * from \"./NotificationBanner\";\nexport * from \"./NotificationBell\";\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/dist/components/feedback/print/Print.js

@@ -0,0 +1,12 @@
+function PrintPage(props) {
+  return /* @__PURE__ */ React.createElement("div", { "data-print-page": true }, props.children);
+}
+const PrintInner = (props) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
+};
+const Print = PrintInner;
+Print.Page = PrintPage;
+export {
+  Print
+};
+//# sourceMappingURL=Print.js.map

package/dist/components/feedback/print/Print.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/feedback/print/Print.tsx"],
+  "sourcesContent": ["import type { JSX, ParentProps } from \"solid-js\";\n\n// --- Print.Page ---\n\nfunction PrintPage(props: ParentProps) {\n  return <div data-print-page>{props.children}</div>;\n}\n\n// --- Print ---\n\ninterface PrintComponent {\n  (props: ParentProps): JSX.Element;\n  Page: typeof PrintPage;\n}\n\nconst PrintInner = (props: ParentProps) => {\n  return <>{props.children}</>;\n};\n\nexport const Print = PrintInner as unknown as PrintComponent;\nPrint.Page = PrintPage;\n"],
+  "mappings": "AAIA,SAAS,UAAU,OAAoB;AACrC,SAAO,oCAAC,SAAI,mBAAe,QAAE,MAAM,QAAS;AAC9C;AASA,MAAM,aAAa,CAAC,UAAuB;AACzC,SAAO,0DAAG,MAAM,QAAS;AAC3B;AAEO,MAAM,QAAQ;AACrB,MAAM,OAAO;",
+  "names": []
+}

package/dist/components/feedback/print/PrintInstanceContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "solid-js";
+const PrintInstanceContext = createContext();
+function usePrintInstance() {
+  return useContext(PrintInstanceContext);
+}
+export {
+  PrintInstanceContext,
+  usePrintInstance
+};
+//# sourceMappingURL=PrintInstanceContext.js.map

package/dist/components/feedback/print/PrintInstanceContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/feedback/print/PrintInstanceContext.ts"],
+  "sourcesContent": ["import { createContext, useContext } from \"solid-js\";\n\nexport interface PrintInstance {\n  ready: () => void;\n}\n\nexport const PrintInstanceContext = createContext<PrintInstance>();\n\nexport function usePrintInstance(): PrintInstance | undefined {\n  return useContext(PrintInstanceContext);\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAMnC,MAAM,uBAAuB,cAA6B;AAE1D,SAAS,mBAA8C;AAC5D,SAAO,WAAW,oBAAoB;AACxC;",
+  "names": []
+}

package/dist/components/form-control/Button.js

@@ -0,0 +1,74 @@
+import { splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { ripple } from "../../directives/ripple";
+import { themeTokens, disabledOpacity } from "../../styles/tokens.styles";
+void ripple;
+const baseClass = clsx(
+  "inline-flex items-center",
+  "px-2 py-1",
+  "font-bold",
+  "justify-center",
+  "text-center",
+  "cursor-pointer",
+  "transition-colors",
+  "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),
+      outline: clsx("bg-transparent", t.hoverBg, t.text, t.border),
+      ghost: clsx("bg-transparent", t.hoverBg, t.text)
+    }
+  ])
+);
+const sizeClasses = {
+  sm: clsx("min-w-6 px-1 py-0"),
+  lg: clsx("min-w-9 px-3 py-1.5")
+};
+const Button = (props) => {
+  const [local, rest] = splitProps(props, [
+    "children",
+    "class",
+    "type",
+    "theme",
+    "variant",
+    "size",
+    "inset",
+    "disabled"
+  ]);
+  const getClassName = () => {
+    const theme = local.theme ?? "base";
+    const variant = local.variant ?? "outline";
+    return twMerge(
+      baseClass,
+      themeClasses[theme][variant],
+      local.size && sizeClasses[local.size],
+      local.inset && "rounded-none border-none",
+      local.disabled && disabledOpacity,
+      local.class
+    );
+  };
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ...rest,
+      "data-button": true,
+      "use:ripple": !local.disabled,
+      type: local.type ?? "button",
+      class: getClassName(),
+      disabled: local.disabled
+    },
+    local.children
+  );
+};
+export {
+  Button
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/form-control/Button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/form-control/Button.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { ripple } from \"../../directives/ripple\";\nimport { themeTokens, type SemanticTheme, type ComponentSize, disabledOpacity } from \"../../styles/tokens.styles\";\n\n// Directive \uC0AC\uC6A9 \uC120\uC5B8 (TypeScript\uC6A9)\nvoid ripple;\n\ntype ButtonTheme = SemanticTheme;\ntype ButtonVariant = \"solid\" | \"outline\" | \"ghost\";\ntype ButtonSize = ComponentSize;\n\nconst baseClass = clsx(\n  \"inline-flex items-center\",\n  \"px-2 py-1\",\n  \"font-bold\",\n  \"justify-center\",\n  \"text-center\",\n  \"cursor-pointer\",\n  \"transition-colors\",\n  \"rounded\",\n  \"focus:outline-none\",\n  \"focus-visible:ring-2\",\n  \"border border-transparent\",\n  \"min-w-8\",\n);\n\nconst themeClasses = Object.fromEntries(\n  Object.entries(themeTokens).map(([theme, t]) => [\n    theme,\n    {\n      solid: clsx(t.solid, t.solidHover),\n      outline: clsx(\"bg-transparent\", t.hoverBg, t.text, t.border),\n      ghost: clsx(\"bg-transparent\", t.hoverBg, t.text),\n    },\n  ]),\n) as Record<ButtonTheme, Record<ButtonVariant, string>>;\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  sm: clsx(\"min-w-6 px-1 py-0\"),\n  lg: clsx(\"min-w-9 px-3 py-1.5\"),\n};\n\nexport interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  theme?: ButtonTheme;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  inset?: boolean;\n}\n\nexport const Button: ParentComponent<ButtonProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"type\",\n    \"theme\",\n    \"variant\",\n    \"size\",\n    \"inset\",\n    \"disabled\",\n  ]);\n\n  const getClassName = () => {\n    const theme = local.theme ?? \"base\";\n    const variant = local.variant ?? \"outline\";\n\n    return twMerge(\n      baseClass,\n      themeClasses[theme][variant],\n      local.size && sizeClasses[local.size],\n      local.inset && \"rounded-none border-none\",\n      local.disabled && disabledOpacity,\n      local.class,\n    );\n  };\n\n  return (\n    <button\n      {...rest}\n      data-button\n      use:ripple={!local.disabled}\n      type={local.type ?? \"button\"}\n      class={getClassName()}\n      disabled={local.disabled}\n    >\n      {local.children}\n    </button>\n  );\n};\n"],
+  "mappings": "AAAA,SAAyC,kBAAkB;AAC3D,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,aAAqD,uBAAuB;AAGrF,KAAK;AAML,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,eAAe,OAAO;AAAA,EAC1B,OAAO,QAAQ,WAAW,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM;AAAA,IAC9C;AAAA,IACA;AAAA,MACE,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU;AAAA,MACjC,SAAS,KAAK,kBAAkB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM;AAAA,MAC3D,OAAO,KAAK,kBAAkB,EAAE,SAAS,EAAE,IAAI;AAAA,IACjD;AAAA,EACF,CAAC;AACH;AAEA,MAAM,cAA0C;AAAA,EAC9C,IAAI,KAAK,mBAAmB;AAAA,EAC5B,IAAI,KAAK,qBAAqB;AAChC;AASO,MAAM,SAAuC,CAAC,UAAU;AAC7D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,MAAM;AACzB,UAAM,QAAQ,MAAM,SAAS;AAC7B,UAAM,UAAU,MAAM,WAAW;AAEjC,WAAO;AAAA,MACL;AAAA,MACA,aAAa,KAAK,EAAE,OAAO;AAAA,MAC3B,MAAM,QAAQ,YAAY,MAAM,IAAI;AAAA,MACpC,MAAM,SAAS;AAAA,MACf,MAAM,YAAY;AAAA,MAClB,MAAM;AAAA,IACR;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,MACX,cAAY,CAAC,MAAM;AAAA,MACnB,MAAM,MAAM,QAAQ;AAAA,MACpB,OAAO,aAAa;AAAA,MACpB,UAAU,MAAM;AAAA;AAAA,IAEf,MAAM;AAAA,EACT;AAEJ;",
+  "names": []
+}

package/dist/components/form-control/DropdownTrigger.styles.js

@@ -0,0 +1,44 @@
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { borderDefault, paddingLg, paddingSm } from "../../styles/tokens.styles";
+import { insetBase, insetFocusOutlineSelf } from "../../styles/patterns.styles";
+const triggerBaseClass = clsx(
+  "inline-flex items-center gap-2",
+  "w-40",
+  "border",
+  borderDefault,
+  "rounded",
+  "bg-transparent",
+  "hover:bg-base-100 dark:hover:bg-base-700",
+  "cursor-pointer",
+  "focus:outline-none",
+  "focus-within:border-primary-400 dark:focus-within:border-primary-400"
+);
+const triggerDisabledClass = clsx(
+  "cursor-default bg-base-200 text-base-400 dark:bg-base-800 dark:text-base-500"
+);
+const triggerInsetClass = clsx(insetBase, "bg-transparent", insetFocusOutlineSelf);
+const triggerSizeClasses = {
+  sm: clsx("gap-1.5", paddingSm),
+  lg: clsx("gap-3", paddingLg)
+};
+const chevronWrapperClass = clsx("opacity-30", "hover:opacity-100");
+function getTriggerClass(options) {
+  return twMerge(
+    triggerBaseClass,
+    "px-2 py-1",
+    options.size && triggerSizeClasses[options.size],
+    options.disabled && triggerDisabledClass,
+    options.inset && triggerInsetClass,
+    options.class
+  );
+}
+export {
+  chevronWrapperClass,
+  getTriggerClass,
+  triggerBaseClass,
+  triggerDisabledClass,
+  triggerInsetClass,
+  triggerSizeClasses
+};
+//# sourceMappingURL=DropdownTrigger.styles.js.map

package/dist/components/form-control/DropdownTrigger.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/form-control/DropdownTrigger.styles.ts"],
+  "sourcesContent": ["import clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { borderDefault, type ComponentSize, paddingLg, paddingSm } from \"../../styles/tokens.styles\";\nimport { insetBase, insetFocusOutlineSelf } from \"../../styles/patterns.styles\";\n\nexport const triggerBaseClass = clsx(\n  \"inline-flex items-center gap-2\",\n  \"w-40\",\n  \"border\",\n  borderDefault,\n  \"rounded\",\n  \"bg-transparent\",\n  \"hover:bg-base-100 dark:hover:bg-base-700\",\n  \"cursor-pointer\",\n  \"focus:outline-none\",\n  \"focus-within:border-primary-400 dark:focus-within:border-primary-400\",\n);\n\nexport const triggerDisabledClass = clsx(\n  \"cursor-default bg-base-200 text-base-400 dark:bg-base-800 dark:text-base-500\",\n);\n\nexport const triggerInsetClass = clsx(insetBase, \"bg-transparent\", insetFocusOutlineSelf);\n\nexport const triggerSizeClasses: Record<ComponentSize, string> = {\n  sm: clsx(\"gap-1.5\", paddingSm),\n  lg: clsx(\"gap-3\", paddingLg),\n};\n\nexport const chevronWrapperClass = clsx(\"opacity-30\", \"hover:opacity-100\");\n\n/** Select/Combobox \uACF5\uC720 \uD2B8\uB9AC\uAC70 \uD074\uB798\uC2A4 \uBE4C\uB354 */\nexport function getTriggerClass(options: {\n  size?: ComponentSize;\n  disabled?: boolean;\n  inset?: boolean;\n  class?: string;\n}): string {\n  return twMerge(\n    triggerBaseClass,\n    \"px-2 py-1\",\n    options.size && triggerSizeClasses[options.size],\n    options.disabled && triggerDisabledClass,\n    options.inset && triggerInsetClass,\n    options.class,\n  );\n}\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,eAAmC,WAAW,iBAAiB;AACxE,SAAS,WAAW,6BAA6B;AAE1C,MAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,uBAAuB;AAAA,EAClC;AACF;AAEO,MAAM,oBAAoB,KAAK,WAAW,kBAAkB,qBAAqB;AAEjF,MAAM,qBAAoD;AAAA,EAC/D,IAAI,KAAK,WAAW,SAAS;AAAA,EAC7B,IAAI,KAAK,SAAS,SAAS;AAC7B;AAEO,MAAM,sBAAsB,KAAK,cAAc,mBAAmB;AAGlE,SAAS,gBAAgB,SAKrB;AACT,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,QAAQ,QAAQ,mBAAmB,QAAQ,IAAI;AAAA,IAC/C,QAAQ,YAAY;AAAA,IACpB,QAAQ,SAAS;AAAA,IACjB,QAAQ;AAAA,EACV;AACF;",
+  "names": []
+}

package/dist/components/form-control/ThemeToggle.js

@@ -0,0 +1,57 @@
+import { splitProps, Switch, Match } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { IconSun, IconMoon, IconDeviceDesktop } from "@tabler/icons-solidjs";
+import { useTheme } from "../../providers/ThemeContext";
+import { Icon } from "../display/Icon";
+import { ripple } from "../../directives/ripple";
+void ripple;
+const baseClass = clsx(
+  "inline-flex",
+  "items-center",
+  "justify-center",
+  "cursor-pointer",
+  "rounded",
+  "transition-colors",
+  "text-base-500 dark:text-base-400",
+  "hover:bg-base-200 dark:hover:bg-base-700",
+  "focus:outline-none",
+  "focus-visible:ring-2"
+);
+const sizeClasses = {
+  sm: clsx("p-1"),
+  lg: clsx("p-2")
+};
+const iconSizes = {
+  sm: "1em",
+  lg: "1.5em"
+};
+const modeLabels = {
+  light: "\uB77C\uC774\uD2B8 \uBAA8\uB4DC",
+  system: "\uC2DC\uC2A4\uD15C \uC124\uC815",
+  dark: "\uB2E4\uD06C \uBAA8\uB4DC"
+};
+const ThemeToggle = (props) => {
+  const [local, rest] = splitProps(props, ["class", "size"]);
+  const { mode, cycleMode } = useTheme();
+  const getClassName = () => twMerge(baseClass, "p-1.5", local.size && sizeClasses[local.size], local.class);
+  const iconSize = () => local.size ? iconSizes[local.size] : "1.25em";
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ...rest,
+      "data-theme-toggle": true,
+      "use:ripple": true,
+      type: "button",
+      class: getClassName(),
+      onClick: cycleMode,
+      title: modeLabels[mode()],
+      "aria-label": modeLabels[mode()]
+    },
+    /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, { when: mode() === "light" }, /* @__PURE__ */ React.createElement(Icon, { icon: IconSun, size: iconSize() })), /* @__PURE__ */ React.createElement(Match, { when: mode() === "system" }, /* @__PURE__ */ React.createElement(Icon, { icon: IconDeviceDesktop, size: iconSize() })), /* @__PURE__ */ React.createElement(Match, { when: mode() === "dark" }, /* @__PURE__ */ React.createElement(Icon, { icon: IconMoon, size: iconSize() })))
+  );
+};
+export {
+  ThemeToggle
+};
+//# sourceMappingURL=ThemeToggle.js.map

package/dist/components/form-control/ThemeToggle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/form-control/ThemeToggle.tsx"],
+  "sourcesContent": ["import { type Component, type JSX, splitProps, Switch, Match } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { IconSun, IconMoon, IconDeviceDesktop } from \"@tabler/icons-solidjs\";\nimport { useTheme, type ThemeMode } from \"../../providers/ThemeContext\";\nimport { Icon } from \"../display/Icon\";\nimport { ripple } from \"../../directives/ripple\";\n\nvoid ripple;\n\nconst baseClass = clsx(\n  \"inline-flex\",\n  \"items-center\",\n  \"justify-center\",\n  \"cursor-pointer\",\n  \"rounded\",\n  \"transition-colors\",\n  \"text-base-500 dark:text-base-400\",\n  \"hover:bg-base-200 dark:hover:bg-base-700\",\n  \"focus:outline-none\",\n  \"focus-visible:ring-2\",\n);\n\nconst sizeClasses: Record<\"sm\" | \"lg\", string> = {\n  sm: clsx(\"p-1\"),\n  lg: clsx(\"p-2\"),\n};\n\nconst iconSizes: Record<\"sm\" | \"lg\", string> = {\n  sm: \"1em\",\n  lg: \"1.5em\",\n};\n\nconst modeLabels: Record<ThemeMode, string> = {\n  light: \"\uB77C\uC774\uD2B8 \uBAA8\uB4DC\",\n  system: \"\uC2DC\uC2A4\uD15C \uC124\uC815\",\n  dark: \"\uB2E4\uD06C \uBAA8\uB4DC\",\n};\n\nexport interface ThemeToggleProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  /** \uBC84\uD2BC \uD06C\uAE30 */\n  size?: \"sm\" | \"lg\";\n}\n\n/**\n * \uD14C\uB9C8 \uD1A0\uAE00 \uBC84\uD2BC \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @remarks\n * - ThemeProvider \uB0B4\uBD80\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD568\n * - \uD074\uB9AD \uC2DC light \u2192 system \u2192 dark \u2192 light \uC21C\uD658\n * - \uD604\uC7AC \uBAA8\uB4DC\uC5D0 \uB9DE\uB294 \uC544\uC774\uCF58 \uD45C\uC2DC (\u2600\uFE0F / \uD83D\uDCBB / \uD83C\uDF19)\n *\n * @example\n * ```tsx\n * // \uAE30\uBCF8 \uC0AC\uC6A9\n * <ThemeToggle />\n *\n * // \uD06C\uAE30 \uC870\uC808\n * <ThemeToggle size=\"sm\" />\n * <ThemeToggle size=\"lg\" />\n * ```\n */\nexport const ThemeToggle: Component<ThemeToggleProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"size\"]);\n\n  const { mode, cycleMode } = useTheme();\n\n  const getClassName = () => twMerge(baseClass, \"p-1.5\", local.size && sizeClasses[local.size], local.class);\n\n  const iconSize = () => (local.size ? iconSizes[local.size] : \"1.25em\");\n\n  return (\n    <button\n      {...rest}\n      data-theme-toggle\n      use:ripple\n      type=\"button\"\n      class={getClassName()}\n      onClick={cycleMode}\n      title={modeLabels[mode()]}\n      aria-label={modeLabels[mode()]}\n    >\n      <Switch>\n        <Match when={mode() === \"light\"}>\n          <Icon icon={IconSun} size={iconSize()} />\n        </Match>\n        <Match when={mode() === \"system\"}>\n          <Icon icon={IconDeviceDesktop} size={iconSize()} />\n        </Match>\n        <Match when={mode() === \"dark\"}>\n          <Icon icon={IconMoon} size={iconSize()} />\n        </Match>\n      </Switch>\n    </button>\n  );\n};\n"],
+  "mappings": "AAAA,SAAmC,YAAY,QAAQ,aAAa;AACpE,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,SAAS,UAAU,yBAAyB;AACrD,SAAS,gBAAgC;AACzC,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,KAAK;AAEL,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,cAA2C;AAAA,EAC/C,IAAI,KAAK,KAAK;AAAA,EACd,IAAI,KAAK,KAAK;AAChB;AAEA,MAAM,YAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AAyBO,MAAM,cAA2C,CAAC,UAAU;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,MAAM,CAAC;AAEzD,QAAM,EAAE,MAAM,UAAU,IAAI,SAAS;AAErC,QAAM,eAAe,MAAM,QAAQ,WAAW,SAAS,MAAM,QAAQ,YAAY,MAAM,IAAI,GAAG,MAAM,KAAK;AAEzG,QAAM,WAAW,MAAO,MAAM,OAAO,UAAU,MAAM,IAAI,IAAI;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,qBAAiB;AAAA,MACjB,cAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAO,aAAa;AAAA,MACpB,SAAS;AAAA,MACT,OAAO,WAAW,KAAK,CAAC;AAAA,MACxB,cAAY,WAAW,KAAK,CAAC;AAAA;AAAA,IAE7B,oCAAC,cACC,oCAAC,SAAM,MAAM,KAAK,MAAM,WACtB,oCAAC,QAAK,MAAM,SAAS,MAAM,SAAS,GAAG,CACzC,GACA,oCAAC,SAAM,MAAM,KAAK,MAAM,YACtB,oCAAC,QAAK,MAAM,mBAAmB,MAAM,SAAS,GAAG,CACnD,GACA,oCAAC,SAAM,MAAM,KAAK,MAAM,UACtB,oCAAC,QAAK,MAAM,UAAU,MAAM,SAAS,GAAG,CAC1C,CACF;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/components/form-control/checkbox/Checkbox.js

@@ -0,0 +1,78 @@
+import { Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { IconCheck } from "@tabler/icons-solidjs";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { ripple } from "../../../directives/ripple";
+import { Icon } from "../../display/Icon";
+import {
+  checkboxBaseClass,
+  indicatorBaseClass,
+  themeCheckedClasses,
+  checkboxSizeClasses,
+  checkboxInsetClass,
+  checkboxInsetSizeHeightClasses,
+  checkboxInlineClass,
+  checkboxDisabledClass
+} from "./Checkbox.styles";
+void ripple;
+const Checkbox = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "disabled",
+    "size",
+    "theme",
+    "inset",
+    "inline",
+    "class",
+    "style",
+    "children"
+  ]);
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value ?? false,
+    onChange: () => local.onValueChange
+  });
+  const handleClick = () => {
+    if (local.disabled) return;
+    setValue((v) => !v);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === " ") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+  const getWrapperClass = () => twMerge(
+    checkboxBaseClass,
+    local.size && checkboxSizeClasses[local.size],
+    local.inset && checkboxInsetClass,
+    local.inset && local.size && checkboxInsetSizeHeightClasses[local.size],
+    local.inline && checkboxInlineClass,
+    local.disabled && checkboxDisabledClass,
+    local.class
+  );
+  const getIndicatorClass = () => {
+    const theme = local.theme ?? "primary";
+    return twMerge(indicatorBaseClass, "rounded-sm", value() && themeCheckedClasses[theme]);
+  };
+  return /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      ...rest,
+      "use:ripple": !local.disabled,
+      role: "checkbox",
+      "aria-checked": value(),
+      tabIndex: local.disabled ? -1 : 0,
+      class: getWrapperClass(),
+      style: local.style,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown
+    },
+    /* @__PURE__ */ React.createElement("div", { class: getIndicatorClass() }, /* @__PURE__ */ React.createElement(Show, { when: value() }, /* @__PURE__ */ React.createElement(Icon, { icon: IconCheck, size: "1em" }))),
+    /* @__PURE__ */ React.createElement(Show, { when: local.children }, /* @__PURE__ */ React.createElement("span", null, local.children))
+  );
+};
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/form-control/checkbox/Checkbox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/checkbox/Checkbox.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, Show, splitProps } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { IconCheck } from \"@tabler/icons-solidjs\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { ripple } from \"../../../directives/ripple\";\nimport { Icon } from \"../../display/Icon\";\nimport {\n  type CheckboxTheme,\n  type CheckboxSize,\n  checkboxBaseClass,\n  indicatorBaseClass,\n  themeCheckedClasses,\n  checkboxSizeClasses,\n  checkboxInsetClass,\n  checkboxInsetSizeHeightClasses,\n  checkboxInlineClass,\n  checkboxDisabledClass,\n} from \"./Checkbox.styles\";\n\n// Directive \uC0AC\uC6A9 \uC120\uC5B8 (TypeScript\uC6A9)\nvoid ripple;\n\nexport interface CheckboxProps {\n  value?: boolean;\n  onValueChange?: (value: boolean) => void;\n  disabled?: boolean;\n  size?: CheckboxSize;\n  theme?: CheckboxTheme;\n  inset?: boolean;\n  inline?: boolean;\n  class?: string;\n  style?: JSX.CSSProperties;\n  children?: JSX.Element;\n}\n\nexport const Checkbox: ParentComponent<CheckboxProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"disabled\",\n    \"size\",\n    \"theme\",\n    \"inset\",\n    \"inline\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value ?? false,\n    onChange: () => local.onValueChange,\n  });\n\n  const handleClick = () => {\n    if (local.disabled) return;\n    setValue((v) => !v);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \" \") {\n      e.preventDefault();\n      handleClick();\n    }\n  };\n\n  const getWrapperClass = () =>\n    twMerge(\n      checkboxBaseClass,\n      local.size && checkboxSizeClasses[local.size],\n      local.inset && checkboxInsetClass,\n      local.inset && local.size && checkboxInsetSizeHeightClasses[local.size],\n      local.inline && checkboxInlineClass,\n      local.disabled && checkboxDisabledClass,\n      local.class,\n    );\n\n  const getIndicatorClass = () => {\n    const theme = local.theme ?? \"primary\";\n\n    return twMerge(indicatorBaseClass, \"rounded-sm\", value() && themeCheckedClasses[theme]);\n  };\n\n  return (\n    <label\n      {...rest}\n      use:ripple={!local.disabled}\n      role=\"checkbox\"\n      aria-checked={value()}\n      tabIndex={local.disabled ? -1 : 0}\n      class={getWrapperClass()}\n      style={local.style}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n    >\n      <div class={getIndicatorClass()}>\n        <Show when={value()}>\n          <Icon icon={IconCheck} size=\"1em\" />\n        </Show>\n      </div>\n      <Show when={local.children}>\n        <span>{local.children}</span>\n      </Show>\n    </label>\n  );\n};\n"],
+  "mappings": "AAAA,SAAyC,MAAM,kBAAkB;AACjE,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,gCAAgC;AACzC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,KAAK;AAeE,MAAM,WAA2C,CAAC,UAAU;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,OAAO,QAAQ,IAAI,yBAAyB;AAAA,IACjD,OAAO,MAAM,MAAM,SAAS;AAAA,IAC5B,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAED,QAAM,cAAc,MAAM;AACxB,QAAI,MAAM,SAAU;AACpB,aAAS,CAAC,MAAM,CAAC,CAAC;AAAA,EACpB;AAEA,QAAM,gBAAgB,CAAC,MAAqB;AAC1C,QAAI,EAAE,QAAQ,KAAK;AACjB,QAAE,eAAe;AACjB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,kBAAkB,MACtB;AAAA,IACE;AAAA,IACA,MAAM,QAAQ,oBAAoB,MAAM,IAAI;AAAA,IAC5C,MAAM,SAAS;AAAA,IACf,MAAM,SAAS,MAAM,QAAQ,+BAA+B,MAAM,IAAI;AAAA,IACtE,MAAM,UAAU;AAAA,IAChB,MAAM,YAAY;AAAA,IAClB,MAAM;AAAA,EACR;AAEF,QAAM,oBAAoB,MAAM;AAC9B,UAAM,QAAQ,MAAM,SAAS;AAE7B,WAAO,QAAQ,oBAAoB,cAAc,MAAM,KAAK,oBAAoB,KAAK,CAAC;AAAA,EACxF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,CAAC,MAAM;AAAA,MACnB,MAAK;AAAA,MACL,gBAAc,MAAM;AAAA,MACpB,UAAU,MAAM,WAAW,KAAK;AAAA,MAChC,OAAO,gBAAgB;AAAA,MACvB,OAAO,MAAM;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA;AAAA,IAEX,oCAAC,SAAI,OAAO,kBAAkB,KAC5B,oCAAC,QAAK,MAAM,MAAM,KAChB,oCAAC,QAAK,MAAM,WAAW,MAAK,OAAM,CACpC,CACF;AAAA,IACA,oCAAC,QAAK,MAAM,MAAM,YAChB,oCAAC,cAAM,MAAM,QAAS,CACxB;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/components/form-control/checkbox/Checkbox.styles.js

@@ -0,0 +1,57 @@
+import clsx from "clsx";
+import {
+  bgSurface,
+  borderDefault,
+  disabledOpacity,
+  paddingLg,
+  paddingSm
+} from "../../../styles/tokens.styles";
+import { insetBase, insetFocusOutlineSelf } from "../../../styles/patterns.styles";
+const checkboxBaseClass = clsx(
+  "inline-flex items-center gap-2",
+  "whitespace-nowrap",
+  "cursor-pointer",
+  "px-2 py-1",
+  "h-field",
+  "border border-transparent",
+  "rounded",
+  "focus:outline-none",
+  "focus-visible:ring-2"
+);
+const indicatorBaseClass = clsx(
+  "flex shrink-0 items-center justify-center",
+  "size-4",
+  "border",
+  borderDefault,
+  bgSurface,
+  "transition-colors"
+);
+const themeCheckedClasses = {
+  primary: clsx("border-primary-500 bg-primary-500", "text-white"),
+  info: clsx("border-info-500 bg-info-500", "text-white"),
+  success: clsx("border-success-500 bg-success-500", "text-white"),
+  warning: clsx("border-warning-500 bg-warning-500", "text-white"),
+  danger: clsx("border-danger-500 bg-danger-500", "text-white")
+};
+const checkboxSizeClasses = {
+  sm: clsx("h-field-sm", paddingSm),
+  lg: clsx("h-field-lg", paddingLg)
+};
+const checkboxInsetClass = clsx("h-field-inset justify-center bg-transparent", insetBase, insetFocusOutlineSelf);
+const checkboxInsetSizeHeightClasses = {
+  sm: "h-field-inset-sm",
+  lg: "h-field-inset-lg"
+};
+const checkboxInlineClass = clsx("!h-auto", "!p-0", "gap-1");
+const checkboxDisabledClass = disabledOpacity;
+export {
+  checkboxBaseClass,
+  checkboxDisabledClass,
+  checkboxInlineClass,
+  checkboxInsetClass,
+  checkboxInsetSizeHeightClasses,
+  checkboxSizeClasses,
+  indicatorBaseClass,
+  themeCheckedClasses
+};
+//# sourceMappingURL=Checkbox.styles.js.map

package/dist/components/form-control/checkbox/Checkbox.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/checkbox/Checkbox.styles.ts"],
+  "sourcesContent": ["import clsx from \"clsx\";\nimport {\n  bgSurface,\n  borderDefault,\n  type ComponentSize,\n  disabledOpacity,\n  paddingLg,\n  paddingSm,\n} from \"../../../styles/tokens.styles\";\nimport { insetBase, insetFocusOutlineSelf } from \"../../../styles/patterns.styles\";\n\nexport type CheckboxTheme = \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\";\nexport type CheckboxSize = ComponentSize;\n\n// wrapper \uAE30\uBCF8 \uC2A4\uD0C0\uC77C\nexport const checkboxBaseClass = clsx(\n  \"inline-flex items-center gap-2\",\n  \"whitespace-nowrap\",\n  \"cursor-pointer\",\n  \"px-2 py-1\",\n  \"h-field\",\n  \"border border-transparent\",\n  \"rounded\",\n  \"focus:outline-none\",\n  \"focus-visible:ring-2\",\n);\n\n// \uC778\uB514\uCF00\uC774\uD130 \uAE30\uBCF8 \uC2A4\uD0C0\uC77C\nexport const indicatorBaseClass = clsx(\n  \"flex shrink-0 items-center justify-center\",\n  \"size-4\",\n  \"border\",\n  borderDefault,\n  bgSurface,\n  \"transition-colors\",\n);\n\n// \uD14C\uB9C8\uBCC4 \uCCB4\uD06C \uC0C1\uD0DC\nexport const themeCheckedClasses: Record<CheckboxTheme, string> = {\n  primary: clsx(\"border-primary-500 bg-primary-500\", \"text-white\"),\n  info: clsx(\"border-info-500 bg-info-500\", \"text-white\"),\n  success: clsx(\"border-success-500 bg-success-500\", \"text-white\"),\n  warning: clsx(\"border-warning-500 bg-warning-500\", \"text-white\"),\n  danger: clsx(\"border-danger-500 bg-danger-500\", \"text-white\"),\n};\n\n// \uC0AC\uC774\uC988\uBCC4 \uC2A4\uD0C0\uC77C\nexport const checkboxSizeClasses: Record<CheckboxSize, string> = {\n  sm: clsx(\"h-field-sm\", paddingSm),\n  lg: clsx(\"h-field-lg\", paddingLg),\n};\n\n// inset \uC2A4\uD0C0\uC77C\nexport const checkboxInsetClass = clsx(\"h-field-inset justify-center bg-transparent\", insetBase, insetFocusOutlineSelf);\n\n// inset \uC0AC\uC774\uC988\uBCC4 \uB192\uC774 (border 2px \uC81C\uC678)\nexport const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string> = {\n  sm: \"h-field-inset-sm\",\n  lg: \"h-field-inset-lg\",\n};\n\n// inline \uC2A4\uD0C0\uC77C\nexport const checkboxInlineClass = clsx(\"!h-auto\", \"!p-0\", \"gap-1\");\n\n// disabled \uC2A4\uD0C0\uC77C\nexport const checkboxDisabledClass = disabledOpacity;\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,6BAA6B;AAM1C,MAAM,oBAAoB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,qBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,sBAAqD;AAAA,EAChE,SAAS,KAAK,qCAAqC,YAAY;AAAA,EAC/D,MAAM,KAAK,+BAA+B,YAAY;AAAA,EACtD,SAAS,KAAK,qCAAqC,YAAY;AAAA,EAC/D,SAAS,KAAK,qCAAqC,YAAY;AAAA,EAC/D,QAAQ,KAAK,mCAAmC,YAAY;AAC9D;AAGO,MAAM,sBAAoD;AAAA,EAC/D,IAAI,KAAK,cAAc,SAAS;AAAA,EAChC,IAAI,KAAK,cAAc,SAAS;AAClC;AAGO,MAAM,qBAAqB,KAAK,+CAA+C,WAAW,qBAAqB;AAG/G,MAAM,iCAA+D;AAAA,EAC1E,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,sBAAsB,KAAK,WAAW,QAAQ,OAAO;AAG3D,MAAM,wBAAwB;",
+  "names": []
+}

package/dist/components/form-control/checkbox/CheckboxGroup.js

@@ -0,0 +1,65 @@
+import { createContext, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { Checkbox } from "./Checkbox";
+const CheckboxGroupContext = createContext();
+function CheckboxGroupItemInner(props) {
+  const ctx = useContext(CheckboxGroupContext);
+  if (!ctx) throw new Error("CheckboxGroup.Item\uC740 CheckboxGroup \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");
+  const isSelected = () => ctx.value().includes(props.value);
+  return /* @__PURE__ */ React.createElement(
+    Checkbox,
+    {
+      value: isSelected(),
+      onValueChange: () => ctx.toggle(props.value),
+      disabled: props.disabled ?? ctx.disabled(),
+      size: ctx.size(),
+      theme: ctx.theme(),
+      inline: ctx.inline(),
+      inset: ctx.inset()
+    },
+    props.children
+  );
+}
+const CheckboxGroupInner = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "disabled",
+    "size",
+    "theme",
+    "inline",
+    "inset",
+    "class",
+    "style",
+    "children"
+  ]);
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value ?? [],
+    onChange: () => local.onValueChange
+  });
+  const toggle = (item) => {
+    setValue((prev) => {
+      if (prev.includes(item)) {
+        return prev.filter((v) => v !== item);
+      }
+      return [...prev, item];
+    });
+  };
+  const contextValue = {
+    value,
+    toggle,
+    disabled: () => local.disabled ?? false,
+    size: () => local.size,
+    theme: () => local.theme,
+    inline: () => local.inline ?? false,
+    inset: () => local.inset ?? false
+  };
+  return /* @__PURE__ */ React.createElement(CheckboxGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement("div", { ...rest, class: twMerge("inline-flex", local.class), style: local.style }, local.children));
+};
+const CheckboxGroup = CheckboxGroupInner;
+CheckboxGroup.Item = CheckboxGroupItemInner;
+export {
+  CheckboxGroup
+};
+//# sourceMappingURL=CheckboxGroup.js.map