@simplysm/solid 13.0.0-beta.6

package/dist/components/form-control/state-preset/StatePreset.js

@@ -0,0 +1,195 @@
+import { createSignal, For, Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import clsx from "clsx";
+import { IconDeviceFloppy, IconStar, IconX } from "@tabler/icons-solidjs";
+import { objClone, objEqual } from "@simplysm/core-common";
+import { usePersisted } from "../../../hooks/usePersisted";
+import { useNotification } from "../../feedback/notification/NotificationContext";
+import { Icon } from "../../display/Icon";
+import { textPlaceholder } from "../../../styles/tokens.styles";
+const baseClass = clsx("inline-flex items-center gap-1.5", "flex-wrap");
+const chipClass = clsx(
+  "inline-flex items-center gap-1",
+  "rounded-full",
+  "bg-base-200 dark:bg-base-700",
+  "text-base-800 dark:text-base-200",
+  "cursor-default"
+);
+const chipDefaultClass = "px-3 py-1";
+const chipSizeClasses = {
+  sm: "px-2 py-0.5 text-sm",
+  lg: "px-4 py-2"
+};
+const chipNameBtnClass = clsx("cursor-pointer", "hover:underline", "focus:outline-none");
+const iconBtnClass = clsx(
+  "inline-flex items-center justify-center",
+  "rounded-full",
+  "cursor-pointer",
+  "transition-colors",
+  "focus:outline-none",
+  "hover:bg-base-300 dark:hover:bg-base-600"
+);
+const iconBtnDefaultClass = "p-0.5";
+const iconBtnSizeClasses = {
+  sm: "p-px",
+  lg: "p-1"
+};
+const starBtnClass = clsx(
+  "inline-flex items-center justify-center",
+  "rounded-full",
+  "cursor-pointer",
+  "transition-colors",
+  "focus:outline-none",
+  "text-warning-500",
+  "hover:bg-warning-100 dark:hover:bg-warning-900/40"
+);
+const starBtnDefaultClass = "p-1";
+const starBtnSizeClasses = {
+  sm: "p-0.5",
+  lg: "p-1.5"
+};
+const inputClass = clsx(
+  "rounded-full",
+  "bg-base-200 dark:bg-base-700",
+  "text-base-800 dark:text-base-200",
+  "border border-transparent",
+  "focus:ring-1 focus:ring-primary-400",
+  "focus:outline-none",
+  textPlaceholder
+);
+const inputDefaultClass = "px-3 py-1 w-24";
+const inputSizeClasses = {
+  sm: "px-2 py-0.5 w-20 text-sm",
+  lg: "px-4 py-2 w-32"
+};
+const iconSize = "0.85em";
+function StatePresetInner(props) {
+  const [local] = splitProps(props, ["presetKey", "value", "onValueChange", "size", "class", "style"]);
+  const notification = useNotification();
+  const [presets, setPresets] = usePersisted(`state-preset.${local.presetKey}`, []);
+  const [adding, setAdding] = createSignal(false);
+  const [inputValue, setInputValue] = createSignal("");
+  function handleStartAdd() {
+    setAdding(true);
+    setInputValue("");
+  }
+  function handleCancelAdd() {
+    setAdding(false);
+    setInputValue("");
+  }
+  function handleConfirmAdd() {
+    const name = inputValue().trim();
+    if (!name) {
+      handleCancelAdd();
+      return;
+    }
+    if (presets().some((p) => p.name === name)) {
+      notification.warning("\uC774\uB984 \uC911\uBCF5", "\uAC19\uC740 \uC774\uB984\uC758 \uD504\uB9AC\uC14B\uC774 \uC774\uBBF8 \uC874\uC7AC\uD569\uB2C8\uB2E4.");
+      return;
+    }
+    const newPreset = {
+      name,
+      state: objClone(local.value)
+    };
+    setPresets([...presets(), newPreset]);
+    notification.info("\uD504\uB9AC\uC14B \uC800\uC7A5", `"${name}" \uD504\uB9AC\uC14B\uC774 \uC800\uC7A5\uB418\uC5C8\uC2B5\uB2C8\uB2E4.`);
+    setAdding(false);
+    setInputValue("");
+  }
+  function handleRestore(preset) {
+    if (!objEqual(local.value, preset.state)) {
+      local.onValueChange(objClone(preset.state));
+    }
+  }
+  function handleOverwrite(index) {
+    const snapshot = [...presets()];
+    const presetName = snapshot[index].name;
+    const updated = snapshot.map((p, i) => i === index ? { ...p, state: objClone(local.value) } : p);
+    setPresets(updated);
+    const notiId = notification.info("\uD504\uB9AC\uC14B \uB36E\uC5B4\uC4F0\uAE30", `"${presetName}" \uD504\uB9AC\uC14B\uC774 \uD604\uC7AC \uC0C1\uD0DC\uB85C \uC5C5\uB370\uC774\uD2B8\uB418\uC5C8\uC2B5\uB2C8\uB2E4.`, {
+      action: {
+        label: "\uC2E4\uD589 \uCDE8\uC18C",
+        onClick: () => {
+          setPresets(snapshot);
+          notification.remove(notiId);
+        }
+      }
+    });
+  }
+  function handleDelete(index) {
+    const snapshot = [...presets()];
+    const presetName = snapshot[index].name;
+    const updated = snapshot.filter((_, i) => i !== index);
+    setPresets(updated);
+    const notiId = notification.info("\uD504\uB9AC\uC14B \uC0AD\uC81C", `"${presetName}" \uD504\uB9AC\uC14B\uC774 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.`, {
+      action: {
+        label: "\uC2E4\uD589 \uCDE8\uC18C",
+        onClick: () => {
+          setPresets(snapshot);
+          notification.remove(notiId);
+        }
+      }
+    });
+  }
+  function handleInputKeyDown(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleConfirmAdd();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancelAdd();
+    }
+  }
+  const containerClass = () => twMerge(baseClass, local.class);
+  const resolvedChipClass = () => twMerge(chipClass, local.size ? chipSizeClasses[local.size] : chipDefaultClass);
+  const resolvedIconBtnClass = () => twMerge(iconBtnClass, local.size ? iconBtnSizeClasses[local.size] : iconBtnDefaultClass);
+  const resolvedStarBtnClass = () => twMerge(starBtnClass, local.size ? starBtnSizeClasses[local.size] : starBtnDefaultClass);
+  const resolvedInputClass = () => twMerge(inputClass, local.size ? inputSizeClasses[local.size] : inputDefaultClass);
+  return /* @__PURE__ */ React.createElement("div", { class: containerClass(), style: local.style }, /* @__PURE__ */ React.createElement("button", { type: "button", class: resolvedStarBtnClass(), onClick: handleStartAdd, title: "\uD504\uB9AC\uC14B \uCD94\uAC00" }, /* @__PURE__ */ React.createElement(Icon, { icon: IconStar, size: iconSize })), /* @__PURE__ */ React.createElement(For, { each: presets() }, (preset, index) => /* @__PURE__ */ React.createElement("span", { class: resolvedChipClass() }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: chipNameBtnClass,
+      onClick: () => handleRestore(preset),
+      title: `"${preset.name}" \uD504\uB9AC\uC14B \uC801\uC6A9`
+    },
+    preset.name
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: resolvedIconBtnClass(),
+      onClick: () => handleOverwrite(index()),
+      title: "\uD604\uC7AC \uC0C1\uD0DC\uB85C \uB36E\uC5B4\uC4F0\uAE30"
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconDeviceFloppy, size: iconSize })
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      class: resolvedIconBtnClass(),
+      onClick: () => handleDelete(index()),
+      title: "\uD504\uB9AC\uC14B \uC0AD\uC81C"
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconX, size: iconSize })
+  ))), /* @__PURE__ */ React.createElement(Show, { when: adding() }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ref: (el) => {
+        requestAnimationFrame(() => el.focus());
+      },
+      type: "text",
+      class: resolvedInputClass(),
+      placeholder: "\uC774\uB984...",
+      value: inputValue(),
+      onInput: (e) => setInputValue(e.currentTarget.value),
+      onKeyDown: handleInputKeyDown,
+      onBlur: () => inputValue().trim() ? handleConfirmAdd() : handleCancelAdd()
+    }
+  )));
+}
+const StatePreset = StatePresetInner;
+export {
+  StatePreset
+};
+//# sourceMappingURL=StatePreset.js.map

