@tipp/ui 1.1.22 → 1.2.0

package/dist/chunk-6MTFP2I7.js

@@ -0,0 +1,169 @@
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Avatar
+} from "./chunk-3SSSCLJ5.js";
+import {
+  CheckIcon
+} from "./chunk-7OOUSUGO.js";
+
+// src/molecules/stepper.tsx
+import { createContext, Children, useContext, useMemo } from "react";
+import { Separator } from "@radix-ui/themes";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StepContext = createContext({
+  active: false,
+  completed: false,
+  index: 0
+});
+function Root(props) {
+  const {
+    activeStep = 0,
+    children,
+    width,
+    minWidth,
+    maxWidth,
+    direction = "vertical"
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      gap: "3",
+      style: {
+        width,
+        minWidth,
+        maxWidth
+      },
+      children: Children.map(children, (child, index) => {
+        return /* @__PURE__ */ jsx(
+          StepContext.Provider,
+          {
+            value: {
+              active: index === activeStep,
+              completed: index < activeStep,
+              index,
+              direction
+            },
+            children: child
+          }
+        );
+      })
+    }
+  );
+}
+function Step(props) {
+  const { Icon, children } = props;
+  const {
+    active,
+    completed,
+    index,
+    direction = "vertical"
+  } = useContext(StepContext);
+  const connector = index > 0 ? /* @__PURE__ */ jsx(
+    Separator,
+    {
+      style: {
+        width: `calc(100% - 40px)`,
+        position: "absolute",
+        top: 16,
+        right: `calc(50% + 26px)`
+      }
+    }
+  ) : null;
+  const InnerStep = useMemo(() => {
+    if (active) {
+      return ActiveStep;
+    }
+    if (completed) {
+      return CompleteStep;
+    }
+    return IncompleteStep;
+  }, [completed, active]);
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      direction: direction === "horizontal" ? "row" : "column",
+      gap: "4",
+      position: "relative",
+      style: { flex: 1 },
+      children: [
+        connector,
+        /* @__PURE__ */ jsx(InnerStep, { Icon, children })
+      ]
+    }
+  );
+}
+function CompleteStep(props) {
+  const { Icon, children } = props;
+  const { completed, active } = useContext(StepContext);
+  const background = "var(--accent-a4)";
+  const border = "1px solid var(--accent-7)";
+  const color = "var(--accent-contrast)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ jsx(CheckIcon, { fill: color, height: 16, width: 16 }),
+        radius: "full",
+        size: "medium",
+        style: {
+          border,
+          background
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typo, { align: "center", children })
+  ] });
+}
+function IncompleteStep(props) {
+  const { Icon, children } = props;
+  const { completed, active, index } = useContext(StepContext);
+  const background = "var(--gray-5)";
+  const color = "var(--gray-a11)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, children: index + 1 }),
+        radius: "full",
+        size: "medium",
+        style: {
+          background
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typo, { align: "center", style: { color }, children })
+  ] });
+}
+function ActiveStep(props) {
+  const { Icon, children } = props;
+  const { completed, active, index } = useContext(StepContext);
+  const background = "var(--accent-10)";
+  const color = "var(--accent-contrast)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, weight: "bold", children: index + 1 }),
+        radius: "full",
+        size: "medium",
+        style: { background }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typo, { align: "center", weight: "bold", children })
+  ] });
+}
+var Stepper = {
+  Root,
+  Step
+};
+
+export {
+  Stepper
+};
+//# sourceMappingURL=chunk-6MTFP2I7.js.map

