@oneplatformdev/ui 0.1.99-beta.1 → 0.1.99-beta.2
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/.storybook/Wrappers.js +30 -0
- package/.storybook/Wrappers.js.map +1 -0
- package/Button/Button.d.ts +58 -0
- package/Button/Button.d.ts.map +1 -1
- package/Button/Button.js +53 -56
- package/Button/Button.js.map +1 -1
- package/Button/Button.s.d.ts +83 -0
- package/Button/Button.s.d.ts.map +1 -0
- package/Button/Button.s.js +163 -0
- package/Button/Button.s.js.map +1 -0
- package/Button/Button.stories.js +218 -73
- package/Button/Button.stories.js.map +1 -1
- package/Button/Button.types.d.ts +29 -6
- package/Button/Button.types.d.ts.map +1 -1
- package/Button/buttonVariants.d.ts +4 -12
- package/Button/buttonVariants.d.ts.map +1 -1
- package/Button/buttonVariants.js +6 -7
- package/Button/buttonVariants.js.map +1 -1
- package/ButtonIcon/ButtonIcon.d.ts +1 -0
- package/ButtonIcon/ButtonIcon.d.ts.map +1 -1
- package/ButtonIcon/ButtonIcon.js +20 -19
- package/ButtonIcon/ButtonIcon.js.map +1 -1
- package/ButtonIcon/ButtonIcon.stories.js +40 -35
- package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
- package/ButtonIcon/ButtonIcon.types.d.ts +5 -8
- package/ButtonIcon/ButtonIcon.types.d.ts.map +1 -1
- package/ButtonIcon/buttonIconVariants.d.ts +3 -1
- package/ButtonIcon/buttonIconVariants.d.ts.map +1 -1
- package/ButtonIcon/buttonIconVariants.js +1 -1
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +8 -0
- package/LoadedIcon/LoadedIcon.d.ts +1 -1
- package/LoadedIcon/LoadedIcon.d.ts.map +1 -1
- package/LoadedIcon/LoadedIcon.js +15 -13
- package/LoadedIcon/LoadedIcon.js.map +1 -1
- package/package.json +4 -4
package/ButtonIcon/ButtonIcon.js
CHANGED
|
@@ -7,34 +7,34 @@ import "@radix-ui/react-tooltip";
|
|
|
7
7
|
import { Tooltip as C } from "../Tooltip/Tooltip.js";
|
|
8
8
|
import { LoadedIcon as R } from "../LoadedIcon/LoadedIcon.js";
|
|
9
9
|
const j = I.forwardRef(
|
|
10
|
-
(
|
|
10
|
+
(c, p) => {
|
|
11
11
|
const {
|
|
12
12
|
asChild: r,
|
|
13
13
|
children: o,
|
|
14
14
|
disabled: s = !1,
|
|
15
15
|
loading: t = !1,
|
|
16
|
-
message:
|
|
17
|
-
title:
|
|
18
|
-
tooltipProps:
|
|
19
|
-
className:
|
|
20
|
-
variant:
|
|
21
|
-
color:
|
|
22
|
-
size:
|
|
16
|
+
message: l,
|
|
17
|
+
title: d = "",
|
|
18
|
+
tooltipProps: a = {},
|
|
19
|
+
className: f,
|
|
20
|
+
variant: u,
|
|
21
|
+
color: b,
|
|
22
|
+
size: i,
|
|
23
23
|
rounded: g,
|
|
24
24
|
...h
|
|
25
|
-
} =
|
|
25
|
+
} = c, v = r ? B : "button", e = l || d, y = r ? o : !!o && /* @__PURE__ */ n(R, { loading: t, size: i, children: o }), m = /* @__PURE__ */ n(
|
|
26
26
|
v,
|
|
27
27
|
{
|
|
28
28
|
type: "button",
|
|
29
|
-
ref:
|
|
29
|
+
ref: p,
|
|
30
30
|
disabled: s,
|
|
31
31
|
className: N(
|
|
32
32
|
x({
|
|
33
|
-
variant:
|
|
34
|
-
size:
|
|
35
|
-
color:
|
|
33
|
+
variant: u,
|
|
34
|
+
size: i,
|
|
35
|
+
color: b,
|
|
36
36
|
rounded: g,
|
|
37
|
-
className:
|
|
37
|
+
className: f
|
|
38
38
|
}),
|
|
39
39
|
t && "pointer-events-none opacity-80"
|
|
40
40
|
),
|
|
@@ -45,16 +45,17 @@ const j = I.forwardRef(
|
|
|
45
45
|
return e ? /* @__PURE__ */ n(
|
|
46
46
|
C,
|
|
47
47
|
{
|
|
48
|
-
...
|
|
49
|
-
open:
|
|
48
|
+
...a || {},
|
|
49
|
+
open: a.open ?? (s || t || !e) ? !1 : void 0,
|
|
50
50
|
message: e,
|
|
51
|
-
children:
|
|
51
|
+
children: m
|
|
52
52
|
}
|
|
53
|
-
) :
|
|
53
|
+
) : m;
|
|
54
54
|
}
|
|
55
55
|
);
|
|
56
56
|
j.displayName = "Button";
|
|
57
57
|
export {
|
|
58
|
-
j as ButtonIcon
|
|
58
|
+
j as ButtonIcon,
|
|
59
|
+
j as default
|
|
59
60
|
};
|
|
60
61
|
//# sourceMappingURL=ButtonIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.js","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { buttonIconVariants } from './buttonIconVariants';\nimport { ButtonIconProps } from './ButtonIcon.types';\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { Tooltip } from '../Tooltip';\nimport { LoadedIcon } from \"../LoadedIcon\";\n\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\n (props, ref) => {\n const {\n asChild,\n children,\n disabled = false,\n loading = false,\n message,\n title = '',\n tooltipProps = {},\n className,\n variant,\n color,\n size,\n rounded,\n ...rest\n } = props;\n\n const Comp = asChild ? Slot : \"button\"\n const msg = message || title;\n\n const content = asChild\n ? children\n : !!children && <LoadedIcon loading={loading}>{children}</LoadedIcon>\n\n const cmp = (\n <Comp\n type='button'\n ref={ref}\n disabled={disabled}\n className={cn(\n buttonIconVariants({\n variant, size, color, rounded,\n className\n }),\n loading && 'pointer-events-none opacity-80',\n )}\n {...rest}\n >\n {content}\n </Comp>\n )\n\n if (!msg) return cmp\n return (\n <Tooltip\n {...(tooltipProps || {})}\n open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\n message={msg}\n >\n {cmp}\n </Tooltip>\n )\n }\n)\nButtonIcon.displayName = \"Button\"\n"],"names":["ButtonIcon","React","props","ref","asChild","children","disabled","loading","message","title","tooltipProps","className","variant","color","size","rounded","rest","Comp","Slot","msg","content","jsx","LoadedIcon","cmp","cn","buttonIconVariants","Tooltip"],"mappings":";;;;;;;;AAUO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,SAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,cAAAC,IAAe,CAAA;AAAA,MACf,WAAAC;AAAA,MACA,SAAAC;AAAA,MACA,OAAAC;AAAA,MACA,MAAAC;AAAA,MACA,SAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDd,GAEEe,IAAOb,IAAUc,IAAO,UACxBC,IAAMX,KAAWC,GAEjBW,IAAUhB,IACZC,IACA,CAAC,CAACA,KAAY,gBAAAgB,EAACC,GAAA,EAAW,SAAAf,
|
|
1
|
+
{"version":3,"file":"ButtonIcon.js","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { buttonIconVariants } from './buttonIconVariants';\nimport { ButtonIconProps } from './ButtonIcon.types';\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { Tooltip } from '../Tooltip';\nimport { LoadedIcon } from \"../LoadedIcon\";\n\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\n (props, ref) => {\n const {\n asChild,\n children,\n disabled = false,\n loading = false,\n message,\n title = '',\n tooltipProps = {},\n className,\n variant,\n color,\n size,\n rounded,\n ...rest\n } = props;\n\n const Comp = asChild ? Slot : \"button\"\n const msg = message || title;\n\n const content = asChild\n ? children\n : !!children && <LoadedIcon loading={loading} size={size}>{children}</LoadedIcon>\n\n const cmp = (\n <Comp\n type='button'\n ref={ref}\n disabled={disabled}\n className={cn(\n buttonIconVariants({\n variant, size, color, rounded,\n className\n }),\n loading && 'pointer-events-none opacity-80',\n )}\n {...rest}\n >\n {content}\n </Comp>\n )\n\n if (!msg) return cmp\n return (\n <Tooltip\n {...(tooltipProps || {})}\n open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\n message={msg}\n >\n {cmp}\n </Tooltip>\n )\n }\n)\nButtonIcon.displayName = \"Button\"\nexport default ButtonIcon;\n"],"names":["ButtonIcon","React","props","ref","asChild","children","disabled","loading","message","title","tooltipProps","className","variant","color","size","rounded","rest","Comp","Slot","msg","content","jsx","LoadedIcon","cmp","cn","buttonIconVariants","Tooltip"],"mappings":";;;;;;;;AAUO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,SAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,cAAAC,IAAe,CAAA;AAAA,MACf,WAAAC;AAAA,MACA,SAAAC;AAAA,MACA,OAAAC;AAAA,MACA,MAAAC;AAAA,MACA,SAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDd,GAEEe,IAAOb,IAAUc,IAAO,UACxBC,IAAMX,KAAWC,GAEjBW,IAAUhB,IACZC,IACA,CAAC,CAACA,KAAY,gBAAAgB,EAACC,GAAA,EAAW,SAAAf,GAAkB,MAAAO,GAAa,UAAAT,EAAA,CAAS,GAEhEkB,IACJ,gBAAAF;AAAA,MAACJ;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAd;AAAA,QACA,UAAAG;AAAA,QACA,WAAWkB;AAAA,UACTC,EAAmB;AAAA,YACjB,SAAAb;AAAA,YAAS,MAAAE;AAAA,YAAM,OAAAD;AAAA,YAAO,SAAAE;AAAA,YACtB,WAAAJ;AAAA,UAAA,CACD;AAAA,UACDJ,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGS;AAAA,QAEH,UAAAI;AAAA,MAAA;AAAA,IAAA;AAIL,WAAKD,IAEH,gBAAAE;AAAA,MAACK;AAAA,MAAA;AAAA,QACE,GAAIhB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASJ,KAAYC,KAAW,CAACY,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAI;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACAvB,EAAW,cAAc;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsx as o, jsxs as
|
|
2
|
-
import { ButtonIcon as
|
|
1
|
+
import { jsx as o, jsxs as r } from "react/jsx-runtime";
|
|
2
|
+
import { ButtonIcon as d } from "./ButtonIcon.js";
|
|
3
3
|
import { PlusIcon as u } from "lucide-react";
|
|
4
|
-
const
|
|
5
|
-
|
|
4
|
+
const m = (e) => /* @__PURE__ */ o(d, { ...e });
|
|
5
|
+
m.args = {
|
|
6
6
|
onClick: { action: (e) => e }
|
|
7
7
|
};
|
|
8
8
|
const p = (e) => /* @__PURE__ */ o(
|
|
@@ -29,7 +29,7 @@ const p = (e) => /* @__PURE__ */ o(
|
|
|
29
29
|
}
|
|
30
30
|
)
|
|
31
31
|
}
|
|
32
|
-
),
|
|
32
|
+
), t = (e) => /* @__PURE__ */ o(
|
|
33
33
|
"div",
|
|
34
34
|
{
|
|
35
35
|
style: {
|
|
@@ -38,32 +38,32 @@ const p = (e) => /* @__PURE__ */ o(
|
|
|
38
38
|
flexDirection: "column",
|
|
39
39
|
gap: "16px"
|
|
40
40
|
},
|
|
41
|
-
children: ["default", "hover", "focus", "active", "disabled"].map((
|
|
42
|
-
|
|
41
|
+
children: ["default", "hover", "focus", "active", "disabled"].map((a) => /* @__PURE__ */ o(
|
|
42
|
+
d,
|
|
43
43
|
{
|
|
44
|
-
id:
|
|
44
|
+
id: a,
|
|
45
45
|
...e,
|
|
46
|
-
disabled:
|
|
46
|
+
disabled: a === "disabled" || e.disabled,
|
|
47
47
|
children: e.children
|
|
48
48
|
},
|
|
49
|
-
|
|
49
|
+
a
|
|
50
50
|
))
|
|
51
51
|
}
|
|
52
|
-
), c = (e) => /* @__PURE__ */
|
|
53
|
-
/* @__PURE__ */
|
|
54
|
-
/* @__PURE__ */ o(
|
|
55
|
-
/* @__PURE__ */ o(
|
|
56
|
-
/* @__PURE__ */ o(
|
|
52
|
+
), c = (e) => /* @__PURE__ */ r("div", { className: "flex", children: [
|
|
53
|
+
/* @__PURE__ */ r(p, { children: [
|
|
54
|
+
/* @__PURE__ */ o(t, { ...e, variant: "contained" }),
|
|
55
|
+
/* @__PURE__ */ o(t, { ...e, variant: "outlined" }),
|
|
56
|
+
/* @__PURE__ */ o(t, { ...e, variant: "ghost" })
|
|
57
57
|
] }),
|
|
58
|
-
/* @__PURE__ */
|
|
59
|
-
/* @__PURE__ */ o(
|
|
60
|
-
/* @__PURE__ */ o(
|
|
61
|
-
/* @__PURE__ */ o(
|
|
58
|
+
/* @__PURE__ */ r(p, { children: [
|
|
59
|
+
/* @__PURE__ */ o(t, { ...e, variant: "contained", rounded: !0 }),
|
|
60
|
+
/* @__PURE__ */ o(t, { ...e, variant: "outlined", rounded: !0 }),
|
|
61
|
+
/* @__PURE__ */ o(t, { ...e, variant: "ghost", rounded: !0 })
|
|
62
62
|
] })
|
|
63
|
-
] }), i = ["contained", "outlined", "ghost"], l = ["primary", "secondary", "error"],
|
|
63
|
+
] }), i = ["contained", "outlined", "ghost"], l = ["primary", "secondary", "error"], s = ["xs", "sm", "md", "lg"], b = {
|
|
64
64
|
title: "ButtonIcon",
|
|
65
|
-
component:
|
|
66
|
-
render:
|
|
65
|
+
component: d,
|
|
66
|
+
render: m,
|
|
67
67
|
args: {
|
|
68
68
|
asChild: !1,
|
|
69
69
|
disabled: !1,
|
|
@@ -72,7 +72,7 @@ const p = (e) => /* @__PURE__ */ o(
|
|
|
72
72
|
children: /* @__PURE__ */ o(u, {}),
|
|
73
73
|
variant: i[0],
|
|
74
74
|
color: l[0],
|
|
75
|
-
size:
|
|
75
|
+
size: s[0],
|
|
76
76
|
message: ""
|
|
77
77
|
},
|
|
78
78
|
argTypes: {
|
|
@@ -98,15 +98,20 @@ const p = (e) => /* @__PURE__ */ o(
|
|
|
98
98
|
size: {
|
|
99
99
|
name: "size",
|
|
100
100
|
description: "ButtonIcon size",
|
|
101
|
-
defaultValue:
|
|
102
|
-
options:
|
|
101
|
+
defaultValue: s[0],
|
|
102
|
+
options: s,
|
|
103
103
|
control: { type: "inline-radio" }
|
|
104
104
|
},
|
|
105
|
-
|
|
106
|
-
name: "
|
|
107
|
-
description: "ButtonIcon tooltip
|
|
105
|
+
title: {
|
|
106
|
+
name: "title",
|
|
107
|
+
description: "ButtonIcon tooltip title from HTMLAttributes<HTMLButtonElement> [string only]",
|
|
108
108
|
control: { type: "text" }
|
|
109
109
|
},
|
|
110
|
+
message: {
|
|
111
|
+
name: "message",
|
|
112
|
+
description: "ButtonIcon tooltip message from ButtonProps [ReactNode]",
|
|
113
|
+
control: { type: "object" }
|
|
114
|
+
},
|
|
110
115
|
disabled: {
|
|
111
116
|
name: "disabled",
|
|
112
117
|
description: "ButtonIcon disabled",
|
|
@@ -137,7 +142,7 @@ const p = (e) => /* @__PURE__ */ o(
|
|
|
137
142
|
loading: !1,
|
|
138
143
|
rounded: !1,
|
|
139
144
|
children: /* @__PURE__ */ o(u, {})
|
|
140
|
-
},
|
|
145
|
+
}, B = { args: n }, f = {
|
|
141
146
|
args: {
|
|
142
147
|
...n,
|
|
143
148
|
color: "primary",
|
|
@@ -149,10 +154,10 @@ const p = (e) => /* @__PURE__ */ o(
|
|
|
149
154
|
},
|
|
150
155
|
render: c
|
|
151
156
|
};
|
|
152
|
-
|
|
157
|
+
f.parameters = {
|
|
153
158
|
controls: { exclude: ["variant", "color"] }
|
|
154
159
|
};
|
|
155
|
-
const
|
|
160
|
+
const g = {
|
|
156
161
|
args: {
|
|
157
162
|
...n,
|
|
158
163
|
color: "secondary",
|
|
@@ -164,7 +169,7 @@ const m = {
|
|
|
164
169
|
},
|
|
165
170
|
render: c
|
|
166
171
|
};
|
|
167
|
-
|
|
172
|
+
g.parameters = {
|
|
168
173
|
controls: { exclude: ["variant", "color"] }
|
|
169
174
|
};
|
|
170
175
|
const v = {
|
|
@@ -183,10 +188,10 @@ v.parameters = {
|
|
|
183
188
|
controls: { exclude: ["variant", "color"] }
|
|
184
189
|
};
|
|
185
190
|
export {
|
|
186
|
-
|
|
191
|
+
B as Default,
|
|
187
192
|
v as Error,
|
|
188
|
-
|
|
189
|
-
|
|
193
|
+
f as Primary,
|
|
194
|
+
g as Secondary,
|
|
190
195
|
b as default
|
|
191
196
|
};
|
|
192
197
|
//# sourceMappingURL=ButtonIcon.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.stories.js","sources":["../../src/ButtonIcon/ButtonIcon.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { ButtonIcon } from './ButtonIcon';\nimport type { ButtonIconProps } from './ButtonIcon.types';\nimport React, { PropsWithChildren } from 'react';\nimport { PlusIcon } from 'lucide-react'\n\nconst Template = (props: ButtonIconProps) => <ButtonIcon {...props}/>\nTemplate.args = {\n onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\n};\n\nconst DashedWrapper = (props: PropsWithChildren) => {\n return (\n <div\n style={{\n padding: '0px 20px',\n display: 'flex',\n gap: '32px',\n alignItems: 'flex-start',\n }}\n >\n <div\n style={{\n position: 'relative',\n border: '2px dashed rgba(139, 92, 246, 0.7)',\n borderRadius: '24px',\n padding: '24px 32px',\n display: 'flex',\n gap: '32px',\n }}\n >\n {props.children}\n </div>\n </div>\n )\n}\n\nconst States = (props: ButtonIconProps) => (\n <div\n style={{\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n }}\n >\n {[ 'default', 'hover', 'focus', 'active', 'disabled' ]\n .map((state) => (\n <ButtonIcon\n key={state}\n id={state}\n {...props}\n disabled={state === 'disabled' || props.disabled}\n >\n {props.children}\n </ButtonIcon>\n ))}\n </div>\n);\n\nconst StateRender = (props: ButtonIconProps) => (\n <div className='flex'>\n <DashedWrapper>\n <States {...props} variant='contained'/>\n <States {...props} variant='outlined'/>\n <States {...props} variant='ghost'/>\n </DashedWrapper>\n <DashedWrapper>\n <States {...props} variant='contained' rounded/>\n <States {...props} variant='outlined' rounded/>\n <States {...props} variant='ghost' rounded/>\n </DashedWrapper>\n </div>\n);\n\nconst variants: ButtonIconProps['variant'][] = [ 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonIconProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonIconProps['size'][] = [ 'md', 'lg' ]\n\nconst meta = {\n title: 'ButtonIcon',\n component: ButtonIcon,\n render: Template,\n args: {\n asChild: false,\n disabled: false,\n loading: false,\n rounded: false,\n children: <PlusIcon/>,\n variant: variants[0],\n color: colors[0],\n size: sizes[0],\n message: '',\n },\n argTypes: {\n asChild: {\n name: 'asChild',\n description: 'ButtonIcon asChild',\n control: false\n },\n variant: {\n name: 'variant',\n description: 'ButtonIcon variant',\n defaultValue: variants[0],\n options: variants,\n control: { type: 'inline-radio', },\n },\n color: {\n name: 'color',\n description: 'ButtonIcon color',\n defaultValue: colors[0],\n options: colors,\n control: { type: 'inline-radio' },\n },\n size: {\n name: 'size',\n description: 'ButtonIcon size',\n defaultValue: sizes[0],\n options: sizes,\n control: { type: 'inline-radio' },\n },\n message: {\n name: '
|
|
1
|
+
{"version":3,"file":"ButtonIcon.stories.js","sources":["../../src/ButtonIcon/ButtonIcon.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { ButtonIcon } from './ButtonIcon';\nimport type { ButtonIconProps } from './ButtonIcon.types';\nimport React, { PropsWithChildren } from 'react';\nimport { PlusIcon } from 'lucide-react'\n\nconst Template = (props: ButtonIconProps) => <ButtonIcon {...props}/>\nTemplate.args = {\n onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\n};\n\nconst DashedWrapper = (props: PropsWithChildren) => {\n return (\n <div\n style={{\n padding: '0px 20px',\n display: 'flex',\n gap: '32px',\n alignItems: 'flex-start',\n }}\n >\n <div\n style={{\n position: 'relative',\n border: '2px dashed rgba(139, 92, 246, 0.7)',\n borderRadius: '24px',\n padding: '24px 32px',\n display: 'flex',\n gap: '32px',\n }}\n >\n {props.children}\n </div>\n </div>\n )\n}\n\nconst States = (props: ButtonIconProps) => (\n <div\n style={{\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n }}\n >\n {[ 'default', 'hover', 'focus', 'active', 'disabled' ]\n .map((state) => (\n <ButtonIcon\n key={state}\n id={state}\n {...props}\n disabled={state === 'disabled' || props.disabled}\n >\n {props.children}\n </ButtonIcon>\n ))}\n </div>\n);\n\nconst StateRender = (props: ButtonIconProps) => (\n <div className='flex'>\n <DashedWrapper>\n <States {...props} variant='contained'/>\n <States {...props} variant='outlined'/>\n <States {...props} variant='ghost'/>\n </DashedWrapper>\n <DashedWrapper>\n <States {...props} variant='contained' rounded/>\n <States {...props} variant='outlined' rounded/>\n <States {...props} variant='ghost' rounded/>\n </DashedWrapper>\n </div>\n);\n\nconst variants: ButtonIconProps['variant'][] = [ 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonIconProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonIconProps['size'][] = [ 'xs', 'sm', 'md', 'lg' ]\n\nconst meta = {\n title: 'ButtonIcon',\n component: ButtonIcon,\n render: Template,\n args: {\n asChild: false,\n disabled: false,\n loading: false,\n rounded: false,\n children: <PlusIcon/>,\n variant: variants[0],\n color: colors[0],\n size: sizes[0],\n message: '',\n },\n argTypes: {\n asChild: {\n name: 'asChild',\n description: 'ButtonIcon asChild',\n control: false\n },\n variant: {\n name: 'variant',\n description: 'ButtonIcon variant',\n defaultValue: variants[0],\n options: variants,\n control: { type: 'inline-radio', },\n },\n color: {\n name: 'color',\n description: 'ButtonIcon color',\n defaultValue: colors[0],\n options: colors,\n control: { type: 'inline-radio' },\n },\n size: {\n name: 'size',\n description: 'ButtonIcon size',\n defaultValue: sizes[0],\n options: sizes,\n control: { type: 'inline-radio' },\n },\n title: {\n name: 'title',\n description: \"ButtonIcon tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\n control: { type: 'text' },\n },\n message: {\n name: 'message',\n description: 'ButtonIcon tooltip message from ButtonProps [ReactNode]',\n control: { type: \"object\" },\n },\n disabled: {\n name: 'disabled',\n description: 'ButtonIcon disabled',\n control: { type: 'boolean' }\n },\n rounded: {\n name: 'rounded',\n description: 'ButtonIcon rounded',\n control: { type: 'boolean' }\n },\n loading: {\n name: 'loading',\n description: 'ButtonIcon loading',\n control: { type: 'boolean' }\n },\n },\n parameters: {\n pseudo: {\n hover: '#hover',\n focus: '#focus',\n active: '#active',\n disabled: '#disabled',\n },\n }\n} satisfies Meta<typeof ButtonIcon>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\nconst args: Story['args'] = {\n asChild: false,\n disabled: false,\n loading: false,\n rounded: false,\n children: <PlusIcon/>,\n}\n\nexport const Default: Story = { args };\n\nexport const Primary: Story = {\n args: {\n ...args,\n color: 'primary',\n size: 'lg',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: StateRender,\n};\nPrimary.parameters = {\n controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Secondary: Story = {\n args: {\n ...args,\n color: 'secondary',\n size: 'lg',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: StateRender,\n};\nSecondary.parameters = {\n controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Error: Story = {\n args: {\n ...args,\n color: 'error',\n size: 'lg',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: StateRender,\n};\nError.parameters = {\n controls: { exclude: [ 'variant', 'color' ] },\n}\n"],"names":["Template","props","jsx","ButtonIcon","DashedWrapper","States","state","StateRender","jsxs","variants","colors","sizes","meta","PlusIcon","args","Default","Primary","Secondary","Error"],"mappings":"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"}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export interface ButtonIconProps extends
|
|
6
|
-
asChild?: boolean;
|
|
7
|
-
loading?: boolean;
|
|
8
|
-
tooltipProps?: TooltipProps;
|
|
1
|
+
import { ButtonIconVarianceProps } from './buttonIconVariants';
|
|
2
|
+
import { ButtonBaseProps } from '../Button';
|
|
3
|
+
export interface ButtonIconSlotProps {
|
|
4
|
+
}
|
|
5
|
+
export interface ButtonIconProps extends ButtonBaseProps<ButtonIconVarianceProps, ButtonIconSlotProps> {
|
|
9
6
|
}
|
|
10
7
|
//# sourceMappingURL=ButtonIcon.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.types.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"ButtonIcon.types.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EACL,KAAK,eAAe,EACrB,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,mBAAmB;CAAG;AAEvC,MAAM,WAAW,eACf,SAAQ,eAAe,CAAC,uBAAuB,EAAE,mBAAmB,CAAC;CACtE"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
1
2
|
export declare const buttonIconVariants: (props?: ({
|
|
2
3
|
variant?: "none" | "contained" | "outlined" | "ghost" | null | undefined;
|
|
3
4
|
color?: "secondary" | "primary" | "error" | null | undefined;
|
|
4
|
-
size?: "
|
|
5
|
+
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
5
6
|
rounded?: boolean | null | undefined;
|
|
6
7
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
8
|
+
export type ButtonIconVarianceProps = VariantProps<typeof buttonIconVariants>;
|
|
7
9
|
//# sourceMappingURL=buttonIconVariants.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonIconVariants.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"buttonIconVariants.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,kBAAkB;;;;;8EAsJ9B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
|
|
@@ -7,7 +7,7 @@ const a = r(
|
|
|
7
7
|
"cursor-pointer box-border",
|
|
8
8
|
"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent",
|
|
9
9
|
"disabled:pointer-events-none disabled:cursor-default",
|
|
10
|
-
"[&_svg]:pointer-events-none [&_svg]:
|
|
10
|
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0"
|
|
11
11
|
],
|
|
12
12
|
{
|
|
13
13
|
variants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonIconVariants.js","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonIconVariants = cva(\n [\n \"inline-flex items-center justify-center\",\n 'whitespace-nowrap font-medium aspect-square',\n 'cursor-pointer box-border',\n \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n \"disabled:pointer-events-none disabled:cursor-default\",\n \"[&_svg]:pointer-events-none [&_svg]:
|
|
1
|
+
{"version":3,"file":"buttonIconVariants.js","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonIconVariants = cva(\n [\n \"inline-flex items-center justify-center\",\n 'whitespace-nowrap font-medium aspect-square',\n 'cursor-pointer box-border',\n \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n \"disabled:pointer-events-none disabled:cursor-default\",\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n ],\n {\n variants: {\n variant: {\n none: '',\n contained: '',\n outlined: '',\n ghost: \"\",\n },\n color: {\n primary: \"\",\n secondary: \"\",\n error: \"\"\n },\n size: {\n xs: 'w-4 h-4 size-4 rounded-lg p-0 [&_svg]:size-3',\n sm: 'w-6 h-6 size-6 rounded-lg p-0 [&_svg]:size-4',\n md: 'w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5',\n lg: 'w-10 h-10 size-10 rounded-lg p-2 [&_svg]:size-6',\n },\n rounded: {\n true: \"rounded-full\",\n false: \"\",\n },\n },\n compoundVariants: [\n // PRIMARY BUTTON VARIANTS\n {\n color: 'primary',\n variant: 'contained',\n className: cn(\n 'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n 'hover:bg-[#7F4EEB]',\n 'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\n 'active:bg-[#6B3DD9]',\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'primary',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\n 'hover:bg-[#9368FF0F]',\n 'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'primary',\n variant: 'ghost',\n className: cn(\n 'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\n 'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\n 'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\n 'active:bg-[#9368FF0F]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // SECONDARY BUTTON VARIANTS\n {\n color: 'secondary',\n variant: 'contained',\n className: cn(\n 'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'secondary',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'secondary',\n variant: 'ghost',\n className: cn(\n 'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\n 'hover:bg-[#F9FAFB]',\n 'focus:bg-[#FCFCFC]',\n 'active:bg-[#F9FAFB]',\n 'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // ERROR BUTTON VARIANTS\n {\n color: 'error',\n variant: 'contained',\n className: cn(\n 'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n 'hover:bg-[#DC2626]',\n 'focus:bg-[#DC2626]',\n 'active:bg-[#DC2626]',\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'error',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\n 'hover:bg-[#EF44440F]',\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'error',\n variant: 'ghost',\n className: cn(\n 'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\n 'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // ROUNDED BUTTON VARIANTS\n {\n variant: 'ghost',\n rounded: true,\n className: cn(\n 'shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n ],\n defaultVariants: {\n color: \"primary\",\n variant: \"contained\",\n size: \"lg\",\n rounded: false,\n },\n }\n)\n\nexport type ButtonIconVarianceProps = VariantProps<typeof buttonIconVariants>;\n"],"names":["buttonIconVariants","cva","cn"],"mappings":";;AAGO,MAAMA,IAAqBC;AAAA,EAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAWA;AAAA,UACX;AAAA,UACE;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## 0.1.99-beta.2 (2025-12-29)
|
|
2
|
+
|
|
3
|
+
### 🧱 Updated Dependencies
|
|
4
|
+
|
|
5
|
+
- Updated @oneplatformdev/utils to 0.1.99-beta.2
|
|
6
|
+
- Updated @oneplatformdev/hooks to 0.1.99-beta.2
|
|
7
|
+
- Updated @oneplatformdev/tokens to 0.1.99-beta.2
|
|
8
|
+
|
|
1
9
|
## 0.1.99-beta.1 (2025-12-29)
|
|
2
10
|
|
|
3
11
|
### 🩹 Fixes
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
import { FC, HTMLAttributes, PropsWithChildren } from 'react';
|
|
3
3
|
declare const loadedIconVariants: (props?: ({
|
|
4
|
-
size?: "
|
|
4
|
+
size?: "inherit" | "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
5
5
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
6
6
|
interface ILoadedIconProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof loadedIconVariants> {
|
|
7
7
|
loading?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadedIcon.d.ts","sourceRoot":"","sources":["../../src/LoadedIcon/LoadedIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI9D,QAAA,MAAM,kBAAkB;;
|
|
1
|
+
{"version":3,"file":"LoadedIcon.d.ts","sourceRoot":"","sources":["../../src/LoadedIcon/LoadedIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI9D,QAAA,MAAM,kBAAkB;;8EAWtB,CAAC;AAEH,UAAU,gBACT,SAAQ,cAAc,CAAC,cAAc,CAAC,EACrC,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAY9D,CAAC"}
|
package/LoadedIcon/LoadedIcon.js
CHANGED
|
@@ -1,28 +1,30 @@
|
|
|
1
1
|
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
-
import { cva as
|
|
3
|
-
import { LoaderCircleIcon as
|
|
2
|
+
import { cva as t } from "class-variance-authority";
|
|
3
|
+
import { LoaderCircleIcon as m } from "lucide-react";
|
|
4
4
|
import { cn as c } from "@oneplatformdev/utils";
|
|
5
|
-
const d =
|
|
5
|
+
const d = t([], {
|
|
6
6
|
variants: {
|
|
7
7
|
size: {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
inherit: "[&_svg]:size-inherit",
|
|
9
|
+
xs: "[&_svg]:size-3",
|
|
10
|
+
sm: "[&_svg]:size-4",
|
|
11
|
+
md: "[&_svg]:size-5",
|
|
12
|
+
lg: "[&_svg]:size-6"
|
|
11
13
|
}
|
|
12
14
|
},
|
|
13
|
-
defaultVariants: { size: "
|
|
14
|
-
}),
|
|
15
|
-
const { loading: e, children:
|
|
15
|
+
defaultVariants: { size: "inherit" }
|
|
16
|
+
}), p = (i) => {
|
|
17
|
+
const { loading: e, children: r, size: a = "md", className: n, ...o } = i;
|
|
16
18
|
return /* @__PURE__ */ s(
|
|
17
19
|
"div",
|
|
18
20
|
{
|
|
19
|
-
...
|
|
20
|
-
className: c(d({ size:
|
|
21
|
-
children: e ? /* @__PURE__ */ s(
|
|
21
|
+
...o,
|
|
22
|
+
className: c(d({ size: a, className: n })),
|
|
23
|
+
children: e ? /* @__PURE__ */ s(m, { className: "animate-spin" }) : r
|
|
22
24
|
}
|
|
23
25
|
);
|
|
24
26
|
};
|
|
25
27
|
export {
|
|
26
|
-
|
|
28
|
+
p as LoadedIcon
|
|
27
29
|
};
|
|
28
30
|
//# sourceMappingURL=LoadedIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadedIcon.js","sources":["../../src/LoadedIcon/LoadedIcon.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { LoaderCircleIcon } from 'lucide-react';\nimport { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\nimport { cn } from '@oneplatformdev/utils';\n\nconst loadedIconVariants = cva([], {\n variants: {\n size: {\n
|
|
1
|
+
{"version":3,"file":"LoadedIcon.js","sources":["../../src/LoadedIcon/LoadedIcon.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { LoaderCircleIcon } from 'lucide-react';\nimport { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\nimport { cn } from '@oneplatformdev/utils';\n\nconst loadedIconVariants = cva([], {\n variants: {\n size: {\n inherit: '[&_svg]:size-inherit',\n xs: '[&_svg]:size-3',\n sm: '[&_svg]:size-4',\n md: '[&_svg]:size-5',\n lg: '[&_svg]:size-6',\n },\n },\n defaultVariants: { size: 'inherit' },\n});\n\ninterface ILoadedIconProps\n\textends HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof loadedIconVariants> {\n\tloading?: boolean;\n}\n\nexport const LoadedIcon: FC<PropsWithChildren<ILoadedIconProps>> = (props) => {\n\tconst { loading, children, size = 'md', className, ...rest } = props;\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={cn(loadedIconVariants({size , className}))}\n\t\t>\n\t\t\t{loading\n\t\t\t\t? <LoaderCircleIcon className=\"animate-spin\"/>\n\t\t\t\t: children}\n\t\t</div>\n\t);\n};\n"],"names":["loadedIconVariants","cva","LoadedIcon","props","loading","children","size","className","rest","jsx","cn","LoaderCircleIcon"],"mappings":";;;;AAMA,MAAMA,IAAqBC,EAAI,IAAI;AAAA,EACjC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB,EAAE,MAAM,UAAA;AAC3B,CAAC,GAQYC,IAAsD,CAACC,MAAU;AAC7E,QAAM,EAAE,SAAAC,GAAS,UAAAC,GAAU,MAAAC,IAAO,MAAM,WAAAC,GAAW,GAAGC,MAASL;AAC/D,SACC,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWE,EAAGV,EAAmB,EAAC,MAAAM,GAAO,WAAAC,EAAA,CAAU,CAAC;AAAA,MAEnD,UAAAH,IACE,gBAAAK,EAACE,GAAA,EAAiB,WAAU,gBAAc,IAC1CN;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneplatformdev/ui",
|
|
3
|
-
"version": "0.1.99-beta.
|
|
3
|
+
"version": "0.1.99-beta.2",
|
|
4
4
|
"description": "UI component library for OnePlatform",
|
|
5
5
|
"author": "One Platform Development Team",
|
|
6
6
|
"keywords": [
|
|
@@ -105,8 +105,8 @@
|
|
|
105
105
|
"recharts": "^3.2.0",
|
|
106
106
|
"sonner": "^2.0.7",
|
|
107
107
|
"vaul": "^1.1.2",
|
|
108
|
-
"@oneplatformdev/hooks": "^0.1.99-beta.
|
|
109
|
-
"@oneplatformdev/tokens": "^0.1.99-beta.
|
|
110
|
-
"@oneplatformdev/utils": "^0.1.99-beta.
|
|
108
|
+
"@oneplatformdev/hooks": "^0.1.99-beta.2",
|
|
109
|
+
"@oneplatformdev/tokens": "^0.1.99-beta.2",
|
|
110
|
+
"@oneplatformdev/utils": "^0.1.99-beta.2"
|
|
111
111
|
}
|
|
112
112
|
}
|