package/dist/components/form-control/state-preset/StatePreset.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/state-preset/StatePreset.tsx"],
+  "sourcesContent": ["import { createSignal, For, Show, splitProps } from \"solid-js\";\nimport type { JSX } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport clsx from \"clsx\";\nimport { IconDeviceFloppy, IconStar, IconX } from \"@tabler/icons-solidjs\";\nimport { objClone, objEqual } from \"@simplysm/core-common\";\nimport { usePersisted } from \"../../../hooks/usePersisted\";\nimport { useNotification } from \"../../feedback/notification/NotificationContext\";\nimport { Icon } from \"../../display/Icon\";\nimport { textPlaceholder } from \"../../../styles/tokens.styles\";\nimport type { ComponentSize } from \"../../../styles/tokens.styles\";\n\n// \u2500\u2500 Types \u2500\u2500\n\ninterface StatePresetItem<T> {\n  name: string;\n  state: T;\n}\n\ntype StatePresetSize = ComponentSize;\n\nexport interface StatePresetProps<T> {\n  presetKey: string;\n  value: T;\n  onValueChange: (value: T) => void;\n  size?: StatePresetSize;\n  class?: string;\n  style?: JSX.CSSProperties;\n}\n\n// \u2500\u2500 Style constants \u2500\u2500\n\nconst baseClass = clsx(\"inline-flex items-center gap-1.5\", \"flex-wrap\");\n\nconst chipClass = clsx(\n  \"inline-flex items-center gap-1\",\n  \"rounded-full\",\n  \"bg-base-200 dark:bg-base-700\",\n  \"text-base-800 dark:text-base-200\",\n  \"cursor-default\",\n);\n\nconst chipDefaultClass = \"px-3 py-1\";\n\nconst chipSizeClasses: Record<StatePresetSize, string> = {\n  sm: \"px-2 py-0.5 text-sm\",\n  lg: \"px-4 py-2\",\n};\n\nconst chipNameBtnClass = clsx(\"cursor-pointer\", \"hover:underline\", \"focus:outline-none\");\n\nconst iconBtnClass = clsx(\n  \"inline-flex items-center justify-center\",\n  \"rounded-full\",\n  \"cursor-pointer\",\n  \"transition-colors\",\n  \"focus:outline-none\",\n  \"hover:bg-base-300 dark:hover:bg-base-600\",\n);\n\nconst iconBtnDefaultClass = \"p-0.5\";\n\nconst iconBtnSizeClasses: Record<StatePresetSize, string> = {\n  sm: \"p-px\",\n  lg: \"p-1\",\n};\n\nconst starBtnClass = clsx(\n  \"inline-flex items-center justify-center\",\n  \"rounded-full\",\n  \"cursor-pointer\",\n  \"transition-colors\",\n  \"focus:outline-none\",\n  \"text-warning-500\",\n  \"hover:bg-warning-100 dark:hover:bg-warning-900/40\",\n);\n\nconst starBtnDefaultClass = \"p-1\";\n\nconst starBtnSizeClasses: Record<StatePresetSize, string> = {\n  sm: \"p-0.5\",\n  lg: \"p-1.5\",\n};\n\nconst inputClass = clsx(\n  \"rounded-full\",\n  \"bg-base-200 dark:bg-base-700\",\n  \"text-base-800 dark:text-base-200\",\n  \"border border-transparent\",\n  \"focus:ring-1 focus:ring-primary-400\",\n  \"focus:outline-none\",\n  textPlaceholder,\n);\n\nconst inputDefaultClass = \"px-3 py-1 w-24\";\n\nconst inputSizeClasses: Record<StatePresetSize, string> = {\n  sm: \"px-2 py-0.5 w-20 text-sm\",\n  lg: \"px-4 py-2 w-32\",\n};\n\nconst iconSize = \"0.85em\";\n\n// \u2500\u2500 Component \u2500\u2500\n\nfunction StatePresetInner<T>(props: StatePresetProps<T>): JSX.Element {\n  const [local] = splitProps(props, [\"presetKey\", \"value\", \"onValueChange\", \"size\", \"class\", \"style\"]);\n\n  const notification = useNotification();\n\n  // presetKey\uB294 \uB9C8\uC6B4\uD2B8 \uC2DC \uD55C \uBC88\uB9CC \uC124\uC815\uB418\uB294 \uC2DD\uBCC4\uC790\uC774\uBBC0\uB85C \uC989\uC2DC \uD3C9\uAC00\uD558\uC5EC \uCEA1\uCC98\n  /* eslint-disable solid/reactivity */\n  const [presets, setPresets] = usePersisted<StatePresetItem<T>[]>(`state-preset.${local.presetKey}`, []);\n  /* eslint-enable solid/reactivity */\n  const [adding, setAdding] = createSignal(false);\n  const [inputValue, setInputValue] = createSignal(\"\");\n\n  // \u2500\u2500 Handlers \u2500\u2500\n\n  function handleStartAdd(): void {\n    setAdding(true);\n    setInputValue(\"\");\n  }\n\n  function handleCancelAdd(): void {\n    setAdding(false);\n    setInputValue(\"\");\n  }\n\n  function handleConfirmAdd(): void {\n    const name = inputValue().trim();\n    if (!name) {\n      handleCancelAdd();\n      return;\n    }\n\n    if (presets().some((p) => p.name === name)) {\n      notification.warning(\"\uC774\uB984 \uC911\uBCF5\", \"\uAC19\uC740 \uC774\uB984\uC758 \uD504\uB9AC\uC14B\uC774 \uC774\uBBF8 \uC874\uC7AC\uD569\uB2C8\uB2E4.\");\n      return;\n    }\n\n    const newPreset: StatePresetItem<T> = {\n      name,\n      state: objClone(local.value),\n    };\n    setPresets([...presets(), newPreset]);\n    notification.info(\"\uD504\uB9AC\uC14B \uC800\uC7A5\", `\"${name}\" \uD504\uB9AC\uC14B\uC774 \uC800\uC7A5\uB418\uC5C8\uC2B5\uB2C8\uB2E4.`);\n    setAdding(false);\n    setInputValue(\"\");\n  }\n\n  function handleRestore(preset: StatePresetItem<T>): void {\n    if (!objEqual(local.value, preset.state)) {\n      local.onValueChange(objClone(preset.state));\n    }\n  }\n\n  function handleOverwrite(index: number): void {\n    const snapshot = [...presets()];\n    const presetName = snapshot[index].name;\n\n    const updated = snapshot.map((p, i) => (i === index ? { ...p, state: objClone(local.value) } : p));\n    setPresets(updated);\n\n    const notiId = notification.info(\"\uD504\uB9AC\uC14B \uB36E\uC5B4\uC4F0\uAE30\", `\"${presetName}\" \uD504\uB9AC\uC14B\uC774 \uD604\uC7AC \uC0C1\uD0DC\uB85C \uC5C5\uB370\uC774\uD2B8\uB418\uC5C8\uC2B5\uB2C8\uB2E4.`, {\n      action: {\n        label: \"\uC2E4\uD589 \uCDE8\uC18C\",\n        onClick: () => {\n          setPresets(snapshot);\n          notification.remove(notiId);\n        },\n      },\n    });\n  }\n\n  function handleDelete(index: number): void {\n    const snapshot = [...presets()];\n    const presetName = snapshot[index].name;\n\n    const updated = snapshot.filter((_, i) => i !== index);\n    setPresets(updated);\n\n    const notiId = notification.info(\"\uD504\uB9AC\uC14B \uC0AD\uC81C\", `\"${presetName}\" \uD504\uB9AC\uC14B\uC774 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.`, {\n      action: {\n        label: \"\uC2E4\uD589 \uCDE8\uC18C\",\n        onClick: () => {\n          setPresets(snapshot);\n          notification.remove(notiId);\n        },\n      },\n    });\n  }\n\n  function handleInputKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"Enter\") {\n      e.preventDefault();\n      handleConfirmAdd();\n    } else if (e.key === \"Escape\") {\n      e.preventDefault();\n      handleCancelAdd();\n    }\n  }\n\n  // \u2500\u2500 Render \u2500\u2500\n\n  const containerClass = () => twMerge(baseClass, local.class);\n\n  const resolvedChipClass = () => twMerge(chipClass, local.size ? chipSizeClasses[local.size] : chipDefaultClass);\n\n  const resolvedIconBtnClass = () =>\n    twMerge(iconBtnClass, local.size ? iconBtnSizeClasses[local.size] : iconBtnDefaultClass);\n\n  const resolvedStarBtnClass = () =>\n    twMerge(starBtnClass, local.size ? starBtnSizeClasses[local.size] : starBtnDefaultClass);\n\n  const resolvedInputClass = () => twMerge(inputClass, local.size ? inputSizeClasses[local.size] : inputDefaultClass);\n\n  return (\n    <div class={containerClass()} style={local.style}>\n      {/* Star button - add preset */}\n      <button type=\"button\" class={resolvedStarBtnClass()} onClick={handleStartAdd} title=\"\uD504\uB9AC\uC14B \uCD94\uAC00\">\n        <Icon icon={IconStar} size={iconSize} />\n      </button>\n\n      {/* Preset chips */}\n      <For each={presets()}>\n        {(preset, index) => (\n          <span class={resolvedChipClass()}>\n            <button\n              type=\"button\"\n              class={chipNameBtnClass}\n              onClick={() => handleRestore(preset)}\n              title={`\"${preset.name}\" \uD504\uB9AC\uC14B \uC801\uC6A9`}\n            >\n              {preset.name}\n            </button>\n            <button\n              type=\"button\"\n              class={resolvedIconBtnClass()}\n              onClick={() => handleOverwrite(index())}\n              title=\"\uD604\uC7AC \uC0C1\uD0DC\uB85C \uB36E\uC5B4\uC4F0\uAE30\"\n            >\n              <Icon icon={IconDeviceFloppy} size={iconSize} />\n            </button>\n            <button\n              type=\"button\"\n              class={resolvedIconBtnClass()}\n              onClick={() => handleDelete(index())}\n              title=\"\uD504\uB9AC\uC14B \uC0AD\uC81C\"\n            >\n              <Icon icon={IconX} size={iconSize} />\n            </button>\n          </span>\n        )}\n      </For>\n\n      {/* Inline input for naming a new preset */}\n      <Show when={adding()}>\n        <input\n          ref={(el) => {\n            // Autofocus when input appears\n            requestAnimationFrame(() => el.focus());\n          }}\n          type=\"text\"\n          class={resolvedInputClass()}\n          placeholder=\"\uC774\uB984...\"\n          value={inputValue()}\n          onInput={(e) => setInputValue(e.currentTarget.value)}\n          onKeyDown={handleInputKeyDown}\n          onBlur={() => (inputValue().trim() ? handleConfirmAdd() : handleCancelAdd())}\n        />\n      </Show>\n    </div>\n  );\n}\n\nexport const StatePreset = StatePresetInner as <T>(props: StatePresetProps<T>) => JSX.Element;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/layout/FormGroup.js

@@ -0,0 +1,34 @@
+import { Show, splitProps, createContext, useContext } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+const FormGroupContext = createContext({ inline: false });
+const baseClass = clsx("inline-flex flex-col gap-2");
+const inlineClass = clsx("inline-flex flex-row flex-wrap items-center gap-2");
+const itemInlineClass = clsx("flex flex-row items-center");
+const FormGroupItem = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "label"]);
+  const ctx = useContext(FormGroupContext);
+  const getClassName = () => twMerge(ctx.inline ? itemInlineClass : void 0, local.class);
+  return /* @__PURE__ */ React.createElement("div", { class: getClassName(), "data-form-group-item": true, ...rest }, /* @__PURE__ */ React.createElement(Show, { when: local.label }, /* @__PURE__ */ React.createElement("label", { class: ctx.inline ? clsx("whitespace-nowrap font-bold", "pr-2") : "mb-1 block font-bold" }, local.label)), local.children);
+};
+const FormGroupBase = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "inline"]);
+  const getClassName = () => twMerge(local.inline ? inlineClass : baseClass, local.class);
+  return /* @__PURE__ */ React.createElement(
+    FormGroupContext.Provider,
+    {
+      value: {
+        get inline() {
+          return local.inline ?? false;
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { "data-form-group": true, class: getClassName(), ...rest }, local.children)
+  );
+};
+const FormGroup = FormGroupBase;
+FormGroup.Item = FormGroupItem;
+export {
+  FormGroup
+};
+//# sourceMappingURL=FormGroup.js.map

package/dist/components/layout/FormGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/layout/FormGroup.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, Show, splitProps, createContext, useContext } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport interface FormGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  inline?: boolean;\n}\n\nexport interface FormGroupItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  label?: JSX.Element;\n}\n\nconst FormGroupContext = createContext<{ inline: boolean }>({ inline: false });\n\nconst baseClass = clsx(\"inline-flex flex-col gap-2\");\nconst inlineClass = clsx(\"inline-flex flex-row flex-wrap items-center gap-2\");\n\nconst itemInlineClass = clsx(\"flex flex-row items-center\");\n\nconst FormGroupItem: ParentComponent<FormGroupItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"label\"]);\n  const ctx = useContext(FormGroupContext);\n\n  const getClassName = () => twMerge(ctx.inline ? itemInlineClass : undefined, local.class);\n\n  return (\n    <div class={getClassName()} data-form-group-item {...rest}>\n      <Show when={local.label}>\n        <label class={ctx.inline ? clsx(\"whitespace-nowrap font-bold\", \"pr-2\") : \"mb-1 block font-bold\"}>\n          {local.label}\n        </label>\n      </Show>\n      {local.children}\n    </div>\n  );\n};\n\ninterface FormGroupComponent extends ParentComponent<FormGroupProps> {\n  Item: typeof FormGroupItem;\n}\n\nconst FormGroupBase: ParentComponent<FormGroupProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"inline\"]);\n\n  const getClassName = () => twMerge(local.inline ? inlineClass : baseClass, local.class);\n\n  return (\n    <FormGroupContext.Provider\n      value={{\n        get inline() {\n          return local.inline ?? false;\n        },\n      }}\n    >\n      <div data-form-group class={getClassName()} {...rest}>\n        {local.children}\n      </div>\n    </FormGroupContext.Provider>\n  );\n};\n\nexport const FormGroup = FormGroupBase as FormGroupComponent;\nFormGroup.Item = FormGroupItem;\n"],
+  "mappings": "AAAA,SAAyC,MAAM,YAAY,eAAe,kBAAkB;AAC5F,OAAO,UAAU;AACjB,SAAS,eAAe;AAUxB,MAAM,mBAAmB,cAAmC,EAAE,QAAQ,MAAM,CAAC;AAE7E,MAAM,YAAY,KAAK,4BAA4B;AACnD,MAAM,cAAc,KAAK,mDAAmD;AAE5E,MAAM,kBAAkB,KAAK,4BAA4B;AAEzD,MAAM,gBAAqD,CAAC,UAAU;AACpE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AACtE,QAAM,MAAM,WAAW,gBAAgB;AAEvC,QAAM,eAAe,MAAM,QAAQ,IAAI,SAAS,kBAAkB,QAAW,MAAM,KAAK;AAExF,SACE,oCAAC,SAAI,OAAO,aAAa,GAAG,wBAAoB,MAAE,GAAG,QACnD,oCAAC,QAAK,MAAM,MAAM,SAChB,oCAAC,WAAM,OAAO,IAAI,SAAS,KAAK,+BAA+B,MAAM,IAAI,0BACtE,MAAM,KACT,CACF,GACC,MAAM,QACT;AAEJ;AAMA,MAAM,gBAAiD,CAAC,UAAU;AAChE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,QAAQ,CAAC;AAEvE,QAAM,eAAe,MAAM,QAAQ,MAAM,SAAS,cAAc,WAAW,MAAM,KAAK;AAEtF,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,OAAO;AAAA,QACL,IAAI,SAAS;AACX,iBAAO,MAAM,UAAU;AAAA,QACzB;AAAA,MACF;AAAA;AAAA,IAEA,oCAAC,SAAI,mBAAe,MAAC,OAAO,aAAa,GAAI,GAAG,QAC7C,MAAM,QACT;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY;AACzB,UAAU,OAAO;",
+  "names": []
+}

