@oneplatformdev/ui 0.1.99-beta.1 → 0.1.99-beta.10

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.
Files changed (53) hide show
  1. package/.storybook/Wrappers.js +30 -0
  2. package/.storybook/Wrappers.js.map +1 -0
  3. package/Badge/badgeVariants.d.ts +1 -1
  4. package/Button/Button.d.ts +58 -0
  5. package/Button/Button.d.ts.map +1 -1
  6. package/Button/Button.js +60 -61
  7. package/Button/Button.js.map +1 -1
  8. package/Button/Button.stories.js +207 -70
  9. package/Button/Button.stories.js.map +1 -1
  10. package/Button/Button.types.d.ts +52 -6
  11. package/Button/Button.types.d.ts.map +1 -1
  12. package/Button/ButtonCounterBadge.d.ts +7 -0
  13. package/Button/ButtonCounterBadge.d.ts.map +1 -0
  14. package/Button/ButtonCounterBadge.js +23 -0
  15. package/Button/ButtonCounterBadge.js.map +1 -0
  16. package/Button/buttonVariants.d.ts +12 -29
  17. package/Button/buttonVariants.d.ts.map +1 -1
  18. package/Button/buttonVariants.js +74 -12
  19. package/Button/buttonVariants.js.map +1 -1
  20. package/Button/index.js +6 -5
  21. package/ButtonIcon/ButtonIcon.d.ts +56 -0
  22. package/ButtonIcon/ButtonIcon.d.ts.map +1 -1
  23. package/ButtonIcon/ButtonIcon.js +70 -45
  24. package/ButtonIcon/ButtonIcon.js.map +1 -1
  25. package/ButtonIcon/ButtonIcon.stories.js +125 -79
  26. package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
  27. package/ButtonIcon/ButtonIcon.types.d.ts +6 -8
  28. package/ButtonIcon/ButtonIcon.types.d.ts.map +1 -1
  29. package/ButtonIcon/buttonIconVariants.d.ts +4 -2
  30. package/ButtonIcon/buttonIconVariants.d.ts.map +1 -1
  31. package/ButtonIcon/buttonIconVariants.js +5 -5
  32. package/ButtonIcon/buttonIconVariants.js.map +1 -1
  33. package/CHANGELOG.md +126 -0
  34. package/Input/Input.d.ts.map +1 -1
  35. package/Input/Input.js +51 -38
  36. package/Input/Input.js.map +1 -1
  37. package/Input/Input.types.d.ts +1 -0
  38. package/Input/Input.types.d.ts.map +1 -1
  39. package/LoadedIcon/LoadedIcon.d.ts +1 -1
  40. package/LoadedIcon/LoadedIcon.d.ts.map +1 -1
  41. package/LoadedIcon/LoadedIcon.js +17 -13
  42. package/LoadedIcon/LoadedIcon.js.map +1 -1
  43. package/Textarea/Textarea.js +6 -6
  44. package/Textarea/Textarea.js.map +1 -1
  45. package/Textarea/Textarea.stories.js +12 -0
  46. package/Textarea/Textarea.stories.js.map +1 -0
  47. package/Textarea/useAutosizeTextArea.d.ts +1 -1
  48. package/Textarea/useAutosizeTextArea.d.ts.map +1 -1
  49. package/Textarea/useAutosizeTextArea.js.map +1 -1
  50. package/Tooltip/Tooltip.d.ts.map +1 -1
  51. package/Tooltip/Tooltip.js.map +1 -1
  52. package/index.js +326 -325
  53. package/package.json +7 -4
