@tipp/ui 1.1.23 → 1.2.0

package/dist/chunk-ANYFPUBG.js

@@ -0,0 +1,260 @@
+import {
+  TextField
+} from "./chunk-JPIZP2PZ.js";
+import {
+  ScrollArea
+} from "./chunk-ZKZDVS7G.js";
+import {
+  Popover
+} from "./chunk-5AVBYDPB.js";
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Badge
+} from "./chunk-EFMOJ6IL.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Button
+} from "./chunk-V5VKW4N3.js";
+import {
+  ArchiveIcon,
+  CheckIcon
+} from "./chunk-AW44EUZH.js";
+
+// src/molecules/tag-selector.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ChevronRightIcon, Cross1Icon } from "@radix-ui/react-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OPTION_HEIGHT = 32;
+var DefaultDropdownContainer = (props) => {
+  return props.children;
+};
+function TagSelector(props) {
+  const {
+    options = [],
+    tagRender,
+    placeholder,
+    DropdownContainer = DefaultDropdownContainer
+  } = props;
+  const [selected, setSelected] = useState(props.selected || []);
+  const [value, setValue] = useState("");
+  const [focusIndex, setFocusIndex] = useState(null);
+  const scrollRef = useRef(null);
+  const onChangeValue = useCallback(
+    (e) => {
+      setValue(e.target.value);
+    },
+    []
+  );
+  const filteredOptions = useMemo(() => {
+    return options.filter((option) => {
+      return option.name.includes(value);
+    });
+  }, [options, value]);
+  const selectedItem = useMemo(() => {
+    const result = [];
+    selected.forEach((id) => {
+      const maybeItem = options.find((option) => option.id === id);
+      if (maybeItem)
+        result.push(maybeItem);
+    });
+    return result;
+  }, [options, selected]);
+  const onDelete = useCallback((id) => {
+    setSelected((prev) => prev.filter((el) => el !== id));
+  }, []);
+  const onSelect = useCallback((id) => {
+    setSelected((prev) => [...prev, id]);
+  }, []);
+  const toggleItem = useCallback(
+    (id) => {
+      if (selected.includes(id)) {
+        onDelete(id);
+      } else {
+        onSelect(id);
+      }
+    },
+    [onDelete, onSelect, selected]
+  );
+  const [open, setOpen] = useState(false);
+  const fieldRef = useRef(null);
+  const setScroll = (index) => {
+    if (scrollRef.current) {
+      const scrollTop = scrollRef.current.scrollTop;
+      const clientHeight = scrollRef.current.clientHeight;
+      const focusTop = index * OPTION_HEIGHT;
+      console.log({ focusTop });
+      if (focusTop < scrollTop) {
+        scrollRef.current.scrollTop = focusTop;
+      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {
+        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;
+      }
+    }
+  };
+  const handleKeyDown = useCallback(
+    (e) => {
+      const key = e.key;
+      switch (key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === "number") {
+            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === "number") {
+            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+        case "Enter":
+          if (focusIndex !== null) {
+            toggleItem(filteredOptions[focusIndex].id);
+            setValue("");
+          }
+          break;
+        case "Backspace":
+          if (value.length === 0) {
+            setSelected((prev) => prev.slice(0, -1));
+          }
+          break;
+        case "Escape":
+          setOpen(false);
+          break;
+      }
+    },
+    [focusIndex, value.length, options.length, toggleItem, filteredOptions]
+  );
+  useEffect(() => {
+    setFocusIndex(null);
+  }, [open]);
+  useEffect(() => {
+    setFocusIndex(0);
+  }, [filteredOptions]);
+  return /* @__PURE__ */ jsxs(Popover.Root, { onOpenChange: setOpen, open, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+      TextField.Root,
+      {
+        onChange: onChangeValue,
+        onKeyDown: handleKeyDown,
+        placeholder: selectedItem.length ? "" : placeholder,
+        ref: fieldRef,
+        value,
+        children: [
+          /* @__PURE__ */ jsx(TextField.Slot, { children: selectedItem.map((item) => {
+            return tagRender ? tagRender(item) : /* @__PURE__ */ jsxs(Badge, { children: [
+              item.name,
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: () => {
+                    onDelete(item.id);
+                  },
+                  variant: "ghost",
+                  children: /* @__PURE__ */ jsx(Cross1Icon, {})
+                }
+              )
+            ] });
+          }) }),
+          /* @__PURE__ */ jsx(TextField.Slot, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: /* @__PURE__ */ jsx(
+          DropdownContainer,
+          {
+            currentItem: filteredOptions[focusIndex || 0],
+            items: filteredOptions,
+            children: /* @__PURE__ */ jsx(
+              ScrollArea,
+              {
+                ref: scrollRef,
+                scrollbars: "vertical",
+                style: { height: OPTION_HEIGHT * 8 },
+                children: filteredOptions.length ? /* @__PURE__ */ jsx(Flex, { direction: "column", children: filteredOptions.map((item, i) => {
+                  const isSelected = Boolean(
+                    selected.find((el) => el === item.id)
+                  );
+                  const isFocus = i === focusIndex;
+                  const getBackground = () => {
+                    if (isFocus) {
+                      return "var(--accent-a4)";
+                    } else if (isSelected) {
+                      return void 0;
+                    }
+                    return "transparent";
+                  };
+                  return /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      onClick: () => {
+                        var _a;
+                        toggleItem(item.id);
+                        (_a = fieldRef.current) == null ? void 0 : _a.focus();
+                      },
+                      style: {
+                        width: "100%",
+                        background: getBackground()
+                      },
+                      variant: "soft",
+                      children: /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", children: [
+                        item.name,
+                        isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
+                      ] })
+                    },
+                    item.id
+                  );
+                }) }) : /* @__PURE__ */ jsxs(
+                  Flex,
+                  {
+                    align: "center",
+                    direction: "column",
+                    gap: "3",
+                    height: "100%",
+                    justify: "center",
+                    width: "100%",
+                    children: [
+                      /* @__PURE__ */ jsx(ArchiveIcon, { height: 32, width: 32 }),
+                      /* @__PURE__ */ jsx(Typo, { color: "gray", children: "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  TagSelector
+};
+//# sourceMappingURL=chunk-ANYFPUBG.js.map

package/dist/chunk-ANYFPUBG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/tag-selector.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronRightIcon, Cross1Icon } from '@radix-ui/react-icons';\nimport { TextField } from '../atoms/text-field';\nimport { Popover } from '../atoms/popover';\nimport { Flex } from '../atoms/flex';\nimport { Button } from '../atoms/button';\nimport { Badge } from '../atoms/badge';\nimport { CheckIcon, ArchiveIcon } from '../icon';\nimport { ScrollArea } from '../atoms/scroll-area';\nimport { Box } from '../atoms/box';\nimport { Typo } from '../atoms/typo';\n\ntype ID = string;\ninterface Item {\n  name: string;\n  id: ID;\n}\n\nconst OPTION_HEIGHT = 32;\n\nexport interface TagSelectorProps<T extends Item> {\n  options?: T[];\n  selected?: ID[];\n  placeholder?: string;\n  disabled?: boolean;\n  maxCount?: number;\n\n  onChange?: (selected: ID[]) => void;\n  tagRender?: (item: T) => React.ReactElement;\n  DropdownContainer?: DropdownContainer<T>;\n}\ntype DropdownContainer<T> = (props: {\n  items: T[];\n  children: React.ReactElement;\n  currentItem: T;\n}) => React.ReactElement;\n\nconst DefaultDropdownContainer = (props: {\n  children: React.ReactElement;\n}): React.ReactElement => {\n  return props.children;\n};\n\nexport function TagSelector<T extends Item>(\n  props: TagSelectorProps<T>\n): React.ReactElement {\n  const {\n    options = [],\n    tagRender,\n    placeholder,\n    DropdownContainer = DefaultDropdownContainer,\n  } = props;\n  const [selected, setSelected] = useState<string[]>(props.selected || []);\n  const [value, setValue] = useState<string>('');\n  const [focusIndex, setFocusIndex] = useState<number | null>(null);\n\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setValue(e.target.value);\n    },\n    []\n  );\n\n  const filteredOptions = useMemo<T[]>(() => {\n    return options.filter((option) => {\n      return option.name.includes(value);\n    });\n  }, [options, value]);\n\n  const selectedItem = useMemo<T[]>(() => {\n    const result = [] as T[];\n    selected.forEach((id) => {\n      const maybeItem = options.find((option) => option.id === id);\n      if (maybeItem) result.push(maybeItem);\n    });\n    return result;\n  }, [options, selected]);\n\n  const onDelete = useCallback((id: string) => {\n    setSelected((prev) => prev.filter((el) => el !== id));\n  }, []);\n\n  const onSelect = useCallback((id: string) => {\n    setSelected((prev) => [...prev, id]);\n  }, []);\n\n  const toggleItem = useCallback(\n    (id: string) => {\n      if (selected.includes(id)) {\n        onDelete(id);\n      } else {\n        onSelect(id);\n      }\n    },\n    [onDelete, onSelect, selected]\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const fieldRef = useRef<HTMLInputElement>(null);\n\n  const setScroll = (index: number): void => {\n    // 현재 높이에 아이템이 보이지 않을 경우 스크롤을 이동시킨다.\n    if (scrollRef.current) {\n      const scrollTop = scrollRef.current.scrollTop;\n      const clientHeight = scrollRef.current.clientHeight;\n      const focusTop = index * OPTION_HEIGHT;\n      console.log({ focusTop });\n      if (focusTop < scrollTop) {\n        scrollRef.current.scrollTop = focusTop;\n      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {\n        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;\n      }\n    }\n  };\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const key = e.key;\n\n      switch (key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'ArrowUp': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'Enter':\n          if (focusIndex !== null) {\n            toggleItem(filteredOptions[focusIndex].id);\n            setValue('');\n          }\n          break;\n\n        case 'Backspace':\n          if (value.length === 0) {\n            setSelected((prev) => prev.slice(0, -1));\n          }\n          break;\n\n        case 'Escape':\n          setOpen(false);\n          break;\n      }\n    },\n    [focusIndex, value.length, options.length, toggleItem, filteredOptions]\n  );\n\n  useEffect(() => {\n    setFocusIndex(null);\n  }, [open]);\n\n  useEffect(() => {\n    setFocusIndex(0);\n  }, [filteredOptions]);\n\n  return (\n    <Popover.Root onOpenChange={setOpen} open={open}>\n      <Popover.Trigger>\n        <Box>\n          <TextField.Root\n            onChange={onChangeValue}\n            onKeyDown={handleKeyDown}\n            placeholder={selectedItem.length ? '' : placeholder}\n            ref={fieldRef}\n            value={value}\n          >\n            <TextField.Slot>\n              {selectedItem.map((item) => {\n                return tagRender ? (\n                  tagRender(item)\n                ) : (\n                  <Badge>\n                    {item.name}\n                    <Button\n                      onClick={() => {\n                        onDelete(item.id);\n                      }}\n                      variant=\"ghost\"\n                    >\n                      <Cross1Icon />\n                    </Button>\n                  </Badge>\n                );\n              })}\n            </TextField.Slot>\n            <TextField.Slot>\n              <ChevronRightIcon />\n            </TextField.Slot>\n          </TextField.Root>\n        </Box>\n      </Popover.Trigger>\n\n      <Popover.Content\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n        }}\n      >\n        <DropdownContainer\n          currentItem={filteredOptions[focusIndex || 0]}\n          items={filteredOptions}\n        >\n          <ScrollArea\n            ref={scrollRef}\n            scrollbars=\"vertical\"\n            style={{ height: OPTION_HEIGHT * 8 }}\n          >\n            {filteredOptions.length ? (\n              <Flex direction=\"column\">\n                {filteredOptions.map((item, i) => {\n                  const isSelected = Boolean(\n                    selected.find((el) => el === item.id)\n                  );\n                  const isFocus = i === focusIndex;\n                  const getBackground = (): string | undefined => {\n                    if (isFocus) {\n                      return 'var(--accent-a4)';\n                    } else if (isSelected) {\n                      return undefined;\n                    }\n                    return 'transparent';\n                  };\n\n                  return (\n                    <Button\n                      key={item.id}\n                      onClick={() => {\n                        toggleItem(item.id);\n                        fieldRef.current?.focus();\n                      }}\n                      style={{\n                        width: '100%',\n                        background: getBackground(),\n                      }}\n                      variant=\"soft\"\n                    >\n                      <Flex justify=\"between\" width=\"100%\">\n                        {item.name}\n                        {isSelected ? <CheckIcon /> : null}\n                      </Flex>\n                    </Button>\n                  );\n                })}\n              </Flex>\n            ) : (\n              <Flex\n                align=\"center\"\n                direction=\"column\"\n                gap=\"3\"\n                height=\"100%\"\n                justify=\"center\"\n                width=\"100%\"\n              >\n                <ArchiveIcon height={32} width={32} />\n                <Typo color=\"gray\">검색 결과가 없습니다.</Typo>\n              </Flex>\n            )}\n          </ScrollArea>\n        </DropdownContainer>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-ANYJYO5B.js

@@ -0,0 +1,110 @@
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Avatar
+} from "./chunk-3SSSCLJ5.js";
+
+// src/molecules/stepper.tsx
+import {
+  createContext,
+  useState,
+  Children,
+  useEffect,
+  useContext
+} from "react";
+import { Separator } from "@radix-ui/themes";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StepContext = createContext({
+  active: false,
+  completed: false,
+  index: 0
+});
+function Root(props) {
+  const {
+    activeStep,
+    children,
+    onChange,
+    width,
+    minWidth,
+    maxWidth,
+    direction = "vertical"
+  } = props;
+  const [currentStep, setCurrentStep] = useState(activeStep || 0);
+  useEffect(() => {
+    if (typeof activeStep === "number") {
+      setCurrentStep(activeStep);
+    }
+  }, [activeStep]);
+  useEffect(() => {
+    onChange == null ? void 0 : onChange(currentStep);
+  }, [currentStep, onChange]);
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      gap: "3",
+      style: {
+        width,
+        minWidth,
+        maxWidth
+      },
+      children: Children.map(children, (child, index) => {
+        return /* @__PURE__ */ jsx(
+          StepContext.Provider,
+          {
+            value: {
+              active: index === currentStep,
+              completed: index < currentStep,
+              index,
+              direction
+            },
+            children: child
+          }
+        );
+      })
+    }
+  );
+}
+function Step(props) {
+  const { Icon, children } = props;
+  const {
+    active,
+    completed,
+    index,
+    direction = "vertical"
+  } = useContext(StepContext);
+  const connector = /* @__PURE__ */ jsx(
+    Separator,
+    {
+      style: {
+        width: "100%",
+        position: "absolute",
+        top: direction === "horizontal" ? "50%" : "0",
+        left: direction === "horizontal" ? "0" : "50%"
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      direction: direction === "horizontal" ? "row" : "column",
+      style: { flex: 1 },
+      position: "relative",
+      children: [
+        connector,
+        Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(Avatar, { fallback: index + 1, radius: "full" }),
+        children
+      ]
+    }
+  );
+}
+var Stepper = {
+  Root,
+  Step
+};
+
+export {
+  Stepper
+};
+//# sourceMappingURL=chunk-ANYJYO5B.js.map

package/dist/chunk-ANYJYO5B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/stepper.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useState,\n  Children,\n  useEffect,\n  useContext,\n} from 'react';\nimport { Flex } from '../atoms/flex';\nimport { Avatar } from '../atoms/avatar';\nimport { Separator } from '@radix-ui/themes';\n\ninterface StepState extends Pick<StepperProps, 'direction'> {\n  active: boolean;\n  completed: boolean;\n  index: number;\n}\n\nconst StepContext = createContext<StepState>({\n  active: false,\n  completed: false,\n  index: 0,\n});\n\ninterface StepperProps {\n  // 활성화된 스텝 인덱스. 0부터 시작\n  activeStep?: number;\n  children: React.ReactElement | React.ReactElement[];\n  onChange?: (step: number) => void;\n  width: string;\n  maxWidth: string;\n  minWidth: string;\n  /** icon과 children의 배치 방향. 기본 값 vertical */\n  direction?: 'horizontal' | 'vertical';\n}\n\nfunction Root(props: StepperProps): React.ReactElement {\n  const {\n    activeStep,\n    children,\n    onChange,\n    width,\n    minWidth,\n    maxWidth,\n    direction = 'vertical',\n  } = props;\n  const [currentStep, setCurrentStep] = useState<number>(activeStep || 0);\n\n  useEffect(() => {\n    if (typeof activeStep === 'number') {\n      setCurrentStep(activeStep);\n    }\n  }, [activeStep]);\n\n  useEffect(() => {\n    onChange?.(currentStep);\n  }, [currentStep, onChange]);\n\n  return (\n    <Flex\n      gap=\"3\"\n      style={{\n        width,\n        minWidth,\n        maxWidth,\n      }}\n    >\n      {Children.map(children, (child, index) => {\n        return (\n          <StepContext.Provider\n            value={{\n              active: index === currentStep,\n              completed: index < currentStep,\n              index,\n              direction,\n            }}\n          >\n            {child}\n          </StepContext.Provider>\n        );\n      })}\n    </Flex>\n  );\n}\n\ninterface StepProps {\n  children?: React.ReactNode;\n  /** 아이콘 커스텀 필요시 사용 */\n  Icon?: (args: { completed: boolean; active: boolean }) => React.ReactElement;\n}\n\nfunction Step(props: StepProps): React.ReactNode {\n  const { Icon, children } = props;\n  const {\n    active,\n    completed,\n    index,\n    direction = 'vertical',\n  } = useContext(StepContext);\n\n  const connector = (\n    <Separator\n      style={{\n        width: '100%',\n        position: 'absolute',\n        top: direction === 'horizontal' ? '50%' : '0',\n        left: direction === 'horizontal' ? '0' : '50%',\n      }}\n    />\n  );\n\n  return (\n    <Flex\n      align=\"center\"\n      direction={direction === 'horizontal' ? 'row' : 'column'}\n      style={{ flex: 1 }}\n      position=\"relative\"\n    >\n      {connector}\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar fallback={index + 1} radius=\"full\" />\n      )}\n      {children}\n    </Flex>\n  );\n}\n\nexport const Stepper = {\n  Root,\n  Step,\n};\n"],"mappings":";;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AA2DhB,cA2CN,YA3CM;AAnDV,IAAM,cAAc,cAAyB;AAAA,EAC3C,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AACT,CAAC;AAcD,SAAS,KAAK,OAAyC;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,cAAc,CAAC;AAEtE,YAAU,MAAM;AACd,QAAI,OAAO,eAAe,UAAU;AAClC,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,yCAAW;AAAA,EACb,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,mBAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AACxC,eACE;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC,OAAO;AAAA,cACL,QAAQ,UAAU;AAAA,cAClB,WAAW,QAAQ;AAAA,cACnB;AAAA,cACA;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAQA,SAAS,KAAK,OAAmC;AAC/C,QAAM,EAAE,MAAM,SAAS,IAAI;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI,WAAW,WAAW;AAE1B,QAAM,YACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,UAAU;AAAA,QACV,KAAK,cAAc,eAAe,QAAQ;AAAA,QAC1C,MAAM,cAAc,eAAe,MAAM;AAAA,MAC3C;AAAA;AAAA,EACF;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAW,cAAc,eAAe,QAAQ;AAAA,MAChD,OAAO,EAAE,MAAM,EAAE;AAAA,MACjB,UAAS;AAAA,MAER;AAAA;AAAA,QACA,OACC,oBAAC,QAAK,QAAgB,WAAsB,IAE5C,oBAAC,UAAO,UAAU,QAAQ,GAAG,QAAO,QAAO;AAAA,QAE5C;AAAA;AAAA;AAAA,EACH;AAEJ;AAEO,IAAM,UAAU;AAAA,EACrB;AAAA,EACA;AACF;","names":[]}

package/dist/chunk-AQ7PFVAO.js

@@ -0,0 +1,230 @@
+import {
+  TextField
+} from "./chunk-JPIZP2PZ.js";
+import {
+  ScrollArea
+} from "./chunk-ZKZDVS7G.js";
+import {
+  Popover
+} from "./chunk-5AVBYDPB.js";
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Badge
+} from "./chunk-EFMOJ6IL.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Button
+} from "./chunk-V5VKW4N3.js";
+import {
+  ArchiveIcon,
+  CheckIcon
+} from "./chunk-AW44EUZH.js";
+
+// src/molecules/tag-selector.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ChevronRightIcon, Cross1Icon } from "@radix-ui/react-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DefaultDropdownContainer = (props) => {
+  return props.children;
+};
+function TagSelector(props) {
+  const {
+    options = [],
+    tagRender,
+    placeholder,
+    DropdownContainer = DefaultDropdownContainer
+  } = props;
+  const [selected, setSelected] = useState(props.selected || []);
+  const [value, setValue] = useState("");
+  const [optionFocusIndex, setOptionFocusIndex] = useState(null);
+  const onChangeValue = useCallback(
+    (e) => {
+      setValue(e.target.value);
+    },
+    []
+  );
+  const filteredOptions = useMemo(() => {
+    return options.filter((option) => {
+      return option.name.includes(value);
+    });
+  }, [options, value]);
+  const selectedItem = useMemo(() => {
+    const result = [];
+    selected.forEach((id) => {
+      const maybeItem = options.find((option) => option.id === id);
+      if (maybeItem)
+        result.push(maybeItem);
+    });
+    return result;
+  }, [options, selected]);
+  const onDelete = useCallback((id) => {
+    setSelected((prev) => prev.filter((el) => el !== id));
+  }, []);
+  const onSelect = useCallback((id) => {
+    setSelected((prev) => [...prev, id]);
+  }, []);
+  const toggleItem = useCallback(
+    (id) => {
+      if (selected.includes(id)) {
+        onDelete(id);
+      } else {
+        onSelect(id);
+      }
+    },
+    [onDelete, onSelect, selected]
+  );
+  const [open, setOpen] = useState(false);
+  const fieldRef = useRef(null);
+  const handleKeyDown = useCallback(
+    (e) => {
+      const key = e.key;
+      switch (key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (optionFocusIndex === null) {
+            setOptionFocusIndex(0);
+          } else {
+            setOptionFocusIndex((prev) => {
+              if (prev === null)
+                return 0;
+              if (prev + 1 >= options.length)
+                return prev;
+              return prev + 1;
+            });
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (optionFocusIndex === null) {
+            setOptionFocusIndex(0);
+          } else {
+            setOptionFocusIndex((prev) => {
+              if (prev === null)
+                return 0;
+              if (prev - 1 < 0)
+                return prev;
+              return prev - 1;
+            });
+          }
+          break;
+        case "Enter":
+          if (optionFocusIndex !== null) {
+            toggleItem(filteredOptions[optionFocusIndex].id);
+          }
+          break;
+        case "Escape":
+          setOpen(false);
+          break;
+      }
+    },
+    [toggleItem, optionFocusIndex, options]
+  );
+  useEffect(() => {
+    setOptionFocusIndex(null);
+  }, [open, value]);
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+      TextField.Root,
+      {
+        onBlur: () => {
+          setOpen(false);
+        },
+        onChange: onChangeValue,
+        onFocus: () => {
+          setOpen(true);
+        },
+        onKeyDown: handleKeyDown,
+        placeholder: selectedItem.length ? "" : placeholder,
+        ref: fieldRef,
+        value,
+        children: [
+          /* @__PURE__ */ jsx(TextField.Slot, { children: selectedItem.map((item) => {
+            return tagRender ? tagRender(item) : /* @__PURE__ */ jsxs(Badge, { children: [
+              item.name,
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: () => {
+                    onDelete(item.id);
+                  },
+                  variant: "ghost",
+                  children: /* @__PURE__ */ jsx(Cross1Icon, {})
+                }
+              )
+            ] });
+          }) }),
+          /* @__PURE__ */ jsx(TextField.Slot, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: /* @__PURE__ */ jsx(
+          DropdownContainer,
+          {
+            currentFocus: filteredOptions[optionFocusIndex || 0],
+            items: filteredOptions,
+            children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "vertical", style: { height: 300 }, children: filteredOptions.length ? /* @__PURE__ */ jsx(Flex, { direction: "column", children: filteredOptions.map((item, i) => {
+              const isSelected = Boolean(
+                selected.find((el) => el === item.id)
+              );
+              const isFocus = i === optionFocusIndex;
+              return /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    toggleItem(item.id);
+                  },
+                  style: { width: "100%", height: 34 },
+                  variant: isSelected || isFocus ? "soft" : "ghost",
+                  children: [
+                    item.name,
+                    isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
+                  ]
+                },
+                item.id
+              );
+            }) }) : /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                align: "center",
+                direction: "column",
+                gap: "3",
+                height: "100%",
+                justify: "center",
+                width: "100%",
+                children: [
+                  /* @__PURE__ */ jsx(ArchiveIcon, { height: 32, width: 32 }),
+                  /* @__PURE__ */ jsx(Typo, { color: "gray", children: "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                ]
+              }
+            ) })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  TagSelector
+};
+//# sourceMappingURL=chunk-AQ7PFVAO.js.map

package/dist/chunk-AQ7PFVAO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/tag-selector.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronRightIcon, Cross1Icon } from '@radix-ui/react-icons';\nimport { TextField } from '../atoms/text-field';\nimport { Popover } from '../atoms/popover';\nimport { Flex } from '../atoms/flex';\nimport { Button } from '../atoms/button';\nimport { Badge } from '../atoms/badge';\nimport { CheckIcon, ArchiveIcon } from '../icon';\nimport { ScrollArea } from '../atoms/scroll-area';\nimport { Box } from '../atoms/box';\nimport { Typo } from '../atoms/typo';\n\ntype ID = string;\ninterface Item {\n  name: string;\n  id: ID;\n}\n\nexport interface TagSelectorProps<T extends Item> {\n  options?: T[];\n  selected?: ID[];\n  placeholder?: string;\n  disabled?: boolean;\n  maxCount?: number;\n\n  onChange?: (selected: ID[]) => void;\n  tagRender?: (item: T) => React.ReactElement;\n  DropdownContainer?: DropdownContainer<T>;\n}\ntype DropdownContainer<T> = (props: {\n  items: T[];\n  children: React.ReactElement;\n  currentFocus: T;\n}) => React.ReactElement;\n\nconst DefaultDropdownContainer = (props: {\n  children: React.ReactElement;\n}): React.ReactElement => {\n  return props.children;\n};\n\nexport function TagSelector<T extends Item>(\n  props: TagSelectorProps<T>\n): React.ReactElement {\n  const {\n    options = [],\n    tagRender,\n    placeholder,\n    DropdownContainer = DefaultDropdownContainer,\n  } = props;\n  const [selected, setSelected] = useState<string[]>(props.selected || []);\n  const [value, setValue] = useState<string>('');\n  const [optionFocusIndex, setOptionFocusIndex] = useState<number | null>(null);\n  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setValue(e.target.value);\n    },\n    []\n  );\n\n  const filteredOptions = useMemo<T[]>(() => {\n    return options.filter((option) => {\n      return option.name.includes(value);\n    });\n  }, [options, value]);\n\n  const selectedItem = useMemo<T[]>(() => {\n    const result = [] as T[];\n    selected.forEach((id) => {\n      const maybeItem = options.find((option) => option.id === id);\n      if (maybeItem) result.push(maybeItem);\n    });\n    return result;\n  }, [options, selected]);\n\n  const onDelete = useCallback((id: string) => {\n    setSelected((prev) => prev.filter((el) => el !== id));\n  }, []);\n\n  const onSelect = useCallback((id: string) => {\n    setSelected((prev) => [...prev, id]);\n  }, []);\n\n  const toggleItem = useCallback(\n    (id: string) => {\n      if (selected.includes(id)) {\n        onDelete(id);\n      } else {\n        onSelect(id);\n      }\n    },\n    [onDelete, onSelect, selected]\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const fieldRef = useRef<HTMLInputElement>(null);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const key = e.key;\n\n      switch (key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          // 스크롤 높이 맞추기\n          if (optionFocusIndex === null) {\n            setOptionFocusIndex(0);\n          } else {\n            setOptionFocusIndex((prev) => {\n              if (prev === null) return 0;\n              if (prev + 1 >= options.length) return prev;\n              return prev + 1;\n            });\n          }\n          break;\n\n        case 'ArrowUp':\n          e.preventDefault();\n          // 스크롤 높이 맞추기\n          if (optionFocusIndex === null) {\n            setOptionFocusIndex(0);\n          } else {\n            setOptionFocusIndex((prev) => {\n              if (prev === null) return 0;\n              if (prev - 1 < 0) return prev;\n              return prev - 1;\n            });\n          }\n          break;\n\n        case 'Enter':\n          if (optionFocusIndex !== null) {\n            toggleItem(filteredOptions[optionFocusIndex].id);\n          }\n          break;\n\n        case 'Escape':\n          setOpen(false);\n          break;\n      }\n    },\n    [toggleItem, optionFocusIndex, options]\n  );\n\n  useEffect(() => {\n    setOptionFocusIndex(null);\n  }, [open, value]);\n\n  return (\n    <Popover.Root open={open}>\n      <Popover.Trigger>\n        <Box>\n          <TextField.Root\n            onBlur={() => {\n              setOpen(false);\n            }}\n            onChange={onChangeValue}\n            onFocus={() => {\n              setOpen(true);\n            }}\n            onKeyDown={handleKeyDown}\n            placeholder={selectedItem.length ? '' : placeholder}\n            ref={fieldRef}\n            value={value}\n          >\n            <TextField.Slot>\n              {selectedItem.map((item) => {\n                return tagRender ? (\n                  tagRender(item)\n                ) : (\n                  <Badge>\n                    {item.name}\n                    <Button\n                      onClick={() => {\n                        onDelete(item.id);\n                      }}\n                      variant=\"ghost\"\n                    >\n                      <Cross1Icon />\n                    </Button>\n                  </Badge>\n                );\n              })}\n            </TextField.Slot>\n            <TextField.Slot>\n              <ChevronRightIcon />\n            </TextField.Slot>\n          </TextField.Root>\n        </Box>\n      </Popover.Trigger>\n\n      <Popover.Content\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n        }}\n      >\n        <DropdownContainer\n          currentFocus={filteredOptions[optionFocusIndex || 0]}\n          items={filteredOptions}\n        >\n          <ScrollArea scrollbars=\"vertical\" style={{ height: 300 }}>\n            {filteredOptions.length ? (\n              <Flex direction=\"column\">\n                {filteredOptions.map((item, i) => {\n                  const isSelected = Boolean(\n                    selected.find((el) => el === item.id)\n                  );\n                  const isFocus = i === optionFocusIndex;\n\n                  return (\n                    <Button\n                      key={item.id}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        toggleItem(item.id);\n                      }}\n                      style={{ width: '100%', height: 34 }}\n                      variant={isSelected || isFocus ? 'soft' : 'ghost'}\n                    >\n                      {item.name}\n                      {isSelected ? <CheckIcon /> : null}\n                    </Button>\n                  );\n                })}\n              </Flex>\n            ) : (\n              <Flex\n                align=\"center\"\n                direction=\"column\"\n                gap=\"3\"\n                height=\"100%\"\n                justify=\"center\"\n                width=\"100%\"\n              >\n                <ArchiveIcon height={32} width={32} />\n                <Typo color=\"gray\">검색 결과가 없습니다.</Typo>\n              </Flex>\n            )}\n          </ScrollArea>\n        </DropdownContainer>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-AUGTWWGI.js

@@ -0,0 +1,10 @@
+// src/molecules/stepper.tsx
+import { jsx } from "react/jsx-runtime";
+function Stepper({}) {
+  return /* @__PURE__ */ jsx("div", {});
+}
+
+export {
+  Stepper
+};
+//# sourceMappingURL=chunk-AUGTWWGI.js.map

package/dist/chunk-AUGTWWGI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/stepper.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface StepperProps {}\n\nexport function Stepper({}: StepperProps):React.ReactNode {\n  return (\n    <div></div>\n  )\n}"],"mappings":";AAMI;AAFG,SAAS,QAAQ,CAAC,GAAiC;AACxD,SACE,oBAAC,SAAI;AAET;","names":[]}