@fuf-stack/pixels 0.41.5 → 0.42.0

package/dist/ProgressCircular/index.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _chunkF2KT5QJ4cjs = require('../chunk-F2KT5QJ4.cjs');
+var _chunk3FBNPV4Fcjs = require('../chunk-3FBNPV4F.cjs');
 require('../chunk-OLI32URU.cjs');
 require('../chunk-D4TLDLEX.cjs');
 
 
 
 
-exports.ProgressCircular = _chunkF2KT5QJ4cjs.ProgressCircular_default; exports.default = _chunkF2KT5QJ4cjs.ProgressCircular_default2; exports.progressCircularVariants = _chunkF2KT5QJ4cjs.progressCircularVariants;
+exports.ProgressCircular = _chunk3FBNPV4Fcjs.ProgressCircular_default; exports.default = _chunk3FBNPV4Fcjs.ProgressCircular_default2; exports.progressCircularVariants = _chunk3FBNPV4Fcjs.progressCircularVariants;
 //# sourceMappingURL=index.cjs.map

package/dist/ProgressCircular/index.js

@@ -2,7 +2,7 @@ import {
   ProgressCircular_default,
   ProgressCircular_default2,
   progressCircularVariants
-} from "../chunk-NF7YMLX7.js";
+} from "../chunk-FC3IZIDH.js";
 import "../chunk-B3XKBNXD.js";
 import "../chunk-J7N2552D.js";
 export {

package/dist/Tabs/index.cjs

@@ -2,11 +2,11 @@
 
 
 
-var _chunkJUHSESWBcjs = require('../chunk-JUHSESWB.cjs');
+var _chunkD5BXY6EGcjs = require('../chunk-D5BXY6EG.cjs');
 require('../chunk-D4TLDLEX.cjs');
 
 
 
 
-exports.Tabs = _chunkJUHSESWBcjs.Tabs_default; exports.default = _chunkJUHSESWBcjs.Tabs_default2; exports.tabsVariants = _chunkJUHSESWBcjs.tabsVariants;
+exports.Tabs = _chunkD5BXY6EGcjs.Tabs_default; exports.default = _chunkD5BXY6EGcjs.Tabs_default2; exports.tabsVariants = _chunkD5BXY6EGcjs.tabsVariants;
 //# sourceMappingURL=index.cjs.map

package/dist/Tabs/index.d.cts

@@ -1,5 +1,5 @@
-import { T as Tabs } from '../Tabs-xUYwXMX9.cjs';
-export { b as TabProps, a as TabsProps, t as tabsVariants } from '../Tabs-xUYwXMX9.cjs';
+import { T as Tabs } from '../Tabs-C1UEkvSr.cjs';
+export { b as TabProps, a as TabsProps, t as tabsVariants } from '../Tabs-C1UEkvSr.cjs';
 import 'react/jsx-runtime';
 import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';

package/dist/Tabs/index.d.ts

@@ -1,5 +1,5 @@
-import { T as Tabs } from '../Tabs-xUYwXMX9.js';
-export { b as TabProps, a as TabsProps, t as tabsVariants } from '../Tabs-xUYwXMX9.js';
+import { T as Tabs } from '../Tabs-C1UEkvSr.js';
+export { b as TabProps, a as TabsProps, t as tabsVariants } from '../Tabs-C1UEkvSr.js';
 import 'react/jsx-runtime';
 import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';

package/dist/Tabs/index.js

@@ -2,7 +2,7 @@ import {
   Tabs_default,
   Tabs_default2,
   tabsVariants
-} from "../chunk-JZHEG3SM.js";
+} from "../chunk-IAX4ZSZU.js";
 import "../chunk-J7N2552D.js";
 export {
   Tabs_default as Tabs,

package/dist/{Tabs-xUYwXMX9.d.cts → Tabs-C1UEkvSr.d.cts}

@@ -100,6 +100,8 @@ interface TabProps {
     key: React.Key;
     /** Label content displayed in the tab button */
     label: ReactNode;
+    /** HTML data-testid attribute used in e2e tests */
+    testId?: string;
 }
 interface TabsProps extends VariantProps {
     /** Accessible label for the tabs component */
@@ -128,6 +130,8 @@ interface TabsProps extends VariantProps {
     size?: 'sm' | 'md' | 'lg';
     /** Array of tab configurations */
     tabs: TabProps[];
+    /** HTML data-testid attribute used in e2e tests */
+    testId?: string;
     /** Style variant of the tabs */
     variant?: 'bordered' | 'light' | 'solid' | 'underlined';
     /** Whether to display tabs vertically */
@@ -136,6 +140,6 @@ interface TabsProps extends VariantProps {
 /**
  * Tabs component based on [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)
  */
-declare const Tabs: ({ ariaLabel, className, defaultSelectedKey, destroyInactiveTabPanel, disableAnimation, disabledKeys, fullWidth, onSelectionChange, placement, radius, selectedKey, size, tabs, variant, vertical, }: TabsProps) => react_jsx_runtime.JSX.Element;
+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;
 
 export { Tabs as T, type TabsProps as a, type TabProps as b, tabsVariants as t };

package/dist/{Tabs-xUYwXMX9.d.ts → Tabs-C1UEkvSr.d.ts}

@@ -100,6 +100,8 @@ interface TabProps {
     key: React.Key;
     /** Label content displayed in the tab button */
     label: ReactNode;
+    /** HTML data-testid attribute used in e2e tests */
+    testId?: string;
 }
 interface TabsProps extends VariantProps {
     /** Accessible label for the tabs component */
@@ -128,6 +130,8 @@ interface TabsProps extends VariantProps {
     size?: 'sm' | 'md' | 'lg';
     /** Array of tab configurations */
     tabs: TabProps[];
+    /** HTML data-testid attribute used in e2e tests */
+    testId?: string;
     /** Style variant of the tabs */
     variant?: 'bordered' | 'light' | 'solid' | 'underlined';
     /** Whether to display tabs vertically */
@@ -136,6 +140,6 @@ interface TabsProps extends VariantProps {
 /**
  * Tabs component based on [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)
  */
-declare const Tabs: ({ ariaLabel, className, defaultSelectedKey, destroyInactiveTabPanel, disableAnimation, disabledKeys, fullWidth, onSelectionChange, placement, radius, selectedKey, size, tabs, variant, vertical, }: TabsProps) => react_jsx_runtime.JSX.Element;
+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;
 
 export { Tabs as T, type TabsProps as a, type TabProps as b, tabsVariants as t };

package/dist/{chunk-F2KT5QJ4.cjs → chunk-3FBNPV4F.cjs}

@@ -89,15 +89,16 @@ var ProgressCircular = ({
   });
   const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
   let value = format(percent);
-  let strokeWidth = 1.6;
+  let strokeWidth;
   switch (size) {
     case "xs":
-      strokeWidth = 2.2;
+      strokeWidth = 2;
       break;
     case "sm":
-      strokeWidth = 2;
+      strokeWidth = 1.8;
       break;
     default:
+      strokeWidth = 1.6;
       break;
   }
   let progressColor = color;
@@ -135,4 +136,4 @@ var ProgressCircular_default2 = ProgressCircular_default;
 
 
 exports.progressCircularVariants = progressCircularVariants; exports.ProgressCircular_default = ProgressCircular_default; exports.ProgressCircular_default2 = ProgressCircular_default2;
-//# sourceMappingURL=chunk-F2KT5QJ4.cjs.map
+//# sourceMappingURL=chunk-3FBNPV4F.cjs.map

package/dist/chunk-3FBNPV4F.cjs.map

@@ -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"]}

package/dist/{chunk-JUHSESWB.cjs → chunk-D5BXY6EG.cjs}

@@ -27,6 +27,7 @@ var Tabs = ({
   selectedKey = void 0,
   size = "md",
   tabs,
+  testId = "tab",
   variant = "solid",
   vertical = false
 }) => {
@@ -50,7 +51,16 @@ var Tabs = ({
       selectedKey,
       size,
       variant,
-      children: (item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _tabs.Tab, { isDisabled: !!item.disabled, title: item.label, children: item.content }, item.key)
+      children: (item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _tabs.Tab,
+        {
+          isDisabled: !!item.disabled,
+          title: item.label,
+          "data-testid": _pixelutils.slugify.call(void 0, `${testId}_${item.testId || item.key}`),
+          children: item.content
+        },
+        item.key
+      )
     }
   );
 };
@@ -64,4 +74,4 @@ var Tabs_default2 = Tabs_default;
 
 
 exports.tabsVariants = tabsVariants; exports.Tabs_default = Tabs_default; exports.Tabs_default2 = Tabs_default2;
-//# sourceMappingURL=chunk-JUHSESWB.cjs.map
+//# sourceMappingURL=chunk-D5BXY6EG.cjs.map

package/dist/chunk-D5BXY6EG.cjs.map

@@ -0,0 +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"]}

package/dist/{chunk-NF7YMLX7.js → chunk-FC3IZIDH.js}

@@ -89,15 +89,16 @@ var ProgressCircular = ({
   });
   const classNames = variantsToClassNames(variants, className, "base");
   let value = format(percent);
-  let strokeWidth = 1.6;
+  let strokeWidth;
   switch (size) {
     case "xs":
-      strokeWidth = 2.2;
+      strokeWidth = 2;
       break;
     case "sm":
-      strokeWidth = 2;
+      strokeWidth = 1.8;
       break;
     default:
+      strokeWidth = 1.6;
       break;
   }
   let progressColor = color;
@@ -135,4 +136,4 @@ export {
   ProgressCircular_default,
   ProgressCircular_default2
 };
-//# sourceMappingURL=chunk-NF7YMLX7.js.map
+//# sourceMappingURL=chunk-FC3IZIDH.js.map

package/dist/{chunk-NF7YMLX7.js.map → chunk-FC3IZIDH.js.map}

@@ -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}\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 = 1.6;\n  switch (size) {\n    case 'xs':\n      strokeWidth = 2.2;\n      break;\n    case 'sm':\n      strokeWidth = 2;\n      break;\n    default:\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;AAsI7B;AAlIL,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,cAAc;AAClB,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,oBAAc;AACd;AAAA,IACF,KAAK;AACH,oBAAc;AACd;AAAA,IACF;AACE;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;;;ACrKf,IAAOA,4BAAQ;","names":["ProgressCircular_default"]}
+{"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"]}

package/dist/{chunk-JZHEG3SM.js → chunk-IAX4ZSZU.js}

@@ -1,6 +1,6 @@
 // src/Tabs/Tabs.tsx
 import { Tab as HeroTab, Tabs as HeroTabs } from "@heroui/tabs";
-import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { jsx } from "react/jsx-runtime";
 var tabsVariants = tv({
   slots: {
@@ -27,6 +27,7 @@ var Tabs = ({
   selectedKey = void 0,
   size = "md",
   tabs,
+  testId = "tab",
   variant = "solid",
   vertical = false
 }) => {
@@ -50,7 +51,16 @@ var Tabs = ({
       selectedKey,
       size,
       variant,
-      children: (item) => /* @__PURE__ */ jsx(HeroTab, { isDisabled: !!item.disabled, title: item.label, children: item.content }, item.key)
+      children: (item) => /* @__PURE__ */ jsx(
+        HeroTab,
+        {
+          isDisabled: !!item.disabled,
+          title: item.label,
+          "data-testid": slugify(`${testId}_${item.testId || item.key}`),
+          children: item.content
+        },
+        item.key
+      )
     }
   );
 };
@@ -64,4 +74,4 @@ export {
   Tabs_default,
   Tabs_default2
 };
-//# sourceMappingURL=chunk-JZHEG3SM.js.map
+//# sourceMappingURL=chunk-IAX4ZSZU.js.map

package/dist/chunk-IAX4ZSZU.js.map

@@ -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 { 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"]}

package/dist/index.cjs

@@ -5,7 +5,7 @@ var _chunkPK723NKOcjs = require('./chunk-PK723NKO.cjs');
 
 
 
-var _chunkF2KT5QJ4cjs = require('./chunk-F2KT5QJ4.cjs');
+var _chunk3FBNPV4Fcjs = require('./chunk-3FBNPV4F.cjs');
 
 
 
@@ -13,7 +13,7 @@ var _chunkAJCAIA6Hcjs = require('./chunk-AJCAIA6H.cjs');
 
 
 
-var _chunkJUHSESWBcjs = require('./chunk-JUHSESWB.cjs');
+var _chunkD5BXY6EGcjs = require('./chunk-D5BXY6EG.cjs');
 
 
 
@@ -131,5 +131,5 @@ require('./chunk-D4TLDLEX.cjs');
 
 
 
-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 = _chunkF2KT5QJ4cjs.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 = _chunkF2KT5QJ4cjs.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;
+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 = _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 = _chunk3FBNPV4Fcjs.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;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.cts

@@ -16,7 +16,7 @@ export { _ as Popover, P as PopoverProps } from './Popover-DajWpbPN.cjs';
 export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-DdDYbP2p.cjs';
 export { P as Progress, a as ProgressProps, p as progressVariants } from './Progress-7yXUVioO.cjs';
 export { T as Table, c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from './Table-D19f5nrd.cjs';
-export { b as TabProps, T as Tabs, a as TabsProps, t as tabsVariants } from './Tabs-xUYwXMX9.cjs';
+export { b as TabProps, T as Tabs, a as TabsProps, t as tabsVariants } from './Tabs-C1UEkvSr.cjs';
 export { Toast } from '@heroui/toast';
 export { A as AddToastVariantProps, b as ToastProps, T as ToastProvider, c as ToastProviderProps, a as addToast, t as toastVariants } from './ToastProvider-CL1v-bkE.cjs';
 export { T as Tooltip, b as TooltipPlacement, a as TooltipProps } from './Tooltip-Bu71AKvn.cjs';

package/dist/index.d.ts

@@ -16,7 +16,7 @@ export { _ as Popover, P as PopoverProps } from './Popover-DcZ3qt-u.js';
 export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-DdDYbP2p.js';
 export { P as Progress, a as ProgressProps, p as progressVariants } from './Progress-7yXUVioO.js';
 export { T as Table, c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from './Table-D19f5nrd.js';
-export { b as TabProps, T as Tabs, a as TabsProps, t as tabsVariants } from './Tabs-xUYwXMX9.js';
+export { b as TabProps, T as Tabs, a as TabsProps, t as tabsVariants } from './Tabs-C1UEkvSr.js';
 export { Toast } from '@heroui/toast';
 export { A as AddToastVariantProps, b as ToastProps, T as ToastProvider, c as ToastProviderProps, a as addToast, t as toastVariants } from './ToastProvider-CL1v-bkE.js';
 export { T as Tooltip, b as TooltipPlacement, a as TooltipProps } from './Tooltip-Bu71AKvn.js';

package/dist/index.js

@@ -5,7 +5,7 @@ import {
 import {
   ProgressCircular_default,
   progressCircularVariants
-} from "./chunk-NF7YMLX7.js";
+} from "./chunk-FC3IZIDH.js";
 import {
   Table_default,
   tableVariants
@@ -13,7 +13,7 @@ import {
 import {
   Tabs_default,
   tabsVariants
-} from "./chunk-JZHEG3SM.js";
+} from "./chunk-IAX4ZSZU.js";
 import {
   Toast,
   ToastProvider_default,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fuf-stack/pixels",
   "description": "fuf core react component library",
   "author": "Hannes Tiede",
-  "version": "0.41.5",
+  "version": "0.42.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -180,7 +180,7 @@
     "@heroui/tabs": "2.2.14",
     "@heroui/toast": "2.0.7",
     "@heroui/tooltip": "2.2.14",
-    "framer-motion": "12.7.4",
+    "framer-motion": "12.8.0",
     "next-themes": "0.4.6",
     "react-icons": "5.5.0",
     "@fuf-stack/pixel-utils": "0.5.3"
@@ -193,8 +193,8 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "@repo/tailwind-config": "0.0.1",
-    "@repo/vite-config": "0.0.1",
     "@repo/storybook-config": "0.0.1",
+    "@repo/vite-config": "0.0.1",
     "@repo/tsup-config": "0.0.1"
   },
   "scripts": {

package/dist/chunk-F2KT5QJ4.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-F2KT5QJ4.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;AAsI7B,+CAAA;AAlIL,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;AAGR,EAAA;AACJ,EAAA;AACP,IAAA;AACW,MAAA;AACd,MAAA;AACG,IAAA;AACW,MAAA;AACd,MAAA;AACF,IAAA;AACE,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;AE3HvB;AF6HuB;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-F2KT5QJ4.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 = 1.6;\n  switch (size) {\n    case 'xs':\n      strokeWidth = 2.2;\n      break;\n    case 'sm':\n      strokeWidth = 2;\n      break;\n    default:\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"]}

package/dist/chunk-JUHSESWB.cjs.map

@@ -1 +0,0 @@
-{"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"]}

package/dist/chunk-JZHEG3SM.js.map

@@ -1 +0,0 @@
-{"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"]}