@simplysm/solid 13.0.0-beta.6

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/checkbox/CheckboxGroup.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, createContext, splitProps, useContext } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { Checkbox } from \"./Checkbox\";\nimport type { CheckboxSize, CheckboxTheme } from \"./Checkbox.styles\";\n\ninterface CheckboxGroupContextValue<T> {\n  value: () => T[];\n  toggle: (item: T) => void;\n  disabled: () => boolean;\n  size: () => CheckboxSize | undefined;\n  theme: () => CheckboxTheme | undefined;\n  inline: () => boolean;\n  inset: () => boolean;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupContextValue<any>>();\n\n// --- CheckboxGroup.Item ---\n\ninterface CheckboxGroupItemProps<T> {\n  value: T;\n  disabled?: boolean;\n  children?: JSX.Element;\n}\n\nfunction CheckboxGroupItemInner<T>(props: CheckboxGroupItemProps<T>) {\n  const ctx = useContext(CheckboxGroupContext);\n  if (!ctx) throw new Error(\"CheckboxGroup.Item\uC740 CheckboxGroup \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n\n  const isSelected = () => ctx.value().includes(props.value);\n\n  return (\n    <Checkbox\n      value={isSelected()}\n      onValueChange={() => ctx.toggle(props.value)}\n      disabled={props.disabled ?? ctx.disabled()}\n      size={ctx.size()}\n      theme={ctx.theme()}\n      inline={ctx.inline()}\n      inset={ctx.inset()}\n    >\n      {props.children}\n    </Checkbox>\n  );\n}\n\n// --- CheckboxGroup ---\n\ninterface CheckboxGroupProps<T> {\n  value?: T[];\n  onValueChange?: (value: T[]) => void;\n  disabled?: boolean;\n  size?: CheckboxSize;\n  theme?: CheckboxTheme;\n  inline?: boolean;\n  inset?: boolean;\n  class?: string;\n  style?: JSX.CSSProperties;\n  children?: JSX.Element;\n}\n\ninterface CheckboxGroupComponent {\n  <T = unknown>(props: CheckboxGroupProps<T>): JSX.Element;\n  Item: typeof CheckboxGroupItemInner;\n}\n\nconst CheckboxGroupInner: ParentComponent<CheckboxGroupProps<unknown>> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"disabled\",\n    \"size\",\n    \"theme\",\n    \"inline\",\n    \"inset\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value ?? [],\n    onChange: () => local.onValueChange,\n  });\n\n  const toggle = (item: unknown) => {\n    setValue((prev) => {\n      if (prev.includes(item)) {\n        return prev.filter((v) => v !== item);\n      }\n      return [...prev, item];\n    });\n  };\n\n  const contextValue: CheckboxGroupContextValue<unknown> = {\n    value,\n    toggle,\n    disabled: () => local.disabled ?? false,\n    size: () => local.size,\n    theme: () => local.theme,\n    inline: () => local.inline ?? false,\n    inset: () => local.inset ?? false,\n  };\n\n  return (\n    <CheckboxGroupContext.Provider value={contextValue}>\n      <div {...rest} class={twMerge(\"inline-flex\", local.class)} style={local.style}>\n        {local.children}\n      </div>\n    </CheckboxGroupContext.Provider>\n  );\n};\n\nexport const CheckboxGroup = CheckboxGroupInner as unknown as CheckboxGroupComponent;\nCheckboxGroup.Item = CheckboxGroupItemInner;\n"],
+  "mappings": "AAAA,SAAyC,eAAe,YAAY,kBAAkB;AACtF,SAAS,eAAe;AACxB,SAAS,gCAAgC;AACzC,SAAS,gBAAgB;AAazB,MAAM,uBAAuB,cAA8C;AAU3E,SAAS,uBAA0B,OAAkC;AACnE,QAAM,MAAM,WAAW,oBAAoB;AAC3C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,0HAAoD;AAE9E,QAAM,aAAa,MAAM,IAAI,MAAM,EAAE,SAAS,MAAM,KAAK;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,WAAW;AAAA,MAClB,eAAe,MAAM,IAAI,OAAO,MAAM,KAAK;AAAA,MAC3C,UAAU,MAAM,YAAY,IAAI,SAAS;AAAA,MACzC,MAAM,IAAI,KAAK;AAAA,MACf,OAAO,IAAI,MAAM;AAAA,MACjB,QAAQ,IAAI,OAAO;AAAA,MACnB,OAAO,IAAI,MAAM;AAAA;AAAA,IAEhB,MAAM;AAAA,EACT;AAEJ;AAsBA,MAAM,qBAAmE,CAAC,UAAU;AAClF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,OAAO,QAAQ,IAAI,yBAAyB;AAAA,IACjD,OAAO,MAAM,MAAM,SAAS,CAAC;AAAA,IAC7B,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAED,QAAM,SAAS,CAAC,SAAkB;AAChC,aAAS,CAAC,SAAS;AACjB,UAAI,KAAK,SAAS,IAAI,GAAG;AACvB,eAAO,KAAK,OAAO,CAAC,MAAM,MAAM,IAAI;AAAA,MACtC;AACA,aAAO,CAAC,GAAG,MAAM,IAAI;AAAA,IACvB,CAAC;AAAA,EACH;AAEA,QAAM,eAAmD;AAAA,IACvD;AAAA,IACA;AAAA,IACA,UAAU,MAAM,MAAM,YAAY;AAAA,IAClC,MAAM,MAAM,MAAM;AAAA,IAClB,OAAO,MAAM,MAAM;AAAA,IACnB,QAAQ,MAAM,MAAM,UAAU;AAAA,IAC9B,OAAO,MAAM,MAAM,SAAS;AAAA,EAC9B;AAEA,SACE,oCAAC,qBAAqB,UAArB,EAA8B,OAAO,gBACpC,oCAAC,SAAK,GAAG,MAAM,OAAO,QAAQ,eAAe,MAAM,KAAK,GAAG,OAAO,MAAM,SACrE,MAAM,QACT,CACF;AAEJ;AAEO,MAAM,gBAAgB;AAC7B,cAAc,OAAO;",
+  "names": []
+}

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/checkbox/RadioGroup.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, createContext, splitProps, useContext } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { Radio } from \"./Radio\";\nimport type { CheckboxSize, CheckboxTheme } from \"./Checkbox.styles\";\n\ninterface RadioGroupContextValue<T> {\n  value: () => T | undefined;\n  select: (item: T) => void;\n  disabled: () => boolean;\n  size: () => CheckboxSize | undefined;\n  theme: () => CheckboxTheme | undefined;\n  inline: () => boolean;\n  inset: () => boolean;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue<any>>();\n\n// --- RadioGroup.Item ---\n\ninterface RadioGroupItemProps<T> {\n  value: T;\n  disabled?: boolean;\n  children?: JSX.Element;\n}\n\nfunction RadioGroupItemInner<T>(props: RadioGroupItemProps<T>) {\n  const ctx = useContext(RadioGroupContext);\n  if (!ctx) throw new Error(\"RadioGroup.Item\uC740 RadioGroup \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n\n  const isSelected = () => ctx.value() === props.value;\n\n  return (\n    <Radio\n      value={isSelected()}\n      onValueChange={() => ctx.select(props.value)}\n      disabled={props.disabled ?? ctx.disabled()}\n      size={ctx.size()}\n      theme={ctx.theme()}\n      inline={ctx.inline()}\n      inset={ctx.inset()}\n    >\n      {props.children}\n    </Radio>\n  );\n}\n\n// --- RadioGroup ---\n\ninterface RadioGroupProps<T> {\n  value?: T;\n  onValueChange?: (value: T) => void;\n  disabled?: boolean;\n  size?: CheckboxSize;\n  theme?: CheckboxTheme;\n  inline?: boolean;\n  inset?: boolean;\n  class?: string;\n  style?: JSX.CSSProperties;\n  children?: JSX.Element;\n}\n\ninterface RadioGroupComponent {\n  <T = unknown>(props: RadioGroupProps<T>): JSX.Element;\n  Item: typeof RadioGroupItemInner;\n}\n\nconst RadioGroupInner: ParentComponent<RadioGroupProps<unknown>> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"disabled\",\n    \"size\",\n    \"theme\",\n    \"inline\",\n    \"inset\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value,\n    onChange: () => local.onValueChange,\n  });\n\n  const select = (item: unknown) => {\n    setValue(item);\n  };\n\n  const contextValue: RadioGroupContextValue<unknown> = {\n    value,\n    select,\n    disabled: () => local.disabled ?? false,\n    size: () => local.size,\n    theme: () => local.theme,\n    inline: () => local.inline ?? false,\n    inset: () => local.inset ?? false,\n  };\n\n  return (\n    <RadioGroupContext.Provider value={contextValue}>\n      <div {...rest} class={twMerge(\"inline-flex\", local.class)} style={local.style}>\n        {local.children}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n};\n\nexport const RadioGroup = RadioGroupInner as unknown as RadioGroupComponent;\nRadioGroup.Item = RadioGroupItemInner;\n"],
+  "mappings": "AAAA,SAAyC,eAAe,YAAY,kBAAkB;AACtF,SAAS,eAAe;AACxB,SAAS,gCAAgC;AACzC,SAAS,aAAa;AAatB,MAAM,oBAAoB,cAA2C;AAUrE,SAAS,oBAAuB,OAA+B;AAC7D,QAAM,MAAM,WAAW,iBAAiB;AACxC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,oHAA8C;AAExE,QAAM,aAAa,MAAM,IAAI,MAAM,MAAM,MAAM;AAE/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,WAAW;AAAA,MAClB,eAAe,MAAM,IAAI,OAAO,MAAM,KAAK;AAAA,MAC3C,UAAU,MAAM,YAAY,IAAI,SAAS;AAAA,MACzC,MAAM,IAAI,KAAK;AAAA,MACf,OAAO,IAAI,MAAM;AAAA,MACjB,QAAQ,IAAI,OAAO;AAAA,MACnB,OAAO,IAAI,MAAM;AAAA;AAAA,IAEhB,MAAM;AAAA,EACT;AAEJ;AAsBA,MAAM,kBAA6D,CAAC,UAAU;AAC5E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,OAAO,QAAQ,IAAI,yBAAyB;AAAA,IACjD,OAAO,MAAM,MAAM;AAAA,IACnB,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAED,QAAM,SAAS,CAAC,SAAkB;AAChC,aAAS,IAAI;AAAA,EACf;AAEA,QAAM,eAAgD;AAAA,IACpD;AAAA,IACA;AAAA,IACA,UAAU,MAAM,MAAM,YAAY;AAAA,IAClC,MAAM,MAAM,MAAM;AAAA,IAClB,OAAO,MAAM,MAAM;AAAA,IACnB,QAAQ,MAAM,MAAM,UAAU;AAAA,IAC9B,OAAO,MAAM,MAAM,SAAS;AAAA,EAC9B;AAEA,SACE,oCAAC,kBAAkB,UAAlB,EAA2B,OAAO,gBACjC,oCAAC,SAAK,GAAG,MAAM,OAAO,QAAQ,eAAe,MAAM,KAAK,GAAG,OAAO,MAAM,SACrE,MAAM,QACT,CACF;AAEJ;AAEO,MAAM,aAAa;AAC1B,WAAW,OAAO;",
+  "names": []
+}

