@simplysm/solid 13.0.0-beta.6

package/dist/components/form-control/numpad/Numpad.js

@@ -0,0 +1,107 @@
+import { createSignal, createEffect, Show } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { Button } from "../Button";
+import { NumberInput } from "../field/NumberInput";
+import { Icon } from "../../display/Icon";
+import { IconEraser, IconArrowLeft } from "@tabler/icons-solidjs";
+const baseClass = clsx("grid grid-cols-3", "gap-0.5", "w-auto");
+function parseInputStr(str) {
+  if (str === "" || str === "-" || str === "." || str === "-.") return void 0;
+  const num = Number(str);
+  return Number.isNaN(num) ? void 0 : num;
+}
+function valueToInputStr(value) {
+  if (value == null) return "";
+  return String(value);
+}
+const Numpad = (props) => {
+  const [value, setValue] = createControllableSignal({
+    value: () => props.value,
+    onChange: () => props.onValueChange
+  });
+  const [inputStr, setInputStr] = createSignal("");
+  let isButtonInput = false;
+  createEffect(() => {
+    const val = value();
+    if (!isButtonInput) {
+      setInputStr(valueToInputStr(val));
+    }
+    isButtonInput = false;
+  });
+  const applyInputStr = (str) => {
+    isButtonInput = true;
+    setInputStr(str);
+    setValue(parseInputStr(str));
+  };
+  const handleDigit = (digit) => {
+    applyInputStr(inputStr() + digit);
+  };
+  const handleDot = () => {
+    const current = inputStr();
+    if (current.includes(".")) return;
+    applyInputStr(current + ".");
+  };
+  const handleClear = () => {
+    applyInputStr("");
+  };
+  const handleBackspace = () => {
+    const current = inputStr();
+    if (current.length === 0) return;
+    applyInputStr(current.slice(0, -1));
+  };
+  const handleMinus = () => {
+    const current = inputStr();
+    if (current.startsWith("-")) {
+      applyInputStr(current.slice(1));
+    } else {
+      applyInputStr("-" + current);
+    }
+  };
+  const handleEnter = () => {
+    var _a;
+    (_a = props.onEnterButtonClick) == null ? void 0 : _a.call(props);
+  };
+  const handleFieldValueChange = (val) => {
+    setValue(val);
+    setInputStr(valueToInputStr(val));
+  };
+  const buttonSize = () => props.size ?? "lg";
+  return /* @__PURE__ */ React.createElement("div", { "data-numpad": true, class: twMerge(baseClass, props.class), style: props.style }, /* @__PURE__ */ React.createElement("div", { class: clsx("flex", props.useEnterButton ? "col-span-2" : "col-span-3") }, /* @__PURE__ */ React.createElement(
+    NumberInput,
+    {
+      value: value(),
+      onValueChange: handleFieldValueChange,
+      placeholder: props.placeholder,
+      readonly: props.inputDisabled,
+      inset: true,
+      class: "w-full",
+      comma: false
+    }
+  )), /* @__PURE__ */ React.createElement(Show, { when: props.useEnterButton }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      theme: "primary",
+      variant: "solid",
+      size: buttonSize(),
+      inset: true,
+      disabled: props.required && value() == null,
+      onClick: handleEnter
+    },
+    "ENT"
+  )), /* @__PURE__ */ React.createElement(Show, { when: props.useMinusButton }, /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, onClick: handleMinus }, "-")), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      size: buttonSize(),
+      inset: true,
+      onClick: handleClear,
+      class: clsx(props.useMinusButton ? "col-span-1" : "col-span-2", "text-danger-500")
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconEraser })
+  ), /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, onClick: handleBackspace, class: "text-warning-500" }, /* @__PURE__ */ React.createElement(Icon, { icon: IconArrowLeft })), /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, onClick: () => handleDigit("7") }, "7"), /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, onClick: () => handleDigit("8") }, "8"), /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, onClick: () => handleDigit("9") }, "9"), /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, onClick: () => handleDigit("4") }, "4"), /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, onClick: () => handleDigit("5") }, "5"), /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, onClick: () => handleDigit("6") }, "6"), /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, onClick: () => handleDigit("1") }, "1"), /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, onClick: () => handleDigit("2") }, "2"), /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, onClick: () => handleDigit("3") }, "3"), /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, class: "col-span-2", onClick: () => handleDigit("0") }, "0"), /* @__PURE__ */ React.createElement(Button, { size: buttonSize(), inset: true, onClick: handleDot }, "."));
+};
+export {
+  Numpad
+};
+//# sourceMappingURL=Numpad.js.map

