@exem-ui/react 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -0
- package/dist/Button-CMenVfb7.d.mts +35 -0
- package/dist/Button-CMenVfb7.d.ts +35 -0
- package/dist/Select-DMvWV_rF.d.mts +94 -0
- package/dist/Select-DMvWV_rF.d.ts +94 -0
- package/dist/avatar/index.d.mts +37 -0
- package/dist/avatar/index.d.ts +37 -0
- package/dist/avatar/index.js +13 -0
- package/dist/avatar/index.js.map +1 -0
- package/dist/avatar/index.mjs +4 -0
- package/dist/avatar/index.mjs.map +1 -0
- package/dist/badge/index.d.mts +29 -0
- package/dist/badge/index.d.ts +29 -0
- package/dist/badge/index.js +12 -0
- package/dist/badge/index.js.map +1 -0
- package/dist/badge/index.mjs +3 -0
- package/dist/badge/index.mjs.map +1 -0
- package/dist/breadcrumb/index.d.mts +43 -0
- package/dist/breadcrumb/index.d.ts +43 -0
- package/dist/breadcrumb/index.js +13 -0
- package/dist/breadcrumb/index.js.map +1 -0
- package/dist/breadcrumb/index.mjs +4 -0
- package/dist/breadcrumb/index.mjs.map +1 -0
- package/dist/button/index.d.mts +9 -0
- package/dist/button/index.d.ts +9 -0
- package/dist/button/index.js +29 -0
- package/dist/button/index.js.map +1 -0
- package/dist/button/index.mjs +12 -0
- package/dist/button/index.mjs.map +1 -0
- package/dist/checkbox/index.d.mts +54 -0
- package/dist/checkbox/index.d.ts +54 -0
- package/dist/checkbox/index.js +13 -0
- package/dist/checkbox/index.js.map +1 -0
- package/dist/checkbox/index.mjs +4 -0
- package/dist/checkbox/index.mjs.map +1 -0
- package/dist/chunk-34QIGWCT.mjs +10 -0
- package/dist/chunk-34QIGWCT.mjs.map +1 -0
- package/dist/chunk-3FPMWAQT.js +30 -0
- package/dist/chunk-3FPMWAQT.js.map +1 -0
- package/dist/chunk-3HMT3DQV.js +104 -0
- package/dist/chunk-3HMT3DQV.js.map +1 -0
- package/dist/chunk-4WAO7CUT.mjs +95 -0
- package/dist/chunk-4WAO7CUT.mjs.map +1 -0
- package/dist/chunk-5M47B2XJ.js +4096 -0
- package/dist/chunk-5M47B2XJ.js.map +1 -0
- package/dist/chunk-5QX4TO4F.js +61 -0
- package/dist/chunk-5QX4TO4F.js.map +1 -0
- package/dist/chunk-5TEFN2CW.js +97 -0
- package/dist/chunk-5TEFN2CW.js.map +1 -0
- package/dist/chunk-5TES5PG6.js +41 -0
- package/dist/chunk-5TES5PG6.js.map +1 -0
- package/dist/chunk-5TVMECVF.js +148 -0
- package/dist/chunk-5TVMECVF.js.map +1 -0
- package/dist/chunk-5WGNZX7Z.mjs +27 -0
- package/dist/chunk-5WGNZX7Z.mjs.map +1 -0
- package/dist/chunk-AQ3OIM2T.js +103 -0
- package/dist/chunk-AQ3OIM2T.js.map +1 -0
- package/dist/chunk-AU5NTBK3.js +361 -0
- package/dist/chunk-AU5NTBK3.js.map +1 -0
- package/dist/chunk-DJHGCJR4.mjs +224 -0
- package/dist/chunk-DJHGCJR4.mjs.map +1 -0
- package/dist/chunk-DPUTW5KD.mjs +74 -0
- package/dist/chunk-DPUTW5KD.mjs.map +1 -0
- package/dist/chunk-E53FHDVN.mjs +336 -0
- package/dist/chunk-E53FHDVN.mjs.map +1 -0
- package/dist/chunk-ECRQD7UU.js +82 -0
- package/dist/chunk-ECRQD7UU.js.map +1 -0
- package/dist/chunk-FB4ESGOX.mjs +59 -0
- package/dist/chunk-FB4ESGOX.mjs.map +1 -0
- package/dist/chunk-FDX4IQK5.js +76 -0
- package/dist/chunk-FDX4IQK5.js.map +1 -0
- package/dist/chunk-FOMIUDRM.js +96 -0
- package/dist/chunk-FOMIUDRM.js.map +1 -0
- package/dist/chunk-FR5F3VTU.js +139 -0
- package/dist/chunk-FR5F3VTU.js.map +1 -0
- package/dist/chunk-GW53LH3I.mjs +81 -0
- package/dist/chunk-GW53LH3I.mjs.map +1 -0
- package/dist/chunk-GXMRIT5E.mjs +94 -0
- package/dist/chunk-GXMRIT5E.mjs.map +1 -0
- package/dist/chunk-IANSI7F7.mjs +393 -0
- package/dist/chunk-IANSI7F7.mjs.map +1 -0
- package/dist/chunk-IDM6MZHF.js +415 -0
- package/dist/chunk-IDM6MZHF.js.map +1 -0
- package/dist/chunk-J5ZYQ3TP.js +104 -0
- package/dist/chunk-J5ZYQ3TP.js.map +1 -0
- package/dist/chunk-KPAUBWZA.mjs +39 -0
- package/dist/chunk-KPAUBWZA.mjs.map +1 -0
- package/dist/chunk-L7P2NDST.mjs +124 -0
- package/dist/chunk-L7P2NDST.mjs.map +1 -0
- package/dist/chunk-LZWKMQJL.mjs +3886 -0
- package/dist/chunk-LZWKMQJL.mjs.map +1 -0
- package/dist/chunk-M6OWN7QH.js +118 -0
- package/dist/chunk-M6OWN7QH.js.map +1 -0
- package/dist/chunk-MQVHREEI.js +448 -0
- package/dist/chunk-MQVHREEI.js.map +1 -0
- package/dist/chunk-MT47ECUN.js +127 -0
- package/dist/chunk-MT47ECUN.js.map +1 -0
- package/dist/chunk-N6U54JI4.mjs +126 -0
- package/dist/chunk-N6U54JI4.mjs.map +1 -0
- package/dist/chunk-NDG4LR3Q.js +139 -0
- package/dist/chunk-NDG4LR3Q.js.map +1 -0
- package/dist/chunk-PPD4BU4W.mjs +80 -0
- package/dist/chunk-PPD4BU4W.mjs.map +1 -0
- package/dist/chunk-PU5NO5EZ.js +4 -0
- package/dist/chunk-PU5NO5EZ.js.map +1 -0
- package/dist/chunk-Q442ZDTI.mjs +117 -0
- package/dist/chunk-Q442ZDTI.mjs.map +1 -0
- package/dist/chunk-QH23RO3C.mjs +137 -0
- package/dist/chunk-QH23RO3C.mjs.map +1 -0
- package/dist/chunk-REBHUF4L.js +226 -0
- package/dist/chunk-REBHUF4L.js.map +1 -0
- package/dist/chunk-RGB3QLQT.js +275 -0
- package/dist/chunk-RGB3QLQT.js.map +1 -0
- package/dist/chunk-T7U2QRLC.js +94 -0
- package/dist/chunk-T7U2QRLC.js.map +1 -0
- package/dist/chunk-TEHHJ3CS.mjs +73 -0
- package/dist/chunk-TEHHJ3CS.mjs.map +1 -0
- package/dist/chunk-TJY4MIBC.js +117 -0
- package/dist/chunk-TJY4MIBC.js.map +1 -0
- package/dist/chunk-VCMZQOQM.mjs +102 -0
- package/dist/chunk-VCMZQOQM.mjs.map +1 -0
- package/dist/chunk-VKN4H4WI.mjs +3 -0
- package/dist/chunk-VKN4H4WI.mjs.map +1 -0
- package/dist/chunk-VSB25XTY.js +12 -0
- package/dist/chunk-VSB25XTY.js.map +1 -0
- package/dist/chunk-VWTE74UT.mjs +96 -0
- package/dist/chunk-VWTE74UT.mjs.map +1 -0
- package/dist/chunk-WBTL7PBV.js +105 -0
- package/dist/chunk-WBTL7PBV.js.map +1 -0
- package/dist/chunk-WOK3EP3O.js +83 -0
- package/dist/chunk-WOK3EP3O.js.map +1 -0
- package/dist/chunk-WWT73GGM.mjs +83 -0
- package/dist/chunk-WWT73GGM.mjs.map +1 -0
- package/dist/chunk-XBDXTRK3.mjs +102 -0
- package/dist/chunk-XBDXTRK3.mjs.map +1 -0
- package/dist/chunk-YGBEKZWU.mjs +81 -0
- package/dist/chunk-YGBEKZWU.mjs.map +1 -0
- package/dist/chunk-YVFLRPFV.mjs +72 -0
- package/dist/chunk-YVFLRPFV.mjs.map +1 -0
- package/dist/chunk-ZMVBIQ2Z.mjs +253 -0
- package/dist/chunk-ZMVBIQ2Z.mjs.map +1 -0
- package/dist/chunk-ZWCMSHDP.mjs +425 -0
- package/dist/chunk-ZWCMSHDP.mjs.map +1 -0
- package/dist/flat/index.d.mts +13 -0
- package/dist/flat/index.d.ts +13 -0
- package/dist/flat/index.js +31 -0
- package/dist/flat/index.js.map +1 -0
- package/dist/flat/index.mjs +10 -0
- package/dist/flat/index.mjs.map +1 -0
- package/dist/flat/segment.d.mts +39 -0
- package/dist/flat/segment.d.ts +39 -0
- package/dist/flat/segment.js +13 -0
- package/dist/flat/segment.js.map +1 -0
- package/dist/flat/segment.mjs +4 -0
- package/dist/flat/segment.mjs.map +1 -0
- package/dist/flat/select.d.mts +58 -0
- package/dist/flat/select.d.ts +58 -0
- package/dist/flat/select.js +14 -0
- package/dist/flat/select.js.map +1 -0
- package/dist/flat/select.mjs +5 -0
- package/dist/flat/select.mjs.map +1 -0
- package/dist/flat/tooltip.d.mts +98 -0
- package/dist/flat/tooltip.d.ts +98 -0
- package/dist/flat/tooltip.js +17 -0
- package/dist/flat/tooltip.js.map +1 -0
- package/dist/flat/tooltip.mjs +4 -0
- package/dist/flat/tooltip.mjs.map +1 -0
- package/dist/icon/index.d.mts +1258 -0
- package/dist/icon/index.d.ts +1258 -0
- package/dist/icon/index.js +1672 -0
- package/dist/icon/index.js.map +1 -0
- package/dist/icon/index.mjs +3 -0
- package/dist/icon/index.mjs.map +1 -0
- package/dist/index-CXip5Wb1.d.mts +62 -0
- package/dist/index-Drz3P-6Y.d.ts +62 -0
- package/dist/index.d.mts +37 -0
- package/dist/index.d.ts +37 -0
- package/dist/index.js +150 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +29 -0
- package/dist/index.mjs.map +1 -0
- package/dist/input/index.d.mts +82 -0
- package/dist/input/index.d.ts +82 -0
- package/dist/input/index.js +22 -0
- package/dist/input/index.js.map +1 -0
- package/dist/input/index.mjs +5 -0
- package/dist/input/index.mjs.map +1 -0
- package/dist/loading/index.d.mts +54 -0
- package/dist/loading/index.d.ts +54 -0
- package/dist/loading/index.js +12 -0
- package/dist/loading/index.js.map +1 -0
- package/dist/loading/index.mjs +3 -0
- package/dist/loading/index.mjs.map +1 -0
- package/dist/messageBox/index.d.mts +33 -0
- package/dist/messageBox/index.d.ts +33 -0
- package/dist/messageBox/index.js +13 -0
- package/dist/messageBox/index.js.map +1 -0
- package/dist/messageBox/index.mjs +4 -0
- package/dist/messageBox/index.mjs.map +1 -0
- package/dist/modal/index.d.mts +97 -0
- package/dist/modal/index.d.ts +97 -0
- package/dist/modal/index.js +15 -0
- package/dist/modal/index.js.map +1 -0
- package/dist/modal/index.mjs +6 -0
- package/dist/modal/index.mjs.map +1 -0
- package/dist/picker/index.d.mts +12 -0
- package/dist/picker/index.d.ts +12 -0
- package/dist/picker/index.js +13 -0
- package/dist/picker/index.js.map +1 -0
- package/dist/picker/index.mjs +4 -0
- package/dist/picker/index.mjs.map +1 -0
- package/dist/progress/index.d.mts +36 -0
- package/dist/progress/index.d.ts +36 -0
- package/dist/progress/index.js +12 -0
- package/dist/progress/index.js.map +1 -0
- package/dist/progress/index.mjs +3 -0
- package/dist/progress/index.mjs.map +1 -0
- package/dist/radio/index.d.mts +39 -0
- package/dist/radio/index.d.ts +39 -0
- package/dist/radio/index.js +12 -0
- package/dist/radio/index.js.map +1 -0
- package/dist/radio/index.mjs +3 -0
- package/dist/radio/index.mjs.map +1 -0
- package/dist/scrollArea/index.d.mts +31 -0
- package/dist/scrollArea/index.d.ts +31 -0
- package/dist/scrollArea/index.js +16 -0
- package/dist/scrollArea/index.js.map +1 -0
- package/dist/scrollArea/index.mjs +3 -0
- package/dist/scrollArea/index.mjs.map +1 -0
- package/dist/segment/index.d.mts +46 -0
- package/dist/segment/index.d.ts +46 -0
- package/dist/segment/index.js +12 -0
- package/dist/segment/index.js.map +1 -0
- package/dist/segment/index.mjs +3 -0
- package/dist/segment/index.mjs.map +1 -0
- package/dist/star/index.d.mts +30 -0
- package/dist/star/index.d.ts +30 -0
- package/dist/star/index.js +12 -0
- package/dist/star/index.js.map +1 -0
- package/dist/star/index.mjs +3 -0
- package/dist/star/index.mjs.map +1 -0
- package/dist/switch/index.d.mts +32 -0
- package/dist/switch/index.d.ts +32 -0
- package/dist/switch/index.js +12 -0
- package/dist/switch/index.js.map +1 -0
- package/dist/switch/index.mjs +3 -0
- package/dist/switch/index.mjs.map +1 -0
- package/dist/tabs/index.d.mts +52 -0
- package/dist/tabs/index.d.ts +52 -0
- package/dist/tabs/index.js +12 -0
- package/dist/tabs/index.js.map +1 -0
- package/dist/tabs/index.mjs +3 -0
- package/dist/tabs/index.mjs.map +1 -0
- package/dist/tag/index.d.mts +68 -0
- package/dist/tag/index.d.ts +68 -0
- package/dist/tag/index.js +17 -0
- package/dist/tag/index.js.map +1 -0
- package/dist/tag/index.mjs +4 -0
- package/dist/tag/index.mjs.map +1 -0
- package/dist/toast/index.d.mts +175 -0
- package/dist/toast/index.d.ts +175 -0
- package/dist/toast/index.js +25 -0
- package/dist/toast/index.js.map +1 -0
- package/dist/toast/index.mjs +4 -0
- package/dist/toast/index.mjs.map +1 -0
- package/dist/tooltip/index.d.mts +26 -0
- package/dist/tooltip/index.d.ts +26 -0
- package/dist/tooltip/index.js +12 -0
- package/dist/tooltip/index.js.map +1 -0
- package/dist/tooltip/index.mjs +3 -0
- package/dist/tooltip/index.mjs.map +1 -0
- package/package.json +249 -0
- package/styles.css +20 -0
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunk5M47B2XJ_js = require('./chunk-5M47B2XJ.js');
|
|
4
|
+
var utils = require('@exem-ui/core/utils');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
var tagVariants = utils.cva(
|
|
9
|
+
"inline-flex h-5 items-center gap-0.5 rounded-medium px-1 text-body-3 font-medium",
|
|
10
|
+
{
|
|
11
|
+
variants: {
|
|
12
|
+
color: {
|
|
13
|
+
mono: "text-tint-foreground-mono",
|
|
14
|
+
sky: "text-tint-foreground-sky",
|
|
15
|
+
red: "text-tint-foreground-red",
|
|
16
|
+
amber: "text-tint-foreground-amber",
|
|
17
|
+
green: "text-tint-foreground-green",
|
|
18
|
+
orange: "text-tint-foreground-orange",
|
|
19
|
+
cyan: "text-tint-foreground-cyan",
|
|
20
|
+
violet: "text-tint-foreground-violet",
|
|
21
|
+
pink: "text-tint-foreground-pink",
|
|
22
|
+
yellow: "text-tint-foreground-yellow",
|
|
23
|
+
lime: "text-tint-foreground-lime",
|
|
24
|
+
emerald: "text-tint-foreground-emerald",
|
|
25
|
+
teal: "text-tint-foreground-teal",
|
|
26
|
+
blue: "text-tint-foreground-blue",
|
|
27
|
+
indigo: "text-tint-foreground-indigo",
|
|
28
|
+
purple: "text-tint-foreground-purple",
|
|
29
|
+
fuchsia: "text-tint-foreground-fuchsia",
|
|
30
|
+
rose: "text-tint-foreground-rose"
|
|
31
|
+
},
|
|
32
|
+
type: {
|
|
33
|
+
fill: "",
|
|
34
|
+
line: "bg-component-tag border border-border-secondary"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
compoundVariants: [
|
|
38
|
+
{ color: "mono", type: "fill", className: "bg-tint-background-mono" },
|
|
39
|
+
{ color: "sky", type: "fill", className: "bg-tint-background-sky" },
|
|
40
|
+
{ color: "red", type: "fill", className: "bg-tint-background-red" },
|
|
41
|
+
{ color: "amber", type: "fill", className: "bg-tint-background-amber" },
|
|
42
|
+
{ color: "green", type: "fill", className: "bg-tint-background-green" },
|
|
43
|
+
{ color: "orange", type: "fill", className: "bg-tint-background-orange" },
|
|
44
|
+
{ color: "cyan", type: "fill", className: "bg-tint-background-cyan" },
|
|
45
|
+
{ color: "violet", type: "fill", className: "bg-tint-background-violet" },
|
|
46
|
+
{ color: "pink", type: "fill", className: "bg-tint-background-pink" },
|
|
47
|
+
{ color: "yellow", type: "fill", className: "bg-tint-background-yellow" },
|
|
48
|
+
{ color: "lime", type: "fill", className: "bg-tint-background-lime" },
|
|
49
|
+
{ color: "emerald", type: "fill", className: "bg-tint-background-emerald" },
|
|
50
|
+
{ color: "teal", type: "fill", className: "bg-tint-background-teal" },
|
|
51
|
+
{ color: "blue", type: "fill", className: "bg-tint-background-blue" },
|
|
52
|
+
{ color: "indigo", type: "fill", className: "bg-tint-background-indigo" },
|
|
53
|
+
{ color: "purple", type: "fill", className: "bg-tint-background-purple" },
|
|
54
|
+
{ color: "fuchsia", type: "fill", className: "bg-tint-background-fuchsia" },
|
|
55
|
+
{ color: "rose", type: "fill", className: "bg-tint-background-rose" }
|
|
56
|
+
],
|
|
57
|
+
defaultVariants: {
|
|
58
|
+
color: "mono",
|
|
59
|
+
type: "fill"
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
);
|
|
63
|
+
var Tag = react.forwardRef(
|
|
64
|
+
({
|
|
65
|
+
className,
|
|
66
|
+
color,
|
|
67
|
+
type = "fill",
|
|
68
|
+
leftIcon,
|
|
69
|
+
canDelete,
|
|
70
|
+
onDelete,
|
|
71
|
+
rightSlot,
|
|
72
|
+
children,
|
|
73
|
+
...props
|
|
74
|
+
}, ref) => {
|
|
75
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
76
|
+
"div",
|
|
77
|
+
{
|
|
78
|
+
"data-slot": "tag",
|
|
79
|
+
className: utils.cn(tagVariants({ color, type, className })),
|
|
80
|
+
ref,
|
|
81
|
+
...props,
|
|
82
|
+
children: [
|
|
83
|
+
leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 size-3 items-center justify-center [&>svg]:size-3", children: leftIcon }),
|
|
84
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-0.5 text-body-3 font-medium", children }),
|
|
85
|
+
canDelete && /* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
+
"button",
|
|
87
|
+
{
|
|
88
|
+
type: "button",
|
|
89
|
+
onClick: (e) => {
|
|
90
|
+
e.stopPropagation();
|
|
91
|
+
onDelete?.();
|
|
92
|
+
},
|
|
93
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(chunk5M47B2XJ_js.X, { type: "regular", className: "size-3 [&>*]:stroke-current [&>path]:fill-current" })
|
|
94
|
+
}
|
|
95
|
+
),
|
|
96
|
+
rightSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children: rightSlot })
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
Tag.displayName = "Tag";
|
|
103
|
+
var DoubleTag = react.forwardRef(
|
|
104
|
+
({ className, items, ...props }, ref) => {
|
|
105
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
106
|
+
"div",
|
|
107
|
+
{
|
|
108
|
+
className: utils.cn(
|
|
109
|
+
"flex w-fit overflow-hidden rounded-medium border border-border-secondary",
|
|
110
|
+
className
|
|
111
|
+
),
|
|
112
|
+
ref,
|
|
113
|
+
...props,
|
|
114
|
+
children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
|
|
115
|
+
/* @__PURE__ */ jsxRuntime.jsx(Tag, { color: item.color, type: "line", className: "rounded-none border-none", children: item.content }),
|
|
116
|
+
index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[20px] w-px border-none bg-border-secondary" })
|
|
117
|
+
] }, index))
|
|
118
|
+
}
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
DoubleTag.displayName = "DoubleTag";
|
|
123
|
+
|
|
124
|
+
exports.DoubleTag = DoubleTag;
|
|
125
|
+
exports.Tag = Tag;
|
|
126
|
+
//# sourceMappingURL=chunk-MT47ECUN.js.map
|
|
127
|
+
//# sourceMappingURL=chunk-MT47ECUN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tag/Tag.tsx"],"names":["cva","forwardRef","jsxs","cn","jsx","X","Fragment"],"mappings":"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","file":"chunk-MT47ECUN.js","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"]}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { Minus, Check } from './chunk-LZWKMQJL.mjs';
|
|
2
|
+
import { cva, cn } from '@exem-ui/core/utils';
|
|
3
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
4
|
+
import { forwardRef, useId } from 'react';
|
|
5
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
var containerVariants = cva("inline-flex items-center", {
|
|
8
|
+
variants: {
|
|
9
|
+
size: {
|
|
10
|
+
small: "gap-1",
|
|
11
|
+
medium: "gap-1.5",
|
|
12
|
+
large: "gap-2"
|
|
13
|
+
},
|
|
14
|
+
labelPosition: {
|
|
15
|
+
right: "flex-row",
|
|
16
|
+
left: "flex-row-reverse"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
defaultVariants: {
|
|
20
|
+
size: "medium",
|
|
21
|
+
labelPosition: "right"
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
var boxVariants = cva(
|
|
25
|
+
"peer shrink-0 cursor-pointer rounded-weak border border-border-secondary ring-offset-background transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed enabled:data-[state=unchecked]:hover:bg-elevation-elevation-2 disabled:data-[state=unchecked]:bg-elevation-elevation-3 bg-background-primary",
|
|
26
|
+
{
|
|
27
|
+
variants: {
|
|
28
|
+
size: {
|
|
29
|
+
small: "size-4",
|
|
30
|
+
medium: "size-5",
|
|
31
|
+
large: "size-6"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
defaultVariants: {
|
|
35
|
+
size: "medium"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
var labelVariants = cva(
|
|
40
|
+
"cursor-pointer select-none text-text-primary peer-disabled:cursor-not-allowed peer-disabled:text-text-disabled",
|
|
41
|
+
{
|
|
42
|
+
variants: {
|
|
43
|
+
size: {
|
|
44
|
+
small: "text-body-3",
|
|
45
|
+
medium: "text-body-2",
|
|
46
|
+
large: "text-body-1"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
defaultVariants: {
|
|
50
|
+
size: "medium"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
var iconVariants = cva("text-icon-static-light", {
|
|
55
|
+
variants: {
|
|
56
|
+
size: {
|
|
57
|
+
small: "size-4",
|
|
58
|
+
medium: "size-5",
|
|
59
|
+
large: "size-6"
|
|
60
|
+
},
|
|
61
|
+
disabled: {
|
|
62
|
+
true: "text-icon-inverse-disabled"
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
defaultVariants: {
|
|
66
|
+
size: "medium"
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
var stateClasses = [
|
|
70
|
+
"data-[state=checked]:bg-solid-accent-default data-[state=checked]:border-transparent",
|
|
71
|
+
"data-[state=indeterminate]:bg-solid-accent-default data-[state=indeterminate]:border-transparent",
|
|
72
|
+
"enabled:data-[state=checked]:hover:bg-solid-accent-hovered enabled:data-[state=indeterminate]:hover:bg-solid-accent-hovered",
|
|
73
|
+
"enabled:data-[state=checked]:hover:border-transparent enabled:data-[state=indeterminate]:hover:border-transparent",
|
|
74
|
+
"disabled:data-[state=checked]:bg-solid-accent-disabled disabled:data-[state=indeterminate]:bg-solid-accent-disabled",
|
|
75
|
+
"disabled:data-[state=checked]:border-transparent disabled:data-[state=indeterminate]:border-transparent"
|
|
76
|
+
];
|
|
77
|
+
var Checkbox = forwardRef(
|
|
78
|
+
({
|
|
79
|
+
className,
|
|
80
|
+
label,
|
|
81
|
+
id,
|
|
82
|
+
size = "medium",
|
|
83
|
+
labelPosition = "right",
|
|
84
|
+
checked,
|
|
85
|
+
onCheckedChange,
|
|
86
|
+
disabled = false,
|
|
87
|
+
defaultChecked,
|
|
88
|
+
...props
|
|
89
|
+
}, ref) => {
|
|
90
|
+
const uniqueId = useId();
|
|
91
|
+
const checkboxId = id || uniqueId;
|
|
92
|
+
const checkboxState = checked === "indeterminate" ? "indeterminate" : checked ? "checked" : "unchecked";
|
|
93
|
+
const checkboxProps = {
|
|
94
|
+
...props,
|
|
95
|
+
ref,
|
|
96
|
+
id: checkboxId,
|
|
97
|
+
className: cn(boxVariants({ size }), stateClasses, className),
|
|
98
|
+
onCheckedChange: (state) => {
|
|
99
|
+
onCheckedChange?.(state === "indeterminate" ? true : !!state);
|
|
100
|
+
},
|
|
101
|
+
"data-state": checkboxState,
|
|
102
|
+
disabled
|
|
103
|
+
};
|
|
104
|
+
if (checked !== void 0) {
|
|
105
|
+
checkboxProps.checked = checked;
|
|
106
|
+
}
|
|
107
|
+
if (defaultChecked !== void 0) {
|
|
108
|
+
checkboxProps.defaultChecked = defaultChecked;
|
|
109
|
+
}
|
|
110
|
+
return /* @__PURE__ */ jsxs("div", { className: cn(containerVariants({ size, labelPosition })), children: [
|
|
111
|
+
/* @__PURE__ */ jsx(
|
|
112
|
+
CheckboxPrimitive.Root,
|
|
113
|
+
{
|
|
114
|
+
...checkboxProps,
|
|
115
|
+
children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center", children: checkboxState === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { type: "regular", className: cn(iconVariants({ size, disabled })) }) : checkboxState === "checked" ? /* @__PURE__ */ jsx(Check, { type: "regular", className: cn(iconVariants({ size, disabled })) }) : null })
|
|
116
|
+
}
|
|
117
|
+
),
|
|
118
|
+
label && /* @__PURE__ */ jsx("label", { htmlFor: checkboxId, className: cn(labelVariants({ size })), children: label })
|
|
119
|
+
] });
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
123
|
+
|
|
124
|
+
export { Checkbox };
|
|
125
|
+
//# sourceMappingURL=chunk-N6U54JI4.mjs.map
|
|
126
|
+
//# sourceMappingURL=chunk-N6U54JI4.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/checkbox/Checkbox.tsx"],"names":[],"mappings":"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","file":"chunk-N6U54JI4.mjs","sourcesContent":["import { cn, cva } from '@exem-ui/core/utils';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport type React from 'react';\nimport { forwardRef, useId } from 'react';\nimport { CheckIcon, MinusIcon } from '../icon';\n\ntype CheckboxSize = 'small' | 'medium' | 'large';\n\ntype LabelPosition = 'left' | 'right';\n\ninterface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n /** 체크 상태. `'indeterminate'`는 부분 선택을 나타냅니다. */\n checked?: boolean | 'indeterminate';\n /** 체크박스 옆에 표시할 레이블 */\n label?: React.ReactNode;\n /** 추가 클래스명 */\n className?: string;\n /**\n * 체크박스 크기\n * @default 'medium'\n */\n size?: CheckboxSize;\n /**\n * 레이블 위치\n * @default 'right'\n */\n labelPosition?: LabelPosition;\n /** 체크 상태 변경 핸들러 */\n onCheckedChange?: (checked: boolean) => void;\n /** 초기 체크 상태 (비제어) */\n defaultChecked?: boolean;\n /**\n * 비활성화 상태\n * @default false\n */\n disabled?: boolean;\n}\n\ntype CheckboxComponent = React.ForwardRefExoticComponent<\n CheckboxProps & React.RefAttributes<HTMLButtonElement>\n>;\n\nconst containerVariants = cva('inline-flex items-center', {\n variants: {\n size: {\n small: 'gap-1',\n medium: 'gap-1.5',\n large: 'gap-2',\n },\n labelPosition: {\n right: 'flex-row',\n left: 'flex-row-reverse',\n },\n },\n defaultVariants: {\n size: 'medium',\n labelPosition: 'right',\n },\n});\n\nconst boxVariants = cva(\n 'peer shrink-0 cursor-pointer rounded-weak border border-border-secondary ring-offset-background transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed enabled:data-[state=unchecked]:hover:bg-elevation-elevation-2 disabled:data-[state=unchecked]:bg-elevation-elevation-3 bg-background-primary',\n {\n variants: {\n size: {\n small: 'size-4',\n medium: 'size-5',\n large: 'size-6',\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n },\n);\n\nconst labelVariants = cva(\n 'cursor-pointer select-none text-text-primary peer-disabled:cursor-not-allowed peer-disabled:text-text-disabled',\n {\n variants: {\n size: {\n small: 'text-body-3',\n medium: 'text-body-2',\n large: 'text-body-1',\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n },\n);\n\nconst iconVariants = cva('text-icon-static-light', {\n variants: {\n size: {\n small: 'size-4',\n medium: 'size-5',\n large: 'size-6',\n },\n disabled: {\n true: 'text-icon-inverse-disabled',\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\nconst stateClasses = [\n 'data-[state=checked]:bg-solid-accent-default data-[state=checked]:border-transparent',\n 'data-[state=indeterminate]:bg-solid-accent-default data-[state=indeterminate]:border-transparent',\n 'enabled:data-[state=checked]:hover:bg-solid-accent-hovered enabled:data-[state=indeterminate]:hover:bg-solid-accent-hovered',\n 'enabled:data-[state=checked]:hover:border-transparent enabled:data-[state=indeterminate]:hover:border-transparent',\n 'disabled:data-[state=checked]:bg-solid-accent-disabled disabled:data-[state=indeterminate]:bg-solid-accent-disabled',\n 'disabled:data-[state=checked]:border-transparent disabled:data-[state=indeterminate]:border-transparent',\n];\n\n/**\n * 하나 이상의 항목을 선택하는 체크박스 컴포넌트입니다.\n * 체크, 미체크, indeterminate(부분 선택) 상태를 지원합니다.\n *\n * @example\n * ```tsx\n * // 기본 사용\n * <Checkbox label=\"이용 약관에 동의합니다\" />\n *\n * // 제어 컴포넌트\n * <Checkbox checked={isChecked} onCheckedChange={setIsChecked} label=\"선택\" />\n *\n * // 부분 선택 상태\n * <Checkbox checked=\"indeterminate\" label=\"전체 선택\" />\n * ```\n *\n * @see {@link CheckboxProps} props 상세\n */\nconst Checkbox = forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n (\n {\n className,\n label,\n id,\n size = 'medium',\n labelPosition = 'right',\n checked,\n onCheckedChange,\n disabled = false,\n defaultChecked,\n ...props\n },\n ref,\n ) => {\n const uniqueId = useId();\n const checkboxId = id || uniqueId;\n\n const checkboxState =\n checked === 'indeterminate' ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n\n const checkboxProps: Record<string, unknown> = {\n ...props,\n ref,\n id: checkboxId,\n className: cn(boxVariants({ size }), stateClasses, className),\n onCheckedChange: (state: boolean | 'indeterminate') => {\n onCheckedChange?.(state === 'indeterminate' ? true : !!state);\n },\n 'data-state': checkboxState,\n disabled,\n };\n\n if (checked !== undefined) {\n checkboxProps.checked = checked;\n }\n\n if (defaultChecked !== undefined) {\n checkboxProps.defaultChecked = defaultChecked;\n }\n\n return (\n <div className={cn(containerVariants({ size, labelPosition }))}>\n <CheckboxPrimitive.Root\n {...(checkboxProps as React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>)}\n >\n <CheckboxPrimitive.Indicator className=\"flex items-center justify-center\">\n {checkboxState === 'indeterminate' ? (\n <MinusIcon type=\"regular\" className={cn(iconVariants({ size, disabled }))} />\n ) : checkboxState === 'checked' ? (\n <CheckIcon type=\"regular\" className={cn(iconVariants({ size, disabled }))} />\n ) : null}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n {label && (\n <label htmlFor={checkboxId} className={cn(labelVariants({ size }))}>\n {label}\n </label>\n )}\n </div>\n );\n },\n) as CheckboxComponent;\n\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nexport { Checkbox };\nexport type { CheckboxComponent, CheckboxProps };\n"]}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var utils = require('@exem-ui/core/utils');
|
|
4
|
+
var TabsPrimitive = require('@radix-ui/react-tabs');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
function _interopNamespace(e) {
|
|
9
|
+
if (e && e.__esModule) return e;
|
|
10
|
+
var n = Object.create(null);
|
|
11
|
+
if (e) {
|
|
12
|
+
Object.keys(e).forEach(function (k) {
|
|
13
|
+
if (k !== 'default') {
|
|
14
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
15
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
16
|
+
enumerable: true,
|
|
17
|
+
get: function () { return e[k]; }
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
n.default = e;
|
|
23
|
+
return Object.freeze(n);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
|
|
27
|
+
|
|
28
|
+
// src/segment/Segment.tsx
|
|
29
|
+
var segmentListVariants = utils.cva(
|
|
30
|
+
"inline-flex items-center overflow-hidden rounded-medium bg-elevation-elevation-2",
|
|
31
|
+
{
|
|
32
|
+
variants: {
|
|
33
|
+
size: {
|
|
34
|
+
small: "h-7 gap-0 p-0.5",
|
|
35
|
+
medium: "h-8 gap-0 p-0.5",
|
|
36
|
+
large: "h-10 gap-0 p-0.5"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
defaultVariants: {
|
|
40
|
+
size: "medium"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
var segmentItemVariants = utils.cva(
|
|
45
|
+
[
|
|
46
|
+
"flex flex-1 items-center justify-center rounded-weak",
|
|
47
|
+
"focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring",
|
|
48
|
+
"disabled:cursor-not-allowed",
|
|
49
|
+
"data-[state=active]:bg-component-segmentedOption data-[state=active]:text-text-primary data-[state=active]:shadow-weak",
|
|
50
|
+
"data-[state=inactive]:text-text-tertiary data-[state=inactive]:disabled:text-text-disabled",
|
|
51
|
+
"transition-colors duration-200 ease-in-out"
|
|
52
|
+
],
|
|
53
|
+
{
|
|
54
|
+
variants: {
|
|
55
|
+
size: {
|
|
56
|
+
small: "h-6 gap-0.5 text-body-3 font-medium",
|
|
57
|
+
medium: "h-7 gap-1 text-body-2 font-medium",
|
|
58
|
+
large: "h-9 gap-1.5 text-body-2 font-medium"
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
defaultVariants: {
|
|
62
|
+
size: "medium"
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
var segmentIconVariants = utils.cva("flex items-center justify-center", {
|
|
67
|
+
variants: {
|
|
68
|
+
size: {
|
|
69
|
+
small: "size-4",
|
|
70
|
+
medium: "size-4",
|
|
71
|
+
large: "size-5"
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
defaultVariants: {
|
|
75
|
+
size: "medium"
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
var SegmentContext = react.createContext(void 0);
|
|
79
|
+
var useSegmentContext = () => {
|
|
80
|
+
const context = react.useContext(SegmentContext);
|
|
81
|
+
if (!context) {
|
|
82
|
+
throw new Error("Segment components must be used within a Segment");
|
|
83
|
+
}
|
|
84
|
+
return context;
|
|
85
|
+
};
|
|
86
|
+
var Segment = react.forwardRef(
|
|
87
|
+
({ size = "medium", children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SegmentContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, ...props, children }) })
|
|
88
|
+
);
|
|
89
|
+
Segment.List = react.forwardRef(
|
|
90
|
+
({ className, ...props }, ref) => {
|
|
91
|
+
const { size } = useSegmentContext();
|
|
92
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
93
|
+
TabsPrimitive__namespace.List,
|
|
94
|
+
{
|
|
95
|
+
ref,
|
|
96
|
+
className: utils.cn(segmentListVariants({ size }), className),
|
|
97
|
+
...props
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
Segment.Item = react.forwardRef(
|
|
103
|
+
({ className, leftIcon, children, ...props }, ref) => {
|
|
104
|
+
const { size } = useSegmentContext();
|
|
105
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
106
|
+
TabsPrimitive__namespace.Trigger,
|
|
107
|
+
{
|
|
108
|
+
ref,
|
|
109
|
+
className: utils.cn(segmentItemVariants({ size }), className),
|
|
110
|
+
...props,
|
|
111
|
+
children: [
|
|
112
|
+
leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(segmentIconVariants({ size })), children: leftIcon }),
|
|
113
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center", children })
|
|
114
|
+
]
|
|
115
|
+
}
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
Segment.Content = react.forwardRef(
|
|
120
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
121
|
+
TabsPrimitive__namespace.Content,
|
|
122
|
+
{
|
|
123
|
+
ref,
|
|
124
|
+
className: utils.cn(
|
|
125
|
+
"ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
126
|
+
className
|
|
127
|
+
),
|
|
128
|
+
...props
|
|
129
|
+
}
|
|
130
|
+
)
|
|
131
|
+
);
|
|
132
|
+
Segment.displayName = "Segment";
|
|
133
|
+
Segment.List.displayName = "Segment.List";
|
|
134
|
+
Segment.Content.displayName = "Segment.Content";
|
|
135
|
+
Segment.Item.displayName = "Segment.Item";
|
|
136
|
+
|
|
137
|
+
exports.Segment = Segment;
|
|
138
|
+
//# sourceMappingURL=chunk-NDG4LR3Q.js.map
|
|
139
|
+
//# sourceMappingURL=chunk-NDG4LR3Q.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/segment/Segment.tsx"],"names":["cva","createContext","useContext","forwardRef","jsx","TabsPrimitive","cn","jsxs"],"mappings":"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","file":"chunk-NDG4LR3Q.js","sourcesContent":["import { cn, cva } from '@exem-ui/core/utils';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport type React from 'react';\nimport { createContext, forwardRef, useContext } from 'react';\n\ntype SegmentSize = 'small' | 'medium' | 'large';\n\ntype SegmentContextValue = {\n size: SegmentSize;\n};\n\ntype SegmentListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\ntype SegmentItemProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {\n /** 텍스트 왼쪽에 표시할 아이콘 요소 */\n leftIcon?: React.ReactElement<{ className?: string }>;\n};\n\ntype SegmentContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;\n\ntype SegmentRootProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n /**\n * 세그먼트 크기\n * @default 'medium'\n */\n size?: SegmentSize;\n};\n\ntype SegmentComponent = React.ForwardRefExoticComponent<\n SegmentRootProps & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>\n> & {\n List: React.ForwardRefExoticComponent<SegmentListProps>;\n Item: React.ForwardRefExoticComponent<SegmentItemProps>;\n Content: React.ForwardRefExoticComponent<SegmentContentProps>;\n};\n\nconst segmentListVariants = cva(\n 'inline-flex items-center overflow-hidden rounded-medium bg-elevation-elevation-2',\n {\n variants: {\n size: {\n small: 'h-7 gap-0 p-0.5',\n medium: 'h-8 gap-0 p-0.5',\n large: 'h-10 gap-0 p-0.5',\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n },\n);\n\nconst segmentItemVariants = cva(\n [\n 'flex flex-1 items-center justify-center rounded-weak',\n 'focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring',\n 'disabled:cursor-not-allowed',\n 'data-[state=active]:bg-component-segmentedOption data-[state=active]:text-text-primary data-[state=active]:shadow-weak',\n 'data-[state=inactive]:text-text-tertiary data-[state=inactive]:disabled:text-text-disabled',\n 'transition-colors duration-200 ease-in-out',\n ],\n {\n variants: {\n size: {\n small: 'h-6 gap-0.5 text-body-3 font-medium',\n medium: 'h-7 gap-1 text-body-2 font-medium',\n large: 'h-9 gap-1.5 text-body-2 font-medium',\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n },\n);\n\nconst segmentIconVariants = cva('flex items-center justify-center', {\n variants: {\n size: {\n small: 'size-4',\n medium: 'size-4',\n large: 'size-5',\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\nconst SegmentContext = createContext<SegmentContextValue | undefined>(undefined);\n\nconst useSegmentContext = () => {\n const context = useContext(SegmentContext);\n if (!context) {\n throw new Error('Segment components must be used within a Segment');\n }\n return context;\n};\n\n/**\n * 탭 형태의 세그먼트 컨트롤 컴포넌트입니다.\n * Compound Component 패턴으로 `Segment.List`, `Segment.Item`, `Segment.Content`와 함께 사용합니다.\n *\n * @example\n * ```tsx\n * <Segment defaultValue=\"tab1\" size=\"medium\">\n * <Segment.List>\n * <Segment.Item value=\"tab1\">첫 번째</Segment.Item>\n * <Segment.Item value=\"tab2\">두 번째</Segment.Item>\n * </Segment.List>\n * <Segment.Content value=\"tab1\">첫 번째 내용</Segment.Content>\n * <Segment.Content value=\"tab2\">두 번째 내용</Segment.Content>\n * </Segment>\n * ```\n *\n * @see {@link SegmentRootProps} 루트 props 상세\n * @see {@link SegmentItemProps} 아이템 props 상세\n */\nconst Segment = forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, SegmentRootProps>(\n ({ size = 'medium', children, ...props }, ref) => (\n <SegmentContext.Provider value={{ size }}>\n <TabsPrimitive.Root ref={ref} {...props}>\n {children}\n </TabsPrimitive.Root>\n </SegmentContext.Provider>\n ),\n) as SegmentComponent;\n\nSegment.List = forwardRef<React.ElementRef<typeof TabsPrimitive.List>, SegmentListProps>(\n ({ className, ...props }, ref) => {\n const { size } = useSegmentContext();\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(segmentListVariants({ size }), className)}\n {...props}\n />\n );\n },\n) as SegmentComponent['List'];\n\nSegment.Item = forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, SegmentItemProps>(\n ({ className, leftIcon, children, ...props }, ref) => {\n const { size } = useSegmentContext();\n\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(segmentItemVariants({ size }), className)}\n {...props}\n >\n {leftIcon && <span className={cn(segmentIconVariants({ size }))}>{leftIcon}</span>}\n <span className=\"flex items-center\">{children}</span>\n </TabsPrimitive.Trigger>\n );\n },\n) as SegmentComponent['Item'];\n\nSegment.Content = forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, SegmentContentProps>(\n ({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n 'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n className,\n )}\n {...props}\n />\n ),\n) as SegmentComponent['Content'];\n\nSegment.displayName = 'Segment';\nSegment.List.displayName = 'Segment.List';\nSegment.Content.displayName = 'Segment.Content';\nSegment.Item.displayName = 'Segment.Item';\n\nexport { Segment };\nexport type {\n SegmentComponent,\n SegmentRootProps,\n SegmentItemProps,\n SegmentContentProps,\n SegmentListProps,\n};\n"]}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { MoreHorizontal } from './chunk-LZWKMQJL.mjs';
|
|
2
|
+
import { cn } from '@exem-ui/core/utils';
|
|
3
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
var Breadcrumb = forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
|
|
8
|
+
Breadcrumb.List = forwardRef(
|
|
9
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
10
|
+
"ol",
|
|
11
|
+
{
|
|
12
|
+
ref,
|
|
13
|
+
className: cn(
|
|
14
|
+
"flex flex-wrap items-center gap-[4px] break-words text-body-2 text-text-tertiary",
|
|
15
|
+
className
|
|
16
|
+
),
|
|
17
|
+
...props
|
|
18
|
+
}
|
|
19
|
+
)
|
|
20
|
+
);
|
|
21
|
+
Breadcrumb.Item = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("inline-flex items-center", className), ...props }));
|
|
22
|
+
Breadcrumb.Link = forwardRef(
|
|
23
|
+
({ asChild, className, ...props }, ref) => {
|
|
24
|
+
const Comp = asChild ? Slot : "a";
|
|
25
|
+
return /* @__PURE__ */ jsx(Comp, { ref, className: cn("text-text-link", className), ...props });
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
Breadcrumb.Page = forwardRef(
|
|
29
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
30
|
+
"span",
|
|
31
|
+
{
|
|
32
|
+
ref,
|
|
33
|
+
role: "link",
|
|
34
|
+
"aria-disabled": "true",
|
|
35
|
+
"aria-current": "page",
|
|
36
|
+
className: cn("text-text-primary", className),
|
|
37
|
+
...props
|
|
38
|
+
}
|
|
39
|
+
)
|
|
40
|
+
);
|
|
41
|
+
Breadcrumb.Separator = forwardRef(
|
|
42
|
+
({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
43
|
+
"li",
|
|
44
|
+
{
|
|
45
|
+
ref,
|
|
46
|
+
role: "presentation",
|
|
47
|
+
"aria-hidden": "true",
|
|
48
|
+
className: cn("[&>svg]:size-3.5", className),
|
|
49
|
+
...props,
|
|
50
|
+
children: children ?? "/"
|
|
51
|
+
}
|
|
52
|
+
)
|
|
53
|
+
);
|
|
54
|
+
Breadcrumb.Ellipsis = forwardRef(
|
|
55
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
56
|
+
"span",
|
|
57
|
+
{
|
|
58
|
+
ref,
|
|
59
|
+
role: "presentation",
|
|
60
|
+
"aria-hidden": "true",
|
|
61
|
+
className: cn("flex h-9 w-9 items-center justify-center", className),
|
|
62
|
+
...props,
|
|
63
|
+
children: [
|
|
64
|
+
/* @__PURE__ */ jsx(MoreHorizontal, { type: "regular", className: "size-4" }),
|
|
65
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
);
|
|
70
|
+
Breadcrumb.displayName = "Breadcrumb";
|
|
71
|
+
Breadcrumb.List.displayName = "Breadcrumb.List";
|
|
72
|
+
Breadcrumb.Item.displayName = "Breadcrumb.Item";
|
|
73
|
+
Breadcrumb.Link.displayName = "Breadcrumb.Link";
|
|
74
|
+
Breadcrumb.Page.displayName = "Breadcrumb.Page";
|
|
75
|
+
Breadcrumb.Separator.displayName = "Breadcrumb.Separator";
|
|
76
|
+
Breadcrumb.Ellipsis.displayName = "Breadcrumb.Ellipsis";
|
|
77
|
+
|
|
78
|
+
export { Breadcrumb };
|
|
79
|
+
//# sourceMappingURL=chunk-PPD4BU4W.mjs.map
|
|
80
|
+
//# sourceMappingURL=chunk-PPD4BU4W.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"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","file":"chunk-PPD4BU4W.mjs","sourcesContent":["import { cn } from '@exem-ui/core/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport type React from 'react';\nimport { forwardRef } from 'react';\nimport { MoreHorizontalIcon } from '../icon';\n\ntype BreadcrumbRootProps = React.ComponentPropsWithoutRef<'nav'>;\n\ntype BreadcrumbListProps = React.ComponentPropsWithoutRef<'ol'>;\n\ntype BreadcrumbItemProps = React.ComponentPropsWithoutRef<'li'>;\n\ntype BreadcrumbLinkProps = React.ComponentPropsWithoutRef<'a'> & {\n asChild?: boolean;\n};\n\ntype BreadcrumbPageProps = React.ComponentPropsWithoutRef<'span'>;\n\ntype BreadcrumbSeparatorProps = React.ComponentProps<'li'>;\n\ntype BreadcrumbEllipsisProps = React.ComponentProps<'span'>;\n\ntype BreadcrumbComponent = React.ForwardRefExoticComponent<\n React.PropsWithoutRef<BreadcrumbRootProps> & React.RefAttributes<HTMLElement>\n> & {\n List: React.ForwardRefExoticComponent<\n React.PropsWithoutRef<BreadcrumbListProps> & React.RefAttributes<HTMLOListElement>\n >;\n Item: React.ForwardRefExoticComponent<\n React.PropsWithoutRef<BreadcrumbItemProps> & React.RefAttributes<HTMLLIElement>\n >;\n Link: React.ForwardRefExoticComponent<\n React.PropsWithoutRef<BreadcrumbLinkProps> & React.RefAttributes<HTMLAnchorElement>\n >;\n Page: React.ForwardRefExoticComponent<\n React.PropsWithoutRef<BreadcrumbPageProps> & React.RefAttributes<HTMLSpanElement>\n >;\n Separator: React.ForwardRefExoticComponent<\n React.PropsWithoutRef<BreadcrumbSeparatorProps> & React.RefAttributes<HTMLLIElement>\n >;\n Ellipsis: React.ForwardRefExoticComponent<\n React.PropsWithoutRef<BreadcrumbEllipsisProps> & React.RefAttributes<HTMLSpanElement>\n >;\n};\n\n/**\n * 현재 페이지의 계층 위치를 표시하는 탐색 경로 컴포넌트입니다.\n * Compound Component 패턴으로 하위 컴포넌트와 함께 사용합니다.\n *\n * @example\n * ```tsx\n * <Breadcrumb>\n * <Breadcrumb.List>\n * <Breadcrumb.Item>\n * <Breadcrumb.Link href=\"/\">홈</Breadcrumb.Link>\n * </Breadcrumb.Item>\n * <Breadcrumb.Separator />\n * <Breadcrumb.Item>\n * <Breadcrumb.Page>현재 페이지</Breadcrumb.Page>\n * </Breadcrumb.Item>\n * </Breadcrumb.List>\n * </Breadcrumb>\n * ```\n *\n * @see {@link BreadcrumbRootProps} props 상세\n */\nconst Breadcrumb = forwardRef<HTMLElement, BreadcrumbRootProps>(({ ...props }, ref) => (\n <nav ref={ref} aria-label=\"breadcrumb\" {...props} />\n)) as BreadcrumbComponent;\n\nBreadcrumb.List = forwardRef<HTMLOListElement, BreadcrumbListProps>(\n ({ className, ...props }, ref) => (\n <ol\n ref={ref}\n className={cn(\n 'flex flex-wrap items-center gap-[4px] break-words text-body-2 text-text-tertiary',\n className,\n )}\n {...props}\n />\n ),\n) as BreadcrumbComponent['List'];\n\nBreadcrumb.Item = forwardRef<HTMLLIElement, BreadcrumbItemProps>(({ className, ...props }, ref) => (\n <li ref={ref} className={cn('inline-flex items-center', className)} {...props} />\n)) as BreadcrumbComponent['Item'];\n\nBreadcrumb.Link = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n ({ asChild, className, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a';\n\n return <Comp ref={ref} className={cn('text-text-link', className)} {...props} />;\n },\n) as BreadcrumbComponent['Link'];\n\nBreadcrumb.Page = forwardRef<HTMLSpanElement, BreadcrumbPageProps>(\n ({ className, ...props }, ref) => (\n <span\n ref={ref}\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn('text-text-primary', className)}\n {...props}\n />\n ),\n) as BreadcrumbComponent['Page'];\n\nBreadcrumb.Separator = forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(\n ({ children, className, ...props }, ref) => (\n <li\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('[&>svg]:size-3.5', className)}\n {...props}\n >\n {children ?? '/'}\n </li>\n ),\n) as BreadcrumbComponent['Separator'];\n\nBreadcrumb.Ellipsis = forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(\n ({ className, ...props }, ref) => (\n <span\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex h-9 w-9 items-center justify-center', className)}\n {...props}\n >\n <MoreHorizontalIcon type=\"regular\" className=\"size-4\" />\n <span className=\"sr-only\">More</span>\n </span>\n ),\n) as BreadcrumbComponent['Ellipsis'];\n\nBreadcrumb.displayName = 'Breadcrumb';\nBreadcrumb.List.displayName = 'Breadcrumb.List';\nBreadcrumb.Item.displayName = 'Breadcrumb.Item';\nBreadcrumb.Link.displayName = 'Breadcrumb.Link';\nBreadcrumb.Page.displayName = 'Breadcrumb.Page';\nBreadcrumb.Separator.displayName = 'Breadcrumb.Separator';\nBreadcrumb.Ellipsis.displayName = 'Breadcrumb.Ellipsis';\n\nexport { Breadcrumb };\nexport type {\n BreadcrumbComponent,\n BreadcrumbRootProps,\n BreadcrumbListProps,\n BreadcrumbItemProps,\n BreadcrumbLinkProps,\n BreadcrumbPageProps,\n BreadcrumbSeparatorProps,\n BreadcrumbEllipsisProps,\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-PU5NO5EZ.js"}
|