package/dist/chunk-6MTFP2I7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/stepper.tsx"],"sourcesContent":["import React, { createContext, Children, useContext, useMemo } from 'react';\nimport { Separator } from '@radix-ui/themes';\nimport { Flex } from '../atoms/flex';\nimport { Avatar } from '../atoms/avatar';\nimport { CheckIcon } from '../icon';\nimport { Typo } from '../atoms/typo';\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  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 = 0,\n    children,\n    width,\n    minWidth,\n    maxWidth,\n    direction = 'vertical',\n  } = props;\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 === activeStep,\n              completed: index < activeStep,\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    index > 0 ? (\n      <Separator\n        style={{\n          width: `calc(100% - 40px)`,\n          position: 'absolute',\n          top: 16,\n          right: `calc(50% + 26px)`,\n        }}\n      />\n    ) : null;\n\n  const InnerStep = useMemo<(props: StepProps) => React.ReactElement>(() => {\n    if (active) {\n      return ActiveStep;\n    }\n    if (completed) {\n      return CompleteStep;\n    }\n    return IncompleteStep;\n  }, [completed, active]);\n\n  return (\n    <Flex\n      align=\"center\"\n      direction={direction === 'horizontal' ? 'row' : 'column'}\n      gap=\"4\"\n      position=\"relative\"\n      style={{ flex: 1 }}\n    >\n      {connector}\n      <InnerStep Icon={Icon}>{children}</InnerStep>\n    </Flex>\n  );\n}\n\nfunction CompleteStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active } = useContext(StepContext);\n  const background = 'var(--accent-a4)';\n  const border = '1px solid var(--accent-7)';\n  const color = 'var(--accent-contrast)';\n\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={<CheckIcon fill={color} height={16} width={16} />}\n          radius=\"full\"\n          size=\"medium\"\n          style={{\n            border,\n            background,\n          }}\n        />\n      )}\n      <Typo align=\"center\">{children}</Typo>\n    </>\n  );\n}\n\nfunction IncompleteStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active, index } = useContext(StepContext);\n  const background = 'var(--gray-5)';\n  const color = 'var(--gray-a11)';\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={<Typo style={{ color }}>{index + 1}</Typo>}\n          radius=\"full\"\n          size=\"medium\"\n          style={{\n            background,\n          }}\n        />\n      )}\n      <Typo align=\"center\" style={{ color }}>\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nfunction ActiveStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active, index } = useContext(StepContext);\n  const background = 'var(--accent-10)';\n  const color = 'var(--accent-contrast)';\n\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={\n            <Typo style={{ color }} weight=\"bold\">\n              {index + 1}\n            </Typo>\n          }\n          radius=\"full\"\n          size=\"medium\"\n          style={{ background }}\n        />\n      )}\n      <Typo align=\"center\" weight=\"bold\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nexport const Stepper = {\n  Root,\n  Step,\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-6QSBHXVV.js

@@ -0,0 +1,96 @@
+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 { 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);
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      direction: direction === "horizontal" ? "row" : "column",
+      style: { flex: 1 },
+      children: [
+        Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(Avatar, { fallback: index + 1, radius: "full" }),
+        children
+      ]
+    }
+  );
+}
+var Stepper = {
+  Root,
+  Step
+};
+
+export {
+  Stepper
+};
+//# sourceMappingURL=chunk-6QSBHXVV.js.map

package/dist/chunk-6QSBHXVV.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';\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  return (\n    <Flex\n      align=\"center\"\n      direction={direction === 'horizontal' ? 'row' : 'column'}\n      style={{ flex: 1 }}\n    >\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;AA6DG,cAgCN,YAhCM;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,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAW,cAAc,eAAe,QAAQ;AAAA,MAChD,OAAO,EAAE,MAAM,EAAE;AAAA,MAEhB;AAAA,eACC,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-6VPSBCOF.js

@@ -0,0 +1,100 @@
+import {
+  TextField
+} from "./chunk-JPIZP2PZ.js";
+import {
+  ScrollArea
+} from "./chunk-ZKZDVS7G.js";
+import {
+  Popover
+} from "./chunk-5AVBYDPB.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Badge
+} from "./chunk-EFMOJ6IL.js";
+import {
+  Button
+} from "./chunk-V5VKW4N3.js";
+import {
+  CheckIcon
+} from "./chunk-7OOUSUGO.js";
+
+// src/molecules/tag-selector.tsx
+import { useCallback, useMemo, 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 onChangeValue = useCallback(
+    (e) => {
+      setValue(e.target.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));
+  }, []);
+  console.log({ selectedItem, placeholder });
+  return /* @__PURE__ */ jsxs(Popover.Root, { children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(
+      TextField.Root,
+      {
+        onChange: onChangeValue,
+        placeholder,
+        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, { children: /* @__PURE__ */ jsx(DropdownContainer, { items: options, children: /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", children: options.map((item) => {
+      const isSelected = Boolean(
+        selected.find((el) => el === item.id)
+      );
+      return /* @__PURE__ */ jsxs(Button, { style: { width: "100%" }, children: [
+        item.name,
+        isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
+      ] }, item.id);
+    }) }) }) }) })
+  ] });
+}
+
+export {
+  TagSelector
+};
+//# sourceMappingURL=chunk-6VPSBCOF.js.map