package/dist/components/form-control/numpad/Numpad.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/numpad/Numpad.tsx"],
+  "sourcesContent": ["import { type Component, type JSX, createSignal, createEffect, Show } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { Button } from \"../Button\";\nimport { NumberInput } from \"../field/NumberInput\";\nimport { Icon } from \"../../display/Icon\";\nimport { IconEraser, IconArrowLeft } from \"@tabler/icons-solidjs\";\nimport type { ComponentSize } from \"../../../styles/tokens.styles\";\n\nexport interface NumpadProps {\n  /** \uC785\uB825 \uAC12 */\n  value?: number;\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: number | undefined) => void;\n  /** \uD50C\uB808\uC774\uC2A4\uD640\uB354 */\n  placeholder?: string;\n  /** \uD544\uC218 \uC785\uB825 \uC5EC\uBD80 */\n  required?: boolean;\n  /** \uD14D\uC2A4\uD2B8 \uD544\uB4DC \uC9C1\uC811 \uC785\uB825 \uBE44\uD65C\uC131\uD654 */\n  inputDisabled?: boolean;\n  /** ENT \uBC84\uD2BC \uD45C\uC2DC */\n  useEnterButton?: boolean;\n  /** - \uBC84\uD2BC \uD45C\uC2DC */\n  useMinusButton?: boolean;\n  /** ENT \uD074\uB9AD \uCF5C\uBC31 */\n  onEnterButtonClick?: () => void;\n  /** \uC0AC\uC774\uC988 */\n  size?: ComponentSize;\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\nconst baseClass = clsx(\"grid grid-cols-3\", \"gap-0.5\", \"w-auto\");\n\n/**\n * inputStr\uC744 \uD30C\uC2F1\uD558\uC5EC \uC22B\uC790\uB85C \uBCC0\uD658\uD55C\uB2E4.\n * \uBE48 \uBB38\uC790\uC5F4\uC774\uB098 \"-\"\uB9CC \uC788\uB294 \uACBD\uC6B0 undefined\uB97C \uBC18\uD658\uD55C\uB2E4.\n */\nfunction parseInputStr(str: string): number | undefined {\n  if (str === \"\" || str === \"-\" || str === \".\" || str === \"-.\") return undefined;\n  const num = Number(str);\n  return Number.isNaN(num) ? undefined : num;\n}\n\n/**\n * \uC22B\uC790\uB97C inputStr\uB85C \uBCC0\uD658\uD55C\uB2E4.\n */\nfunction valueToInputStr(value: number | undefined): string {\n  if (value == null) return \"\";\n  return String(value);\n}\n\nexport const Numpad: Component<NumpadProps> = (props) => {\n  // controlled/uncontrolled \uD328\uD134\n  const [value, setValue] = createControllableSignal({\n    value: () => props.value,\n    onChange: () => props.onValueChange,\n  });\n\n  // \uB0B4\uBD80 \uC785\uB825 \uBB38\uC790\uC5F4 \uC0C1\uD0DC\n  const [inputStr, setInputStr] = createSignal<string>(\"\");\n  // \uBC84\uD2BC \uC785\uB825 \uC911\uC5D0\uB294 \uC678\uBD80 value \u2192 inputStr \uB3D9\uAE30\uD654\uB97C \uBC29\uC9C0\n  let isButtonInput = false;\n\n  // \uC678\uBD80 \uAC12 \uBCC0\uACBD \uC2DC inputStr \uB3D9\uAE30\uD654 (\uBC84\uD2BC \uC785\uB825 \uC911\uC774 \uC544\uB2D0 \uB54C\uB9CC)\n  createEffect(() => {\n    const val = value();\n    if (!isButtonInput) {\n      setInputStr(valueToInputStr(val));\n    }\n    isButtonInput = false;\n  });\n\n  // inputStr\uC744 \uD30C\uC2F1\uD558\uC5EC value\uB85C \uBC18\uC601\n  const applyInputStr = (str: string) => {\n    isButtonInput = true;\n    setInputStr(str);\n    setValue(parseInputStr(str));\n  };\n\n  // \uC22B\uC790 \uBC84\uD2BC (0-9)\n  const handleDigit = (digit: string) => {\n    applyInputStr(inputStr() + digit);\n  };\n\n  // \uC18C\uC218\uC810 \uBC84\uD2BC\n  const handleDot = () => {\n    const current = inputStr();\n    if (current.includes(\".\")) return;\n    applyInputStr(current + \".\");\n  };\n\n  // C (\uD074\uB9AC\uC5B4) \uBC84\uD2BC\n  const handleClear = () => {\n    applyInputStr(\"\");\n  };\n\n  // BS (\uBC31\uC2A4\uD398\uC774\uC2A4) \uBC84\uD2BC\n  const handleBackspace = () => {\n    const current = inputStr();\n    if (current.length === 0) return;\n    applyInputStr(current.slice(0, -1));\n  };\n\n  // - (\uB9C8\uC774\uB108\uC2A4 \uD1A0\uAE00) \uBC84\uD2BC\n  const handleMinus = () => {\n    const current = inputStr();\n    if (current.startsWith(\"-\")) {\n      applyInputStr(current.slice(1));\n    } else {\n      applyInputStr(\"-\" + current);\n    }\n  };\n\n  // ENT \uBC84\uD2BC\n  const handleEnter = () => {\n    props.onEnterButtonClick?.();\n  };\n\n  // NumberInput \uAC12 \uBCC0\uACBD \uD578\uB4E4\uB7EC\n  const handleFieldValueChange = (val: number | undefined) => {\n    setValue(val);\n    setInputStr(valueToInputStr(val));\n  };\n\n  const buttonSize = () => props.size ?? \"lg\";\n\n  return (\n    <div data-numpad class={twMerge(baseClass, props.class)} style={props.style}>\n      {/* Row 1: NumberInput + optional ENT */}\n      <div class={clsx(\"flex\", props.useEnterButton ? \"col-span-2\" : \"col-span-3\")}>\n        <NumberInput\n          value={value()}\n          onValueChange={handleFieldValueChange}\n          placeholder={props.placeholder}\n          readonly={props.inputDisabled}\n          inset\n          class=\"w-full\"\n          comma={false}\n        />\n      </div>\n      <Show when={props.useEnterButton}>\n        <Button\n          theme=\"primary\"\n          variant=\"solid\"\n          size={buttonSize()}\n          inset\n          disabled={props.required && value() == null}\n          onClick={handleEnter}\n        >\n          ENT\n        </Button>\n      </Show>\n\n      {/* Row 2: optional Minus + C + BS */}\n      <Show when={props.useMinusButton}>\n        <Button size={buttonSize()} inset onClick={handleMinus}>\n          -\n        </Button>\n      </Show>\n      <Button\n        size={buttonSize()}\n        inset\n        onClick={handleClear}\n        class={clsx(props.useMinusButton ? \"col-span-1\" : \"col-span-2\", \"text-danger-500\")}\n      >\n        <Icon icon={IconEraser} />\n      </Button>\n      <Button size={buttonSize()} inset onClick={handleBackspace} class=\"text-warning-500\">\n        <Icon icon={IconArrowLeft} />\n      </Button>\n\n      {/* Row 3: 7 8 9 */}\n      <Button size={buttonSize()} inset onClick={() => handleDigit(\"7\")}>\n        7\n      </Button>\n      <Button size={buttonSize()} inset onClick={() => handleDigit(\"8\")}>\n        8\n      </Button>\n      <Button size={buttonSize()} inset onClick={() => handleDigit(\"9\")}>\n        9\n      </Button>\n\n      {/* Row 4: 4 5 6 */}\n      <Button size={buttonSize()} inset onClick={() => handleDigit(\"4\")}>\n        4\n      </Button>\n      <Button size={buttonSize()} inset onClick={() => handleDigit(\"5\")}>\n        5\n      </Button>\n      <Button size={buttonSize()} inset onClick={() => handleDigit(\"6\")}>\n        6\n      </Button>\n\n      {/* Row 5: 1 2 3 */}\n      <Button size={buttonSize()} inset onClick={() => handleDigit(\"1\")}>\n        1\n      </Button>\n      <Button size={buttonSize()} inset onClick={() => handleDigit(\"2\")}>\n        2\n      </Button>\n      <Button size={buttonSize()} inset onClick={() => handleDigit(\"3\")}>\n        3\n      </Button>\n\n      {/* Row 6: 0 (colspan 2) + . */}\n      <Button size={buttonSize()} inset class=\"col-span-2\" onClick={() => handleDigit(\"0\")}>\n        0\n      </Button>\n      <Button size={buttonSize()} inset onClick={handleDot}>\n        .\n      </Button>\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,SAAmC,cAAc,cAAc,YAAY;AAC3E,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,gCAAgC;AACzC,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,YAAY,qBAAqB;AA4B1C,MAAM,YAAY,KAAK,oBAAoB,WAAW,QAAQ;AAM9D,SAAS,cAAc,KAAiC;AACtD,MAAI,QAAQ,MAAM,QAAQ,OAAO,QAAQ,OAAO,QAAQ,KAAM,QAAO;AACrE,QAAM,MAAM,OAAO,GAAG;AACtB,SAAO,OAAO,MAAM,GAAG,IAAI,SAAY;AACzC;AAKA,SAAS,gBAAgB,OAAmC;AAC1D,MAAI,SAAS,KAAM,QAAO;AAC1B,SAAO,OAAO,KAAK;AACrB;AAEO,MAAM,SAAiC,CAAC,UAAU;AAEvD,QAAM,CAAC,OAAO,QAAQ,IAAI,yBAAyB;AAAA,IACjD,OAAO,MAAM,MAAM;AAAA,IACnB,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAGD,QAAM,CAAC,UAAU,WAAW,IAAI,aAAqB,EAAE;AAEvD,MAAI,gBAAgB;AAGpB,eAAa,MAAM;AACjB,UAAM,MAAM,MAAM;AAClB,QAAI,CAAC,eAAe;AAClB,kBAAY,gBAAgB,GAAG,CAAC;AAAA,IAClC;AACA,oBAAgB;AAAA,EAClB,CAAC;AAGD,QAAM,gBAAgB,CAAC,QAAgB;AACrC,oBAAgB;AAChB,gBAAY,GAAG;AACf,aAAS,cAAc,GAAG,CAAC;AAAA,EAC7B;AAGA,QAAM,cAAc,CAAC,UAAkB;AACrC,kBAAc,SAAS,IAAI,KAAK;AAAA,EAClC;AAGA,QAAM,YAAY,MAAM;AACtB,UAAM,UAAU,SAAS;AACzB,QAAI,QAAQ,SAAS,GAAG,EAAG;AAC3B,kBAAc,UAAU,GAAG;AAAA,EAC7B;AAGA,QAAM,cAAc,MAAM;AACxB,kBAAc,EAAE;AAAA,EAClB;AAGA,QAAM,kBAAkB,MAAM;AAC5B,UAAM,UAAU,SAAS;AACzB,QAAI,QAAQ,WAAW,EAAG;AAC1B,kBAAc,QAAQ,MAAM,GAAG,EAAE,CAAC;AAAA,EACpC;AAGA,QAAM,cAAc,MAAM;AACxB,UAAM,UAAU,SAAS;AACzB,QAAI,QAAQ,WAAW,GAAG,GAAG;AAC3B,oBAAc,QAAQ,MAAM,CAAC,CAAC;AAAA,IAChC,OAAO;AACL,oBAAc,MAAM,OAAO;AAAA,IAC7B;AAAA,EACF;AAGA,QAAM,cAAc,MAAM;AAtH5B;AAuHI,gBAAM,uBAAN;AAAA,EACF;AAGA,QAAM,yBAAyB,CAAC,QAA4B;AAC1D,aAAS,GAAG;AACZ,gBAAY,gBAAgB,GAAG,CAAC;AAAA,EAClC;AAEA,QAAM,aAAa,MAAM,MAAM,QAAQ;AAEvC,SACE,oCAAC,SAAI,eAAW,MAAC,OAAO,QAAQ,WAAW,MAAM,KAAK,GAAG,OAAO,MAAM,SAEpE,oCAAC,SAAI,OAAO,KAAK,QAAQ,MAAM,iBAAiB,eAAe,YAAY,KACzE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,eAAe;AAAA,MACf,aAAa,MAAM;AAAA,MACnB,UAAU,MAAM;AAAA,MAChB,OAAK;AAAA,MACL,OAAM;AAAA,MACN,OAAO;AAAA;AAAA,EACT,CACF,GACA,oCAAC,QAAK,MAAM,MAAM,kBAChB;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,MAAM,WAAW;AAAA,MACjB,OAAK;AAAA,MACL,UAAU,MAAM,YAAY,MAAM,KAAK;AAAA,MACvC,SAAS;AAAA;AAAA,IACV;AAAA,EAED,CACF,GAGA,oCAAC,QAAK,MAAM,MAAM,kBAChB,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,SAAS,eAAa,GAExD,CACF,GACA;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,WAAW;AAAA,MACjB,OAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO,KAAK,MAAM,iBAAiB,eAAe,cAAc,iBAAiB;AAAA;AAAA,IAEjF,oCAAC,QAAK,MAAM,YAAY;AAAA,EAC1B,GACA,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,SAAS,iBAAiB,OAAM,sBAChE,oCAAC,QAAK,MAAM,eAAe,CAC7B,GAGA,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,SAAS,MAAM,YAAY,GAAG,KAAG,GAEnE,GACA,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,SAAS,MAAM,YAAY,GAAG,KAAG,GAEnE,GACA,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,SAAS,MAAM,YAAY,GAAG,KAAG,GAEnE,GAGA,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,SAAS,MAAM,YAAY,GAAG,KAAG,GAEnE,GACA,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,SAAS,MAAM,YAAY,GAAG,KAAG,GAEnE,GACA,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,SAAS,MAAM,YAAY,GAAG,KAAG,GAEnE,GAGA,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,SAAS,MAAM,YAAY,GAAG,KAAG,GAEnE,GACA,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,SAAS,MAAM,YAAY,GAAG,KAAG,GAEnE,GACA,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,SAAS,MAAM,YAAY,GAAG,KAAG,GAEnE,GAGA,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,OAAM,cAAa,SAAS,MAAM,YAAY,GAAG,KAAG,GAEtF,GACA,oCAAC,UAAO,MAAM,WAAW,GAAG,OAAK,MAAC,SAAS,aAAW,GAEtD,CACF;AAEJ;",
+  "names": []
+}