package/dist/components/layout/FormTable.js

@@ -0,0 +1,24 @@
+import { splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+const baseClass = clsx(
+  "border-separate border-spacing-0 border-0",
+  // 모든 셀: 수직 중앙, 오른쪽/아래 패딩
+  "[&_td]:align-middle [&_th]:align-middle",
+  "[&_td]:pr-1.5 [&_th]:pr-1.5",
+  "[&_td]:pb-1 [&_th]:pb-1",
+  // 행의 마지막 셀: 오른쪽 패딩 제거
+  "[&_tr>*:last-child]:pr-0",
+  // 마지막 행 셀: 아래 패딩 제거
+  "[&_tr:last-child>*]:pb-0",
+  // th: 오른쪽 정렬, 콘텐츠 너비, 줄바꿈 방지
+  "[&_th]:w-0 [&_th]:whitespace-nowrap [&_th]:pl-1 [&_th]:text-right"
+);
+const FormTable = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  return /* @__PURE__ */ React.createElement("table", { "data-form-table": true, class: twMerge(baseClass, local.class), ...rest }, local.children);
+};
+export {
+  FormTable
+};
+//# sourceMappingURL=FormTable.js.map

package/dist/components/layout/FormTable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/layout/FormTable.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport interface FormTableProps extends JSX.HTMLAttributes<HTMLTableElement> {}\n\nconst baseClass = clsx(\n  \"border-separate border-spacing-0 border-0\",\n  // \uBAA8\uB4E0 \uC140: \uC218\uC9C1 \uC911\uC559, \uC624\uB978\uCABD/\uC544\uB798 \uD328\uB529\n  \"[&_td]:align-middle [&_th]:align-middle\",\n  \"[&_td]:pr-1.5 [&_th]:pr-1.5\",\n  \"[&_td]:pb-1 [&_th]:pb-1\",\n  // \uD589\uC758 \uB9C8\uC9C0\uB9C9 \uC140: \uC624\uB978\uCABD \uD328\uB529 \uC81C\uAC70\n  \"[&_tr>*:last-child]:pr-0\",\n  // \uB9C8\uC9C0\uB9C9 \uD589 \uC140: \uC544\uB798 \uD328\uB529 \uC81C\uAC70\n  \"[&_tr:last-child>*]:pb-0\",\n  // th: \uC624\uB978\uCABD \uC815\uB82C, \uCF58\uD150\uCE20 \uB108\uBE44, \uC904\uBC14\uAFC8 \uBC29\uC9C0\n  \"[&_th]:w-0 [&_th]:whitespace-nowrap [&_th]:pl-1 [&_th]:text-right\",\n);\n\nexport const FormTable: ParentComponent<FormTableProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\"]);\n\n  return (\n    <table data-form-table class={twMerge(baseClass, local.class)} {...rest}>\n      {local.children}\n    </table>\n  );\n};\n"],
+  "mappings": "AAAA,SAAyC,kBAAkB;AAC3D,OAAO,UAAU;AACjB,SAAS,eAAe;AAIxB,MAAM,YAAY;AAAA,EAChB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AACF;AAEO,MAAM,YAA6C,CAAC,UAAU;AACnE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,OAAO,CAAC;AAE7D,SACE,oCAAC,WAAM,mBAAe,MAAC,OAAO,QAAQ,WAAW,MAAM,KAAK,GAAI,GAAG,QAChE,MAAM,QACT;AAEJ;",
+  "names": []
+}