package/dist/components/form-control/color-picker/ColorPicker.js

@@ -0,0 +1,55 @@
+import { splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+const baseClass = clsx(
+  "size-field",
+  "rounded",
+  "border border-black/10 dark:border-white/10",
+  "cursor-pointer",
+  // color input 기본 스타일 제거
+  "[&::-webkit-color-swatch-wrapper]:p-0",
+  "[&::-webkit-color-swatch]:border-none",
+  "[&::-webkit-color-swatch]:rounded-none",
+  "[&::-moz-color-swatch]:border-none",
+  "[&::-moz-color-swatch]:rounded-none"
+);
+const sizeClasses = {
+  sm: "size-field-sm",
+  lg: "size-field-lg"
+};
+const disabledClass = clsx(
+  "cursor-default",
+  "relative",
+  "before:absolute before:bottom-0 before:left-0 before:right-0 before:top-0",
+  "before:bg-[linear-gradient(45deg,transparent_40%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.4)_60%,transparent_60%)]"
+);
+const ColorPicker = (props) => {
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "title", "disabled", "size", "class", "style"]);
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value ?? "#000000",
+    onChange: () => local.onValueChange
+  });
+  const handleInput = (e) => {
+    setValue(e.currentTarget.value);
+  };
+  const getClassName = () => twMerge(baseClass, local.size && sizeClasses[local.size], local.disabled && disabledClass, local.class);
+  return /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ...rest,
+      "data-color-picker": true,
+      type: "color",
+      class: getClassName(),
+      style: local.style,
+      value: value(),
+      title: local.title,
+      disabled: local.disabled,
+      onInput: handleInput
+    }
+  );
+};
+export {
+  ColorPicker
+};
+//# sourceMappingURL=ColorPicker.js.map