package/dist/components/form-control/select/Select.js

@@ -0,0 +1,196 @@
+import { children, createSignal, For, Show, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { IconChevronDown } from "@tabler/icons-solidjs";
+import { Icon } from "../../display/Icon";
+import { Dropdown } from "../../disclosure/Dropdown";
+import { List } from "../../data/list/List";
+import { SelectContext } from "./SelectContext";
+import { SelectItem } from "./SelectItem";
+import { ripple } from "../../../directives/ripple";
+import { splitSlots } from "../../../helpers/splitSlots";
+import { borderDefault, textMuted } from "../../../styles/tokens.styles";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
+void ripple;
+const multiTagClass = clsx("rounded", "bg-base-200 px-1", "dark:bg-base-600");
+const selectedValueClass = clsx("flex-1", "whitespace-nowrap");
+const SelectAction = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ...rest,
+      type: "button",
+      "data-select-action": true,
+      class: twMerge(
+        clsx(
+          "border",
+          borderDefault,
+          "px-1.5",
+          "rounded-r",
+          "font-bold text-primary-500",
+          "hover:bg-base-100 dark:hover:bg-base-700"
+        ),
+        local.class
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        if (typeof rest.onClick === "function") {
+          rest.onClick(e);
+        }
+      }
+    },
+    local.children
+  );
+};
+const SelectHeader = (props) => /* @__PURE__ */ React.createElement("div", { "data-select-header": true }, props.children);
+const templateFnMap = /* @__PURE__ */ new WeakMap();
+const SelectItemTemplate = (props) => /* @__PURE__ */ React.createElement(
+  "span",
+  {
+    ref: (el) => {
+      templateFnMap.set(el, props.children);
+    },
+    "data-select-item-template": true,
+    style: { display: "none" }
+  }
+);
+const Select = (props) => {
+  const [local, rest] = splitProps(props, [
+    "children",
+    "class",
+    "style",
+    "value",
+    "onValueChange",
+    "multiple",
+    "disabled",
+    "required",
+    "placeholder",
+    "size",
+    "inset",
+    "multiDisplayDirection",
+    "hideSelectAll",
+    "items",
+    "getChildren",
+    "renderValue"
+  ]);
+  let triggerRef;
+  const [open, setOpen] = createSignal(false);
+  const [getValue, setInternalValue] = createControllableSignal({
+    value: () => local.value,
+    onChange: () => local.onValueChange
+  });
+  const isSelected = (value) => {
+    const current = getValue();
+    if (current === void 0) return false;
+    if (local.multiple) {
+      return Array.isArray(current) && current.includes(value);
+    }
+    return current === value;
+  };
+  const toggleValue = (value) => {
+    if (local.multiple) {
+      const current = getValue() ?? [];
+      const idx = current.indexOf(value);
+      if (idx >= 0) {
+        setInternalValue([...current.slice(0, idx), ...current.slice(idx + 1)]);
+      } else {
+        setInternalValue([...current, value]);
+      }
+    } else {
+      setInternalValue(value);
+    }
+  };
+  const closeDropdown = () => {
+    setOpen(false);
+  };
+  const contextValue = {
+    multiple: () => local.multiple ?? false,
+    isSelected,
+    toggleValue,
+    closeDropdown
+  };
+  const handleTriggerClick = () => {
+    if (local.disabled) return;
+    setOpen((v) => !v);
+  };
+  const handleTriggerKeyDown = (e) => {
+    if (local.disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setOpen(true);
+    }
+  };
+  const getTriggerClassName = () => getTriggerClass({
+    size: local.size,
+    disabled: local.disabled,
+    inset: local.inset,
+    class: local.class
+  });
+  const SelectInner = (innerProps) => {
+    const resolved = children(() => innerProps.children);
+    const [slots, items] = splitSlots(resolved, ["selectHeader", "selectAction", "selectItemTemplate"]);
+    const getItemTemplate = () => {
+      const templateSlots = slots().selectItemTemplate;
+      if (templateSlots.length === 0) return void 0;
+      return templateFnMap.get(templateSlots[0]);
+    };
+    const renderItems = (itemList, depth) => {
+      const itemTemplate = getItemTemplate();
+      return /* @__PURE__ */ React.createElement(For, { each: itemList }, (item, index) => {
+        var _a;
+        return /* @__PURE__ */ React.createElement(SelectItem, { value: item }, itemTemplate ? itemTemplate(item, index(), depth) : String(item), /* @__PURE__ */ React.createElement(Show, { when: (_a = local.getChildren) == null ? void 0 : _a.call(local, item, index(), depth), keyed: true }, (itemChildren) => /* @__PURE__ */ React.createElement(Show, { when: itemChildren.length > 0 }, /* @__PURE__ */ React.createElement(SelectItem.Children, null, renderItems(itemChildren, depth + 1)))));
+      });
+    };
+    const renderValue = (value) => {
+      if (local.renderValue) {
+        return local.renderValue(value);
+      }
+      const itemTemplate = getItemTemplate();
+      if (itemTemplate) {
+        return itemTemplate(value, 0, 0);
+      }
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, String(value));
+    };
+    const renderSelectedValue = () => {
+      const current = getValue();
+      if (current === void 0 || Array.isArray(current) && current.length === 0) {
+        return /* @__PURE__ */ React.createElement("span", { class: textMuted }, local.placeholder ?? "");
+      }
+      if (local.multiple && Array.isArray(current)) {
+        const direction = local.multiDisplayDirection ?? "horizontal";
+        return /* @__PURE__ */ React.createElement("div", { class: clsx("flex gap-1", direction === "vertical" ? "flex-col" : "flex-wrap") }, /* @__PURE__ */ React.createElement(For, { each: current }, (v) => /* @__PURE__ */ React.createElement("span", { class: multiTagClass }, renderValue(v))));
+      }
+      return renderValue(current);
+    };
+    return /* @__PURE__ */ React.createElement("div", { ...rest, "data-select": true, class: local.inset ? "flex" : "inline-flex" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: triggerRef,
+        "use:ripple": !local.disabled,
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open(),
+        "aria-disabled": local.disabled || void 0,
+        "aria-required": local.required || void 0,
+        tabIndex: local.disabled ? -1 : 0,
+        class: twMerge(getTriggerClassName(), slots().selectAction.length > 0 && "rounded-r-none border-r-0"),
+        style: local.style,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown
+      },
+      /* @__PURE__ */ React.createElement("div", { class: selectedValueClass }, renderSelectedValue()),
+      /* @__PURE__ */ React.createElement("div", { class: chevronWrapperClass }, /* @__PURE__ */ React.createElement(Icon, { icon: IconChevronDown, size: "1em" }))
+    ), /* @__PURE__ */ React.createElement(Show, { when: slots().selectAction.length > 0 }, slots().selectAction), /* @__PURE__ */ React.createElement(Dropdown, { triggerRef: () => triggerRef, open: open(), onOpenChange: setOpen, keyboardNav: true }, /* @__PURE__ */ React.createElement(Show, { when: slots().selectHeader.length > 0 }, slots().selectHeader.single()), /* @__PURE__ */ React.createElement(List, { inset: true, role: "listbox" }, /* @__PURE__ */ React.createElement(Show, { when: local.items, fallback: items() }, renderItems(local.items, 0)))));
+  };
+  return /* @__PURE__ */ React.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(SelectInner, null, local.children));
+};
+Select.Item = SelectItem;
+Select.Action = SelectAction;
+Select.Header = SelectHeader;
+Select.ItemTemplate = SelectItemTemplate;
+export {
+  Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/form-control/select/Select.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/select/Select.tsx"],
+  "sourcesContent": ["import { children, createSignal, For, type JSX, type ParentComponent, Show, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { IconChevronDown } from \"@tabler/icons-solidjs\";\nimport { Icon } from \"../../display/Icon\";\nimport { Dropdown } from \"../../disclosure/Dropdown\";\nimport { List } from \"../../data/list/List\";\nimport { SelectContext, type SelectContextValue } from \"./SelectContext\";\nimport { SelectItem } from \"./SelectItem\";\nimport { ripple } from \"../../../directives/ripple\";\nimport { splitSlots } from \"../../../helpers/splitSlots\";\nimport { borderDefault, type ComponentSize, textMuted } from \"../../../styles/tokens.styles\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { chevronWrapperClass, getTriggerClass } from \"../DropdownTrigger.styles\";\n\nvoid ripple;\n\n// Select \uC804\uC6A9 \uC2A4\uD0C0\uC77C\nconst multiTagClass = clsx(\"rounded\", \"bg-base-200 px-1\", \"dark:bg-base-600\");\nconst selectedValueClass = clsx(\"flex-1\", \"whitespace-nowrap\");\n\n/**\n * Select \uC6B0\uCE21 \uC561\uC158 \uC11C\uBE0C \uCEF4\uD3EC\uB10C\uD2B8\n */\ninterface SelectActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst SelectAction: ParentComponent<SelectActionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\"]);\n\n  return (\n    <button\n      {...rest}\n      type=\"button\"\n      data-select-action\n      class={twMerge(\n        clsx(\n          \"border\",\n          borderDefault,\n          \"px-1.5\",\n          \"rounded-r\",\n          \"font-bold text-primary-500\",\n          \"hover:bg-base-100 dark:hover:bg-base-700\",\n        ),\n        local.class,\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        if (typeof rest.onClick === \"function\") {\n          rest.onClick(e);\n        }\n      }}\n    >\n      {local.children}\n    </button>\n  );\n};\n\n/**\n * \uB4DC\uB86D\uB2E4\uC6B4 \uC0C1\uB2E8 \uCEE4\uC2A4\uD140 \uC601\uC5ED \uC11C\uBE0C \uCEF4\uD3EC\uB10C\uD2B8\n */\nconst SelectHeader: ParentComponent = (props) => <div data-select-header>{props.children}</div>;\n\n/**\n * items prop \uBC29\uC2DD\uC77C \uB54C \uC544\uC774\uD15C \uB80C\uB354\uB9C1 \uD15C\uD50C\uB9BF\n *\n * \uD568\uC218 \uCC38\uC870\uB97C \uC800\uC7A5\uD558\uAE30 \uC704\uD574 \uC804\uC5ED Map \uC0AC\uC6A9\n */\ninterface SelectItemTemplateProps<T> {\n  children: (item: T, index: number, depth: number) => JSX.Element;\n}\n\n// \uD15C\uD50C\uB9BF \uD568\uC218\uB97C \uC800\uC7A5\uD558\uB294 \uC804\uC5ED Map (WeakMap \uC0AC\uC6A9\uD558\uC5EC \uBA54\uBAA8\uB9AC \uB204\uC218 \uBC29\uC9C0)\nconst templateFnMap = new WeakMap<HTMLElement, (item: unknown, index: number, depth: number) => JSX.Element>();\n\nconst SelectItemTemplate = <T,>(props: SelectItemTemplateProps<T>) => (\n  <span\n    ref={(el) => {\n      templateFnMap.set(el, props.children as (item: unknown, index: number, depth: number) => JSX.Element);\n    }}\n    data-select-item-template\n    style={{ display: \"none\" }}\n  />\n);\n\n// Props \uC815\uC758\n\n// \uACF5\uD1B5 Props (value, onValueChange, multiple \uC81C\uC678)\ninterface SelectCommonProps {\n  /** \uBE44\uD65C\uC131\uD654 */\n  disabled?: boolean;\n\n  /** \uD544\uC218 \uC785\uB825 */\n  required?: boolean;\n\n  /** \uBBF8\uC120\uD0DD \uC2DC \uD45C\uC2DC \uD14D\uC2A4\uD2B8 */\n  placeholder?: string;\n\n  /** \uD2B8\uB9AC\uAC70 \uD06C\uAE30 */\n  size?: ComponentSize;\n\n  /** \uD14C\uB450\uB9AC \uC5C6\uB294 \uC2A4\uD0C0\uC77C */\n  inset?: boolean;\n\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\n// \uB2E8\uC77C \uC120\uD0DD Props\ninterface SelectSingleBaseProps<T> extends SelectCommonProps {\n  /** \uB2E4\uC911 \uC120\uD0DD \uBAA8\uB4DC */\n  multiple?: false;\n\n  /** \uD604\uC7AC \uC120\uD0DD\uB41C \uAC12 */\n  value?: T;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: T) => void;\n\n  /** \uB2E4\uC911 \uC120\uD0DD \uC2DC \uD45C\uC2DC \uBC29\uD5A5 (\uB2E8\uC77C \uC120\uD0DD\uC5D0\uC11C\uB294 \uC0AC\uC6A9 \uC548 \uD568) */\n  multiDisplayDirection?: never;\n\n  /** \uC804\uCCB4 \uC120\uD0DD \uBC84\uD2BC \uC228\uAE30\uAE30 (\uB2E8\uC77C \uC120\uD0DD\uC5D0\uC11C\uB294 \uC0AC\uC6A9 \uC548 \uD568) */\n  hideSelectAll?: never;\n}\n\n// \uB2E4\uC911 \uC120\uD0DD Props\ninterface SelectMultipleBaseProps<T> extends SelectCommonProps {\n  /** \uB2E4\uC911 \uC120\uD0DD \uBAA8\uB4DC */\n  multiple: true;\n\n  /** \uD604\uC7AC \uC120\uD0DD\uB41C \uAC12 */\n  value?: T[];\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: T[]) => void;\n\n  /** \uB2E4\uC911 \uC120\uD0DD \uC2DC \uD45C\uC2DC \uBC29\uD5A5 */\n  multiDisplayDirection?: \"horizontal\" | \"vertical\";\n\n  /** \uC804\uCCB4 \uC120\uD0DD \uBC84\uD2BC \uC228\uAE30\uAE30 */\n  hideSelectAll?: boolean;\n}\n\n// items \uBC29\uC2DD\ninterface SelectWithItemsPropsBase<T> {\n  items: T[];\n  getChildren?: (item: T, index: number, depth: number) => T[] | undefined;\n  renderValue?: (value: T) => JSX.Element;\n  children?: JSX.Element;\n}\n\n// children \uBC29\uC2DD\ninterface SelectWithChildrenPropsBase<T> {\n  items?: never;\n  getChildren?: never;\n  renderValue: (value: T) => JSX.Element;\n  children: JSX.Element;\n}\n\nexport type SelectProps<T = unknown> =\n  | (SelectSingleBaseProps<T> & SelectWithItemsPropsBase<T>)\n  | (SelectSingleBaseProps<T> & SelectWithChildrenPropsBase<T>)\n  | (SelectMultipleBaseProps<T> & SelectWithItemsPropsBase<T>)\n  | (SelectMultipleBaseProps<T> & SelectWithChildrenPropsBase<T>);\n\ninterface SelectComponent {\n  <T = unknown>(props: SelectProps<T>): JSX.Element;\n  Item: typeof SelectItem;\n  Action: typeof SelectAction;\n  Header: typeof SelectHeader;\n  ItemTemplate: typeof SelectItemTemplate;\n}\n\n/**\n * Select \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @example\n * ```tsx\n * // children \uBC29\uC2DD\n * <Select value={selected()} onValueChange={setSelected} renderValue={(v) => v.name}>\n *   <Select.Item value={item1}>{item1.name}</Select.Item>\n *   <Select.Item value={item2}>{item2.name}</Select.Item>\n * </Select>\n *\n * // items prop \uBC29\uC2DD\n * <Select items={data} value={selected()} onValueChange={setSelected}>\n *   <Select.ItemTemplate>\n *     {(item) => <>{item.name}</>}\n *   </Select.ItemTemplate>\n * </Select>\n * ```\n */\nexport const Select: SelectComponent = <T,>(props: SelectProps<T>) => {\n  const [local, rest] = splitProps(props as SelectProps<T> & { children?: JSX.Element }, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"value\",\n    \"onValueChange\",\n    \"multiple\",\n    \"disabled\",\n    \"required\",\n    \"placeholder\",\n    \"size\",\n    \"inset\",\n    \"multiDisplayDirection\",\n    \"hideSelectAll\",\n    \"items\",\n    \"getChildren\",\n    \"renderValue\",\n  ]);\n\n  let triggerRef!: HTMLDivElement;\n\n  const [open, setOpen] = createSignal(false);\n\n  // \uC120\uD0DD\uB41C \uAC12 \uAD00\uB9AC (controlled/uncontrolled \uD328\uD134)\n  type ValueType = T | T[] | undefined;\n  const [getValue, setInternalValue] = createControllableSignal<ValueType>({\n    value: () => local.value,\n    onChange: () => local.onValueChange as ((v: ValueType) => void) | undefined,\n  } as Parameters<typeof createControllableSignal<ValueType>>[0]);\n\n  // \uAC12\uC774 \uC120\uD0DD\uB418\uC5B4 \uC788\uB294\uC9C0 \uD655\uC778\n  const isSelected = (value: T): boolean => {\n    const current = getValue();\n    if (current === undefined) return false;\n\n    if (local.multiple) {\n      return Array.isArray(current) && current.includes(value);\n    }\n    return current === value;\n  };\n\n  // \uAC12 \uD1A0\uAE00\n  const toggleValue = (value: T) => {\n    if (local.multiple) {\n      const current = (getValue() as T[] | undefined) ?? [];\n      const idx = current.indexOf(value);\n      if (idx >= 0) {\n        setInternalValue([...current.slice(0, idx), ...current.slice(idx + 1)] as T[]);\n      } else {\n        setInternalValue([...current, value] as T[]);\n      }\n    } else {\n      setInternalValue(value);\n    }\n  };\n\n  // \uB4DC\uB86D\uB2E4\uC6B4 \uB2EB\uAE30\n  const closeDropdown = () => {\n    setOpen(false);\n  };\n\n  // Context \uAC12\n  const contextValue: SelectContextValue<T> = {\n    multiple: () => local.multiple ?? false,\n    isSelected,\n    toggleValue,\n    closeDropdown,\n  };\n\n  // \uD2B8\uB9AC\uAC70 \uD074\uB9AD\n  const handleTriggerClick = () => {\n    if (local.disabled) return;\n    setOpen((v) => !v);\n  };\n\n  // \uD2B8\uB9AC\uAC70 \uD0A4\uBCF4\uB4DC \uCC98\uB9AC (Enter/Space\uB9CC \uCC98\uB9AC, ArrowUp/Down\uC740 Dropdown\uC774 \uCC98\uB9AC)\n  const handleTriggerKeyDown = (e: KeyboardEvent) => {\n    if (local.disabled) return;\n\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      setOpen(true);\n    }\n  };\n\n  // \uD2B8\uB9AC\uAC70 \uD074\uB798\uC2A4\n  const getTriggerClassName = () =>\n    getTriggerClass({\n      size: local.size,\n      disabled: local.disabled,\n      inset: local.inset,\n      class: local.class,\n    });\n\n  // \uB0B4\uBD80 \uCEF4\uD3EC\uB10C\uD2B8: Provider \uC548\uC5D0\uC11C children\uC744 resolve\n  const SelectInner: ParentComponent = (innerProps) => {\n    const resolved = children(() => innerProps.children);\n    const [slots, items] = splitSlots(resolved, [\"selectHeader\", \"selectAction\", \"selectItemTemplate\"] as const);\n\n    // itemTemplate \uD568\uC218 \uCD94\uCD9C\n    const getItemTemplate = (): ((item: T, index: number, depth: number) => JSX.Element) | undefined => {\n      const templateSlots = slots().selectItemTemplate;\n      if (templateSlots.length === 0) return undefined;\n      // WeakMap\uC5D0\uC11C \uD568\uC218 \uCC38\uC870 \uAC00\uC838\uC624\uAE30\n      return templateFnMap.get(templateSlots[0]) as\n        | ((item: T, index: number, depth: number) => JSX.Element)\n        | undefined;\n    };\n\n    // items \uC7AC\uADC0 \uB80C\uB354\uB9C1\n    const renderItems = (itemList: T[], depth: number): JSX.Element => {\n      const itemTemplate = getItemTemplate();\n      return (\n        <For each={itemList}>\n          {(item, index) => (\n            <SelectItem value={item}>\n              {itemTemplate ? itemTemplate(item, index(), depth) : String(item)}\n              <Show when={local.getChildren?.(item, index(), depth)} keyed>\n                {(itemChildren) => (\n                  <Show when={itemChildren.length > 0}>\n                    <SelectItem.Children>{renderItems(itemChildren, depth + 1)}</SelectItem.Children>\n                  </Show>\n                )}\n              </Show>\n            </SelectItem>\n          )}\n        </For>\n      );\n    };\n\n    // \uC120\uD0DD\uB41C \uAC12 \uB80C\uB354\uB9C1 (items \uBC29\uC2DD\uC77C \uB54C itemTemplate \uC7AC\uC0AC\uC6A9)\n    const renderValue = (value: T): JSX.Element => {\n      if (local.renderValue) {\n        return local.renderValue(value);\n      }\n      const itemTemplate = getItemTemplate();\n      if (itemTemplate) {\n        return itemTemplate(value, 0, 0);\n      }\n      return <>{String(value)}</>;\n    };\n\n    // \uC120\uD0DD\uB41C \uAC12 \uD45C\uC2DC\n    const renderSelectedValue = (): JSX.Element => {\n      const current = getValue();\n\n      if (current === undefined || (Array.isArray(current) && current.length === 0)) {\n        return <span class={textMuted}>{local.placeholder ?? \"\"}</span>;\n      }\n\n      if (local.multiple && Array.isArray(current)) {\n        const direction = local.multiDisplayDirection ?? \"horizontal\";\n        return (\n          <div class={clsx(\"flex gap-1\", direction === \"vertical\" ? \"flex-col\" : \"flex-wrap\")}>\n            <For each={current}>{(v) => <span class={multiTagClass}>{renderValue(v)}</span>}</For>\n          </div>\n        );\n      }\n\n      return renderValue(current as T);\n    };\n\n    return (\n      <div {...rest} data-select class={local.inset ? \"flex\" : \"inline-flex\"}>\n        <div\n          ref={triggerRef}\n          use:ripple={!local.disabled}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open()}\n          aria-disabled={local.disabled || undefined}\n          aria-required={local.required || undefined}\n          tabIndex={local.disabled ? -1 : 0}\n          class={twMerge(getTriggerClassName(), slots().selectAction.length > 0 && \"rounded-r-none border-r-0\")}\n          style={local.style}\n          onClick={handleTriggerClick}\n          onKeyDown={handleTriggerKeyDown}\n        >\n          <div class={selectedValueClass}>{renderSelectedValue()}</div>\n          <div class={chevronWrapperClass}>\n            <Icon icon={IconChevronDown} size=\"1em\" />\n          </div>\n        </div>\n        <Show when={slots().selectAction.length > 0}>{slots().selectAction}</Show>\n\n        <Dropdown triggerRef={() => triggerRef} open={open()} onOpenChange={setOpen} keyboardNav>\n          <Show when={slots().selectHeader.length > 0}>{slots().selectHeader.single()}</Show>\n          <List inset role=\"listbox\">\n            <Show when={local.items} fallback={items()}>\n              {renderItems(local.items!, 0)}\n            </Show>\n          </List>\n        </Dropdown>\n      </div>\n    );\n  };\n\n  return (\n    <SelectContext.Provider value={contextValue as SelectContextValue}>\n      <SelectInner>{local.children}</SelectInner>\n    </SelectContext.Provider>\n  );\n};\n\nSelect.Item = SelectItem;\nSelect.Action = SelectAction;\nSelect.Header = SelectHeader;\nSelect.ItemTemplate = SelectItemTemplate;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/form-control/select/SelectContext.js

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

package/dist/components/form-control/select/SelectContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/select/SelectContext.ts"],
+  "sourcesContent": ["import { createContext, useContext, type Accessor } from \"solid-js\";\n\nexport interface SelectContextValue<T = unknown> {\n  /** \uB2E4\uC911 \uC120\uD0DD \uBAA8\uB4DC \uC5EC\uBD80 */\n  multiple: Accessor<boolean>;\n\n  /** \uAC12\uC774 \uC120\uD0DD\uB418\uC5B4 \uC788\uB294\uC9C0 \uD655\uC778 */\n  isSelected: (value: T) => boolean;\n\n  /** \uAC12 \uC120\uD0DD/\uD574\uC81C \uD1A0\uAE00 */\n  toggleValue: (value: T) => void;\n\n  /** \uB4DC\uB86D\uB2E4\uC6B4 \uB2EB\uAE30 */\n  closeDropdown: () => void;\n}\n\nexport const SelectContext = createContext<SelectContextValue>();\n\nexport function useSelectContext<T = unknown>(): SelectContextValue<T> {\n  const context = useContext(SelectContext);\n  if (!context) {\n    throw new Error(\"useSelectContext\uB294 Select \uCEF4\uD3EC\uB10C\uD2B8 \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n  }\n  return context as SelectContextValue<T>;\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAiC;AAgBlD,MAAM,gBAAgB,cAAkC;AAExD,SAAS,mBAAuD;AACrE,QAAM,UAAU,WAAW,aAAa;AACxC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,0IAAgD;AAAA,EAClE;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/components/form-control/select/SelectItem.js

@@ -0,0 +1,65 @@
+import { children, Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { IconCheck } from "@tabler/icons-solidjs";
+import { Icon } from "../../display/Icon";
+import { useSelectContext } from "./SelectContext";
+import { ripple } from "../../../directives/ripple";
+import { List } from "../../data/list/List";
+import { Collapse } from "../../disclosure/Collapse";
+import { splitSlots } from "../../../helpers/splitSlots";
+import {
+  listItemBaseClass,
+  listItemSelectedClass,
+  listItemDisabledClass,
+  listItemIndentGuideClass,
+  listItemContentClass,
+  getListItemSelectedIconClass
+} from "../../data/list/ListItem.styles";
+void ripple;
+const SelectItemChildren = (props) => /* @__PURE__ */ React.createElement("div", { class: "flex", "data-select-item-children": true }, /* @__PURE__ */ React.createElement("div", { class: listItemIndentGuideClass }), /* @__PURE__ */ React.createElement(List, { inset: true, class: "flex-1" }, props.children));
+const SelectItem = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
+  const context = useSelectContext();
+  const resolved = children(() => local.children);
+  const [slots, content] = splitSlots(resolved, ["selectItemChildren"]);
+  const hasChildren = () => slots().selectItemChildren.length > 0;
+  const isSelected = () => context.isSelected(local.value);
+  const useRipple = () => !local.disabled;
+  const handleClick = () => {
+    if (local.disabled) return;
+    context.toggleValue(local.value);
+    if (!context.multiple()) {
+      context.closeDropdown();
+    }
+  };
+  const getClassName = () => twMerge(
+    listItemBaseClass,
+    isSelected() && listItemSelectedClass,
+    local.disabled && listItemDisabledClass,
+    local.class
+  );
+  const getCheckIconClass = () => getListItemSelectedIconClass(isSelected());
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ...rest,
+      type: "button",
+      "use:ripple": useRipple(),
+      class: getClassName(),
+      "data-select-item": true,
+      "data-list-item": true,
+      role: "option",
+      "aria-selected": isSelected() || void 0,
+      "aria-disabled": local.disabled || void 0,
+      tabIndex: local.disabled ? -1 : 0,
+      onClick: handleClick
+    },
+    /* @__PURE__ */ React.createElement(Show, { when: context.multiple() && !hasChildren() }, /* @__PURE__ */ React.createElement(Icon, { icon: IconCheck, class: getCheckIconClass() })),
+    /* @__PURE__ */ React.createElement("span", { class: listItemContentClass }, content())
+  ), /* @__PURE__ */ React.createElement(Show, { when: hasChildren() }, /* @__PURE__ */ React.createElement(Collapse, { open: true }, slots().selectItemChildren.single())));
+};
+SelectItem.Children = SelectItemChildren;
+export {
+  SelectItem
+};
+//# sourceMappingURL=SelectItem.js.map