package/dist/components/layout/sidebar/Sidebar.js

@@ -0,0 +1,63 @@
+import { splitProps, createMemo } from "solid-js";
+import { createMediaQuery } from "@solid-primitives/media";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { useSidebarContext, SM_MEDIA_QUERY } from "./SidebarContext";
+import { mergeStyles } from "../../../helpers/mergeStyles";
+import { SidebarContainer } from "./SidebarContainer";
+import { SidebarMenu } from "./SidebarMenu";
+import { SidebarUser } from "./SidebarUser";
+const baseClass = clsx(
+  "absolute",
+  "top-0",
+  "left-0",
+  "bottom-0",
+  "w-64",
+  "z-sidebar",
+  "flex",
+  "flex-col",
+  "bg-base-100",
+  "dark:bg-base-900",
+  "border-r",
+  "border-base-200",
+  "dark:border-base-700",
+  "transition-transform",
+  "duration-300",
+  "sm:duration-100"
+);
+const mobileOpenClass = clsx("shadow-xl");
+const SidebarBase = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "style"]);
+  const { toggle } = useSidebarContext();
+  const isDesktop = createMediaQuery(SM_MEDIA_QUERY);
+  const isOpen = createMemo(() => {
+    if (isDesktop()) {
+      return !toggle();
+    }
+    return toggle();
+  });
+  const getTransform = () => {
+    return isOpen() ? "translateX(0)" : "translateX(-100%)";
+  };
+  const getClassName = () => twMerge(baseClass, !isDesktop() && isOpen() && mobileOpenClass, local.class);
+  return /* @__PURE__ */ React.createElement(
+    "aside",
+    {
+      ...rest,
+      "data-sidebar": true,
+      class: getClassName(),
+      style: mergeStyles(local.style, { transform: getTransform() }),
+      "aria-hidden": !isOpen(),
+      inert: !isOpen() || void 0
+    },
+    local.children
+  );
+};
+const Sidebar = SidebarBase;
+Sidebar.Container = SidebarContainer;
+Sidebar.Menu = SidebarMenu;
+Sidebar.User = SidebarUser;
+export {
+  Sidebar
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/layout/sidebar/Sidebar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/layout/sidebar/Sidebar.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, splitProps, createMemo } from \"solid-js\";\nimport { createMediaQuery } from \"@solid-primitives/media\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useSidebarContext, SM_MEDIA_QUERY } from \"./SidebarContext\";\nimport { mergeStyles } from \"../../../helpers/mergeStyles\";\nimport { SidebarContainer } from \"./SidebarContainer\";\nimport { SidebarMenu } from \"./SidebarMenu\";\nimport { SidebarUser } from \"./SidebarUser\";\n\nexport type { SidebarContainerProps } from \"./SidebarContainer\";\nexport type { SidebarMenuItem, SidebarMenuProps } from \"./SidebarMenu\";\nexport type { SidebarUserMenu, SidebarUserProps } from \"./SidebarUser\";\n\nconst baseClass = clsx(\n  \"absolute\",\n  \"top-0\",\n  \"left-0\",\n  \"bottom-0\",\n  \"w-64\",\n  \"z-sidebar\",\n  \"flex\",\n  \"flex-col\",\n  \"bg-base-100\",\n  \"dark:bg-base-900\",\n  \"border-r\",\n  \"border-base-200\",\n  \"dark:border-base-700\",\n  \"transition-transform\",\n  \"duration-300\",\n  \"sm:duration-100\",\n);\n\nconst mobileOpenClass = clsx(\"shadow-xl\");\n\nexport interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {\n  children: JSX.Element;\n}\n\n/**\n * \uC0AC\uC774\uB4DC\uBC14 \uBCF8\uCCB4 \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @remarks\n * - SidebarContainer \uB0B4\uBD80\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD568 (`position: absolute`\uB85C \uCEE8\uD14C\uC774\uB108\uC5D0 \uC885\uC18D)\n * - Context\uC5D0\uC11C toggle \uC0C1\uD0DC\uB97C \uC77D\uC5B4 \uC5F4\uB9BC/\uB2EB\uD798 \uC560\uB2C8\uBA54\uC774\uC158 \uC801\uC6A9\n * - \uD1A0\uAE00 \uBC84\uD2BC \uBBF8\uD3EC\uD568 - useSidebarContext().setToggle\uB85C \uC678\uBD80\uC5D0\uC11C \uC81C\uC5B4\n *\n * @example\n * ```tsx\n * <Sidebar>\n *   <Sidebar.User menus={userMenus}>\n *     <span>\uC0AC\uC6A9\uC790</span>\n *   </Sidebar.User>\n *   <Sidebar.Menu menus={menuItems} />\n * </Sidebar>\n * ```\n */\ninterface SidebarComponent extends ParentComponent<SidebarProps> {\n  Container: typeof SidebarContainer;\n  Menu: typeof SidebarMenu;\n  User: typeof SidebarUser;\n}\n\nconst SidebarBase: ParentComponent<SidebarProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"style\"]);\n\n  const { toggle } = useSidebarContext();\n\n  // Tailwind sm: breakpoint \uAC10\uC9C0\n  const isDesktop = createMediaQuery(SM_MEDIA_QUERY);\n\n  // \uC0AC\uC774\uB4DC\uBC14 \uC5F4\uB9BC \uC5EC\uBD80 \uACC4\uC0B0\n  const isOpen = createMemo(() => {\n    if (isDesktop()) {\n      return !toggle();\n    }\n    return toggle();\n  });\n\n  // transform \uACC4\uC0B0: \uB2EB\uD798 \uC2DC \uC67C\uCABD\uC73C\uB85C \uC228\uAE40\n  const getTransform = () => {\n    return isOpen() ? \"translateX(0)\" : \"translateX(-100%)\";\n  };\n\n  const getClassName = () => twMerge(baseClass, !isDesktop() && isOpen() && mobileOpenClass, local.class);\n\n  return (\n    <aside\n      {...rest}\n      data-sidebar\n      class={getClassName()}\n      style={mergeStyles(local.style, { transform: getTransform() })}\n      aria-hidden={!isOpen()}\n      inert={!isOpen() || undefined}\n    >\n      {local.children}\n    </aside>\n  );\n};\n\nexport const Sidebar = SidebarBase as SidebarComponent;\nSidebar.Container = SidebarContainer;\nSidebar.Menu = SidebarMenu;\nSidebar.User = SidebarUser;\n"],
+  "mappings": "AAAA,SAAyC,YAAY,kBAAkB;AACvE,SAAS,wBAAwB;AACjC,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,mBAAmB,sBAAsB;AAClD,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAM5B,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;AAAA,EACA;AACF;AAEA,MAAM,kBAAkB,KAAK,WAAW;AA8BxC,MAAM,cAA6C,CAAC,UAAU;AAC5D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAEtE,QAAM,EAAE,OAAO,IAAI,kBAAkB;AAGrC,QAAM,YAAY,iBAAiB,cAAc;AAGjD,QAAM,SAAS,WAAW,MAAM;AAC9B,QAAI,UAAU,GAAG;AACf,aAAO,CAAC,OAAO;AAAA,IACjB;AACA,WAAO,OAAO;AAAA,EAChB,CAAC;AAGD,QAAM,eAAe,MAAM;AACzB,WAAO,OAAO,IAAI,kBAAkB;AAAA,EACtC;AAEA,QAAM,eAAe,MAAM,QAAQ,WAAW,CAAC,UAAU,KAAK,OAAO,KAAK,iBAAiB,MAAM,KAAK;AAEtG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAY;AAAA,MACZ,OAAO,aAAa;AAAA,MACpB,OAAO,YAAY,MAAM,OAAO,EAAE,WAAW,aAAa,EAAE,CAAC;AAAA,MAC7D,eAAa,CAAC,OAAO;AAAA,MACrB,OAAO,CAAC,OAAO,KAAK;AAAA;AAAA,IAEnB,MAAM;AAAA,EACT;AAEJ;AAEO,MAAM,UAAU;AACvB,QAAQ,YAAY;AACpB,QAAQ,OAAO;AACf,QAAQ,OAAO;",
+  "names": []
+}

