@fuf-stack/pixels 0.41.6 → 0.42.1

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 (41) hide show
  1. package/dist/Avatar/index.d.cts +2 -2
  2. package/dist/Avatar/index.d.ts +2 -2
  3. package/dist/AvatarGroup/index.d.cts +3 -3
  4. package/dist/AvatarGroup/index.d.ts +3 -3
  5. package/dist/{AvatarGroup-BMKOfE_a.d.ts → AvatarGroup-BfOtqfJy.d.ts} +1 -1
  6. package/dist/{AvatarGroup-2Lmu_V2d.d.cts → AvatarGroup-CUyQwK3t.d.cts} +1 -1
  7. package/dist/Drawer/index.d.cts +2 -2
  8. package/dist/Drawer/index.d.ts +2 -2
  9. package/dist/ProgressCircular/index.cjs +2 -2
  10. package/dist/ProgressCircular/index.d.cts +2 -2
  11. package/dist/ProgressCircular/index.d.ts +2 -2
  12. package/dist/ProgressCircular/index.js +1 -1
  13. package/dist/{ProgressCircular-DdDYbP2p.d.cts → ProgressCircular-BrcYFzAa.d.cts} +3 -1
  14. package/dist/{ProgressCircular-DdDYbP2p.d.ts → ProgressCircular-BrcYFzAa.d.ts} +3 -1
  15. package/dist/Tabs/index.cjs +2 -2
  16. package/dist/Tabs/index.d.cts +2 -2
  17. package/dist/Tabs/index.d.ts +2 -2
  18. package/dist/Tabs/index.js +1 -1
  19. package/dist/{Tabs-xUYwXMX9.d.cts → Tabs-C1UEkvSr.d.cts} +5 -1
  20. package/dist/{Tabs-xUYwXMX9.d.ts → Tabs-C1UEkvSr.d.ts} +5 -1
  21. package/dist/{chunk-JUHSESWB.cjs → chunk-D5BXY6EG.cjs} +12 -2
  22. package/dist/chunk-D5BXY6EG.cjs.map +1 -0
  23. package/dist/{chunk-JZHEG3SM.js → chunk-IAX4ZSZU.js} +13 -3
  24. package/dist/chunk-IAX4ZSZU.js.map +1 -0
  25. package/dist/{chunk-FC3IZIDH.js → chunk-OBOVWXA2.js} +16 -13
  26. package/dist/chunk-OBOVWXA2.js.map +1 -0
  27. package/dist/{chunk-3FBNPV4F.cjs → chunk-PPH46E24.cjs} +16 -13
  28. package/dist/chunk-PPH46E24.cjs.map +1 -0
  29. package/dist/index.cjs +3 -3
  30. package/dist/index.d.cts +5 -5
  31. package/dist/index.d.ts +5 -5
  32. package/dist/index.js +2 -2
  33. package/package.json +2 -2
  34. package/dist/chunk-3FBNPV4F.cjs.map +0 -1
  35. package/dist/chunk-FC3IZIDH.js.map +0 -1
  36. package/dist/chunk-JUHSESWB.cjs.map +0 -1
  37. package/dist/chunk-JZHEG3SM.js.map +0 -1
  38. package/dist/{Avatar-B8lVnLpp.d.cts → Avatar-ylNJ_-dY.d.cts} +5 -5
  39. package/dist/{Avatar-B8lVnLpp.d.ts → Avatar-ylNJ_-dY.d.ts} +5 -5
  40. package/dist/{Drawer-DmwcvuKe.d.cts → Drawer-BnV9qxPA.d.cts} +5 -5
  41. package/dist/{Drawer-DmwcvuKe.d.ts → Drawer-BnV9qxPA.d.ts} +5 -5
@@ -1,5 +1,5 @@
1
- import { A as Avatar } from '../Avatar-B8lVnLpp.cjs';
2
- export { a as AvatarProps } from '../Avatar-B8lVnLpp.cjs';
1
+ import { A as Avatar } from '../Avatar-ylNJ_-dY.cjs';
2
+ export { a as AvatarProps } from '../Avatar-ylNJ_-dY.cjs';
3
3
  import 'react/jsx-runtime';
4
4
  import 'tailwind-variants/dist/config.js';
5
5
  import 'tailwind-variants';
@@ -1,5 +1,5 @@
1
- import { A as Avatar } from '../Avatar-B8lVnLpp.js';
2
- export { a as AvatarProps } from '../Avatar-B8lVnLpp.js';
1
+ import { A as Avatar } from '../Avatar-ylNJ_-dY.js';
2
+ export { a as AvatarProps } from '../Avatar-ylNJ_-dY.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'tailwind-variants/dist/config.js';
5
5
  import 'tailwind-variants';
@@ -1,8 +1,8 @@
1
- import { A as AvatarGroup } from '../AvatarGroup-2Lmu_V2d.cjs';
2
- export { a as AvatarGroupProps } from '../AvatarGroup-2Lmu_V2d.cjs';
1
+ import { A as AvatarGroup } from '../AvatarGroup-CUyQwK3t.cjs';
2
+ export { a as AvatarGroupProps } from '../AvatarGroup-CUyQwK3t.cjs';
3
3
  import 'react/jsx-runtime';
4
4
  import 'react';
5
- import '../Avatar-B8lVnLpp.cjs';
5
+ import '../Avatar-ylNJ_-dY.cjs';
6
6
  import 'tailwind-variants/dist/config.js';
7
7
  import 'tailwind-variants';
8
8
  import '@fuf-stack/pixel-utils';
@@ -1,8 +1,8 @@
1
- import { A as AvatarGroup } from '../AvatarGroup-BMKOfE_a.js';
2
- export { a as AvatarGroupProps } from '../AvatarGroup-BMKOfE_a.js';
1
+ import { A as AvatarGroup } from '../AvatarGroup-BfOtqfJy.js';
2
+ export { a as AvatarGroupProps } from '../AvatarGroup-BfOtqfJy.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'react';
5
- import '../Avatar-B8lVnLpp.js';
5
+ import '../Avatar-ylNJ_-dY.js';
6
6
  import 'tailwind-variants/dist/config.js';
7
7
  import 'tailwind-variants';
8
8
  import '@fuf-stack/pixel-utils';
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { JSX } from 'react';
3
- import { a as AvatarProps } from './Avatar-B8lVnLpp.js';
3
+ import { a as AvatarProps } from './Avatar-ylNJ_-dY.js';
4
4
 
