@popgrids/ui 0.0.19 → 0.0.21
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/dist/banner-notification.cjs +54 -0
- package/dist/banner-notification.cjs.map +1 -0
- package/dist/banner-notification.d.cts +24 -0
- package/dist/banner-notification.d.ts +24 -0
- package/dist/banner-notification.js +52 -0
- package/dist/banner-notification.js.map +1 -0
- package/dist/button-link.cjs +110 -0
- package/dist/button-link.cjs.map +1 -0
- package/dist/button-link.d.cts +28 -0
- package/dist/button-link.d.ts +28 -0
- package/dist/button-link.js +108 -0
- package/dist/button-link.js.map +1 -0
- package/dist/button.cjs +1 -1
- package/dist/button.cjs.map +1 -1
- package/dist/button.js +1 -1
- package/dist/button.js.map +1 -1
- package/dist/dialog.cjs +439 -39
- package/dist/dialog.cjs.map +1 -1
- package/dist/dialog.d.cts +25 -11
- package/dist/dialog.d.ts +25 -11
- package/dist/dialog.js +439 -39
- package/dist/dialog.js.map +1 -1
- package/dist/index.cjs +223 -47
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -4
- package/dist/index.d.ts +6 -4
- package/dist/index.js +221 -47
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +1 -1
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +1 -1
- package/dist/input.js.map +1 -1
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/tag.cjs +7 -4
- package/dist/tag.cjs.map +1 -1
- package/dist/tag.d.cts +5 -1
- package/dist/tag.d.ts +5 -1
- package/dist/tag.js +8 -5
- package/dist/tag.js.map +1 -1
- package/dist/theme.css +8 -4
- package/package.json +41 -21
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var tailwindMerge = require('tailwind-merge');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
// src/components/banner-notification/banner-notification.tsx
|
|
9
|
+
function cn(...inputs) {
|
|
10
|
+
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
11
|
+
}
|
|
12
|
+
var bannerNotificationVariants = classVarianceAuthority.cva(
|
|
13
|
+
"flex items-start gap-3 rounded-[6px] px-4 py-3 w-full w-[360px] border-border border",
|
|
14
|
+
{
|
|
15
|
+
variants: {
|
|
16
|
+
variant: {
|
|
17
|
+
info: ""
|
|
18
|
+
},
|
|
19
|
+
theme: {
|
|
20
|
+
error: "bg-warning-100 dark:bg-warning-200/16",
|
|
21
|
+
highlight: "bg-success-50 dark:bg-white/0"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
defaultVariants: {
|
|
25
|
+
variant: "info",
|
|
26
|
+
theme: "highlight"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
function BannerNotification({
|
|
31
|
+
className,
|
|
32
|
+
children,
|
|
33
|
+
variant = "info",
|
|
34
|
+
theme = "highlight",
|
|
35
|
+
image,
|
|
36
|
+
...props
|
|
37
|
+
}) {
|
|
38
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
39
|
+
"div",
|
|
40
|
+
{
|
|
41
|
+
"data-slot": "banner-notification",
|
|
42
|
+
className: cn(bannerNotificationVariants({ variant, theme }), className),
|
|
43
|
+
...props,
|
|
44
|
+
children: [
|
|
45
|
+
image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-start [&>svg]:size-5", children: image }),
|
|
46
|
+
children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 text-sm", children })
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
exports.BannerNotification = BannerNotification;
|
|
53
|
+
//# sourceMappingURL=banner-notification.cjs.map
|
|
54
|
+
//# sourceMappingURL=banner-notification.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts","../src/components/banner-notification/banner-notification.tsx"],"names":["twMerge","clsx","cva","jsxs","jsx"],"mappings":";;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACAA,IAAM,0BAAA,GAA6BC,0BAAA;AAAA,EACjC,sFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM;AAAA,OACR;AAAA,MACA,KAAA,EAAO;AAAA,QACL,KAAA,EAAO,uCAAA;AAAA,QACP,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,MAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT;AAEJ,CAAA;AAEA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,MAAA;AAAA,EACV,KAAA,GAAQ,WAAA;AAAA,EACR,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA8E;AAC5E,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,qBAAA;AAAA,MACV,SAAA,EAAW,GAAG,0BAAA,CAA2B,EAAE,SAAS,KAAA,EAAO,GAAG,SAAS,CAAA;AAAA,MACtE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,KAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,QAED,YAAY,IAAA,oBACXA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BAA0B,QAAA,EAAS;AAAA;AAAA;AAAA,GAEtD;AAEJ","file":"banner-notification.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { BannerNotificationProps } from \"./types\";\n\nconst bannerNotificationVariants = cva(\n \"flex items-start gap-3 rounded-[6px] px-4 py-3 w-full w-[360px] border-border border\",\n {\n variants: {\n variant: {\n info: \"\",\n },\n theme: {\n error: \"bg-warning-100 dark:bg-warning-200/16\",\n highlight: \"bg-success-50 dark:bg-white/0\",\n },\n },\n defaultVariants: {\n variant: \"info\",\n theme: \"highlight\",\n },\n },\n);\n\nfunction BannerNotification({\n className,\n children,\n variant = \"info\",\n theme = \"highlight\",\n image,\n ...props\n}: BannerNotificationProps & VariantProps<typeof bannerNotificationVariants>) {\n return (\n <div\n data-slot=\"banner-notification\"\n className={cn(bannerNotificationVariants({ variant, theme }), className)}\n {...props}\n >\n {image && (\n <div className=\"flex shrink-0 items-start [&>svg]:size-5\">\n {image}\n </div>\n )}\n {children != null && (\n <div className=\"min-w-0 flex-1 text-sm\">{children}</div>\n )}\n </div>\n );\n}\n\nexport { BannerNotification };\n"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
|
|
6
|
+
type BannerNotificationVariant = "info";
|
|
7
|
+
|
|
8
|
+
type BannerNotificationTheme = "error" | "highlight";
|
|
9
|
+
|
|
10
|
+
interface BannerNotificationProps {
|
|
11
|
+
className?: string;
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
variant?: BannerNotificationVariant;
|
|
14
|
+
theme?: BannerNotificationTheme;
|
|
15
|
+
image?: React.ReactElement;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
declare const bannerNotificationVariants: (props?: ({
|
|
19
|
+
variant?: "info" | null | undefined;
|
|
20
|
+
theme?: "error" | "highlight" | null | undefined;
|
|
21
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
22
|
+
declare function BannerNotification({ className, children, variant, theme, image, ...props }: BannerNotificationProps & VariantProps<typeof bannerNotificationVariants>): react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
export { BannerNotification, type BannerNotificationProps, type BannerNotificationTheme, type BannerNotificationVariant };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
|
|
6
|
+
type BannerNotificationVariant = "info";
|
|
7
|
+
|
|
8
|
+
type BannerNotificationTheme = "error" | "highlight";
|
|
9
|
+
|
|
10
|
+
interface BannerNotificationProps {
|
|
11
|
+
className?: string;
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
variant?: BannerNotificationVariant;
|
|
14
|
+
theme?: BannerNotificationTheme;
|
|
15
|
+
image?: React.ReactElement;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
declare const bannerNotificationVariants: (props?: ({
|
|
19
|
+
variant?: "info" | null | undefined;
|
|
20
|
+
theme?: "error" | "highlight" | null | undefined;
|
|
21
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
22
|
+
declare function BannerNotification({ className, children, variant, theme, image, ...props }: BannerNotificationProps & VariantProps<typeof bannerNotificationVariants>): react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
export { BannerNotification, type BannerNotificationProps, type BannerNotificationTheme, type BannerNotificationVariant };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { cva } from 'class-variance-authority';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
// src/components/banner-notification/banner-notification.tsx
|
|
7
|
+
function cn(...inputs) {
|
|
8
|
+
return twMerge(clsx(inputs));
|
|
9
|
+
}
|
|
10
|
+
var bannerNotificationVariants = cva(
|
|
11
|
+
"flex items-start gap-3 rounded-[6px] px-4 py-3 w-full w-[360px] border-border border",
|
|
12
|
+
{
|
|
13
|
+
variants: {
|
|
14
|
+
variant: {
|
|
15
|
+
info: ""
|
|
16
|
+
},
|
|
17
|
+
theme: {
|
|
18
|
+
error: "bg-warning-100 dark:bg-warning-200/16",
|
|
19
|
+
highlight: "bg-success-50 dark:bg-white/0"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
defaultVariants: {
|
|
23
|
+
variant: "info",
|
|
24
|
+
theme: "highlight"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
function BannerNotification({
|
|
29
|
+
className,
|
|
30
|
+
children,
|
|
31
|
+
variant = "info",
|
|
32
|
+
theme = "highlight",
|
|
33
|
+
image,
|
|
34
|
+
...props
|
|
35
|
+
}) {
|
|
36
|
+
return /* @__PURE__ */ jsxs(
|
|
37
|
+
"div",
|
|
38
|
+
{
|
|
39
|
+
"data-slot": "banner-notification",
|
|
40
|
+
className: cn(bannerNotificationVariants({ variant, theme }), className),
|
|
41
|
+
...props,
|
|
42
|
+
children: [
|
|
43
|
+
image && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-start [&>svg]:size-5", children: image }),
|
|
44
|
+
children != null && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 text-sm", children })
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export { BannerNotification };
|
|
51
|
+
//# sourceMappingURL=banner-notification.js.map
|
|
52
|
+
//# sourceMappingURL=banner-notification.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts","../src/components/banner-notification/banner-notification.tsx"],"names":[],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACAA,IAAM,0BAAA,GAA6B,GAAA;AAAA,EACjC,sFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM;AAAA,OACR;AAAA,MACA,KAAA,EAAO;AAAA,QACL,KAAA,EAAO,uCAAA;AAAA,QACP,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,MAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT;AAEJ,CAAA;AAEA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,MAAA;AAAA,EACV,KAAA,GAAQ,WAAA;AAAA,EACR,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA8E;AAC5E,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,qBAAA;AAAA,MACV,SAAA,EAAW,GAAG,0BAAA,CAA2B,EAAE,SAAS,KAAA,EAAO,GAAG,SAAS,CAAA;AAAA,MACtE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,KAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,QAED,YAAY,IAAA,oBACX,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BAA0B,QAAA,EAAS;AAAA;AAAA;AAAA,GAEtD;AAEJ","file":"banner-notification.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { BannerNotificationProps } from \"./types\";\n\nconst bannerNotificationVariants = cva(\n \"flex items-start gap-3 rounded-[6px] px-4 py-3 w-full w-[360px] border-border border\",\n {\n variants: {\n variant: {\n info: \"\",\n },\n theme: {\n error: \"bg-warning-100 dark:bg-warning-200/16\",\n highlight: \"bg-success-50 dark:bg-white/0\",\n },\n },\n defaultVariants: {\n variant: \"info\",\n theme: \"highlight\",\n },\n },\n);\n\nfunction BannerNotification({\n className,\n children,\n variant = \"info\",\n theme = \"highlight\",\n image,\n ...props\n}: BannerNotificationProps & VariantProps<typeof bannerNotificationVariants>) {\n return (\n <div\n data-slot=\"banner-notification\"\n className={cn(bannerNotificationVariants({ variant, theme }), className)}\n {...props}\n >\n {image && (\n <div className=\"flex shrink-0 items-start [&>svg]:size-5\">\n {image}\n </div>\n )}\n {children != null && (\n <div className=\"min-w-0 flex-1 text-sm\">{children}</div>\n )}\n </div>\n );\n}\n\nexport { BannerNotification };\n"]}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var tailwindMerge = require('tailwind-merge');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
function cn(...inputs) {
|
|
9
|
+
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
10
|
+
}
|
|
11
|
+
var buttonLinkVariants = classVarianceAuthority.cva(
|
|
12
|
+
"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all rounded-xs -translate-y-px border-y border-x-4 border-transparent [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none no-underline cursor-pointer",
|
|
13
|
+
{
|
|
14
|
+
variants: {
|
|
15
|
+
hasLeading: {
|
|
16
|
+
false: null,
|
|
17
|
+
true: null
|
|
18
|
+
},
|
|
19
|
+
hasTrailing: {
|
|
20
|
+
false: null,
|
|
21
|
+
true: null
|
|
22
|
+
},
|
|
23
|
+
primary: {
|
|
24
|
+
false: null,
|
|
25
|
+
true: null
|
|
26
|
+
},
|
|
27
|
+
size: {
|
|
28
|
+
sm: "text-sm [&_svg:not([class*='size-'])]:size-4",
|
|
29
|
+
md: "text-sm [&_svg:not([class*='size-'])]:size-[18px]",
|
|
30
|
+
lg: "text-base [&_svg:not([class*='size-'])]:size-5"
|
|
31
|
+
},
|
|
32
|
+
theme: {
|
|
33
|
+
default: "",
|
|
34
|
+
white: "text-white hover:bg-white/16 focus-visible:bg-blue-dark-600 focus-visible:text-white",
|
|
35
|
+
black: "text-black hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-black focus-visible:text-white"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
defaultVariants: {
|
|
39
|
+
primary: false,
|
|
40
|
+
size: "md",
|
|
41
|
+
theme: "default"
|
|
42
|
+
},
|
|
43
|
+
compoundVariants: [
|
|
44
|
+
{
|
|
45
|
+
theme: "default",
|
|
46
|
+
primary: false,
|
|
47
|
+
class: "text-grayscale-500 hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-white"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
theme: "default",
|
|
51
|
+
primary: true,
|
|
52
|
+
class: "text-foreground hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-white"
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
function ButtonLink({
|
|
58
|
+
children,
|
|
59
|
+
className,
|
|
60
|
+
leading,
|
|
61
|
+
primary = false,
|
|
62
|
+
size = "md",
|
|
63
|
+
theme = "default",
|
|
64
|
+
trailing,
|
|
65
|
+
href,
|
|
66
|
+
...props
|
|
67
|
+
}) {
|
|
68
|
+
const sharedClassName = cn(
|
|
69
|
+
buttonLinkVariants({
|
|
70
|
+
hasLeading: !!leading,
|
|
71
|
+
hasTrailing: !!trailing,
|
|
72
|
+
primary,
|
|
73
|
+
size,
|
|
74
|
+
theme
|
|
75
|
+
}),
|
|
76
|
+
className
|
|
77
|
+
);
|
|
78
|
+
const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
79
|
+
leading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-inherit [&_svg]:size-inherit", children: leading }),
|
|
80
|
+
children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate relative", children }),
|
|
81
|
+
trailing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-inherit [&_svg]:size-inherit", children: trailing })
|
|
82
|
+
] });
|
|
83
|
+
if (href != null) {
|
|
84
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
85
|
+
"a",
|
|
86
|
+
{
|
|
87
|
+
"data-slot": "button-link",
|
|
88
|
+
className: sharedClassName,
|
|
89
|
+
href,
|
|
90
|
+
...props,
|
|
91
|
+
children: content
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
const { type, ...buttonProps } = props;
|
|
96
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
97
|
+
"button",
|
|
98
|
+
{
|
|
99
|
+
"data-slot": "button-link",
|
|
100
|
+
className: sharedClassName,
|
|
101
|
+
type: type ?? "button",
|
|
102
|
+
...buttonProps,
|
|
103
|
+
children: content
|
|
104
|
+
}
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
exports.ButtonLink = ButtonLink;
|
|
109
|
+
//# sourceMappingURL=button-link.cjs.map
|
|
110
|
+
//# sourceMappingURL=button-link.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts","../src/components/button-link/button-link.tsx"],"names":["twMerge","clsx","cva","jsxs","Fragment","jsx"],"mappings":"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","file":"button-link.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { ButtonLinkProps } from \"./types\";\n\nconst buttonLinkVariants = cva(\n \"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all rounded-xs -translate-y-px border-y border-x-4 border-transparent [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none no-underline cursor-pointer\",\n {\n variants: {\n hasLeading: {\n false: null,\n true: null,\n },\n hasTrailing: {\n false: null,\n true: null,\n },\n primary: {\n false: null,\n true: null,\n },\n size: {\n sm: \"text-sm [&_svg:not([class*='size-'])]:size-4\",\n md: \"text-sm [&_svg:not([class*='size-'])]:size-[18px]\",\n lg: \"text-base [&_svg:not([class*='size-'])]:size-5\",\n },\n theme: {\n default: \"\",\n white: \"text-white hover:bg-white/16 focus-visible:bg-blue-dark-600 focus-visible:text-white\",\n black: \"text-black hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-black focus-visible:text-white\",\n },\n },\n defaultVariants: {\n primary: false,\n size: \"md\",\n theme: \"default\",\n },\n compoundVariants: [\n {\n theme: \"default\",\n primary: false,\n class:\n \"text-grayscale-500 hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-white\",\n },\n {\n theme: \"default\",\n primary: true,\n class:\n \"text-foreground hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-white\",\n },\n ],\n },\n);\n\nfunction ButtonLink({\n children,\n className,\n leading,\n primary = false,\n size = \"md\",\n theme = \"default\",\n trailing,\n href,\n ...props\n}: ButtonLinkProps) {\n const sharedClassName = cn(\n buttonLinkVariants({\n hasLeading: !!leading,\n hasTrailing: !!trailing,\n primary,\n size,\n theme,\n }),\n className,\n );\n\n const content = (\n <>\n {leading && (\n <div className=\"flex items-center justify-center text-inherit [&_svg]:size-inherit\">\n {leading}\n </div>\n )}\n {children != null && (\n <span className=\"min-w-0 truncate relative\">{children}</span>\n )}\n {trailing && (\n <div className=\"flex items-center justify-center text-inherit [&_svg]:size-inherit\">\n {trailing}\n </div>\n )}\n </>\n );\n\n if (href != null) {\n return (\n <a\n data-slot=\"button-link\"\n className={sharedClassName}\n href={href}\n {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n >\n {content}\n </a>\n );\n }\n\n const { type, ...buttonProps } =\n props as React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n return (\n <button\n data-slot=\"button-link\"\n className={sharedClassName}\n type={type ?? \"button\"}\n {...buttonProps}\n >\n {content}\n </button>\n );\n}\n\nexport { ButtonLink };\n"]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
|
|
4
|
+
type ButtonLinkOwnProps = {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
className?: string;
|
|
7
|
+
leading?: React.ReactNode;
|
|
8
|
+
primary?: boolean;
|
|
9
|
+
size?: "sm" | "md" | "lg";
|
|
10
|
+
theme?: "default" | "white" | "black";
|
|
11
|
+
trailing?: React.ReactNode;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
type ButtonLinkAsAnchorProps = ButtonLinkOwnProps &
|
|
15
|
+
React.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
16
|
+
href: string;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
type ButtonLinkAsButtonProps = ButtonLinkOwnProps &
|
|
20
|
+
React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
21
|
+
href?: undefined;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
type ButtonLinkProps = ButtonLinkAsAnchorProps | ButtonLinkAsButtonProps;
|
|
25
|
+
|
|
26
|
+
declare function ButtonLink({ children, className, leading, primary, size, theme, trailing, href, ...props }: ButtonLinkProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
export { ButtonLink, type ButtonLinkProps };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
|
|
4
|
+
type ButtonLinkOwnProps = {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
className?: string;
|
|
7
|
+
leading?: React.ReactNode;
|
|
8
|
+
primary?: boolean;
|
|
9
|
+
size?: "sm" | "md" | "lg";
|
|
10
|
+
theme?: "default" | "white" | "black";
|
|
11
|
+
trailing?: React.ReactNode;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
type ButtonLinkAsAnchorProps = ButtonLinkOwnProps &
|
|
15
|
+
React.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
16
|
+
href: string;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
type ButtonLinkAsButtonProps = ButtonLinkOwnProps &
|
|
20
|
+
React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
21
|
+
href?: undefined;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
type ButtonLinkProps = ButtonLinkAsAnchorProps | ButtonLinkAsButtonProps;
|
|
25
|
+
|
|
26
|
+
declare function ButtonLink({ children, className, leading, primary, size, theme, trailing, href, ...props }: ButtonLinkProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
export { ButtonLink, type ButtonLinkProps };
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { cva } from 'class-variance-authority';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
function cn(...inputs) {
|
|
7
|
+
return twMerge(clsx(inputs));
|
|
8
|
+
}
|
|
9
|
+
var buttonLinkVariants = cva(
|
|
10
|
+
"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all rounded-xs -translate-y-px border-y border-x-4 border-transparent [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none no-underline cursor-pointer",
|
|
11
|
+
{
|
|
12
|
+
variants: {
|
|
13
|
+
hasLeading: {
|
|
14
|
+
false: null,
|
|
15
|
+
true: null
|
|
16
|
+
},
|
|
17
|
+
hasTrailing: {
|
|
18
|
+
false: null,
|
|
19
|
+
true: null
|
|
20
|
+
},
|
|
21
|
+
primary: {
|
|
22
|
+
false: null,
|
|
23
|
+
true: null
|
|
24
|
+
},
|
|
25
|
+
size: {
|
|
26
|
+
sm: "text-sm [&_svg:not([class*='size-'])]:size-4",
|
|
27
|
+
md: "text-sm [&_svg:not([class*='size-'])]:size-[18px]",
|
|
28
|
+
lg: "text-base [&_svg:not([class*='size-'])]:size-5"
|
|
29
|
+
},
|
|
30
|
+
theme: {
|
|
31
|
+
default: "",
|
|
32
|
+
white: "text-white hover:bg-white/16 focus-visible:bg-blue-dark-600 focus-visible:text-white",
|
|
33
|
+
black: "text-black hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-black focus-visible:text-white"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
defaultVariants: {
|
|
37
|
+
primary: false,
|
|
38
|
+
size: "md",
|
|
39
|
+
theme: "default"
|
|
40
|
+
},
|
|
41
|
+
compoundVariants: [
|
|
42
|
+
{
|
|
43
|
+
theme: "default",
|
|
44
|
+
primary: false,
|
|
45
|
+
class: "text-grayscale-500 hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-white"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
theme: "default",
|
|
49
|
+
primary: true,
|
|
50
|
+
class: "text-foreground hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-white"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
function ButtonLink({
|
|
56
|
+
children,
|
|
57
|
+
className,
|
|
58
|
+
leading,
|
|
59
|
+
primary = false,
|
|
60
|
+
size = "md",
|
|
61
|
+
theme = "default",
|
|
62
|
+
trailing,
|
|
63
|
+
href,
|
|
64
|
+
...props
|
|
65
|
+
}) {
|
|
66
|
+
const sharedClassName = cn(
|
|
67
|
+
buttonLinkVariants({
|
|
68
|
+
hasLeading: !!leading,
|
|
69
|
+
hasTrailing: !!trailing,
|
|
70
|
+
primary,
|
|
71
|
+
size,
|
|
72
|
+
theme
|
|
73
|
+
}),
|
|
74
|
+
className
|
|
75
|
+
);
|
|
76
|
+
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
77
|
+
leading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-inherit [&_svg]:size-inherit", children: leading }),
|
|
78
|
+
children != null && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate relative", children }),
|
|
79
|
+
trailing && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-inherit [&_svg]:size-inherit", children: trailing })
|
|
80
|
+
] });
|
|
81
|
+
if (href != null) {
|
|
82
|
+
return /* @__PURE__ */ jsx(
|
|
83
|
+
"a",
|
|
84
|
+
{
|
|
85
|
+
"data-slot": "button-link",
|
|
86
|
+
className: sharedClassName,
|
|
87
|
+
href,
|
|
88
|
+
...props,
|
|
89
|
+
children: content
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
const { type, ...buttonProps } = props;
|
|
94
|
+
return /* @__PURE__ */ jsx(
|
|
95
|
+
"button",
|
|
96
|
+
{
|
|
97
|
+
"data-slot": "button-link",
|
|
98
|
+
className: sharedClassName,
|
|
99
|
+
type: type ?? "button",
|
|
100
|
+
...buttonProps,
|
|
101
|
+
children: content
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
export { ButtonLink };
|
|
107
|
+
//# sourceMappingURL=button-link.js.map
|
|
108
|
+
//# sourceMappingURL=button-link.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts","../src/components/button-link/button-link.tsx"],"names":[],"mappings":"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","file":"button-link.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { ButtonLinkProps } from \"./types\";\n\nconst buttonLinkVariants = cva(\n \"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all rounded-xs -translate-y-px border-y border-x-4 border-transparent [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none no-underline cursor-pointer\",\n {\n variants: {\n hasLeading: {\n false: null,\n true: null,\n },\n hasTrailing: {\n false: null,\n true: null,\n },\n primary: {\n false: null,\n true: null,\n },\n size: {\n sm: \"text-sm [&_svg:not([class*='size-'])]:size-4\",\n md: \"text-sm [&_svg:not([class*='size-'])]:size-[18px]\",\n lg: \"text-base [&_svg:not([class*='size-'])]:size-5\",\n },\n theme: {\n default: \"\",\n white: \"text-white hover:bg-white/16 focus-visible:bg-blue-dark-600 focus-visible:text-white\",\n black: \"text-black hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-black focus-visible:text-white\",\n },\n },\n defaultVariants: {\n primary: false,\n size: \"md\",\n theme: \"default\",\n },\n compoundVariants: [\n {\n theme: \"default\",\n primary: false,\n class:\n \"text-grayscale-500 hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-white\",\n },\n {\n theme: \"default\",\n primary: true,\n class:\n \"text-foreground hover:bg-foreground/10 focus-visible:bg-blue-dark-600 focus-visible:text-white\",\n },\n ],\n },\n);\n\nfunction ButtonLink({\n children,\n className,\n leading,\n primary = false,\n size = \"md\",\n theme = \"default\",\n trailing,\n href,\n ...props\n}: ButtonLinkProps) {\n const sharedClassName = cn(\n buttonLinkVariants({\n hasLeading: !!leading,\n hasTrailing: !!trailing,\n primary,\n size,\n theme,\n }),\n className,\n );\n\n const content = (\n <>\n {leading && (\n <div className=\"flex items-center justify-center text-inherit [&_svg]:size-inherit\">\n {leading}\n </div>\n )}\n {children != null && (\n <span className=\"min-w-0 truncate relative\">{children}</span>\n )}\n {trailing && (\n <div className=\"flex items-center justify-center text-inherit [&_svg]:size-inherit\">\n {trailing}\n </div>\n )}\n </>\n );\n\n if (href != null) {\n return (\n <a\n data-slot=\"button-link\"\n className={sharedClassName}\n href={href}\n {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n >\n {content}\n </a>\n );\n }\n\n const { type, ...buttonProps } =\n props as React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n return (\n <button\n data-slot=\"button-link\"\n className={sharedClassName}\n type={type ?? \"button\"}\n {...buttonProps}\n >\n {content}\n </button>\n );\n}\n\nexport { ButtonLink };\n"]}
|
package/dist/button.cjs
CHANGED
|
@@ -240,7 +240,7 @@ var buttonVariants = classVarianceAuthority.cva(
|
|
|
240
240
|
variant: "primary",
|
|
241
241
|
outline: true,
|
|
242
242
|
theme: "base",
|
|
243
|
-
class: "ring ring-foreground bg-background/0 text-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1"
|
|
243
|
+
class: "ring ring-foreground bg-background/0 text-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1"
|
|
244
244
|
},
|
|
245
245
|
{
|
|
246
246
|
variant: "primary",
|
package/dist/button.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/lib/utils.ts","../src/components/loader/loader.tsx","../src/components/button/button.tsx"],"names":["twMerge","clsx","cva","jsx","jsxs","Fragment","ButtonPrimitive"],"mappings":"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","file":"button.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { LoaderProps } from \"./types\";\n\nconst loaderVariants = cva(\"flex shrink-0 items-center justify-center\", {\n variants: {\n theme: {\n default: \"[--loader-foreground:var(--foreground)] [--loader-background:var(--foreground)]\",\n reversed: \"[--loader-foreground:var(--background)] [--loader-background:var(--foreground)]\",\n black:\n \"[--loader-foreground:var(--color-brand-midnight-900)] [--loader-background:var(--color-grayscale-300)]\",\n white:\n \"[--loader-foreground:var(--color-grayscale-300)] [--loader-background:var(--color-brand-midnight-900)]\",\n },\n variant: {\n spinner: \"size-5 motion-reduce:animate-none\",\n loader: \"relative flex h-[13px] w-[23px] motion-reduce:animate-none\",\n },\n },\n defaultVariants: {\n theme: \"default\",\n variant: \"spinner\",\n },\n});\n\nconst spinnerFgVariants = cva(\"\", {\n variants: {\n theme: {\n default: \"fill-foreground opacity-[0.06]\",\n reversed: \"fill-white opacity-10\",\n black: \"fill-black opacity-[0.04]\",\n white: \"fill-white opacity-[0.04]\",\n },\n },\n});\n\nconst spinnerBgVariants = cva(\"\", {\n variants: {\n theme: {\n default: \"fill-foreground\",\n reversed: \"fill-background\",\n black: \"fill-black opacity-[0.98]\",\n white: \"fill-white opacity-[0.98]\",\n },\n },\n});\n\nfunction Loader({\n theme = \"default\",\n variant = \"spinner\",\n className,\n style,\n ...props\n}: LoaderProps) {\n const dotCount = 21;\n\n return (\n <div\n data-slot=\"loader\"\n className={cn(\n loaderVariants({ theme, variant }),\n variant === \"spinner\" && \"animate-spin\",\n className,\n )}\n {...props}\n >\n {variant === \"spinner\" ? (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Loading spinner</title>\n <g clipPath=\"url(#pop_loader_clip_path)\">\n <path\n className={spinnerFgVariants({ theme })}\n d=\"M20 10C20 15.5137 15.5137 20 10 20C4.48628 20 6.78126e-07 15.5137 4.37114e-07 10C1.96101e-07 4.48627 4.48627 3.50301e-07 10 1.09288e-07C15.5137 -1.31724e-07 20 4.48627 20 10ZM2.35294 10C2.35294 14.2196 5.78039 17.6471 10 17.6471C14.2196 17.6471 17.6471 14.2196 17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294C5.78039 2.35294 2.35294 5.78039 2.35294 10Z\"\n />\n <path\n className={spinnerBgVariants({ theme })}\n d=\"M20 10L17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294L10 7.10315e-07C15.5137 4.69302e-07 20 4.48627 20 10Z\"\n />\n </g>\n <defs>\n <clipPath id=\"pop_loader_clip_path\">\n <rect\n width=\"20\"\n height=\"20\"\n fill=\"white\"\n transform=\"translate(8.74228e-07 20) rotate(-90)\"\n />\n </clipPath>\n </defs>\n </svg>\n ) : (\n <>\n {Array.from({ length: dotCount }, (_, index) => {\n const delaySeconds = index * 0.035;\n return (\n // biome-ignore lint/suspicious/noArrayIndexKey: Dots are static and ordered\n <div\n key={index}\n className=\"bg-grayscale-200 dark:bg-grayscale-700 animate-loader-wave absolute top-0 size-[3px] rounded-full motion-reduce:animate-none\"\n style={{\n left: `${index}px`,\n animationDelay: `${delaySeconds}s`,\n }}\n />\n );\n })}\n </>\n )}\n </div>\n );\n}\n\nexport { Loader };\n","\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Loader } from \"../loader\";\nimport { ButtonProps } from \"./types\";\n\nconst buttonVariants = cva(\n \"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none focus-visible:border-ring-3 focus-visible:ring-ring/60 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n align: {\n left: \"justify-start\",\n center: \"justify-center\",\n right: \"justify-end\",\n },\n collapsed: {\n false: null,\n true: \"min-w-10 max-w-10 justify-center\",\n },\n outline: {\n false: null,\n true: \"\",\n },\n hasLeading: {\n false: null,\n },\n theme: {\n base: \"bg-foreground text-background\",\n brand: \"bg-primary-foreground text-primary\",\n error: \"\",\n },\n hasTrailing: {\n false: null,\n },\n variant: {\n default: \"hover:bg-background/90\",\n outline: \"backdrop-blur-lg \",\n primary: \"bg-primary-foreground/0 backdrop-blur-lg text-primary\",\n secondary: \"bg-secondary-foreground/0 backdrop-blur-lg text-secondary\",\n tertiary: \"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]\",\n },\n pill: {\n false: \"rounded-xs\",\n true: \"rounded-full\",\n },\n size: {\n default: \"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-[18px]\",\n lg: \"h-12 min-h-12 text-base [&_svg:not([class*='size-'])]:size-[20px]\",\n },\n },\n defaultVariants: {\n align: \"center\",\n outline: false,\n pill: false,\n size: \"default\",\n theme: \"brand\",\n variant: \"default\",\n },\n compoundVariants: [\n {\n pill: true,\n size: \"default\",\n class: \"min-w-10 min-h-10 px-4\",\n },\n {\n pill: true,\n collapsed: true,\n class: \"max-w-10\",\n },\n {\n pill: true,\n size: \"lg\",\n class: \"min-w-12 min-h-12 px-4\",\n },\n {\n pill: true,\n size: \"lg\",\n collapsed: true,\n class: \"max-w-[54px] max-h-12\",\n },\n {\n collapsed: false,\n size: \"default\",\n align: \"left\",\n pill: false,\n class: \"pr-3 pl-2\",\n },\n {\n align: \"center\",\n collapsed: false,\n size: \"default\",\n pill: false,\n class: \"px-3\",\n },\n {\n hasLeading: true,\n pill: false,\n align: \"left\",\n size: \"default\",\n class: \"pr-3 pl-2\",\n },\n {\n collapsed: false,\n size: \"default\",\n pill: true,\n class: \"px-4\",\n },\n {\n size: \"lg\",\n pill: true,\n collapsed: false,\n class: \"px-4\",\n },\n {\n variant: \"primary\",\n outline: false,\n theme: \"base\",\n class:\n \"bg-foreground text-background hover:ring-2 active:ring active:bg-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background\",\n },\n {\n variant: \"primary\",\n outline: true,\n theme: \"base\",\n class:\n \"ring ring-foreground bg-background/0 text-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1\",\n },\n {\n variant: \"primary\",\n outline: true,\n theme: \"brand\",\n class:\n \"ring ring-primary-foreground bg-background/0 text-primary-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1\",\n },\n {\n variant: \"primary\",\n theme: \"brand\",\n outline: false,\n class:\n \"bg-primary-foreground text-primary hover:bg-primary-foreground hover:text-primary active:bg-primary-foreground active:text-primary focus-visible:bg-primary-foreground focus-visible:text-primary\",\n },\n {\n variant: \"primary\",\n theme: \"error\",\n class: \"bg-destructive text-black\",\n },\n {\n variant: \"secondary\",\n outline: false,\n theme: \"base\",\n class: \"bg-background/0 text-foreground backdrop-blur-lg focus-visible:backdrop-blur-md\",\n },\n {\n variant: \"secondary\",\n outline: true,\n theme: \"base\",\n class:\n \"bg-background/0 text-foreground ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md\",\n },\n {\n variant: \"tertiary\",\n outline: false,\n theme: \"base\",\n class: \"bg-background/0 text-foreground backdrop-blur-lg focus-visible:backdrop-blur-md dark:text-white\",\n },\n {\n variant: \"tertiary\",\n theme: \"error\",\n class: \"bg-transparent backdrop-blur-lg text-error-600\",\n },\n ],\n },\n);\n\nconst tintVariants = cva(\n \"before:content-[''] before:absolute before:inset-0 before:transition-all before:rounded-[inherit] before:pointer-events-none\",\n {\n variants: {\n outline: {\n false: null,\n },\n variant: {\n default: \"\",\n outline: \"\",\n primary:\n \"before:bg-tint-700-reversed/0 hover:before:bg-tint-700-reversed active:before:bg-tint-700-reversed/0 disabled:before:bg-tint-900-default focus-visible:before:bg-tint-700-reversed/0\",\n secondary:\n \"before:bg-tint-900-default hover:before:bg-tint-800-default active:before:bg-tint-900-default disabled:before:bg-tint-900-default focus-visible:before:bg-tint-800-default\",\n tertiary:\n \"before:bg-tint-950-reversed hover:before:bg-tint-900-default active:before:bg-tint-950-reversed disabled:before:bg-tint-950-reversed focus-visible:before:bg-tint-950-reversed\",\n },\n },\n defaultVariants: {\n outline: false,\n variant: \"default\",\n },\n compoundVariants: [\n {\n outline: true,\n variant: \"primary\",\n class:\n \"before:bg-tint-950-reversed hover:before:bg-tint-950-reversed active:before:bg-tint-950-reversed disabled:before:bg-tint-900-default focus-visible:before:bg-tint-950-reversed\",\n },\n {\n outline: true,\n variant: \"secondary\",\n class:\n \"before:bg-tint-950-reversed hover:before:bg-tint-950-reversed active:before:bg-tint-950-reversed disabled:before:bg-tint-900-default focus-visible:before:bg-tint-950-reversed\",\n },\n ],\n },\n);\n\nfunction Button({\n align = \"center\",\n children,\n className,\n collapsed = false,\n leading,\n outline = false,\n pill = false,\n loading = false,\n loadingElement,\n size = \"default\",\n theme = \"brand\",\n trailing,\n variant = \"default\",\n ...props\n}: ButtonProps) {\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={cn(\n buttonVariants({\n variant,\n size,\n align,\n outline,\n collapsed,\n pill,\n className,\n hasLeading: !!leading,\n theme,\n hasTrailing: !!trailing,\n }),\n tintVariants({ variant, outline }),\n )}\n {...props}\n >\n <>\n {loading && (\n loadingElement || <Loader className=\"absolute inset-0 m-auto\" variant=\"spinner\" theme=\"reversed\" />\n )}\n {leading && <div className={cn(\"group-aria-busy/button:opacity-0 transition-opacity\", { \"opacity-0\": loading })}>{leading}</div>}\n {children && (\n <span className={cn(\"min-w-[18px] truncate relative transition-opacity\", { \"opacity-0\": loading })}>\n {children}\n </span>\n )}\n {trailing && (\n <div\n className={cn(\"group-aria-busy/button:opacity-0 transition-opacity\", {\n \"opacity-0\": loading,\n \"absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2\": collapsed,\n })}\n >\n {trailing}\n </div>\n )}\n </>\n </ButtonPrimitive>\n );\n}\n\nexport { Button };\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts","../src/components/loader/loader.tsx","../src/components/button/button.tsx"],"names":["twMerge","clsx","cva","jsx","jsxs","Fragment","ButtonPrimitive"],"mappings":"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","file":"button.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport type { LoaderProps } from \"./types\";\n\nconst loaderVariants = cva(\"flex shrink-0 items-center justify-center\", {\n variants: {\n theme: {\n default: \"[--loader-foreground:var(--foreground)] [--loader-background:var(--foreground)]\",\n reversed: \"[--loader-foreground:var(--background)] [--loader-background:var(--foreground)]\",\n black:\n \"[--loader-foreground:var(--color-brand-midnight-900)] [--loader-background:var(--color-grayscale-300)]\",\n white:\n \"[--loader-foreground:var(--color-grayscale-300)] [--loader-background:var(--color-brand-midnight-900)]\",\n },\n variant: {\n spinner: \"size-5 motion-reduce:animate-none\",\n loader: \"relative flex h-[13px] w-[23px] motion-reduce:animate-none\",\n },\n },\n defaultVariants: {\n theme: \"default\",\n variant: \"spinner\",\n },\n});\n\nconst spinnerFgVariants = cva(\"\", {\n variants: {\n theme: {\n default: \"fill-foreground opacity-[0.06]\",\n reversed: \"fill-white opacity-10\",\n black: \"fill-black opacity-[0.04]\",\n white: \"fill-white opacity-[0.04]\",\n },\n },\n});\n\nconst spinnerBgVariants = cva(\"\", {\n variants: {\n theme: {\n default: \"fill-foreground\",\n reversed: \"fill-background\",\n black: \"fill-black opacity-[0.98]\",\n white: \"fill-white opacity-[0.98]\",\n },\n },\n});\n\nfunction Loader({\n theme = \"default\",\n variant = \"spinner\",\n className,\n style,\n ...props\n}: LoaderProps) {\n const dotCount = 21;\n\n return (\n <div\n data-slot=\"loader\"\n className={cn(\n loaderVariants({ theme, variant }),\n variant === \"spinner\" && \"animate-spin\",\n className,\n )}\n {...props}\n >\n {variant === \"spinner\" ? (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Loading spinner</title>\n <g clipPath=\"url(#pop_loader_clip_path)\">\n <path\n className={spinnerFgVariants({ theme })}\n d=\"M20 10C20 15.5137 15.5137 20 10 20C4.48628 20 6.78126e-07 15.5137 4.37114e-07 10C1.96101e-07 4.48627 4.48627 3.50301e-07 10 1.09288e-07C15.5137 -1.31724e-07 20 4.48627 20 10ZM2.35294 10C2.35294 14.2196 5.78039 17.6471 10 17.6471C14.2196 17.6471 17.6471 14.2196 17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294C5.78039 2.35294 2.35294 5.78039 2.35294 10Z\"\n />\n <path\n className={spinnerBgVariants({ theme })}\n d=\"M20 10L17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294L10 7.10315e-07C15.5137 4.69302e-07 20 4.48627 20 10Z\"\n />\n </g>\n <defs>\n <clipPath id=\"pop_loader_clip_path\">\n <rect\n width=\"20\"\n height=\"20\"\n fill=\"white\"\n transform=\"translate(8.74228e-07 20) rotate(-90)\"\n />\n </clipPath>\n </defs>\n </svg>\n ) : (\n <>\n {Array.from({ length: dotCount }, (_, index) => {\n const delaySeconds = index * 0.035;\n return (\n // biome-ignore lint/suspicious/noArrayIndexKey: Dots are static and ordered\n <div\n key={index}\n className=\"bg-grayscale-200 dark:bg-grayscale-700 animate-loader-wave absolute top-0 size-[3px] rounded-full motion-reduce:animate-none\"\n style={{\n left: `${index}px`,\n animationDelay: `${delaySeconds}s`,\n }}\n />\n );\n })}\n </>\n )}\n </div>\n );\n}\n\nexport { Loader };\n","\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Loader } from \"../loader\";\nimport { ButtonProps } from \"./types\";\n\nconst buttonVariants = cva(\n \"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none focus-visible:border-ring-3 focus-visible:ring-ring/60 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n align: {\n left: \"justify-start\",\n center: \"justify-center\",\n right: \"justify-end\",\n },\n collapsed: {\n false: null,\n true: \"min-w-10 max-w-10 justify-center\",\n },\n outline: {\n false: null,\n true: \"\",\n },\n hasLeading: {\n false: null,\n },\n theme: {\n base: \"bg-foreground text-background\",\n brand: \"bg-primary-foreground text-primary\",\n error: \"\",\n },\n hasTrailing: {\n false: null,\n },\n variant: {\n default: \"hover:bg-background/90\",\n outline: \"backdrop-blur-lg \",\n primary: \"bg-primary-foreground/0 backdrop-blur-lg text-primary\",\n secondary: \"bg-secondary-foreground/0 backdrop-blur-lg text-secondary\",\n tertiary: \"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]\",\n },\n pill: {\n false: \"rounded-xs\",\n true: \"rounded-full\",\n },\n size: {\n default: \"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-[18px]\",\n lg: \"h-12 min-h-12 text-base [&_svg:not([class*='size-'])]:size-[20px]\",\n },\n },\n defaultVariants: {\n align: \"center\",\n outline: false,\n pill: false,\n size: \"default\",\n theme: \"brand\",\n variant: \"default\",\n },\n compoundVariants: [\n {\n pill: true,\n size: \"default\",\n class: \"min-w-10 min-h-10 px-4\",\n },\n {\n pill: true,\n collapsed: true,\n class: \"max-w-10\",\n },\n {\n pill: true,\n size: \"lg\",\n class: \"min-w-12 min-h-12 px-4\",\n },\n {\n pill: true,\n size: \"lg\",\n collapsed: true,\n class: \"max-w-[54px] max-h-12\",\n },\n {\n collapsed: false,\n size: \"default\",\n align: \"left\",\n pill: false,\n class: \"pr-3 pl-2\",\n },\n {\n align: \"center\",\n collapsed: false,\n size: \"default\",\n pill: false,\n class: \"px-3\",\n },\n {\n hasLeading: true,\n pill: false,\n align: \"left\",\n size: \"default\",\n class: \"pr-3 pl-2\",\n },\n {\n collapsed: false,\n size: \"default\",\n pill: true,\n class: \"px-4\",\n },\n {\n size: \"lg\",\n pill: true,\n collapsed: false,\n class: \"px-4\",\n },\n {\n variant: \"primary\",\n outline: false,\n theme: \"base\",\n class:\n \"bg-foreground text-background hover:ring-2 active:ring active:bg-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background\",\n },\n {\n variant: \"primary\",\n outline: true,\n theme: \"base\",\n class:\n \"ring ring-foreground bg-background/0 text-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1\",\n },\n {\n variant: \"primary\",\n outline: true,\n theme: \"brand\",\n class:\n \"ring ring-primary-foreground bg-background/0 text-primary-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1\",\n },\n {\n variant: \"primary\",\n theme: \"brand\",\n outline: false,\n class:\n \"bg-primary-foreground text-primary hover:bg-primary-foreground hover:text-primary active:bg-primary-foreground active:text-primary focus-visible:bg-primary-foreground focus-visible:text-primary\",\n },\n {\n variant: \"primary\",\n theme: \"error\",\n class: \"bg-destructive text-black\",\n },\n {\n variant: \"secondary\",\n outline: false,\n theme: \"base\",\n class: \"bg-background/0 text-foreground backdrop-blur-lg focus-visible:backdrop-blur-md\",\n },\n {\n variant: \"secondary\",\n outline: true,\n theme: \"base\",\n class:\n \"bg-background/0 text-foreground ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md\",\n },\n {\n variant: \"tertiary\",\n outline: false,\n theme: \"base\",\n class: \"bg-background/0 text-foreground backdrop-blur-lg focus-visible:backdrop-blur-md dark:text-white\",\n },\n {\n variant: \"tertiary\",\n theme: \"error\",\n class: \"bg-transparent backdrop-blur-lg text-error-600\",\n },\n ],\n },\n);\n\nconst tintVariants = cva(\n \"before:content-[''] before:absolute before:inset-0 before:transition-all before:rounded-[inherit] before:pointer-events-none\",\n {\n variants: {\n outline: {\n false: null,\n },\n variant: {\n default: \"\",\n outline: \"\",\n primary:\n \"before:bg-tint-700-reversed/0 hover:before:bg-tint-700-reversed active:before:bg-tint-700-reversed/0 disabled:before:bg-tint-900-default focus-visible:before:bg-tint-700-reversed/0\",\n secondary:\n \"before:bg-tint-900-default hover:before:bg-tint-800-default active:before:bg-tint-900-default disabled:before:bg-tint-900-default focus-visible:before:bg-tint-800-default\",\n tertiary:\n \"before:bg-tint-950-reversed hover:before:bg-tint-900-default active:before:bg-tint-950-reversed disabled:before:bg-tint-950-reversed focus-visible:before:bg-tint-950-reversed\",\n },\n },\n defaultVariants: {\n outline: false,\n variant: \"default\",\n },\n compoundVariants: [\n {\n outline: true,\n variant: \"primary\",\n class:\n \"before:bg-tint-950-reversed hover:before:bg-tint-950-reversed active:before:bg-tint-950-reversed disabled:before:bg-tint-900-default focus-visible:before:bg-tint-950-reversed\",\n },\n {\n outline: true,\n variant: \"secondary\",\n class:\n \"before:bg-tint-950-reversed hover:before:bg-tint-950-reversed active:before:bg-tint-950-reversed disabled:before:bg-tint-900-default focus-visible:before:bg-tint-950-reversed\",\n },\n ],\n },\n);\n\nfunction Button({\n align = \"center\",\n children,\n className,\n collapsed = false,\n leading,\n outline = false,\n pill = false,\n loading = false,\n loadingElement,\n size = \"default\",\n theme = \"brand\",\n trailing,\n variant = \"default\",\n ...props\n}: ButtonProps) {\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={cn(\n buttonVariants({\n variant,\n size,\n align,\n outline,\n collapsed,\n pill,\n className,\n hasLeading: !!leading,\n theme,\n hasTrailing: !!trailing,\n }),\n tintVariants({ variant, outline }),\n )}\n {...props}\n >\n <>\n {loading && (\n loadingElement || <Loader className=\"absolute inset-0 m-auto\" variant=\"spinner\" theme=\"reversed\" />\n )}\n {leading && <div className={cn(\"group-aria-busy/button:opacity-0 transition-opacity\", { \"opacity-0\": loading })}>{leading}</div>}\n {children && (\n <span className={cn(\"min-w-[18px] truncate relative transition-opacity\", { \"opacity-0\": loading })}>\n {children}\n </span>\n )}\n {trailing && (\n <div\n className={cn(\"group-aria-busy/button:opacity-0 transition-opacity\", {\n \"opacity-0\": loading,\n \"absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2\": collapsed,\n })}\n >\n {trailing}\n </div>\n )}\n </>\n </ButtonPrimitive>\n );\n}\n\nexport { Button };\n"]}
|
package/dist/button.js
CHANGED
|
@@ -238,7 +238,7 @@ var buttonVariants = cva(
|
|
|
238
238
|
variant: "primary",
|
|
239
239
|
outline: true,
|
|
240
240
|
theme: "base",
|
|
241
|
-
class: "ring ring-foreground bg-background/0 text-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1"
|
|
241
|
+
class: "ring ring-foreground bg-background/0 text-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1"
|
|
242
242
|
},
|
|
243
243
|
{
|
|
244
244
|
variant: "primary",
|