package/dist/components/layout/sidebar/SidebarContainer.js

@@ -0,0 +1,70 @@
+import { Show, splitProps, createMemo } from "solid-js";
+import { useBeforeLeave } from "@solidjs/router";
+import { createMediaQuery } from "@solid-primitives/media";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { SidebarContext, SM_MEDIA_QUERY } from "./SidebarContext";
+import { usePersisted } from "../../../hooks/usePersisted";
+import { mergeStyles } from "../../../helpers/mergeStyles";
+const backdropClass = clsx(
+  "absolute",
+  "top-0",
+  "left-0",
+  "right-0",
+  "bottom-0",
+  "z-sidebar-backdrop",
+  "bg-black/50",
+  "sm:hidden"
+);
+const containerClass = clsx("relative h-full transition-[padding-left] duration-100");
+const SidebarContainer = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "style"]);
+  const [toggle, setToggle] = usePersisted("sidebar.toggle", false);
+  const isDesktop = createMediaQuery(SM_MEDIA_QUERY);
+  const isOpen = createMemo(() => {
+    if (isDesktop()) {
+      return !toggle();
+    }
+    return toggle();
+  });
+  const handleBackdropClick = () => {
+    setToggle(false);
+  };
+  useBeforeLeave(() => {
+    if (!isDesktop() && toggle()) {
+      setToggle(false);
+    }
+  });
+  const getPaddingLeft = () => {
+    if (isDesktop() && isOpen()) {
+      return "16rem";
+    }
+    return void 0;
+  };
+  const getClassName = () => twMerge(containerClass, local.class);
+  return /* @__PURE__ */ React.createElement(SidebarContext.Provider, { value: { toggle, setToggle } }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      "data-sidebar-container": true,
+      class: getClassName(),
+      style: mergeStyles(local.style, { "padding-left": getPaddingLeft() })
+    },
+    local.children,
+    /* @__PURE__ */ React.createElement(Show, { when: !isDesktop() && isOpen() }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        class: backdropClass,
+        onClick: handleBackdropClick,
+        onKeyDown: (e) => e.key === "Escape" && handleBackdropClick(),
+        role: "button",
+        "aria-label": "\uC0AC\uC774\uB4DC\uBC14 \uB2EB\uAE30",
+        tabIndex: 0
+      }
+    ))
+  ));
+};
+export {
+  SidebarContainer
+};
+//# sourceMappingURL=SidebarContainer.js.map

