@oneplatformdev/ui 0.1.2-1 → 0.1.9-3
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/Button/Button.d.ts +5 -0
- package/Button/Button.d.ts.map +1 -0
- package/Button/Button.js +32 -0
- package/Button/Button.stories.d.ts +8 -0
- package/Button/Button.stories.d.ts.map +1 -0
- package/Button/Button.stories.js +20 -0
- package/Button/Button.types.d.ts +9 -0
- package/Button/Button.types.d.ts.map +1 -0
- package/Button/Button.types.js +1 -0
- package/Button/buttonVariants.d.ts +5 -0
- package/Button/buttonVariants.d.ts.map +1 -0
- package/Button/buttonVariants.js +35 -0
- package/Button/index.d.ts +4 -0
- package/Button/index.d.ts.map +1 -0
- package/Button/index.js +7 -0
- package/ButtonIcon/ButtonIcon.d.ts +4 -0
- package/ButtonIcon/ButtonIcon.d.ts.map +1 -0
- package/ButtonIcon/ButtonIcon.js +29 -0
- package/ButtonIcon/ButtonIcon.stories.d.ts +37 -0
- package/ButtonIcon/ButtonIcon.stories.d.ts.map +1 -0
- package/ButtonIcon/ButtonIcon.stories.js +126 -0
- package/ButtonIcon/ButtonIcon.types.d.ts +8 -0
- package/ButtonIcon/ButtonIcon.types.d.ts.map +1 -0
- package/ButtonIcon/ButtonIcon.types.js +1 -0
- package/ButtonIcon/buttonIconVariants.d.ts +8 -0
- package/ButtonIcon/buttonIconVariants.d.ts.map +1 -0
- package/ButtonIcon/buttonIconVariants.js +139 -0
- package/ButtonIcon/index.d.ts +4 -0
- package/ButtonIcon/index.d.ts.map +1 -0
- package/ButtonIcon/index.js +7 -0
- package/CHANGELOG.md +134 -0
- package/LICENSE +21 -0
- package/README.md +3 -3
- package/Tooltip/Tooltip.d.ts +4 -0
- package/Tooltip/Tooltip.d.ts.map +1 -0
- package/Tooltip/Tooltip.js +12 -0
- package/Tooltip/Tooltip.types.d.ts +8 -0
- package/Tooltip/Tooltip.types.d.ts.map +1 -0
- package/Tooltip/Tooltip.types.js +1 -0
- package/Tooltip/TooltipRoot.d.ts +8 -0
- package/Tooltip/TooltipRoot.d.ts.map +1 -0
- package/Tooltip/TooltipRoot.js +23 -0
- package/Tooltip/index.d.ts +4 -0
- package/Tooltip/index.d.ts.map +1 -0
- package/Tooltip/index.js +9 -0
- package/global.css +1 -0
- package/index.d.ts +4 -0
- package/index.d.ts.map +1 -0
- package/index.js +18 -0
- package/package.json +56 -25
- package/src/globals.css +0 -123
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK7C,eAAO,MAAM,MAAM,uFAmBlB,CAAA;AAGD,eAAe,MAAM,CAAC"}
|
package/Button/Button.js
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import * as i from "react";
|
|
3
|
+
import { Slot as u } from "@radix-ui/react-slot";
|
|
4
|
+
import { cn as c } from "@oneplatformdev/utils";
|
|
5
|
+
import { buttonVariants as l } from "./buttonVariants.js";
|
|
6
|
+
import "../Tooltip/TooltipRoot.js";
|
|
7
|
+
import { Tooltip as d } from "../Tooltip/Tooltip.js";
|
|
8
|
+
const y = i.forwardRef(
|
|
9
|
+
({ disabled: o, className: a, variant: e, size: p, asChild: n = !1, title: t = "", tooltip: r, ...s }, f) => /* @__PURE__ */ m(
|
|
10
|
+
d,
|
|
11
|
+
{
|
|
12
|
+
open: o || !t && !r ? !1 : void 0,
|
|
13
|
+
message: r || t,
|
|
14
|
+
delay: 300,
|
|
15
|
+
children: /* @__PURE__ */ m(
|
|
16
|
+
n ? u : "button",
|
|
17
|
+
{
|
|
18
|
+
type: "button",
|
|
19
|
+
ref: f,
|
|
20
|
+
disabled: o,
|
|
21
|
+
className: c(l({ variant: e, size: p, className: a })),
|
|
22
|
+
...s
|
|
23
|
+
}
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
)
|
|
27
|
+
);
|
|
28
|
+
y.displayName = "Button";
|
|
29
|
+
export {
|
|
30
|
+
y as Button,
|
|
31
|
+
y as default
|
|
32
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react';
|
|
2
|
+
import { ButtonProps } from './Button.types';
|
|
3
|
+
import { default as React } from 'react';
|
|
4
|
+
declare const meta: Meta<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>>;
|
|
5
|
+
export default meta;
|
|
6
|
+
type Story = StoryObj<typeof meta>;
|
|
7
|
+
export declare const Default: Story;
|
|
8
|
+
//# sourceMappingURL=Button.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,QAAA,MAAM,IAAI,6FASqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { Button as t } from "./Button.js";
|
|
3
|
+
const o = (e) => /* @__PURE__ */ a(t, { ...e }), n = {
|
|
4
|
+
title: "Button",
|
|
5
|
+
component: t,
|
|
6
|
+
render: o,
|
|
7
|
+
args: {
|
|
8
|
+
variant: "default",
|
|
9
|
+
size: "default",
|
|
10
|
+
disabled: !1
|
|
11
|
+
}
|
|
12
|
+
}, s = {
|
|
13
|
+
args: {
|
|
14
|
+
children: "Default"
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
s as Default,
|
|
19
|
+
n as default
|
|
20
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { buttonVariants } from './buttonVariants';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
6
|
+
asChild?: boolean;
|
|
7
|
+
tooltip?: ReactNode;
|
|
8
|
+
}
|
|
9
|
+
//# sourceMappingURL=Button.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const buttonVariants: (props?: ({
|
|
2
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
3
|
+
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
4
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
5
|
+
//# sourceMappingURL=buttonVariants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"buttonVariants.d.ts","sourceRoot":"","sources":["../../src/Button/buttonVariants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc;;;8EAkC1B,CAAA"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { cva as e } from "class-variance-authority";
|
|
2
|
+
const r = e(
|
|
3
|
+
[
|
|
4
|
+
"inline-flex items-center justify-center gap-2",
|
|
5
|
+
"whitespace-nowrap rounded-lg text-sm font-medium",
|
|
6
|
+
"transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
|
|
7
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
8
|
+
"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
|
|
9
|
+
],
|
|
10
|
+
{
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
default: "bg-primary text-primary-foreground shadow-sm hover:opacity-[.8]",
|
|
14
|
+
destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
|
|
15
|
+
outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
|
|
16
|
+
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
|
17
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
18
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
19
|
+
},
|
|
20
|
+
size: {
|
|
21
|
+
default: "h-9 px-4 py-2",
|
|
22
|
+
sm: "h-8 rounded-md px-3 text-xs [&_svg]:size-4",
|
|
23
|
+
lg: "h-10 px-8 [&_svg]:size-5 px-3 py-2",
|
|
24
|
+
icon: "h-9 w-9 [&_svg]:size-5!"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
defaultVariants: {
|
|
28
|
+
variant: "default",
|
|
29
|
+
size: "lg"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
export {
|
|
34
|
+
r as buttonVariants
|
|
35
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACrD,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,gBAAgB,CAAC"}
|
package/Button/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIrD,eAAO,MAAM,UAAU,2FAkBtB,CAAA"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import * as f from "react";
|
|
3
|
+
import { cn as l } from "@oneplatformdev/utils";
|
|
4
|
+
import { buttonIconVariants as u } from "./buttonIconVariants.js";
|
|
5
|
+
import "../Tooltip/TooltipRoot.js";
|
|
6
|
+
import { Tooltip as d } from "../Tooltip/Tooltip.js";
|
|
7
|
+
const h = f.forwardRef(
|
|
8
|
+
({ disabled: o, className: m, variant: e, color: p, size: a, rounded: s, title: t = "", tooltip: r, ...i }, c) => /* @__PURE__ */ n(
|
|
9
|
+
d,
|
|
10
|
+
{
|
|
11
|
+
open: o || !t && !r ? !1 : void 0,
|
|
12
|
+
message: r || t,
|
|
13
|
+
delay: 300,
|
|
14
|
+
children: /* @__PURE__ */ n(
|
|
15
|
+
"button",
|
|
16
|
+
{
|
|
17
|
+
className: l(u({ variant: e, size: a, color: p, disabled: o, rounded: s, className: m })),
|
|
18
|
+
ref: c,
|
|
19
|
+
disabled: !!o,
|
|
20
|
+
...i
|
|
21
|
+
}
|
|
22
|
+
)
|
|
23
|
+
}
|
|
24
|
+
)
|
|
25
|
+
);
|
|
26
|
+
h.displayName = "Button";
|
|
27
|
+
export {
|
|
28
|
+
h as ButtonIcon
|
|
29
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { ButtonIconProps } from './ButtonIcon.types';
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
declare const meta: Meta<React.ForwardRefExoticComponent<ButtonIconProps & React.RefAttributes<HTMLButtonElement>>>;
|
|
4
|
+
export default meta;
|
|
5
|
+
export declare const Playground: {
|
|
6
|
+
({ rounded, ...args }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
args: {
|
|
8
|
+
onClick: {
|
|
9
|
+
action: (e: React.MouseEvent<HTMLButtonElement>) => React.MouseEvent<HTMLButtonElement, MouseEvent>;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export declare const Variants: {
|
|
14
|
+
({ variant, ...args }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
parameters: {
|
|
16
|
+
controls: {
|
|
17
|
+
include: string[];
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
export declare const Colors: {
|
|
22
|
+
({ color, ...args }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
parameters: {
|
|
24
|
+
controls: {
|
|
25
|
+
include: string[];
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
export declare const Disabled: {
|
|
30
|
+
({ variant, color, ...args }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
parameters: {
|
|
32
|
+
controls: {
|
|
33
|
+
include: never[];
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=ButtonIcon.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonIcon.stories.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,QAAA,MAAM,IAAI,iGAkDyB,CAAC;AACpC,eAAe,IAAI,CAAC;AAIpB,eAAO,MAAM,UAAU;2BAA0B,eAAe;;;wBAqCvC,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC;;;CAF3D,CAAC;AAKF,eAAO,MAAM,QAAQ;2BAA0B,eAAe;;;;;;CAY7D,CAAC;AAQF,eAAO,MAAM,MAAM;yBAAwB,eAAe;;;;;;CAYzD,CAAC;AAQF,eAAO,MAAM,QAAQ;kCAAiC,eAAe;;;;;;CAsBpE,CAAC"}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { jsx as o, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import { ButtonIcon as m } from "./ButtonIcon.js";
|
|
3
|
+
import { PencilLineIcon as x } from "lucide-react";
|
|
4
|
+
const s = ["contained", "outlined", "ghost", "link"], c = [
|
|
5
|
+
"primary",
|
|
6
|
+
"secondary",
|
|
7
|
+
"error",
|
|
8
|
+
"success",
|
|
9
|
+
"disabled"
|
|
10
|
+
], f = ["sm", "md", "lg"], l = (a) => /* @__PURE__ */ o(m, { ...a, children: /* @__PURE__ */ o(x, {}) }), z = {
|
|
11
|
+
title: "ButtonIcon",
|
|
12
|
+
component: m,
|
|
13
|
+
render: l,
|
|
14
|
+
argTypes: {
|
|
15
|
+
variant: {
|
|
16
|
+
name: "variant",
|
|
17
|
+
description: "ButtonIcon variant",
|
|
18
|
+
defaultValue: "contained",
|
|
19
|
+
options: s,
|
|
20
|
+
control: {
|
|
21
|
+
type: "inline-radio"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
color: {
|
|
25
|
+
options: c,
|
|
26
|
+
control: {
|
|
27
|
+
type: "inline-radio"
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
size: {
|
|
31
|
+
options: f,
|
|
32
|
+
control: {
|
|
33
|
+
type: "inline-radio"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
tooltip: {
|
|
37
|
+
control: {
|
|
38
|
+
type: "text"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
disabled: {
|
|
42
|
+
control: {
|
|
43
|
+
type: "boolean"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
rounded: {
|
|
47
|
+
control: {
|
|
48
|
+
type: "boolean"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
args: {
|
|
53
|
+
variant: "contained",
|
|
54
|
+
color: "primary",
|
|
55
|
+
size: "md",
|
|
56
|
+
disabled: !1,
|
|
57
|
+
rounded: !1,
|
|
58
|
+
tooltip: "ButtonIcon tooltip"
|
|
59
|
+
}
|
|
60
|
+
}, u = ({ rounded: a, ...n }) => /* @__PURE__ */ d("div", { className: "flex flex-col gap-10", children: [
|
|
61
|
+
/* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(l, { rounded: a, ...n }) }),
|
|
62
|
+
/* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: s.map((e) => /* @__PURE__ */ o("div", { className: "flex gap-2", children: c.map((t) => {
|
|
63
|
+
const i = `${e}-${t}`;
|
|
64
|
+
return /* @__PURE__ */ o("div", { className: "flex gap-2", children: f.map((r) => {
|
|
65
|
+
const p = `${i}-${r}`;
|
|
66
|
+
return /* @__PURE__ */ o(
|
|
67
|
+
l,
|
|
68
|
+
{
|
|
69
|
+
color: t,
|
|
70
|
+
size: r,
|
|
71
|
+
variant: e,
|
|
72
|
+
rounded: a,
|
|
73
|
+
tooltip: p
|
|
74
|
+
},
|
|
75
|
+
p
|
|
76
|
+
);
|
|
77
|
+
}) }, i);
|
|
78
|
+
}) }, e)) })
|
|
79
|
+
] });
|
|
80
|
+
u.args = {
|
|
81
|
+
onClick: { action: (a) => a }
|
|
82
|
+
};
|
|
83
|
+
const g = ({ variant: a, ...n }) => /* @__PURE__ */ d("div", { className: "flex flex-col gap-10", children: [
|
|
84
|
+
/* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(l, { variant: a, ...n }) }),
|
|
85
|
+
/* @__PURE__ */ o("div", { className: "flex gap-2", children: s.map((e) => /* @__PURE__ */ o(l, { variant: e, tooltip: e }, e)) })
|
|
86
|
+
] });
|
|
87
|
+
g.parameters = {
|
|
88
|
+
controls: {
|
|
89
|
+
include: ["disabled", "color", "size", "variant"]
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
const h = ({ color: a, ...n }) => /* @__PURE__ */ d("div", { className: "flex flex-col gap-2", children: [
|
|
93
|
+
/* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(l, { color: a, ...n }) }),
|
|
94
|
+
/* @__PURE__ */ o("div", { className: "flex gap-2", children: c.map((e) => /* @__PURE__ */ o(l, { color: e, tooltip: e, ...n }, e)) })
|
|
95
|
+
] });
|
|
96
|
+
h.parameters = {
|
|
97
|
+
controls: {
|
|
98
|
+
include: ["disabled", "color", "size", "variant"]
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
const v = ({ variant: a, color: n, ...e }) => /* @__PURE__ */ o("div", { className: "flex flex-col gap-10", children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: s.map((t) => /* @__PURE__ */ o("div", { className: "flex gap-2", children: c.map((i) => {
|
|
102
|
+
const r = `${t}-${i}`;
|
|
103
|
+
return /* @__PURE__ */ o(
|
|
104
|
+
l,
|
|
105
|
+
{
|
|
106
|
+
variant: t,
|
|
107
|
+
color: i,
|
|
108
|
+
disabled: !0,
|
|
109
|
+
tooltip: r,
|
|
110
|
+
...e
|
|
111
|
+
},
|
|
112
|
+
r
|
|
113
|
+
);
|
|
114
|
+
}) }, t)) }) });
|
|
115
|
+
v.parameters = {
|
|
116
|
+
controls: {
|
|
117
|
+
include: []
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
export {
|
|
121
|
+
h as Colors,
|
|
122
|
+
v as Disabled,
|
|
123
|
+
u as Playground,
|
|
124
|
+
g as Variants,
|
|
125
|
+
z as default
|
|
126
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { buttonIconVariants } from './buttonIconVariants';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
export interface ButtonIconProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'disabled'>, VariantProps<typeof buttonIconVariants> {
|
|
6
|
+
tooltip?: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
//# sourceMappingURL=ButtonIcon.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonIcon.types.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,EAC/E,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const buttonIconVariants: (props?: ({
|
|
2
|
+
variant?: "ghost" | "link" | "contained" | "outlined" | null | undefined;
|
|
3
|
+
color?: "secondary" | "disabled" | "primary" | "error" | "success" | null | undefined;
|
|
4
|
+
size?: "sm" | "lg" | "icon" | "md" | null | undefined;
|
|
5
|
+
disabled?: boolean | null | undefined;
|
|
6
|
+
rounded?: boolean | null | undefined;
|
|
7
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
8
|
+
//# sourceMappingURL=buttonIconVariants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"buttonIconVariants.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB;;;;;;8EAsI9B,CAAA"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { cva as r } from "class-variance-authority";
|
|
2
|
+
const e = r(
|
|
3
|
+
"aspect-square inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
|
4
|
+
{
|
|
5
|
+
variants: {
|
|
6
|
+
variant: {
|
|
7
|
+
contained: "border shadow-sm",
|
|
8
|
+
outlined: "border bg-transparent hover:shadow-xs",
|
|
9
|
+
ghost: "bg-transparent hover:bg-accent hover:text-accent-foreground",
|
|
10
|
+
link: "underline-offset-4 hover:underline bg-transparent hover:bg-transparent"
|
|
11
|
+
},
|
|
12
|
+
color: {
|
|
13
|
+
primary: "",
|
|
14
|
+
secondary: "",
|
|
15
|
+
error: "",
|
|
16
|
+
success: "",
|
|
17
|
+
disabled: "contrast-50"
|
|
18
|
+
},
|
|
19
|
+
size: {
|
|
20
|
+
sm: "w-8 h-8 rounded-sm text-xs [&_svg]:size-4",
|
|
21
|
+
md: "w-9 h-9 px-4 rounded-md [&_svg]:size-5",
|
|
22
|
+
lg: "w-10 h-10 rounded-md [&_svg]:size-6",
|
|
23
|
+
icon: "h-9 w-9 [&_svg]:size-5 rounded-sm"
|
|
24
|
+
},
|
|
25
|
+
disabled: {
|
|
26
|
+
true: "cursor-not-allowed contrast-50",
|
|
27
|
+
false: "cursor-pointer"
|
|
28
|
+
},
|
|
29
|
+
rounded: {
|
|
30
|
+
true: "rounded-full",
|
|
31
|
+
false: ""
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
compoundVariants: [
|
|
35
|
+
// contained
|
|
36
|
+
{
|
|
37
|
+
variant: "contained",
|
|
38
|
+
color: "primary",
|
|
39
|
+
disabled: !1,
|
|
40
|
+
className: "bg-typography-primary border-typography-primary text-white dark:bg-gray-3 dark:border-gray-3 dark:text-typography-secondary"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
variant: "contained",
|
|
44
|
+
color: "secondary",
|
|
45
|
+
disabled: !1,
|
|
46
|
+
className: "bg-gray-2 border-gray-2 text-typography-primary dark:bg-gray-3 dark:border-gray-3 dark:text-typography-secondary"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
variant: "contained",
|
|
50
|
+
color: "error",
|
|
51
|
+
disabled: !1,
|
|
52
|
+
className: "bg-typography-error/90 border-typography-error/90 text-white dark:bg-typography-error/80 dark:border-typography-error/80 dark:text-typography-primary"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
variant: "contained",
|
|
56
|
+
color: "success",
|
|
57
|
+
disabled: !1,
|
|
58
|
+
className: "bg-typography-success/90 border-typography-success/90 text-white dark:bg-typography-success/80 dark:border-typography-success/80 dark:text-typography-primary"
|
|
59
|
+
},
|
|
60
|
+
// outlined
|
|
61
|
+
{
|
|
62
|
+
variant: "outlined",
|
|
63
|
+
color: "primary",
|
|
64
|
+
disabled: !1,
|
|
65
|
+
className: "border-typography-primary text-typography-primary hover:bg-typography-primary/15"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
variant: "outlined",
|
|
69
|
+
color: "secondary",
|
|
70
|
+
disabled: !1,
|
|
71
|
+
className: "border-border text-typography-secondary hover:bg-border-border/15"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
variant: "outlined",
|
|
75
|
+
color: "error",
|
|
76
|
+
disabled: !1,
|
|
77
|
+
className: "border-typography-error text-typography-error hover:bg-typography-error/15"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
variant: "outlined",
|
|
81
|
+
color: "success",
|
|
82
|
+
disabled: !1,
|
|
83
|
+
className: "border-typography-success text-typography-success hover:bg-typography-success/15"
|
|
84
|
+
},
|
|
85
|
+
// link - ghost
|
|
86
|
+
{
|
|
87
|
+
variant: ["link", "ghost"],
|
|
88
|
+
color: "primary",
|
|
89
|
+
className: "text-typography-primary"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
variant: ["link", "ghost"],
|
|
93
|
+
color: "secondary",
|
|
94
|
+
className: "text-typography-secondary"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
variant: ["link", "ghost"],
|
|
98
|
+
color: "success",
|
|
99
|
+
className: "text-typography-success"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
variant: ["link", "ghost"],
|
|
103
|
+
color: "error",
|
|
104
|
+
className: "text-typography-error"
|
|
105
|
+
},
|
|
106
|
+
// ghost
|
|
107
|
+
{
|
|
108
|
+
variant: "ghost",
|
|
109
|
+
color: "primary",
|
|
110
|
+
className: "hover:bg-typography-primary/15"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
variant: "ghost",
|
|
114
|
+
color: "secondary",
|
|
115
|
+
className: "hover:bg-typography-secondary/15"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
variant: "ghost",
|
|
119
|
+
color: "success",
|
|
120
|
+
className: "hover:bg-typography-success/15"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
variant: "ghost",
|
|
124
|
+
color: "error",
|
|
125
|
+
className: "hover:bg-typography-error/15"
|
|
126
|
+
}
|
|
127
|
+
],
|
|
128
|
+
defaultVariants: {
|
|
129
|
+
variant: "contained",
|
|
130
|
+
size: "md",
|
|
131
|
+
color: "primary",
|
|
132
|
+
disabled: !1,
|
|
133
|
+
rounded: !1
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
export {
|
|
138
|
+
e as buttonIconVariants
|
|
139
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACjE,cAAc,sBAAsB,CAAC;AACrC,mBAAmB,oBAAoB,CAAC"}
|