@@ -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,GAAmB,UAAAF,GAAS,GAEpDkB,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
+ {"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\";\nimport { ButtonIconType } from \"../Button\";\nimport { createElement, isValidElement } from \"react\";\nimport { ButtonCounterBadge } from \"../Button/ButtonCounterBadge\";\n\nconst renderInnerIcon = (Icon?: ButtonIconType) => {\n if (!Icon) return null;\n if (isValidElement(Icon)) return Icon;\n return createElement(Icon);\n};\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 * @public\n * @see [Documentation](#) // TODO: add link to docs\n *\n * @example\n * > Import:\n * ```tsx\n * import { ButtonIcon } from '@oneplatformdev/ui/ButtonIcon';\n * ```\n * > Basic usage by icon:\n * ```tsx\n *<ButtonIcon icon={<PlusIcon />}/>\n *<ButtonIcon icon={PlusIcon}/>\n * ```\n * > Basic usage by children:\n * ```tsx\n *<ButtonIcon>\n * <PlusIcon />\n *</ButtonIcon>\n * ```\n * > With variant & color:\n * ```tsx\n *<ButtonIcon variant=\"outline\" color=\"primary\">\n * <Search />\n *</ButtonIcon>\n * ```\n * > With tooltip message:\n * ```tsx\n *<ButtonIcon message=\"Edit item\">\n * <PencilLine />\n *</ButtonIcon>\n * ```\n * > Loading state:\n * ```tsx\n *<ButtonIcon loading>\n * <Trash2 />\n *</ButtonIcon>\n * ```\n * > Badge counter:\n * ```tsx\n *<ButtonIcon counter={5} icon={MessageCircleMoreIcon}/>\n *<ButtonIcon counter={{ count: 8 }} icon={MessageCircleMoreIcon}/>\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 */\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\n (props, ref) => {\n const {\n asChild,\n children,\n icon,\n disabled = false,\n loading = false,\n message,\n title = '',\n tooltipProps = {},\n className,\n variant,\n color,\n size,\n rounded,\n screenReader,\n counter,\n ...rest\n } = props;\n\n const Comp = asChild ? Slot : \"button\"\n const msg = message || title;\n\n const content = asChild\n ? children\n : (\n <>\n <LoadedIcon loading={loading} size={size}>\n {renderInnerIcon(icon) ?? children}\n <ButtonCounterBadge\n counter={counter}\n variant={variant}\n color={color}\n size={size}\n disabled={disabled}\n rounded={rounded}\n />\n </LoadedIcon>\n\n {!!screenReader && (\n <span className=\"sr-only\">\n {typeof screenReader === 'string' ? screenReader : screenReader.text}\n </span>\n )}\n </>\n )\n\n if (!content) return null;\n\n const cmp = (\n <Comp\n type='button'\n ref={ref}\n disabled={disabled}\n className={cn(\n 'group group/button group/button-icon',\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":["renderInnerIcon","Icon","isValidElement","createElement","ButtonIcon","React","props","ref","asChild","children","icon","disabled","loading","message","title","tooltipProps","className","variant","color","size","rounded","screenReader","counter","rest","Comp","Slot","msg","content","jsxs","Fragment","LoadedIcon","jsx","ButtonCounterBadge","cmp","cn","buttonIconVariants","Tooltip"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAAkB,CAACC,MAClBA,IACDC,EAAeD,CAAI,IAAUA,IAC1BE,EAAcF,CAAI,IAFP,MA4DPG,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,MAAAC;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,cAAAC;AAAA,MACA,SAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDjB,GAEEkB,IAAOhB,IAAUiB,IAAO,UACxBC,IAAMb,KAAWC,GAEjBa,IAAUnB,IACZC,IAEA,gBAAAmB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EAAW,SAAAlB,GAAkB,MAAAO,GAC3B,UAAA;AAAA,QAAAnB,EAAgBU,CAAI,KAAKD;AAAA,QAC1B,gBAAAsB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAAV;AAAA,YACA,SAAAL;AAAA,YACA,OAAAC;AAAA,YACA,MAAAC;AAAA,YACA,UAAAR;AAAA,YACA,SAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MAEC,CAAC,CAACC,KACD,gBAAAU,EAAC,QAAA,EAAK,WAAU,WACb,UAAA,OAAOV,KAAiB,WAAWA,IAAeA,EAAa,KAAA,CAClE;AAAA,IAAA,GAEJ;AAGJ,QAAI,CAACM,EAAS,QAAO;AAErB,UAAMM,IACJ,gBAAAF;AAAA,MAACP;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAjB;AAAA,QACA,UAAAI;AAAA,QACA,WAAWuB;AAAA,UACT;AAAA,UACAC,EAAmB;AAAA,YACjB,SAAAlB;AAAA,YAAS,MAAAE;AAAA,YAAM,OAAAD;AAAA,YAAO,SAAAE;AAAA,YACtB,WAAAJ;AAAA,UAAA,CACD;AAAA,UACDJ,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGW;AAAA,QAEH,UAAAI;AAAA,MAAA;AAAA,IAAA;AAIL,WAAKD,IAEH,gBAAAK;AAAA,MAACK;AAAA,MAAA;AAAA,QACE,GAAIrB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASJ,KAAYC,KAAW,CAACc,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAO;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACA7B,EAAW,cAAc;"}
@@ -1,35 +1,12 @@
1
- import { jsx as o, jsxs as t } from "react/jsx-runtime";
2
- import { ButtonIcon as s } from "./ButtonIcon.js";
3
- import { PlusIcon as u } from "lucide-react";
4
- const f = (e) => /* @__PURE__ */ o(s, { ...e });
5
- f.args = {
1
+ import { jsx as o, jsxs as i } from "react/jsx-runtime";
2
+ import { ButtonIcon as t } from "./ButtonIcon.js";
3
+ import { FileDownIcon as c, Trash2Icon as l, PlusIcon as a, MessageCircleMoreIcon as y } from "lucide-react";
4
+ import { DashedWrapper as s } from "../.storybook/Wrappers.js";
5
+ const h = (e) => /* @__PURE__ */ o(t, { ...e });
6
+ h.args = {
6
7
  onClick: { action: (e) => e }
7
8
  };
8
- const p = (e) => /* @__PURE__ */ o(
9
- "div",
10
- {
11
- style: {
12
- padding: "0px 20px",
13
- display: "flex",
14
- gap: "32px",
15
- alignItems: "flex-start"
16
- },
17
- children: /* @__PURE__ */ o(
18
- "div",
19
- {
20
- style: {
21
- position: "relative",
22
- border: "2px dashed rgba(139, 92, 246, 0.7)",
23
- borderRadius: "24px",
24
- padding: "24px 32px",
25
- display: "flex",
26
- gap: "32px"
27
- },
28
- children: e.children
29
- }
30
- )
31
- }
32
- ), a = (e) => /* @__PURE__ */ o(
9
+ const r = (e) => /* @__PURE__ */ o(
33
10
  "div",
34
11
  {
35
12
  style: {
@@ -38,61 +15,80 @@ const p = (e) => /* @__PURE__ */ o(
38
15
  flexDirection: "column",
39
16
  gap: "16px"
40
17
  },
41
- children: ["default", "hover", "focus", "active", "disabled"].map((r) => /* @__PURE__ */ o(
42
- s,
18
+ children: ["default", "hover", "focus", "active", "disabled"].map((n) => /* @__PURE__ */ o(
19
+ t,
43
20
  {
44
- id: r,
21
+ id: n,
45
22
  ...e,
46
- disabled: r === "disabled" || e.disabled,
23
+ disabled: n === "disabled" || e.disabled,
47
24
  children: e.children
48
25
  },
49
- r
26
+ n
50
27
  ))
51
28
  }
52
- ), c = (e) => /* @__PURE__ */ t("div", { className: "flex", children: [
53
- /* @__PURE__ */ t(p, { children: [
54
- /* @__PURE__ */ o(a, { ...e, variant: "contained" }),
55
- /* @__PURE__ */ o(a, { ...e, variant: "outlined" }),
56
- /* @__PURE__ */ o(a, { ...e, variant: "ghost" })
29
+ ), u = (e) => /* @__PURE__ */ i("div", { className: "flex", children: [
30
+ /* @__PURE__ */ i(s, { children: [
31
+ /* @__PURE__ */ o(r, { ...e, variant: "contained" }),
32
+ /* @__PURE__ */ o(r, { ...e, variant: "outlined" }),
33
+ /* @__PURE__ */ o(r, { ...e, variant: "ghost" })
57
34
  ] }),
58
- /* @__PURE__ */ t(p, { children: [
59
- /* @__PURE__ */ o(a, { ...e, variant: "contained", rounded: !0 }),
60
- /* @__PURE__ */ o(a, { ...e, variant: "outlined", rounded: !0 }),
61
- /* @__PURE__ */ o(a, { ...e, variant: "ghost", rounded: !0 })
35
+ /* @__PURE__ */ i(s, { children: [
36
+ /* @__PURE__ */ o(r, { ...e, variant: "contained", rounded: !0 }),
37
+ /* @__PURE__ */ o(r, { ...e, variant: "outlined", rounded: !0 }),
38
+ /* @__PURE__ */ o(r, { ...e, variant: "ghost", rounded: !0 })
62
39
  ] })
63
- ] }), i = ["contained", "outlined", "ghost"], l = ["primary", "secondary", "error"], d = ["md", "lg"], b = {
40
+ ] }), p = ["contained", "outlined", "ghost"], f = ["primary", "secondary", "error"], d = ["xs", "sm", "md", "lg"], B = "contained", b = "primary", x = "lg", g = {
41
+ undefined: void 0,
42
+ "<PlusIcon />": /* @__PURE__ */ o(a, {}),
43
+ "<Trash2Icon />": /* @__PURE__ */ o(l, {}),
44
+ "<FileDownIcon />": /* @__PURE__ */ o(c, {}),
45
+ PlusIcon: a,
46
+ Trash2Icon: l,
47
+ FileDownIcon: c
48
+ }, v = {
49
+ "<PlusIcon />": /* @__PURE__ */ o(a, {}),
50
+ "<Trash2Icon />": /* @__PURE__ */ o(l, {}),
51
+ "<FileDownIcon />": /* @__PURE__ */ o(c, {})
52
+ }, I = {
64
53
  title: "ButtonIcon",
65
- component: s,
66
- render: f,
54
+ component: t,
55
+ render: h,
67
56
  args: {
68
57
  asChild: !1,
69
58
  disabled: !1,
70
59
  loading: !1,
71
60
  rounded: !1,
72
- children: /* @__PURE__ */ o(u, {}),
73
- variant: i[0],
74
- color: l[0],
75
- size: d[0],
76
- message: ""
61
+ variant: B,
62
+ color: b,
63
+ size: x,
64
+ children: /* @__PURE__ */ o(a, {}),
65
+ icon: void 0,
66
+ message: void 0,
67
+ title: void 0
77
68
  },
78
69
  argTypes: {
70
+ tooltip: {
71
+ name: "tooltip",
72
+ description: "ButtonIcon tooltip from ButtonIconProps [deprecated, use title and message instead]",
73
+ control: !1
74
+ },
79
75
  asChild: {
80
76
  name: "asChild",
81
- description: "ButtonIcon asChild",
77
+ description: "ButtonIcon asChild from ButtonIconProps [boolean]",
82
78
  control: !1
83
79
  },
84
80
  variant: {
85
81
  name: "variant",
86
82
  description: "ButtonIcon variant",
87
- defaultValue: i[0],
88
- options: i,
83
+ defaultValue: p[0],
84
+ options: p,
89
85
  control: { type: "inline-radio" }
90
86
  },
91
87
  color: {
92
88
  name: "color",
93
89
  description: "ButtonIcon color",
94
- defaultValue: l[0],
95
- options: l,
90
+ defaultValue: f[0],
91
+ options: f,
96
92
  control: { type: "inline-radio" }
97
93
  },
98
94
  size: {
@@ -102,11 +98,16 @@ const p = (e) => /* @__PURE__ */ o(
102
98
  options: d,
103
99
  control: { type: "inline-radio" }
104
100
  },
105
- message: {
106
- name: "size",
107
- description: "ButtonIcon tooltip message",
101
+ title: {
102
+ name: "title",
103
+ description: "ButtonIcon tooltip title from HTMLAttributes<HTMLButtonElement> [string only]",
108
104
  control: { type: "text" }
109
105
  },
106
+ message: {
107
+ name: "message",
108
+ description: "ButtonIcon tooltip message from ButtonProps [ReactNode]",
109
+ control: { type: "object" }
110
+ },
110
111
  disabled: {
111
112
  name: "disabled",
112
113
  description: "ButtonIcon disabled",
@@ -121,6 +122,25 @@ const p = (e) => /* @__PURE__ */ o(
121
122
  name: "loading",
122
123
  description: "ButtonIcon loading",
123
124
  control: { type: "boolean" }
125
+ },
126
+ icon: {
127
+ name: "icon",
128
+ description: "ButtonIcon icon from ButtonIconProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]",
129
+ options: Object.keys(g),
130
+ mapping: g,
131
+ control: { type: "inline-radio" }
132
+ },
133
+ children: {
134
+ name: "children",
135
+ description: "ButtonIcon children from ButtonIconProps [`ReactNode`]",
136
+ options: Object.keys(v),
137
+ mapping: v,
138
+ control: { type: "inline-radio" }
139
+ },
140
+ counter: {
141
+ name: "counter",
142
+ description: "ButtonIcon counter from ButtonIconProps [`number` | `ButtonCounterBadgeReaderOptions`]",
143
+ control: { type: "number" }
124
144
  }
125
145
  },
126
146
  parameters: {
@@ -131,15 +151,40 @@ const p = (e) => /* @__PURE__ */ o(
131
151
  disabled: "#disabled"
132
152
  }
133
153
  }
134
- }, n = {
154
+ }, m = {
135
155
  asChild: !1,
136
156
  disabled: !1,
137
157
  loading: !1,
138
158
  rounded: !1,
139
- children: /* @__PURE__ */ o(u, {})
140
- }, I = { args: n }, g = {
159
+ children: /* @__PURE__ */ o(a, {})
160
+ }, M = {
161
+ args: {
162
+ ...I.args,
163
+ icon: c,
164
+ children: void 0
165
+ }
166
+ }, j = {
167
+ render: (e) => /* @__PURE__ */ o("div", { className: "flex flex-col gap-3", children: d.map((n) => /* @__PURE__ */ i(s, { children: [
168
+ /* @__PURE__ */ o(t, { ...e, size: n, message: "from counter" }),
169
+ /* @__PURE__ */ o(t, { ...e, size: n, counter: 0, message: "count=0" }),
170
+ /* @__PURE__ */ o(t, { ...e, size: n, counter: 9, message: "count=9" }),
171
+ /* @__PURE__ */ o(t, { ...e, size: n, counter: 99, message: "count=99" }),
172
+ /* @__PURE__ */ o(t, { ...e, size: n, counter: 999, message: "count=999" })
173
+ ] }, n)) }),
174
+ args: {
175
+ ...I.args,
176
+ icon: y,
177
+ counter: 12,
178
+ title: "counter"
179
+ },
180
+ parameters: {
181
+ controls: {
182
+ include: ["counter", "variant", "color", "disabled", "loading", "rounded"]
183
+ }
184
+ }
185
+ }, P = {
141
186
  args: {
142
- ...n,
187
+ ...m,
143
188
  color: "primary",
144
189
  size: "lg"
145
190
  },
@@ -147,14 +192,14 @@ const p = (e) => /* @__PURE__ */ o(
147
192
  variant: { control: !1 },
148
193
  color: { control: !1 }
149
194
  },
150
- render: c
195
+ render: u
151
196
  };
152
- g.parameters = {
197
+ P.parameters = {
153
198
  controls: { exclude: ["variant", "color"] }
154
199
  };
155
- const m = {
200
+ const C = {
156
201
  args: {
157
- ...n,
202
+ ...m,
158
203
  color: "secondary",
159
204
  size: "lg"
160
205
  },
@@ -162,14 +207,14 @@ const m = {
162
207
  variant: { control: !1 },
163
208
  color: { control: !1 }
164
209
  },
165
- render: c
210
+ render: u
166
211
  };
167
- m.parameters = {
212
+ C.parameters = {
168
213
  controls: { exclude: ["variant", "color"] }
169
214
  };
170
- const v = {
215
+ const T = {
171
216
  args: {
172
- ...n,
217
+ ...m,
173
218
  color: "error",
174
219
  size: "lg"
175
220
  },
@@ -177,16 +222,17 @@ const v = {
177
222
  variant: { control: !1 },
178
223
  color: { control: !1 }
179
224
  },
180
- render: c
225
+ render: u
181
226
  };
182
- v.parameters = {
227
+ T.parameters = {
183
228
  controls: { exclude: ["variant", "color"] }
184
229
  };
185
230
  export {
186
- I as Default,
187
- v as Error,
188
- g as Primary,
189
- m as Secondary,
190
- b as default
231
+ j as Counter,
232
+ M as Default,
233
+ T as Error,
234
+ P as Primary,
235
+ C as Secondary,
236
+ I as default
191
237
  };
192
238
  //# 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: 'size',\n description: 'ButtonIcon tooltip message',\n control: { type: 'text' },\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
+ {"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 from 'react';\nimport { FileDownIcon, PlusIcon, Trash2Icon, MessageCircleMoreIcon } from 'lucide-react'\nimport { DashedWrapper } from \"../../.storybook/Wrappers\";\nimport { ButtonProps } from \"../Button\";\n\nconst Template = (props: ButtonIconProps) => <ButtonIcon {...props}/>\nTemplate.args = {\n onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\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 variant_default: ButtonProps['variant'] = 'contained';\nconst color_default: ButtonProps['color'] = 'primary';\nconst size_default: ButtonProps['size'] = 'lg';\n\nconst iconMap = {\n 'undefined': undefined,\n \"<PlusIcon />\": <PlusIcon/>,\n \"<Trash2Icon />\": <Trash2Icon/>,\n \"<FileDownIcon />\": <FileDownIcon/>,\n PlusIcon: PlusIcon,\n Trash2Icon: Trash2Icon,\n FileDownIcon: FileDownIcon,\n};\n\nconst iconChildrenMap = {\n \"<PlusIcon />\": <PlusIcon/>,\n \"<Trash2Icon />\": <Trash2Icon/>,\n \"<FileDownIcon />\": <FileDownIcon/>,\n};\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 variant: variant_default,\n color: color_default,\n size: size_default,\n children: <PlusIcon/>,\n icon: undefined,\n message: undefined,\n title: undefined,\n },\n argTypes: {\n tooltip: {\n name: 'tooltip',\n description: 'ButtonIcon tooltip from ButtonIconProps [deprecated, use title and message instead]',\n control: false,\n },\n asChild: {\n name: 'asChild',\n description: 'ButtonIcon asChild from ButtonIconProps [boolean]',\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 icon: {\n name: 'icon',\n description: 'ButtonIcon icon from ButtonIconProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\n options: Object.keys(iconMap),\n mapping: iconMap,\n control: { type: 'inline-radio' },\n },\n children: {\n name: 'children',\n description: 'ButtonIcon children from ButtonIconProps [`ReactNode`]',\n options: Object.keys(iconChildrenMap),\n mapping: iconChildrenMap,\n control: { type: 'inline-radio' },\n },\n counter: {\n name: 'counter',\n description: 'ButtonIcon counter from ButtonIconProps [`number` | `ButtonCounterBadgeReaderOptions`]',\n control: { type: 'number' },\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 = {\n args: {\n ...meta.args,\n icon: FileDownIcon,\n children: undefined,\n }\n};\n\nexport const Counter: Story = {\n render: (props) => (\n <div className='flex flex-col gap-3'>\n {sizes.map((size) => (\n <DashedWrapper key={size}>\n <ButtonIcon {...props} size={size} message='from counter'/>\n <ButtonIcon {...props} size={size} counter={0} message='count=0'/>\n <ButtonIcon {...props} size={size} counter={9} message='count=9'/>\n <ButtonIcon {...props} size={size} counter={99} message='count=99'/>\n <ButtonIcon {...props} size={size} counter={999} message='count=999'/>\n </DashedWrapper>\n ))}\n </div>\n ),\n args: {\n ...meta.args,\n icon: MessageCircleMoreIcon,\n counter: 12,\n title: 'counter',\n },\n parameters: {\n controls: {\n include: ['counter', 'variant', 'color', 'disabled', 'loading', 'rounded' ],\n },\n },\n};\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","States","state","StateRender","jsxs","DashedWrapper","variants","colors","sizes","variant_default","color_default","size_default","iconMap","PlusIcon","Trash2Icon","FileDownIcon","iconChildrenMap","meta","args","Default","Counter","size","MessageCircleMoreIcon","Primary","Secondary","Error"],"mappings":";;;;AASA,MAAMA,IAAW,CAACC,MAA2B,gBAAAC,EAACC,GAAA,EAAY,GAAGF,GAAM;AACnED,EAAS,OAAO;AAAA,EACd,SAAS,EAAE,QAAQ,CAAC,MAA2C,EAAA;AACjE;AAEA,MAAMI,IAAS,CAACH,MACd,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAO;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK;AAAA,IAAA;AAAA,IAGN,UAAA,CAAE,WAAW,SAAS,SAAS,UAAU,UAAW,EAClD,IAAI,CAACG,MACJ,gBAAAH;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,IAAIE;AAAA,QACH,GAAGJ;AAAA,QACJ,UAAUI,MAAU,cAAcJ,EAAM;AAAA,QAEvC,UAAAA,EAAM;AAAA,MAAA;AAAA,MALFI;AAAA,IAAA,CAOR;AAAA,EAAA;AACL,GAGIC,IAAc,CAACL,MACnB,gBAAAM,EAAC,OAAA,EAAI,WAAU,QACb,UAAA;AAAA,EAAA,gBAAAA,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAN,EAACE,GAAA,EAAQ,GAAGH,GAAO,SAAQ,YAAA,CAAW;AAAA,IACtC,gBAAAC,EAACE,GAAA,EAAQ,GAAGH,GAAO,SAAQ,WAAA,CAAU;AAAA,IACrC,gBAAAC,EAACE,GAAA,EAAQ,GAAGH,GAAO,SAAQ,QAAA,CAAO;AAAA,EAAA,GACpC;AAAA,oBACCO,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAN,EAACE,GAAA,EAAQ,GAAGH,GAAO,SAAQ,aAAY,SAAO,IAAA;AAAA,sBAC7CG,GAAA,EAAQ,GAAGH,GAAO,SAAQ,YAAW,SAAO,IAAA;AAAA,sBAC5CG,GAAA,EAAQ,GAAGH,GAAO,SAAQ,SAAQ,SAAO,GAAA,CAAA;AAAA,EAAA,EAAA,CAC5C;AAAA,GACF,GAGIQ,IAAyC,CAAE,aAAa,YAAY,OAAQ,GAC5EC,IAAqC,CAAE,WAAW,aAAa,OAAQ,GACvEC,IAAmC,CAAE,MAAM,MAAM,MAAM,IAAK,GAE5DC,IAA0C,aAC1CC,IAAsC,WACtCC,IAAoC,MAEpCC,IAAU;AAAA,EACd,WAAa;AAAA,EACb,kCAAiBC,GAAA,EAAQ;AAAA,EACzB,oCAAmBC,GAAA,EAAU;AAAA,EAC7B,sCAAqBC,GAAA,EAAY;AAAA,EACjC,UAAAF;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AACF,GAEMC,IAAkB;AAAA,EACtB,kCAAiBH,GAAA,EAAQ;AAAA,EACzB,oCAAmBC,GAAA,EAAU;AAAA,EAC7B,sCAAqBC,GAAA,CAAA,CAAY;AACnC,GAEME,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWjB;AAAA,EACX,QAAQH;AAAA,EACR,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAASY;AAAA,IACT,OAAOC;AAAA,IACP,MAAMC;AAAA,IACN,4BAAWE,GAAA,EAAQ;AAAA,IACnB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAcP,EAAS,CAAC;AAAA,MACxB,SAASA;AAAA,MACT,SAAS,EAAE,MAAM,eAAA;AAAA,IAAgB;AAAA,IAEnC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAcC,EAAO,CAAC;AAAA,MACtB,SAASA;AAAA,MACT,SAAS,EAAE,MAAM,eAAA;AAAA,IAAe;AAAA,IAElC,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAcC,EAAM,CAAC;AAAA,MACrB,SAASA;AAAA,MACT,SAAS,EAAE,MAAM,eAAA;AAAA,IAAe;AAAA,IAElC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,OAAA;AAAA,IAAO;AAAA,IAE1B,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,SAAA;AAAA,IAAS;AAAA,IAE5B,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,UAAA;AAAA,IAAU;AAAA,IAE7B,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,UAAA;AAAA,IAAU;AAAA,IAE7B,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,UAAA;AAAA,IAAU;AAAA,IAE7B,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,OAAO,KAAKI,CAAO;AAAA,MAC5B,SAASA;AAAA,MACT,SAAS,EAAE,MAAM,eAAA;AAAA,IAAe;AAAA,IAElC,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,OAAO,KAAKI,CAAe;AAAA,MACpC,SAASA;AAAA,MACT,SAAS,EAAE,MAAM,eAAA;AAAA,IAAe;AAAA,IAElC,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,SAAA;AAAA,IAAS;AAAA,EAC5B;AAAA,EAEF,YAAY;AAAA,IACV,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ,GAKME,IAAsB;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,4BAAWL,GAAA,CAAA,CAAQ;AACrB,GAEaM,IAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,GAAGF,EAAK;AAAA,IACR,MAAMF;AAAA,IACN,UAAU;AAAA,EAAA;AAEd,GAEaK,IAAiB;AAAA,EAC5B,QAAQ,CAACtB,MACP,gBAAAC,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAS,EAAM,IAAI,CAACa,MACV,gBAAAjB,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAN,EAACC,GAAA,EAAY,GAAGF,GAAO,MAAAuB,GAAY,SAAQ,gBAAc;AAAA,IACzD,gBAAAtB,EAACC,KAAY,GAAGF,GAAO,MAAAuB,GAAY,SAAS,GAAG,SAAQ,WAAS;AAAA,IAChE,gBAAAtB,EAACC,KAAY,GAAGF,GAAO,MAAAuB,GAAY,SAAS,GAAG,SAAQ,WAAS;AAAA,IAChE,gBAAAtB,EAACC,KAAY,GAAGF,GAAO,MAAAuB,GAAY,SAAS,IAAI,SAAQ,YAAU;AAAA,IAClE,gBAAAtB,EAACC,KAAY,GAAGF,GAAO,MAAAuB,GAAY,SAAS,KAAK,SAAQ,YAAA,CAAW;AAAA,EAAA,KALlDA,CAMpB,CACD,GACH;AAAA,EAEF,MAAM;AAAA,IACJ,GAAGJ,EAAK;AAAA,IACR,MAAMK;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,YAAY;AAAA,IACV,UAAU;AAAA,MACR,SAAS,CAAC,WAAW,WAAW,SAAS,YAAY,WAAW,SAAU;AAAA,IAAA;AAAA,EAC5E;AAEJ,GAEaC,IAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,GAAGL;AAAA,IACH,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAAA,EAER,UAAU;AAAA,IACR,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,OAAO,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAE1B,QAAQf;AACV;AACAoB,EAAQ,aAAa;AAAA,EACnB,UAAU,EAAE,SAAS,CAAE,WAAW,OAAQ,EAAA;AAC5C;AAEO,MAAMC,IAAmB;AAAA,EAC9B,MAAM;AAAA,IACJ,GAAGN;AAAA,IACH,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAAA,EAER,UAAU;AAAA,IACR,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,OAAO,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAE1B,QAAQf;AACV;AACAqB,EAAU,aAAa;AAAA,EACrB,UAAU,EAAE,SAAS,CAAE,WAAW,OAAQ,EAAA;AAC5C;AAEO,MAAMC,IAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,GAAGP;AAAA,IACH,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAAA,EAER,UAAU;AAAA,IACR,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,OAAO,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAE1B,QAAQf;AACV;AACAsB,EAAM,aAAa;AAAA,EACjB,UAAU,EAAE,SAAS,CAAE,WAAW,OAAQ,EAAA;AAC5C;"}
@@ -1,10 +1,8 @@
1
- import { VariantProps } from 'class-variance-authority';
2
- import { buttonIconVariants } from './buttonIconVariants';
3
- import { ButtonHTMLAttributes } from 'react';
4
- import { TooltipProps } from '../Tooltip';
5
- export interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonIconVariants>, Pick<TooltipProps, 'message'> {
6
- asChild?: boolean;
7
- loading?: boolean;
8
- tooltipProps?: TooltipProps;
1
+ import { ButtonIconVarianceProps } from './buttonIconVariants';
2
+ import { ButtonBaseProps, ButtonIconType } from '../Button';
3
+ export interface ButtonIconSlotProps {
4
+ }
5
+ export interface ButtonIconProps extends ButtonBaseProps<ButtonIconVarianceProps, ButtonIconSlotProps> {
6
+ icon?: ButtonIconType;
9
7
  }
10
8
  //# 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,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAC5D,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC;IACxE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B"}
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,EACpB,KAAK,cAAc,EACpB,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,mBAAmB;CAAG;AAEvC,MAAM,WAAW,eACf,SAAQ,eAAe,CAAC,uBAAuB,EAAE,mBAAmB,CAAC;IACrE,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB"}
@@ -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
- color?: "secondary" | "primary" | "error" | null | undefined;
4
- size?: "sm" | "lg" | "md" | "xs" | null | undefined;
4
+ color?: "primary" | "secondary" | "error" | null | undefined;
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":"AAGA,eAAO,MAAM,kBAAkB;;;;;8EAsJ9B,CAAA"}
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"}
@@ -2,12 +2,12 @@ import { cva as r } from "class-variance-authority";
2
2
  import { cn as e } from "@oneplatformdev/utils";
3
3
  const a = r(
4
4
  [
5
- "inline-flex items-center justify-center",
5
+ "inline-flex items-center justify-center relative",
6
6
  "whitespace-nowrap font-medium aspect-square",
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]:size-4 [&_svg]:shrink-0"
10
+ "[&_svg]:pointer-events-none [&_svg]:shrink-0"
11
11
  ],
12
12
  {
13
13
  variants: {
@@ -23,10 +23,10 @@ const a = r(
23
23
  error: ""
24
24
  },
25
25
  size: {
26
- xs: "w-4 h-4 size-4 rounded-lg p-0 [&_svg]:size-3",
27
- sm: "w-6 h-6 size-6 rounded-lg p-0 [&_svg]:size-4",
26
+ xs: "w-4 h-4 size-4 rounded-sm p-0 [&_svg]:size-3",
27
+ sm: "w-6 h-6 size-6 rounded-md p-0 [&_svg]:size-4",
28
28
  md: "w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5",
29
- lg: "w-10 h-10 size-10 rounded-lg p-2 [&_svg]:size-6"
29
+ lg: "w-10 h-10 size-10 rounded-lg p-1 [&_svg]:size-6"
30
30
  },
31
31
  rounded: {
32
32
  true: "rounded-full",
@@ -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]:size-4 [&_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"],"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;"}
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 relative\",\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-sm p-0 [&_svg]:size-3',\n sm: 'w-6 h-6 size-6 rounded-md 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-1 [&_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,129 @@
1
+ ## 0.1.99-beta.10 (2025-12-30)
2
+
3
+ ### 🚀 Features
4
+
5
+ - **Button:** add screen reader text rendering for accessibility ([e168003](https://github.com/oneplatformdev/core-web/commit/e168003))
6
+
7
+ ### 🧱 Updated Dependencies
8
+
9
+ - Updated @oneplatformdev/utils to 0.1.99-beta.10
10
+ - Updated @oneplatformdev/hooks to 0.1.99-beta.10
11
+ - Updated @oneplatformdev/tokens to 0.1.99-beta.10
12
+
13
+ ### ❤️ Thank You
14
+
15
+ - Bohdan Radchenko
16
+
17
+ ## 0.1.99-beta.9 (2025-12-30)
18
+
19
+ ### 🩹 Fixes
20
+
21
+ - **Button:** update documentation links for Button and ButtonIcon components ([cfa993f](https://github.com/oneplatformdev/core-web/commit/cfa993f))
22
+
23
+ ### 🧱 Updated Dependencies
24
+
25
+ - Updated @oneplatformdev/utils to 0.1.99-beta.9
26
+ - Updated @oneplatformdev/hooks to 0.1.99-beta.9
27
+ - Updated @oneplatformdev/tokens to 0.1.99-beta.9
28
+
29
+ ### ❤️ Thank You
30
+
31
+ - Bohdan Radchenko
32
+
33
+ ## 0.1.99-beta.8 (2025-12-30)
34
+
35
+ ### 🚀 Features
36
+
37
+ - **Textarea:** update styles and add new story for Textarea component ([9bafda1](https://github.com/oneplatformdev/core-web/commit/9bafda1))
38
+ - **Button:** add screen reader text options for improved accessibility ([9b93d9d](https://github.com/oneplatformdev/core-web/commit/9b93d9d))
39
+
40
+ ### 🧱 Updated Dependencies
41
+
42
+ - Updated @oneplatformdev/utils to 0.1.99-beta.8
43
+ - Updated @oneplatformdev/hooks to 0.1.99-beta.8
44
+ - Updated @oneplatformdev/tokens to 0.1.99-beta.8
45
+
46
+ ### ❤️ Thank You
47
+
48
+ - Bohdan Radchenko
49
+
50
+ ## 0.1.99-beta.7 (2025-12-29)
51
+
52
+ ### 🚀 Features
53
+
54
+ - **Button:** add screen reader support for accessibility ([ec7de8e](https://github.com/oneplatformdev/core-web/commit/ec7de8e))
55
+
56
+ ### 🧱 Updated Dependencies
57
+
58
+ - Updated @oneplatformdev/utils to 0.1.99-beta.7
59
+ - Updated @oneplatformdev/hooks to 0.1.99-beta.7
60
+ - Updated @oneplatformdev/tokens to 0.1.99-beta.7
61
+
62
+ ### ❤️ Thank You
63
+
64
+ - Bohdan Radchenko
65
+
66
+ ## 0.1.99-beta.6 (2025-12-29)
67
+
68
+ ### 🚀 Features
69
+
70
+ - **ButtonIcon:** introduce icon-only variant with enhanced props and storybook support ([d643217](https://github.com/oneplatformdev/core-web/commit/d643217))
71
+ - **Button:** add storybook integration with loading and tooltip support ([72ae45e](https://github.com/oneplatformdev/core-web/commit/72ae45e))
72
+
73
+ ### 🧱 Updated Dependencies
74
+
75
+ - Updated @oneplatformdev/utils to 0.1.99-beta.6
76
+ - Updated @oneplatformdev/hooks to 0.1.99-beta.6
77
+ - Updated @oneplatformdev/tokens to 0.1.99-beta.6
78
+
79
+ ### ❤️ Thank You
80
+
81
+ - Bohdan Radchenko
82
+
83
+ ## 0.1.99-beta.5 (2025-12-29)
84
+
85
+ ### 🧱 Updated Dependencies
86
+
87
+ - Updated @oneplatformdev/utils to 0.1.99-beta.5
88
+ - Updated @oneplatformdev/hooks to 0.1.99-beta.5
89
+ - Updated @oneplatformdev/tokens to 0.1.99-beta.5
90
+
91
+ ## 0.1.99-beta.4 (2025-12-29)
92
+
93
+ ### 🧱 Updated Dependencies
94
+
95
+ - Updated @oneplatformdev/utils to 0.1.99-beta.4
96
+ - Updated @oneplatformdev/hooks to 0.1.99-beta.4
97
+ - Updated @oneplatformdev/tokens to 0.1.99-beta.4
98
+
99
+ ## 0.1.99-beta.3 (2025-12-29)
100
+
101
+ ### 🚀 Features
102
+
103
+ - **Button:** add storybook integration with loading and tooltip support ([e7a2e21](https://github.com/oneplatformdev/core-web/commit/e7a2e21))
104
+
105
+ ### 🩹 Fixes
106
+
107
+ - **Button:** update tooltip handling and remove deprecated size variants ([de56165](https://github.com/oneplatformdev/core-web/commit/de56165))
108
+
109
+ ### 🧱 Updated Dependencies
110
+
111
+ - Updated @oneplatformdev/utils to 0.1.99-beta.3
112
+ - Updated @oneplatformdev/hooks to 0.1.99-beta.3
113
+ - Updated @oneplatformdev/tokens to 0.1.99-beta.3
114
+
115
+ ### ❤️ Thank You
116
+
117
+ - Bohdan Radchenko
118
+
119
+ ## 0.1.99-beta.2 (2025-12-29)
120
+
121
+ ### 🧱 Updated Dependencies
122
+
123
+ - Updated @oneplatformdev/utils to 0.1.99-beta.2
124
+ - Updated @oneplatformdev/hooks to 0.1.99-beta.2
125
+ - Updated @oneplatformdev/tokens to 0.1.99-beta.2
126
+
1
127
  ## 0.1.99-beta.1 (2025-12-29)
2
128
 
3
129
  ### 🩹 Fixes
@@ -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,qFA2CrB,CAAC;AAGF,eAAO,MAAM,aAAa,qFAiBzB,CAAC;AAkBF,eAAO,MAAM,KAAK,qFAKjB,CAAC"}
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"}