@tipp/ui 2.3.32 → 2.3.34

package/dist/molecules/autocomplete-textfield.cjs

@@ -0,0 +1,417 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/molecules/autocomplete-textfield.tsx
+var autocomplete_textfield_exports = {};
+__export(autocomplete_textfield_exports, {
+  AutocompleteTextfield: () => AutocompleteTextfield
+});
+module.exports = __toCommonJS(autocomplete_textfield_exports);
+var import_react4 = require("react");
+var import_themes4 = require("@radix-ui/themes");
+
+// src/atoms/text-field.tsx
+var import_themes = require("@radix-ui/themes");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Root = (0, import_react.forwardRef)((props, ref) => {
+  const _a = props, { error, style, className } = _a, rest = __objRest(_a, ["error", "style", "className"]);
+  const fieldStyle = (0, import_react.useMemo)(() => {
+    if (!error) return style;
+    const errorStyle = {
+      boxShadow: "inset 0 0 0 var(--text-field-border-width) var(--error-11)"
+    };
+    return __spreadValues(__spreadValues({}, style || {}), errorStyle);
+  }, [error, style]);
+  const classNameStr = error ? `error ${className}` : className;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.TextField.Root,
+    __spreadValues({
+      className: classNameStr,
+      ref,
+      style: fieldStyle
+    }, rest)
+  );
+});
+Root.displayName = "TextField.Root";
+var TextField = { Root, Slot: import_themes.TextField.Slot };
+
+// src/atoms/dropdown-menu.tsx
+var import_themes2 = require("@radix-ui/themes");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Content = (0, import_react2.forwardRef)((props, ref) => {
+  const _a = props, { isNavigation, className } = _a, rest = __objRest(_a, ["isNavigation", "className"]);
+  const contentClassName = (0, import_react2.useMemo)(() => {
+    const cls = isNavigation ? "dropdown-navigation" : "";
+    return [cls, className].join(" ");
+  }, [isNavigation, className]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_themes2.DropdownMenu.Content,
+    __spreadProps(__spreadValues({
+      ref
+    }, rest), {
+      className: contentClassName
+    })
+  );
+});
+Content.displayName = "DropdownMenu.Content";
+var Trigger = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild: _asChild } = _b, props = __objRest(_b, ["asChild"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.DropdownMenu.Trigger, __spreadValues({ ref }, props));
+  }
+);
+Trigger.displayName = "DropdownMenu.Trigger";
+var DropdownMenu = __spreadProps(__spreadValues({}, import_themes2.DropdownMenu), {
+  Content,
+  Trigger
+});
+
+// src/atoms/typo.tsx
+var import_themes3 = require("@radix-ui/themes");
+var import_react3 = require("react");
+
+// src/utils/map-with-responsive.ts
+var mapWithResponsive = (args) => {
+  const { value, mapFn } = args;
+  if (typeof value === "string") {
+    return mapFn(value);
+  }
+  ;
+  if (typeof value === "object") {
+    const newObj = {};
+    let key;
+    for (key in value) {
+      newObj[key] = mapFn(value[key]);
+    }
+    return newObj;
+  }
+  return value;
+};
+
+// src/atoms/typo.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Typo = (0, import_react3.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
+    const radixSize = (0, import_react3.useMemo)(() => {
+      if (size !== void 0) return size;
+      if (variant === void 0) return "2";
+      return mapWithResponsive({
+        value: variant,
+        mapFn: (variantValue) => {
+          switch (variantValue) {
+            case "caption":
+              return "1";
+            case "subtitle":
+              return "3";
+            case "body":
+            default:
+              return "2";
+          }
+        }
+      });
+    }, [size, variant]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+  }
+);
+Typo.displayName = "Typo";
+
+// src/molecules/autocomplete-textfield.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AutocompleteTextfield = (0, import_react4.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      options,
+      value: externalValue,
+      onChange,
+      onSelect,
+      placeholder,
+      emptyMessage = "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+      maxItems = 10,
+      slotLeft,
+      slotRight,
+      error
+    } = _b, rest = __objRest(_b, [
+      "options",
+      "value",
+      "onChange",
+      "onSelect",
+      "placeholder",
+      "emptyMessage",
+      "maxItems",
+      "slotLeft",
+      "slotRight",
+      "error"
+    ]);
+    const isControlled = externalValue !== void 0;
+    const [internalValue, setInternalValue] = (0, import_react4.useState)("");
+    const inputValue = isControlled ? externalValue : internalValue;
+    const [open, setOpen] = (0, import_react4.useState)(false);
+    const [highlightedIndex, setHighlightedIndex] = (0, import_react4.useState)(-1);
+    const inputRef = (0, import_react4.useRef)(null);
+    const listRef = (0, import_react4.useRef)(null);
+    const listboxId = (0, import_react4.useId)();
+    const justSelectedRef = (0, import_react4.useRef)(false);
+    const filtered = options.filter(
+      (opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase())
+    ).slice(0, maxItems);
+    const handleInputChange = (0, import_react4.useCallback)(
+      (e) => {
+        const next = e.target.value;
+        if (!isControlled) setInternalValue(next);
+        onChange == null ? void 0 : onChange(next);
+        const nextFiltered = options.filter((opt) => opt.label.toLowerCase().includes(next.toLowerCase())).slice(0, maxItems);
+        setOpen(nextFiltered.length > 0 || emptyMessage !== null);
+        setHighlightedIndex(-1);
+      },
+      [isControlled, onChange, options, maxItems, emptyMessage]
+    );
+    const handleSelect = (0, import_react4.useCallback)(
+      (option) => {
+        var _a2;
+        if (!isControlled) setInternalValue(option.label);
+        onChange == null ? void 0 : onChange(option.label);
+        onSelect == null ? void 0 : onSelect(option);
+        setOpen(false);
+        setHighlightedIndex(-1);
+        justSelectedRef.current = true;
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      },
+      [isControlled, onChange, onSelect]
+    );
+    const handleFocus = (0, import_react4.useCallback)(() => {
+      if (justSelectedRef.current) {
+        justSelectedRef.current = false;
+        return;
+      }
+      const currentFiltered = options.filter((opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase())).slice(0, maxItems);
+      setOpen(currentFiltered.length > 0 || emptyMessage !== null);
+    }, [options, inputValue, maxItems, emptyMessage]);
+    const handleBlur = (0, import_react4.useCallback)((e) => {
+      var _a2, _b2;
+      if (e.relatedTarget && ((_b2 = (_a2 = inputRef.current) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b2.contains(e.relatedTarget))) {
+        return;
+      }
+      setOpen(false);
+      setHighlightedIndex(-1);
+    }, []);
+    const handleKeyDown = (0, import_react4.useCallback)(
+      (e) => {
+        if (!open) {
+          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            setOpen(true);
+            setHighlightedIndex(0);
+            e.preventDefault();
+          }
+          return;
+        }
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            setHighlightedIndex(
+              (prev) => prev < filtered.length - 1 ? prev + 1 : 0
+            );
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            setHighlightedIndex(
+              (prev) => prev > 0 ? prev - 1 : filtered.length - 1
+            );
+            break;
+          case "Enter":
+            e.preventDefault();
+            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {
+              handleSelect(filtered[highlightedIndex]);
+            }
+            break;
+          case "Escape":
+            setOpen(false);
+            setHighlightedIndex(-1);
+            break;
+          case "Tab":
+            setOpen(false);
+            setHighlightedIndex(-1);
+            break;
+          default:
+            break;
+        }
+      },
+      [open, filtered, highlightedIndex, handleSelect]
+    );
+    (0, import_react4.useEffect)(() => {
+      if (!listRef.current || highlightedIndex < 0) return;
+      const item = listRef.current.children[highlightedIndex];
+      item.scrollIntoView({ block: "nearest" });
+    }, [highlightedIndex]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_themes4.Box, { position: "relative", style: { width: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        TextField.Root,
+        __spreadProps(__spreadValues({
+          "aria-activedescendant": open && highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : void 0,
+          "aria-autocomplete": "list",
+          "aria-controls": open ? listboxId : void 0,
+          "aria-expanded": open,
+          error,
+          onBlur: handleBlur,
+          onChange: handleInputChange,
+          onFocus: handleFocus,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          ref: (node) => {
+            inputRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          role: "combobox",
+          style: { width: "100%" },
+          value: inputValue
+        }, rest), {
+          children: [
+            slotLeft && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextField.Slot, { side: "left", children: slotLeft }),
+            slotRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextField.Slot, { side: "right", children: slotRight })
+          ]
+        })
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        DropdownMenu.Root,
+        {
+          modal: false,
+          onOpenChange: (nextOpen) => {
+            if (!nextOpen && document.activeElement !== inputRef.current) {
+              setOpen(false);
+              setHighlightedIndex(-1);
+            }
+          },
+          open,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: {
+                  bottom: 0,
+                  height: 0,
+                  left: 0,
+                  opacity: 0,
+                  pointerEvents: "none",
+                  position: "absolute",
+                  width: "100%"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              DropdownMenu.Content,
+              {
+                align: "start",
+                onCloseAutoFocus: (e) => {
+                  e.preventDefault();
+                },
+                onOpenAutoFocus: (e) => {
+                  e.preventDefault();
+                },
+                sideOffset: 4,
+                style: {
+                  maxHeight: 240,
+                  overflowY: "auto",
+                  padding: 0,
+                  width: "var(--radix-dropdown-menu-trigger-width)"
+                },
+                children: filtered.length === 0 && emptyMessage !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Box, { px: "2", py: "2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Typo, { color: "gray", children: emptyMessage }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "ul",
+                  {
+                    id: listboxId,
+                    ref: listRef,
+                    role: "listbox",
+                    style: { listStyle: "none", margin: 0, padding: 0 },
+                    children: filtered.map((option, index) => {
+                      const isHighlighted = index === highlightedIndex;
+                      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "li",
+                        {
+                          "aria-selected": isHighlighted,
+                          id: `${listboxId}-option-${index}`,
+                          onMouseEnter: () => {
+                            setHighlightedIndex(index);
+                          },
+                          onPointerDown: (e) => {
+                            e.preventDefault();
+                            handleSelect(option);
+                          },
+                          role: "option",
+                          style: {
+                            padding: "var(--spacing-4) var(--spacing-6)",
+                            cursor: "pointer",
+                            backgroundColor: isHighlighted ? "var(--accent-3)" : "transparent",
+                            transition: "background-color 80ms"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Typo, { variant: "body", children: option.label })
+                        },
+                        option.value
+                      );
+                    })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+AutocompleteTextfield.displayName = "AutocompleteTextfield";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutocompleteTextfield
+});
+//# sourceMappingURL=autocomplete-textfield.cjs.map

package/dist/molecules/autocomplete-textfield.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/molecules/autocomplete-textfield.tsx","../../src/atoms/text-field.tsx","../../src/atoms/dropdown-menu.tsx","../../src/atoms/typo.tsx","../../src/utils/map-with-responsive.ts"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { Box } from '@radix-ui/themes';\nimport { TextField, type RootProps as TextFieldRootProps } from '../atoms/text-field';\nimport { DropdownMenu } from '../atoms/dropdown-menu';\nimport { Typo } from '../atoms/typo';\n\nexport interface AutocompleteOption {\n  label: string;\n  value: string;\n}\n\nexport interface AutocompleteTextfieldProps\n  extends Omit<TextFieldRootProps, 'value' | 'onChange' | 'onSelect'> {\n  options: AutocompleteOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  onSelect?: (option: AutocompleteOption) => void;\n  placeholder?: string;\n  /** 빈 결과일 때 표시할 메시지. null이면 빈 결과 시 드롭다운을 표시하지 않음 */\n  emptyMessage?: string | null;\n  /** 최대 표시 항목 수 (기본값: 10) */\n  maxItems?: number;\n  /** TextField 왼쪽 슬롯 (아이콘 등) */\n  slotLeft?: React.ReactNode;\n  /** TextField 오른쪽 슬롯 (아이콘 등) */\n  slotRight?: React.ReactNode;\n}\n\nexport const AutocompleteTextfield = forwardRef<\n  HTMLInputElement,\n  AutocompleteTextfieldProps\n>(\n  (\n    {\n      options,\n      value: externalValue,\n      onChange,\n      onSelect,\n      placeholder,\n      emptyMessage = '검색 결과가 없습니다.',\n      maxItems = 10,\n      slotLeft,\n      slotRight,\n      error,\n      ...rest\n    },\n    ref\n  ): React.ReactElement => {\n    const isControlled = externalValue !== undefined;\n    const [internalValue, setInternalValue] = useState('');\n    const inputValue = isControlled ? externalValue : internalValue;\n\n    const [open, setOpen] = useState(false);\n    const [highlightedIndex, setHighlightedIndex] = useState(-1);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const listboxId = useId();\n    const justSelectedRef = useRef(false);\n\n    const filtered = options\n      .filter((opt: AutocompleteOption) =>\n        opt.label.toLowerCase().includes(inputValue.toLowerCase())\n      )\n      .slice(0, maxItems);\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const next = e.target.value;\n        if (!isControlled) setInternalValue(next);\n        onChange?.(next);\n        const nextFiltered = options\n          .filter((opt) => opt.label.toLowerCase().includes(next.toLowerCase()))\n          .slice(0, maxItems);\n        setOpen(nextFiltered.length > 0 || emptyMessage !== null);\n        setHighlightedIndex(-1);\n      },\n      [isControlled, onChange, options, maxItems, emptyMessage]\n    );\n\n    const handleSelect = useCallback(\n      (option: AutocompleteOption) => {\n        if (!isControlled) setInternalValue(option.label);\n        onChange?.(option.label);\n        onSelect?.(option);\n        setOpen(false);\n        setHighlightedIndex(-1);\n        justSelectedRef.current = true;\n        inputRef.current?.focus();\n      },\n      [isControlled, onChange, onSelect]\n    );\n\n    const handleFocus = useCallback(() => {\n      if (justSelectedRef.current) {\n        justSelectedRef.current = false;\n        return;\n      }\n      const currentFiltered = options\n        .filter((opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase()))\n        .slice(0, maxItems);\n      setOpen(currentFiltered.length > 0 || emptyMessage !== null);\n    }, [options, inputValue, maxItems, emptyMessage]);\n\n    const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      // 포커스가 dropdown content 내부로 이동한 경우 닫지 않음\n      if (e.relatedTarget && inputRef.current?.parentElement?.contains(e.relatedTarget as Node)) {\n        return;\n      }\n      setOpen(false);\n      setHighlightedIndex(-1);\n    }, []);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (!open) {\n          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n            setOpen(true);\n            setHighlightedIndex(0);\n            e.preventDefault();\n          }\n          return;\n        }\n\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            setHighlightedIndex((prev) =>\n              prev < filtered.length - 1 ? prev + 1 : 0\n            );\n            break;\n          case 'ArrowUp':\n            e.preventDefault();\n            setHighlightedIndex((prev) =>\n              prev > 0 ? prev - 1 : filtered.length - 1\n            );\n            break;\n          case 'Enter':\n            e.preventDefault();\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {\n              handleSelect(filtered[highlightedIndex]);\n            }\n            break;\n          case 'Escape':\n            setOpen(false);\n            setHighlightedIndex(-1);\n            break;\n          case 'Tab':\n            setOpen(false);\n            setHighlightedIndex(-1);\n            break;\n          default:\n            break;\n        }\n      },\n      [open, filtered, highlightedIndex, handleSelect]\n    );\n\n    // 하이라이트 항목을 리스트 뷰에 스크롤\n    useEffect(() => {\n      if (!listRef.current || highlightedIndex < 0) return;\n      const item = listRef.current.children[highlightedIndex];\n      (item as HTMLElement).scrollIntoView({ block: 'nearest' });\n    }, [highlightedIndex]);\n\n    return (\n      <Box position=\"relative\" style={{ width: '100%' }}>\n        <TextField.Root\n          aria-activedescendant={\n            open && highlightedIndex >= 0\n              ? `${listboxId}-option-${highlightedIndex}`\n              : undefined\n          }\n          aria-autocomplete=\"list\"\n          aria-controls={open ? listboxId : undefined}\n          aria-expanded={open}\n          error={error}\n          onBlur={handleBlur}\n          onChange={handleInputChange}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          ref={(node) => {\n            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n              node;\n            if (typeof ref === 'function') {\n              ref(node);\n            } else if (ref) {\n              (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n                node;\n            }\n          }}\n          role=\"combobox\"\n          style={{ width: '100%' }}\n          value={inputValue}\n          {...rest}\n        >\n          {slotLeft && <TextField.Slot side=\"left\">{slotLeft}</TextField.Slot>}\n          {slotRight && <TextField.Slot side=\"right\">{slotRight}</TextField.Slot>}\n        </TextField.Root>\n\n        {/* DropdownMenu.Trigger는 포지셔닝 앵커 전용으로 사용 (비대화형) */}\n        <DropdownMenu.Root\n          modal={false}\n          onOpenChange={(nextOpen) => {\n            if (!nextOpen && document.activeElement !== inputRef.current) {\n              setOpen(false);\n              setHighlightedIndex(-1);\n            }\n          }}\n          open={open}\n        >\n          <DropdownMenu.Trigger asChild>\n            <span\n              aria-hidden=\"true\"\n              style={{\n                bottom: 0,\n                height: 0,\n                left: 0,\n                opacity: 0,\n                pointerEvents: 'none',\n                position: 'absolute',\n                width: '100%',\n              }}\n            />\n          </DropdownMenu.Trigger>\n\n          <DropdownMenu.Content\n            align=\"start\"\n            onCloseAutoFocus={(e: Event) => {\n              e.preventDefault();\n            }}\n            onOpenAutoFocus={(e: Event) => {\n              e.preventDefault();\n            }}\n            sideOffset={4}\n            style={{\n              maxHeight: 240,\n              overflowY: 'auto',\n              padding: 0,\n              width: 'var(--radix-dropdown-menu-trigger-width)',\n            }}\n          >\n            {filtered.length === 0 && emptyMessage !== null ? (\n              <Box px=\"2\" py=\"2\">\n                <Typo color=\"gray\">\n                  {emptyMessage}\n                </Typo>\n              </Box>\n            ) : (\n              <ul\n                id={listboxId}\n                ref={listRef}\n                role=\"listbox\"\n                style={{ listStyle: 'none', margin: 0, padding: 0 }}\n              >\n                {filtered.map((option, index) => {\n                  const isHighlighted = index === highlightedIndex;\n                  return (\n                    <li\n                      aria-selected={isHighlighted}\n                      id={`${listboxId}-option-${index}`}\n                      key={option.value}\n                      onMouseEnter={() => {\n                        setHighlightedIndex(index);\n                      }}\n                      onPointerDown={(e) => {\n                        // blur 전에 선택되도록 pointerdown 사용\n                        e.preventDefault();\n                        handleSelect(option);\n                      }}\n                      role=\"option\"\n                      style={{\n                        padding: 'var(--spacing-4) var(--spacing-6)',\n                        cursor: 'pointer',\n                        backgroundColor: isHighlighted\n                          ? 'var(--accent-3)'\n                          : 'transparent',\n                        transition: 'background-color 80ms',\n                      }}\n                    >\n                      <Typo variant=\"body\">{option.label}</Typo>\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </DropdownMenu.Content>\n        </DropdownMenu.Root>\n      </Box>\n    );\n  }\n);\n\nAutocompleteTextfield.displayName = 'AutocompleteTextfield';\n","import { TextField as RTextField } from '@radix-ui/themes';\nimport { forwardRef, useMemo } from 'react';\n\ntype RSlotProps = RTextField.SlotProps;\n\ntype RootProps = RTextField.RootProps & { error?: boolean };\n\nconst Root = forwardRef<\n  HTMLInputElement,\n  RTextField.RootProps & { error?: boolean }\n>((props, ref) => {\n  const { error, style, className, ...rest } = props;\n\n  const fieldStyle = useMemo(() => {\n    if (!error) return style;\n    const errorStyle = {\n      boxShadow: 'inset 0 0 0 var(--text-field-border-width) var(--error-11)',\n    };\n\n    return { ...(style || {}), ...errorStyle };\n  }, [error, style]);\n\n  const classNameStr = error ? `error ${className}` : className;\n  return (\n    <RTextField.Root\n      className={classNameStr}\n      ref={ref}\n      style={fieldStyle}\n      {...rest}\n    />\n  );\n});\n\nRoot.displayName = 'TextField.Root';\n\nconst TextField = { Root, Slot: RTextField.Slot };\n\nexport { TextField };\nexport type { RootProps, RSlotProps as SlotProps };\n","import { DropdownMenu as RadixDropdownMenu } from '@radix-ui/themes';\nimport { forwardRef, useMemo } from 'react';\n\ntype ContentProps = RadixDropdownMenu.ContentProps & {\n  isNavigation?: boolean;\n  onOpenAutoFocus?: (event: Event) => void;\n};\n\nconst Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {\n  const { isNavigation, className, ...rest } = props;\n  const contentClassName = useMemo(() => {\n    const cls = isNavigation ? 'dropdown-navigation' : '';\n    return [cls, className].join(' ');\n  }, [isNavigation, className]);\n\n  return (\n    <RadixDropdownMenu.Content\n      ref={ref}\n      {...rest}\n      className={contentClassName}\n    />\n  );\n});\n\nContent.displayName = 'DropdownMenu.Content';\n\n/** @radix-ui/themes의 DropdownMenu.Trigger는 asChild 타입이 누락되어 있어 별도로 확장 */\ntype TriggerProps = RadixDropdownMenu.TriggerProps & { asChild?: boolean };\n\nconst Trigger = forwardRef<HTMLButtonElement, TriggerProps>(\n  ({ asChild: _asChild, ...props }, ref) => (\n    <RadixDropdownMenu.Trigger ref={ref} {...props} />\n  ),\n);\n\nTrigger.displayName = 'DropdownMenu.Trigger';\n\nexport const DropdownMenu = {\n  ...RadixDropdownMenu,\n  Content,\n  Trigger,\n};\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport type TypoProps = RadixTextProps & {\n  variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactNode => {\n    const { size, variant, children, ...rest } = props;\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n\n      if (variant === undefined) return '2';\n\n      return mapWithResponsive({\n        value: variant,\n        mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n          switch (variantValue) {\n            case 'caption':\n              return '1';\n            case 'subtitle':\n              return '3';\n            case 'body':\n            default:\n              return '2';\n          }\n        },\n      });\n    }, [size, variant]);\n\n    return (\n      <RadixText {...rest} ref={ref} size={radixSize}>\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n","import type {  Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args:  {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n  const {value, mapFn} = args;\n  if(typeof value === 'string'){\n    return mapFn(value);\n  };\n  \n  if(typeof value === 'object'){\n    const newObj: Partial<Record<Breakpoint, K>> = {};\n    let key: Breakpoint;\n    for(key in value){\n      newObj[key] = mapFn(value[key]);\n    }\n    return newObj;\n  }\n  return value;\n};\n"],"mappings":"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","names":["import_react","import_themes","RTextField","import_themes","import_react","import_jsx_runtime","RadixDropdownMenu","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","_a","_b"]}

package/dist/molecules/autocomplete-textfield.d.cts

@@ -0,0 +1,26 @@
+import React__default from 'react';
+import { RootProps } from '../atoms/text-field.cjs';
+import '@radix-ui/themes';
+
+interface AutocompleteOption {
+    label: string;
+    value: string;
+}
+interface AutocompleteTextfieldProps extends Omit<RootProps, 'value' | 'onChange' | 'onSelect'> {
+    options: AutocompleteOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    onSelect?: (option: AutocompleteOption) => void;
+    placeholder?: string;
+    /** 빈 결과일 때 표시할 메시지. null이면 빈 결과 시 드롭다운을 표시하지 않음 */
+    emptyMessage?: string | null;
+    /** 최대 표시 항목 수 (기본값: 10) */
+    maxItems?: number;
+    /** TextField 왼쪽 슬롯 (아이콘 등) */
+    slotLeft?: React__default.ReactNode;
+    /** TextField 오른쪽 슬롯 (아이콘 등) */
+    slotRight?: React__default.ReactNode;
+}
+declare const AutocompleteTextfield: React__default.ForwardRefExoticComponent<AutocompleteTextfieldProps & React__default.RefAttributes<HTMLInputElement>>;
+
+export { type AutocompleteOption, AutocompleteTextfield, type AutocompleteTextfieldProps };

package/dist/molecules/autocomplete-textfield.d.ts

@@ -0,0 +1,26 @@
+import React__default from 'react';
+import { RootProps } from '../atoms/text-field.js';
+import '@radix-ui/themes';
+
+interface AutocompleteOption {
+    label: string;
+    value: string;
+}
+interface AutocompleteTextfieldProps extends Omit<RootProps, 'value' | 'onChange' | 'onSelect'> {
+    options: AutocompleteOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    onSelect?: (option: AutocompleteOption) => void;
+    placeholder?: string;
+    /** 빈 결과일 때 표시할 메시지. null이면 빈 결과 시 드롭다운을 표시하지 않음 */
+    emptyMessage?: string | null;
+    /** 최대 표시 항목 수 (기본값: 10) */
+    maxItems?: number;
+    /** TextField 왼쪽 슬롯 (아이콘 등) */
+    slotLeft?: React__default.ReactNode;
+    /** TextField 오른쪽 슬롯 (아이콘 등) */
+    slotRight?: React__default.ReactNode;
+}
+declare const AutocompleteTextfield: React__default.ForwardRefExoticComponent<AutocompleteTextfieldProps & React__default.RefAttributes<HTMLInputElement>>;
+
+export { type AutocompleteOption, AutocompleteTextfield, type AutocompleteTextfieldProps };

package/dist/molecules/autocomplete-textfield.js

@@ -0,0 +1,12 @@
+import {
+  AutocompleteTextfield
+} from "../chunk-LSDD4TAP.js";
+import "../chunk-6NPTJBFE.js";
+import "../chunk-SMLC2O3V.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
+import "../chunk-CRTRMMJ7.js";
+export {
+  AutocompleteTextfield
+};
+//# sourceMappingURL=autocomplete-textfield.js.map

package/dist/molecules/autocomplete-textfield.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.js

@@ -1,34 +1,31 @@
 import {
   ReviewQuestion_default
-} from "../../../../../chunk-TJO4XDI2.js";
-import "../../../../../chunk-RDKURMDJ.js";
-import "../../../../../chunk-TCFXG4AX.js";
-import "../../../../../chunk-76PNGKCB.js";
-import "../../../../../chunk-SAEPW5JF.js";
-import "../../../../../chunk-VK6INFSB.js";
-import "../../../../../chunk-OILH5J7Q.js";
-import "../../../../../chunk-NTJLECYY.js";
-import "../../../../../chunk-W7TBPRHG.js";
-import "../../../../../chunk-CNW3YEAK.js";
+} from "../../../../../chunk-P6C6KRXM.js";
+import "../../../../../chunk-NCNYKQU7.js";
+import "../../../../../chunk-5V6MQUTB.js";
+import "../../../../../chunk-OHXP63A5.js";
+import "../../../../../chunk-HAZBA3RU.js";
+import "../../../../../chunk-VREM33BW.js";
+import "../../../../../chunk-AQVIQODP.js";
+import "../../../../../chunk-KMVSJT6Y.js";
+import "../../../../../chunk-7I7PZF5L.js";
+import "../../../../../chunk-R3WM6HV6.js";
 import "../../../../../chunk-GMKRNFH5.js";
 import "../../../../../chunk-2ISIAPFS.js";
 import "../../../../../chunk-CSKNBWPB.js";
 import "../../../../../chunk-5XYPLDI5.js";
-import "../../../../../chunk-HYITAA4J.js";
-import "../../../../../chunk-365QMK4D.js";
 import "../../../../../chunk-6IVCARWS.js";
 import "../../../../../chunk-6DJOIRMF.js";
 import "../../../../../chunk-FPD73OHW.js";
+import "../../../../../chunk-HYITAA4J.js";
+import "../../../../../chunk-365QMK4D.js";
 import "../../../../../chunk-EGEQY3KT.js";
-import "../../../../../chunk-BESTU2AY.js";
-import "../../../../../chunk-B6XJN6EC.js";
-import "../../../../../chunk-RP2RGCAW.js";
-import "../../../../../chunk-4Y5BEXVN.js";
-import "../../../../../chunk-PMJIFLDT.js";
-import "../../../../../chunk-LDBWASUA.js";
 import "../../../../../chunk-25HMMI7R.js";
 import "../../../../../chunk-ZVDAEY5Q.js";
 import "../../../../../chunk-LQY4RKWI.js";
+import "../../../../../chunk-B6XJN6EC.js";
+import "../../../../../chunk-RP2RGCAW.js";
+import "../../../../../chunk-4Y5BEXVN.js";
 import "../../../../../chunk-DLP4UUNG.js";
 import "../../../../../chunk-VD7AQ7HK.js";
 import "../../../../../chunk-ZQE7SP6P.js";
@@ -45,6 +42,9 @@ import "../../../../../chunk-YSYJCYHY.js";
 import "../../../../../chunk-5OM2H6RI.js";
 import "../../../../../chunk-ZUYCXCPW.js";
 import "../../../../../chunk-YVFNJE4E.js";
+import "../../../../../chunk-BESTU2AY.js";
+import "../../../../../chunk-PMJIFLDT.js";
+import "../../../../../chunk-LDBWASUA.js";
 import "../../../../../chunk-CRTRMMJ7.js";
 export {
   ReviewQuestion_default as default

package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-comp.js

@@ -1,11 +1,9 @@
 import {
   ReviewQuestionContentHeader
-} from "../../../../../chunk-CNW3YEAK.js";
+} from "../../../../../chunk-R3WM6HV6.js";
 import "../../../../../chunk-2ISIAPFS.js";
-import "../../../../../chunk-4Y5BEXVN.js";
-import "../../../../../chunk-PMJIFLDT.js";
-import "../../../../../chunk-LDBWASUA.js";
 import "../../../../../chunk-25HMMI7R.js";
+import "../../../../../chunk-4Y5BEXVN.js";
 import "../../../../../chunk-DLP4UUNG.js";
 import "../../../../../chunk-VD7AQ7HK.js";
 import "../../../../../chunk-ZQE7SP6P.js";
@@ -22,6 +20,8 @@ import "../../../../../chunk-YSYJCYHY.js";
 import "../../../../../chunk-5OM2H6RI.js";
 import "../../../../../chunk-ZUYCXCPW.js";
 import "../../../../../chunk-YVFNJE4E.js";
+import "../../../../../chunk-PMJIFLDT.js";
+import "../../../../../chunk-LDBWASUA.js";
 import "../../../../../chunk-CRTRMMJ7.js";
 export {
   ReviewQuestionContentHeader