package/dist/components/form-control/color-picker/ColorPicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/color-picker/ColorPicker.tsx"],
+  "sourcesContent": ["import { type Component, type JSX, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\n\ntype ColorPickerSize = \"sm\" | \"lg\";\n\n// \uAE30\uBCF8 \uC2A4\uD0C0\uC77C\nconst baseClass = clsx(\n  \"size-field\",\n  \"rounded\",\n  \"border border-black/10 dark:border-white/10\",\n  \"cursor-pointer\",\n  // color input \uAE30\uBCF8 \uC2A4\uD0C0\uC77C \uC81C\uAC70\n  \"[&::-webkit-color-swatch-wrapper]:p-0\",\n  \"[&::-webkit-color-swatch]:border-none\",\n  \"[&::-webkit-color-swatch]:rounded-none\",\n  \"[&::-moz-color-swatch]:border-none\",\n  \"[&::-moz-color-swatch]:rounded-none\",\n);\n\n// \uC0AC\uC774\uC988\uBCC4 \uC2A4\uD0C0\uC77C\nconst sizeClasses: Record<ColorPickerSize, string> = {\n  sm: \"size-field-sm\",\n  lg: \"size-field-lg\",\n};\n\n// disabled \uC2A4\uD0C0\uC77C - \uB300\uAC01\uC120 \uC904\uBB34\uB2AC\uB85C \uD45C\uC2DC\n// eslint-disable-next-line tailwindcss/enforces-shorthand -- inset\uC740 Chrome 87+\uC5D0\uC11C\uB9CC \uC9C0\uC6D0\nconst disabledClass = clsx(\n  \"cursor-default\",\n  \"relative\",\n  \"before:absolute before:bottom-0 before:left-0 before:right-0 before:top-0\",\n  \"before:bg-[linear-gradient(45deg,transparent_40%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.4)_60%,transparent_60%)]\",\n);\n\nexport interface ColorPickerProps {\n  /** \uC0C9\uC0C1 \uAC12 (#RRGGBB \uD615\uC2DD) */\n  value?: string;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: string) => void;\n\n  /** \uD0C0\uC774\uD2C0 (\uD234\uD301) */\n  title?: string;\n\n  /** \uBE44\uD65C\uC131\uD654 */\n  disabled?: boolean;\n\n  /** \uC0AC\uC774\uC988 */\n  size?: ColorPickerSize;\n\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\n/**\n * ColorPicker \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @example\n * ```tsx\n * <ColorPicker value={color()} onValueChange={setColor} />\n * ```\n */\nexport const ColorPicker: Component<ColorPickerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"value\", \"onValueChange\", \"title\", \"disabled\", \"size\", \"class\", \"style\"]);\n\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value ?? \"#000000\",\n    onChange: () => local.onValueChange,\n  });\n\n  const handleInput: JSX.InputEventHandler<HTMLInputElement, InputEvent> = (e) => {\n    setValue(e.currentTarget.value);\n  };\n\n  const getClassName = () =>\n    twMerge(baseClass, local.size && sizeClasses[local.size], local.disabled && disabledClass, local.class);\n\n  return (\n    <input\n      {...rest}\n      data-color-picker\n      type=\"color\"\n      class={getClassName()}\n      style={local.style}\n      value={value()}\n      title={local.title}\n      disabled={local.disabled}\n      onInput={handleInput}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,SAAmC,kBAAkB;AACrD,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,gCAAgC;AAKzC,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGA,MAAM,cAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AACN;AAIA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAiCO,MAAM,cAA2C,CAAC,UAAU;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,iBAAiB,SAAS,YAAY,QAAQ,SAAS,OAAO,CAAC;AAEjH,QAAM,CAAC,OAAO,QAAQ,IAAI,yBAAyB;AAAA,IACjD,OAAO,MAAM,MAAM,SAAS;AAAA,IAC5B,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAED,QAAM,cAAmE,CAAC,MAAM;AAC9E,aAAS,EAAE,cAAc,KAAK;AAAA,EAChC;AAEA,QAAM,eAAe,MACnB,QAAQ,WAAW,MAAM,QAAQ,YAAY,MAAM,IAAI,GAAG,MAAM,YAAY,eAAe,MAAM,KAAK;AAExG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,qBAAiB;AAAA,MACjB,MAAK;AAAA,MACL,OAAO,aAAa;AAAA,MACpB,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,MACb,UAAU,MAAM;AAAA,MAChB,SAAS;AAAA;AAAA,EACX;AAEJ;",
+  "names": []
+}

