@simplysm/solid 13.0.0-beta.6

package/dist/components/display/Card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/display/Card.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport \"./Card.css\";\n\nexport interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {}\n\nconst baseClass = clsx(\n  \"block\",\n  \"bg-white dark:bg-base-800\",\n  \"rounded-lg\",\n  \"shadow focus-within:shadow-md hover:shadow-md\",\n  \"dark:shadow-black/20 dark:focus-within:shadow-black/30 dark:hover:shadow-black/30\",\n  \"transition-shadow duration-300\",\n  \"animate-card-in\",\n);\n\nexport const Card: ParentComponent<CardProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\"]);\n\n  return (\n    <div data-card class={twMerge(baseClass, local.class)} {...rest}>\n      {local.children}\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,SAAyC,kBAAkB;AAC3D,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,OAAO;AAIP,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,OAAmC,CAAC,UAAU;AACzD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,OAAO,CAAC;AAE7D,SACE,oCAAC,SAAI,aAAS,MAAC,OAAO,QAAQ,WAAW,MAAM,KAAK,GAAI,GAAG,QACxD,MAAM,QACT;AAEJ;",
+  "names": []
+}

package/dist/components/display/Echarts.js

@@ -0,0 +1,33 @@
+import { createEffect, onCleanup, splitProps } from "solid-js";
+import { createResizeObserver } from "@solid-primitives/resize-observer";
+import * as echarts from "echarts";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+const baseClass = clsx("block", "size-full");
+const Echarts = (props) => {
+  const [local, rest] = splitProps(props, ["option", "loading", "class"]);
+  let containerRef;
+  let chart;
+  createEffect(() => {
+    chart = echarts.init(containerRef, null, { renderer: "svg" });
+    onCleanup(() => chart.dispose());
+  });
+  createEffect(() => {
+    chart.setOption(local.option);
+  });
+  createEffect(() => {
+    if (local.loading) {
+      chart.showLoading();
+    } else {
+      chart.hideLoading();
+    }
+  });
+  createResizeObserver(containerRef, () => {
+    chart.resize();
+  });
+  return /* @__PURE__ */ React.createElement("div", { "data-echarts": true, ref: containerRef, class: twMerge(baseClass, local.class), ...rest });
+};
+export {
+  Echarts
+};
+//# sourceMappingURL=Echarts.js.map

package/dist/components/display/Echarts.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/display/Echarts.tsx"],
+  "sourcesContent": ["import { type Component, createEffect, onCleanup, splitProps, type JSX } from \"solid-js\";\nimport { createResizeObserver } from \"@solid-primitives/resize-observer\";\nimport * as echarts from \"echarts\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  option: echarts.EChartsOption;\n  loading?: boolean;\n}\n\nconst baseClass = clsx(\"block\", \"size-full\");\n\nexport const Echarts: Component<EchartsProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"option\", \"loading\", \"class\"]);\n  let containerRef!: HTMLDivElement;\n  let chart: echarts.EChartsType;\n\n  // \uB9C8\uC6B4\uD2B8 \uC2DC \uCC28\uD2B8 \uCD08\uAE30\uD654 + \uC5B8\uB9C8\uC6B4\uD2B8 \uC2DC \uC815\uB9AC\n  createEffect(() => {\n    chart = echarts.init(containerRef, null, { renderer: \"svg\" });\n    onCleanup(() => chart.dispose());\n  });\n\n  // option \uBCC0\uACBD \uAC10\uC9C0\n  createEffect(() => {\n    chart.setOption(local.option);\n  });\n\n  // loading \uC0C1\uD0DC \uBCC0\uACBD \uAC10\uC9C0\n  createEffect(() => {\n    if (local.loading) {\n      chart.showLoading();\n    } else {\n      chart.hideLoading();\n    }\n  });\n\n  // \uCEE8\uD14C\uC774\uB108 \uD06C\uAE30 \uBCC0\uACBD \uAC10\uC9C0\n  createResizeObserver(containerRef, () => {\n    chart.resize();\n  });\n\n  return <div data-echarts ref={containerRef} class={twMerge(baseClass, local.class)} {...rest} />;\n};\n"],
+  "mappings": "AAAA,SAAyB,cAAc,WAAW,kBAA4B;AAC9E,SAAS,4BAA4B;AACrC,YAAY,aAAa;AACzB,OAAO,UAAU;AACjB,SAAS,eAAe;AAOxB,MAAM,YAAY,KAAK,SAAS,WAAW;AAEpC,MAAM,UAAmC,CAAC,UAAU;AACzD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,UAAU,WAAW,OAAO,CAAC;AACtE,MAAI;AACJ,MAAI;AAGJ,eAAa,MAAM;AACjB,YAAQ,QAAQ,KAAK,cAAc,MAAM,EAAE,UAAU,MAAM,CAAC;AAC5D,cAAU,MAAM,MAAM,QAAQ,CAAC;AAAA,EACjC,CAAC;AAGD,eAAa,MAAM;AACjB,UAAM,UAAU,MAAM,MAAM;AAAA,EAC9B,CAAC;AAGD,eAAa,MAAM;AACjB,QAAI,MAAM,SAAS;AACjB,YAAM,YAAY;AAAA,IACpB,OAAO;AACL,YAAM,YAAY;AAAA,IACpB;AAAA,EACF,CAAC;AAGD,uBAAqB,cAAc,MAAM;AACvC,UAAM,OAAO;AAAA,EACf,CAAC;AAED,SAAO,oCAAC,SAAI,gBAAY,MAAC,KAAK,cAAc,OAAO,QAAQ,WAAW,MAAM,KAAK,GAAI,GAAG,MAAM;AAChG;",
+  "names": []
+}

package/dist/components/display/Icon.js

@@ -0,0 +1,10 @@
+import { splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+const Icon = (props) => {
+  const [local, rest] = splitProps(props, ["icon", "size"]);
+  return /* @__PURE__ */ React.createElement(Dynamic, { component: local.icon, "data-icon": true, size: local.size ?? "1.25em", ...rest });
+};
+export {
+  Icon
+};
+//# sourceMappingURL=Icon.js.map

package/dist/components/display/Icon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/display/Icon.tsx"],
+  "sourcesContent": ["import { type Component, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport type { IconProps as TablerIconProps } from \"@tabler/icons-solidjs\";\n\nexport interface IconProps extends Omit<TablerIconProps, \"size\"> {\n  icon: Component<TablerIconProps>;\n  size?: string | number;\n}\n\nexport const Icon: Component<IconProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"icon\", \"size\"]);\n  return <Dynamic component={local.icon} data-icon size={local.size ?? \"1.25em\"} {...rest} />;\n};\n"],
+  "mappings": "AAAA,SAAyB,kBAAkB;AAC3C,SAAS,eAAe;AAQjB,MAAM,OAA6B,CAAC,UAAU;AACnD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,QAAQ,MAAM,CAAC;AACxD,SAAO,oCAAC,WAAQ,WAAW,MAAM,MAAM,aAAS,MAAC,MAAM,MAAM,QAAQ,UAAW,GAAG,MAAM;AAC3F;",
+  "names": []
+}

