@tipp/ui 1.2.3 → 1.2.4

package/dist/chunk-U4ESLEOX.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.ReactElement {\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-V2ACXQA5.js

@@ -0,0 +1,71 @@
+// src/icon.ts
+import {
+  BookmarkIcon,
+  ExitIcon,
+  InfoCircledIcon,
+  ExclamationTriangleIcon,
+  MagnifyingGlassIcon,
+  DotsHorizontalIcon,
+  ChatBubbleIcon,
+  PlusIcon,
+  BookmarkFilledIcon,
+  MixerHorizontalIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ClipboardIcon,
+  BarChartIcon,
+  PersonIcon,
+  GearIcon,
+  DotsVerticalIcon,
+  Pencil1Icon,
+  Cross1Icon,
+  Link2Icon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  FileIcon,
+  TrashIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+  GlobeIcon,
+  BackpackIcon,
+  CalendarIcon,
+  CheckIcon,
+  ArchiveIcon,
+  RowsIcon
+} from "@radix-ui/react-icons";
+
+export {
+  BookmarkIcon,
+  ExitIcon,
+  InfoCircledIcon,
+  ExclamationTriangleIcon,
+  MagnifyingGlassIcon,
+  DotsHorizontalIcon,
+  ChatBubbleIcon,
+  PlusIcon,
+  BookmarkFilledIcon,
+  MixerHorizontalIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ClipboardIcon,
+  BarChartIcon,
+  PersonIcon,
+  GearIcon,
+  DotsVerticalIcon,
+  Pencil1Icon,
+  Cross1Icon,
+  Link2Icon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  FileIcon,
+  TrashIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+  GlobeIcon,
+  BackpackIcon,
+  CalendarIcon,
+  CheckIcon,
+  ArchiveIcon,
+  RowsIcon
+};
+//# sourceMappingURL=chunk-V2ACXQA5.js.map

package/dist/chunk-V2ACXQA5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ClipboardIcon,\n  BarChartIcon,\n  PersonIcon,\n  GearIcon,\n  DotsVerticalIcon,\n  Pencil1Icon,\n  Cross1Icon,\n  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n  RowsIcon,\n} from '@radix-ui/react-icons';\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/dist/icon.cjs

@@ -50,6 +50,7 @@ __export(icon_exports, {
   Pencil1Icon: () => import_react_icons.Pencil1Icon,
   PersonIcon: () => import_react_icons.PersonIcon,
   PlusIcon: () => import_react_icons.PlusIcon,
+  RowsIcon: () => import_react_icons.RowsIcon,
   TrashIcon: () => import_react_icons.TrashIcon
 });
 module.exports = __toCommonJS(icon_exports);
@@ -86,6 +87,7 @@ var import_react_icons = require("@radix-ui/react-icons");
   Pencil1Icon,
   PersonIcon,
   PlusIcon,
+  RowsIcon,
   TrashIcon
 });
 //# sourceMappingURL=icon.cjs.map

package/dist/icon.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ClipboardIcon,\n  BarChartIcon,\n  PersonIcon,\n  GearIcon,\n  DotsVerticalIcon,\n  Pencil1Icon,\n  Cross1Icon,\n  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n} from '@radix-ui/react-icons';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAgCO;","names":[]}
+{"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ClipboardIcon,\n  BarChartIcon,\n  PersonIcon,\n  GearIcon,\n  DotsVerticalIcon,\n  Pencil1Icon,\n  Cross1Icon,\n  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n  RowsIcon,\n} from '@radix-ui/react-icons';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAiCO;","names":[]}

package/dist/icon.d.cts

@@ -1,3 +1,3 @@
-export { ArchiveIcon, BackpackIcon, BarChartIcon, BookmarkFilledIcon, BookmarkIcon, CalendarIcon, ChatBubbleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, ExclamationTriangleIcon, ExitIcon, FileIcon, GearIcon, GlobeIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon, TrashIcon } from '@radix-ui/react-icons';
+export { ArchiveIcon, BackpackIcon, BarChartIcon, BookmarkFilledIcon, BookmarkIcon, CalendarIcon, ChatBubbleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, ExclamationTriangleIcon, ExitIcon, FileIcon, GearIcon, GlobeIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon, RowsIcon, TrashIcon } from '@radix-ui/react-icons';
 import '@radix-ui/themes';
 import '@radix-ui/themes/dist/cjs/props/index.js';

package/dist/icon.d.ts

@@ -1,3 +1,3 @@
-export { ArchiveIcon, BackpackIcon, BarChartIcon, BookmarkFilledIcon, BookmarkIcon, CalendarIcon, ChatBubbleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, ExclamationTriangleIcon, ExitIcon, FileIcon, GearIcon, GlobeIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon, TrashIcon } from '@radix-ui/react-icons';
+export { ArchiveIcon, BackpackIcon, BarChartIcon, BookmarkFilledIcon, BookmarkIcon, CalendarIcon, ChatBubbleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, ExclamationTriangleIcon, ExitIcon, FileIcon, GearIcon, GlobeIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon, RowsIcon, TrashIcon } from '@radix-ui/react-icons';
 import '@radix-ui/themes';
 import '@radix-ui/themes/dist/cjs/props/index.js';

package/dist/icon.js

@@ -29,8 +29,9 @@ import {
   Pencil1Icon,
   PersonIcon,
   PlusIcon,
+  RowsIcon,
   TrashIcon
-} from "./chunk-AW44EUZH.js";
+} from "./chunk-V2ACXQA5.js";
 import "./chunk-N552FDTV.js";
 export {
   ArchiveIcon,
@@ -63,6 +64,7 @@ export {
   Pencil1Icon,
   PersonIcon,
   PlusIcon,
+  RowsIcon,
   TrashIcon
 };
 //# sourceMappingURL=icon.js.map

package/dist/index.cjs

@@ -136,6 +136,7 @@ __export(src_exports, {
   RadioCards: () => import_themes33.RadioCards,
   RadioGroup: () => import_themes34.RadioGroup,
   Root: () => Root4,
+  RowsIcon: () => import_react_icons2.RowsIcon,
   ScrollArea: () => import_themes35.ScrollArea,
   Section: () => import_themes36.Section,
   SegmentedControl: () => import_themes37.SegmentedControl,
@@ -2161,6 +2162,7 @@ function scrollTo(element, targetPosition, duration) {
   RadioCards,
   RadioGroup,
   Root,
+  RowsIcon,
   ScrollArea,
   Section,
   SegmentedControl,