@exem-ui/react 0.1.0

package/dist/chunk-L7P2NDST.mjs

@@ -0,0 +1,124 @@
+import { X } from './chunk-LZWKMQJL.mjs';
+import { cva, cn } from '@exem-ui/core/utils';
+import { forwardRef, Fragment } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var tagVariants = cva(
+  "inline-flex h-5 items-center gap-0.5 rounded-medium px-1 text-body-3 font-medium",
+  {
+    variants: {
+      color: {
+        mono: "text-tint-foreground-mono",
+        sky: "text-tint-foreground-sky",
+        red: "text-tint-foreground-red",
+        amber: "text-tint-foreground-amber",
+        green: "text-tint-foreground-green",
+        orange: "text-tint-foreground-orange",
+        cyan: "text-tint-foreground-cyan",
+        violet: "text-tint-foreground-violet",
+        pink: "text-tint-foreground-pink",
+        yellow: "text-tint-foreground-yellow",
+        lime: "text-tint-foreground-lime",
+        emerald: "text-tint-foreground-emerald",
+        teal: "text-tint-foreground-teal",
+        blue: "text-tint-foreground-blue",
+        indigo: "text-tint-foreground-indigo",
+        purple: "text-tint-foreground-purple",
+        fuchsia: "text-tint-foreground-fuchsia",
+        rose: "text-tint-foreground-rose"
+      },
+      type: {
+        fill: "",
+        line: "bg-component-tag border border-border-secondary"
+      }
+    },
+    compoundVariants: [
+      { color: "mono", type: "fill", className: "bg-tint-background-mono" },
+      { color: "sky", type: "fill", className: "bg-tint-background-sky" },
+      { color: "red", type: "fill", className: "bg-tint-background-red" },
+      { color: "amber", type: "fill", className: "bg-tint-background-amber" },
+      { color: "green", type: "fill", className: "bg-tint-background-green" },
+      { color: "orange", type: "fill", className: "bg-tint-background-orange" },
+      { color: "cyan", type: "fill", className: "bg-tint-background-cyan" },
+      { color: "violet", type: "fill", className: "bg-tint-background-violet" },
+      { color: "pink", type: "fill", className: "bg-tint-background-pink" },
+      { color: "yellow", type: "fill", className: "bg-tint-background-yellow" },
+      { color: "lime", type: "fill", className: "bg-tint-background-lime" },
+      { color: "emerald", type: "fill", className: "bg-tint-background-emerald" },
+      { color: "teal", type: "fill", className: "bg-tint-background-teal" },
+      { color: "blue", type: "fill", className: "bg-tint-background-blue" },
+      { color: "indigo", type: "fill", className: "bg-tint-background-indigo" },
+      { color: "purple", type: "fill", className: "bg-tint-background-purple" },
+      { color: "fuchsia", type: "fill", className: "bg-tint-background-fuchsia" },
+      { color: "rose", type: "fill", className: "bg-tint-background-rose" }
+    ],
+    defaultVariants: {
+      color: "mono",
+      type: "fill"
+    }
+  }
+);
+var Tag = forwardRef(
+  ({
+    className,
+    color,
+    type = "fill",
+    leftIcon,
+    canDelete,
+    onDelete,
+    rightSlot,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "tag",
+        className: cn(tagVariants({ color, type, className })),
+        ref,
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 size-3 items-center justify-center [&>svg]:size-3", children: leftIcon }),
+          /* @__PURE__ */ jsx("span", { className: "px-0.5 text-body-3 font-medium", children }),
+          canDelete && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete?.();
+              },
+              children: /* @__PURE__ */ jsx(X, { type: "regular", className: "size-3 [&>*]:stroke-current [&>path]:fill-current" })
+            }
+          ),
+          rightSlot && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: rightSlot })
+        ]
+      }
+    );
+  }
+);
+Tag.displayName = "Tag";
+var DoubleTag = forwardRef(
+  ({ className, items, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex w-fit overflow-hidden rounded-medium border border-border-secondary",
+          className
+        ),
+        ref,
+        ...props,
+        children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Tag, { color: item.color, type: "line", className: "rounded-none border-none", children: item.content }),
+          index < items.length - 1 && /* @__PURE__ */ jsx("div", { className: "min-h-[20px] w-px border-none bg-border-secondary" })
+        ] }, index))
+      }
+    );
+  }
+);
+DoubleTag.displayName = "DoubleTag";
+
+export { DoubleTag, Tag };
+//# sourceMappingURL=chunk-L7P2NDST.mjs.map
+//# sourceMappingURL=chunk-L7P2NDST.mjs.map