package/dist/components/display/Tag.js

@@ -0,0 +1,20 @@
+import { splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { themeTokens } from "../../styles/tokens.styles";
+const baseClass = clsx("inline-block", "text-white", "px-1.5", "rounded-md");
+const themeClasses = Object.fromEntries(
+  Object.entries(themeTokens).map(([theme, t]) => [theme, t.solid])
+);
+const Tag = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "theme"]);
+  const getClassName = () => {
+    const theme = local.theme ?? "base";
+    return twMerge(baseClass, themeClasses[theme], local.class);
+  };
+  return /* @__PURE__ */ React.createElement("span", { "data-tag": true, class: getClassName(), ...rest }, local.children);
+};
+export {
+  Tag
+};
+//# sourceMappingURL=Tag.js.map

package/dist/components/display/Tag.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/display/Tag.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { type SemanticTheme, themeTokens } from \"../../styles/tokens.styles\";\n\nexport type TagTheme = SemanticTheme;\n\nexport interface TagProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  theme?: TagTheme;\n}\n\nconst baseClass = clsx(\"inline-block\", \"text-white\", \"px-1.5\", \"rounded-md\");\n\nconst themeClasses: Record<TagTheme, string> = Object.fromEntries(\n  Object.entries(themeTokens).map(([theme, t]) => [theme, t.solid]),\n) as Record<TagTheme, string>;\n\nexport const Tag: ParentComponent<TagProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"theme\"]);\n\n  const getClassName = () => {\n    const theme = local.theme ?? \"base\";\n    return twMerge(baseClass, themeClasses[theme], local.class);\n  };\n\n  return (\n    <span data-tag class={getClassName()} {...rest}>\n      {local.children}\n    </span>\n  );\n};\n"],
+  "mappings": "AAAA,SAAyC,kBAAkB;AAC3D,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAA6B,mBAAmB;AAQhD,MAAM,YAAY,KAAK,gBAAgB,cAAc,UAAU,YAAY;AAE3E,MAAM,eAAyC,OAAO;AAAA,EACpD,OAAO,QAAQ,WAAW,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC;AAClE;AAEO,MAAM,MAAiC,CAAC,UAAU;AACvD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAEtE,QAAM,eAAe,MAAM;AACzB,UAAM,QAAQ,MAAM,SAAS;AAC7B,WAAO,QAAQ,WAAW,aAAa,KAAK,GAAG,MAAM,KAAK;AAAA,EAC5D;AAEA,SACE,oCAAC,UAAK,YAAQ,MAAC,OAAO,aAAa,GAAI,GAAG,QACvC,MAAM,QACT;AAEJ;",
+  "names": []
+}

package/dist/components/feedback/Progress.js

@@ -0,0 +1,37 @@
+import { Show, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { themeTokens } from "../../styles/tokens.styles";
+const baseClass = clsx(
+  "relative block w-full",
+  "overflow-hidden",
+  "rounded",
+  "bg-base-200 dark:bg-base-700",
+  "border border-base-200 dark:border-base-700"
+);
+const sizeClasses = {
+  default: "py-1 px-2",
+  sm: "py-0.5 px-2",
+  lg: "py-2 px-3"
+};
+const insetClass = clsx("rounded-none", "border-0", "bg-transparent");
+const barThemeClasses = Object.fromEntries(
+  Object.entries(themeTokens).map(([theme, t]) => [theme, t.solid])
+);
+const Progress = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "theme", "size", "value", "inset"]);
+  const getClassName = () => {
+    const size = local.size ?? "default";
+    return twMerge(baseClass, sizeClasses[size], local.inset ? insetClass : void 0, local.class);
+  };
+  const getBarClassName = () => {
+    const theme = local.theme ?? "primary";
+    return clsx("absolute left-0 top-0 h-full", "z-[1]", "transition-all", barThemeClasses[theme]);
+  };
+  const getPercentText = () => (local.value * 100).toFixed(2) + "%";
+  return /* @__PURE__ */ React.createElement("div", { "data-progress": true, class: getClassName(), ...rest }, /* @__PURE__ */ React.createElement("div", { class: getBarClassName(), style: { width: getPercentText() } }), /* @__PURE__ */ React.createElement("div", { class: clsx("relative", "z-[2]", "text-right") }, /* @__PURE__ */ React.createElement(Show, { when: local.children, fallback: getPercentText() }, local.children)));
+};
+export {
+  Progress
+};
+//# sourceMappingURL=Progress.js.map