package/dist/chunk-6VPSBCOF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/tag-selector.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } 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 } from '../icon';\nimport { ScrollArea } from '../atoms/scroll-area';\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  onSelect?: (selected: ID[]) => void;\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}) => 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 onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setValue(e.target.value);\n    },\n    []\n  );\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  console.log({ selectedItem, placeholder });\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger>\n        <TextField.Root\n          onChange={onChangeValue}\n          placeholder={placeholder}\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      </Popover.Trigger>\n\n      <Popover.Content>\n        <DropdownContainer items={options}>\n          <ScrollArea>\n            <Flex direction=\"column\">\n              {options.map((item) => {\n                const isSelected = Boolean(\n                  selected.find((el) => el === item.id)\n                );\n                return (\n                  <Button key={item.id} style={{ width: '100%' }}>\n                    {item.name}\n                    {isSelected ? <CheckIcon /> : null}\n                  </Button>\n                );\n              })}\n            </Flex>\n          </ScrollArea>\n        </DropdownContainer>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,aAAa,SAAS,gBAAgB;AACtD,SAAS,kBAAkB,kBAAkB;AAoF7B,SAQI,KARJ;AApDhB,IAAM,2BAA2B,CAAC,UAER;AACxB,SAAO,MAAM;AACf;AAEO,SAAS,YACd,OACoB;AACpB,QAAM;AAAA,IACJ,UAAU,CAAC;AAAA,IACX;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,EACtB,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmB,MAAM,YAAY,CAAC,CAAC;AACvE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,EAAE;AAC7C,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAM;AACL,eAAS,EAAE,OAAO,KAAK;AAAA,IACzB;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,QAAa,MAAM;AACtC,UAAM,SAAS,CAAC;AAChB,aAAS,QAAQ,CAAC,OAAO;AACvB,YAAM,YAAY,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE;AAC3D,UAAI;AAAW,eAAO,KAAK,SAAS;AAAA,IACtC,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,QAAM,WAAW,YAAY,CAAC,OAAe;AAC3C,gBAAY,CAAC,SAAS,KAAK,OAAO,CAAC,OAAO,OAAO,EAAE,CAAC;AAAA,EACtD,GAAG,CAAC,CAAC;AAEL,UAAQ,IAAI,EAAE,cAAc,YAAY,CAAC;AAEzC,SACE,qBAAC,QAAQ,MAAR,EACC;AAAA,wBAAC,QAAQ,SAAR,EACC;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QAEA;AAAA,8BAAC,UAAU,MAAV,EACE,uBAAa,IAAI,CAAC,SAAS;AAC1B,mBAAO,YACL,UAAU,IAAI,IAEd,qBAAC,SACE;AAAA,mBAAK;AAAA,cACN;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS,MAAM;AACb,6BAAS,KAAK,EAAE;AAAA,kBAClB;AAAA,kBACA,SAAQ;AAAA,kBAER,8BAAC,cAAW;AAAA;AAAA,cACd;AAAA,eACF;AAAA,UAEJ,CAAC,GACH;AAAA,UACA,oBAAC,UAAU,MAAV,EACC,8BAAC,oBAAiB,GACpB;AAAA;AAAA;AAAA,IACF,GACF;AAAA,IAEA,oBAAC,QAAQ,SAAR,EACC,8BAAC,qBAAkB,OAAO,SACxB,8BAAC,cACC,8BAAC,QAAK,WAAU,UACb,kBAAQ,IAAI,CAAC,SAAS;AACrB,YAAM,aAAa;AAAA,QACjB,SAAS,KAAK,CAAC,OAAO,OAAO,KAAK,EAAE;AAAA,MACtC;AACA,aACE,qBAAC,UAAqB,OAAO,EAAE,OAAO,OAAO,GAC1C;AAAA,aAAK;AAAA,QACL,aAAa,oBAAC,aAAU,IAAK;AAAA,WAFnB,KAAK,EAGlB;AAAA,IAEJ,CAAC,GACH,GACF,GACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-6YV7I4HP.js

