@skybin-tech/nebula-ui 0.0.11 → 0.0.13
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/cjs/components/Button/Button.cjs +32 -38
- package/dist/cjs/components/Button/Button.cjs.map +1 -1
- package/dist/cjs/index.cjs +2 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/primitives/button.cjs +66 -0
- package/dist/cjs/primitives/button.cjs.map +1 -0
- package/dist/components/Button/Button.js +33 -39
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/primitives/button.js +49 -0
- package/dist/primitives/button.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,37 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const
|
|
4
|
+
const React = require("react");
|
|
5
|
+
require("class-variance-authority");
|
|
5
6
|
const cn = require("../../utils/cn.cjs");
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
lg: "h-12 px-6 text-base"
|
|
21
|
-
},
|
|
22
|
-
fullWidth: {
|
|
23
|
-
true: "w-full flex",
|
|
24
|
-
false: ""
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
defaultVariants: {
|
|
28
|
-
variant: "primary",
|
|
29
|
-
size: "md",
|
|
30
|
-
fullWidth: false
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
);
|
|
34
|
-
function Button({
|
|
7
|
+
const button = require("../../primitives/button.cjs");
|
|
8
|
+
const variantMap = {
|
|
9
|
+
primary: "default",
|
|
10
|
+
secondary: "secondary",
|
|
11
|
+
outline: "outline",
|
|
12
|
+
ghost: "ghost",
|
|
13
|
+
danger: "destructive"
|
|
14
|
+
};
|
|
15
|
+
const sizeMap = {
|
|
16
|
+
sm: "sm",
|
|
17
|
+
md: "default",
|
|
18
|
+
lg: "lg"
|
|
19
|
+
};
|
|
20
|
+
const Button = React.forwardRef(function Button2({
|
|
35
21
|
children,
|
|
36
22
|
variant = "primary",
|
|
37
23
|
size = "md",
|
|
@@ -39,20 +25,28 @@ function Button({
|
|
|
39
25
|
loading = false,
|
|
40
26
|
disabled,
|
|
41
27
|
className,
|
|
28
|
+
asChild = false,
|
|
29
|
+
style,
|
|
42
30
|
...props
|
|
43
|
-
}) {
|
|
44
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
45
|
-
|
|
31
|
+
}, ref) {
|
|
32
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
33
|
+
button.ButtonPrimitive,
|
|
46
34
|
{
|
|
47
|
-
|
|
35
|
+
ref,
|
|
36
|
+
variant: variantMap[variant],
|
|
37
|
+
size: sizeMap[size],
|
|
38
|
+
asChild,
|
|
48
39
|
disabled: disabled || loading,
|
|
40
|
+
className: cn.cn(fullWidth && "w-full", "relative cursor-pointer", className),
|
|
41
|
+
style,
|
|
49
42
|
...props,
|
|
50
|
-
children: [
|
|
51
|
-
loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-4 border-2 border-current border-r-transparent rounded-full animate-spin" }),
|
|
43
|
+
children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
44
|
+
loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-4 border-2 border-current border-r-transparent rounded-full animate-spin" }) }),
|
|
52
45
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn.cn(loading && "invisible"), children })
|
|
53
|
-
]
|
|
46
|
+
] })
|
|
54
47
|
}
|
|
55
48
|
);
|
|
56
|
-
}
|
|
49
|
+
});
|
|
50
|
+
Button.displayName = "Button";
|
|
57
51
|
exports.Button = Button;
|
|
58
52
|
//# sourceMappingURL=Button.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type
|
|
1
|
+
{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { ButtonPrimitive, buttonVariants } from \"../../primitives/button\";\n\ntype PrimitiveVariant = NonNullable<VariantProps<typeof buttonVariants>[\"variant\"]>;\ntype PrimitiveSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\n\nconst variantMap: Record<string, PrimitiveVariant> = {\n primary: \"default\",\n secondary: \"secondary\",\n outline: \"outline\",\n ghost: \"ghost\",\n danger: \"destructive\",\n};\n\nconst sizeMap: Record<string, PrimitiveSize> = {\n sm: \"sm\",\n md: \"default\",\n lg: \"lg\",\n};\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Visual style variant */\n variant?: keyof typeof variantMap;\n /** Size of the button */\n size?: keyof typeof sizeMap;\n /** Stretch button to full container width */\n fullWidth?: boolean;\n /** Show a loading spinner and disable interaction */\n loading?: boolean;\n /** Render as child element via Slot (e.g. wrap a Link) */\n asChild?: boolean;\n children: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n children,\n variant = \"primary\",\n size = \"md\",\n fullWidth = false,\n loading = false,\n disabled,\n className,\n asChild = false,\n style,\n ...props\n },\n ref\n) {\n return (\n <ButtonPrimitive\n ref={ref}\n variant={variantMap[variant]}\n size={sizeMap[size]}\n asChild={asChild}\n disabled={disabled || loading}\n className={cn(fullWidth && \"w-full\", \"relative cursor-pointer\", className)}\n style={style}\n {...props}\n >\n {asChild ? (\n children\n ) : (\n <>\n {loading && (\n <span className=\"absolute inset-0 flex items-center justify-center\">\n <span className=\"size-4 border-2 border-current border-r-transparent rounded-full animate-spin\" />\n </span>\n )}\n <span className={cn(loading && \"invisible\")}>{children}</span>\n </>\n )}\n </ButtonPrimitive>\n );\n});\n\nButton.displayName = \"Button\";\n"],"names":["forwardRef","Button","jsx","ButtonPrimitive","cn","jsxs","Fragment"],"mappings":";;;;;;;AAQA,MAAM,aAA+C;AAAA,EACnD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,UAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAgBO,MAAM,SAASA,MAAAA,WAA2C,SAASC,QACxE;AAAA,EACE;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,SACEC,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,WAAW,OAAO;AAAA,MAC3B,MAAM,QAAQ,IAAI;AAAA,MAClB;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAWC,GAAAA,GAAG,aAAa,UAAU,2BAA2B,SAAS;AAAA,MACzE;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,UACC,WAEAC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,QAAA,WACCJ,2BAAAA,IAAC,UAAK,WAAU,qDACd,yCAAC,QAAA,EAAK,WAAU,iFAAgF,EAAA,CAClG;AAAA,uCAED,QAAA,EAAK,WAAWE,GAAAA,GAAG,WAAW,WAAW,GAAI,SAAA,CAAS;AAAA,MAAA,EAAA,CACzD;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAED,OAAO,cAAc;;"}
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -17,6 +17,7 @@ const separator = require("./primitives/separator.cjs");
|
|
|
17
17
|
const Switch = require("./components/Form/Switch.cjs");
|
|
18
18
|
const TextArea = require("./components/Form/TextArea.cjs");
|
|
19
19
|
const TextBox = require("./components/Form/TextBox.cjs");
|
|
20
|
+
const button = require("./primitives/button.cjs");
|
|
20
21
|
const hooks = require("./components/Form/hooks.cjs");
|
|
21
22
|
exports.useToggle = useToggle.useToggle;
|
|
22
23
|
exports.useDebounce = useDebounce.useDebounce;
|
|
@@ -61,6 +62,7 @@ exports.Separator = separator.Separator;
|
|
|
61
62
|
exports.Switch = Switch.Switch;
|
|
62
63
|
exports.TextArea = TextArea.TextArea;
|
|
63
64
|
exports.TextBox = TextBox.TextBox;
|
|
65
|
+
exports.buttonVariants = button.buttonVariants;
|
|
64
66
|
exports.useFieldError = hooks.useFieldError;
|
|
65
67
|
exports.useForm = hooks.useForm;
|
|
66
68
|
exports.useFormConfig = hooks.useFormConfig;
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const reactSlot = require("@radix-ui/react-slot");
|
|
6
|
+
const classVarianceAuthority = require("class-variance-authority");
|
|
7
|
+
const cn = require("../utils/cn.cjs");
|
|
8
|
+
function _interopNamespaceDefault(e) {
|
|
9
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
10
|
+
if (e) {
|
|
11
|
+
for (const k in e) {
|
|
12
|
+
if (k !== "default") {
|
|
13
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: () => e[k]
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
n.default = e;
|
|
22
|
+
return Object.freeze(n);
|
|
23
|
+
}
|
|
24
|
+
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
25
|
+
const buttonVariants = classVarianceAuthority.cva(
|
|
26
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
|
27
|
+
{
|
|
28
|
+
variants: {
|
|
29
|
+
variant: {
|
|
30
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
31
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
32
|
+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
33
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
34
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
35
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
36
|
+
},
|
|
37
|
+
size: {
|
|
38
|
+
default: "h-10 px-4 py-2",
|
|
39
|
+
sm: "h-9 px-3",
|
|
40
|
+
lg: "h-11 px-8",
|
|
41
|
+
icon: "h-10 w-10"
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
defaultVariants: {
|
|
45
|
+
variant: "default",
|
|
46
|
+
size: "default"
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
const ButtonPrimitive = React__namespace.forwardRef(
|
|
51
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
52
|
+
const Comp = asChild ? reactSlot.Slot : "button";
|
|
53
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
54
|
+
Comp,
|
|
55
|
+
{
|
|
56
|
+
ref,
|
|
57
|
+
className: cn.cn(buttonVariants({ variant, size, className })),
|
|
58
|
+
...props
|
|
59
|
+
}
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
);
|
|
63
|
+
ButtonPrimitive.displayName = "ButtonPrimitive";
|
|
64
|
+
exports.ButtonPrimitive = ButtonPrimitive;
|
|
65
|
+
exports.buttonVariants = buttonVariants;
|
|
66
|
+
//# sourceMappingURL=button.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.cjs","sources":["../../../src/primitives/button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline: \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 px-3\",\n lg: \"h-11 px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonPrimitiveProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n}\n\nconst ButtonPrimitive = React.forwardRef<HTMLButtonElement, ButtonPrimitiveProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n ref={ref}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n }\n)\nButtonPrimitive.displayName = \"ButtonPrimitive\"\n\nexport { ButtonPrimitive, buttonVariants }\n"],"names":["cva","React","Slot","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,iBAAiBA,uBAAAA;AAAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAQA,MAAM,kBAAkBC,iBAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,MAAA,GAAS,QAAQ;AAChE,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAC9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,eAAe,EAAE,SAAS,MAAM,UAAA,CAAW,CAAC;AAAA,QACzD,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,gBAAgB,cAAc;;;"}
|
|
@@ -1,35 +1,21 @@
|
|
|
1
|
-
import { jsxs,
|
|
2
|
-
import {
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import "class-variance-authority";
|
|
3
4
|
import { cn } from "../../utils/cn.js";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
lg: "h-12 px-6 text-base"
|
|
19
|
-
},
|
|
20
|
-
fullWidth: {
|
|
21
|
-
true: "w-full flex",
|
|
22
|
-
false: ""
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
defaultVariants: {
|
|
26
|
-
variant: "primary",
|
|
27
|
-
size: "md",
|
|
28
|
-
fullWidth: false
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
function Button({
|
|
5
|
+
import { ButtonPrimitive } from "../../primitives/button.js";
|
|
6
|
+
const variantMap = {
|
|
7
|
+
primary: "default",
|
|
8
|
+
secondary: "secondary",
|
|
9
|
+
outline: "outline",
|
|
10
|
+
ghost: "ghost",
|
|
11
|
+
danger: "destructive"
|
|
12
|
+
};
|
|
13
|
+
const sizeMap = {
|
|
14
|
+
sm: "sm",
|
|
15
|
+
md: "default",
|
|
16
|
+
lg: "lg"
|
|
17
|
+
};
|
|
18
|
+
const Button = forwardRef(function Button2({
|
|
33
19
|
children,
|
|
34
20
|
variant = "primary",
|
|
35
21
|
size = "md",
|
|
@@ -37,21 +23,29 @@ function Button({
|
|
|
37
23
|
loading = false,
|
|
38
24
|
disabled,
|
|
39
25
|
className,
|
|
26
|
+
asChild = false,
|
|
27
|
+
style,
|
|
40
28
|
...props
|
|
41
|
-
}) {
|
|
42
|
-
return /* @__PURE__ */
|
|
43
|
-
|
|
29
|
+
}, ref) {
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
ButtonPrimitive,
|
|
44
32
|
{
|
|
45
|
-
|
|
33
|
+
ref,
|
|
34
|
+
variant: variantMap[variant],
|
|
35
|
+
size: sizeMap[size],
|
|
36
|
+
asChild,
|
|
46
37
|
disabled: disabled || loading,
|
|
38
|
+
className: cn(fullWidth && "w-full", "relative cursor-pointer", className),
|
|
39
|
+
style,
|
|
47
40
|
...props,
|
|
48
|
-
children: [
|
|
49
|
-
loading && /* @__PURE__ */ jsx("span", { className: "size-4 border-2 border-current border-r-transparent rounded-full animate-spin" }),
|
|
41
|
+
children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
42
|
+
loading && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "size-4 border-2 border-current border-r-transparent rounded-full animate-spin" }) }),
|
|
50
43
|
/* @__PURE__ */ jsx("span", { className: cn(loading && "invisible"), children })
|
|
51
|
-
]
|
|
44
|
+
] })
|
|
52
45
|
}
|
|
53
46
|
);
|
|
54
|
-
}
|
|
47
|
+
});
|
|
48
|
+
Button.displayName = "Button";
|
|
55
49
|
export {
|
|
56
50
|
Button
|
|
57
51
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\nimport { ButtonPrimitive, buttonVariants } from \"../../primitives/button\";\n\ntype PrimitiveVariant = NonNullable<VariantProps<typeof buttonVariants>[\"variant\"]>;\ntype PrimitiveSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\n\nconst variantMap: Record<string, PrimitiveVariant> = {\n primary: \"default\",\n secondary: \"secondary\",\n outline: \"outline\",\n ghost: \"ghost\",\n danger: \"destructive\",\n};\n\nconst sizeMap: Record<string, PrimitiveSize> = {\n sm: \"sm\",\n md: \"default\",\n lg: \"lg\",\n};\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Visual style variant */\n variant?: keyof typeof variantMap;\n /** Size of the button */\n size?: keyof typeof sizeMap;\n /** Stretch button to full container width */\n fullWidth?: boolean;\n /** Show a loading spinner and disable interaction */\n loading?: boolean;\n /** Render as child element via Slot (e.g. wrap a Link) */\n asChild?: boolean;\n children: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n children,\n variant = \"primary\",\n size = \"md\",\n fullWidth = false,\n loading = false,\n disabled,\n className,\n asChild = false,\n style,\n ...props\n },\n ref\n) {\n return (\n <ButtonPrimitive\n ref={ref}\n variant={variantMap[variant]}\n size={sizeMap[size]}\n asChild={asChild}\n disabled={disabled || loading}\n className={cn(fullWidth && \"w-full\", \"relative cursor-pointer\", className)}\n style={style}\n {...props}\n >\n {asChild ? (\n children\n ) : (\n <>\n {loading && (\n <span className=\"absolute inset-0 flex items-center justify-center\">\n <span className=\"size-4 border-2 border-current border-r-transparent rounded-full animate-spin\" />\n </span>\n )}\n <span className={cn(loading && \"invisible\")}>{children}</span>\n </>\n )}\n </ButtonPrimitive>\n );\n});\n\nButton.displayName = \"Button\";\n"],"names":["Button"],"mappings":";;;;;AAQA,MAAM,aAA+C;AAAA,EACnD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,UAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAgBO,MAAM,SAAS,WAA2C,SAASA,QACxE;AAAA,EACE;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,WAAW,OAAO;AAAA,MAC3B,MAAM,QAAQ,IAAI;AAAA,MAClB;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW,GAAG,aAAa,UAAU,2BAA2B,SAAS;AAAA,MACzE;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,UACC,WAEA,qBAAA,UAAA,EACG,UAAA;AAAA,QAAA,WACC,oBAAC,UAAK,WAAU,qDACd,8BAAC,QAAA,EAAK,WAAU,iFAAgF,EAAA,CAClG;AAAA,4BAED,QAAA,EAAK,WAAW,GAAG,WAAW,WAAW,GAAI,SAAA,CAAS;AAAA,MAAA,EAAA,CACzD;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAED,OAAO,cAAc;"}
|
package/dist/index.js
CHANGED
|
@@ -15,6 +15,7 @@ import { Separator } from "./primitives/separator.js";
|
|
|
15
15
|
import { Switch } from "./components/Form/Switch.js";
|
|
16
16
|
import { TextArea } from "./components/Form/TextArea.js";
|
|
17
17
|
import { TextBox } from "./components/Form/TextBox.js";
|
|
18
|
+
import { buttonVariants } from "./primitives/button.js";
|
|
18
19
|
import { useFieldError, useForm, useFormConfig, useFormField } from "./components/Form/hooks.js";
|
|
19
20
|
export {
|
|
20
21
|
Avatar,
|
|
@@ -55,6 +56,7 @@ export {
|
|
|
55
56
|
TextBox,
|
|
56
57
|
badgeVariants,
|
|
57
58
|
buildZodSchemaFromRules,
|
|
59
|
+
buttonVariants,
|
|
58
60
|
cn,
|
|
59
61
|
defaultFormConfig,
|
|
60
62
|
useDebounce,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { cn } from "../utils/cn.js";
|
|
6
|
+
const buttonVariants = cva(
|
|
7
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
|
8
|
+
{
|
|
9
|
+
variants: {
|
|
10
|
+
variant: {
|
|
11
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
12
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
13
|
+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
14
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
15
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
16
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
17
|
+
},
|
|
18
|
+
size: {
|
|
19
|
+
default: "h-10 px-4 py-2",
|
|
20
|
+
sm: "h-9 px-3",
|
|
21
|
+
lg: "h-11 px-8",
|
|
22
|
+
icon: "h-10 w-10"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
defaultVariants: {
|
|
26
|
+
variant: "default",
|
|
27
|
+
size: "default"
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
const ButtonPrimitive = React.forwardRef(
|
|
32
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
33
|
+
const Comp = asChild ? Slot : "button";
|
|
34
|
+
return /* @__PURE__ */ jsx(
|
|
35
|
+
Comp,
|
|
36
|
+
{
|
|
37
|
+
ref,
|
|
38
|
+
className: cn(buttonVariants({ variant, size, className })),
|
|
39
|
+
...props
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
ButtonPrimitive.displayName = "ButtonPrimitive";
|
|
45
|
+
export {
|
|
46
|
+
ButtonPrimitive,
|
|
47
|
+
buttonVariants
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../src/primitives/button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline: \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 px-3\",\n lg: \"h-11 px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonPrimitiveProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n}\n\nconst ButtonPrimitive = React.forwardRef<HTMLButtonElement, ButtonPrimitiveProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n ref={ref}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n }\n)\nButtonPrimitive.displayName = \"ButtonPrimitive\"\n\nexport { ButtonPrimitive, buttonVariants }\n"],"names":[],"mappings":";;;;;AAMA,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAQA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,MAAA,GAAS,QAAQ;AAChE,UAAM,OAAO,UAAU,OAAO;AAC9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAA,CAAW,CAAC;AAAA,QACzD,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,gBAAgB,cAAc;"}
|
package/package.json
CHANGED