package/dist/components/feedback/Progress.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/feedback/Progress.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, Show, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { type SemanticTheme, themeTokens } from \"../../styles/tokens.styles\";\n\nexport type ProgressTheme = SemanticTheme;\nexport type ProgressSize = \"sm\" | \"lg\";\n\nexport interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  value: number;\n  theme?: ProgressTheme;\n  size?: ProgressSize;\n  inset?: boolean;\n}\n\nconst baseClass = clsx(\n  \"relative block w-full\",\n  \"overflow-hidden\",\n  \"rounded\",\n  \"bg-base-200 dark:bg-base-700\",\n  \"border border-base-200 dark:border-base-700\",\n);\n\nconst sizeClasses: Record<\"default\" | ProgressSize, string> = {\n  default: \"py-1 px-2\",\n  sm: \"py-0.5 px-2\",\n  lg: \"py-2 px-3\",\n};\n\nconst insetClass = clsx(\"rounded-none\", \"border-0\", \"bg-transparent\");\n\nconst barThemeClasses: Record<ProgressTheme, string> = Object.fromEntries(\n  Object.entries(themeTokens).map(([theme, t]) => [theme, t.solid]),\n) as Record<ProgressTheme, string>;\n\nexport const Progress: ParentComponent<ProgressProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"theme\", \"size\", \"value\", \"inset\"]);\n\n  const getClassName = () => {\n    const size = local.size ?? \"default\";\n    return twMerge(baseClass, sizeClasses[size], local.inset ? insetClass : undefined, local.class);\n  };\n\n  const getBarClassName = () => {\n    const theme = local.theme ?? \"primary\";\n    return clsx(\"absolute left-0 top-0 h-full\", \"z-[1]\", \"transition-all\", barThemeClasses[theme]);\n  };\n\n  const getPercentText = () => (local.value * 100).toFixed(2) + \"%\";\n\n  return (\n    <div data-progress class={getClassName()} {...rest}>\n      <div class={getBarClassName()} style={{ width: getPercentText() }} />\n      <div class={clsx(\"relative\", \"z-[2]\", \"text-right\")}>\n        <Show when={local.children} fallback={getPercentText()}>\n          {local.children}\n        </Show>\n      </div>\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,SAAyC,MAAM,kBAAkB;AACjE,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAA6B,mBAAmB;AAYhD,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,cAAwD;AAAA,EAC5D,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAa,KAAK,gBAAgB,YAAY,gBAAgB;AAEpE,MAAM,kBAAiD,OAAO;AAAA,EAC5D,OAAO,QAAQ,WAAW,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC;AAClE;AAEO,MAAM,WAA2C,CAAC,UAAU;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,SAAS,QAAQ,SAAS,OAAO,CAAC;AAEhG,QAAM,eAAe,MAAM;AACzB,UAAM,OAAO,MAAM,QAAQ;AAC3B,WAAO,QAAQ,WAAW,YAAY,IAAI,GAAG,MAAM,QAAQ,aAAa,QAAW,MAAM,KAAK;AAAA,EAChG;AAEA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,QAAQ,MAAM,SAAS;AAC7B,WAAO,KAAK,gCAAgC,SAAS,kBAAkB,gBAAgB,KAAK,CAAC;AAAA,EAC/F;AAEA,QAAM,iBAAiB,OAAO,MAAM,QAAQ,KAAK,QAAQ,CAAC,IAAI;AAE9D,SACE,oCAAC,SAAI,iBAAa,MAAC,OAAO,aAAa,GAAI,GAAG,QAC5C,oCAAC,SAAI,OAAO,gBAAgB,GAAG,OAAO,EAAE,OAAO,eAAe,EAAE,GAAG,GACnE,oCAAC,SAAI,OAAO,KAAK,YAAY,SAAS,YAAY,KAChD,oCAAC,QAAK,MAAM,MAAM,UAAU,UAAU,eAAe,KAClD,MAAM,QACT,CACF,CACF;AAEJ;",
+  "names": []
+}

package/dist/components/feedback/loading/LoadingContainer.js