package/dist/components/form-control/select/SelectItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/select/SelectItem.tsx"],
+  "sourcesContent": ["import { children, type JSX, type ParentComponent, Show, splitProps } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { IconCheck } from \"@tabler/icons-solidjs\";\nimport { Icon } from \"../../display/Icon\";\nimport { useSelectContext } from \"./SelectContext\";\nimport { ripple } from \"../../../directives/ripple\";\nimport { List } from \"../../data/list/List\";\nimport { Collapse } from \"../../disclosure/Collapse\";\nimport { splitSlots } from \"../../../helpers/splitSlots\";\nimport {\n  listItemBaseClass,\n  listItemSelectedClass,\n  listItemDisabledClass,\n  listItemIndentGuideClass,\n  listItemContentClass,\n  getListItemSelectedIconClass,\n} from \"../../data/list/ListItem.styles\";\n\nvoid ripple;\n\n/**\n * \uC911\uCCA9 \uC544\uC774\uD15C\uC744 \uB2F4\uB294 \uC11C\uBE0C \uCEF4\uD3EC\uB10C\uD2B8\n */\nconst SelectItemChildren: ParentComponent = (props) => (\n  <div class=\"flex\" data-select-item-children>\n    <div class={listItemIndentGuideClass} />\n    <List inset class=\"flex-1\">\n      {props.children}\n    </List>\n  </div>\n);\n\nexport interface SelectItemProps<T = unknown> extends Omit<\n  JSX.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"value\" | \"onClick\"\n> {\n  /** \uC544\uC774\uD15C\uC758 \uAC12 */\n  value: T;\n\n  /** \uBE44\uD65C\uC131\uD654 */\n  disabled?: boolean;\n}\n\ninterface SelectItemComponent<T = unknown> extends ParentComponent<SelectItemProps<T>> {\n  Children: typeof SelectItemChildren;\n}\n\n/**\n * Select \uB4DC\uB86D\uB2E4\uC6B4 \uB0B4\uC758 \uC120\uD0DD \uAC00\uB2A5\uD55C \uC544\uC774\uD15C\n *\n * @example\n * ```tsx\n * <Select.Item value={item}>{item.name}</Select.Item>\n *\n * // \uC911\uCCA9 \uC544\uC774\uD15C\n * <Select.Item value={parent}>\n *   {parent.name}\n *   <Select.Item.Children>\n *     <Select.Item value={child}>{child.name}</Select.Item>\n *   </Select.Item.Children>\n * </Select.Item>\n * ```\n */\nexport const SelectItem: SelectItemComponent = <T,>(props: SelectItemProps<T> & { children?: JSX.Element }) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"value\", \"disabled\"]);\n\n  const context = useSelectContext<T>();\n\n  const resolved = children(() => local.children);\n  const [slots, content] = splitSlots(resolved, [\"selectItemChildren\"] as const);\n\n  const hasChildren = () => slots().selectItemChildren.length > 0;\n  const isSelected = () => context.isSelected(local.value);\n  const useRipple = () => !local.disabled;\n\n  const handleClick = () => {\n    if (local.disabled) return;\n\n    context.toggleValue(local.value);\n\n    // \uB2E8\uC77C \uC120\uD0DD \uBAA8\uB4DC\uC5D0\uC11C\uB9CC \uB4DC\uB86D\uB2E4\uC6B4 \uB2EB\uAE30\n    if (!context.multiple()) {\n      context.closeDropdown();\n    }\n  };\n\n  const getClassName = () =>\n    twMerge(\n      listItemBaseClass,\n      isSelected() && listItemSelectedClass,\n      local.disabled && listItemDisabledClass,\n      local.class,\n    );\n\n  const getCheckIconClass = () => getListItemSelectedIconClass(isSelected());\n\n  return (\n    <>\n      <button\n        {...rest}\n        type=\"button\"\n        use:ripple={useRipple()}\n        class={getClassName()}\n        data-select-item\n        data-list-item\n        role=\"option\"\n        aria-selected={isSelected() || undefined}\n        aria-disabled={local.disabled || undefined}\n        tabIndex={local.disabled ? -1 : 0}\n        onClick={handleClick}\n      >\n        <Show when={context.multiple() && !hasChildren()}>\n          <Icon icon={IconCheck} class={getCheckIconClass()} />\n        </Show>\n        <span class={listItemContentClass}>{content()}</span>\n      </button>\n      <Show when={hasChildren()}>\n        <Collapse open={true}>{slots().selectItemChildren.single()}</Collapse>\n      </Show>\n    </>\n  );\n};\n\nSelectItem.Children = SelectItemChildren;\n"],
+  "mappings": "AAAA,SAAS,UAA0C,MAAM,kBAAkB;AAC3E,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,KAAK;AAKL,MAAM,qBAAsC,CAAC,UAC3C,oCAAC,SAAI,OAAM,QAAO,6BAAyB,QACzC,oCAAC,SAAI,OAAO,0BAA0B,GACtC,oCAAC,QAAK,OAAK,MAAC,OAAM,YACf,MAAM,QACT,CACF;AAkCK,MAAM,aAAkC,CAAK,UAA2D;AAC7G,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,SAAS,UAAU,CAAC;AAElF,QAAM,UAAU,iBAAoB;AAEpC,QAAM,WAAW,SAAS,MAAM,MAAM,QAAQ;AAC9C,QAAM,CAAC,OAAO,OAAO,IAAI,WAAW,UAAU,CAAC,oBAAoB,CAAU;AAE7E,QAAM,cAAc,MAAM,MAAM,EAAE,mBAAmB,SAAS;AAC9D,QAAM,aAAa,MAAM,QAAQ,WAAW,MAAM,KAAK;AACvD,QAAM,YAAY,MAAM,CAAC,MAAM;AAE/B,QAAM,cAAc,MAAM;AACxB,QAAI,MAAM,SAAU;AAEpB,YAAQ,YAAY,MAAM,KAAK;AAG/B,QAAI,CAAC,QAAQ,SAAS,GAAG;AACvB,cAAQ,cAAc;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,eAAe,MACnB;AAAA,IACE;AAAA,IACA,WAAW,KAAK;AAAA,IAChB,MAAM,YAAY;AAAA,IAClB,MAAM;AAAA,EACR;AAEF,QAAM,oBAAoB,MAAM,6BAA6B,WAAW,CAAC;AAEzE,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,cAAY,UAAU;AAAA,MACtB,OAAO,aAAa;AAAA,MACpB,oBAAgB;AAAA,MAChB,kBAAc;AAAA,MACd,MAAK;AAAA,MACL,iBAAe,WAAW,KAAK;AAAA,MAC/B,iBAAe,MAAM,YAAY;AAAA,MACjC,UAAU,MAAM,WAAW,KAAK;AAAA,MAChC,SAAS;AAAA;AAAA,IAET,oCAAC,QAAK,MAAM,QAAQ,SAAS,KAAK,CAAC,YAAY,KAC7C,oCAAC,QAAK,MAAM,WAAW,OAAO,kBAAkB,GAAG,CACrD;AAAA,IACA,oCAAC,UAAK,OAAO,wBAAuB,QAAQ,CAAE;AAAA,EAChD,GACA,oCAAC,QAAK,MAAM,YAAY,KACtB,oCAAC,YAAS,MAAM,QAAO,MAAM,EAAE,mBAAmB,OAAO,CAAE,CAC7D,CACF;AAEJ;AAEA,WAAW,WAAW;",
+  "names": []
+}