package/dist/components/form-control/combobox/Combobox.js

@@ -0,0 +1,214 @@
+import { children, createSignal, For, onCleanup, Show, splitProps } from "solid-js";
+import clsx from "clsx";
+import { IconChevronDown, IconLoader2 } from "@tabler/icons-solidjs";
+import { DebounceQueue } from "@simplysm/core-common";
+import { Icon } from "../../display/Icon";
+import { Dropdown } from "../../disclosure/Dropdown";
+import { List } from "../../data/list/List";
+import { ComboboxContext } from "./ComboboxContext";
+import { ComboboxItem } from "./ComboboxItem";
+import { ripple } from "../../../directives/ripple";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { splitSlots } from "../../../helpers/splitSlots";
+import { textMuted } from "../../../styles/tokens.styles";
+import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
+void ripple;
+const selectedValueClass = clsx("flex-1", "whitespace-nowrap", "overflow-hidden");
+const inputClass = clsx(
+  "min-w-0 flex-1",
+  "bg-transparent outline-none",
+  "placeholder:text-base-400 dark:placeholder:text-base-500"
+);
+const noResultsClass = clsx("px-3 py-2", textMuted);
+const templateFnMap = /* @__PURE__ */ new WeakMap();
+const ComboboxItemTemplate = (props) => /* @__PURE__ */ React.createElement(
+  "span",
+  {
+    ref: (el) => {
+      templateFnMap.set(el, props.children);
+    },
+    "data-combobox-item-template": true,
+    style: { display: "none" }
+  }
+);
+const Combobox = (props) => {
+  const [local, rest] = splitProps(props, [
+    "children",
+    "class",
+    "style",
+    "value",
+    "onValueChange",
+    "loadItems",
+    "debounceMs",
+    "allowCustomValue",
+    "parseCustomValue",
+    "renderValue",
+    "disabled",
+    "required",
+    "placeholder",
+    "size",
+    "inset"
+  ]);
+  let triggerRef;
+  const [open, setOpen] = createSignal(false);
+  const [query, setQuery] = createSignal("");
+  const [items, setItems] = createSignal([]);
+  const [loading, setLoading] = createSignal(false);
+  const [getValue, setInternalValue] = createControllableSignal({
+    value: () => local.value,
+    onChange: () => local.onValueChange
+  });
+  const debounceQueue = new DebounceQueue(local.debounceMs ?? 300);
+  onCleanup(() => {
+    debounceQueue.dispose();
+  });
+  const isSelected = (value) => {
+    const current = getValue();
+    return current === value;
+  };
+  const selectValue = (value) => {
+    setInternalValue(value);
+    setQuery("");
+    setOpen(false);
+  };
+  const closeDropdown = () => {
+    setOpen(false);
+  };
+  const contextValue = {
+    isSelected,
+    selectValue,
+    closeDropdown
+  };
+  const performSearch = (searchQuery) => {
+    const loadItemsFn = local.loadItems;
+    debounceQueue.run(async () => {
+      setLoading(true);
+      try {
+        const result = await loadItemsFn(searchQuery);
+        setItems(result);
+      } finally {
+        setLoading(false);
+      }
+    });
+  };
+  const handleInput = (e) => {
+    const target = e.currentTarget;
+    const newQuery = target.value;
+    setQuery(newQuery);
+    performSearch(newQuery);
+    if (!open()) {
+      setOpen(true);
+    }
+  };
+  const handleTriggerClick = (e) => {
+    if (local.disabled) return;
+    const target = e.target;
+    if (target.tagName === "INPUT") {
+      if (!open()) {
+        setOpen(true);
+        performSearch(query());
+      }
+    } else {
+      const wasOpen = open();
+      setOpen(!wasOpen);
+      if (!wasOpen) {
+        performSearch(query());
+      }
+    }
+  };
+  const handleTriggerKeyDown = (e) => {
+    if (local.disabled) return;
+    if (e.key === "ArrowDown" && !open()) {
+      e.preventDefault();
+      setOpen(true);
+      performSearch(query());
+    } else if (e.key === "Escape" && open()) {
+      e.preventDefault();
+      setOpen(false);
+    } else if (e.key === "Enter" && local.allowCustomValue && query().trim() !== "") {
+      e.preventDefault();
+      const customValue = local.parseCustomValue ? local.parseCustomValue(query()) : query();
+      selectValue(customValue);
+    }
+  };
+  const getTriggerClassName = () => getTriggerClass({
+    size: local.size,
+    disabled: local.disabled,
+    inset: local.inset,
+    class: local.class
+  });
+  const ComboboxInner = (innerProps) => {
+    const resolved = children(() => innerProps.children);
+    const [slots, childItems] = splitSlots(resolved, ["comboboxItemTemplate"]);
+    const getItemTemplate = () => {
+      const templateSlots = slots().comboboxItemTemplate;
+      if (templateSlots.length === 0) return void 0;
+      return templateFnMap.get(templateSlots[0]);
+    };
+    const renderDisplayContent = () => {
+      const currentValue = getValue();
+      if (open() || currentValue === void 0) {
+        return /* @__PURE__ */ React.createElement(
+          "input",
+          {
+            ref: (el) => {
+              if (open()) {
+                requestAnimationFrame(() => el.focus());
+              }
+            },
+            type: "text",
+            class: inputClass,
+            value: query(),
+            placeholder: currentValue === void 0 ? local.placeholder : void 0,
+            disabled: local.disabled,
+            onInput: handleInput
+          }
+        );
+      }
+      return /* @__PURE__ */ React.createElement("div", { class: "truncate" }, local.renderValue(currentValue));
+    };
+    const renderItems = () => {
+      const itemTemplate = getItemTemplate();
+      if (loading()) {
+        return /* @__PURE__ */ React.createElement("div", { class: noResultsClass }, "\uAC80\uC0C9 \uC911...");
+      }
+      const resolvedChildren = childItems();
+      if (resolvedChildren.length > 0) {
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, resolvedChildren);
+      }
+      if (items().length === 0) {
+        return /* @__PURE__ */ React.createElement("div", { class: noResultsClass }, "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4");
+      }
+      if (itemTemplate) {
+        return /* @__PURE__ */ React.createElement(For, { each: items() }, (item, index) => /* @__PURE__ */ React.createElement(ComboboxItem, { value: item }, itemTemplate(item, index())));
+      }
+      return /* @__PURE__ */ React.createElement(For, { each: items() }, (item) => /* @__PURE__ */ React.createElement(ComboboxItem, { value: item }, String(item)));
+    };
+    return /* @__PURE__ */ React.createElement("div", { ...rest, "data-combobox": 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: getTriggerClassName(),
+        style: local.style,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown
+      },
+      /* @__PURE__ */ React.createElement("div", { class: selectedValueClass }, renderDisplayContent()),
+      /* @__PURE__ */ React.createElement("div", { class: chevronWrapperClass }, /* @__PURE__ */ React.createElement(Show, { when: loading(), fallback: /* @__PURE__ */ React.createElement(Icon, { icon: IconChevronDown, size: "1em" }) }, /* @__PURE__ */ React.createElement(Icon, { icon: IconLoader2, size: "1em", class: "animate-spin" })))
+    ), /* @__PURE__ */ React.createElement(Dropdown, { triggerRef: () => triggerRef, open: open(), onOpenChange: setOpen, keyboardNav: true }, /* @__PURE__ */ React.createElement(List, { inset: true, role: "listbox" }, renderItems())));
+  };
+  return /* @__PURE__ */ React.createElement(ComboboxContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(ComboboxInner, null, local.children));
+};
+Combobox.Item = ComboboxItem;
+Combobox.ItemTemplate = ComboboxItemTemplate;
+export {
+  Combobox
+};
+//# sourceMappingURL=Combobox.js.map