@@ -0,0 +1,83 @@
+import { splitProps, createEffect, onCleanup, Show, useContext } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { LoadingContext } from "./LoadingContext";
+import { createMountTransition } from "../../../hooks/createMountTransition";
+import "./LoadingContainer.css";
+const baseClass = clsx("relative", "size-full", "min-h-[70px] min-w-[70px]", "overflow-auto");
+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");
+const LoadingContainer = (props) => {
+  const [local, rest] = splitProps(props, ["busy", "variant", "message", "progressPercent", "class", "children"]);
+  const loadingCtx = useContext(LoadingContext);
+  const currVariant = () => local.variant ?? (loadingCtx == null ? void 0 : loadingCtx.variant()) ?? "spinner";
+  const { mounted, animating, unmount } = createMountTransition(() => !!local.busy);
+  const handleTransitionEnd = (e) => {
+    if (e.propertyName !== "opacity") return;
+    if (!local.busy) {
+      unmount();
+    }
+  };
+  let containerRef;
+  createEffect(() => {
+    const handleKeyDownCapture = (e) => {
+      if (local.busy) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    containerRef.addEventListener("keydown", handleKeyDownCapture, { capture: true });
+    onCleanup(() => containerRef.removeEventListener("keydown", handleKeyDownCapture, { capture: true }));
+  });
+  const screenClass = () => clsx(screenBaseClass, animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0");
+  const rectClass = () => {
+    if (currVariant() !== "spinner") return "";
+    return clsx(
+      "transition-transform duration-100",
+      animating() ? "translate-y-0 ease-out" : "-translate-y-full ease-in"
+    );
+  };
+  return /* @__PURE__ */ React.createElement("div", { ref: containerRef, class: twMerge(baseClass, local.class), ...rest }, /* @__PURE__ */ React.createElement(Show, { when: mounted() }, /* @__PURE__ */ React.createElement("div", { class: screenClass(), onTransitionEnd: handleTransitionEnd }, /* @__PURE__ */ React.createElement("div", { class: rectClass() }, /* @__PURE__ */ React.createElement(Show, { when: currVariant() === "spinner" }, /* @__PURE__ */ React.createElement("div", { class: spinnerClass })), /* @__PURE__ */ React.createElement(Show, { when: currVariant() === "bar" && local.busy }, /* @__PURE__ */ React.createElement("div", { class: barIndicatorClass }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      class: clsx("absolute left-0 top-0 h-1 w-full origin-left", "bg-primary-500 dark:bg-primary-400"),
+      style: {
+        animation: "sd-busy-bar-before 2s infinite ease-in"
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      class: clsx("absolute left-0 top-0 h-1 w-full origin-left", "bg-white dark:bg-base-800"),
+      style: {
+        animation: "sd-busy-bar-after 2s infinite ease-out"
+      }
+    }
+  ))), /* @__PURE__ */ React.createElement(Show, { when: local.message }, /* @__PURE__ */ React.createElement("div", { class: messageClass }, /* @__PURE__ */ React.createElement("pre", { class: "m-0" }, local.message)))), /* @__PURE__ */ React.createElement(Show, { when: local.progressPercent != null }, /* @__PURE__ */ React.createElement("div", { class: progressTrackClass }, /* @__PURE__ */ React.createElement("div", { class: progressBarClass, style: { transform: `scaleX(${(local.progressPercent ?? 0) / 100})` } }))))), local.children);
+};
+export {
+  LoadingContainer
+};
+//# sourceMappingURL=LoadingContainer.js.map

package/dist/components/feedback/loading/LoadingContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/feedback/loading/LoadingContainer.tsx"],
+  "sourcesContent": ["import { type ParentComponent, type JSX, splitProps, createEffect, onCleanup, Show, useContext } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { LoadingContext, type LoadingVariant } from \"./LoadingContext\";\nimport { createMountTransition } from \"../../../hooks/createMountTransition\";\nimport \"./LoadingContainer.css\";\n\nexport interface LoadingContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  busy?: boolean;\n  variant?: LoadingVariant;\n  message?: string;\n  progressPercent?: number;\n  children?: JSX.Element;\n}\n\nconst baseClass = clsx(\"relative\", \"size-full\", \"min-h-[70px] min-w-[70px]\", \"overflow-auto\");\n\n// eslint-disable-next-line tailwindcss/enforces-shorthand -- inset\uC740 Chrome 87+\uC5D0\uC11C\uB9CC \uC9C0\uC6D0\nconst screenBaseClass = clsx(\n  \"absolute bottom-0 left-0 right-0 top-0\",\n  \"z-busy\",\n  \"bg-white/70 dark:bg-base-900/70\",\n  \"transition-opacity duration-150\",\n);\n\nconst spinnerClass = clsx(\n  \"size-8\",\n  \"border-[6px] border-base-200 border-b-primary-500\",\n  \"dark:border-base-700 dark:border-b-primary-400\",\n  \"rounded-full\",\n  \"animate-spin\",\n  \"shadow-md\",\n  \"mx-auto mt-5\",\n);\n\nconst messageClass = clsx(\"w-full\", \"text-center font-bold\", \"text-base-700 dark:text-base-200\");\n\nconst progressTrackClass = clsx(\"absolute left-0 top-0\", \"h-1 w-full\", \"bg-white dark:bg-base-800\");\n\nconst progressBarClass = clsx(\n  \"h-1 w-full\",\n  \"bg-primary-500 dark:bg-primary-400\",\n  \"transition-transform duration-100 ease-in\",\n  \"origin-left\",\n);\n\nconst barIndicatorClass = clsx(\"absolute left-0 top-0\", \"h-1 w-full\", \"bg-white dark:bg-base-800\");\n\nexport const LoadingContainer: ParentComponent<LoadingContainerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"busy\", \"variant\", \"message\", \"progressPercent\", \"class\", \"children\"]);\n\n  const loadingCtx = useContext(LoadingContext);\n  const currVariant = (): LoadingVariant => local.variant ?? loadingCtx?.variant() ?? \"spinner\";\n\n  // \uC560\uB2C8\uBA54\uC774\uC158 \uC0C1\uD0DC (mount transition)\n  const { mounted, animating, unmount } = createMountTransition(() => !!local.busy);\n\n  const handleTransitionEnd = (e: TransitionEvent) => {\n    if (e.propertyName !== \"opacity\") return;\n    if (!local.busy) {\n      unmount();\n    }\n  };\n\n  // \uD0A4\uBCF4\uB4DC \uC785\uB825 \uCC28\uB2E8 (\uCEA1\uCC98 \uB2E8\uACC4)\n  let containerRef!: HTMLDivElement;\n\n  createEffect(() => {\n    const handleKeyDownCapture = (e: KeyboardEvent) => {\n      if (local.busy) {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    };\n\n    containerRef.addEventListener(\"keydown\", handleKeyDownCapture, { capture: true });\n    onCleanup(() => containerRef.removeEventListener(\"keydown\", handleKeyDownCapture, { capture: true }));\n  });\n\n  const screenClass = () =>\n    clsx(screenBaseClass, animating() ? \"pointer-events-auto opacity-100\" : \"pointer-events-none opacity-0\");\n\n  // spinner: \uC2AC\uB77C\uC774\uB4DC \uB2E4\uC6B4 \uC560\uB2C8\uBA54\uC774\uC158\n  const rectClass = () => {\n    if (currVariant() !== \"spinner\") return \"\";\n    return clsx(\n      \"transition-transform duration-100\",\n      animating() ? \"translate-y-0 ease-out\" : \"-translate-y-full ease-in\",\n    );\n  };\n\n  return (\n    <div ref={containerRef} class={twMerge(baseClass, local.class)} {...rest}>\n      <Show when={mounted()}>\n        <div class={screenClass()} onTransitionEnd={handleTransitionEnd}>\n          <div class={rectClass()}>\n            <Show when={currVariant() === \"spinner\"}>\n              <div class={spinnerClass} />\n            </Show>\n            <Show when={currVariant() === \"bar\" && local.busy}>\n              <div class={barIndicatorClass}>\n                <div\n                  class={clsx(\"absolute left-0 top-0 h-1 w-full origin-left\", \"bg-primary-500 dark:bg-primary-400\")}\n                  style={{\n                    animation: \"sd-busy-bar-before 2s infinite ease-in\",\n                  }}\n                />\n                <div\n                  class={clsx(\"absolute left-0 top-0 h-1 w-full origin-left\", \"bg-white dark:bg-base-800\")}\n                  style={{\n                    animation: \"sd-busy-bar-after 2s infinite ease-out\",\n                  }}\n                />\n              </div>\n            </Show>\n            <Show when={local.message}>\n              <div class={messageClass}>\n                <pre class=\"m-0\">{local.message}</pre>\n              </div>\n            </Show>\n          </div>\n          <Show when={local.progressPercent != null}>\n            <div class={progressTrackClass}>\n              <div class={progressBarClass} style={{ transform: `scaleX(${(local.progressPercent ?? 0) / 100})` }} />\n            </div>\n          </Show>\n        </div>\n      </Show>\n      {local.children}\n    </div>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/feedback/loading/LoadingContext.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "solid-js";
+const LoadingContext = createContext();
+function useLoading() {
+  const context = useContext(LoadingContext);
+  if (!context) {
+    throw new Error("useLoading\uC740 LoadingProvider \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");
+  }
+  return context;
+}
+export {
+  LoadingContext,
+  useLoading
+};
+//# sourceMappingURL=LoadingContext.js.map

package/dist/components/feedback/loading/LoadingContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/feedback/loading/LoadingContext.ts"],
+  "sourcesContent": ["import { createContext, useContext, type Accessor } from \"solid-js\";\n\nexport type LoadingVariant = \"spinner\" | \"bar\";\n\nexport interface LoadingContextValue {\n  variant: Accessor<LoadingVariant>;\n  show: (message?: string) => void;\n  hide: () => void;\n  setProgress: (percent: number | undefined) => void;\n}\n\nexport const LoadingContext = createContext<LoadingContextValue>();\n\nexport function useLoading(): LoadingContextValue {\n  const context = useContext(LoadingContext);\n  if (!context) {\n    throw new Error(\"useLoading\uC740 LoadingProvider \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n  }\n  return context;\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAiC;AAWlD,MAAM,iBAAiB,cAAmC;AAE1D,SAAS,aAAkC;AAChD,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oHAA8C;AAAA,EAChE;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/components/feedback/loading/LoadingProvider.js

@@ -0,0 +1,47 @@
+import { createSignal } from "solid-js";
+import { Portal } from "solid-js/web";
+import clsx from "clsx";
+import { LoadingContext } from "./LoadingContext";
+import { LoadingContainer } from "./LoadingContainer";
+const overlayClass = clsx("fixed left-0 top-0", "h-screen w-screen", "overflow-hidden");
+const LoadingProvider = (props) => {
+  const [busyCount, setBusyCount] = createSignal(0);
+  const [message, setMessage] = createSignal();
+  const [progress, setProgress] = createSignal();
+  const variant = () => props.variant ?? "spinner";
+  const show = (msg) => {
+    setBusyCount((c) => c + 1);
+    if (msg !== void 0) {
+      setMessage(msg);
+    }
+  };
+  const hide = () => {
+    const newCount = Math.max(0, busyCount() - 1);
+    setBusyCount(newCount);
+    if (newCount <= 0) {
+      setMessage(void 0);
+      setProgress(void 0);
+    }
+  };
+  const contextValue = {
+    variant,
+    show,
+    hide,
+    setProgress: (percent) => setProgress(percent)
+  };
+  return /* @__PURE__ */ React.createElement(LoadingContext.Provider, { value: contextValue }, props.children, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(
+    LoadingContainer,
+    {
+      busy: busyCount() > 0,
+      variant: variant(),
+      message: message(),
+      progressPercent: progress(),
+      class: overlayClass,
+      style: { "pointer-events": busyCount() > 0 ? "auto" : "none" }
+    }
+  )));
+};
+export {
+  LoadingProvider
+};
+//# sourceMappingURL=LoadingProvider.js.map

package/dist/components/feedback/loading/LoadingProvider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/feedback/loading/LoadingProvider.tsx"],
+  "sourcesContent": ["import { type ParentComponent, createSignal } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport clsx from \"clsx\";\nimport { LoadingContext, type LoadingContextValue, type LoadingVariant } from \"./LoadingContext\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nconst overlayClass = clsx(\"fixed left-0 top-0\", \"h-screen w-screen\", \"overflow-hidden\");\n\nexport interface LoadingProviderProps {\n  variant?: LoadingVariant;\n}\n\nexport const LoadingProvider: ParentComponent<LoadingProviderProps> = (props) => {\n  const [busyCount, setBusyCount] = createSignal(0);\n  const [message, setMessage] = createSignal<string | undefined>();\n  const [progress, setProgress] = createSignal<number | undefined>();\n\n  const variant = (): LoadingVariant => props.variant ?? \"spinner\";\n\n  const show = (msg?: string): void => {\n    setBusyCount((c) => c + 1);\n    if (msg !== undefined) {\n      setMessage(msg);\n    }\n  };\n\n  const hide = (): void => {\n    const newCount = Math.max(0, busyCount() - 1);\n    setBusyCount(newCount);\n    if (newCount <= 0) {\n      setMessage(undefined);\n      setProgress(undefined);\n    }\n  };\n\n  const contextValue: LoadingContextValue = {\n    variant,\n    show,\n    hide,\n    setProgress: (percent: number | undefined) => setProgress(percent),\n  };\n\n  return (\n    <LoadingContext.Provider value={contextValue}>\n      {props.children}\n      <Portal>\n        <LoadingContainer\n          busy={busyCount() > 0}\n          variant={variant()}\n          message={message()}\n          progressPercent={progress()}\n          class={overlayClass}\n          style={{ \"pointer-events\": busyCount() > 0 ? \"auto\" : \"none\" }}\n        />\n      </Portal>\n    </LoadingContext.Provider>\n  );\n};\n"],
+  "mappings": "AAAA,SAA+B,oBAAoB;AACnD,SAAS,cAAc;AACvB,OAAO,UAAU;AACjB,SAAS,sBAAqE;AAC9E,SAAS,wBAAwB;AAEjC,MAAM,eAAe,KAAK,sBAAsB,qBAAqB,iBAAiB;AAM/E,MAAM,kBAAyD,CAAC,UAAU;AAC/E,QAAM,CAAC,WAAW,YAAY,IAAI,aAAa,CAAC;AAChD,QAAM,CAAC,SAAS,UAAU,IAAI,aAAiC;AAC/D,QAAM,CAAC,UAAU,WAAW,IAAI,aAAiC;AAEjE,QAAM,UAAU,MAAsB,MAAM,WAAW;AAEvD,QAAM,OAAO,CAAC,QAAuB;AACnC,iBAAa,CAAC,MAAM,IAAI,CAAC;AACzB,QAAI,QAAQ,QAAW;AACrB,iBAAW,GAAG;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,OAAO,MAAY;AACvB,UAAM,WAAW,KAAK,IAAI,GAAG,UAAU,IAAI,CAAC;AAC5C,iBAAa,QAAQ;AACrB,QAAI,YAAY,GAAG;AACjB,iBAAW,MAAS;AACpB,kBAAY,MAAS;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,eAAoC;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,CAAC,YAAgC,YAAY,OAAO;AAAA,EACnE;AAEA,SACE,oCAAC,eAAe,UAAf,EAAwB,OAAO,gBAC7B,MAAM,UACP,oCAAC,cACC;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,IAAI;AAAA,MACpB,SAAS,QAAQ;AAAA,MACjB,SAAS,QAAQ;AAAA,MACjB,iBAAiB,SAAS;AAAA,MAC1B,OAAO;AAAA,MACP,OAAO,EAAE,kBAAkB,UAAU,IAAI,IAAI,SAAS,OAAO;AAAA;AAAA,EAC/D,CACF,CACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,61 @@
+import { 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 { Icon } from "../../display/Icon";
+import { themeTokens } from "../../../styles/tokens.styles";
+const baseClass = clsx(
+  "fixed",
+  "top-4",
+  "right-4",
+  "z-50",
+  "flex",
+  "items-center",
+  "justify-between",
+  "gap-4",
+  "px-3",
+  "py-2",
+  "text-white",
+  "shadow-lg",
+  "dark:shadow-black/30",
+  "rounded-lg",
+  "max-w-sm"
+);
+const themeClasses = {
+  info: themeTokens.info.solid,
+  success: themeTokens.success.solid,
+  warning: themeTokens.warning.solid,
+  danger: themeTokens.danger.solid
+};
+const contentClass = clsx("flex flex-col", "gap-0.5");
+const messageClass = clsx("text-sm", "opacity-90");
+const actionsClass = clsx("flex items-center", "gap-2");
+const actionButtonClass = clsx("rounded", "bg-white/20", "px-3 py-1", "text-sm", "hover:bg-white/30");
+const dismissButtonClass = clsx("rounded", "p-1", "hover:bg-white/20");
+const NotificationBanner = () => {
+  const notification = useNotification();
+  const handleDismiss = () => {
+    notification.dismissBanner();
+  };
+  const handleAction = () => {
+    var _a;
+    const latest = notification.latestUnread();
+    (_a = latest == null ? void 0 : latest.action) == null ? void 0 : _a.onClick();
+  };
+  return /* @__PURE__ */ React.createElement(Show, { when: notification.latestUnread() }, (item) => /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-notification-banner": true,
+      "data-theme": item().theme,
+      role: "alert",
+      class: clsx(baseClass, themeClasses[item().theme])
+    },
+    /* @__PURE__ */ React.createElement("div", { class: contentClass }, /* @__PURE__ */ React.createElement("span", { class: "font-semibold" }, item().title), /* @__PURE__ */ React.createElement(Show, { when: item().message }, /* @__PURE__ */ React.createElement("span", { class: messageClass }, item().message))),
+    /* @__PURE__ */ React.createElement("div", { class: actionsClass }, /* @__PURE__ */ React.createElement(Show, { when: item().action }, /* @__PURE__ */ React.createElement("button", { type: "button", class: actionButtonClass, onClick: handleAction }, item().action.label)), /* @__PURE__ */ React.createElement("button", { type: "button", "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", class: dismissButtonClass, onClick: handleDismiss }, /* @__PURE__ */ React.createElement(Icon, { icon: IconX, size: "1.25em" })))
+  )));
+};
+export {
+  NotificationBanner
+};
+//# sourceMappingURL=NotificationBanner.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/feedback/notification/NotificationBanner.tsx"],
+  "sourcesContent": ["import { type Component, Show } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport clsx from \"clsx\";\nimport { IconX } from \"@tabler/icons-solidjs\";\nimport { useNotification } from \"./NotificationContext\";\nimport { Icon } from \"../../display/Icon\";\nimport { themeTokens } from \"../../../styles/tokens.styles\";\n\nconst baseClass = clsx(\n  \"fixed\",\n  \"top-4\",\n  \"right-4\",\n  \"z-50\",\n  \"flex\",\n  \"items-center\",\n  \"justify-between\",\n  \"gap-4\",\n  \"px-3\",\n  \"py-2\",\n  \"text-white\",\n  \"shadow-lg\",\n  \"dark:shadow-black/30\",\n  \"rounded-lg\",\n  \"max-w-sm\",\n);\n\nconst themeClasses: Record<string, string> = {\n  info: themeTokens.info.solid,\n  success: themeTokens.success.solid,\n  warning: themeTokens.warning.solid,\n  danger: themeTokens.danger.solid,\n};\n\nconst contentClass = clsx(\"flex flex-col\", \"gap-0.5\");\nconst messageClass = clsx(\"text-sm\", \"opacity-90\");\nconst actionsClass = clsx(\"flex items-center\", \"gap-2\");\nconst actionButtonClass = clsx(\"rounded\", \"bg-white/20\", \"px-3 py-1\", \"text-sm\", \"hover:bg-white/30\");\nconst dismissButtonClass = clsx(\"rounded\", \"p-1\", \"hover:bg-white/20\");\n\nexport const NotificationBanner: Component = () => {\n  const notification = useNotification();\n\n  const handleDismiss = () => {\n    notification.dismissBanner();\n  };\n\n  const handleAction = () => {\n    const latest = notification.latestUnread();\n    latest?.action?.onClick();\n  };\n\n  return (\n    <Show when={notification.latestUnread()}>\n      {(item) => (\n        <Portal>\n          <div\n            data-notification-banner\n            data-theme={item().theme}\n            role=\"alert\"\n            class={clsx(baseClass, themeClasses[item().theme])}\n          >\n            <div class={contentClass}>\n              <span class=\"font-semibold\">{item().title}</span>\n              <Show when={item().message}>\n                <span class={messageClass}>{item().message}</span>\n              </Show>\n            </div>\n            <div class={actionsClass}>\n              <Show when={item().action}>\n                <button type=\"button\" class={actionButtonClass} onClick={handleAction}>\n                  {item().action!.label}\n                </button>\n              </Show>\n              <button type=\"button\" aria-label=\"\uC54C\uB9BC \uB2EB\uAE30\" class={dismissButtonClass} onClick={handleDismiss}>\n                <Icon icon={IconX} size=\"1.25em\" />\n              </button>\n            </div>\n          </div>\n        </Portal>\n      )}\n    </Show>\n  );\n};\n"],
+  "mappings": "AAAA,SAAyB,YAAY;AACrC,SAAS,cAAc;AACvB,OAAO,UAAU;AACjB,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAE5B,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;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,eAAuC;AAAA,EAC3C,MAAM,YAAY,KAAK;AAAA,EACvB,SAAS,YAAY,QAAQ;AAAA,EAC7B,SAAS,YAAY,QAAQ;AAAA,EAC7B,QAAQ,YAAY,OAAO;AAC7B;AAEA,MAAM,eAAe,KAAK,iBAAiB,SAAS;AACpD,MAAM,eAAe,KAAK,WAAW,YAAY;AACjD,MAAM,eAAe,KAAK,qBAAqB,OAAO;AACtD,MAAM,oBAAoB,KAAK,WAAW,eAAe,aAAa,WAAW,mBAAmB;AACpG,MAAM,qBAAqB,KAAK,WAAW,OAAO,mBAAmB;AAE9D,MAAM,qBAAgC,MAAM;AACjD,QAAM,eAAe,gBAAgB;AAErC,QAAM,gBAAgB,MAAM;AAC1B,iBAAa,cAAc;AAAA,EAC7B;AAEA,QAAM,eAAe,MAAM;AA9C7B;AA+CI,UAAM,SAAS,aAAa,aAAa;AACzC,2CAAQ,WAAR,mBAAgB;AAAA,EAClB;AAEA,SACE,oCAAC,QAAK,MAAM,aAAa,aAAa,KACnC,CAAC,SACA,oCAAC,cACC;AAAA,IAAC;AAAA;AAAA,MACC,4BAAwB;AAAA,MACxB,cAAY,KAAK,EAAE;AAAA,MACnB,MAAK;AAAA,MACL,OAAO,KAAK,WAAW,aAAa,KAAK,EAAE,KAAK,CAAC;AAAA;AAAA,IAEjD,oCAAC,SAAI,OAAO,gBACV,oCAAC,UAAK,OAAM,mBAAiB,KAAK,EAAE,KAAM,GAC1C,oCAAC,QAAK,MAAM,KAAK,EAAE,WACjB,oCAAC,UAAK,OAAO,gBAAe,KAAK,EAAE,OAAQ,CAC7C,CACF;AAAA,IACA,oCAAC,SAAI,OAAO,gBACV,oCAAC,QAAK,MAAM,KAAK,EAAE,UACjB,oCAAC,YAAO,MAAK,UAAS,OAAO,mBAAmB,SAAS,gBACtD,KAAK,EAAE,OAAQ,KAClB,CACF,GACA,oCAAC,YAAO,MAAK,UAAS,cAAW,6BAAQ,OAAO,oBAAoB,SAAS,iBAC3E,oCAAC,QAAK,MAAM,OAAO,MAAK,UAAS,CACnC,CACF;AAAA,EACF,CACF,CAEJ;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,85 @@
+import { createSignal, For, Show } from "solid-js";
+import { IconBell } from "@tabler/icons-solidjs";
+import clsx from "clsx";
+import { useNotification } from "./NotificationContext";
+import { Dropdown } from "../../disclosure/Dropdown";
+import { Icon } from "../../display/Icon";
+import { NotificationBanner } from "./NotificationBanner";
+const buttonClass = clsx(
+  "relative",
+  "p-2",
+  "rounded-full",
+  "hover:bg-base-100",
+  "dark:hover:bg-base-700",
+  "transition-colors",
+  "focus:outline-none",
+  "focus-visible:ring-2",
+  "focus-visible:ring-primary-500"
+);
+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 = {
+  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"),
+  warning: clsx("border-l-warning-500", "bg-warning-50", "dark:bg-warning-900/10"),
+  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");
+const NotificationBell = (props) => {
+  const notification = useNotification();
+  const [open, setOpen] = createSignal(false);
+  let buttonRef;
+  const handleClear = () => {
+    notification.clear();
+    setOpen(false);
+  };
+  const handleOpenChange = (isOpen) => {
+    setOpen(isOpen);
+    if (isOpen) {
+      notification.markAllAsRead();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Show, { when: props.showBanner !== false }, /* @__PURE__ */ React.createElement(NotificationBanner, null)), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ref: (el) => buttonRef = el,
+      type: "button",
+      "data-notification-bell": true,
+      class: buttonClass,
+      "aria-label": `\uC54C\uB9BC ${notification.unreadCount()}\uAC1C`,
+      "aria-haspopup": "true",
+      "aria-expanded": open(),
+      onClick: () => handleOpenChange(!open())
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconBell }),
+    /* @__PURE__ */ React.createElement(Show, { when: notification.unreadCount() > 0 }, /* @__PURE__ */ React.createElement("span", { "data-notification-badge": true, "aria-hidden": "true", class: badgeClass }, notification.unreadCount()))
+  ), /* @__PURE__ */ React.createElement(Dropdown, { triggerRef: () => buttonRef, open: open(), onOpenChange: handleOpenChange, maxHeight: 400, class: "w-80" }, /* @__PURE__ */ React.createElement("div", { class: "p-2" }, /* @__PURE__ */ React.createElement("div", { class: dropdownHeaderClass }, /* @__PURE__ */ React.createElement("span", { class: "font-semibold" }, "\uC54C\uB9BC"), /* @__PURE__ */ React.createElement(Show, { when: notification.items().length > 0 }, /* @__PURE__ */ React.createElement("button", { type: "button", "data-notification-clear": true, class: clearButtonClass, onClick: handleClear }, "\uC804\uCCB4 \uC0AD\uC81C"))), /* @__PURE__ */ React.createElement(Show, { when: notification.items().length > 0, fallback: /* @__PURE__ */ React.createElement("div", { class: emptyClass }, "\uC54C\uB9BC\uC774 \uC5C6\uC2B5\uB2C8\uB2E4") }, /* @__PURE__ */ React.createElement("div", { class: listClass }, /* @__PURE__ */ React.createElement(For, { each: [...notification.items()].reverse() }, (item) => /* @__PURE__ */ React.createElement("div", { class: clsx(itemBaseClass, themeStyles[item.theme]) }, /* @__PURE__ */ React.createElement("div", { class: "font-medium" }, item.title), /* @__PURE__ */ React.createElement(Show, { when: item.message }, /* @__PURE__ */ React.createElement("div", { class: itemMessageClass }, item.message)), /* @__PURE__ */ React.createElement("div", { class: itemTimeClass }, item.createdAt.toLocaleTimeString()))))))));
+};
+export {
+  NotificationBell
+};
+//# sourceMappingURL=NotificationBell.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/feedback/notification/NotificationBell.tsx"],
+  "sourcesContent": ["import { type Component, createSignal, For, Show } from \"solid-js\";\nimport { IconBell } from \"@tabler/icons-solidjs\";\nimport clsx from \"clsx\";\nimport { useNotification } from \"./NotificationContext\";\nimport { Dropdown } from \"../../disclosure/Dropdown\";\nimport { Icon } from \"../../display/Icon\";\nimport { NotificationBanner } from \"./NotificationBanner\";\n\nexport interface NotificationBellProps {\n  showBanner?: boolean;\n}\n\nconst buttonClass = clsx(\n  \"relative\",\n  \"p-2\",\n  \"rounded-full\",\n  \"hover:bg-base-100\",\n  \"dark:hover:bg-base-700\",\n  \"transition-colors\",\n  \"focus:outline-none\",\n  \"focus-visible:ring-2\",\n  \"focus-visible:ring-primary-500\",\n);\n\nconst badgeClass = clsx(\n  \"absolute\",\n  \"top-0\",\n  \"right-0\",\n  \"flex\",\n  \"items-center\",\n  \"justify-center\",\n  \"w-5\",\n  \"h-5\",\n  \"px-1\",\n  \"text-xs\",\n  \"font-bold\",\n  \"text-white\",\n  \"bg-danger-500\",\n  \"rounded-full\",\n);\n\nconst themeStyles: Record<string, string> = {\n  info: clsx(\"border-l-info-500\", \"bg-info-50\", \"dark:bg-info-900/10\"),\n  success: clsx(\"border-l-success-500\", \"bg-success-50\", \"dark:bg-success-900/10\"),\n  warning: clsx(\"border-l-warning-500\", \"bg-warning-50\", \"dark:bg-warning-900/10\"),\n  danger: clsx(\"border-l-danger-500\", \"bg-danger-50\", \"dark:bg-danger-900/10\"),\n};\n\nconst dropdownHeaderClass = clsx(\"mb-2 flex items-center\", \"justify-between\", \"px-2\");\nconst clearButtonClass = clsx(\n  \"text-sm\",\n  \"text-base-500 hover:text-base-700\",\n  \"dark:text-base-400 dark:hover:text-base-300\",\n);\nconst emptyClass = clsx(\"py-8 text-center\", \"text-base-500 dark:text-base-400\");\nconst listClass = clsx(\"flex flex-col\", \"gap-2\");\nconst itemBaseClass = clsx(\"rounded-lg\", \"border-l-4\", \"p-2\");\nconst itemMessageClass = clsx(\"text-sm\", \"text-base-600 dark:text-base-400\");\nconst itemTimeClass = clsx(\"mt-1 text-xs\", \"text-base-400\");\n\nexport const NotificationBell: Component<NotificationBellProps> = (props) => {\n  const notification = useNotification();\n  const [open, setOpen] = createSignal(false);\n  let buttonRef: HTMLButtonElement | undefined;\n\n  const handleClear = () => {\n    notification.clear();\n    setOpen(false);\n  };\n\n  const handleOpenChange = (isOpen: boolean) => {\n    setOpen(isOpen);\n    if (isOpen) {\n      notification.markAllAsRead();\n    }\n  };\n\n  return (\n    <>\n      <Show when={props.showBanner !== false}>\n        <NotificationBanner />\n      </Show>\n\n      <button\n        ref={(el) => (buttonRef = el)}\n        type=\"button\"\n        data-notification-bell\n        class={buttonClass}\n        aria-label={`\uC54C\uB9BC ${notification.unreadCount()}\uAC1C`}\n        aria-haspopup=\"true\"\n        aria-expanded={open()}\n        onClick={() => handleOpenChange(!open())}\n      >\n        <Icon icon={IconBell} />\n        <Show when={notification.unreadCount() > 0}>\n          <span data-notification-badge aria-hidden=\"true\" class={badgeClass}>\n            {notification.unreadCount()}\n          </span>\n        </Show>\n      </button>\n\n      <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={handleOpenChange} maxHeight={400} class=\"w-80\">\n        <div class=\"p-2\">\n          <div class={dropdownHeaderClass}>\n            <span class=\"font-semibold\">\uC54C\uB9BC</span>\n            <Show when={notification.items().length > 0}>\n              <button type=\"button\" data-notification-clear class={clearButtonClass} onClick={handleClear}>\n                \uC804\uCCB4 \uC0AD\uC81C\n              </button>\n            </Show>\n          </div>\n\n          <Show when={notification.items().length > 0} fallback={<div class={emptyClass}>\uC54C\uB9BC\uC774 \uC5C6\uC2B5\uB2C8\uB2E4</div>}>\n            <div class={listClass}>\n              <For each={[...notification.items()].reverse()}>\n                {(item) => (\n                  <div class={clsx(itemBaseClass, themeStyles[item.theme])}>\n                    <div class=\"font-medium\">{item.title}</div>\n                    <Show when={item.message}>\n                      <div class={itemMessageClass}>{item.message}</div>\n                    </Show>\n                    <div class={itemTimeClass}>{item.createdAt.toLocaleTimeString()}</div>\n                  </div>\n                )}\n              </For>\n            </div>\n          </Show>\n        </div>\n      </Dropdown>\n    </>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "solid-js";
+const NotificationContext = createContext();
+function useNotification() {
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error("useNotification\uC740 NotificationProvider \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");
+  }
+  return context;
+}
+export {
+  NotificationContext,
+  useNotification
+};
+//# sourceMappingURL=NotificationContext.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/feedback/notification/NotificationContext.ts"],
+  "sourcesContent": ["import { createContext, useContext, type Accessor } from \"solid-js\";\n\nexport type NotificationTheme = \"info\" | \"success\" | \"warning\" | \"danger\";\n\nexport interface NotificationAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface NotificationItem {\n  id: string;\n  theme: NotificationTheme;\n  title: string;\n  message?: string;\n  action?: NotificationAction;\n  createdAt: Date;\n  read: boolean;\n}\n\nexport interface NotificationOptions {\n  action?: NotificationAction;\n}\n\nexport interface NotificationUpdateOptions {\n  renotify?: boolean;\n}\n\nexport interface NotificationContextValue {\n  // \uC0C1\uD0DC\n  items: Accessor<NotificationItem[]>;\n  unreadCount: Accessor<number>;\n  latestUnread: Accessor<NotificationItem | undefined>;\n\n  // \uC54C\uB9BC \uBC1C\uC0DD (id \uBC18\uD658)\n  info: (title: string, message?: string, options?: NotificationOptions) => string;\n  success: (title: string, message?: string, options?: NotificationOptions) => string;\n  warning: (title: string, message?: string, options?: NotificationOptions) => string;\n  danger: (title: string, message?: string, options?: NotificationOptions) => string;\n\n  // \uC54C\uB9BC \uC218\uC815\n  update: (\n    id: string,\n    updates: Partial<Pick<NotificationItem, \"title\" | \"message\" | \"theme\" | \"action\">>,\n    options?: NotificationUpdateOptions,\n  ) => void;\n\n  // \uC54C\uB9BC \uC0AD\uC81C\n  remove: (id: string) => void;\n\n  // \uAD00\uB9AC\n  markAsRead: (id: string) => void;\n  markAllAsRead: () => void;\n  dismissBanner: () => void;\n  clear: () => void;\n}\n\nexport const NotificationContext = createContext<NotificationContextValue>();\n\nexport function useNotification(): NotificationContextValue {\n  const context = useContext(NotificationContext);\n  if (!context) {\n    throw new Error(\"useNotification\uC740 NotificationProvider \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n  }\n  return context;\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAiC;AAwDlD,MAAM,sBAAsB,cAAwC;AAEpE,SAAS,kBAA4C;AAC1D,QAAM,UAAU,WAAW,mBAAmB;AAC9C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,8HAAwD;AAAA,EAC1E;AACA,SAAO;AACT;",
+  "names": []
+}