package/dist/chunk-L7P2NDST.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tag/Tag.tsx"],"names":[],"mappings":"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","file":"chunk-L7P2NDST.mjs","sourcesContent":["import { cn, cva, type VariantProps } from '@exem-ui/core/utils';\nimport type React from 'react';\nimport { Fragment, forwardRef } from 'react';\nimport { XIcon } from '../icon';\n\ntype TagColor = VariantProps<typeof tagVariants>['color'];\n\ninterface TagProps\n  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'children' | 'style'>,\n    VariantProps<typeof tagVariants> {\n  /** 텍스트 왼쪽에 표시할 아이콘 */\n  leftIcon?: React.ReactElement<{ className?: string }>;\n  /**\n   * 삭제 아이콘 표시 여부\n   * @default false\n   */\n  canDelete?: boolean;\n  /** 삭제 버튼 클릭 핸들러 */\n  onDelete?: () => void;\n  /** 텍스트 오른쪽에 표시할 슬롯 요소 */\n  rightSlot?: React.ReactNode;\n}\n\ntype TagComponent = React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLDivElement>>;\n\ninterface DoubleTagProps {\n  /** 표시할 태그 항목 배열 (각 항목은 color와 content를 가짐) */\n  items: {\n    color: TagColor;\n    content: React.ReactNode;\n  }[];\n  className?: string;\n}\n\nconst tagVariants = cva(\n  'inline-flex h-5 items-center gap-0.5 rounded-medium px-1 text-body-3 font-medium',\n  {\n    variants: {\n      color: {\n        mono: 'text-tint-foreground-mono',\n        sky: 'text-tint-foreground-sky',\n        red: 'text-tint-foreground-red',\n        amber: 'text-tint-foreground-amber',\n        green: 'text-tint-foreground-green',\n        orange: 'text-tint-foreground-orange',\n        cyan: 'text-tint-foreground-cyan',\n        violet: 'text-tint-foreground-violet',\n        pink: 'text-tint-foreground-pink',\n        yellow: 'text-tint-foreground-yellow',\n        lime: 'text-tint-foreground-lime',\n        emerald: 'text-tint-foreground-emerald',\n        teal: 'text-tint-foreground-teal',\n        blue: 'text-tint-foreground-blue',\n        indigo: 'text-tint-foreground-indigo',\n        purple: 'text-tint-foreground-purple',\n        fuchsia: 'text-tint-foreground-fuchsia',\n        rose: 'text-tint-foreground-rose',\n      },\n      type: {\n        fill: '',\n        line: 'bg-component-tag border border-border-secondary',\n      },\n    },\n    compoundVariants: [\n      { color: 'mono', type: 'fill', className: 'bg-tint-background-mono' },\n      { color: 'sky', type: 'fill', className: 'bg-tint-background-sky' },\n      { color: 'red', type: 'fill', className: 'bg-tint-background-red' },\n      { color: 'amber', type: 'fill', className: 'bg-tint-background-amber' },\n      { color: 'green', type: 'fill', className: 'bg-tint-background-green' },\n      { color: 'orange', type: 'fill', className: 'bg-tint-background-orange' },\n      { color: 'cyan', type: 'fill', className: 'bg-tint-background-cyan' },\n      { color: 'violet', type: 'fill', className: 'bg-tint-background-violet' },\n      { color: 'pink', type: 'fill', className: 'bg-tint-background-pink' },\n      { color: 'yellow', type: 'fill', className: 'bg-tint-background-yellow' },\n      { color: 'lime', type: 'fill', className: 'bg-tint-background-lime' },\n      { color: 'emerald', type: 'fill', className: 'bg-tint-background-emerald' },\n      { color: 'teal', type: 'fill', className: 'bg-tint-background-teal' },\n      { color: 'blue', type: 'fill', className: 'bg-tint-background-blue' },\n      { color: 'indigo', type: 'fill', className: 'bg-tint-background-indigo' },\n      { color: 'purple', type: 'fill', className: 'bg-tint-background-purple' },\n      { color: 'fuchsia', type: 'fill', className: 'bg-tint-background-fuchsia' },\n      { color: 'rose', type: 'fill', className: 'bg-tint-background-rose' },\n    ],\n    defaultVariants: {\n      color: 'mono',\n      type: 'fill',\n    },\n  },\n);\n\n/**\n * 카테고리나 상태를 나타내는 라벨 컴포넌트입니다.\n * 18가지 색상과 `fill`/`line` 타입을 지원합니다.\n *\n * @example\n * ```tsx\n * <Tag color=\"sky\">라벨</Tag>\n * <Tag color=\"red\" type=\"line\">경고</Tag>\n * <Tag color=\"green\" canDelete onDelete={handleDelete}>삭제 가능</Tag>\n * <Tag color=\"blue\" leftIcon={<StarIcon type=\"regular\" />}>아이콘 태그</Tag>\n * <Tag color=\"blue\" rightSlot={<Icon />}>커스텀 슬롯</Tag>\n * ```\n *\n * @see {@link TagProps} props 상세\n */\nconst Tag = forwardRef<HTMLDivElement, TagProps>(\n  (\n    {\n      className,\n      color,\n      type = 'fill',\n      leftIcon,\n      canDelete,\n      onDelete,\n      rightSlot,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        data-slot=\"tag\"\n        className={cn(tagVariants({ color, type, className }))}\n        ref={ref}\n        {...props}\n      >\n        {leftIcon && (\n          <span className=\"flex shrink-0 size-3 items-center justify-center [&>svg]:size-3\">\n            {leftIcon}\n          </span>\n        )}\n        <span className=\"px-0.5 text-body-3 font-medium\">{children}</span>\n        {canDelete && (\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onDelete?.();\n            }}\n          >\n            <XIcon type=\"regular\" className=\"size-3 [&>*]:stroke-current [&>path]:fill-current\" />\n          </button>\n        )}\n        {rightSlot && <div className=\"ml-auto\">{rightSlot}</div>}\n      </div>\n    );\n  },\n);\n\nTag.displayName = 'Tag';\n\n/**\n * 두 개의 태그를 나란히 연결하여 키-값 쌍을 표시하는 컴포넌트입니다.\n * 각 태그는 `line` 타입으로 렌더링되며, 사이에 구분선이 표시됩니다.\n *\n * @example\n * ```tsx\n * <DoubleTag\n *   items={[\n *     { color: 'blue', content: '카테고리' },\n *     { color: 'red', content: '긴급' },\n *   ]}\n * />\n * ```\n *\n * @see {@link DoubleTagProps} props 상세\n */\nconst DoubleTag = forwardRef<HTMLDivElement, DoubleTagProps>(\n  ({ className, items, ...props }, ref) => {\n    return (\n      <div\n        className={cn(\n          'flex w-fit overflow-hidden rounded-medium border border-border-secondary',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {items.map((item, index) => (\n          <Fragment key={index}>\n            <Tag color={item.color} type=\"line\" className=\"rounded-none border-none\">\n              {item.content}\n            </Tag>\n            {index < items.length - 1 && (\n              <div className=\"min-h-[20px] w-px border-none bg-border-secondary\" />\n            )}\n          </Fragment>\n        ))}\n      </div>\n    );\n  },\n);\n\nDoubleTag.displayName = 'DoubleTag';\n\nexport { Tag, DoubleTag };\nexport type { TagComponent, TagProps, TagColor, DoubleTagProps };\n"]}