5
5
  interface AvatarGroupProps {
6
6
  bordered?: boolean;
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { JSX } from 'react';
3
- import { a as AvatarProps } from './Avatar-B8lVnLpp.cjs';
3
+ import { a as AvatarProps } from './Avatar-ylNJ_-dY.cjs';
4
4
 
5
5
  interface AvatarGroupProps {
6
6
  bordered?: boolean;
@@ -1,5 +1,5 @@
1
- import { D as Drawer } from '../Drawer-DmwcvuKe.cjs';
2
- export { f as DrawerProps, d as drawerBackdrops, a as drawerPlacements, b as drawerRadii, c as drawerSizes, e as drawerVariants } from '../Drawer-DmwcvuKe.cjs';
1
+ import { D as Drawer } from '../Drawer-BnV9qxPA.cjs';
2
+ export { f as DrawerProps, d as drawerBackdrops, a as drawerPlacements, b as drawerRadii, c as drawerSizes, e as drawerVariants } from '../Drawer-BnV9qxPA.cjs';
3
3
  import 'react/jsx-runtime';
4
4
  import 'tailwind-variants/dist/config.js';
5
5
  import 'tailwind-variants';
@@ -1,5 +1,5 @@
1
- import { D as Drawer } from '../Drawer-DmwcvuKe.js';
2
- export { f as DrawerProps, d as drawerBackdrops, a as drawerPlacements, b as drawerRadii, c as drawerSizes, e as drawerVariants } from '../Drawer-DmwcvuKe.js';
1
+ import { D as Drawer } from '../Drawer-BnV9qxPA.js';
2
+ export { f as DrawerProps, d as drawerBackdrops, a as drawerPlacements, b as drawerRadii, c as drawerSizes, e as drawerVariants } from '../Drawer-BnV9qxPA.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'tailwind-variants/dist/config.js';
5
5
  import 'tailwind-variants';
@@ -2,12 +2,12 @@
2
2
 
3
3
 
4
4
 
5
- var _chunk3FBNPV4Fcjs = require('../chunk-3FBNPV4F.cjs');
5
+ var _chunkPPH46E24cjs = require('../chunk-PPH46E24.cjs');
6
6
  require('../chunk-OLI32URU.cjs');
7
7
  require('../chunk-D4TLDLEX.cjs');
8
8
 
9
9
 
10
10
 
11
11
 
12
- exports.ProgressCircular = _chunk3FBNPV4Fcjs.ProgressCircular_default; exports.default = _chunk3FBNPV4Fcjs.ProgressCircular_default2; exports.progressCircularVariants = _chunk3FBNPV4Fcjs.progressCircularVariants;
12
+ exports.ProgressCircular = _chunkPPH46E24cjs.ProgressCircular_default; exports.default = _chunkPPH46E24cjs.ProgressCircular_default2; exports.progressCircularVariants = _chunkPPH46E24cjs.progressCircularVariants;
13
13
  //# sourceMappingURL=index.cjs.map
@@ -1,5 +1,5 @@
1
- import { P as ProgressCircular } from '../ProgressCircular-DdDYbP2p.cjs';
2
- export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-DdDYbP2p.cjs';
1
+ import { P as ProgressCircular } from '../ProgressCircular-BrcYFzAa.cjs';
2
+ export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-BrcYFzAa.cjs';
3
3
  import 'react/jsx-runtime';
4
4
  import 'tailwind-variants';
5
5
  import 'tailwind-variants/dist/config.js';
@@ -1,5 +1,5 @@
1
- import { P as ProgressCircular } from '../ProgressCircular-DdDYbP2p.js';
2
- export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-DdDYbP2p.js';
1
+ import { P as ProgressCircular } from '../ProgressCircular-BrcYFzAa.js';
2
+ export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-BrcYFzAa.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'tailwind-variants';
5
5
  import 'tailwind-variants/dist/config.js';
@@ -2,7 +2,7 @@ import {
2
2
  ProgressCircular_default,
3
3
  ProgressCircular_default2,
4
4
  progressCircularVariants
5
- } from "../chunk-FC3IZIDH.js";
5
+ } from "../chunk-OBOVWXA2.js";
6
6
  import "../chunk-B3XKBNXD.js";
7
7
  import "../chunk-J7N2552D.js";
8
8
  export {
@@ -440,10 +440,12 @@ interface ProgressCircularProps extends VariantProps {
440
440
  percent: number;
441
441
  /** size options */
442
442
  size?: VariantProps['size'];
443
+ /** stroke width of the circular progress bar */
444
+ strokeWidth?: number;
443
445
  }
444
446
  /**
445
447
  * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)
446
448
  */
447
- declare const ProgressCircular: ({ ariaLabel, className, format, hasError, percent, disableAnimation, size, color, }: ProgressCircularProps) => react_jsx_runtime.JSX.Element;
449
+ declare const ProgressCircular: ({ ariaLabel, className, format, hasError, percent, disableAnimation, size, color, strokeWidth: _strokeWidth, }: ProgressCircularProps) => react_jsx_runtime.JSX.Element;
448
450
 
449
451
  export { ProgressCircular as P, type ProgressCircularProps as a, progressCircularVariants as p };
@@ -440,10 +440,12 @@ interface ProgressCircularProps extends VariantProps {
440
440
  percent: number;
441
441
  /** size options */
442
442
  size?: VariantProps['size'];
443
+ /** stroke width of the circular progress bar */
444
+ strokeWidth?: number;
443
445
  }
444
446
  /**
445
447
  * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)
446
448
  */
447
- declare const ProgressCircular: ({ ariaLabel, className, format, hasError, percent, disableAnimation, size, color, }: ProgressCircularProps) => react_jsx_runtime.JSX.Element;
449
+ declare const ProgressCircular: ({ ariaLabel, className, format, hasError, percent, disableAnimation, size, color, strokeWidth: _strokeWidth, }: ProgressCircularProps) => react_jsx_runtime.JSX.Element;
448
450
 
449
451
  export { ProgressCircular as P, type ProgressCircularProps as a, progressCircularVariants as p };
@@ -2,11 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- var _chunkJUHSESWBcjs = require('../chunk-JUHSESWB.cjs');
5
+ var _chunkD5BXY6EGcjs = require('../chunk-D5BXY6EG.cjs');
6
6
  require('../chunk-D4TLDLEX.cjs');
7
7
 
8
8
 
9
9
 
10
10
 
11
- exports.Tabs = _chunkJUHSESWBcjs.Tabs_default; exports.default = _chunkJUHSESWBcjs.Tabs_default2; exports.tabsVariants = _chunkJUHSESWBcjs.tabsVariants;
11
+ exports.Tabs = _chunkD5BXY6EGcjs.Tabs_default; exports.default = _chunkD5BXY6EGcjs.Tabs_default2; exports.tabsVariants = _chunkD5BXY6EGcjs.tabsVariants;
12
12
  //# sourceMappingURL=index.cjs.map
@@ -1,5 +1,5 @@
1
- import { T as Tabs } from '../Tabs-xUYwXMX9.cjs';
2
- export { b as TabProps, a as TabsProps, t as tabsVariants } from '../Tabs-xUYwXMX9.cjs';
1
+ import { T as Tabs } from '../Tabs-C1UEkvSr.cjs';
2
+ export { b as TabProps, a as TabsProps, t as tabsVariants } from '../Tabs-C1UEkvSr.cjs';
3
3
  import 'react/jsx-runtime';
4
4
  import 'tailwind-variants/dist/config.js';
5
5
  import 'tailwind-variants';
@@ -1,5 +1,5 @@
1
- import { T as Tabs } from '../Tabs-xUYwXMX9.js';
2
- export { b as TabProps, a as TabsProps, t as tabsVariants } from '../Tabs-xUYwXMX9.js';
1
+ import { T as Tabs } from '../Tabs-C1UEkvSr.js';
2
+ export { b as TabProps, a as TabsProps, t as tabsVariants } from '../Tabs-C1UEkvSr.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'tailwind-variants/dist/config.js';
5
5
  import 'tailwind-variants';
@@ -2,7 +2,7 @@ import {
2
2
  Tabs_default,
3
3
  Tabs_default2,
4
4
  tabsVariants
5
- } from "../chunk-JZHEG3SM.js";
5
+ } from "../chunk-IAX4ZSZU.js";
6
6
  import "../chunk-J7N2552D.js";
7
7
  export {
8
8
  Tabs_default as Tabs,
@@ -100,6 +100,8 @@ interface TabProps {
100
100
  key: React.Key;
101
101
  /** Label content displayed in the tab button */
102
102
  label: ReactNode;
103
+ /** HTML data-testid attribute used in e2e tests */
104
+ testId?: string;
103
105
  }
104
106
  interface TabsProps extends VariantProps {
105
107
  /** Accessible label for the tabs component */
@@ -128,6 +130,8 @@ interface TabsProps extends VariantProps {
128
130
  size?: 'sm' | 'md' | 'lg';
129
131
  /** Array of tab configurations */
130
132
  tabs: TabProps[];
133
+ /** HTML data-testid attribute used in e2e tests */
134
+ testId?: string;
131
135
  /** Style variant of the tabs */
132
136
  variant?: 'bordered' | 'light' | 'solid' | 'underlined';
133
137
  /** Whether to display tabs vertically */
@@ -136,6 +140,6 @@ interface TabsProps extends VariantProps {
136
140
  /**
137
141
  * Tabs component based on [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)
138
142
  */
139
- declare const Tabs: ({ ariaLabel, className, defaultSelectedKey, destroyInactiveTabPanel, disableAnimation, disabledKeys, fullWidth, onSelectionChange, placement, radius, selectedKey, size, tabs, variant, vertical, }: TabsProps) => react_jsx_runtime.JSX.Element;
143
+ declare const Tabs: ({ ariaLabel, className, defaultSelectedKey, destroyInactiveTabPanel, disableAnimation, disabledKeys, fullWidth, onSelectionChange, placement, radius, selectedKey, size, tabs, testId, variant, vertical, }: TabsProps) => react_jsx_runtime.JSX.Element;
140
144
 
141
145
  export { Tabs as T, type TabsProps as a, type TabProps as b, tabsVariants as t };
@@ -100,6 +100,8 @@ interface TabProps {
100
100
  key: React.Key;
101
101
  /** Label content displayed in the tab button */
102
102
  label: ReactNode;
103
+ /** HTML data-testid attribute used in e2e tests */
104
+ testId?: string;
103
105
  }
104
106
  interface TabsProps extends VariantProps {
105
107
  /** Accessible label for the tabs component */
@@ -128,6 +130,8 @@ interface TabsProps extends VariantProps {
128
130
  size?: 'sm' | 'md' | 'lg';
129
131
  /** Array of tab configurations */
130
132
  tabs: TabProps[];
133
+ /** HTML data-testid attribute used in e2e tests */
134
+ testId?: string;
131
135
  /** Style variant of the tabs */
132
136
  variant?: 'bordered' | 'light' | 'solid' | 'underlined';
133
137
  /** Whether to display tabs vertically */
@@ -136,6 +140,6 @@ interface TabsProps extends VariantProps {
136
140
  /**
137
141
  * Tabs component based on [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)
138
142
  */
139
- declare const Tabs: ({ ariaLabel, className, defaultSelectedKey, destroyInactiveTabPanel, disableAnimation, disabledKeys, fullWidth, onSelectionChange, placement, radius, selectedKey, size, tabs, variant, vertical, }: TabsProps) => react_jsx_runtime.JSX.Element;
143
+ declare const Tabs: ({ ariaLabel, className, defaultSelectedKey, destroyInactiveTabPanel, disableAnimation, disabledKeys, fullWidth, onSelectionChange, placement, radius, selectedKey, size, tabs, testId, variant, vertical, }: TabsProps) => react_jsx_runtime.JSX.Element;
140
144
 
141
145
  export { Tabs as T, type TabsProps as a, type TabProps as b, tabsVariants as t };
@@ -27,6 +27,7 @@ var Tabs = ({
27
27
  selectedKey = void 0,
28
28
  size = "md",
29
29
  tabs,
30
+ testId = "tab",
30
31
  variant = "solid",
31
32
  vertical = false
32
33
  }) => {
@@ -50,7 +51,16 @@ var Tabs = ({
50
51
  selectedKey,
51
52
  size,
52
53
  variant,
53
- children: (item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _tabs.Tab, { isDisabled: !!item.disabled, title: item.label, children: item.content }, item.key)
54
+ children: (item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
55
+ _tabs.Tab,
56
+ {
57
+ isDisabled: !!item.disabled,
58
+ title: item.label,
59
+ "data-testid": _pixelutils.slugify.call(void 0, `${testId}_${item.testId || item.key}`),
60
+ children: item.content
61
+ },
62
+ item.key
63
+ )
54
64
  }
55
65
  );
56
66
  };
@@ -64,4 +74,4 @@ var Tabs_default2 = Tabs_default;
64
74
 
65
75
 
66
76
  exports.tabsVariants = tabsVariants; exports.Tabs_default = Tabs_default; exports.Tabs_default2 = Tabs_default2;
67
- //# sourceMappingURL=chunk-JUHSESWB.cjs.map
77
+ //# sourceMappingURL=chunk-D5BXY6EG.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-D5BXY6EG.cjs","../src/Tabs/Tabs.tsx","../src/Tabs/index.ts"],"names":[],"mappings":"AAAA;ACGA,oCAAiD;AAEjD,oDAAkD;AA4G1C,+CAAA;AA1GD,IAAM,aAAA,EAAe,4BAAA;AAAG,EAC7B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,EAAA;AAAA,IACN,MAAA,EAAQ,EAAA;AAAA,IACR,KAAA,EAAO,EAAA;AAAA,IACP,GAAA,EAAK,0CAAA;AAAA,IACL,UAAA,EAAY,iBAAA;AAAA,IACZ,OAAA,EAAS,EAAA;AAAA,IACT,UAAA,EAAY;AAAA,EACd;AACF,CAAC,CAAA;AAwDD,IAAM,KAAA,EAAO,CAAC;AAAA,EACZ,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,mBAAA,EAAqB,KAAA,CAAA;AAAA,EACrB,wBAAA,EAA0B,IAAA;AAAA,EAC1B,iBAAA,EAAmB,KAAA;AAAA,EACnB,aAAA,EAAe,KAAA,CAAA;AAAA,EACf,UAAA,EAAY,IAAA;AAAA,EACZ,kBAAA,EAAoB,KAAA,CAAA;AAAA,EACpB,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,OAAA,EAAS,KAAA,CAAA;AAAA,EACT,YAAA,EAAc,KAAA,CAAA;AAAA,EACd,KAAA,EAAO,IAAA;AAAA,EACP,IAAA;AAAA,EACA,OAAA,EAAS,KAAA;AAAA,EACT,QAAA,EAAU,OAAA;AAAA,EACV,SAAA,EAAW;AACb,CAAA,EAAA,GAAiB;AACf,EAAA,MAAM,SAAA,EAAW,YAAA,CAAa,CAAA;AAC9B,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,SAAA,EAAW,MAAM,CAAA;AAEnE,EAAA,uBACE,6BAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,UAAA;AAAA,MACA,kBAAA;AAAA,MACA,uBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,EAAY,QAAA;AAAA,MACZ,KAAA,EAAO,KAAA,GAAQ,CAAC,CAAA;AAAA,MAChB,iBAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MAEC,QAAA,EAAA,CAAC,IAAA,EAAA,mBACA,6BAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UAEC,UAAA,EAAY,CAAC,CAAC,IAAA,CAAK,QAAA;AAAA,UACnB,KAAA,EAAO,IAAA,CAAK,KAAA;AAAA,UACZ,aAAA,EAAa,iCAAA,CAAQ,EAAA;AAEf,UAAA;AAAA,QAAA;AALI,QAAA;AAMZ,MAAA;AAAA,IAAA;AAEJ,EAAA;AAEJ;AAEe;AD3DmB;AACA;AE9DnB;AFgEmB;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-D5BXY6EG.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Tab as HeroTab, Tabs as HeroTabs } from '@heroui/tabs';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const tabsVariants = tv({\n slots: {\n base: '',\n cursor: '',\n panel: '',\n tab: 'data-[hover-unselected=true]:opacity-100',\n tabContent: 'text-foreground',\n tabList: '',\n tabWrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof tabsVariants>;\ntype ClassName = TVClassName<typeof tabsVariants>;\n\nexport interface TabProps {\n /** Content to be displayed in the tab panel */\n content: ReactNode;\n /** Disables the tab so it can not be selected */\n disabled?: boolean;\n /** Unique identifier for the tab */\n key: React.Key;\n /** Label content displayed in the tab button */\n label: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nexport interface TabsProps extends VariantProps {\n /** Accessible label for the tabs component */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** Key of the tab that should be selected by default */\n defaultSelectedKey?: string | number;\n /** Whether to destroy inactive tab panel DOM nodes */\n destroyInactiveTabPanel?: boolean;\n /** Whether the animation should be disabled. */\n disableAnimation?: boolean;\n /** Array of keys for the tabs to disable */\n disabledKeys?: string[];\n /** Whether tabs should take up full container width */\n fullWidth?: boolean;\n /** Callback fired when tab selection changes */\n onSelectionChange?: (key: React.Key) => void;\n /** Position of the tab list relative to the content */\n placement?: 'top' | 'bottom' | 'start' | 'end' | undefined;\n /** Radius of the tabs */\n radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n /** Selected tab key (controlled) */\n selectedKey?: string | number | null;\n /** Size of the tabs */\n size?: 'sm' | 'md' | 'lg';\n /** Array of tab configurations */\n tabs: TabProps[];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Style variant of the tabs */\n variant?: 'bordered' | 'light' | 'solid' | 'underlined';\n /** Whether to display tabs vertically */\n vertical?: boolean;\n}\n\n/**\n * Tabs component based on [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst Tabs = ({\n ariaLabel = undefined,\n className = undefined,\n defaultSelectedKey = undefined,\n destroyInactiveTabPanel = true,\n disableAnimation = false,\n disabledKeys = undefined,\n fullWidth = true,\n onSelectionChange = undefined,\n placement = undefined,\n radius = undefined,\n selectedKey = undefined,\n size = 'md',\n tabs,\n testId = 'tab',\n variant = 'solid',\n vertical = false,\n}: TabsProps) => {\n const variants = tabsVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroTabs\n aria-label={ariaLabel}\n classNames={classNames}\n defaultSelectedKey={defaultSelectedKey}\n destroyInactiveTabPanel={destroyInactiveTabPanel}\n disableAnimation={disableAnimation}\n disabledKeys={disabledKeys}\n fullWidth={fullWidth}\n isVertical={vertical}\n items={tabs || []}\n onSelectionChange={onSelectionChange}\n placement={placement}\n radius={radius}\n selectedKey={selectedKey}\n size={size}\n variant={variant}\n >\n {(item) => (\n <HeroTab\n key={item.key}\n isDisabled={!!item.disabled}\n title={item.label}\n data-testid={slugify(`${testId}_${item.testId || item.key}`)}\n >\n {item.content}\n </HeroTab>\n )}\n </HeroTabs>\n );\n};\n\nexport default Tabs;\n","import Tabs, { tabsVariants } from './Tabs';\n\nexport type { TabsProps, TabProps } from './Tabs';\n\nexport { Tabs, tabsVariants };\n\nexport default Tabs;\n"]}
@@ -1,6 +1,6 @@
1
1
  // src/Tabs/Tabs.tsx
2
2
  import { Tab as HeroTab, Tabs as HeroTabs } from "@heroui/tabs";
3
- import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
3
+ import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
4
4
  import { jsx } from "react/jsx-runtime";
5
5
  var tabsVariants = tv({
6
6
  slots: {
@@ -27,6 +27,7 @@ var Tabs = ({
27
27
  selectedKey = void 0,
28
28
  size = "md",
29
29
  tabs,
30
+ testId = "tab",
30
31
  variant = "solid",
31
32
  vertical = false
32
33
  }) => {
@@ -50,7 +51,16 @@ var Tabs = ({
50
51
  selectedKey,
51
52
  size,
52
53
  variant,
53
- children: (item) => /* @__PURE__ */ jsx(HeroTab, { isDisabled: !!item.disabled, title: item.label, children: item.content }, item.key)
54
+ children: (item) => /* @__PURE__ */ jsx(
55
+ HeroTab,
56
+ {
57
+ isDisabled: !!item.disabled,
58
+ title: item.label,
59
+ "data-testid": slugify(`${testId}_${item.testId || item.key}`),
60
+ children: item.content
61
+ },
62
+ item.key
63
+ )
54
64
  }
55
65
  );
56
66
  };
@@ -64,4 +74,4 @@ export {
64
74
  Tabs_default,
65
75
  Tabs_default2
66
76
  };
67
- //# sourceMappingURL=chunk-JZHEG3SM.js.map
77
+ //# sourceMappingURL=chunk-IAX4ZSZU.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Tabs/Tabs.tsx","../src/Tabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Tab as HeroTab, Tabs as HeroTabs } from '@heroui/tabs';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const tabsVariants = tv({\n slots: {\n base: '',\n cursor: '',\n panel: '',\n tab: 'data-[hover-unselected=true]:opacity-100',\n tabContent: 'text-foreground',\n tabList: '',\n tabWrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof tabsVariants>;\ntype ClassName = TVClassName<typeof tabsVariants>;\n\nexport interface TabProps {\n /** Content to be displayed in the tab panel */\n content: ReactNode;\n /** Disables the tab so it can not be selected */\n disabled?: boolean;\n /** Unique identifier for the tab */\n key: React.Key;\n /** Label content displayed in the tab button */\n label: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nexport interface TabsProps extends VariantProps {\n /** Accessible label for the tabs component */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** Key of the tab that should be selected by default */\n defaultSelectedKey?: string | number;\n /** Whether to destroy inactive tab panel DOM nodes */\n destroyInactiveTabPanel?: boolean;\n /** Whether the animation should be disabled. */\n disableAnimation?: boolean;\n /** Array of keys for the tabs to disable */\n disabledKeys?: string[];\n /** Whether tabs should take up full container width */\n fullWidth?: boolean;\n /** Callback fired when tab selection changes */\n onSelectionChange?: (key: React.Key) => void;\n /** Position of the tab list relative to the content */\n placement?: 'top' | 'bottom' | 'start' | 'end' | undefined;\n /** Radius of the tabs */\n radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n /** Selected tab key (controlled) */\n selectedKey?: string | number | null;\n /** Size of the tabs */\n size?: 'sm' | 'md' | 'lg';\n /** Array of tab configurations */\n tabs: TabProps[];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Style variant of the tabs */\n variant?: 'bordered' | 'light' | 'solid' | 'underlined';\n /** Whether to display tabs vertically */\n vertical?: boolean;\n}\n\n/**\n * Tabs component based on [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst Tabs = ({\n ariaLabel = undefined,\n className = undefined,\n defaultSelectedKey = undefined,\n destroyInactiveTabPanel = true,\n disableAnimation = false,\n disabledKeys = undefined,\n fullWidth = true,\n onSelectionChange = undefined,\n placement = undefined,\n radius = undefined,\n selectedKey = undefined,\n size = 'md',\n tabs,\n testId = 'tab',\n variant = 'solid',\n vertical = false,\n}: TabsProps) => {\n const variants = tabsVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroTabs\n aria-label={ariaLabel}\n classNames={classNames}\n defaultSelectedKey={defaultSelectedKey}\n destroyInactiveTabPanel={destroyInactiveTabPanel}\n disableAnimation={disableAnimation}\n disabledKeys={disabledKeys}\n fullWidth={fullWidth}\n isVertical={vertical}\n items={tabs || []}\n onSelectionChange={onSelectionChange}\n placement={placement}\n radius={radius}\n selectedKey={selectedKey}\n size={size}\n variant={variant}\n >\n {(item) => (\n <HeroTab\n key={item.key}\n isDisabled={!!item.disabled}\n title={item.label}\n data-testid={slugify(`${testId}_${item.testId || item.key}`)}\n >\n {item.content}\n </HeroTab>\n )}\n </HeroTabs>\n );\n};\n\nexport default Tabs;\n","import Tabs, { tabsVariants } from './Tabs';\n\nexport type { TabsProps, TabProps } from './Tabs';\n\nexport { Tabs, tabsVariants };\n\nexport default Tabs;\n"],"mappings":";AAGA,SAAS,OAAO,SAAS,QAAQ,gBAAgB;AAEjD,SAAS,SAAS,IAAI,4BAA4B;AA4G1C;AA1GD,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AACF,CAAC;AAwDD,IAAM,OAAO,CAAC;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT,UAAU;AAAA,EACV,WAAW;AACb,MAAiB;AACf,QAAM,WAAW,aAAa;AAC9B,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,OAAO,QAAQ,CAAC;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,WAAC,SACA;AAAA,QAAC;AAAA;AAAA,UAEC,YAAY,CAAC,CAAC,KAAK;AAAA,UACnB,OAAO,KAAK;AAAA,UACZ,eAAa,QAAQ,GAAG,MAAM,IAAI,KAAK,UAAU,KAAK,GAAG,EAAE;AAAA,UAE1D,eAAK;AAAA;AAAA,QALD,KAAK;AAAA,MAMZ;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,eAAQ;;;ACxHf,IAAOA,gBAAQ;","names":["Tabs_default"]}
@@ -77,7 +77,8 @@ var ProgressCircular = ({
77
77
  percent,
78
78
  disableAnimation = false,
79
79
  size = "md",
80
- color = "info"
80
+ color = "info",
81
+ strokeWidth: _strokeWidth = void 0
81
82
  }) => {
82
83
  const isInitialRenderCycle = useIsInitialRenderCycle();
83
84
  const isFinished = !hasError && percent >= 100;
@@ -89,17 +90,19 @@ var ProgressCircular = ({
89
90
  });
90
91
  const classNames = variantsToClassNames(variants, className, "base");
91
92
  let value = format(percent);
92
- let strokeWidth;
93
- switch (size) {
94
- case "xs":
95
- strokeWidth = 2;
96
- break;
97
- case "sm":
98
- strokeWidth = 1.8;
99
- break;
100
- default:
101
- strokeWidth = 1.6;
102
- break;
93
+ let strokeWidth = _strokeWidth;
94
+ if (_strokeWidth) {
95
+ switch (size) {
96
+ case "xs":
97
+ strokeWidth = 2;
98
+ break;
99
+ case "sm":
100
+ strokeWidth = 1.8;
101
+ break;
102
+ default:
103
+ strokeWidth = 1.6;
104
+ break;
105
+ }
103
106
  }
104
107
  let progressColor = color;
105
108
  if (hasError) {
@@ -136,4 +139,4 @@ export {
136
139
  ProgressCircular_default,
137
140
  ProgressCircular_default2
138
141
  };
139
- //# sourceMappingURL=chunk-FC3IZIDH.js.map
142
+ //# sourceMappingURL=chunk-OBOVWXA2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/ProgressCircular/ProgressCircular.tsx","../src/ProgressCircular/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { CircularProgressProps as HeroCircularProgressProps } from '@heroui/progress';\nimport type { ReactNode } from 'react';\n\nimport { FaCheck, FaTimes } from 'react-icons/fa';\n\nimport { CircularProgress as HeroCircularProgress } from '@heroui/progress';\nimport { circularProgress as heroCircularProgressVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\nexport const progressCircularVariants = tv({\n slots: {\n // wrapper around the whole component\n base: '',\n // indicator of the circle (finished part)\n indicator: '',\n // label next to the svgWrapper\n label: '',\n // wrapper for the circle\n svg: '',\n // wrapper around progress svg and value span\n svgWrapper: '',\n // track of the circle (not finished part)\n track: 'stroke-default-300',\n // outer span next to the svg\n value: '',\n },\n variants: {\n color: {\n info: {\n svg: 'text-info',\n },\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n ...heroCircularProgressVariants.variants.color,\n },\n hasError: {\n true: {\n svg: 'text-danger',\n },\n },\n isFinished: {\n true: {\n svg: 'text-success',\n },\n },\n size: {\n xs: {\n svg: 'h-10 w-10',\n value: 'text-[0.6rem]',\n },\n sm: {\n svg: 'h-12 w-12',\n value: 'text-xs',\n },\n md: {\n svg: 'h-16 w-16',\n value: 'text-md',\n },\n lg: {\n svg: 'h-20 w-20',\n value: 'text-lg',\n },\n xl: {\n svg: 'h-24 w-24',\n value: 'text-xl',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof progressCircularVariants>;\ntype ClassName = TVClassName<typeof progressCircularVariants>;\n\nexport interface ProgressCircularProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** color options */\n color?: VariantProps['color'];\n /** disables all animations */\n disableAnimation?: boolean;\n /** formats the display value of the progress in the center */\n format?: (percent?: number) => ReactNode;\n /** enables error version */\n hasError?: boolean;\n /** percentage / progress of the circular progress bar */\n percent: number;\n /** size options */\n size?: VariantProps['size'];\n /** stroke width of the circular progress bar */\n strokeWidth?: number;\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => `${percent}%`;\n\n/**\n * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)\n */\nconst ProgressCircular = ({\n ariaLabel = 'progress',\n className = undefined,\n format = defaultFormat,\n hasError = false,\n percent,\n disableAnimation = false,\n size = 'md',\n color = 'info',\n strokeWidth: _strokeWidth = undefined,\n}: ProgressCircularProps) => {\n // used to disable animation on initial render cycle\n const isInitialRenderCycle = useIsInitialRenderCycle();\n\n const isFinished = !hasError && percent >= 100;\n const variants = progressCircularVariants({\n color,\n hasError,\n isFinished,\n size,\n });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // format value\n let value = format(percent);\n\n // set strokeWidth based on size prop\n let strokeWidth = _strokeWidth;\n if (_strokeWidth) {\n switch (size) {\n case 'xs':\n strokeWidth = 2;\n break;\n case 'sm':\n strokeWidth = 1.8;\n break;\n default:\n strokeWidth = 1.6;\n break;\n }\n }\n\n // handle special states\n let progressColor: VariantProps['color'] = color;\n if (hasError) {\n progressColor = 'danger';\n value = <FaTimes className=\"text-danger\" />;\n } else if (isFinished) {\n progressColor = 'success';\n value = <FaCheck className=\"text-success\" />;\n }\n\n // pass only HeroUI colors as props\n const heroUiColor = Object.keys(\n heroCircularProgressVariants.variants.color,\n ).includes(color)\n ? (progressColor as HeroCircularProgressProps['color'])\n : undefined;\n\n return (\n <HeroCircularProgress\n aria-label={ariaLabel}\n classNames={classNames}\n color={heroUiColor}\n disableAnimation={isInitialRenderCycle || disableAnimation}\n showValueLabel\n strokeWidth={strokeWidth}\n // we do not use spinner animation when no percent provided\n value={percent || 0}\n valueLabel={value}\n />\n );\n};\n\nexport default ProgressCircular;\n","import ProgressCircular, { progressCircularVariants } from './ProgressCircular';\n\nexport type { ProgressCircularProps } from './ProgressCircular';\n\nexport { ProgressCircular, progressCircularVariants };\n\nexport default ProgressCircular;\n"],"mappings":";;;;;;;;AAIA,SAAS,SAAS,eAAe;AAEjC,SAAS,oBAAoB,4BAA4B;AACzD,SAAS,oBAAoB,oCAAoC;AAEjE,SAAS,IAAI,4BAA4B;AA4I7B;AAxIL,IAAM,2BAA2B,GAAG;AAAA,EACzC,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA;AAAA,IAEN,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA;AAAA,IAEP,KAAK;AAAA;AAAA,IAEL,YAAY;AAAA;AAAA,IAEZ,OAAO;AAAA;AAAA,IAEP,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,OAEG,6BAA6B,SAAS;AAAA,IAE3C,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC;AA2BD,IAAM,gBAAgB,CAAC,UAAU,MAAM,GAAG,OAAO;AAKjD,IAAM,mBAAmB,CAAC;AAAA,EACxB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,aAAa,eAAe;AAC9B,MAA6B;AAE3B,QAAM,uBAAuB,wBAAwB;AAErD,QAAM,aAAa,CAAC,YAAY,WAAW;AAC3C,QAAM,WAAW,yBAAyB;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAGnE,MAAI,QAAQ,OAAO,OAAO;AAG1B,MAAI,cAAc;AAClB,MAAI,cAAc;AAChB,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,sBAAc;AACd;AAAA,MACF,KAAK;AACH,sBAAc;AACd;AAAA,MACF;AACE,sBAAc;AACd;AAAA,IACJ;AAAA,EACF;AAGA,MAAI,gBAAuC;AAC3C,MAAI,UAAU;AACZ,oBAAgB;AAChB,YAAQ,oBAAC,WAAQ,WAAU,eAAc;AAAA,EAC3C,WAAW,YAAY;AACrB,oBAAgB;AAChB,YAAQ,oBAAC,WAAQ,WAAU,gBAAe;AAAA,EAC5C;AAGA,QAAM,cAAc,OAAO;AAAA,IACzB,6BAA6B,SAAS;AAAA,EACxC,EAAE,SAAS,KAAK,IACX,gBACD;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA,OAAO;AAAA,MACP,kBAAkB,wBAAwB;AAAA,MAC1C,gBAAc;AAAA,MACd;AAAA,MAEA,OAAO,WAAW;AAAA,MAClB,YAAY;AAAA;AAAA,EACd;AAEJ;AAEA,IAAO,2BAAQ;;;AC3Kf,IAAOA,4BAAQ;","names":["ProgressCircular_default"]}
@@ -77,7 +77,8 @@ var ProgressCircular = ({
77
77
  percent,
78
78
  disableAnimation = false,
79
79
  size = "md",
80
- color = "info"
80
+ color = "info",
81
+ strokeWidth: _strokeWidth = void 0
81
82
  }) => {
82
83
  const isInitialRenderCycle = _chunkOLI32URUcjs.useIsInitialRenderCycle.call(void 0, );
83
84
  const isFinished = !hasError && percent >= 100;
@@ -89,17 +90,19 @@ var ProgressCircular = ({
89
90
  });
90
91
  const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
91
92
  let value = format(percent);
92
- let strokeWidth;
93
- switch (size) {
94
- case "xs":
95
- strokeWidth = 2;
96
- break;
97
- case "sm":
98
- strokeWidth = 1.8;
99
- break;
100
- default:
101
- strokeWidth = 1.6;
102
- break;
93
+ let strokeWidth = _strokeWidth;
94
+ if (_strokeWidth) {
95
+ switch (size) {
96
+ case "xs":
97
+ strokeWidth = 2;
98
+ break;
99
+ case "sm":
100
+ strokeWidth = 1.8;
101
+ break;
102
+ default:
103
+ strokeWidth = 1.6;
104
+ break;
105
+ }
103
106
  }
104
107
  let progressColor = color;
105
108
  if (hasError) {
@@ -136,4 +139,4 @@ var ProgressCircular_default2 = ProgressCircular_default;
136
139
 
137
140
 
138
141
  exports.progressCircularVariants = progressCircularVariants; exports.ProgressCircular_default = ProgressCircular_default; exports.ProgressCircular_default2 = ProgressCircular_default2;
139
- //# sourceMappingURL=chunk-3FBNPV4F.cjs.map
142
+ //# sourceMappingURL=chunk-PPH46E24.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-PPH46E24.cjs","../src/ProgressCircular/ProgressCircular.tsx","../src/ProgressCircular/index.ts"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACHA,oCAAiC;AAEjC,4CAAyD;AACzD,sCAAiE;AAEjE,oDAAyC;AA4I7B,+CAAA;AAxIL,IAAM,yBAAA,EAA2B,4BAAA;AAAG,EACzC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,SAAA,EAAW,EAAA;AAAA;AAAA,IAEX,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,GAAA,EAAK,EAAA;AAAA;AAAA,IAEL,UAAA,EAAY,EAAA;AAAA;AAAA,IAEZ,KAAA,EAAO,oBAAA;AAAA;AAAA,IAEP,KAAA,EAAO;AAAA,EACT,CAAA;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO,8CAAA;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IAAA,CAAA,EAEG,uBAAA,CAA6B,QAAA,CAAS,KAAA,CAAA;AAAA,IAE3C,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;AA2BD,IAAM,cAAA,EAAgB,CAAC,QAAA,EAAU,CAAA,EAAA,GAAM,CAAA,EAAA;AAKb;AACZ,EAAA;AACA,EAAA;AACH,EAAA;AACE,EAAA;AACX,EAAA;AACmB,EAAA;AACZ,EAAA;AACC,EAAA;AACoB,EAAA;AACD;AAEE,EAAA;AAEG,EAAA;AACf,EAAA;AACf,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACD,EAAA;AACkB,EAAA;AAGO,EAAA;AAGR,EAAA;AACA,EAAA;AACF,IAAA;AACP,MAAA;AACW,QAAA;AACd,QAAA;AACG,MAAA;AACW,QAAA;AACd,QAAA;AACF,MAAA;AACgB,QAAA;AACd,QAAA;AACJ,IAAA;AACF,EAAA;AAG2C,EAAA;AAC7B,EAAA;AACI,IAAA;AACP,IAAA;AACY,EAAA;AACL,IAAA;AACP,IAAA;AACX,EAAA;AAG2B,EAAA;AACI,IAAA;AAG3B,EAAA;AAGF,EAAA;AAAC,IAAA;AAAA,IAAA;AACa,MAAA;AACZ,MAAA;AACO,MAAA;AACW,MAAA;AACJ,MAAA;AACd,MAAA;AAEkB,MAAA;AACN,MAAA;AAAA,IAAA;AACd,EAAA;AAEJ;AAEe;AD7CuB;AACA;AE/HvB;AFiIuB;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-PPH46E24.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { CircularProgressProps as HeroCircularProgressProps } from '@heroui/progress';\nimport type { ReactNode } from 'react';\n\nimport { FaCheck, FaTimes } from 'react-icons/fa';\n\nimport { CircularProgress as HeroCircularProgress } from '@heroui/progress';\nimport { circularProgress as heroCircularProgressVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\nexport const progressCircularVariants = tv({\n slots: {\n // wrapper around the whole component\n base: '',\n // indicator of the circle (finished part)\n indicator: '',\n // label next to the svgWrapper\n label: '',\n // wrapper for the circle\n svg: '',\n // wrapper around progress svg and value span\n svgWrapper: '',\n // track of the circle (not finished part)\n track: 'stroke-default-300',\n // outer span next to the svg\n value: '',\n },\n variants: {\n color: {\n info: {\n svg: 'text-info',\n },\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n ...heroCircularProgressVariants.variants.color,\n },\n hasError: {\n true: {\n svg: 'text-danger',\n },\n },\n isFinished: {\n true: {\n svg: 'text-success',\n },\n },\n size: {\n xs: {\n svg: 'h-10 w-10',\n value: 'text-[0.6rem]',\n },\n sm: {\n svg: 'h-12 w-12',\n value: 'text-xs',\n },\n md: {\n svg: 'h-16 w-16',\n value: 'text-md',\n },\n lg: {\n svg: 'h-20 w-20',\n value: 'text-lg',\n },\n xl: {\n svg: 'h-24 w-24',\n value: 'text-xl',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof progressCircularVariants>;\ntype ClassName = TVClassName<typeof progressCircularVariants>;\n\nexport interface ProgressCircularProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** color options */\n color?: VariantProps['color'];\n /** disables all animations */\n disableAnimation?: boolean;\n /** formats the display value of the progress in the center */\n format?: (percent?: number) => ReactNode;\n /** enables error version */\n hasError?: boolean;\n /** percentage / progress of the circular progress bar */\n percent: number;\n /** size options */\n size?: VariantProps['size'];\n /** stroke width of the circular progress bar */\n strokeWidth?: number;\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => `${percent}%`;\n\n/**\n * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)\n */\nconst ProgressCircular = ({\n ariaLabel = 'progress',\n className = undefined,\n format = defaultFormat,\n hasError = false,\n percent,\n disableAnimation = false,\n size = 'md',\n color = 'info',\n strokeWidth: _strokeWidth = undefined,\n}: ProgressCircularProps) => {\n // used to disable animation on initial render cycle\n const isInitialRenderCycle = useIsInitialRenderCycle();\n\n const isFinished = !hasError && percent >= 100;\n const variants = progressCircularVariants({\n color,\n hasError,\n isFinished,\n size,\n });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // format value\n let value = format(percent);\n\n // set strokeWidth based on size prop\n let strokeWidth = _strokeWidth;\n if (_strokeWidth) {\n switch (size) {\n case 'xs':\n strokeWidth = 2;\n break;\n case 'sm':\n strokeWidth = 1.8;\n break;\n default:\n strokeWidth = 1.6;\n break;\n }\n }\n\n // handle special states\n let progressColor: VariantProps['color'] = color;\n if (hasError) {\n progressColor = 'danger';\n value = <FaTimes className=\"text-danger\" />;\n } else if (isFinished) {\n progressColor = 'success';\n value = <FaCheck className=\"text-success\" />;\n }\n\n // pass only HeroUI colors as props\n const heroUiColor = Object.keys(\n heroCircularProgressVariants.variants.color,\n ).includes(color)\n ? (progressColor as HeroCircularProgressProps['color'])\n : undefined;\n\n return (\n <HeroCircularProgress\n aria-label={ariaLabel}\n classNames={classNames}\n color={heroUiColor}\n disableAnimation={isInitialRenderCycle || disableAnimation}\n showValueLabel\n strokeWidth={strokeWidth}\n // we do not use spinner animation when no percent provided\n value={percent || 0}\n valueLabel={value}\n />\n );\n};\n\nexport default ProgressCircular;\n","import ProgressCircular, { progressCircularVariants } from './ProgressCircular';\n\nexport type { ProgressCircularProps } from './ProgressCircular';\n\nexport { ProgressCircular, progressCircularVariants };\n\nexport default ProgressCircular;\n"]}
package/dist/index.cjs CHANGED
@@ -5,7 +5,7 @@ var _chunkPK723NKOcjs = require('./chunk-PK723NKO.cjs');
5
5
 
6
6
 
7
7
 
8
- var _chunk3FBNPV4Fcjs = require('./chunk-3FBNPV4F.cjs');
8
+ var _chunkPPH46E24cjs = require('./chunk-PPH46E24.cjs');
9
9
 
10
10
 
11
11
 
@@ -13,7 +13,7 @@ var _chunkAJCAIA6Hcjs = require('./chunk-AJCAIA6H.cjs');
13
13
 
14
14
 
15
15
 
16
- var _chunkJUHSESWBcjs = require('./chunk-JUHSESWB.cjs');
16
+ var _chunkD5BXY6EGcjs = require('./chunk-D5BXY6EG.cjs');
17
17
 
18
18
 
19
19
 
@@ -131,5 +131,5 @@ require('./chunk-D4TLDLEX.cjs');
131
131
 
132
132
 
133
133
 
134
- exports.Accordion = _chunk2P5WWVQ6cjs.Accordion_default; exports.Alert = _chunkYVPRFCWIcjs.Alert_default; exports.Avatar = _chunk77J7NZYBcjs.Avatar_default; exports.AvatarGroup = _chunkLIZGYO24cjs.AvatarGroup_default; exports.Badge = _chunkJSANDW3Wcjs.Badge_default; exports.Breadcrumb = _chunkZZOEFQWQcjs.Breadcrumb_default; exports.Button = _chunkFLPLJTACcjs.Button_default; exports.ButtonGroup = _chunkY3RSI2KVcjs.ButtonGroup_default; exports.Card = _chunkMHZAWSFJcjs.Card_default; exports.Drawer = _chunk7RVUB6I5cjs.Drawer_default; exports.Json = _chunkJ63YGHTGcjs.Json_default; exports.Label = _chunkPLJWIGRScjs.Label_default; exports.Menu = _chunkXHOAZB2Zcjs.Menu_default; exports.Modal = _chunkPEUUQMJScjs.Modal_default; exports.Popover = _chunkEAX5J2I2cjs.Popover_default; exports.Progress = _chunkPK723NKOcjs.Progress_default; exports.ProgressCircular = _chunk3FBNPV4Fcjs.ProgressCircular_default; exports.Table = _chunkAJCAIA6Hcjs.Table_default; exports.Tabs = _chunkJUHSESWBcjs.Tabs_default; exports.Toast = _chunkGXIDQFQ6cjs.Toast; exports.ToastProvider = _chunkGXIDQFQ6cjs.ToastProvider_default; exports.Tooltip = _chunk25AJSW5Ecjs.Tooltip_default; exports.accordionVariants = _chunk2P5WWVQ6cjs.accordionVariants; exports.addToast = _chunkGXIDQFQ6cjs.addToast; exports.alertVariants = _chunkYVPRFCWIcjs.alertVariants; exports.breadcrumbVariants = _chunkZZOEFQWQcjs.breadcrumbVariants; exports.buttonVariants = _chunkFLPLJTACcjs.buttonVariants; exports.cardVariants = _chunkMHZAWSFJcjs.cardVariants; exports.drawerBackdrops = _chunk7RVUB6I5cjs.drawerBackdrops; exports.drawerPlacements = _chunk7RVUB6I5cjs.drawerPlacements; exports.drawerRadii = _chunk7RVUB6I5cjs.drawerRadii; exports.drawerSizes = _chunk7RVUB6I5cjs.drawerSizes; exports.drawerVariants = _chunk7RVUB6I5cjs.drawerVariants; exports.labelVariants = _chunkPLJWIGRScjs.labelVariants; exports.modalVariants = _chunkPEUUQMJScjs.modalVariants; exports.progressCircularVariants = _chunk3FBNPV4Fcjs.progressCircularVariants; exports.progressVariants = _chunkPK723NKOcjs.progressVariants; exports.tableVariants = _chunkAJCAIA6Hcjs.tableVariants; exports.tabsVariants = _chunkJUHSESWBcjs.tabsVariants; exports.toastVariants = _chunkGXIDQFQ6cjs.toastVariants; exports.useDebounce = _chunkOLI32URUcjs.useDebounce; exports.useIsInitialRenderCycle = _chunkOLI32URUcjs.useIsInitialRenderCycle; exports.useLocalStorage = _chunkOLI32URUcjs.useLocalStorage;
134
+ exports.Accordion = _chunk2P5WWVQ6cjs.Accordion_default; exports.Alert = _chunkYVPRFCWIcjs.Alert_default; exports.Avatar = _chunk77J7NZYBcjs.Avatar_default; exports.AvatarGroup = _chunkLIZGYO24cjs.AvatarGroup_default; exports.Badge = _chunkJSANDW3Wcjs.Badge_default; exports.Breadcrumb = _chunkZZOEFQWQcjs.Breadcrumb_default; exports.Button = _chunkFLPLJTACcjs.Button_default; exports.ButtonGroup = _chunkY3RSI2KVcjs.ButtonGroup_default; exports.Card = _chunkMHZAWSFJcjs.Card_default; exports.Drawer = _chunk7RVUB6I5cjs.Drawer_default; exports.Json = _chunkJ63YGHTGcjs.Json_default; exports.Label = _chunkPLJWIGRScjs.Label_default; exports.Menu = _chunkXHOAZB2Zcjs.Menu_default; exports.Modal = _chunkPEUUQMJScjs.Modal_default; exports.Popover = _chunkEAX5J2I2cjs.Popover_default; exports.Progress = _chunkPK723NKOcjs.Progress_default; exports.ProgressCircular = _chunkPPH46E24cjs.ProgressCircular_default; exports.Table = _chunkAJCAIA6Hcjs.Table_default; exports.Tabs = _chunkD5BXY6EGcjs.Tabs_default; exports.Toast = _chunkGXIDQFQ6cjs.Toast; exports.ToastProvider = _chunkGXIDQFQ6cjs.ToastProvider_default; exports.Tooltip = _chunk25AJSW5Ecjs.Tooltip_default; exports.accordionVariants = _chunk2P5WWVQ6cjs.accordionVariants; exports.addToast = _chunkGXIDQFQ6cjs.addToast; exports.alertVariants = _chunkYVPRFCWIcjs.alertVariants; exports.breadcrumbVariants = _chunkZZOEFQWQcjs.breadcrumbVariants; exports.buttonVariants = _chunkFLPLJTACcjs.buttonVariants; exports.cardVariants = _chunkMHZAWSFJcjs.cardVariants; exports.drawerBackdrops = _chunk7RVUB6I5cjs.drawerBackdrops; exports.drawerPlacements = _chunk7RVUB6I5cjs.drawerPlacements; exports.drawerRadii = _chunk7RVUB6I5cjs.drawerRadii; exports.drawerSizes = _chunk7RVUB6I5cjs.drawerSizes; exports.drawerVariants = _chunk7RVUB6I5cjs.drawerVariants; exports.labelVariants = _chunkPLJWIGRScjs.labelVariants; exports.modalVariants = _chunkPEUUQMJScjs.modalVariants; exports.progressCircularVariants = _chunkPPH46E24cjs.progressCircularVariants; exports.progressVariants = _chunkPK723NKOcjs.progressVariants; exports.tableVariants = _chunkAJCAIA6Hcjs.tableVariants; exports.tabsVariants = _chunkD5BXY6EGcjs.tabsVariants; exports.toastVariants = _chunkGXIDQFQ6cjs.toastVariants; exports.useDebounce = _chunkOLI32URUcjs.useDebounce; exports.useIsInitialRenderCycle = _chunkOLI32URUcjs.useIsInitialRenderCycle; exports.useLocalStorage = _chunkOLI32URUcjs.useLocalStorage;
135
135
  //# sourceMappingURL=index.cjs.map
package/dist/index.d.cts CHANGED
@@ -1,22 +1,22 @@
1
1
  export { A as Accordion, c as AccordionItemProps, b as AccordionProps, a as accordionVariants } from './Accordion-rA715N0Z.cjs';
2
2
  export { A as Alert, b as AlertProps, a as alertVariants } from './Alert-DELD9ZWe.cjs';
3
- export { A as Avatar, a as AvatarProps } from './Avatar-B8lVnLpp.cjs';
4
- export { A as AvatarGroup, a as AvatarGroupProps } from './AvatarGroup-2Lmu_V2d.cjs';
3
+ export { A as Avatar, a as AvatarProps } from './Avatar-ylNJ_-dY.cjs';
4
+ export { A as AvatarGroup, a as AvatarGroupProps } from './AvatarGroup-CUyQwK3t.cjs';
5
5
  export { A as Badge, B as BadgeProps } from './Badge-CvXzljaJ.cjs';
6
6
  export { B as Breadcrumb, c as BreadcrumbItemProps, a as BreadcrumbProps, b as breadcrumbVariants } from './Breadcrumb-1cB54eJk.cjs';
7
7
  export { B as Button, a as ButtonProps, b as buttonVariants } from './Button-Bm0yKM7X.cjs';
8
8
  export { B as ButtonGroup } from './ButtonGroup-CUxpALRo.cjs';
9
9
  export { C as Card, a as CardProps, c as cardVariants } from './Card-BdciRqJz.cjs';
10
- export { D as Drawer, f as DrawerProps, d as drawerBackdrops, a as drawerPlacements, b as drawerRadii, c as drawerSizes, e as drawerVariants } from './Drawer-DmwcvuKe.cjs';
10
+ export { D as Drawer, f as DrawerProps, d as drawerBackdrops, a as drawerPlacements, b as drawerRadii, c as drawerSizes, e as drawerVariants } from './Drawer-BnV9qxPA.cjs';
11
11
  export { J as Json, a as JsonProps } from './Json-Dny90Wml.cjs';
12
12
  export { L as Label, a as LabelProps, l as labelVariants } from './Label-Bp9WZiDB.cjs';
13
13
  export { M as Menu, b as MenuItem, a as MenuProps, c as MenuSection } from './Menu-DYi8oagz.cjs';
14
14
  export { M as Modal, a as ModalProps, m as modalVariants } from './Modal-DI5ZdS_3.cjs';
15
15
  export { _ as Popover, P as PopoverProps } from './Popover-DajWpbPN.cjs';
16
- export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-DdDYbP2p.cjs';
16
+ export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-BrcYFzAa.cjs';
17
17
  export { P as Progress, a as ProgressProps, p as progressVariants } from './Progress-7yXUVioO.cjs';
18
18
  export { T as Table, c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from './Table-D19f5nrd.cjs';
19
- export { b as TabProps, T as Tabs, a as TabsProps, t as tabsVariants } from './Tabs-xUYwXMX9.cjs';
19
+ export { b as TabProps, T as Tabs, a as TabsProps, t as tabsVariants } from './Tabs-C1UEkvSr.cjs';
20
20
  export { Toast } from '@heroui/toast';
21
21
  export { A as AddToastVariantProps, b as ToastProps, T as ToastProvider, c as ToastProviderProps, a as addToast, t as toastVariants } from './ToastProvider-CL1v-bkE.cjs';
22
22
  export { T as Tooltip, b as TooltipPlacement, a as TooltipProps } from './Tooltip-Bu71AKvn.cjs';
package/dist/index.d.ts CHANGED
@@ -1,22 +1,22 @@
1
1
  export { A as Accordion, c as AccordionItemProps, b as AccordionProps, a as accordionVariants } from './Accordion-rA715N0Z.js';
2
2
  export { A as Alert, b as AlertProps, a as alertVariants } from './Alert-DELD9ZWe.js';
3
- export { A as Avatar, a as AvatarProps } from './Avatar-B8lVnLpp.js';
4
- export { A as AvatarGroup, a as AvatarGroupProps } from './AvatarGroup-BMKOfE_a.js';
3
+ export { A as Avatar, a as AvatarProps } from './Avatar-ylNJ_-dY.js';
4
+ export { A as AvatarGroup, a as AvatarGroupProps } from './AvatarGroup-BfOtqfJy.js';
5
5
  export { A as Badge, B as BadgeProps } from './Badge-CvXzljaJ.js';
6
6
  export { B as Breadcrumb, c as BreadcrumbItemProps, a as BreadcrumbProps, b as breadcrumbVariants } from './Breadcrumb-1cB54eJk.js';
7
7
  export { B as Button, a as ButtonProps, b as buttonVariants } from './Button-Bm0yKM7X.js';
8
8
  export { B as ButtonGroup } from './ButtonGroup-CUxpALRo.js';
9
9
  export { C as Card, a as CardProps, c as cardVariants } from './Card-BdciRqJz.js';
10
- export { D as Drawer, f as DrawerProps, d as drawerBackdrops, a as drawerPlacements, b as drawerRadii, c as drawerSizes, e as drawerVariants } from './Drawer-DmwcvuKe.js';
10
+ export { D as Drawer, f as DrawerProps, d as drawerBackdrops, a as drawerPlacements, b as drawerRadii, c as drawerSizes, e as drawerVariants } from './Drawer-BnV9qxPA.js';
11
11
  export { J as Json, a as JsonProps } from './Json-Dny90Wml.js';
12
12
  export { L as Label, a as LabelProps, l as labelVariants } from './Label-Bp9WZiDB.js';
13
13
  export { M as Menu, b as MenuItem, a as MenuProps, c as MenuSection } from './Menu-DYi8oagz.js';
14
14
  export { M as Modal, a as ModalProps, m as modalVariants } from './Modal-DI5ZdS_3.js';
15
15
  export { _ as Popover, P as PopoverProps } from './Popover-DcZ3qt-u.js';
16
- export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-DdDYbP2p.js';
16
+ export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-BrcYFzAa.js';
17
17
  export { P as Progress, a as ProgressProps, p as progressVariants } from './Progress-7yXUVioO.js';
18
18
  export { T as Table, c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from './Table-D19f5nrd.js';
19
- export { b as TabProps, T as Tabs, a as TabsProps, t as tabsVariants } from './Tabs-xUYwXMX9.js';
19
+ export { b as TabProps, T as Tabs, a as TabsProps, t as tabsVariants } from './Tabs-C1UEkvSr.js';
20
20
  export { Toast } from '@heroui/toast';
21
21
  export { A as AddToastVariantProps, b as ToastProps, T as ToastProvider, c as ToastProviderProps, a as addToast, t as toastVariants } from './ToastProvider-CL1v-bkE.js';
22
22
  export { T as Tooltip, b as TooltipPlacement, a as TooltipProps } from './Tooltip-Bu71AKvn.js';
package/dist/index.js CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  import {
6
6
  ProgressCircular_default,
7
7
  progressCircularVariants
8
- } from "./chunk-FC3IZIDH.js";
8
+ } from "./chunk-OBOVWXA2.js";
9
9
  import {
10
10
  Table_default,
11
11
  tableVariants
@@ -13,7 +13,7 @@ import {
13
13
  import {
14
14
  Tabs_default,
15
15
  tabsVariants
16
- } from "./chunk-JZHEG3SM.js";
16
+ } from "./chunk-IAX4ZSZU.js";
17
17
  import {
18
18
  Toast,
19
19
  ToastProvider_default,
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@fuf-stack/pixels",
3
3
  "description": "fuf core react component library",
4
4
  "author": "Hannes Tiede",
5
- "version": "0.41.6",
5
+ "version": "0.42.1",
6
6
  "type": "module",
7
7
  "main": "./dist/index.cjs",
8
8
  "module": "./dist/index.js",
@@ -180,7 +180,7 @@
180
180
  "@heroui/tabs": "2.2.14",
181
181
  "@heroui/toast": "2.0.7",
182
182
  "@heroui/tooltip": "2.2.14",
183
- "framer-motion": "12.7.4",
183
+ "framer-motion": "12.8.0",
184
184
  "next-themes": "0.4.6",
185
185
  "react-icons": "5.5.0",
186
186
  "@fuf-stack/pixel-utils": "0.5.3"
@@ -1 +0,0 @@
1
- {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-3FBNPV4F.cjs","../src/ProgressCircular/ProgressCircular.tsx","../src/ProgressCircular/index.ts"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACHA,oCAAiC;AAEjC,4CAAyD;AACzD,sCAAiE;AAEjE,oDAAyC;AAuI7B,+CAAA;AAnIL,IAAM,yBAAA,EAA2B,4BAAA;AAAG,EACzC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,SAAA,EAAW,EAAA;AAAA;AAAA,IAEX,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,GAAA,EAAK,EAAA;AAAA;AAAA,IAEL,UAAA,EAAY,EAAA;AAAA;AAAA,IAEZ,KAAA,EAAO,oBAAA;AAAA;AAAA,IAEP,KAAA,EAAO;AAAA,EACT,CAAA;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO,8CAAA;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IAAA,CAAA,EAEG,uBAAA,CAA6B,QAAA,CAAS,KAAA,CAAA;AAAA,IAE3C,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;AAyBD,IAAM,cAAA,EAAgB,CAAC,QAAA,EAAU,CAAA,EAAA,GAAM,CAAA,EAAA;AAKb;AACZ,EAAA;AACA,EAAA;AACH,EAAA;AACE,EAAA;AACX,EAAA;AACmB,EAAA;AACZ,EAAA;AACC,EAAA;AACmB;AAEE,EAAA;AAEG,EAAA;AACf,EAAA;AACf,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACD,EAAA;AACkB,EAAA;AAGO,EAAA;AAGtB,EAAA;AACU,EAAA;AACP,IAAA;AACW,MAAA;AACd,MAAA;AACG,IAAA;AACW,MAAA;AACd,MAAA;AACF,IAAA;AACgB,MAAA;AACd,MAAA;AACJ,EAAA;AAG2C,EAAA;AAC7B,EAAA;AACI,IAAA;AACP,IAAA;AACY,EAAA;AACL,IAAA;AACP,IAAA;AACX,EAAA;AAG2B,EAAA;AACI,IAAA;AAG3B,EAAA;AAGF,EAAA;AAAC,IAAA;AAAA,IAAA;AACa,MAAA;AACZ,MAAA;AACO,MAAA;AACW,MAAA;AACJ,MAAA;AACd,MAAA;AAEkB,MAAA;AACN,MAAA;AAAA,IAAA;AACd,EAAA;AAEJ;AAEe;AD3CuB;AACA;AE5HvB;AF8HuB;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-3FBNPV4F.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { CircularProgressProps as HeroCircularProgressProps } from '@heroui/progress';\nimport type { ReactNode } from 'react';\n\nimport { FaCheck, FaTimes } from 'react-icons/fa';\n\nimport { CircularProgress as HeroCircularProgress } from '@heroui/progress';\nimport { circularProgress as heroCircularProgressVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\nexport const progressCircularVariants = tv({\n slots: {\n // wrapper around the whole component\n base: '',\n // indicator of the circle (finished part)\n indicator: '',\n // label next to the svgWrapper\n label: '',\n // wrapper for the circle\n svg: '',\n // wrapper around progress svg and value span\n svgWrapper: '',\n // track of the circle (not finished part)\n track: 'stroke-default-300',\n // outer span next to the svg\n value: '',\n },\n variants: {\n color: {\n info: {\n svg: 'text-info',\n },\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n ...heroCircularProgressVariants.variants.color,\n },\n hasError: {\n true: {\n svg: 'text-danger',\n },\n },\n isFinished: {\n true: {\n svg: 'text-success',\n },\n },\n size: {\n xs: {\n svg: 'h-10 w-10',\n value: 'text-[0.6rem]',\n },\n sm: {\n svg: 'h-12 w-12',\n value: 'text-xs',\n },\n md: {\n svg: 'h-16 w-16',\n value: 'text-md',\n },\n lg: {\n svg: 'h-20 w-20',\n value: 'text-lg',\n },\n xl: {\n svg: 'h-24 w-24',\n value: 'text-xl',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof progressCircularVariants>;\ntype ClassName = TVClassName<typeof progressCircularVariants>;\n\nexport interface ProgressCircularProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** color options */\n color?: VariantProps['color'];\n /** disables all animations */\n disableAnimation?: boolean;\n /** formats the display value of the progress in the center */\n format?: (percent?: number) => ReactNode;\n /** enables error version */\n hasError?: boolean;\n /** percentage / progress of the circular progress bar */\n percent: number;\n /** size options */\n size?: VariantProps['size'];\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => `${percent}%`;\n\n/**\n * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)\n */\nconst ProgressCircular = ({\n ariaLabel = 'progress',\n className = undefined,\n format = defaultFormat,\n hasError = false,\n percent,\n disableAnimation = false,\n size = 'md',\n color = 'info',\n}: ProgressCircularProps) => {\n // used to disable animation on initial render cycle\n const isInitialRenderCycle = useIsInitialRenderCycle();\n\n const isFinished = !hasError && percent >= 100;\n const variants = progressCircularVariants({\n color,\n hasError,\n isFinished,\n size,\n });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // format value\n let value = format(percent);\n\n // set strokeWidth based on size prop\n let strokeWidth: number;\n switch (size) {\n case 'xs':\n strokeWidth = 2;\n break;\n case 'sm':\n strokeWidth = 1.8;\n break;\n default:\n strokeWidth = 1.6;\n break;\n }\n\n // handle special states\n let progressColor: VariantProps['color'] = color;\n if (hasError) {\n progressColor = 'danger';\n value = <FaTimes className=\"text-danger\" />;\n } else if (isFinished) {\n progressColor = 'success';\n value = <FaCheck className=\"text-success\" />;\n }\n\n // pass only HeroUI colors as props\n const heroUiColor = Object.keys(\n heroCircularProgressVariants.variants.color,\n ).includes(color)\n ? (progressColor as HeroCircularProgressProps['color'])\n : undefined;\n\n return (\n <HeroCircularProgress\n aria-label={ariaLabel}\n classNames={classNames}\n color={heroUiColor}\n disableAnimation={isInitialRenderCycle || disableAnimation}\n showValueLabel\n strokeWidth={strokeWidth}\n // we do not use spinner animation when no percent provided\n value={percent || 0}\n valueLabel={value}\n />\n );\n};\n\nexport default ProgressCircular;\n","import ProgressCircular, { progressCircularVariants } from './ProgressCircular';\n\nexport type { ProgressCircularProps } from './ProgressCircular';\n\nexport { ProgressCircular, progressCircularVariants };\n\nexport default ProgressCircular;\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/ProgressCircular/ProgressCircular.tsx","../src/ProgressCircular/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { CircularProgressProps as HeroCircularProgressProps } from '@heroui/progress';\nimport type { ReactNode } from 'react';\n\nimport { FaCheck, FaTimes } from 'react-icons/fa';\n\nimport { CircularProgress as HeroCircularProgress } from '@heroui/progress';\nimport { circularProgress as heroCircularProgressVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\nexport const progressCircularVariants = tv({\n slots: {\n // wrapper around the whole component\n base: '',\n // indicator of the circle (finished part)\n indicator: '',\n // label next to the svgWrapper\n label: '',\n // wrapper for the circle\n svg: '',\n // wrapper around progress svg and value span\n svgWrapper: '',\n // track of the circle (not finished part)\n track: 'stroke-default-300',\n // outer span next to the svg\n value: '',\n },\n variants: {\n color: {\n info: {\n svg: 'text-info',\n },\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n ...heroCircularProgressVariants.variants.color,\n },\n hasError: {\n true: {\n svg: 'text-danger',\n },\n },\n isFinished: {\n true: {\n svg: 'text-success',\n },\n },\n size: {\n xs: {\n svg: 'h-10 w-10',\n value: 'text-[0.6rem]',\n },\n sm: {\n svg: 'h-12 w-12',\n value: 'text-xs',\n },\n md: {\n svg: 'h-16 w-16',\n value: 'text-md',\n },\n lg: {\n svg: 'h-20 w-20',\n value: 'text-lg',\n },\n xl: {\n svg: 'h-24 w-24',\n value: 'text-xl',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof progressCircularVariants>;\ntype ClassName = TVClassName<typeof progressCircularVariants>;\n\nexport interface ProgressCircularProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** color options */\n color?: VariantProps['color'];\n /** disables all animations */\n disableAnimation?: boolean;\n /** formats the display value of the progress in the center */\n format?: (percent?: number) => ReactNode;\n /** enables error version */\n hasError?: boolean;\n /** percentage / progress of the circular progress bar */\n percent: number;\n /** size options */\n size?: VariantProps['size'];\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => `${percent}%`;\n\n/**\n * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)\n */\nconst ProgressCircular = ({\n ariaLabel = 'progress',\n className = undefined,\n format = defaultFormat,\n hasError = false,\n percent,\n disableAnimation = false,\n size = 'md',\n color = 'info',\n}: ProgressCircularProps) => {\n // used to disable animation on initial render cycle\n const isInitialRenderCycle = useIsInitialRenderCycle();\n\n const isFinished = !hasError && percent >= 100;\n const variants = progressCircularVariants({\n color,\n hasError,\n isFinished,\n size,\n });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // format value\n let value = format(percent);\n\n // set strokeWidth based on size prop\n let strokeWidth: number;\n switch (size) {\n case 'xs':\n strokeWidth = 2;\n break;\n case 'sm':\n strokeWidth = 1.8;\n break;\n default:\n strokeWidth = 1.6;\n break;\n }\n\n // handle special states\n let progressColor: VariantProps['color'] = color;\n if (hasError) {\n progressColor = 'danger';\n value = <FaTimes className=\"text-danger\" />;\n } else if (isFinished) {\n progressColor = 'success';\n value = <FaCheck className=\"text-success\" />;\n }\n\n // pass only HeroUI colors as props\n const heroUiColor = Object.keys(\n heroCircularProgressVariants.variants.color,\n ).includes(color)\n ? (progressColor as HeroCircularProgressProps['color'])\n : undefined;\n\n return (\n <HeroCircularProgress\n aria-label={ariaLabel}\n classNames={classNames}\n color={heroUiColor}\n disableAnimation={isInitialRenderCycle || disableAnimation}\n showValueLabel\n strokeWidth={strokeWidth}\n // we do not use spinner animation when no percent provided\n value={percent || 0}\n valueLabel={value}\n />\n );\n};\n\nexport default ProgressCircular;\n","import ProgressCircular, { progressCircularVariants } from './ProgressCircular';\n\nexport type { ProgressCircularProps } from './ProgressCircular';\n\nexport { ProgressCircular, progressCircularVariants };\n\nexport default ProgressCircular;\n"],"mappings":";;;;;;;;AAIA,SAAS,SAAS,eAAe;AAEjC,SAAS,oBAAoB,4BAA4B;AACzD,SAAS,oBAAoB,oCAAoC;AAEjE,SAAS,IAAI,4BAA4B;AAuI7B;AAnIL,IAAM,2BAA2B,GAAG;AAAA,EACzC,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA;AAAA,IAEN,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA;AAAA,IAEP,KAAK;AAAA;AAAA,IAEL,YAAY;AAAA;AAAA,IAEZ,OAAO;AAAA;AAAA,IAEP,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,OAEG,6BAA6B,SAAS;AAAA,IAE3C,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAyBD,IAAM,gBAAgB,CAAC,UAAU,MAAM,GAAG,OAAO;AAKjD,IAAM,mBAAmB,CAAC;AAAA,EACxB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AACV,MAA6B;AAE3B,QAAM,uBAAuB,wBAAwB;AAErD,QAAM,aAAa,CAAC,YAAY,WAAW;AAC3C,QAAM,WAAW,yBAAyB;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAGnE,MAAI,QAAQ,OAAO,OAAO;AAG1B,MAAI;AACJ,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,oBAAc;AACd;AAAA,IACF,KAAK;AACH,oBAAc;AACd;AAAA,IACF;AACE,oBAAc;AACd;AAAA,EACJ;AAGA,MAAI,gBAAuC;AAC3C,MAAI,UAAU;AACZ,oBAAgB;AAChB,YAAQ,oBAAC,WAAQ,WAAU,eAAc;AAAA,EAC3C,WAAW,YAAY;AACrB,oBAAgB;AAChB,YAAQ,oBAAC,WAAQ,WAAU,gBAAe;AAAA,EAC5C;AAGA,QAAM,cAAc,OAAO;AAAA,IACzB,6BAA6B,SAAS;AAAA,EACxC,EAAE,SAAS,KAAK,IACX,gBACD;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA,OAAO;AAAA,MACP,kBAAkB,wBAAwB;AAAA,MAC1C,gBAAc;AAAA,MACd;AAAA,MAEA,OAAO,WAAW;AAAA,MAClB,YAAY;AAAA;AAAA,EACd;AAEJ;AAEA,IAAO,2BAAQ;;;ACtKf,IAAOA,4BAAQ;","names":["ProgressCircular_default"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-JUHSESWB.cjs","../src/Tabs/Tabs.tsx","../src/Tabs/index.ts"],"names":["Tabs_default"],"mappings":"AAAA;ACGA,oCAAiD;AAEjD,oDAAyC;AAuGjC,+CAAA;AArGD,IAAM,aAAA,EAAe,4BAAA;AAAG,EAC7B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,EAAA;AAAA,IACN,MAAA,EAAQ,EAAA;AAAA,IACR,KAAA,EAAO,EAAA;AAAA,IACP,GAAA,EAAK,0CAAA;AAAA,IACL,UAAA,EAAY,iBAAA;AAAA,IACZ,OAAA,EAAS,EAAA;AAAA,IACT,UAAA,EAAY;AAAA,EACd;AACF,CAAC,CAAA;AAoDD,IAAM,KAAA,EAAO,CAAC;AAAA,EACZ,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,mBAAA,EAAqB,KAAA,CAAA;AAAA,EACrB,wBAAA,EAA0B,IAAA;AAAA,EAC1B,iBAAA,EAAmB,KAAA;AAAA,EACnB,aAAA,EAAe,KAAA,CAAA;AAAA,EACf,UAAA,EAAY,IAAA;AAAA,EACZ,kBAAA,EAAoB,KAAA,CAAA;AAAA,EACpB,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,OAAA,EAAS,KAAA,CAAA;AAAA,EACT,YAAA,EAAc,KAAA,CAAA;AAAA,EACd,KAAA,EAAO,IAAA;AAAA,EACP,IAAA;AAAA,EACA,QAAA,EAAU,OAAA;AAAA,EACV,SAAA,EAAW;AACb,CAAA,EAAA,GAAiB;AACf,EAAA,MAAM,SAAA,EAAW,YAAA,CAAa,CAAA;AAC9B,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,SAAA,EAAW,MAAM,CAAA;AAEnE,EAAA,uBACE,6BAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,UAAA;AAAA,MACA,kBAAA;AAAA,MACA,uBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,EAAY,QAAA;AAAA,MACZ,KAAA,EAAO,KAAA,GAAQ,CAAC,CAAA;AAAA,MAChB,iBAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MAEC,QAAA,EAAA,CAAC,IAAA,EAAA,mBACA,6BAAA,SAAC,EAAA,EAAuB,UAAA,EAAY,CAAC,CAAC,IAAA,CAAK,QAAA,EAAU,KAAA,EAAO,IAAA,CAAK,KAAA,EAC9D,QAAA,EAAA,IAAA,CAAK,QAAA,CAAA,EADM,IAAA,CAAK,GAEnB;AAAA,IAAA;AAAA,EAEJ,CAAA;AAEJ,CAAA;AAEA,IAAO,aAAA,EAAQ,IAAA;AD3Df;AACA;AEpDA,IAAOA,cAAAA,EAAQ,YAAA;AFsDf;AACA;AACE;AACA;AACA;AACF,gHAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-JUHSESWB.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Tab as HeroTab, Tabs as HeroTabs } from '@heroui/tabs';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const tabsVariants = tv({\n slots: {\n base: '',\n cursor: '',\n panel: '',\n tab: 'data-[hover-unselected=true]:opacity-100',\n tabContent: 'text-foreground',\n tabList: '',\n tabWrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof tabsVariants>;\ntype ClassName = TVClassName<typeof tabsVariants>;\n\nexport interface TabProps {\n /** Content to be displayed in the tab panel */\n content: ReactNode;\n /** Disables the tab so it can not be selected */\n disabled?: boolean;\n /** Unique identifier for the tab */\n key: React.Key;\n /** Label content displayed in the tab button */\n label: ReactNode;\n}\n\nexport interface TabsProps extends VariantProps {\n /** Accessible label for the tabs component */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** Key of the tab that should be selected by default */\n defaultSelectedKey?: string | number;\n /** Whether to destroy inactive tab panel DOM nodes */\n destroyInactiveTabPanel?: boolean;\n /** Whether the animation should be disabled. */\n disableAnimation?: boolean;\n /** Array of keys for the tabs to disable */\n disabledKeys?: string[];\n /** Whether tabs should take up full container width */\n fullWidth?: boolean;\n /** Callback fired when tab selection changes */\n onSelectionChange?: (key: React.Key) => void;\n /** Position of the tab list relative to the content */\n placement?: 'top' | 'bottom' | 'start' | 'end' | undefined;\n /** Radius of the tabs */\n radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n /** Selected tab key (controlled) */\n selectedKey?: string | number | null;\n /** Size of the tabs */\n size?: 'sm' | 'md' | 'lg';\n /** Array of tab configurations */\n tabs: TabProps[];\n /** Style variant of the tabs */\n variant?: 'bordered' | 'light' | 'solid' | 'underlined';\n /** Whether to display tabs vertically */\n vertical?: boolean;\n}\n\n/**\n * Tabs component based on [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst Tabs = ({\n ariaLabel = undefined,\n className = undefined,\n defaultSelectedKey = undefined,\n destroyInactiveTabPanel = true,\n disableAnimation = false,\n disabledKeys = undefined,\n fullWidth = true,\n onSelectionChange = undefined,\n placement = undefined,\n radius = undefined,\n selectedKey = undefined,\n size = 'md',\n tabs,\n variant = 'solid',\n vertical = false,\n}: TabsProps) => {\n const variants = tabsVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroTabs\n aria-label={ariaLabel}\n classNames={classNames}\n defaultSelectedKey={defaultSelectedKey}\n destroyInactiveTabPanel={destroyInactiveTabPanel}\n disableAnimation={disableAnimation}\n disabledKeys={disabledKeys}\n fullWidth={fullWidth}\n isVertical={vertical}\n items={tabs || []}\n onSelectionChange={onSelectionChange}\n placement={placement}\n radius={radius}\n selectedKey={selectedKey}\n size={size}\n variant={variant}\n >\n {(item) => (\n <HeroTab key={item.key} isDisabled={!!item.disabled} title={item.label}>\n {item.content}\n </HeroTab>\n )}\n </HeroTabs>\n );\n};\n\nexport default Tabs;\n","import Tabs, { tabsVariants } from './Tabs';\n\nexport type { TabsProps, TabProps } from './Tabs';\n\nexport { Tabs, tabsVariants };\n\nexport default Tabs;\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Tabs/Tabs.tsx","../src/Tabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Tab as HeroTab, Tabs as HeroTabs } from '@heroui/tabs';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const tabsVariants = tv({\n slots: {\n base: '',\n cursor: '',\n panel: '',\n tab: 'data-[hover-unselected=true]:opacity-100',\n tabContent: 'text-foreground',\n tabList: '',\n tabWrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof tabsVariants>;\ntype ClassName = TVClassName<typeof tabsVariants>;\n\nexport interface TabProps {\n /** Content to be displayed in the tab panel */\n content: ReactNode;\n /** Disables the tab so it can not be selected */\n disabled?: boolean;\n /** Unique identifier for the tab */\n key: React.Key;\n /** Label content displayed in the tab button */\n label: ReactNode;\n}\n\nexport interface TabsProps extends VariantProps {\n /** Accessible label for the tabs component */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** Key of the tab that should be selected by default */\n defaultSelectedKey?: string | number;\n /** Whether to destroy inactive tab panel DOM nodes */\n destroyInactiveTabPanel?: boolean;\n /** Whether the animation should be disabled. */\n disableAnimation?: boolean;\n /** Array of keys for the tabs to disable */\n disabledKeys?: string[];\n /** Whether tabs should take up full container width */\n fullWidth?: boolean;\n /** Callback fired when tab selection changes */\n onSelectionChange?: (key: React.Key) => void;\n /** Position of the tab list relative to the content */\n placement?: 'top' | 'bottom' | 'start' | 'end' | undefined;\n /** Radius of the tabs */\n radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n /** Selected tab key (controlled) */\n selectedKey?: string | number | null;\n /** Size of the tabs */\n size?: 'sm' | 'md' | 'lg';\n /** Array of tab configurations */\n tabs: TabProps[];\n /** Style variant of the tabs */\n variant?: 'bordered' | 'light' | 'solid' | 'underlined';\n /** Whether to display tabs vertically */\n vertical?: boolean;\n}\n\n/**\n * Tabs component based on [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst Tabs = ({\n ariaLabel = undefined,\n className = undefined,\n defaultSelectedKey = undefined,\n destroyInactiveTabPanel = true,\n disableAnimation = false,\n disabledKeys = undefined,\n fullWidth = true,\n onSelectionChange = undefined,\n placement = undefined,\n radius = undefined,\n selectedKey = undefined,\n size = 'md',\n tabs,\n variant = 'solid',\n vertical = false,\n}: TabsProps) => {\n const variants = tabsVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroTabs\n aria-label={ariaLabel}\n classNames={classNames}\n defaultSelectedKey={defaultSelectedKey}\n destroyInactiveTabPanel={destroyInactiveTabPanel}\n disableAnimation={disableAnimation}\n disabledKeys={disabledKeys}\n fullWidth={fullWidth}\n isVertical={vertical}\n items={tabs || []}\n onSelectionChange={onSelectionChange}\n placement={placement}\n radius={radius}\n selectedKey={selectedKey}\n size={size}\n variant={variant}\n >\n {(item) => (\n <HeroTab key={item.key} isDisabled={!!item.disabled} title={item.label}>\n {item.content}\n </HeroTab>\n )}\n </HeroTabs>\n );\n};\n\nexport default Tabs;\n","import Tabs, { tabsVariants } from './Tabs';\n\nexport type { TabsProps, TabProps } from './Tabs';\n\nexport { Tabs, tabsVariants };\n\nexport default Tabs;\n"],"mappings":";AAGA,SAAS,OAAO,SAAS,QAAQ,gBAAgB;AAEjD,SAAS,IAAI,4BAA4B;AAuGjC;AArGD,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AACF,CAAC;AAoDD,IAAM,OAAO,CAAC;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AACb,MAAiB;AACf,QAAM,WAAW,aAAa;AAC9B,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,OAAO,QAAQ,CAAC;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,WAAC,SACA,oBAAC,WAAuB,YAAY,CAAC,CAAC,KAAK,UAAU,OAAO,KAAK,OAC9D,eAAK,WADM,KAAK,GAEnB;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,eAAQ;;;AC9Gf,IAAOA,gBAAQ;","names":["Tabs_default"]}
@@ -8,9 +8,9 @@ declare const avatarVariants: tailwind_variants.TVReturnType<{
8
8
  [key: string]: {
9
9
  [key: string]: tailwind_variants.ClassValue | {
10
10
  base?: tailwind_variants.ClassValue;
11
- icon?: tailwind_variants.ClassValue;
12
11
  img?: tailwind_variants.ClassValue;
13
12
  name?: tailwind_variants.ClassValue;
13
+ icon?: tailwind_variants.ClassValue;
14
14
  fallback?: tailwind_variants.ClassValue;
15
15
  };
16
16
  };
@@ -18,9 +18,9 @@ declare const avatarVariants: tailwind_variants.TVReturnType<{
18
18
  [x: string]: {
19
19
  [x: string]: tailwind_variants.ClassValue | {
20
20
  base?: tailwind_variants.ClassValue;
21
- icon?: tailwind_variants.ClassValue;
22
21
  img?: tailwind_variants.ClassValue;
23
22
  name?: tailwind_variants.ClassValue;
23
+ icon?: tailwind_variants.ClassValue;
24
24
  fallback?: tailwind_variants.ClassValue;
25
25
  };
26
26
  };
@@ -34,9 +34,9 @@ declare const avatarVariants: tailwind_variants.TVReturnType<{
34
34
  [key: string]: {
35
35
  [key: string]: tailwind_variants.ClassValue | {
36
36
  base?: tailwind_variants.ClassValue;
37
- icon?: tailwind_variants.ClassValue;
38
37
  img?: tailwind_variants.ClassValue;
39
38
  name?: tailwind_variants.ClassValue;
39
+ icon?: tailwind_variants.ClassValue;
40
40
  fallback?: tailwind_variants.ClassValue;
41
41
  };
42
42
  };
@@ -44,9 +44,9 @@ declare const avatarVariants: tailwind_variants.TVReturnType<{
44
44
  [key: string]: {
45
45
  [key: string]: tailwind_variants.ClassValue | {
46
46
  base?: tailwind_variants.ClassValue;
47
- icon?: tailwind_variants.ClassValue;
48
47
  img?: tailwind_variants.ClassValue;
49
48
  name?: tailwind_variants.ClassValue;
49
+ icon?: tailwind_variants.ClassValue;
50
50
  fallback?: tailwind_variants.ClassValue;
51
51
  };
52
52
  };
@@ -66,9 +66,9 @@ declare const avatarVariants: tailwind_variants.TVReturnType<{
66
66
  [key: string]: {
67
67
  [key: string]: tailwind_variants.ClassValue | {
68
68
  base?: tailwind_variants.ClassValue;
69
- icon?: tailwind_variants.ClassValue;
70
69
  img?: tailwind_variants.ClassValue;
71
70
  name?: tailwind_variants.ClassValue;
71
+ icon?: tailwind_variants.ClassValue;
72
72
  fallback?: tailwind_variants.ClassValue;
73
73
  };
74
74
  };
@@ -8,9 +8,9 @@ declare const avatarVariants: tailwind_variants.TVReturnType<{
8
8
  [key: string]: {
9
9
  [key: string]: tailwind_variants.ClassValue | {
10
10
  base?: tailwind_variants.ClassValue;
11
- icon?: tailwind_variants.ClassValue;
12
11
  img?: tailwind_variants.ClassValue;
13
12
  name?: tailwind_variants.ClassValue;
13
+ icon?: tailwind_variants.ClassValue;
14
14
  fallback?: tailwind_variants.ClassValue;
15
15
  };
16
16
  };
@@ -18,9 +18,9 @@ declare const avatarVariants: tailwind_variants.TVReturnType<{
18
18
  [x: string]: {
19
19
  [x: string]: tailwind_variants.ClassValue | {
20
20
  base?: tailwind_variants.ClassValue;
21
- icon?: tailwind_variants.ClassValue;
22
21
  img?: tailwind_variants.ClassValue;
23
22
  name?: tailwind_variants.ClassValue;
23
+ icon?: tailwind_variants.ClassValue;
24
24
  fallback?: tailwind_variants.ClassValue;
25
25
  };
26
26
  };
@@ -34,9 +34,9 @@ declare const avatarVariants: tailwind_variants.TVReturnType<{
34
34
  [key: string]: {
35
35
  [key: string]: tailwind_variants.ClassValue | {
36
36
  base?: tailwind_variants.ClassValue;
37
- icon?: tailwind_variants.ClassValue;
38
37
  img?: tailwind_variants.ClassValue;
39
38
  name?: tailwind_variants.ClassValue;
39
+ icon?: tailwind_variants.ClassValue;
40
40
  fallback?: tailwind_variants.ClassValue;
41
41
  };
42
42
  };
@@ -44,9 +44,9 @@ declare const avatarVariants: tailwind_variants.TVReturnType<{
44
44
  [key: string]: {
45
45
  [key: string]: tailwind_variants.ClassValue | {
46
46
  base?: tailwind_variants.ClassValue;
47
- icon?: tailwind_variants.ClassValue;
48
47
  img?: tailwind_variants.ClassValue;
49
48
  name?: tailwind_variants.ClassValue;
49
+ icon?: tailwind_variants.ClassValue;
50
50
  fallback?: tailwind_variants.ClassValue;
51
51
  };
52
52
  };
@@ -66,9 +66,9 @@ declare const avatarVariants: tailwind_variants.TVReturnType<{
66
66
  [key: string]: {
67
67
  [key: string]: tailwind_variants.ClassValue | {
68
68
  base?: tailwind_variants.ClassValue;
69
- icon?: tailwind_variants.ClassValue;
70
69
  img?: tailwind_variants.ClassValue;
71
70
  name?: tailwind_variants.ClassValue;
71
+ icon?: tailwind_variants.ClassValue;
72
72
  fallback?: tailwind_variants.ClassValue;
73
73
  };
74
74
  };
@@ -9,11 +9,11 @@ declare const drawerVariants: tailwind_variants.TVReturnType<{
9
9
  [key: string]: {
10
10
  [key: string]: tailwind_variants.ClassValue | {
11
11
  base?: tailwind_variants.ClassValue;
12
- closeButton?: tailwind_variants.ClassValue;
13
12
  wrapper?: tailwind_variants.ClassValue;
14
13
  body?: tailwind_variants.ClassValue;
15
14
  footer?: tailwind_variants.ClassValue;
16
15
  header?: tailwind_variants.ClassValue;
16
+ closeButton?: tailwind_variants.ClassValue;
17
17
  backdrop?: tailwind_variants.ClassValue;
18
18
  };
19
19
  };
@@ -21,11 +21,11 @@ declare const drawerVariants: tailwind_variants.TVReturnType<{
21
21
  [x: string]: {
22
22
  [x: string]: tailwind_variants.ClassValue | {
23
23
  base?: tailwind_variants.ClassValue;
24
- closeButton?: tailwind_variants.ClassValue;
25
24
  wrapper?: tailwind_variants.ClassValue;
26
25
  body?: tailwind_variants.ClassValue;
27
26
  footer?: tailwind_variants.ClassValue;
28
27
  header?: tailwind_variants.ClassValue;
28
+ closeButton?: tailwind_variants.ClassValue;
29
29
  backdrop?: tailwind_variants.ClassValue;
30
30
  };
31
31
  };
@@ -41,11 +41,11 @@ declare const drawerVariants: tailwind_variants.TVReturnType<{
41
41
  [key: string]: {
42
42
  [key: string]: tailwind_variants.ClassValue | {
43
43
  base?: tailwind_variants.ClassValue;
44
- closeButton?: tailwind_variants.ClassValue;
45
44
  wrapper?: tailwind_variants.ClassValue;
46
45
  body?: tailwind_variants.ClassValue;
47
46
  footer?: tailwind_variants.ClassValue;
48
47
  header?: tailwind_variants.ClassValue;
48
+ closeButton?: tailwind_variants.ClassValue;
49
49
  backdrop?: tailwind_variants.ClassValue;
50
50
  };
51
51
  };
@@ -53,11 +53,11 @@ declare const drawerVariants: tailwind_variants.TVReturnType<{
53
53
  [key: string]: {
54
54
  [key: string]: tailwind_variants.ClassValue | {
55
55
  base?: tailwind_variants.ClassValue;
56
- closeButton?: tailwind_variants.ClassValue;
57
56
  wrapper?: tailwind_variants.ClassValue;
58
57
  body?: tailwind_variants.ClassValue;
59
58
  footer?: tailwind_variants.ClassValue;
60
59
  header?: tailwind_variants.ClassValue;
60
+ closeButton?: tailwind_variants.ClassValue;
61
61
  backdrop?: tailwind_variants.ClassValue;
62
62
  };
63
63
  };
@@ -81,11 +81,11 @@ declare const drawerVariants: tailwind_variants.TVReturnType<{
81
81
  [key: string]: {
82
82
  [key: string]: tailwind_variants.ClassValue | {
83
83
  base?: tailwind_variants.ClassValue;
84
- closeButton?: tailwind_variants.ClassValue;
85
84
  wrapper?: tailwind_variants.ClassValue;
86
85
  body?: tailwind_variants.ClassValue;
87
86
  footer?: tailwind_variants.ClassValue;
88
87
  header?: tailwind_variants.ClassValue;
88
+ closeButton?: tailwind_variants.ClassValue;
89
89
  backdrop?: tailwind_variants.ClassValue;
90
90
  };
91
91
  };
@@ -9,11 +9,11 @@ declare const drawerVariants: tailwind_variants.TVReturnType<{
9
9
  [key: string]: {
10
10
  [key: string]: tailwind_variants.ClassValue | {
11
11
  base?: tailwind_variants.ClassValue;
12
- closeButton?: tailwind_variants.ClassValue;
13
12
  wrapper?: tailwind_variants.ClassValue;
14
13
  body?: tailwind_variants.ClassValue;
15
14
  footer?: tailwind_variants.ClassValue;
16
15
  header?: tailwind_variants.ClassValue;
16
+ closeButton?: tailwind_variants.ClassValue;
17
17
  backdrop?: tailwind_variants.ClassValue;
18
18
  };
19
19
  };
@@ -21,11 +21,11 @@ declare const drawerVariants: tailwind_variants.TVReturnType<{
21
21
  [x: string]: {
22
22
  [x: string]: tailwind_variants.ClassValue | {
23
23
  base?: tailwind_variants.ClassValue;
24
- closeButton?: tailwind_variants.ClassValue;
25
24
  wrapper?: tailwind_variants.ClassValue;
26
25
  body?: tailwind_variants.ClassValue;
27
26
  footer?: tailwind_variants.ClassValue;
28
27
  header?: tailwind_variants.ClassValue;
28
+ closeButton?: tailwind_variants.ClassValue;
29
29
  backdrop?: tailwind_variants.ClassValue;
30
30
  };
31
31
  };
@@ -41,11 +41,11 @@ declare const drawerVariants: tailwind_variants.TVReturnType<{
41
41
  [key: string]: {
42
42
  [key: string]: tailwind_variants.ClassValue | {
43
43
  base?: tailwind_variants.ClassValue;
44
- closeButton?: tailwind_variants.ClassValue;
45
44
  wrapper?: tailwind_variants.ClassValue;
46
45
  body?: tailwind_variants.ClassValue;
47
46
  footer?: tailwind_variants.ClassValue;
48
47
  header?: tailwind_variants.ClassValue;
48
+ closeButton?: tailwind_variants.ClassValue;
49
49
  backdrop?: tailwind_variants.ClassValue;
50
50
  };
51
51
  };
@@ -53,11 +53,11 @@ declare const drawerVariants: tailwind_variants.TVReturnType<{
53
53
  [key: string]: {
54
54
  [key: string]: tailwind_variants.ClassValue | {
55
55
  base?: tailwind_variants.ClassValue;
56
- closeButton?: tailwind_variants.ClassValue;
57
56
  wrapper?: tailwind_variants.ClassValue;
58
57
  body?: tailwind_variants.ClassValue;
59
58
  footer?: tailwind_variants.ClassValue;
60
59
  header?: tailwind_variants.ClassValue;
60
+ closeButton?: tailwind_variants.ClassValue;
61
61
  backdrop?: tailwind_variants.ClassValue;
62
62
  };
63
63
  };
@@ -81,11 +81,11 @@ declare const drawerVariants: tailwind_variants.TVReturnType<{
81
81
  [key: string]: {
82
82
  [key: string]: tailwind_variants.ClassValue | {
83
83
  base?: tailwind_variants.ClassValue;
84
- closeButton?: tailwind_variants.ClassValue;
85
84
  wrapper?: tailwind_variants.ClassValue;
86
85
  body?: tailwind_variants.ClassValue;
87
86
  footer?: tailwind_variants.ClassValue;
88
87
  header?: tailwind_variants.ClassValue;
88
+ closeButton?: tailwind_variants.ClassValue;
89
89
  backdrop?: tailwind_variants.ClassValue;
90
90
  };
91
91
  };