@@ -0,0 +1,130 @@
+import {
+  IconButton
+} from "./chunk-O3DNDMV3.js";
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon
+} from "./chunk-7OOUSUGO.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/atoms/pagination.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pagination(props) {
+  const { onChange, count = 0, siblingCount = 2 } = props;
+  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
+  const visibleItems = useMemo(() => {
+    let start = Math.max(1, page - siblingCount);
+    let end = Math.min(count, page + siblingCount);
+    if (page - siblingCount <= 0 && end < count) {
+      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);
+    } else if (page + siblingCount > count && start > 1) {
+      start = Math.max(1, start - (page + siblingCount - count));
+    }
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, [count, page, siblingCount]);
+  useEffect(() => {
+    onChange == null ? void 0 : onChange(page);
+  }, [onChange, page]);
+  useEffect(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+  const prev = useMemo(() => {
+    const p = page - 1;
+    return p < 1 ? void 0 : p;
+  }, [page]);
+  const next = useMemo(() => {
+    const n = page + 1;
+    return n > count ? void 0 : n;
+  }, [count, page]);
+  const onClickPrev = useCallback(() => {
+    prev && setPage(prev);
+  }, [prev]);
+  const onClickNext = useCallback(() => {
+    next && setPage(next);
+  }, [next]);
+  const doublePrev = useMemo(() => {
+    if (!visibleItems.length)
+      return;
+    return Math.max(0, visibleItems[0] - 1);
+  }, [visibleItems]);
+  const onClickDoublePrev = useCallback(() => {
+    doublePrev && setPage(doublePrev);
+  }, [doublePrev]);
+  const doubleNext = useMemo(() => {
+    if (!visibleItems.length)
+      return;
+    const n = visibleItems[visibleItems.length - 1] + 1;
+    if (n > count)
+      return;
+    return Math.min(count, n);
+  }, [count, visibleItems]);
+  const onClickDoubleNext = useCallback(() => {
+    doubleNext && setPage(doubleNext);
+  }, [doubleNext]);
+  const iconSize = {
+    height: 24,
+    width: 24
+  };
+  const moveButtonProps = {
+    variant: "ghost",
+    size: "3",
+    style: { borderRadius: "50%" }
+  };
+  if (!page)
+    return null;
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      __spreadProps(__spreadValues({
+        disabled: !doublePrev,
+        onClick: onClickDoublePrev
+      }, moveButtonProps), {
+        children: /* @__PURE__ */ jsx(DoubleArrowLeftIcon, __spreadValues({}, iconSize))
+      })
+    ),
+    /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronLeftIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ jsx(Flex, { gap: "1", children: visibleItems.map((item) => {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `page-button ${item === page ? "active" : ""}`,
+          onClick: () => {
+            setPage(item);
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsx(Typo, { variant: "body", children: item })
+        },
+        item
+      );
+    }) }),
+    /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ jsx(ChevronRightIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      __spreadProps(__spreadValues({
+        disabled: !doubleNext,
+        onClick: onClickDoubleNext
+      }, moveButtonProps), {
+        children: /* @__PURE__ */ jsx(DoubleArrowRightIcon, __spreadValues({}, iconSize))
+      })
+    )
+  ] });
+}
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-6YV7I4HP.js.map