package/dist/components/form-control/combobox/Combobox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/combobox/Combobox.tsx"],
+  "sourcesContent": ["import { children, createSignal, For, type JSX, onCleanup, Show, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { IconChevronDown, IconLoader2 } from \"@tabler/icons-solidjs\";\nimport { DebounceQueue } from \"@simplysm/core-common\";\nimport { Icon } from \"../../display/Icon\";\nimport { Dropdown } from \"../../disclosure/Dropdown\";\nimport { List } from \"../../data/list/List\";\nimport { ComboboxContext, type ComboboxContextValue } from \"./ComboboxContext\";\nimport { ComboboxItem } from \"./ComboboxItem\";\nimport { ripple } from \"../../../directives/ripple\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { splitSlots } from \"../../../helpers/splitSlots\";\nimport { type ComponentSize, textMuted } from \"../../../styles/tokens.styles\";\nimport { chevronWrapperClass, getTriggerClass } from \"../DropdownTrigger.styles\";\n\nvoid ripple;\n\n// Combobox \uC804\uC6A9 \uC2A4\uD0C0\uC77C\nconst selectedValueClass = clsx(\"flex-1\", \"whitespace-nowrap\", \"overflow-hidden\");\nconst inputClass = clsx(\n  \"min-w-0 flex-1\",\n  \"bg-transparent outline-none\",\n  \"placeholder:text-base-400 dark:placeholder:text-base-500\",\n);\n\nconst noResultsClass = clsx(\"px-3 py-2\", textMuted);\n\n/**\n * Combobox \uC544\uC774\uD15C \uB80C\uB354\uB9C1 \uD15C\uD50C\uB9BF\n */\ninterface ComboboxItemTemplateProps<T> {\n  children: (item: T, index: number) => JSX.Element;\n}\n\n// \uD15C\uD50C\uB9BF \uD568\uC218\uB97C \uC800\uC7A5\uD558\uB294 \uC804\uC5ED WeakMap\nconst templateFnMap = new WeakMap<HTMLElement, (item: unknown, index: number) => JSX.Element>();\n\nconst ComboboxItemTemplate = <T,>(props: ComboboxItemTemplateProps<T>) => (\n  <span\n    ref={(el) => {\n      templateFnMap.set(el, props.children as (item: unknown, index: number) => JSX.Element);\n    }}\n    data-combobox-item-template\n    style={{ display: \"none\" }}\n  />\n);\n\n// Props \uC815\uC758\nexport interface ComboboxProps<T = unknown> {\n  /** \uD604\uC7AC \uC120\uD0DD\uB41C \uAC12 */\n  value?: T;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: T) => void;\n\n  /** \uC544\uC774\uD15C \uB85C\uB4DC \uD568\uC218 (\uD544\uC218) */\n  loadItems: (query: string) => Promise<T[]>;\n\n  /** \uB514\uBC14\uC6B4\uC2A4 \uB51C\uB808\uC774 (\uAE30\uBCF8\uAC12: 300ms) */\n  debounceMs?: number;\n\n  /** \uCEE4\uC2A4\uD140 \uAC12 \uD5C8\uC6A9 */\n  allowCustomValue?: boolean;\n\n  /** \uCEE4\uC2A4\uD140 \uAC12 \uD30C\uC2F1 \uD568\uC218 */\n  parseCustomValue?: (text: string) => T;\n\n  /** \uC120\uD0DD\uB41C \uAC12\uC744 \uB80C\uB354\uB9C1\uD558\uB294 \uD568\uC218 (\uD544\uC218) */\n  renderValue: (value: T) => JSX.Element;\n\n  /** \uBE44\uD65C\uC131\uD654 */\n  disabled?: boolean;\n\n  /** \uD544\uC218 \uC785\uB825 */\n  required?: boolean;\n\n  /** \uD50C\uB808\uC774\uC2A4\uD640\uB354 */\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  /** children (Combobox.Item \uB610\uB294 Combobox.ItemTemplate) */\n  children?: JSX.Element;\n}\n\ninterface ComboboxComponent {\n  <T = unknown>(props: ComboboxProps<T>): JSX.Element;\n  Item: typeof ComboboxItem;\n  ItemTemplate: typeof ComboboxItemTemplate;\n}\n\n/**\n * Combobox \uCEF4\uD3EC\uB10C\uD2B8\n *\n * \uBE44\uB3D9\uAE30 \uAC80\uC0C9\uACFC \uC544\uC774\uD15C \uC120\uD0DD\uC744 \uC9C0\uC6D0\uD558\uB294 \uC790\uB3D9\uC644\uC131 \uCEF4\uD3EC\uB10C\uD2B8\uC785\uB2C8\uB2E4.\n *\n * @example\n * ```tsx\n * // \uAE30\uBCF8 \uC0AC\uC6A9\n * <Combobox\n *   loadItems={async (query) => {\n *     const response = await fetch(`/api/search?q=${query}`);\n *     return response.json();\n *   }}\n *   renderValue={(item) => item.name}\n *   value={selected()}\n *   onValueChange={setSelected}\n * >\n *   <Combobox.ItemTemplate>\n *     {(item) => <>{item.name}</>}\n *   </Combobox.ItemTemplate>\n * </Combobox>\n *\n * // children \uBC29\uC2DD\n * <Combobox loadItems={loadItems} renderValue={(v) => v.name}>\n *   <For each={items()}>\n *     {(item) => <Combobox.Item value={item}>{item.name}</Combobox.Item>}\n *   </For>\n * </Combobox>\n * ```\n */\nexport const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {\n  const [local, rest] = splitProps(props as ComboboxProps<T> & { children?: JSX.Element }, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"value\",\n    \"onValueChange\",\n    \"loadItems\",\n    \"debounceMs\",\n    \"allowCustomValue\",\n    \"parseCustomValue\",\n    \"renderValue\",\n    \"disabled\",\n    \"required\",\n    \"placeholder\",\n    \"size\",\n    \"inset\",\n  ]);\n\n  let triggerRef!: HTMLDivElement;\n\n  // \uC0C1\uD0DC\n  const [open, setOpen] = createSignal(false);\n  const [query, setQuery] = createSignal(\"\");\n  const [items, setItems] = createSignal<T[]>([]);\n  const [loading, setLoading] = createSignal(false);\n\n  // \uC120\uD0DD\uB41C \uAC12 \uAD00\uB9AC (controlled/uncontrolled \uD328\uD134)\n  const [getValue, setInternalValue] = createControllableSignal<T | undefined>({\n    value: () => local.value,\n    onChange: () => local.onValueChange,\n  } as Parameters<typeof createControllableSignal<T | undefined>>[0]);\n\n  // \uB514\uBC14\uC6B4\uC2A4 \uD050 (\uB9C8\uC6B4\uD2B8 \uC2DC \uD55C \uBC88\uB9CC \uC0DD\uC131, debounceMs\uB294 \uCD08\uAE30\uAC12\uB9CC \uC0AC\uC6A9)\n  // eslint-disable-next-line solid/reactivity -- \uB514\uBC14\uC6B4\uC2A4 \uD050\uB294 \uB9C8\uC6B4\uD2B8 \uC2DC\uC810\uC758 debounceMs\uB85C \uD55C \uBC88\uB9CC \uC0DD\uC131\n  const debounceQueue = new DebounceQueue(local.debounceMs ?? 300);\n\n  onCleanup(() => {\n    debounceQueue.dispose();\n  });\n\n  // \uAC12\uC774 \uC120\uD0DD\uB418\uC5B4 \uC788\uB294\uC9C0 \uD655\uC778\n  const isSelected = (value: T): boolean => {\n    const current = getValue();\n    return current === value;\n  };\n\n  // \uAC12 \uC120\uD0DD\n  const selectValue = (value: T) => {\n    setInternalValue(value);\n    setQuery(\"\");\n    setOpen(false);\n  };\n\n  // \uB4DC\uB86D\uB2E4\uC6B4 \uB2EB\uAE30\n  const closeDropdown = () => {\n    setOpen(false);\n  };\n\n  // Context \uAC12\n  const contextValue: ComboboxContextValue<T> = {\n    isSelected,\n    selectValue,\n    closeDropdown,\n  };\n\n  // \uAC80\uC0C9 \uC2E4\uD589\n  const performSearch = (searchQuery: string) => {\n    // loadItems \uD568\uC218 \uCC38\uC870\uB97C \uCEA1\uCC98\uD558\uC5EC \uC0AC\uC6A9\n    const loadItemsFn = local.loadItems;\n    debounceQueue.run(async () => {\n      setLoading(true);\n      try {\n        const result = await loadItemsFn(searchQuery);\n        setItems(result);\n      } finally {\n        setLoading(false);\n      }\n    });\n  };\n\n  // \uC785\uB825 \uD578\uB4E4\uB7EC\n  const handleInput = (e: InputEvent) => {\n    const target = e.currentTarget as HTMLInputElement;\n    const newQuery = target.value;\n    setQuery(newQuery);\n    performSearch(newQuery);\n\n    if (!open()) {\n      setOpen(true);\n    }\n  };\n\n  // \uD2B8\uB9AC\uAC70 \uD074\uB9AD\n  const handleTriggerClick = (e: MouseEvent) => {\n    if (local.disabled) return;\n\n    // input \uD074\uB9AD \uC2DC \uB4DC\uB86D\uB2E4\uC6B4 \uD1A0\uAE00\n    const target = e.target as HTMLElement;\n    if (target.tagName === \"INPUT\") {\n      if (!open()) {\n        setOpen(true);\n        performSearch(query());\n      }\n    } else {\n      // \uB2E4\uB978 \uC601\uC5ED \uD074\uB9AD \uC2DC \uD1A0\uAE00\n      const wasOpen = open();\n      setOpen(!wasOpen);\n      if (!wasOpen) {\n        performSearch(query());\n      }\n    }\n  };\n\n  // \uD2B8\uB9AC\uAC70 \uD0A4\uBCF4\uB4DC \uCC98\uB9AC\n  const handleTriggerKeyDown = (e: KeyboardEvent) => {\n    if (local.disabled) return;\n\n    if (e.key === \"ArrowDown\" && !open()) {\n      e.preventDefault();\n      setOpen(true);\n      performSearch(query());\n    } else if (e.key === \"Escape\" && open()) {\n      e.preventDefault();\n      setOpen(false);\n    } else if (e.key === \"Enter\" && local.allowCustomValue && query().trim() !== \"\") {\n      e.preventDefault();\n      const customValue = local.parseCustomValue ? local.parseCustomValue(query()) : (query() as T);\n      selectValue(customValue);\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  // \uCC38\uACE0: \uCD08\uAE30 \uAC80\uC0C9\uC740 handleTriggerClick\uC5D0\uC11C \uC218\uD589\uB428\n  // \uC785\uB825 \uC2DC\uC5D0\uB294 handleInput\uC5D0\uC11C performSearch\uAC00 \uD638\uCD9C\uB428\n\n  // \uB0B4\uBD80 \uCEF4\uD3EC\uB10C\uD2B8\n  const ComboboxInner = (innerProps: { children?: JSX.Element }) => {\n    const resolved = children(() => innerProps.children);\n    const [slots, childItems] = splitSlots(resolved, [\"comboboxItemTemplate\"] as const);\n\n    // itemTemplate \uD568\uC218 \uCD94\uCD9C\n    const getItemTemplate = (): ((item: T, index: number) => JSX.Element) | undefined => {\n      const templateSlots = slots().comboboxItemTemplate;\n      if (templateSlots.length === 0) return undefined;\n      return templateFnMap.get(templateSlots[0]) as ((item: T, index: number) => JSX.Element) | undefined;\n    };\n\n    // \uC120\uD0DD\uB41C \uAC12 \uB610\uB294 \uC785\uB825 \uD45C\uC2DC\n    const renderDisplayContent = (): JSX.Element => {\n      const currentValue = getValue();\n\n      // \uB4DC\uB86D\uB2E4\uC6B4\uC774 \uC5F4\uB824\uC788\uAC70\uB098 \uAC12\uC774 \uC5C6\uC73C\uBA74 \uC785\uB825 \uD544\uB4DC \uD45C\uC2DC\n      if (open() || currentValue === undefined) {\n        return (\n          <input\n            ref={(el) => {\n              // \uB4DC\uB86D\uB2E4\uC6B4\uC774 \uC5F4\uB9B4 \uB54C input\uC5D0 \uD3EC\uCEE4\uC2A4\n              if (open()) {\n                requestAnimationFrame(() => el.focus());\n              }\n            }}\n            type=\"text\"\n            class={inputClass}\n            value={query()}\n            placeholder={currentValue === undefined ? local.placeholder : undefined}\n            disabled={local.disabled}\n            onInput={handleInput}\n          />\n        );\n      }\n\n      // \uAC12\uC774 \uC788\uACE0 \uB4DC\uB86D\uB2E4\uC6B4\uC774 \uB2EB\uD600\uC788\uC73C\uBA74 \uAC12 \uD45C\uC2DC\n      return <div class=\"truncate\">{local.renderValue(currentValue)}</div>;\n    };\n\n    // \uC544\uC774\uD15C \uB80C\uB354\uB9C1\n    const renderItems = (): JSX.Element => {\n      const itemTemplate = getItemTemplate();\n\n      // \uB85C\uB529 \uC911\n      if (loading()) {\n        return <div class={noResultsClass}>\uAC80\uC0C9 \uC911...</div>;\n      }\n\n      // children \uBC29\uC2DD (\uC544\uC774\uD15C\uC774 \uC9C1\uC811 \uC804\uB2EC\uB41C \uACBD\uC6B0)\n      const resolvedChildren = childItems();\n      if (resolvedChildren.length > 0) {\n        return <>{resolvedChildren}</>;\n      }\n\n      // items\uAC00 \uBE44\uC5B4\uC788\uB294 \uACBD\uC6B0\n      if (items().length === 0) {\n        return <div class={noResultsClass}>\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4</div>;\n      }\n\n      // ItemTemplate \uBC29\uC2DD\n      if (itemTemplate) {\n        return (\n          <For each={items()}>\n            {(item, index) => <ComboboxItem value={item}>{itemTemplate(item, index())}</ComboboxItem>}\n          </For>\n        );\n      }\n\n      // \uAE30\uBCF8 \uB80C\uB354\uB9C1\n      return <For each={items()}>{(item) => <ComboboxItem value={item}>{String(item)}</ComboboxItem>}</For>;\n    };\n\n    return (\n      <div {...rest} data-combobox 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={getTriggerClassName()}\n          style={local.style}\n          onClick={handleTriggerClick}\n          onKeyDown={handleTriggerKeyDown}\n        >\n          <div class={selectedValueClass}>{renderDisplayContent()}</div>\n          <div class={chevronWrapperClass}>\n            <Show when={loading()} fallback={<Icon icon={IconChevronDown} size=\"1em\" />}>\n              <Icon icon={IconLoader2} size=\"1em\" class=\"animate-spin\" />\n            </Show>\n          </div>\n        </div>\n\n        <Dropdown triggerRef={() => triggerRef} open={open()} onOpenChange={setOpen} keyboardNav>\n          <List inset role=\"listbox\">\n            {renderItems()}\n          </List>\n        </Dropdown>\n      </div>\n    );\n  };\n\n  return (\n    <ComboboxContext.Provider value={contextValue as ComboboxContextValue}>\n      <ComboboxInner>{local.children}</ComboboxInner>\n    </ComboboxContext.Provider>\n  );\n};\n\nCombobox.Item = ComboboxItem;\nCombobox.ItemTemplate = ComboboxItemTemplate;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/form-control/combobox/ComboboxContext.js

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

package/dist/components/form-control/combobox/ComboboxContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/combobox/ComboboxContext.ts"],
+  "sourcesContent": ["import { createContext, useContext } from \"solid-js\";\n\nexport interface ComboboxContextValue<T = unknown> {\n  /** \uAC12\uC774 \uC120\uD0DD\uB418\uC5B4 \uC788\uB294\uC9C0 \uD655\uC778 */\n  isSelected: (value: T) => boolean;\n\n  /** \uAC12 \uC120\uD0DD */\n  selectValue: (value: T) => void;\n\n  /** \uB4DC\uB86D\uB2E4\uC6B4 \uB2EB\uAE30 */\n  closeDropdown: () => void;\n}\n\nexport const ComboboxContext = createContext<ComboboxContextValue>();\n\nexport function useComboboxContext<T = unknown>(): ComboboxContextValue<T> {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(\"useComboboxContext\uB294 Combobox \uCEF4\uD3EC\uB10C\uD2B8 \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n  }\n  return context as ComboboxContextValue<T>;\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAanC,MAAM,kBAAkB,cAAoC;AAE5D,SAAS,qBAA2D;AACzE,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,8IAAoD;AAAA,EACtE;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/components/form-control/combobox/ComboboxItem.js

@@ -0,0 +1,49 @@
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { useComboboxContext } from "./ComboboxContext";
+import { ripple } from "../../../directives/ripple";
+import {
+  listItemBaseClass,
+  listItemSelectedClass,
+  listItemDisabledClass,
+  listItemContentClass
+} from "../../data/list/ListItem.styles";
+void ripple;
+const ComboboxItem = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
+  const context = useComboboxContext();
+  const isSelected = () => context.isSelected(local.value);
+  const useRipple = () => !local.disabled;
+  const handleClick = () => {
+    if (local.disabled) return;
+    context.selectValue(local.value);
+    context.closeDropdown();
+  };
+  const getClassName = () => twMerge(
+    listItemBaseClass,
+    isSelected() && listItemSelectedClass,
+    local.disabled && listItemDisabledClass,
+    local.class
+  );
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ...rest,
+      type: "button",
+      "use:ripple": useRipple(),
+      class: getClassName(),
+      "data-combobox-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("span", { class: listItemContentClass }, local.children)
+  );
+};
+export {
+  ComboboxItem
+};
+//# sourceMappingURL=ComboboxItem.js.map

