@xjur-ui/react 1.0.4 → 2.0.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/.turbo/turbo-build.log +98 -42
- package/CHANGELOG.md +51 -0
- package/README.md +146 -0
- package/dist/chunk-CBFC4QME.js +2 -0
- package/dist/chunk-CBFC4QME.js.map +1 -0
- package/dist/chunk-EIG6CBTQ.js +2 -0
- package/dist/chunk-EIG6CBTQ.js.map +1 -0
- package/dist/chunk-FASEHVMD.js +2 -0
- package/dist/chunk-FASEHVMD.js.map +1 -0
- package/dist/chunk-KIFR5VIE.js +2 -0
- package/dist/chunk-KIFR5VIE.js.map +1 -0
- package/dist/chunk-KS6WGBHQ.js +2 -0
- package/dist/chunk-KS6WGBHQ.js.map +1 -0
- package/dist/chunk-NELCN6E2.js +2 -0
- package/dist/chunk-NELCN6E2.js.map +1 -0
- package/dist/chunk-NPTLORW5.js +2 -0
- package/dist/chunk-NPTLORW5.js.map +1 -0
- package/dist/chunk-RWMV7APX.js +2 -0
- package/dist/chunk-RWMV7APX.js.map +1 -0
- package/dist/chunk-SHHXKVVR.js +2 -0
- package/dist/chunk-SHHXKVVR.js.map +1 -0
- package/dist/chunk-TB6KI6CL.js +2 -0
- package/dist/chunk-TB6KI6CL.js.map +1 -0
- package/dist/components/avatar-group.js +2 -179
- package/dist/components/avatar-group.js.map +1 -0
- package/dist/components/avatar.js +2 -59
- package/dist/components/avatar.js.map +1 -0
- package/dist/components/badge.js +2 -111
- package/dist/components/badge.js.map +1 -0
- package/dist/components/button.js +2 -98
- package/dist/components/button.js.map +1 -0
- package/dist/components/calendar.js +2 -751
- package/dist/components/calendar.js.map +1 -0
- package/dist/components/checkbox.js +2 -153
- package/dist/components/checkbox.js.map +1 -0
- package/dist/components/chip.d.ts +3 -1
- package/dist/components/chip.js +2 -256
- package/dist/components/chip.js.map +1 -0
- package/dist/components/collapsible.js +2 -41
- package/dist/components/collapsible.js.map +1 -0
- package/dist/components/date-picker.d.ts +8 -3
- package/dist/components/date-picker.js +2 -232
- package/dist/components/date-picker.js.map +1 -0
- package/dist/components/divider.js +2 -29
- package/dist/components/divider.js.map +1 -0
- package/dist/components/dropdown-menu.js +2 -295
- package/dist/components/dropdown-menu.js.map +1 -0
- package/dist/components/icon.js +2 -177
- package/dist/components/icon.js.map +1 -0
- package/dist/components/input.d.ts +9 -4
- package/dist/components/input.js +2 -315
- package/dist/components/input.js.map +1 -0
- package/dist/components/list.js +2 -179
- package/dist/components/list.js.map +1 -0
- package/dist/components/logo.js +2 -324
- package/dist/components/logo.js.map +1 -0
- package/dist/components/otp-input.js +2 -47
- package/dist/components/otp-input.js.map +1 -0
- package/dist/components/radio.js +2 -156
- package/dist/components/radio.js.map +1 -0
- package/dist/components/rich-editor.d.ts +2 -1
- package/dist/components/rich-editor.js +2 -723
- package/dist/components/rich-editor.js.map +1 -0
- package/dist/components/search-input.js +2 -274
- package/dist/components/search-input.js.map +1 -0
- package/dist/components/select.d.ts +6 -3
- package/dist/components/select.js +2 -550
- package/dist/components/select.js.map +1 -0
- package/dist/components/sheet.js +2 -251
- package/dist/components/sheet.js.map +1 -0
- package/dist/components/skeleton.js +2 -16
- package/dist/components/skeleton.js.map +1 -0
- package/dist/components/status.d.ts +14 -0
- package/dist/components/status.js +2 -0
- package/dist/components/status.js.map +1 -0
- package/dist/components/switch.js +2 -36
- package/dist/components/switch.js.map +1 -0
- package/dist/components/table.js +2 -196
- package/dist/components/table.js.map +1 -0
- package/dist/components/tabs.d.ts +9 -6
- package/dist/components/tabs.js +2 -54
- package/dist/components/tabs.js.map +1 -0
- package/dist/components/tag.d.ts +3 -1
- package/dist/components/tag.js +2 -189
- package/dist/components/tag.js.map +1 -0
- package/dist/components/tooltip.js +2 -58
- package/dist/components/tooltip.js.map +1 -0
- package/dist/components/typography.js +2 -78
- package/dist/components/typography.js.map +1 -0
- package/dist/hooks/index.d.ts +7 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/index.css +2 -2318
- package/dist/index.css.map +1 -0
- package/dist/logo-PQRZORCS.js +3 -0
- package/dist/logo-PQRZORCS.js.map +1 -0
- package/package.json +42 -7
- package/src/components/calendar.tsx +7 -6
- package/src/components/chip.tsx +11 -3
- package/src/components/date-picker.tsx +125 -22
- package/src/components/icon.tsx +1 -1
- package/src/components/input.tsx +124 -60
- package/src/components/logo.tsx +25 -20
- package/src/components/rich-editor.tsx +4 -3
- package/src/components/select.tsx +104 -26
- package/src/components/status.tsx +43 -0
- package/src/components/tabs.tsx +56 -37
- package/src/components/tag.tsx +11 -3
- package/src/index.css +2 -2
- package/src/resources/logo/index.tsx +33 -0
- package/tsup.config.ts +23 -5
- package/dist/index.js +0 -0
- package/src/index.ts +0 -1
- package/src/resources/logo/index.ts +0 -3
|
@@ -1,179 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
// src/components/avatar.tsx
|
|
5
|
-
import "react";
|
|
6
|
-
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
7
|
-
import { cx } from "@xjur-ui/util";
|
|
8
|
-
import { jsx } from "react/jsx-runtime";
|
|
9
|
-
function AvatarRoot({
|
|
10
|
-
className,
|
|
11
|
-
size = "md",
|
|
12
|
-
...props
|
|
13
|
-
}) {
|
|
14
|
-
return /* @__PURE__ */ jsx(
|
|
15
|
-
AvatarPrimitive.Root,
|
|
16
|
-
{
|
|
17
|
-
className: cx(
|
|
18
|
-
"rounded-circle relative flex shrink-0 overflow-hidden",
|
|
19
|
-
"data-[size=lg]:size-large-8x data-[size=md]:size-large-4x data-[size=sm]:size-large-2x data-[size=xs]:size-large-1x",
|
|
20
|
-
"data-[size=lg]:text-size-headline-md data-[size=md]:text-size-label-lg data-[size=sm]:text-size-label-sm data-[size=xs]:text-size-label-sm",
|
|
21
|
-
className
|
|
22
|
-
),
|
|
23
|
-
"data-size": size,
|
|
24
|
-
"data-slot": "avatar",
|
|
25
|
-
...props
|
|
26
|
-
}
|
|
27
|
-
);
|
|
28
|
-
}
|
|
29
|
-
function AvatarImage({
|
|
30
|
-
className,
|
|
31
|
-
...props
|
|
32
|
-
}) {
|
|
33
|
-
return /* @__PURE__ */ jsx(
|
|
34
|
-
AvatarPrimitive.Image,
|
|
35
|
-
{
|
|
36
|
-
className: cx("aspect-square size-full", className),
|
|
37
|
-
"data-slot": "avatar-image",
|
|
38
|
-
...props
|
|
39
|
-
}
|
|
40
|
-
);
|
|
41
|
-
}
|
|
42
|
-
function AvatarFallback({
|
|
43
|
-
className,
|
|
44
|
-
...props
|
|
45
|
-
}) {
|
|
46
|
-
return /* @__PURE__ */ jsx(
|
|
47
|
-
AvatarPrimitive.Fallback,
|
|
48
|
-
{
|
|
49
|
-
className: cx(
|
|
50
|
-
"bg-alt-1 rounded-circle flex size-full items-center justify-center font-medium text-white",
|
|
51
|
-
className
|
|
52
|
-
),
|
|
53
|
-
"data-slot": "avatar-fallback",
|
|
54
|
-
...props
|
|
55
|
-
}
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
// src/components/typography.tsx
|
|
60
|
-
import { Slot } from "@radix-ui/react-slot";
|
|
61
|
-
import { cva } from "@xjur-ui/util";
|
|
62
|
-
import { memo } from "react";
|
|
63
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
64
|
-
var typographyVariants = cva("", {
|
|
65
|
-
variants: {
|
|
66
|
-
variant: {
|
|
67
|
-
body: "",
|
|
68
|
-
label: "",
|
|
69
|
-
title: "",
|
|
70
|
-
headline: ""
|
|
71
|
-
},
|
|
72
|
-
size: {
|
|
73
|
-
"sm-2x": "",
|
|
74
|
-
"sm-1x": "",
|
|
75
|
-
sm: "",
|
|
76
|
-
md: "",
|
|
77
|
-
lg: ""
|
|
78
|
-
},
|
|
79
|
-
weight: {
|
|
80
|
-
thin: "font-thin",
|
|
81
|
-
extraLight: "font-extralight",
|
|
82
|
-
light: "font-light",
|
|
83
|
-
normal: "font-normal",
|
|
84
|
-
medium: "font-medium",
|
|
85
|
-
semibold: "font-semibold",
|
|
86
|
-
bold: "font-bold",
|
|
87
|
-
extraBold: "font-extrabold",
|
|
88
|
-
black: "font-black"
|
|
89
|
-
}
|
|
90
|
-
},
|
|
91
|
-
compoundVariants: [
|
|
92
|
-
{ variant: "body", size: "sm-1x", class: "text-size-body-sm-1x" },
|
|
93
|
-
{ variant: "body", size: "sm", class: "text-size-body-sm" },
|
|
94
|
-
{ variant: "body", size: "md", class: "text-size-body-md" },
|
|
95
|
-
{ variant: "body", size: "lg", class: "text-size-body-lg" },
|
|
96
|
-
{ variant: "label", size: "sm-2x", class: "text-size-label-sm-2x" },
|
|
97
|
-
{ variant: "label", size: "sm-1x", class: "text-size-label-sm-1x" },
|
|
98
|
-
{ variant: "label", size: "sm", class: "text-size-label-sm" },
|
|
99
|
-
{ variant: "label", size: "md", class: "text-size-label-md" },
|
|
100
|
-
{ variant: "label", size: "lg", class: "text-size-label-lg" },
|
|
101
|
-
{ variant: "title", size: "sm", class: "text-size-title-sm" },
|
|
102
|
-
{ variant: "title", size: "md", class: "text-size-title-md" },
|
|
103
|
-
{ variant: "title", size: "lg", class: "text-size-title-lg" },
|
|
104
|
-
{ variant: "headline", size: "sm", class: "text-size-headline-sm" },
|
|
105
|
-
{ variant: "headline", size: "md", class: "text-size-headline-md" },
|
|
106
|
-
{ variant: "headline", size: "lg", class: "text-size-headline-lg" }
|
|
107
|
-
],
|
|
108
|
-
defaultVariants: {
|
|
109
|
-
variant: "body",
|
|
110
|
-
size: "md",
|
|
111
|
-
weight: "normal"
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
var Typography = memo(
|
|
115
|
-
({
|
|
116
|
-
variant,
|
|
117
|
-
size,
|
|
118
|
-
weight,
|
|
119
|
-
asChild,
|
|
120
|
-
className,
|
|
121
|
-
...props
|
|
122
|
-
}) => {
|
|
123
|
-
const Component = asChild ? Slot : "span";
|
|
124
|
-
return /* @__PURE__ */ jsx2(
|
|
125
|
-
Component,
|
|
126
|
-
{
|
|
127
|
-
className: typographyVariants({ variant, size, weight, className }),
|
|
128
|
-
...props
|
|
129
|
-
}
|
|
130
|
-
);
|
|
131
|
-
}
|
|
132
|
-
);
|
|
133
|
-
Typography.displayName = "Typography";
|
|
134
|
-
|
|
135
|
-
// src/components/avatar-group.tsx
|
|
136
|
-
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
137
|
-
function AvatarGroup({
|
|
138
|
-
avatars,
|
|
139
|
-
max = 3,
|
|
140
|
-
size = "md",
|
|
141
|
-
className
|
|
142
|
-
}) {
|
|
143
|
-
const visibleAvatars = avatars.slice(0, max);
|
|
144
|
-
const remainingCount = avatars.length - max;
|
|
145
|
-
return /* @__PURE__ */ jsxs(
|
|
146
|
-
"div",
|
|
147
|
-
{
|
|
148
|
-
className: cx2("-space-x-small-1x flex items-center", className),
|
|
149
|
-
"data-slot": "avatar-group",
|
|
150
|
-
children: [
|
|
151
|
-
visibleAvatars.map((avatar, index) => /* @__PURE__ */ jsxs(
|
|
152
|
-
AvatarRoot,
|
|
153
|
-
{
|
|
154
|
-
className: "border-icon-neutral-5 border-2",
|
|
155
|
-
size,
|
|
156
|
-
children: [
|
|
157
|
-
avatar.src && /* @__PURE__ */ jsx3(
|
|
158
|
-
AvatarImage,
|
|
159
|
-
{
|
|
160
|
-
alt: avatar.alt || `Avatar ${index + 1}`,
|
|
161
|
-
src: avatar.src
|
|
162
|
-
}
|
|
163
|
-
),
|
|
164
|
-
/* @__PURE__ */ jsx3(AvatarFallback, { children: avatar.fallback || `A${index + 1}` })
|
|
165
|
-
]
|
|
166
|
-
},
|
|
167
|
-
index
|
|
168
|
-
)),
|
|
169
|
-
remainingCount > 0 && /* @__PURE__ */ jsx3(AvatarRoot, { className: "bg-layer-1-hover", size, children: /* @__PURE__ */ jsx3(AvatarFallback, { className: "bg-layer-1-hover font-medium", children: /* @__PURE__ */ jsxs(Typography, { className: "text-neutral-dark", weight: "medium", children: [
|
|
170
|
-
"+",
|
|
171
|
-
remainingCount
|
|
172
|
-
] }) }) })
|
|
173
|
-
]
|
|
174
|
-
}
|
|
175
|
-
);
|
|
176
|
-
}
|
|
177
|
-
export {
|
|
178
|
-
AvatarGroup
|
|
179
|
-
};
|
|
1
|
+
import {a,b,c}from'../chunk-TB6KI6CL.js';import {a as a$1}from'../chunk-EIG6CBTQ.js';import {cx}from'@xjur-ui/util';import {jsxs,jsx}from'react/jsx-runtime';function d({avatars:l,max:m=3,size:c$1="md",className:g}){let v=l.slice(0,m),i=l.length-m;return jsxs("div",{className:cx("-space-x-small-1x flex items-center",g),"data-slot":"avatar-group",children:[v.map((a$1,t)=>jsxs(a,{className:"border-icon-neutral-5 border-2",size:c$1,children:[a$1.src&&jsx(b,{alt:a$1.alt||`Avatar ${t+1}`,src:a$1.src}),jsx(c,{children:a$1.fallback||`A${t+1}`})]},t)),i>0&&jsx(a,{className:"bg-layer-1-hover",size:c$1,children:jsx(c,{className:"bg-layer-1-hover font-medium",children:jsxs(a$1,{className:"text-neutral-dark",weight:"medium",children:["+",i]})})})]})}export{d as AvatarGroup};//# sourceMappingURL=avatar-group.js.map
|
|
2
|
+
//# sourceMappingURL=avatar-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/avatar-group.tsx"],"names":["AvatarGroup","avatars","max","size","className","visibleAvatars","remainingCount","jsxs","cx","avatar","index","AvatarRoot","jsx","AvatarImage","AvatarFallback","Typography"],"mappings":"6JAkCO,SAASA,CAAAA,CAAY,CAC1B,OAAA,CAAAC,EACA,GAAA,CAAAC,CAAAA,CAAM,CAAA,CACN,IAAA,CAAAC,GAAAA,CAAO,IAAA,CACP,SAAA,CAAAC,CACF,CAAA,CAAqB,CACnB,IAAMC,CAAAA,CAAiBJ,CAAAA,CAAQ,KAAA,CAAM,EAAGC,CAAG,CAAA,CACrCI,CAAAA,CAAiBL,CAAAA,CAAQ,MAAA,CAASC,CAAAA,CAExC,OACEK,IAAAA,CAAC,KAAA,CAAA,CACC,SAAA,CAAWC,EAAAA,CAAG,qCAAA,CAAuCJ,CAAS,CAAA,CAC9D,YAAU,cAAA,CAET,QAAA,CAAA,CAAAC,CAAAA,CAAe,GAAA,CAAI,CAACI,GAAAA,CAAQC,CAAAA,GAC3BH,IAAAA,CAACI,CAAAA,CAAA,CACC,SAAA,CAAU,gCAAA,CAEV,IAAA,CAAMR,GAAAA,CAEL,UAAAM,GAAAA,CAAO,GAAA,EACNG,GAAAA,CAACC,CAAAA,CAAA,CACC,GAAA,CAAKJ,GAAAA,CAAO,GAAA,EAAO,CAAA,OAAA,EAAUC,CAAAA,CAAQ,CAAC,CAAA,CAAA,CACtC,GAAA,CAAKD,GAAAA,CAAO,IACd,CAAA,CAEFG,GAAAA,CAACE,CAAAA,CAAA,CAAgB,QAAA,CAAAL,GAAAA,CAAO,QAAA,EAAY,CAAA,CAAA,EAAIC,CAAAA,CAAQ,CAAC,CAAA,CAAA,CAAG,CAAA,CAAA,CAAA,CAT/CA,CAUP,CACD,EAEAJ,CAAAA,CAAiB,CAAA,EAChBM,GAAAA,CAACD,CAAAA,CAAA,CAAW,SAAA,CAAU,kBAAA,CAAmB,IAAA,CAAMR,GAAAA,CAC7C,QAAA,CAAAS,GAAAA,CAACE,CAAAA,CAAA,CAAe,SAAA,CAAU,8BAAA,CACxB,QAAA,CAAAP,IAAAA,CAACQ,GAAAA,CAAA,CAAW,SAAA,CAAU,mBAAA,CAAoB,MAAA,CAAO,QAAA,CAAS,QAAA,CAAA,CAAA,GAAA,CACtDT,CAAAA,CAAAA,CACJ,CAAA,CACF,CAAA,CACF,CAAA,CAAA,CAEJ,CAEJ","file":"avatar-group.js","sourcesContent":["import { cx } from '@xjur-ui/util'\nimport { AvatarRoot, AvatarImage, AvatarFallback } from './avatar'\nimport { Typography } from './typography'\n\nexport interface AvatarGroupProps {\n /**\n * Lista de avatares para exibir\n */\n avatars: Array<{\n src?: string\n alt?: string\n fallback?: string\n }>\n /**\n * Número máximo de avatares a exibir antes de mostrar o indicador de overflow\n * @default 3\n */\n max?: number\n /**\n * Tamanho dos avatares\n * @default 'md'\n */\n size?: 'xs' | 'sm' | 'md' | 'lg'\n /**\n * Classe CSS adicional\n */\n className?: string\n /**\n * Espaçamento entre os avatares (em pixels)\n * @default -8\n */\n spacing?: number\n}\n\nexport function AvatarGroup({\n avatars,\n max = 3,\n size = 'md',\n className\n}: AvatarGroupProps) {\n const visibleAvatars = avatars.slice(0, max)\n const remainingCount = avatars.length - max\n\n return (\n <div\n className={cx('-space-x-small-1x flex items-center', className)}\n data-slot=\"avatar-group\"\n >\n {visibleAvatars.map((avatar, index) => (\n <AvatarRoot\n className=\"border-icon-neutral-5 border-2\"\n key={index}\n size={size}\n >\n {avatar.src && (\n <AvatarImage\n alt={avatar.alt || `Avatar ${index + 1}`}\n src={avatar.src}\n />\n )}\n <AvatarFallback>{avatar.fallback || `A${index + 1}`}</AvatarFallback>\n </AvatarRoot>\n ))}\n\n {remainingCount > 0 && (\n <AvatarRoot className=\"bg-layer-1-hover\" size={size}>\n <AvatarFallback className=\"bg-layer-1-hover font-medium\">\n <Typography className=\"text-neutral-dark\" weight=\"medium\">\n +{remainingCount}\n </Typography>\n </AvatarFallback>\n </AvatarRoot>\n )}\n </div>\n )\n}\n"]}
|
|
@@ -1,59 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
4
|
-
import { cx } from "@xjur-ui/util";
|
|
5
|
-
import { jsx } from "react/jsx-runtime";
|
|
6
|
-
function AvatarRoot({
|
|
7
|
-
className,
|
|
8
|
-
size = "md",
|
|
9
|
-
...props
|
|
10
|
-
}) {
|
|
11
|
-
return /* @__PURE__ */ jsx(
|
|
12
|
-
AvatarPrimitive.Root,
|
|
13
|
-
{
|
|
14
|
-
className: cx(
|
|
15
|
-
"rounded-circle relative flex shrink-0 overflow-hidden",
|
|
16
|
-
"data-[size=lg]:size-large-8x data-[size=md]:size-large-4x data-[size=sm]:size-large-2x data-[size=xs]:size-large-1x",
|
|
17
|
-
"data-[size=lg]:text-size-headline-md data-[size=md]:text-size-label-lg data-[size=sm]:text-size-label-sm data-[size=xs]:text-size-label-sm",
|
|
18
|
-
className
|
|
19
|
-
),
|
|
20
|
-
"data-size": size,
|
|
21
|
-
"data-slot": "avatar",
|
|
22
|
-
...props
|
|
23
|
-
}
|
|
24
|
-
);
|
|
25
|
-
}
|
|
26
|
-
function AvatarImage({
|
|
27
|
-
className,
|
|
28
|
-
...props
|
|
29
|
-
}) {
|
|
30
|
-
return /* @__PURE__ */ jsx(
|
|
31
|
-
AvatarPrimitive.Image,
|
|
32
|
-
{
|
|
33
|
-
className: cx("aspect-square size-full", className),
|
|
34
|
-
"data-slot": "avatar-image",
|
|
35
|
-
...props
|
|
36
|
-
}
|
|
37
|
-
);
|
|
38
|
-
}
|
|
39
|
-
function AvatarFallback({
|
|
40
|
-
className,
|
|
41
|
-
...props
|
|
42
|
-
}) {
|
|
43
|
-
return /* @__PURE__ */ jsx(
|
|
44
|
-
AvatarPrimitive.Fallback,
|
|
45
|
-
{
|
|
46
|
-
className: cx(
|
|
47
|
-
"bg-alt-1 rounded-circle flex size-full items-center justify-center font-medium text-white",
|
|
48
|
-
className
|
|
49
|
-
),
|
|
50
|
-
"data-slot": "avatar-fallback",
|
|
51
|
-
...props
|
|
52
|
-
}
|
|
53
|
-
);
|
|
54
|
-
}
|
|
55
|
-
export {
|
|
56
|
-
AvatarFallback,
|
|
57
|
-
AvatarImage,
|
|
58
|
-
AvatarRoot
|
|
59
|
-
};
|
|
1
|
+
export{c as AvatarFallback,b as AvatarImage,a as AvatarRoot}from'../chunk-TB6KI6CL.js';//# sourceMappingURL=avatar.js.map
|
|
2
|
+
//# sourceMappingURL=avatar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"avatar.js"}
|
package/dist/components/badge.js
CHANGED
|
@@ -1,111 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
// src/components/typography.tsx
|
|
5
|
-
import { Slot } from "@radix-ui/react-slot";
|
|
6
|
-
import { cva } from "@xjur-ui/util";
|
|
7
|
-
import { memo } from "react";
|
|
8
|
-
import { jsx } from "react/jsx-runtime";
|
|
9
|
-
var typographyVariants = cva("", {
|
|
10
|
-
variants: {
|
|
11
|
-
variant: {
|
|
12
|
-
body: "",
|
|
13
|
-
label: "",
|
|
14
|
-
title: "",
|
|
15
|
-
headline: ""
|
|
16
|
-
},
|
|
17
|
-
size: {
|
|
18
|
-
"sm-2x": "",
|
|
19
|
-
"sm-1x": "",
|
|
20
|
-
sm: "",
|
|
21
|
-
md: "",
|
|
22
|
-
lg: ""
|
|
23
|
-
},
|
|
24
|
-
weight: {
|
|
25
|
-
thin: "font-thin",
|
|
26
|
-
extraLight: "font-extralight",
|
|
27
|
-
light: "font-light",
|
|
28
|
-
normal: "font-normal",
|
|
29
|
-
medium: "font-medium",
|
|
30
|
-
semibold: "font-semibold",
|
|
31
|
-
bold: "font-bold",
|
|
32
|
-
extraBold: "font-extrabold",
|
|
33
|
-
black: "font-black"
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
compoundVariants: [
|
|
37
|
-
{ variant: "body", size: "sm-1x", class: "text-size-body-sm-1x" },
|
|
38
|
-
{ variant: "body", size: "sm", class: "text-size-body-sm" },
|
|
39
|
-
{ variant: "body", size: "md", class: "text-size-body-md" },
|
|
40
|
-
{ variant: "body", size: "lg", class: "text-size-body-lg" },
|
|
41
|
-
{ variant: "label", size: "sm-2x", class: "text-size-label-sm-2x" },
|
|
42
|
-
{ variant: "label", size: "sm-1x", class: "text-size-label-sm-1x" },
|
|
43
|
-
{ variant: "label", size: "sm", class: "text-size-label-sm" },
|
|
44
|
-
{ variant: "label", size: "md", class: "text-size-label-md" },
|
|
45
|
-
{ variant: "label", size: "lg", class: "text-size-label-lg" },
|
|
46
|
-
{ variant: "title", size: "sm", class: "text-size-title-sm" },
|
|
47
|
-
{ variant: "title", size: "md", class: "text-size-title-md" },
|
|
48
|
-
{ variant: "title", size: "lg", class: "text-size-title-lg" },
|
|
49
|
-
{ variant: "headline", size: "sm", class: "text-size-headline-sm" },
|
|
50
|
-
{ variant: "headline", size: "md", class: "text-size-headline-md" },
|
|
51
|
-
{ variant: "headline", size: "lg", class: "text-size-headline-lg" }
|
|
52
|
-
],
|
|
53
|
-
defaultVariants: {
|
|
54
|
-
variant: "body",
|
|
55
|
-
size: "md",
|
|
56
|
-
weight: "normal"
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
var Typography = memo(
|
|
60
|
-
({
|
|
61
|
-
variant,
|
|
62
|
-
size,
|
|
63
|
-
weight,
|
|
64
|
-
asChild,
|
|
65
|
-
className,
|
|
66
|
-
...props
|
|
67
|
-
}) => {
|
|
68
|
-
const Component = asChild ? Slot : "span";
|
|
69
|
-
return /* @__PURE__ */ jsx(
|
|
70
|
-
Component,
|
|
71
|
-
{
|
|
72
|
-
className: typographyVariants({ variant, size, weight, className }),
|
|
73
|
-
...props
|
|
74
|
-
}
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
);
|
|
78
|
-
Typography.displayName = "Typography";
|
|
79
|
-
|
|
80
|
-
// src/components/badge.tsx
|
|
81
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
82
|
-
var badgeVariants = cva2(
|
|
83
|
-
[
|
|
84
|
-
"flex items-center justify-center size-large p-small-2x text-neutral-label rounded-circle"
|
|
85
|
-
],
|
|
86
|
-
{
|
|
87
|
-
variants: {
|
|
88
|
-
variant: {
|
|
89
|
-
primary: "bg-primary-idle",
|
|
90
|
-
secondary: "bg-secondary-idle",
|
|
91
|
-
neutral: "bg-alt-2-idle",
|
|
92
|
-
success: "bg-success-idle",
|
|
93
|
-
warning: "bg-warning-idle",
|
|
94
|
-
danger: "bg-danger-idle"
|
|
95
|
-
}
|
|
96
|
-
},
|
|
97
|
-
defaultVariants: {
|
|
98
|
-
variant: "neutral"
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
);
|
|
102
|
-
function Badge({
|
|
103
|
-
variant = "neutral",
|
|
104
|
-
children,
|
|
105
|
-
className
|
|
106
|
-
}) {
|
|
107
|
-
return /* @__PURE__ */ jsx2("span", { className: cx(badgeVariants({ variant }), className), children: /* @__PURE__ */ jsx2(Typography, { className: "text-inherit", size: "sm-2x", variant: "label", children }) });
|
|
108
|
-
}
|
|
109
|
-
export {
|
|
110
|
-
Badge
|
|
111
|
-
};
|
|
1
|
+
import {a}from'../chunk-EIG6CBTQ.js';import {cva,cx}from'@xjur-ui/util';import {jsx}from'react/jsx-runtime';var l=cva(["flex items-center justify-center size-large p-small-2x text-neutral-label rounded-circle"],{variants:{variant:{primary:"bg-primary-idle",secondary:"bg-secondary-idle",neutral:"bg-alt-2-idle",success:"bg-success-idle",warning:"bg-warning-idle",danger:"bg-danger-idle"}},defaultVariants:{variant:"neutral"}});function d({variant:r="neutral",children:s,className:n}){return jsx("span",{className:cx(l({variant:r}),n),children:jsx(a,{className:"text-inherit",size:"sm-2x",variant:"label",children:s})})}export{d as Badge};//# sourceMappingURL=badge.js.map
|
|
2
|
+
//# sourceMappingURL=badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/badge.tsx"],"names":["badgeVariants","cva","Badge","variant","children","className","jsx","cx","Typography"],"mappings":"4GAGA,IAAMA,CAAAA,CAAgBC,IACpB,CACE,0FACF,CAAA,CACA,CACE,SAAU,CACR,OAAA,CAAS,CACP,OAAA,CAAS,kBACT,SAAA,CAAW,mBAAA,CACX,OAAA,CAAS,eAAA,CACT,QAAS,iBAAA,CACT,OAAA,CAAS,iBAAA,CACT,MAAA,CAAQ,gBACV,CACF,CAAA,CACA,gBAAiB,CACf,OAAA,CAAS,SACX,CACF,CACF,CAAA,CAEO,SAASC,EAAM,CACpB,OAAA,CAAAC,CAAAA,CAAU,SAAA,CACV,SAAAC,CAAAA,CACA,SAAA,CAAAC,CACF,CAAA,CAGG,CACD,OACEC,GAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAWC,GAAGP,CAAAA,CAAc,CAAE,OAAA,CAAAG,CAAQ,CAAC,CAAA,CAAGE,CAAS,CAAA,CACvD,QAAA,CAAAC,IAACE,CAAAA,CAAA,CAAW,SAAA,CAAU,cAAA,CAAe,KAAK,OAAA,CAAQ,OAAA,CAAQ,QACvD,QAAA,CAAAJ,CAAAA,CACH,EACF,CAEJ","file":"badge.js","sourcesContent":["import { cva, type ClassVariantProps, cx } from '@xjur-ui/util'\nimport { Typography } from './typography'\n\nconst badgeVariants = cva(\n [\n 'flex items-center justify-center size-large p-small-2x text-neutral-label rounded-circle'\n ],\n {\n variants: {\n variant: {\n primary: 'bg-primary-idle',\n secondary: 'bg-secondary-idle',\n neutral: 'bg-alt-2-idle',\n success: 'bg-success-idle',\n warning: 'bg-warning-idle',\n danger: 'bg-danger-idle'\n }\n },\n defaultVariants: {\n variant: 'neutral'\n }\n }\n)\n\nexport function Badge({\n variant = 'neutral',\n children,\n className\n}: ClassVariantProps<typeof badgeVariants> & {\n children: string\n className?: string\n}) {\n return (\n <span className={cx(badgeVariants({ variant }), className)}>\n <Typography className=\"text-inherit\" size=\"sm-2x\" variant=\"label\">\n {children}\n </Typography>\n </span>\n )\n}\n"]}
|
|
@@ -1,98 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { cva, cx } from "@xjur-ui/util";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
var buttonVariants = cva(
|
|
6
|
-
[
|
|
7
|
-
"outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors"
|
|
8
|
-
],
|
|
9
|
-
{
|
|
10
|
-
variants: {
|
|
11
|
-
size: {
|
|
12
|
-
md: "py-small_1x-alt px-medium text-size-body-md",
|
|
13
|
-
sm: "py-small-1x px-small text-size-label-sm",
|
|
14
|
-
icon_md: "p-small text-size-body-md h-large-4x w-large-4x",
|
|
15
|
-
icon_sm: "p-small-1x text-size-label-sm h-large-2x w-large-2x"
|
|
16
|
-
},
|
|
17
|
-
variant: {
|
|
18
|
-
primary: "",
|
|
19
|
-
secondary: "",
|
|
20
|
-
tertiary: "",
|
|
21
|
-
destructive: "",
|
|
22
|
-
outlined: "bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed"
|
|
23
|
-
},
|
|
24
|
-
appearance: {
|
|
25
|
-
solid: "",
|
|
26
|
-
ghost: "bg-transparent"
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
compoundVariants: [
|
|
30
|
-
{
|
|
31
|
-
variant: "primary",
|
|
32
|
-
appearance: "solid",
|
|
33
|
-
class: "bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed"
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
variant: "primary",
|
|
37
|
-
appearance: "ghost",
|
|
38
|
-
class: "text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed"
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
variant: "secondary",
|
|
42
|
-
appearance: "solid",
|
|
43
|
-
class: "bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active"
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
variant: "secondary",
|
|
47
|
-
appearance: "ghost",
|
|
48
|
-
class: "hover:bg-layer-1-hover active:bg-layer-1-pressed"
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
variant: "tertiary",
|
|
52
|
-
appearance: "solid",
|
|
53
|
-
class: "bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active"
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
variant: "tertiary",
|
|
57
|
-
appearance: "ghost",
|
|
58
|
-
class: "hover:bg-layer-2-hover active:bg-layer-2-pressed"
|
|
59
|
-
},
|
|
60
|
-
{
|
|
61
|
-
variant: "destructive",
|
|
62
|
-
appearance: "solid",
|
|
63
|
-
class: "bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed"
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
variant: "destructive",
|
|
67
|
-
appearance: "ghost",
|
|
68
|
-
class: "text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed"
|
|
69
|
-
}
|
|
70
|
-
],
|
|
71
|
-
defaultVariants: {
|
|
72
|
-
size: "md",
|
|
73
|
-
variant: "primary",
|
|
74
|
-
appearance: "solid"
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
);
|
|
78
|
-
function Button({
|
|
79
|
-
asChild,
|
|
80
|
-
className,
|
|
81
|
-
variant = "primary",
|
|
82
|
-
size = "md",
|
|
83
|
-
appearance = "solid",
|
|
84
|
-
...props
|
|
85
|
-
}) {
|
|
86
|
-
const Component = asChild ? Slot : "button";
|
|
87
|
-
return /* @__PURE__ */ jsx(
|
|
88
|
-
Component,
|
|
89
|
-
{
|
|
90
|
-
className: cx(buttonVariants({ variant, appearance, size }), className),
|
|
91
|
-
...props
|
|
92
|
-
}
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
export {
|
|
96
|
-
Button,
|
|
97
|
-
buttonVariants
|
|
98
|
-
};
|
|
1
|
+
export{b as Button,a as buttonVariants}from'../chunk-FASEHVMD.js';//# sourceMappingURL=button.js.map
|
|
2
|
+
//# sourceMappingURL=button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"button.js"}
|