package/dist/chunk-6YV7I4HP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/pagination.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n} from '../icon';\nimport type { IconButtonProps } from './icon-button';\nimport { IconButton } from './icon-button';\nimport { Flex } from './flex';\nimport { Typo } from './typo';\n\nexport interface PaginationProps {\n  /** 현재 선택된 페이지 */\n  page?: number;\n  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */\n  defaultPage?: number;\n  /** 선택한 페이지 변경 이벤트 cb */\n  onChange?: (page: number) => void;\n  /** 전체 페이지의 수 */\n  count?: number;\n  siblingCount?: number;\n}\n\nexport function Pagination(props: PaginationProps): React.ReactNode {\n  const { onChange, count = 0, siblingCount = 2 } = props;\n\n  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);\n\n  const visibleItems = useMemo(() => {\n    let start = Math.max(1, page - siblingCount);\n    let end = Math.min(count, page + siblingCount);\n    if (page - siblingCount <= 0 && end < count) {\n      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);\n    } else if (page + siblingCount > count && start > 1) {\n      start = Math.max(1, start - (page + siblingCount - count));\n    }\n\n    return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n  }, [count, page, siblingCount]);\n\n  useEffect(() => {\n    onChange?.(page);\n  }, [onChange, page]);\n\n  useEffect(() => {\n    if (props.page) {\n      setPage(props.page);\n    }\n  }, [props.page]);\n\n  const prev = useMemo<number | undefined>(() => {\n    const p = page - 1;\n    return p < 1 ? undefined : p;\n  }, [page]);\n\n  const next = useMemo<number | undefined>(() => {\n    const n = page + 1;\n    return n > count ? undefined : n;\n  }, [count, page]);\n\n  const onClickPrev = useCallback(() => {\n    prev && setPage(prev);\n  }, [prev]);\n\n  const onClickNext = useCallback(() => {\n    next && setPage(next);\n  }, [next]);\n\n  const doublePrev = useMemo<number | undefined>(() => {\n    if (!visibleItems.length) return;\n    return Math.max(0, visibleItems[0] - 1);\n  }, [visibleItems]);\n\n  const onClickDoublePrev = useCallback(() => {\n    doublePrev && setPage(doublePrev);\n  }, [doublePrev]);\n\n  const doubleNext = useMemo<number | undefined>(() => {\n    if (!visibleItems.length) return;\n    const n = visibleItems[visibleItems.length - 1] + 1;\n    if (n > count) return;\n    return Math.min(count, n);\n  }, [count, visibleItems]);\n\n  const onClickDoubleNext = useCallback(() => {\n    doubleNext && setPage(doubleNext);\n  }, [doubleNext]);\n\n  const iconSize = {\n    height: 24,\n    width: 24,\n  };\n\n  const moveButtonProps: IconButtonProps = {\n    variant: 'ghost',\n    size: '3',\n    style: { borderRadius: '50%' },\n  };\n\n  if (!page) return null;\n\n  return (\n    <Flex align=\"center\" className=\"tipp-pagination\" gap=\"4\">\n      <IconButton\n        disabled={!doublePrev}\n        onClick={onClickDoublePrev}\n        {...moveButtonProps}\n      >\n        <DoubleArrowLeftIcon {...iconSize} />\n      </IconButton>\n      <IconButton disabled={!prev} onClick={onClickPrev} {...moveButtonProps}>\n        <ChevronLeftIcon {...iconSize} />\n      </IconButton>\n      <Flex gap=\"1\">\n        {visibleItems.map((item) => {\n          return (\n            <button\n              className={`page-button ${item === page ? 'active' : ''}`}\n              key={item}\n              onClick={() => {\n                setPage(item);\n              }}\n              type=\"button\"\n            >\n              <Typo variant=\"body\">{item}</Typo>\n            </button>\n          );\n        })}\n      </Flex>\n      <IconButton disabled={!next} onClick={onClickNext} {...moveButtonProps}>\n        <ChevronRightIcon {...iconSize} />\n      </IconButton>\n      <IconButton\n        disabled={!doubleNext}\n        onClick={onClickDoubleNext}\n        {...moveButtonProps}\n      >\n        <DoubleArrowRightIcon {...iconSize} />\n      </IconButton>\n    </Flex>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-6ZS5J5JS.js

@@ -0,0 +1,126 @@
+import {
+  TextField
+} from "./chunk-JPIZP2PZ.js";
+import {
+  ScrollArea
+} from "./chunk-ZKZDVS7G.js";
+import {
+  Popover
+} from "./chunk-5AVBYDPB.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-V5VKW4N3.js";
+import {
+  CheckIcon
+} from "./chunk-7OOUSUGO.js";
+import {
+  Badge
+} from "./chunk-EFMOJ6IL.js";
+
+// src/molecules/tag-selector.tsx
+import { useCallback, useMemo, 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 onChangeValue = useCallback(
+    (e) => {
+      setValue(e.target.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 Toggle = useCallback(
+    (id) => {
+      if (selected.includes(id)) {
+        onDelete(id);
+      } else {
+        onSelect(id);
+      }
+    },
+    [onDelete, onSelect, selected]
+  );
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover.Root, { onOpenChange: setOpen, open, children: [
+    /* @__PURE__ */ jsxs(
+      TextField.Root,
+      {
+        onChange: onChangeValue,
+        onFocus: () => {
+          setOpen(true);
+        },
+        placeholder: selectedItem.length ? "" : placeholder,
+        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, { children: /* @__PURE__ */ jsx(DropdownContainer, { items: options, children: /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", children: options.map((item) => {
+      const isSelected = Boolean(
+        selected.find((el) => el === item.id)
+      );
+      return /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: () => {
+            Toggle(item.id);
+          },
+          style: { width: "100%" },
+          children: [
+            item.name,
+            isSelected ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
+          ]
+        },
+        item.id
+      );
+    }) }) }) }) })
+  ] });
+}
+
+export {
+  TagSelector
+};
+//# sourceMappingURL=chunk-6ZS5J5JS.js.map