package/dist/components/form-control/combobox/ComboboxItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/combobox/ComboboxItem.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, splitProps } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useComboboxContext } from \"./ComboboxContext\";\nimport { ripple } from \"../../../directives/ripple\";\nimport {\n  listItemBaseClass,\n  listItemSelectedClass,\n  listItemDisabledClass,\n  listItemContentClass,\n} from \"../../data/list/ListItem.styles\";\n\nvoid ripple;\n\nexport interface ComboboxItemProps<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\n/**\n * Combobox \uB4DC\uB86D\uB2E4\uC6B4 \uB0B4\uC758 \uC120\uD0DD \uAC00\uB2A5\uD55C \uC544\uC774\uD15C\n */\nexport const ComboboxItem: ParentComponent<ComboboxItemProps> = <T,>(\n  props: ComboboxItemProps<T> & { children?: JSX.Element },\n) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"value\", \"disabled\"]);\n\n  const context = useComboboxContext<T>();\n\n  const isSelected = () => context.isSelected(local.value);\n  const useRipple = () => !local.disabled;\n\n  const handleClick = () => {\n    if (local.disabled) return;\n    context.selectValue(local.value);\n    context.closeDropdown();\n  };\n\n  const getClassName = () =>\n    twMerge(\n      listItemBaseClass,\n      isSelected() && listItemSelectedClass,\n      local.disabled && listItemDisabledClass,\n      local.class,\n    );\n\n  return (\n    <button\n      {...rest}\n      type=\"button\"\n      use:ripple={useRipple()}\n      class={getClassName()}\n      data-combobox-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      <span class={listItemContentClass}>{local.children}</span>\n    </button>\n  );\n};\n"],
+  "mappings": "AAAA,SAAyC,kBAAkB;AAC3D,SAAS,eAAe;AACxB,SAAS,0BAA0B;AACnC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,KAAK;AAgBE,MAAM,eAAmD,CAC9D,UACG;AACH,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,SAAS,UAAU,CAAC;AAElF,QAAM,UAAU,mBAAsB;AAEtC,QAAM,aAAa,MAAM,QAAQ,WAAW,MAAM,KAAK;AACvD,QAAM,YAAY,MAAM,CAAC,MAAM;AAE/B,QAAM,cAAc,MAAM;AACxB,QAAI,MAAM,SAAU;AACpB,YAAQ,YAAY,MAAM,KAAK;AAC/B,YAAQ,cAAc;AAAA,EACxB;AAEA,QAAM,eAAe,MACnB;AAAA,IACE;AAAA,IACA,WAAW,KAAK;AAAA,IAChB,MAAM,YAAY;AAAA,IAClB,MAAM;AAAA,EACR;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,cAAY,UAAU;AAAA,MACtB,OAAO,aAAa;AAAA,MACpB,sBAAkB;AAAA,MAClB,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,UAAK,OAAO,wBAAuB,MAAM,QAAS;AAAA,EACrD;AAEJ;",
+  "names": []
+}