package/dist/components/layout/sidebar/SidebarContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/layout/sidebar/SidebarContainer.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, Show, splitProps, createMemo } from \"solid-js\";\nimport { useBeforeLeave } from \"@solidjs/router\";\nimport { createMediaQuery } from \"@solid-primitives/media\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { SidebarContext, SM_MEDIA_QUERY } from \"./SidebarContext\";\nimport { usePersisted } from \"../../../hooks/usePersisted\";\nimport { mergeStyles } from \"../../../helpers/mergeStyles\";\n\nconst backdropClass = clsx(\n  \"absolute\",\n  \"top-0\",\n  \"left-0\",\n  \"right-0\",\n  \"bottom-0\",\n  \"z-sidebar-backdrop\",\n  \"bg-black/50\",\n  \"sm:hidden\",\n);\n\nconst containerClass = clsx(\"relative h-full transition-[padding-left] duration-100\");\n\nexport interface SidebarContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  children: JSX.Element;\n}\n\n/**\n * \uC0AC\uC774\uB4DC\uBC14 \uCEE8\uD14C\uC774\uB108 \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @remarks\n * - `position: relative`\uB85C Sidebar\uB97C \uD3EC\uD568\uD558\uB294 \uCEE8\uD14C\uC774\uB108 \uC5ED\uD560\n * - \uBD80\uBAA8 \uC694\uC18C\uC5D0 \uB192\uC774\uAC00 \uC9C0\uC815\uB418\uC5B4\uC57C \uD568 (`h-full` \uC0AC\uC6A9)\n * - \uCF58\uD150\uCE20 \uC601\uC5ED\uC758 `overflow-auto`\uB294 \uC0AC\uC6A9\uC790\uAC00 \uC9C1\uC811 \uC801\uC6A9\uD574\uC57C \uD568\n * - SidebarContext.Provider\uB85C toggle \uC0C1\uD0DC \uACF5\uC720\n * - usePersisted\uB85C toggle \uC0C1\uD0DC localStorage \uC800\uC7A5 (\uD0A4: sidebar.toggle)\n * - \uB370\uC2A4\uD06C\uD0D1(640px+)\uC5D0\uC11C padding-left + transition\uC73C\uB85C \uCF58\uD150\uCE20 \uD655\uC7A5/\uCD95\uC18C\n * - \uBAA8\uBC14\uC77C(640px-)\uC5D0\uC11C backdrop \uB80C\uB354\uB9C1 \uBC0F \uD074\uB9AD \uC2DC \uB2EB\uAE30\n * - \uD398\uC774\uC9C0 \uC774\uB3D9 \uC2DC \uBAA8\uBC14\uC77C\uC5D0\uC11C \uC790\uB3D9 \uB2EB\uAE30\n *\n * @example\n * ```tsx\n * <div class=\"h-screen\">\n *   <SidebarContainer>\n *     <Sidebar>\n *       <SidebarUser menus={userMenus}>\n *         <span>\uC0AC\uC6A9\uC790</span>\n *       </SidebarUser>\n *       <SidebarMenu menus={menuItems} />\n *     </Sidebar>\n *     <main class=\"h-full overflow-auto\">\uCF58\uD150\uCE20</main>\n *   </SidebarContainer>\n * </div>\n * ```\n */\nexport const SidebarContainer: ParentComponent<SidebarContainerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"style\"]);\n\n  const [toggle, setToggle] = usePersisted(\"sidebar.toggle\", false);\n\n  // Tailwind sm: breakpoint \uAC10\uC9C0\n  const isDesktop = createMediaQuery(SM_MEDIA_QUERY);\n\n  // \uC0AC\uC774\uB4DC\uBC14 \uC5F4\uB9BC \uC5EC\uBD80 \uACC4\uC0B0\n  const isOpen = createMemo(() => {\n    if (isDesktop()) {\n      return !toggle();\n    }\n    return toggle();\n  });\n\n  // backdrop \uD074\uB9AD \uC2DC \uB2EB\uAE30\n  const handleBackdropClick = () => {\n    setToggle(false);\n  };\n\n  // \uBAA8\uBC14\uC77C\uC5D0\uC11C \uD398\uC774\uC9C0 \uC774\uB3D9 \uC2DC \uC790\uB3D9 \uB2EB\uAE30\n  useBeforeLeave(() => {\n    if (!isDesktop() && toggle()) {\n      setToggle(false);\n    }\n  });\n\n  // \uB370\uC2A4\uD06C\uD0D1\uC5D0\uC11C \uC0AC\uC774\uB4DC\uBC14 \uC5F4\uB9BC \uC2DC padding-left \uC801\uC6A9 (16rem = w-64)\n  const getPaddingLeft = () => {\n    if (isDesktop() && isOpen()) {\n      return \"16rem\";\n    }\n    return undefined;\n  };\n\n  const getClassName = () => twMerge(containerClass, local.class);\n\n  return (\n    <SidebarContext.Provider value={{ toggle, setToggle }}>\n      <div\n        {...rest}\n        data-sidebar-container\n        class={getClassName()}\n        style={mergeStyles(local.style, { \"padding-left\": getPaddingLeft() })}\n      >\n        {local.children}\n        <Show when={!isDesktop() && isOpen()}>\n          <div\n            class={backdropClass}\n            onClick={handleBackdropClick}\n            onKeyDown={(e) => e.key === \"Escape\" && handleBackdropClick()}\n            role=\"button\"\n            aria-label=\"\uC0AC\uC774\uB4DC\uBC14 \uB2EB\uAE30\"\n            tabIndex={0}\n          />\n        </Show>\n      </div>\n    </SidebarContext.Provider>\n  );\n};\n"],
+  "mappings": "AAAA,SAAyC,MAAM,YAAY,kBAAkB;AAC7E,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,gBAAgB,sBAAsB;AAC/C,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAE5B,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,iBAAiB,KAAK,wDAAwD;AAkC7E,MAAM,mBAA2D,CAAC,UAAU;AACjF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAEtE,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,kBAAkB,KAAK;AAGhE,QAAM,YAAY,iBAAiB,cAAc;AAGjD,QAAM,SAAS,WAAW,MAAM;AAC9B,QAAI,UAAU,GAAG;AACf,aAAO,CAAC,OAAO;AAAA,IACjB;AACA,WAAO,OAAO;AAAA,EAChB,CAAC;AAGD,QAAM,sBAAsB,MAAM;AAChC,cAAU,KAAK;AAAA,EACjB;AAGA,iBAAe,MAAM;AACnB,QAAI,CAAC,UAAU,KAAK,OAAO,GAAG;AAC5B,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,CAAC;AAGD,QAAM,iBAAiB,MAAM;AAC3B,QAAI,UAAU,KAAK,OAAO,GAAG;AAC3B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,MAAM,QAAQ,gBAAgB,MAAM,KAAK;AAE9D,SACE,oCAAC,eAAe,UAAf,EAAwB,OAAO,EAAE,QAAQ,UAAU,KAClD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,0BAAsB;AAAA,MACtB,OAAO,aAAa;AAAA,MACpB,OAAO,YAAY,MAAM,OAAO,EAAE,gBAAgB,eAAe,EAAE,CAAC;AAAA;AAAA,IAEnE,MAAM;AAAA,IACP,oCAAC,QAAK,MAAM,CAAC,UAAU,KAAK,OAAO,KACjC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,oBAAoB;AAAA,QAC5D,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAU;AAAA;AAAA,IACZ,CACF;AAAA,EACF,CACF;AAEJ;",
+  "names": []
+}

