@oneplatformdev/ui 0.1.99-beta.1 → 0.1.99-beta.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/.storybook/Wrappers.js +30 -0
- package/.storybook/Wrappers.js.map +1 -0
- package/Button/Button.d.ts +64 -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 +45 -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 +28 -0
- package/Input/Input.d.ts.map +1 -1
- package/Input/Input.js +51 -38
- package/Input/Input.js.map +1 -1
- package/Input/Input.types.d.ts +1 -0
- package/Input/Input.types.d.ts.map +1 -1
- 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":";;;;;;;;
|
|
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\n/**\n * Icon-only version of the Button component.\n *\n * `ButtonIcon` is used for compact actions represented by an icon instead of text.\n * Supports all core features of Button: variants, sizes, tooltips, disabled and loading state.\n *\n * @example\n * > Basic usage:\n * ```tsx\n * <ButtonIcon>\n * <PlusIcon />\n * </ButtonIcon>\n * ```\n *\n * @example\n * > With variant & color:\n * ```tsx\n * <ButtonIcon variant=\"outline\" color=\"primary\">\n * <Search />\n * </ButtonIcon>\n * ```\n *\n * @example\n * > With tooltip message:\n * ```tsx\n * <ButtonIcon message=\"Edit item\">\n * <PencilLine />\n * </ButtonIcon>\n * ```\n *\n * @example\n * > Loading state:\n * ```tsx\n * <ButtonIcon loading>\n * <Trash2 />\n * </ButtonIcon>\n * ```\n *\n * @remarks\n * - Designed for icon-only usage. If you need text, use `Button`.\n * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.\n *\n * @see {@link Button} for regular text buttons\n */\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":";;;;;;;;AAuDO,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,31 @@
|
|
|
1
|
+
## 0.1.99-beta.3 (2025-12-29)
|
|
2
|
+
|
|
3
|
+
### 🚀 Features
|
|
4
|
+
|
|
5
|
+
- **Button:** add storybook integration with loading and tooltip support ([e7a2e21](https://github.com/oneplatformdev/core-web/commit/e7a2e21))
|
|
6
|
+
|
|
7
|
+
### 🩹 Fixes
|
|
8
|
+
|
|
9
|
+
- **Button:** update tooltip handling and remove deprecated size variants ([de56165](https://github.com/oneplatformdev/core-web/commit/de56165))
|
|
10
|
+
|
|
11
|
+
### 🧱 Updated Dependencies
|
|
12
|
+
|
|
13
|
+
- Updated @oneplatformdev/utils to 0.1.99-beta.3
|
|
14
|
+
- Updated @oneplatformdev/hooks to 0.1.99-beta.3
|
|
15
|
+
- Updated @oneplatformdev/tokens to 0.1.99-beta.3
|
|
16
|
+
|
|
17
|
+
### ❤️ Thank You
|
|
18
|
+
|
|
19
|
+
- Bohdan Radchenko
|
|
20
|
+
|
|
21
|
+
## 0.1.99-beta.2 (2025-12-29)
|
|
22
|
+
|
|
23
|
+
### 🧱 Updated Dependencies
|
|
24
|
+
|
|
25
|
+
- Updated @oneplatformdev/utils to 0.1.99-beta.2
|
|
26
|
+
- Updated @oneplatformdev/hooks to 0.1.99-beta.2
|
|
27
|
+
- Updated @oneplatformdev/tokens to 0.1.99-beta.2
|
|
28
|
+
|
|
1
29
|
## 0.1.99-beta.1 (2025-12-29)
|
|
2
30
|
|
|
3
31
|
### 🩹 Fixes
|
package/Input/Input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,SAAS,qFAmDrB,CAAC;AAGF,eAAO,MAAM,aAAa,qFAiBzB,CAAC;AAkBF,eAAO,MAAM,KAAK,qFAKjB,CAAC"}
|
package/Input/Input.js
CHANGED
|
@@ -1,73 +1,86 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import { Eye as
|
|
4
|
-
import { inputVariants as
|
|
1
|
+
import { jsxs as w, jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import u, { useState as v } from "react";
|
|
3
|
+
import { Eye as h, EyeOff as P } from "lucide-react";
|
|
4
|
+
import { inputVariants as x } from "./inputVariants.js";
|
|
5
5
|
import { cn as p } from "@oneplatformdev/utils";
|
|
6
|
-
const m =
|
|
6
|
+
const m = u.forwardRef(
|
|
7
7
|
(t, a) => {
|
|
8
8
|
const {
|
|
9
9
|
className: e,
|
|
10
10
|
variant: o,
|
|
11
11
|
type: n,
|
|
12
|
-
slotProps: { input: l, wrapper:
|
|
12
|
+
slotProps: { input: l, wrapper: c } = {},
|
|
13
13
|
onChange: f,
|
|
14
14
|
onTransform: d,
|
|
15
|
-
|
|
15
|
+
fullSize: N = !1,
|
|
16
|
+
...g
|
|
16
17
|
} = t, {
|
|
17
18
|
startAdornment: i,
|
|
18
|
-
className:
|
|
19
|
-
...
|
|
19
|
+
className: I,
|
|
20
|
+
...b
|
|
20
21
|
} = l || {};
|
|
21
|
-
return /* @__PURE__ */
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
),
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
22
|
+
return /* @__PURE__ */ w(
|
|
23
|
+
"div",
|
|
24
|
+
{
|
|
25
|
+
...c || {},
|
|
26
|
+
className: p(
|
|
27
|
+
"relative",
|
|
28
|
+
N && "w-full",
|
|
29
|
+
c?.className
|
|
30
|
+
),
|
|
31
|
+
children: [
|
|
32
|
+
!!i && /* @__PURE__ */ s("span", { className: "absolute left-[10px] top-1/2 -translate-y-1/2", children: i }),
|
|
33
|
+
/* @__PURE__ */ s(
|
|
34
|
+
"input",
|
|
35
|
+
{
|
|
36
|
+
type: n,
|
|
37
|
+
className: p(
|
|
38
|
+
x({ variant: o, className: e }),
|
|
39
|
+
N && "min-w-auto",
|
|
40
|
+
!!i && "pl-8",
|
|
41
|
+
I
|
|
42
|
+
),
|
|
43
|
+
ref: a,
|
|
44
|
+
...b,
|
|
45
|
+
...g,
|
|
46
|
+
onChange: (r) => {
|
|
47
|
+
typeof d?.(r.target.value, r) == "string" && (r.target.value = d(r.target.value, r)), f && f(r);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
)
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
);
|
|
41
54
|
}
|
|
42
55
|
);
|
|
43
56
|
m.displayName = "Input";
|
|
44
|
-
const y =
|
|
57
|
+
const y = u.forwardRef(
|
|
45
58
|
(t, a) => {
|
|
46
|
-
const [e, o] =
|
|
59
|
+
const [e, o] = v(!1), n = e ? "text" : "password", l = () => {
|
|
47
60
|
o(!e);
|
|
48
61
|
};
|
|
49
|
-
return /* @__PURE__ */
|
|
62
|
+
return /* @__PURE__ */ w("div", { ...t?.slotProps?.wrapper || {}, className: p("relative", t?.slotProps?.wrapper?.className), children: [
|
|
50
63
|
/* @__PURE__ */ s(m, { ...t, type: n, className: "pr-8", ref: a }),
|
|
51
|
-
/* @__PURE__ */ s(
|
|
64
|
+
/* @__PURE__ */ s(V, { isVisible: e, onClick: l })
|
|
52
65
|
] });
|
|
53
66
|
}
|
|
54
67
|
);
|
|
55
68
|
y.displayName = "PasswordInput";
|
|
56
|
-
const
|
|
69
|
+
const V = ({ isVisible: t, onClick: a }) => /* @__PURE__ */ s(
|
|
57
70
|
"button",
|
|
58
71
|
{
|
|
59
72
|
type: "button",
|
|
60
73
|
onClick: a,
|
|
61
74
|
className: "absolute top-1/2 right-3 transform -translate-y-1/2",
|
|
62
|
-
children: t ? /* @__PURE__ */ s(
|
|
75
|
+
children: t ? /* @__PURE__ */ s(h, { size: 16 }) : /* @__PURE__ */ s(P, { size: 16 })
|
|
63
76
|
}
|
|
64
|
-
),
|
|
77
|
+
), B = u.forwardRef(
|
|
65
78
|
({ type: t, ...a }, e) => t === "password" ? /* @__PURE__ */ s(y, { type: t, ...a, ref: e }) : /* @__PURE__ */ s(m, { type: t, ...a, ref: e })
|
|
66
79
|
);
|
|
67
|
-
|
|
80
|
+
B.displayName = "Input";
|
|
68
81
|
export {
|
|
69
82
|
m as BaseInput,
|
|
70
|
-
|
|
83
|
+
B as Input,
|
|
71
84
|
y as PasswordInput
|
|
72
85
|
};
|
|
73
86
|
//# sourceMappingURL=Input.js.map
|
package/Input/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../src/Input/Input.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { inputVariants } from './inputVariants';\n\nimport { cn } from '@oneplatformdev/utils';\nimport { InputProps } from './Input.types';\n\nexport const BaseInput = React.forwardRef<HTMLInputElement, InputProps>(\n (props, ref) => {\n const {\n className,\n variant,\n type,\n slotProps: { input, wrapper } = {},\n onChange,\n onTransform,\n ...rest\n } = props;\n const {\n startAdornment,\n className: classNameInputSlotProps,\n ...restInputSlotProps\n } = input || {};\n return (\n <div
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../src/Input/Input.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { inputVariants } from './inputVariants';\n\nimport { cn } from '@oneplatformdev/utils';\nimport { InputProps } from './Input.types';\n\nexport const BaseInput = React.forwardRef<HTMLInputElement, InputProps>(\n (props, ref) => {\n const {\n className,\n variant,\n type,\n slotProps: { input, wrapper } = {},\n onChange,\n onTransform,\n fullSize = false,\n ...rest\n } = props;\n const {\n startAdornment,\n className: classNameInputSlotProps,\n ...restInputSlotProps\n } = input || {};\n return (\n <div\n {...(wrapper || {})}\n className={cn(\n 'relative',\n fullSize && 'w-full',\n wrapper?.className\n )}>\n {Boolean(startAdornment) && (\n <span className=\"absolute left-[10px] top-1/2 -translate-y-1/2\">\n {startAdornment}\n </span>\n )}\n <input\n type={type}\n className={cn(\n inputVariants({ variant, className }),\n fullSize && 'min-w-auto',\n Boolean(startAdornment) && 'pl-8',\n classNameInputSlotProps\n )}\n ref={ref}\n {...restInputSlotProps}\n {...rest}\n onChange={(e) => {\n if (typeof onTransform?.(e.target.value, e) === 'string') {\n e.target.value = onTransform(e.target.value, e);\n }\n if (onChange) onChange(e);\n }}\n />\n </div>\n );\n }\n);\nBaseInput.displayName = 'Input';\n\nexport const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(\n (props, ref) => {\n const [isVisible, setIsVisible] = useState<boolean>(false);\n\n const inputType = isVisible ? 'text' : 'password';\n\n const toggleVisibility = () => {\n setIsVisible(!isVisible);\n };\n\n return (\n <div {...(props?.slotProps?.wrapper || {})} className={cn('relative', props?.slotProps?.wrapper?.className)}>\n <BaseInput {...props} type={inputType} className=\"pr-8\" ref={ref} />\n <VisibilityButton isVisible={isVisible} onClick={toggleVisibility} />\n </div>\n );\n }\n);\nPasswordInput.displayName = 'PasswordInput';\n\ntype VisibilityButtonProps = {\n isVisible: boolean\n onClick: () => void\n}\n\nconst VisibilityButton = ({ isVisible, onClick }:VisibilityButtonProps) => (\n <button\n type=\"button\"\n onClick={onClick}\n className=\"absolute top-1/2 right-3 transform -translate-y-1/2\"\n >\n {isVisible ? <Eye size={16} /> : <EyeOff size={16} />}\n </button>\n);\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ type, ...props }, ref) => {\n if (type === 'password') return <PasswordInput type={type} {...props} ref={ref} />;\n return <BaseInput type={type} {...props} ref={ref} />;\n }\n);\nInput.displayName = 'Input';\n"],"names":["BaseInput","React","props","ref","className","variant","type","input","wrapper","onChange","onTransform","fullSize","rest","startAdornment","classNameInputSlotProps","restInputSlotProps","jsxs","cn","jsx","inputVariants","e","PasswordInput","isVisible","setIsVisible","useState","inputType","toggleVisibility","VisibilityButton","onClick","Eye","EyeOff","Input"],"mappings":";;;;;AAOO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,WAAW,EAAE,OAAAC,GAAO,SAAAC,EAAA,IAAY,CAAA;AAAA,MAChC,UAAAC;AAAA,MACA,aAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,MACX,GAAGC;AAAA,IAAA,IACDV,GACE;AAAA,MACJ,gBAAAW;AAAA,MACA,WAAWC;AAAA,MACX,GAAGC;AAAA,IAAA,IACDR,KAAS,CAAA;AACb,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAIR,KAAW,CAAA;AAAA,QAChB,WAAWS;AAAA,UACT;AAAA,UACAN,KAAY;AAAA,UACZH,GAAS;AAAA,QAAA;AAAA,QAEV,UAAA;AAAA,UAAA,EAAQK,KACP,gBAAAK,EAAC,QAAA,EAAK,WAAU,iDACb,UAAAL,GACH;AAAA,UAEF,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAAZ;AAAA,cACA,WAAWW;AAAA,gBACTE,EAAc,EAAE,SAAAd,GAAS,WAAAD,GAAW;AAAA,gBACpCO,KAAY;AAAA,gBACZ,EAAQE,KAAmB;AAAA,gBAC3BC;AAAA,cAAA;AAAA,cAEF,KAAAX;AAAA,cACC,GAAGY;AAAA,cACH,GAAGH;AAAA,cACJ,UAAU,CAACQ,MAAM;AACf,gBAAI,OAAOV,IAAcU,EAAE,OAAO,OAAOA,CAAC,KAAM,aAC9CA,EAAE,OAAO,QAAQV,EAAYU,EAAE,OAAO,OAAOA,CAAC,IAE5CX,OAAmBW,CAAC;AAAA,cAC1B;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACApB,EAAU,cAAc;AAEjB,MAAMqB,IAAgBpB,EAAM;AAAA,EACjC,CAACC,GAAOC,MAAQ;AACd,UAAM,CAACmB,GAAWC,CAAY,IAAIC,EAAkB,EAAK,GAEnDC,IAAYH,IAAY,SAAS,YAEjCI,IAAmB,MAAM;AAC7B,MAAAH,EAAa,CAACD,CAAS;AAAA,IACzB;AAEA,WACE,gBAAAN,EAAC,OAAA,EAAK,GAAId,GAAO,WAAW,WAAW,CAAA,GAAK,WAAWe,EAAG,YAAYf,GAAO,WAAW,SAAS,SAAS,GACxG,UAAA;AAAA,MAAA,gBAAAgB,EAAClB,KAAW,GAAGE,GAAO,MAAMuB,GAAW,WAAU,QAAO,KAAAtB,GAAU;AAAA,MAClE,gBAAAe,EAACS,GAAA,EAAiB,WAAAL,GAAsB,SAASI,EAAA,CAAkB;AAAA,IAAA,GACrE;AAAA,EAEJ;AACF;AACAL,EAAc,cAAc;AAO5B,MAAMM,IAAmB,CAAC,EAAE,WAAAL,GAAW,SAAAM,QACrC,gBAAAV;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,SAAAU;AAAA,IACA,WAAU;AAAA,IAET,UAAAN,sBAAaO,GAAA,EAAI,MAAM,IAAI,IAAK,gBAAAX,EAACY,GAAA,EAAO,MAAM,GAAA,CAAI;AAAA,EAAA;AACrD,GAGWC,IAAQ9B,EAAM;AAAA,EACzB,CAAC,EAAE,MAAAK,GAAM,GAAGJ,EAAA,GAASC,MACfG,MAAS,aAAmB,gBAAAY,EAACG,KAAc,MAAAf,GAAa,GAAGJ,GAAO,KAAAC,GAAU,IACzE,gBAAAe,EAAClB,GAAA,EAAU,MAAAM,GAAa,GAAGJ,GAAO,KAAAC,GAAU;AAEvD;AACA4B,EAAM,cAAc;"}
|
package/Input/Input.types.d.ts
CHANGED
|
@@ -15,5 +15,6 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>,
|
|
|
15
15
|
onTransform?: (value: string, event: ChangeEvent<HTMLInputElement>) => string;
|
|
16
16
|
/** func transform pasted value before set to input */
|
|
17
17
|
onPastePrepare?: (value: string, event: React.ClipboardEvent<HTMLInputElement>) => string;
|
|
18
|
+
fullSize?: boolean;
|
|
18
19
|
}
|
|
19
20
|
//# sourceMappingURL=Input.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../src/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EACX,wBAAwB,EACxB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,WAAW,mBACf,SAAQ,wBAAwB,CAAC,OAAO,SAAS,CAAC;IAClD,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACvF,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC9E,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../src/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EACX,wBAAwB,EACxB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,WAAW,mBACf,SAAQ,wBAAwB,CAAC,OAAO,SAAS,CAAC;IAClD,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACvF,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC9E,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
|
|
@@ -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"}
|