@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
package/dist/components/tabs.js
CHANGED
|
@@ -1,54 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { cva, cx } from "@xjur-ui/util";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
function TabsRoot({
|
|
6
|
-
...props
|
|
7
|
-
}) {
|
|
8
|
-
return /* @__PURE__ */ jsx(TabsPrimitive.Tabs, { ...props });
|
|
9
|
-
}
|
|
10
|
-
function TabsList2({
|
|
11
|
-
...props
|
|
12
|
-
}) {
|
|
13
|
-
return /* @__PURE__ */ jsx(TabsPrimitive.TabsList, { ...props });
|
|
14
|
-
}
|
|
15
|
-
function TabsTrigger2({
|
|
16
|
-
variant,
|
|
17
|
-
className,
|
|
18
|
-
...props
|
|
19
|
-
}) {
|
|
20
|
-
const variants = cva(
|
|
21
|
-
[
|
|
22
|
-
"rounded-small-1x h-large-4x cursor-pointer text-size-label-md text-neutral-dark"
|
|
23
|
-
],
|
|
24
|
-
{
|
|
25
|
-
variants: {
|
|
26
|
-
variant: {
|
|
27
|
-
line: "py-small_1x-alt px-small data-[state=active]:border-b-[3px] data-[state=active]:border-b-primary-active data-[state=active]:rounded-none hover:bg-layer-2-hover",
|
|
28
|
-
button: "rounded-br-none rounded-bl-none py-small_1x-alt px-large bg-primary-idle text-neutral-label hover:bg-primary-hover data-[state=active]:bg-layer-2-idle data-[state=active]:text-primary-label-active"
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
defaultVariants: {
|
|
32
|
-
variant: "button"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
return /* @__PURE__ */ jsx(
|
|
37
|
-
TabsPrimitive.TabsTrigger,
|
|
38
|
-
{
|
|
39
|
-
className: cx(className, variants({ variant })),
|
|
40
|
-
...props
|
|
41
|
-
}
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
function TabsContent2({
|
|
45
|
-
...props
|
|
46
|
-
}) {
|
|
47
|
-
return /* @__PURE__ */ jsx(TabsPrimitive.TabsContent, { ...props });
|
|
48
|
-
}
|
|
49
|
-
export {
|
|
50
|
-
TabsContent2 as TabsContent,
|
|
51
|
-
TabsList2 as TabsList,
|
|
52
|
-
TabsRoot,
|
|
53
|
-
TabsTrigger2 as TabsTrigger
|
|
54
|
-
};
|
|
1
|
+
import'react';import*as t from'@radix-ui/react-tabs';import {tv}from'@xjur-ui/util';import {jsx}from'react/jsx-runtime';var s=tv({slots:{list:"flex items-center gap-0",trigger:"inline-flex items-center justify-center gap-small px-small py-small_1x-alt h-large-4x font-medium cursor-pointer transition-colors !text-size-label-md disabled:opacity-38 disabled:pointer-events-none",content:""},variants:{variant:{line:{trigger:"rounded-small-1x text-neutral-dark border-b-[3px] border-b-transparent hover:bg-layer-2-hover data-[state=active]:text-primary-active data-[state=active]:border-b-primary-active data-[state=active]:rounded-none data-[state=active]:bg-transparent"},button:{trigger:"rounded-tl-small-1x rounded-tr-small-1x rounded-bl-none rounded-br-none px-large bg-primary-idle text-neutral-label hover:bg-primary-hover data-[state=active]:bg-layer-2-idle data-[state=active]:text-primary-active"}}},defaultVariants:{variant:"button"}});function p(e){return jsx(t.Tabs,{...e})}function m({className:e,...a}){let{list:i}=s({});return jsx(t.TabsList,{className:i({className:e}),...a})}function c({variant:e,className:a,...i}){let{trigger:n}=s({variant:e});return jsx(t.TabsTrigger,{className:n({className:a}),...i})}function d(e){let{content:a}=s();return jsx(t.TabsContent,{className:a(),...e})}export{d as TabsContent,m as TabsList,p as TabsRoot,c as TabsTrigger};//# sourceMappingURL=tabs.js.map
|
|
2
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/tabs.tsx"],"names":["tabsStyles","tv","TabsRoot","props","jsx","TabsList","className","list","TabsTrigger","variant","trigger","TabsContent","content"],"mappings":"wHAIA,IAAMA,CAAAA,CAAaC,EAAAA,CAAG,CACpB,KAAA,CAAO,CACL,IAAA,CAAM,yBAAA,CACN,OAAA,CACE,yMAAA,CAGF,OAAA,CAAS,EACX,EACA,QAAA,CAAU,CACR,OAAA,CAAS,CACP,KAAM,CACJ,OAAA,CACE,uPAKJ,CAAA,CACA,OAAQ,CACN,OAAA,CACE,wNAIJ,CACF,CACF,CAAA,CACA,eAAA,CAAiB,CACf,QAAS,QACX,CACF,CAAC,CAAA,CAEM,SAASC,CAAAA,CACdC,CAAAA,CACA,CACA,OAAOC,IAAe,CAAA,CAAA,IAAA,CAAd,CAAoB,GAAGD,CAAAA,CAAO,CACxC,CAIO,SAASE,CAAAA,CAAS,CAAE,SAAA,CAAAC,CAAAA,CAAW,GAAGH,CAAM,EAAkB,CAC/D,GAAM,CAAE,IAAA,CAAAI,CAAK,CAAA,CAAIP,CAAAA,CAAW,EAAE,CAAA,CAC9B,OAAOI,GAAAA,CAAe,CAAA,CAAA,QAAA,CAAd,CAAuB,SAAA,CAAWG,CAAAA,CAAK,CAAE,SAAA,CAAAD,CAAU,CAAC,CAAA,CAAI,GAAGH,CAAAA,CAAO,CAC5E,CAOO,SAASK,CAAAA,CAAY,CAC1B,OAAA,CAAAC,CAAAA,CACA,SAAA,CAAAH,CAAAA,CACA,GAAGH,CACL,CAAA,CAAqB,CACnB,GAAM,CAAE,OAAA,CAAAO,CAAQ,CAAA,CAAIV,CAAAA,CAAW,CAAE,OAAA,CAAAS,CAAQ,CAAC,CAAA,CAC1C,OACEL,GAAAA,CAAe,CAAA,CAAA,WAAA,CAAd,CAA0B,UAAWM,CAAAA,CAAQ,CAAE,SAAA,CAAAJ,CAAU,CAAC,CAAA,CAAI,GAAGH,CAAAA,CAAO,CAE7E,CAEO,SAASQ,CAAAA,CACdR,CAAAA,CACA,CACA,GAAM,CAAE,OAAA,CAAAS,CAAQ,CAAA,CAAIZ,GAAW,CAC/B,OAAOI,GAAAA,CAAe,CAAA,CAAA,WAAA,CAAd,CAA0B,SAAA,CAAWQ,CAAAA,EAAQ,CAAI,GAAGT,EAAO,CACrE","file":"tabs.js","sourcesContent":["import * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { tv } from '@xjur-ui/util'\n\nconst tabsStyles = tv({\n slots: {\n list: 'flex items-center gap-0',\n trigger:\n 'inline-flex items-center justify-center gap-small px-small py-small_1x-alt h-large-4x ' +\n 'font-medium cursor-pointer transition-colors !text-size-label-md ' +\n 'disabled:opacity-38 disabled:pointer-events-none',\n content: ''\n },\n variants: {\n variant: {\n line: {\n trigger:\n 'rounded-small-1x text-neutral-dark border-b-[3px] border-b-transparent ' +\n 'hover:bg-layer-2-hover ' +\n 'data-[state=active]:text-primary-active ' +\n 'data-[state=active]:border-b-primary-active ' +\n 'data-[state=active]:rounded-none data-[state=active]:bg-transparent'\n },\n button: {\n trigger:\n 'rounded-tl-small-1x rounded-tr-small-1x rounded-bl-none rounded-br-none px-large ' +\n 'bg-primary-idle text-neutral-label ' +\n 'hover:bg-primary-hover ' +\n 'data-[state=active]:bg-layer-2-idle data-[state=active]:text-primary-active'\n }\n }\n },\n defaultVariants: {\n variant: 'button'\n }\n})\n\nexport function TabsRoot(\n props: React.ComponentProps<typeof TabsPrimitive.Tabs>\n) {\n return <TabsPrimitive.Tabs {...props} />\n}\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.TabsList>\n\nexport function TabsList({ className, ...props }: TabsListProps) {\n const { list } = tabsStyles({})\n return <TabsPrimitive.TabsList className={list({ className })} {...props} />\n}\n\nexport interface TabsTriggerProps\n extends React.ComponentProps<typeof TabsPrimitive.TabsTrigger> {\n variant?: 'line' | 'button'\n}\n\nexport function TabsTrigger({\n variant,\n className,\n ...props\n}: TabsTriggerProps) {\n const { trigger } = tabsStyles({ variant })\n return (\n <TabsPrimitive.TabsTrigger className={trigger({ className })} {...props} />\n )\n}\n\nexport function TabsContent(\n props: React.ComponentProps<typeof TabsPrimitive.TabsContent>\n) {\n const { content } = tabsStyles()\n return <TabsPrimitive.TabsContent className={content()} {...props} />\n}\n"]}
|
package/dist/components/tag.d.ts
CHANGED
|
@@ -8,7 +8,9 @@ import { Icon, IconType } from './icon.js';
|
|
|
8
8
|
declare const tagVariants: (props?: ({
|
|
9
9
|
variant?: "primary" | "neutral" | "danger" | null | undefined;
|
|
10
10
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
|
-
declare function TagRoot({ className, variant, ...props }: ComponentProps<'div'> & ClassVariantProps<typeof tagVariants>
|
|
11
|
+
declare function TagRoot({ className, variant, disabled, ...props }: ComponentProps<'div'> & ClassVariantProps<typeof tagVariants> & {
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
}): react_jsx_runtime.JSX.Element;
|
|
12
14
|
declare function TagText({ variant, size, weight, className, ...props }: ComponentProps<typeof Typography>): react_jsx_runtime.JSX.Element;
|
|
13
15
|
declare function TagIcon({ className, ...props }: ComponentProps<typeof Icon>): react_jsx_runtime.JSX.Element;
|
|
14
16
|
declare function TagClose({ className, children, ...props }: ComponentProps<'button'> & {
|
package/dist/components/tag.js
CHANGED
|
@@ -1,189 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import "react";
|
|
4
|
-
|
|
5
|
-
// src/components/typography.tsx
|
|
6
|
-
import { Slot } from "@radix-ui/react-slot";
|
|
7
|
-
import { cva } from "@xjur-ui/util";
|
|
8
|
-
import { memo } from "react";
|
|
9
|
-
import { jsx } from "react/jsx-runtime";
|
|
10
|
-
var typographyVariants = cva("", {
|
|
11
|
-
variants: {
|
|
12
|
-
variant: {
|
|
13
|
-
body: "",
|
|
14
|
-
label: "",
|
|
15
|
-
title: "",
|
|
16
|
-
headline: ""
|
|
17
|
-
},
|
|
18
|
-
size: {
|
|
19
|
-
"sm-2x": "",
|
|
20
|
-
"sm-1x": "",
|
|
21
|
-
sm: "",
|
|
22
|
-
md: "",
|
|
23
|
-
lg: ""
|
|
24
|
-
},
|
|
25
|
-
weight: {
|
|
26
|
-
thin: "font-thin",
|
|
27
|
-
extraLight: "font-extralight",
|
|
28
|
-
light: "font-light",
|
|
29
|
-
normal: "font-normal",
|
|
30
|
-
medium: "font-medium",
|
|
31
|
-
semibold: "font-semibold",
|
|
32
|
-
bold: "font-bold",
|
|
33
|
-
extraBold: "font-extrabold",
|
|
34
|
-
black: "font-black"
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
|
-
compoundVariants: [
|
|
38
|
-
{ variant: "body", size: "sm-1x", class: "text-size-body-sm-1x" },
|
|
39
|
-
{ variant: "body", size: "sm", class: "text-size-body-sm" },
|
|
40
|
-
{ variant: "body", size: "md", class: "text-size-body-md" },
|
|
41
|
-
{ variant: "body", size: "lg", class: "text-size-body-lg" },
|
|
42
|
-
{ variant: "label", size: "sm-2x", class: "text-size-label-sm-2x" },
|
|
43
|
-
{ variant: "label", size: "sm-1x", class: "text-size-label-sm-1x" },
|
|
44
|
-
{ variant: "label", size: "sm", class: "text-size-label-sm" },
|
|
45
|
-
{ variant: "label", size: "md", class: "text-size-label-md" },
|
|
46
|
-
{ variant: "label", size: "lg", class: "text-size-label-lg" },
|
|
47
|
-
{ variant: "title", size: "sm", class: "text-size-title-sm" },
|
|
48
|
-
{ variant: "title", size: "md", class: "text-size-title-md" },
|
|
49
|
-
{ variant: "title", size: "lg", class: "text-size-title-lg" },
|
|
50
|
-
{ variant: "headline", size: "sm", class: "text-size-headline-sm" },
|
|
51
|
-
{ variant: "headline", size: "md", class: "text-size-headline-md" },
|
|
52
|
-
{ variant: "headline", size: "lg", class: "text-size-headline-lg" }
|
|
53
|
-
],
|
|
54
|
-
defaultVariants: {
|
|
55
|
-
variant: "body",
|
|
56
|
-
size: "md",
|
|
57
|
-
weight: "normal"
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
var Typography = memo(
|
|
61
|
-
({
|
|
62
|
-
variant,
|
|
63
|
-
size,
|
|
64
|
-
weight,
|
|
65
|
-
asChild,
|
|
66
|
-
className,
|
|
67
|
-
...props
|
|
68
|
-
}) => {
|
|
69
|
-
const Component = asChild ? Slot : "span";
|
|
70
|
-
return /* @__PURE__ */ jsx(
|
|
71
|
-
Component,
|
|
72
|
-
{
|
|
73
|
-
className: typographyVariants({ variant, size, weight, className }),
|
|
74
|
-
...props
|
|
75
|
-
}
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
|
-
);
|
|
79
|
-
Typography.displayName = "Typography";
|
|
80
|
-
|
|
81
|
-
// src/components/icon.tsx
|
|
82
|
-
import { cx } from "@xjur-ui/util";
|
|
83
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
84
|
-
function Icon({ className, filled = false, name, ...props }) {
|
|
85
|
-
return /* @__PURE__ */ jsx2(
|
|
86
|
-
"span",
|
|
87
|
-
{
|
|
88
|
-
...props,
|
|
89
|
-
className: cx(
|
|
90
|
-
"material-symbols-outlined",
|
|
91
|
-
"text-size-body-lg",
|
|
92
|
-
className
|
|
93
|
-
),
|
|
94
|
-
style: {
|
|
95
|
-
fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,
|
|
96
|
-
...props.style
|
|
97
|
-
},
|
|
98
|
-
children: name
|
|
99
|
-
}
|
|
100
|
-
);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
// src/components/tag.tsx
|
|
104
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
105
|
-
var tagVariants = cva2(
|
|
106
|
-
[
|
|
107
|
-
"group/tag relative h-large-2x w-fit rounded-small-1x px-small py-none flex items-center gap-small_1x-alt",
|
|
108
|
-
"transition-all duration-200"
|
|
109
|
-
],
|
|
110
|
-
{
|
|
111
|
-
variants: {
|
|
112
|
-
variant: {
|
|
113
|
-
primary: "bg-primary-alt-idle text-primary-label-idle hover:bg-primary-alt-hover",
|
|
114
|
-
danger: "bg-danger-alt-idle text-danger-label-idle hover:bg-danger-alt-hover",
|
|
115
|
-
neutral: "bg-layer-1-idle text-neutral-dark hover:bg-layer-1-hover"
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
defaultVariants: {
|
|
119
|
-
variant: "primary"
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
);
|
|
123
|
-
function TagRoot({
|
|
124
|
-
className,
|
|
125
|
-
variant = "primary",
|
|
126
|
-
...props
|
|
127
|
-
}) {
|
|
128
|
-
return /* @__PURE__ */ jsx3("div", { className: cx2(tagVariants({ variant }), className), ...props });
|
|
129
|
-
}
|
|
130
|
-
function TagText({
|
|
131
|
-
variant = "label",
|
|
132
|
-
size = "sm-1x",
|
|
133
|
-
weight = "medium",
|
|
134
|
-
className,
|
|
135
|
-
...props
|
|
136
|
-
}) {
|
|
137
|
-
return /* @__PURE__ */ jsx3(
|
|
138
|
-
Typography,
|
|
139
|
-
{
|
|
140
|
-
className: cx2(className, "truncate"),
|
|
141
|
-
size,
|
|
142
|
-
variant,
|
|
143
|
-
weight,
|
|
144
|
-
...props
|
|
145
|
-
}
|
|
146
|
-
);
|
|
147
|
-
}
|
|
148
|
-
function TagIcon({ className, ...props }) {
|
|
149
|
-
return /* @__PURE__ */ jsx3(
|
|
150
|
-
Icon,
|
|
151
|
-
{
|
|
152
|
-
className: (cx2(
|
|
153
|
-
"text-size-body-md",
|
|
154
|
-
"group-data-[variant=primary]:text-primary-label-idle",
|
|
155
|
-
"group-data-[variant=danger]:text-danger-label-idle",
|
|
156
|
-
"group-data-[variant=neutral]:text-icon-neutral-3"
|
|
157
|
-
), className),
|
|
158
|
-
...props
|
|
159
|
-
}
|
|
160
|
-
);
|
|
161
|
-
}
|
|
162
|
-
function TagClose({
|
|
163
|
-
className,
|
|
164
|
-
children = /* @__PURE__ */ jsx3(TagIcon, { name: "close" }),
|
|
165
|
-
...props
|
|
166
|
-
}) {
|
|
167
|
-
return /* @__PURE__ */ jsx3(
|
|
168
|
-
"button",
|
|
169
|
-
{
|
|
170
|
-
className: cx2(
|
|
171
|
-
className,
|
|
172
|
-
"cursor-pointer bg-inherit",
|
|
173
|
-
"invisible items-center justify-center group-hover/tag:visible",
|
|
174
|
-
"absolute top-0 right-0",
|
|
175
|
-
"h-large-2x w-large-2x rounded-circle",
|
|
176
|
-
"transition-[visibility] duration-200"
|
|
177
|
-
),
|
|
178
|
-
type: "button",
|
|
179
|
-
...props,
|
|
180
|
-
children
|
|
181
|
-
}
|
|
182
|
-
);
|
|
183
|
-
}
|
|
184
|
-
export {
|
|
185
|
-
TagClose,
|
|
186
|
-
TagIcon,
|
|
187
|
-
TagRoot,
|
|
188
|
-
TagText
|
|
189
|
-
};
|
|
1
|
+
import {a}from'../chunk-EIG6CBTQ.js';import {b}from'../chunk-SHHXKVVR.js';import {cva,cx}from'@xjur-ui/util';import'react';import {jsx}from'react/jsx-runtime';var d=cva(["group/tag relative h-large-2x w-fit rounded-small-1x px-small py-none flex items-center gap-small_1x-alt","transition-all duration-200"],{variants:{variant:{primary:"bg-primary-alt-idle text-primary-label-idle hover:bg-primary-alt-hover",danger:"bg-danger-alt-idle text-danger-label-idle hover:bg-danger-alt-hover",neutral:"bg-layer-1-idle text-neutral-dark hover:bg-layer-1-hover"}},defaultVariants:{variant:"primary"}});function c({className:a,variant:t="primary",disabled:e=false,...n}){return jsx("div",{className:cx(d({variant:t}),a),"data-disabled":e,...n})}function v({variant:a$1="label",size:t="sm-1x",weight:e="medium",className:n,...p}){return jsx(a,{className:cx(n,"truncate"),size:t,variant:a$1,weight:e,...p})}function m({className:a,...t}){return jsx(b,{className:(cx("text-size-body-md","group-data-[variant=primary]:text-primary-label-idle","group-data-[variant=danger]:text-danger-label-idle","group-data-[variant=neutral]:text-icon-neutral-3"),a),...t})}function x({className:a,children:t=jsx(m,{name:"close"}),...e}){return jsx("button",{className:cx(a,"cursor-pointer bg-inherit","invisible items-center justify-center group-hover/tag:data-[disabled=false]:visible","absolute top-0 right-0","h-large-2x w-large-2x rounded-circle","transition-[visibility] duration-200"),type:"button",...e,children:t})}export{x as TagClose,m as TagIcon,c as TagRoot,v as TagText};//# sourceMappingURL=tag.js.map
|
|
2
|
+
//# sourceMappingURL=tag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/tag.tsx"],"names":["tagVariants","cva","TagRoot","className","variant","disabled","props","jsx","cx","TagText","size","weight","Typography","TagIcon","Icon","TagClose","children"],"mappings":"+JAKA,IAAMA,CAAAA,CAAcC,GAAAA,CAClB,CACE,0GAAA,CACA,6BACF,EACA,CACE,QAAA,CAAU,CACR,OAAA,CAAS,CACP,OAAA,CACE,wEAAA,CACF,OACE,qEAAA,CACF,OAAA,CAAS,0DACX,CACF,CAAA,CACA,eAAA,CAAiB,CACf,QAAS,SACX,CACF,CACF,CAAA,CAEO,SAASC,EAAQ,CACtB,SAAA,CAAAC,CAAAA,CACA,OAAA,CAAAC,EAAU,SAAA,CACV,QAAA,CAAAC,CAAAA,CAAW,KAAA,CACX,GAAGC,CACL,CAAA,CACkE,CAChE,OACEC,IAAC,KAAA,CAAA,CACC,SAAA,CAAWC,GAAGR,CAAAA,CAAY,CAAE,QAAAI,CAAQ,CAAC,CAAA,CAAGD,CAAS,EACjD,eAAA,CAAeE,CAAAA,CACd,GAAGC,CAAAA,CACN,CAEJ,CAEO,SAASG,CAAAA,CAAQ,CACtB,OAAA,CAAAL,IAAU,OAAA,CACV,IAAA,CAAAM,EAAO,OAAA,CACP,MAAA,CAAAC,EAAS,QAAA,CACT,SAAA,CAAAR,CAAAA,CACA,GAAGG,CACL,CAAA,CAAsC,CACpC,OACEC,GAAAA,CAACK,EAAA,CACC,SAAA,CAAWJ,EAAAA,CAAGL,CAAAA,CAAW,UAAU,CAAA,CACnC,IAAA,CAAMO,EACN,OAAA,CAASN,GAAAA,CACT,OAAQO,CAAAA,CACP,GAAGL,CAAAA,CACN,CAEJ,CAEO,SAASO,CAAAA,CAAQ,CAAE,SAAA,CAAAV,CAAAA,CAAW,GAAGG,CAAM,CAAA,CAAgC,CAC5E,OACEC,IAACO,CAAAA,CAAA,CACC,WACGN,EAAAA,CACC,mBAAA,CACA,uDACA,oDAAA,CACA,kDACF,CAAA,CACAL,CAAAA,CAAAA,CAED,GAAGG,CAAAA,CACN,CAEJ,CAEO,SAASS,EAAS,CACvB,SAAA,CAAAZ,CAAAA,CACA,QAAA,CAAAa,EAAWT,GAAAA,CAACM,CAAAA,CAAA,CAAQ,IAAA,CAAK,OAAA,CAAQ,EACjC,GAAGP,CACL,CAAA,CAAmD,CACjD,OACEC,GAAAA,CAAC,QAAA,CAAA,CACC,UAAWC,EAAAA,CACTL,CAAAA,CACA,4BACA,qFAAA,CACA,wBAAA,CACA,sCAAA,CACA,sCACF,EACA,IAAA,CAAK,QAAA,CACJ,GAAGG,CAAAA,CAEH,QAAA,CAAAU,EACH,CAEJ","file":"tag.js","sourcesContent":["import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'\nimport { type ComponentProps } from 'react'\nimport { Typography } from './typography'\nimport { Icon, type IconType } from './icon'\n\nconst tagVariants = cva(\n [\n 'group/tag relative h-large-2x w-fit rounded-small-1x px-small py-none flex items-center gap-small_1x-alt',\n 'transition-all duration-200'\n ],\n {\n variants: {\n variant: {\n primary:\n 'bg-primary-alt-idle text-primary-label-idle hover:bg-primary-alt-hover',\n danger:\n 'bg-danger-alt-idle text-danger-label-idle hover:bg-danger-alt-hover',\n neutral: 'bg-layer-1-idle text-neutral-dark hover:bg-layer-1-hover'\n }\n },\n defaultVariants: {\n variant: 'primary'\n }\n }\n)\n\nexport function TagRoot({\n className,\n variant = 'primary',\n disabled = false,\n ...props\n}: ComponentProps<'div'> &\n ClassVariantProps<typeof tagVariants> & { disabled?: boolean }) {\n return (\n <div\n className={cx(tagVariants({ variant }), className)}\n data-disabled={disabled}\n {...props}\n />\n )\n}\n\nexport function TagText({\n variant = 'label',\n size = 'sm-1x',\n weight = 'medium',\n className,\n ...props\n}: ComponentProps<typeof Typography>) {\n return (\n <Typography\n className={cx(className, 'truncate')}\n size={size}\n variant={variant}\n weight={weight}\n {...props}\n />\n )\n}\n\nexport function TagIcon({ className, ...props }: ComponentProps<typeof Icon>) {\n return (\n <Icon\n className={\n (cx(\n 'text-size-body-md',\n 'group-data-[variant=primary]:text-primary-label-idle',\n 'group-data-[variant=danger]:text-danger-label-idle',\n 'group-data-[variant=neutral]:text-icon-neutral-3'\n ),\n className)\n }\n {...props}\n />\n )\n}\n\nexport function TagClose({\n className,\n children = <TagIcon name=\"close\" />,\n ...props\n}: ComponentProps<'button'> & { name?: IconType }) {\n return (\n <button\n className={cx(\n className,\n 'cursor-pointer bg-inherit',\n 'invisible items-center justify-center group-hover/tag:data-[disabled=false]:visible',\n 'absolute top-0 right-0',\n 'h-large-2x w-large-2x rounded-circle',\n 'transition-[visibility] duration-200'\n )}\n type=\"button\"\n {...props}\n >\n {children}\n </button>\n )\n}\n"]}
|
|
@@ -1,58 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { cx } from "@xjur-ui/util";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
function TooltipProvider({
|
|
6
|
-
delayDuration = 0,
|
|
7
|
-
...props
|
|
8
|
-
}) {
|
|
9
|
-
return /* @__PURE__ */ jsx(
|
|
10
|
-
TooltipPrimitive.Provider,
|
|
11
|
-
{
|
|
12
|
-
"data-slot": "tooltip-provider",
|
|
13
|
-
delayDuration,
|
|
14
|
-
...props
|
|
15
|
-
}
|
|
16
|
-
);
|
|
17
|
-
}
|
|
18
|
-
function Tooltip({
|
|
19
|
-
...props
|
|
20
|
-
}) {
|
|
21
|
-
return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
|
|
22
|
-
}
|
|
23
|
-
function TooltipTrigger({
|
|
24
|
-
...props
|
|
25
|
-
}) {
|
|
26
|
-
return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
27
|
-
}
|
|
28
|
-
function TooltipContent({
|
|
29
|
-
className,
|
|
30
|
-
sideOffset = 1,
|
|
31
|
-
variant = "simple",
|
|
32
|
-
children,
|
|
33
|
-
...props
|
|
34
|
-
}) {
|
|
35
|
-
return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
36
|
-
TooltipPrimitive.Content,
|
|
37
|
-
{
|
|
38
|
-
className: cx(
|
|
39
|
-
"text-size-body-sm text-balance",
|
|
40
|
-
"data-[variant=simple]:bg-alt-2 data-[variant=simple]:text-neutral-label data-[variant=simple]:rounded-small-1x data-[variant=simple]:px-small data-[variant=simple]:py-small-1x",
|
|
41
|
-
"data-[variant=rich]:bg-layer-2-idle data-[variant=rich]:text-neutral-dark data-[variant=rich]:rounded-small data-[variant=rich]:border-border-layer-2 data-[variant=rich]:p-large data-[variant=rich]:border",
|
|
42
|
-
"animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin)",
|
|
43
|
-
className
|
|
44
|
-
),
|
|
45
|
-
"data-slot": "tooltip-content",
|
|
46
|
-
"data-variant": variant,
|
|
47
|
-
sideOffset,
|
|
48
|
-
...props,
|
|
49
|
-
children
|
|
50
|
-
}
|
|
51
|
-
) });
|
|
52
|
-
}
|
|
53
|
-
export {
|
|
54
|
-
Tooltip,
|
|
55
|
-
TooltipContent,
|
|
56
|
-
TooltipProvider,
|
|
57
|
-
TooltipTrigger
|
|
58
|
-
};
|
|
1
|
+
export{b as Tooltip,d as TooltipContent,a as TooltipProvider,c as TooltipTrigger}from'../chunk-NELCN6E2.js';//# sourceMappingURL=tooltip.js.map
|
|
2
|
+
//# sourceMappingURL=tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"tooltip.js"}
|
|
@@ -1,78 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { cva } from "@xjur-ui/util";
|
|
4
|
-
import { memo } from "react";
|
|
5
|
-
import { jsx } from "react/jsx-runtime";
|
|
6
|
-
var typographyVariants = cva("", {
|
|
7
|
-
variants: {
|
|
8
|
-
variant: {
|
|
9
|
-
body: "",
|
|
10
|
-
label: "",
|
|
11
|
-
title: "",
|
|
12
|
-
headline: ""
|
|
13
|
-
},
|
|
14
|
-
size: {
|
|
15
|
-
"sm-2x": "",
|
|
16
|
-
"sm-1x": "",
|
|
17
|
-
sm: "",
|
|
18
|
-
md: "",
|
|
19
|
-
lg: ""
|
|
20
|
-
},
|
|
21
|
-
weight: {
|
|
22
|
-
thin: "font-thin",
|
|
23
|
-
extraLight: "font-extralight",
|
|
24
|
-
light: "font-light",
|
|
25
|
-
normal: "font-normal",
|
|
26
|
-
medium: "font-medium",
|
|
27
|
-
semibold: "font-semibold",
|
|
28
|
-
bold: "font-bold",
|
|
29
|
-
extraBold: "font-extrabold",
|
|
30
|
-
black: "font-black"
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
compoundVariants: [
|
|
34
|
-
{ variant: "body", size: "sm-1x", class: "text-size-body-sm-1x" },
|
|
35
|
-
{ variant: "body", size: "sm", class: "text-size-body-sm" },
|
|
36
|
-
{ variant: "body", size: "md", class: "text-size-body-md" },
|
|
37
|
-
{ variant: "body", size: "lg", class: "text-size-body-lg" },
|
|
38
|
-
{ variant: "label", size: "sm-2x", class: "text-size-label-sm-2x" },
|
|
39
|
-
{ variant: "label", size: "sm-1x", class: "text-size-label-sm-1x" },
|
|
40
|
-
{ variant: "label", size: "sm", class: "text-size-label-sm" },
|
|
41
|
-
{ variant: "label", size: "md", class: "text-size-label-md" },
|
|
42
|
-
{ variant: "label", size: "lg", class: "text-size-label-lg" },
|
|
43
|
-
{ variant: "title", size: "sm", class: "text-size-title-sm" },
|
|
44
|
-
{ variant: "title", size: "md", class: "text-size-title-md" },
|
|
45
|
-
{ variant: "title", size: "lg", class: "text-size-title-lg" },
|
|
46
|
-
{ variant: "headline", size: "sm", class: "text-size-headline-sm" },
|
|
47
|
-
{ variant: "headline", size: "md", class: "text-size-headline-md" },
|
|
48
|
-
{ variant: "headline", size: "lg", class: "text-size-headline-lg" }
|
|
49
|
-
],
|
|
50
|
-
defaultVariants: {
|
|
51
|
-
variant: "body",
|
|
52
|
-
size: "md",
|
|
53
|
-
weight: "normal"
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
var Typography = memo(
|
|
57
|
-
({
|
|
58
|
-
variant,
|
|
59
|
-
size,
|
|
60
|
-
weight,
|
|
61
|
-
asChild,
|
|
62
|
-
className,
|
|
63
|
-
...props
|
|
64
|
-
}) => {
|
|
65
|
-
const Component = asChild ? Slot : "span";
|
|
66
|
-
return /* @__PURE__ */ jsx(
|
|
67
|
-
Component,
|
|
68
|
-
{
|
|
69
|
-
className: typographyVariants({ variant, size, weight, className }),
|
|
70
|
-
...props
|
|
71
|
-
}
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
);
|
|
75
|
-
Typography.displayName = "Typography";
|
|
76
|
-
export {
|
|
77
|
-
Typography
|
|
78
|
-
};
|
|
1
|
+
export{a as Typography}from'../chunk-EIG6CBTQ.js';//# sourceMappingURL=typography.js.map
|
|
2
|
+
//# sourceMappingURL=typography.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"typography.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|