package/dist/components/layout/sidebar/SidebarContext.js

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "solid-js";
+const SM_MEDIA_QUERY = "(min-width: 640px)";
+const SidebarContext = createContext();
+function useSidebarContext() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebarContext\uB294 SidebarContainer \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");
+  }
+  return context;
+}
+function useSidebarContextOptional() {
+  return useContext(SidebarContext);
+}
+export {
+  SM_MEDIA_QUERY,
+  SidebarContext,
+  useSidebarContext,
+  useSidebarContextOptional
+};
+//# sourceMappingURL=SidebarContext.js.map

package/dist/components/layout/sidebar/SidebarContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/layout/sidebar/SidebarContext.ts"],
+  "sourcesContent": ["import { createContext, useContext, type Accessor, type Setter } from \"solid-js\";\n\n/**\n * Tailwind sm: breakpoint\uC5D0 \uD574\uB2F9\uD558\uB294 \uBBF8\uB514\uC5B4 \uCFFC\uB9AC\n * @see tailwind.config.ts screens.sm (640px)\n */\nexport const SM_MEDIA_QUERY = \"(min-width: 640px)\";\n\n/**\n * \uC0AC\uC774\uB4DC\uBC14 toggle \uC0C1\uD0DC \uACF5\uC720 Context\n *\n * @remarks\n * toggle \uC2DC\uB9E8\uD2F1:\n * - `toggle=false` (\uAE30\uBCF8\uAC12): \uB370\uC2A4\uD06C\uD0D1(640px+)\uC5D0\uC11C \uC5F4\uB9BC, \uBAA8\uBC14\uC77C(640px-)\uC5D0\uC11C \uB2EB\uD798\n * - `toggle=true`: \uB370\uC2A4\uD06C\uD0D1(640px+)\uC5D0\uC11C \uB2EB\uD798, \uBAA8\uBC14\uC77C(640px-)\uC5D0\uC11C \uC5F4\uB9BC (\uC624\uBC84\uB808\uC774)\n */\nexport interface SidebarContextValue {\n  toggle: Accessor<boolean>;\n  setToggle: Setter<boolean>;\n}\n\nexport const SidebarContext = createContext<SidebarContextValue>();\n\nexport function useSidebarContext(): SidebarContextValue {\n  const context = useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebarContext\uB294 SidebarContainer \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n  }\n  return context;\n}\n\n/**\n * SidebarContext\uB97C \uC120\uD0DD\uC801\uC73C\uB85C \uC0AC\uC6A9 (Context \uC5C6\uC73C\uBA74 undefined \uBC18\uD658)\n *\n * @remarks\n * SidebarContainer \uC678\uBD80\uC5D0\uC11C\uB3C4 \uC0AC\uC6A9 \uAC00\uB2A5\uD55C \uCEF4\uD3EC\uB10C\uD2B8(\uC608: Topbar)\uC5D0\uC11C \uC0AC\uC6A9\n */\nexport function useSidebarContextOptional(): SidebarContextValue | undefined {\n  return useContext(SidebarContext);\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAA8C;AAM/D,MAAM,iBAAiB;AAevB,MAAM,iBAAiB,cAAmC;AAE1D,SAAS,oBAAyC;AACvD,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,4HAAsD;AAAA,EACxE;AACA,SAAO;AACT;AAQO,SAAS,4BAA6D;AAC3E,SAAO,WAAW,cAAc;AAClC;",
+  "names": []
+}

package/dist/components/layout/sidebar/SidebarMenu.js

