sellmate-design-system-react 0.1.0

package/dist/components/Badge/Badge.js

@@ -0,0 +1,36 @@
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Badge/Badge.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var BADGE_COLORS = [
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "darkblue",
+  "indigo",
+  "grey"
+];
+var Badge = forwardRef(function Badge2({ color = "blue", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx("span", { ref, className: cn("inline-flex items-center justify-center", className), ...rest, children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "rounded-full",
+      style: {
+        width: "var(--cmp-badge-size, 6px)",
+        height: "var(--cmp-badge-size, 6px)",
+        background: `var(--cmp-badge-${color})`
+      }
+    }
+  ) });
+});
+
+export { BADGE_COLORS, Badge };
+//# sourceMappingURL=Badge.js.map
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/Badge/Badge.tsx"],"names":["Badge"],"mappings":";;;;;;AAOO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACNO,IAAM,YAAA,GAAe;AAAA,EAC1B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF;AAYO,IAAM,KAAA,GAAQ,UAAA,CAAwC,SAASA,MAAAA,CACpE,EAAE,KAAA,GAAQ,MAAA,EAAQ,SAAA,EAAW,GAAG,IAAA,EAAK,EACrC,GAAA,EACA;AACA,EAAA,uBACE,GAAA,CAAC,UAAK,GAAA,EAAU,SAAA,EAAW,GAAG,yCAAA,EAA2C,SAAS,CAAA,EAAI,GAAG,IAAA,EACvF,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,cAAA;AAAA,MACV,KAAA,EAAO;AAAA,QACL,KAAA,EAAO,4BAAA;AAAA,QACP,MAAA,EAAQ,4BAAA;AAAA,QACR,UAAA,EAAY,mBAAmB,KAAK,CAAA,CAAA;AAAA;AACtC;AAAA,GACF,EACF,CAAA;AAEJ,CAAC","file":"Badge.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport const BADGE_COLORS = [\n  'red',\n  'orange',\n  'yellow',\n  'green',\n  'blue',\n  'darkblue',\n  'indigo',\n  'grey',\n] as const;\nexport type BadgeColor = (typeof BADGE_COLORS)[number];\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** 뱃지 색상 */\n  color?: BadgeColor;\n}\n\n/**\n * Badge — sd-badge 포팅. 색상 점(dot) 인디케이터.\n * 색상은 컴포넌트 토큰 `--cmp-badge-<color>` 를 참조한다.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { color = 'blue', className, ...rest },\n  ref,\n) {\n  return (\n    <span ref={ref} className={cn('inline-flex items-center justify-center', className)} {...rest}>\n      <span\n        className=\"rounded-full\"\n        style={{\n          width: 'var(--cmp-badge-size, 6px)',\n          height: 'var(--cmp-badge-size, 6px)',\n          background: `var(--cmp-badge-${color})`,\n        }}\n      />\n    </span>\n  );\n});\n"]}

package/dist/components/Badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge, BADGE_COLORS, type BadgeColor, type BadgeProps } from './Badge';