@@ -0,0 +1,84 @@
+import {
+  For,
+  Show,
+  splitProps,
+  createSignal,
+  createMemo,
+  createEffect,
+  createContext,
+  useContext
+} from "solid-js";
+import { useLocation, useNavigate } from "@solidjs/router";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Icon } from "../../display/Icon";
+import { List } from "../../data/list/List";
+import { ListItem } from "../../data/list/ListItem";
+const headerClass = clsx(
+  "px-4",
+  "py-2",
+  "text-xs",
+  "font-semibold",
+  "text-base-500",
+  "dark:text-base-400",
+  "uppercase",
+  "tracking-wider"
+);
+const MenuContext = createContext();
+const SidebarMenu = (props) => {
+  const [local, rest] = splitProps(props, ["menus", "class"]);
+  const location = useLocation();
+  const findSelectedPath = (menus, pathname, path = []) => {
+    for (const menu of menus) {
+      const currentPath = [...path, menu];
+      if (menu.href === pathname) {
+        return currentPath;
+      }
+      if (menu.children) {
+        const found = findSelectedPath(menu.children, pathname, currentPath);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  const initialOpenItems = createMemo(() => {
+    const selectedPath = findSelectedPath(local.menus, location.pathname);
+    return selectedPath ? new Set(selectedPath.slice(0, -1)) : /* @__PURE__ */ new Set();
+  });
+  const getClassName = () => twMerge("flex-1 overflow-y-auto", local.class);
+  return /* @__PURE__ */ React.createElement(MenuContext.Provider, { value: { initialOpenItems } }, /* @__PURE__ */ React.createElement("div", { ...rest, "data-sidebar-menu": true, class: getClassName() }, /* @__PURE__ */ React.createElement("div", { class: headerClass }, "MENU"), /* @__PURE__ */ React.createElement(List, { inset: true }, /* @__PURE__ */ React.createElement(For, { each: local.menus }, (menu) => /* @__PURE__ */ React.createElement(MenuItem, { menu, size: "lg" })))));
+};
+const MenuItem = (props) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const menuContext = useContext(MenuContext);
+  const hasChildren = () => props.menu.children !== void 0 && props.menu.children.length > 0;
+  const isExternalLink = () => {
+    var _a;
+    return ((_a = props.menu.href) == null ? void 0 : _a.includes("://")) ?? false;
+  };
+  const isSelected = () => props.menu.href === location.pathname;
+  const shouldBeOpen = () => menuContext.initialOpenItems().has(props.menu);
+  const [open, setOpen] = createSignal(false);
+  createEffect(() => {
+    if (shouldBeOpen()) {
+      setOpen(true);
+    }
+  });
+  const handleClick = () => {
+    if (hasChildren()) {
+      setOpen((v) => !v);
+    } else if (props.menu.href !== void 0) {
+      if (isExternalLink()) {
+        window.open(props.menu.href, "_blank", "noopener,noreferrer");
+      } else {
+        navigate(props.menu.href);
+      }
+    }
+  };
+  return /* @__PURE__ */ React.createElement(ListItem, { selected: isSelected(), open: open(), onOpenChange: setOpen, onClick: handleClick, size: props.size }, /* @__PURE__ */ React.createElement(Show, { when: props.menu.icon }, /* @__PURE__ */ React.createElement(Icon, { icon: props.menu.icon })), /* @__PURE__ */ React.createElement("span", { class: "truncate" }, props.menu.title), /* @__PURE__ */ React.createElement(Show, { when: hasChildren() }, /* @__PURE__ */ React.createElement(ListItem.Children, null, /* @__PURE__ */ React.createElement(For, { each: props.menu.children }, (child) => /* @__PURE__ */ React.createElement(MenuItem, { menu: child })))));
+};
+export {
+  SidebarMenu
+};
+//# sourceMappingURL=SidebarMenu.js.map

package/dist/components/layout/sidebar/SidebarMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/layout/sidebar/SidebarMenu.tsx"],
+  "sourcesContent": ["import {\n  type Component,\n  type JSX,\n  For,\n  Show,\n  splitProps,\n  createSignal,\n  createMemo,\n  createEffect,\n  createContext,\n  useContext,\n  type Accessor,\n} from \"solid-js\";\nimport { useLocation, useNavigate } from \"@solidjs/router\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport type { IconProps } from \"@tabler/icons-solidjs\";\nimport type { ComponentSize } from \"../../../styles/tokens.styles\";\nimport { Icon } from \"../../display/Icon\";\nimport { List } from \"../../data/list/List\";\nimport { ListItem } from \"../../data/list/ListItem\";\n\nconst headerClass = clsx(\n  \"px-4\",\n  \"py-2\",\n  \"text-xs\",\n  \"font-semibold\",\n  \"text-base-500\",\n  \"dark:text-base-400\",\n  \"uppercase\",\n  \"tracking-wider\",\n);\n\nexport interface SidebarMenuItem {\n  title: string;\n  href?: string;\n  icon?: Component<IconProps>;\n  children?: SidebarMenuItem[];\n}\n\nexport interface SidebarMenuProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * \uBA54\uB274 \uC544\uC774\uD15C \uBC30\uC5F4\n   */\n  menus: SidebarMenuItem[];\n}\n\n// \uB0B4\uBD80 Context: \uCD08\uAE30 \uD3BC\uCE68 \uC0C1\uD0DC \uACF5\uC720\ninterface MenuContextValue {\n  initialOpenItems: Accessor<Set<SidebarMenuItem>>;\n}\n\nconst MenuContext = createContext<MenuContextValue>();\n\n/**\n * \uC0AC\uC774\uB4DC\uBC14 \uBA54\uB274 \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @remarks\n * - \"MENU\" \uD5E4\uB354 \uACE0\uC815 \uD45C\uC2DC\n * - List/ListItem\uC73C\uB85C \uC7AC\uADC0\uC801 \uBA54\uB274 \uB80C\uB354\uB9C1\n * - pathname \uC815\uD655 \uC77C\uCE58\uB85C \uC120\uD0DD \uC0C1\uD0DC \uD310\uB2E8 (query string \uBB34\uC2DC)\n * - \uC120\uD0DD\uB41C \uBA54\uB274\uC758 \uBD80\uBAA8\uB4E4\uC740 \uCD08\uAE30 \uB80C\uB354\uB9C1 \uC2DC \uC790\uB3D9 \uD3BC\uCE68\n * - \uC678\uBD80 \uB9C1\uD06C(://\uD3EC\uD568)\uB294 \uC0C8 \uD0ED\uC5D0\uC11C \uC5F4\uAE30\n *\n * @example\n * ```tsx\n * <SidebarMenu menus={[\n *   { title: \"\uB300\uC2DC\uBCF4\uB4DC\", href: \"/dashboard\", icon: IconHome },\n *   {\n *     title: \"\uC124\uC815\",\n *     icon: IconSettings,\n *     children: [\n *       { title: \"\uD504\uB85C\uD544\", href: \"/settings/profile\" },\n *       { title: \"\uBCF4\uC548\", href: \"/settings/security\" },\n *     ],\n *   },\n * ]} />\n * ```\n */\nexport const SidebarMenu: Component<SidebarMenuProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"menus\", \"class\"]);\n\n  const location = useLocation();\n\n  // \uD604\uC7AC pathname\uACFC \uC77C\uCE58\uD558\uB294 \uBA54\uB274\uC758 \uBD80\uBAA8\uB4E4\uC744 \uCC3E\uC544 \uD3BC\uCE68 \uC0C1\uD0DC \uACC4\uC0B0\n  const findSelectedPath = (\n    menus: SidebarMenuItem[],\n    pathname: string,\n    path: SidebarMenuItem[] = [],\n  ): SidebarMenuItem[] | null => {\n    for (const menu of menus) {\n      const currentPath = [...path, menu];\n      if (menu.href === pathname) {\n        return currentPath;\n      }\n      if (menu.children) {\n        const found = findSelectedPath(menu.children, pathname, currentPath);\n        if (found) return found;\n      }\n    }\n    return null;\n  };\n\n  // pathname \uBCC0\uACBD\uC5D0 \uBC18\uC751\uD558\uC5EC \uD3BC\uCE68 \uC0C1\uD0DC \uC7AC\uACC4\uC0B0\n  const initialOpenItems = createMemo(() => {\n    const selectedPath = findSelectedPath(local.menus, location.pathname);\n    return selectedPath\n      ? new Set(selectedPath.slice(0, -1)) // \uB9C8\uC9C0\uB9C9 \uD56D\uBAA9(\uC120\uD0DD\uB41C \uBA54\uB274)\uC740 \uC81C\uC678\uD558\uACE0 \uBD80\uBAA8\uB4E4\uB9CC \uD3BC\uCE68\n      : new Set<SidebarMenuItem>();\n  });\n\n  const getClassName = () => twMerge(\"flex-1 overflow-y-auto\", local.class);\n\n  return (\n    <MenuContext.Provider value={{ initialOpenItems }}>\n      <div {...rest} data-sidebar-menu class={getClassName()}>\n        <div class={headerClass}>MENU</div>\n        <List inset>\n          <For each={local.menus}>{(menu) => <MenuItem menu={menu} size=\"lg\" />}</For>\n        </List>\n      </div>\n    </MenuContext.Provider>\n  );\n};\n\ninterface MenuItemProps {\n  menu: SidebarMenuItem;\n  size?: ComponentSize;\n}\n\nconst MenuItem: Component<MenuItemProps> = (props) => {\n  const location = useLocation();\n  const navigate = useNavigate();\n  const menuContext = useContext(MenuContext)!;\n\n  const hasChildren = () => props.menu.children !== undefined && props.menu.children.length > 0;\n\n  // \uC678\uBD80 \uB9C1\uD06C \uC5EC\uBD80 \uD655\uC778\n  const isExternalLink = () => props.menu.href?.includes(\"://\") ?? false;\n\n  // \uC120\uD0DD \uC0C1\uD0DC\n  const isSelected = () => props.menu.href === location.pathname;\n\n  // \uD3BC\uCE68 \uC0C1\uD0DC \uACC4\uC0B0 (object reference\uB85C \uBE44\uAD50)\n  const shouldBeOpen = () => menuContext.initialOpenItems().has(props.menu);\n\n  const [open, setOpen] = createSignal(false);\n\n  // pathname \uBCC0\uACBD\uC5D0 \uBC18\uC751\uD558\uC5EC \uD3BC\uCE68 \uC0C1\uD0DC \uC5C5\uB370\uC774\uD2B8\n  createEffect(() => {\n    if (shouldBeOpen()) {\n      setOpen(true);\n    }\n  });\n\n  const handleClick = () => {\n    if (hasChildren()) {\n      setOpen((v) => !v);\n    } else if (props.menu.href !== undefined) {\n      if (isExternalLink()) {\n        window.open(props.menu.href, \"_blank\", \"noopener,noreferrer\");\n      } else {\n        navigate(props.menu.href);\n      }\n    }\n  };\n\n  return (\n    <ListItem selected={isSelected()} open={open()} onOpenChange={setOpen} onClick={handleClick} size={props.size}>\n      <Show when={props.menu.icon}>\n        <Icon icon={props.menu.icon!} />\n      </Show>\n      <span class=\"truncate\">{props.menu.title}</span>\n      <Show when={hasChildren()}>\n        <ListItem.Children>\n          <For each={props.menu.children}>{(child) => <MenuItem menu={child} />}</For>\n        </ListItem.Children>\n      </Show>\n    </ListItem>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}