@fuf-stack/pixels 1.2.1 → 1.2.2

package/dist/{chunk-W2EOAUKE.cjs → chunk-AZ7VMRHX.cjs}

@@ -3,7 +3,7 @@
 var _chunkOLI32URUcjs = require('./chunk-OLI32URU.cjs');
 
 
-var _chunkD4TLDLEXcjs = require('./chunk-D4TLDLEX.cjs');
+var _chunkAHEA4IJVcjs = require('./chunk-AHEA4IJV.cjs');
 
 // src/ProgressCircular/ProgressCircular.tsx
 var _fa = require('react-icons/fa');
@@ -29,7 +29,7 @@ var progressCircularVariants = _pixelutils.tv.call(void 0, {
     value: ""
   },
   variants: {
-    color: _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {
+    color: _chunkAHEA4IJVcjs.__spreadValues.call(void 0, {
       info: {
         svg: "text-info"
       }
@@ -68,7 +68,9 @@ var progressCircularVariants = _pixelutils.tv.call(void 0, {
     }
   }
 });
-var defaultFormat = (percent = 0) => `${percent}%`;
+var defaultFormat = (percent = 0) => {
+  return `${percent}%`;
+};
 var ProgressCircular = ({
   ariaLabel = "progress",
   className = void 0,
@@ -119,11 +121,11 @@ var ProgressCircular = ({
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _progress.CircularProgress,
     {
+      showValueLabel: true,
       "aria-label": ariaLabel,
       classNames,
       color: heroUiColor,
       disableAnimation: isInitialRenderCycle || disableAnimation,
-      showValueLabel: true,
       strokeWidth,
       value: percent || 0,
       valueLabel: value
@@ -140,4 +142,4 @@ var ProgressCircular_default2 = ProgressCircular_default;
 
 
 exports.progressCircularVariants = progressCircularVariants; exports.ProgressCircular_default = ProgressCircular_default; exports.ProgressCircular_default2 = ProgressCircular_default2;
-//# sourceMappingURL=chunk-W2EOAUKE.cjs.map
+//# sourceMappingURL=chunk-AZ7VMRHX.cjs.map

package/dist/chunk-AZ7VMRHX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-AZ7VMRHX.cjs","../src/ProgressCircular/ProgressCircular.tsx","../src/ProgressCircular/index.ts"],"names":["ProgressCircular_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACHA,oCAAiC;AAEjC,4CAAyD;AACzD,sCAAiE;AAEjE,oDAAyC;AAmJ7B,+CAAA;AA/IL,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;AA6BD,IAAM,cAAA,EAAgB,CAAC,QAAA,EAAU,CAAA,EAAA,GAAM;AACrC,EAAA,OAAO,CAAA,EAAA;AACT;AAKM;AACJ,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACO,EAAA;AACC,EAAA;AACR,EAAA;AAC2B;AAErB,EAAA;AAGA,EAAA;AAEA,EAAA;AACJ,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACD,EAAA;AACK,EAAA;AAGF,EAAA;AAEA,EAAA;AAEC,EAAA;AACH,IAAA;AACE,MAAA;AACE,QAAA;AACA,QAAA;AACF,MAAA;AACE,QAAA;AACA,QAAA;AACF,MAAA;AACE,QAAA;AACA,QAAA;AACJ,IAAA;AACF,EAAA;AAGI,EAAA;AACA,EAAA;AACF,IAAA;AACA,IAAA;AACF,EAAA;AACE,IAAA;AACA,IAAA;AACF,EAAA;AAGM,EAAA;AACJ,IAAA;AACA,EAAA;AAKA,EAAA;AAAC,IAAA;AAAA,IAAA;AACC,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAEA,MAAA;AACA,MAAA;AAAY,IAAA;AACd,EAAA;AAEJ;AAEO;ADjDG;AACA;AElIHA;AFoIG;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-AZ7VMRHX.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  /** disables special finished state (checkmark icon and success color) */\n  disableFinishedState?: 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) => {\n  return `${percent}%`;\n};\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  disableFinishedState = false,\n  size = 'md',\n  color = 'info',\n  strokeWidth: strokeWidthProp = undefined,\n}: ProgressCircularProps) => {\n  // used to disable animation on initial render cycle\n  const isInitialRenderCycle = useIsInitialRenderCycle();\n\n  // Apply finished state if percent is 100 or more and not disabled by disableFinishedState\n  const isFinished = !hasError && percent >= 100 && !disableFinishedState;\n\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  let strokeWidth = strokeWidthProp;\n  // set strokeWidth based on size prop when no strokeWidth provided\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      showValueLabel\n      aria-label={ariaLabel}\n      classNames={classNames}\n      color={heroUiColor}\n      disableAnimation={isInitialRenderCycle || disableAnimation}\n      strokeWidth={strokeWidth}\n      // INFO: 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-LA3SMG6Y.js → chunk-BGGRVPBR.js}

@@ -1,6 +1,6 @@
 import {
   ScrollShadow_default
-} from "./chunk-WDXULV6M.js";
+} from "./chunk-ZLSX6FH3.js";
 
 // src/Tooltip/Tooltip.tsx
 import { Tooltip as HeroTooltip } from "@heroui/tooltip";
@@ -85,27 +85,29 @@ var Tooltip = ({
   return /* @__PURE__ */ jsx(
     HeroTooltip,
     {
+      shouldFlip: true,
+      showArrow: true,
       classNames,
       closeDelay,
       containerPadding,
+      defaultOpen,
+      delay,
+      onOpenChange,
+      placement,
       content: /* @__PURE__ */ jsxs("div", { children: [
-        header && /* @__PURE__ */ jsxs("div", { className: classNames.headerWrapper, children: [
+        header ? /* @__PURE__ */ jsxs("div", { className: classNames.headerWrapper, children: [
           /* @__PURE__ */ jsx("div", { className: classNames.header, children: header }),
           /* @__PURE__ */ jsx("hr", { className: classNames.divider })
-        ] }),
+        ] }) : null,
         /* @__PURE__ */ jsx(ScrollShadow_default, { className: classNames.body, children: content }),
-        footer && /* @__PURE__ */ jsxs("div", { className: classNames.footerWrapper, children: [
+        footer ? /* @__PURE__ */ jsxs("div", { className: classNames.footerWrapper, children: [
           /* @__PURE__ */ jsx("hr", { className: classNames.divider }),
           /* @__PURE__ */ jsx("div", { className: classNames.footer, children: footer })
-        ] })
+        ] }) : null
       ] }),
-      defaultOpen,
-      delay,
-      onClick: (e) => e.preventDefault(),
-      onOpenChange,
-      placement,
-      shouldFlip: true,
-      showArrow: true,
+      onClick: (e) => {
+        e.preventDefault();
+      },
       children: /* @__PURE__ */ jsx("span", { className: classNames.trigger, children })
     }
   );
@@ -119,4 +121,4 @@ export {
   Tooltip_default,
   Tooltip_default2
 };
-//# sourceMappingURL=chunk-LA3SMG6Y.js.map
+//# sourceMappingURL=chunk-BGGRVPBR.js.map

package/dist/{chunk-LA3SMG6Y.js.map → chunk-BGGRVPBR.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/Tooltip/Tooltip.tsx","../src/Tooltip/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TooltipPlacement as HeroTooltipPlacement } from '@heroui/tooltip';\nimport type { ReactNode } from 'react';\n\nimport { Tooltip as HeroTooltip } from '@heroui/tooltip';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// tooltip variants\nexport const tooltipVariants = tv({\n  slots: {\n    base: '',\n    body: 'w-full px-4 py-2',\n    content: 'flex max-h-[80vh] flex-col p-0',\n    divider: 'border-divider m-0 w-full p-0',\n    footer: 'w-full px-4 py-2',\n    footerWrapper: 'w-full',\n    header: 'w-full px-4 pt-2 pb-1 font-semibold',\n    headerWrapper: 'w-full',\n    trigger: 'cursor-pointer',\n  },\n  variants: {\n    size: {\n      xs: {\n        // base: 'max-w-xs',\n        body: 'max-w-xs',\n        footer: 'max-w-xs',\n        header: 'max-w-xs',\n      },\n      sm: {\n        // base: 'max-w-sm',\n        body: 'max-w-sm',\n        footer: 'max-w-sm',\n        header: 'max-w-sm',\n      },\n      md: {\n        // base: 'max-w-md',\n        body: 'max-w-md',\n        footer: 'max-w-md',\n        header: 'max-w-md',\n      },\n      lg: {\n        // base: 'max-w-lg',\n        body: 'max-w-lg',\n        footer: 'max-w-lg',\n        header: 'max-w-lg',\n      },\n      xl: {\n        // base: 'max-w-xl',\n        body: 'max-w-xl',\n        footer: 'max-w-xl',\n        header: 'max-w-xl',\n      },\n      '2xl': {\n        // base: 'max-w-2xl',\n        body: 'max-w-2xl',\n        footer: 'max-w-2xl',\n        header: 'max-w-2xl',\n      },\n      '3xl': {\n        // base: 'max-w-3xl',\n        body: 'max-w-3xl',\n        footer: 'max-w-3xl',\n        header: 'max-w-3xl',\n      },\n      full: { base: '' },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof tooltipVariants>;\ntype ClassName = TVClassName<typeof tooltipVariants>;\n\nexport type TooltipPlacement = HeroTooltipPlacement;\n\nexport interface TooltipProps extends VariantProps {\n  /** trigger child components */\n  children: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** delay in milliseconds before the tooltip opens. */\n  closeDelay?: number;\n  /** placement padding in px */\n  containerPadding?: number;\n  /** content displayed in the tooltip */\n  content: ReactNode;\n  /** open overlay initially when uncontrolled */\n  defaultOpen?: boolean;\n  /** delay in milliseconds before the tooltip opens. */\n  delay?: number;\n  /** tooltip footer */\n  footer?: ReactNode;\n  /** tooltip header */\n  header?: ReactNode;\n  /** handler that is called when the overlay's open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** placement if the tooltip */\n  placement?: TooltipPlacement;\n  /** size of the tooltip */\n  size?: VariantProps['size'];\n}\n\n/**\n * Tooltip component based on [HeroUI Tooltip](https://www.heroui.com//docs/components/tooltip)\n */\nconst Tooltip = ({\n  children,\n  className: _className = undefined,\n  closeDelay = 500,\n  containerPadding = 0,\n  content,\n  defaultOpen = false,\n  delay = 0,\n  footer = undefined,\n  header = undefined,\n  onOpenChange = undefined,\n  placement = 'top',\n  size = 'full',\n}: TooltipProps) => {\n  // classNames from slots\n  const variants = tooltipVariants({ size });\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroTooltip\n      classNames={classNames}\n      closeDelay={closeDelay}\n      containerPadding={containerPadding}\n      content={\n        <div>\n          {header && (\n            <div className={classNames.headerWrapper}>\n              <div className={classNames.header}>{header}</div>\n              <hr className={classNames.divider} />\n            </div>\n          )}\n          <ScrollShadow className={classNames.body}>{content}</ScrollShadow>\n          {footer && (\n            <div className={classNames.footerWrapper}>\n              <hr className={classNames.divider} />\n              <div className={classNames.footer}>{footer}</div>\n            </div>\n          )}\n        </div>\n      }\n      defaultOpen={defaultOpen}\n      delay={delay}\n      onClick={(e) => e.preventDefault()}\n      onOpenChange={onOpenChange}\n      placement={placement}\n      shouldFlip\n      showArrow\n    >\n      <span className={classNames.trigger}>{children}</span>\n    </HeroTooltip>\n  );\n};\n\nexport default Tooltip;\n","import Tooltip from './Tooltip';\n\nexport type { TooltipProps, TooltipPlacement } from './Tooltip';\n\nexport { Tooltip };\n\nexport default Tooltip;\n"],"mappings":";;;;;AAIA,SAAS,WAAW,mBAAmB;AAEvC,SAAS,IAAI,4BAA4B;AA+H7B,SACE,KADF;AA1HL,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA;AAAA,QAEF,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,IAAI;AAAA;AAAA,QAEF,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,IAAI;AAAA;AAAA,QAEF,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,IAAI;AAAA;AAAA,QAEF,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,IAAI;AAAA;AAAA,QAEF,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA;AAAA,QAEL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA;AAAA,QAEL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,MAAM,EAAE,MAAM,GAAG;AAAA,IACnB;AAAA,EACF;AACF,CAAC;AAqCD,IAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA,WAAW,aAAa;AAAA,EACxB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,OAAO;AACT,MAAoB;AAElB,QAAM,WAAW,gBAAgB,EAAE,KAAK,CAAC;AACzC,QAAM,aAAa,qBAAqB,UAAU,YAAY,MAAM;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SACE,qBAAC,SACE;AAAA,kBACC,qBAAC,SAAI,WAAW,WAAW,eACzB;AAAA,8BAAC,SAAI,WAAW,WAAW,QAAS,kBAAO;AAAA,UAC3C,oBAAC,QAAG,WAAW,WAAW,SAAS;AAAA,WACrC;AAAA,QAEF,oBAAC,wBAAa,WAAW,WAAW,MAAO,mBAAQ;AAAA,QAClD,UACC,qBAAC,SAAI,WAAW,WAAW,eACzB;AAAA,8BAAC,QAAG,WAAW,WAAW,SAAS;AAAA,UACnC,oBAAC,SAAI,WAAW,WAAW,QAAS,kBAAO;AAAA,WAC7C;AAAA,SAEJ;AAAA,MAEF;AAAA,MACA;AAAA,MACA,SAAS,CAAC,MAAM,EAAE,eAAe;AAAA,MACjC;AAAA,MACA;AAAA,MACA,YAAU;AAAA,MACV,WAAS;AAAA,MAET,8BAAC,UAAK,WAAW,WAAW,SAAU,UAAS;AAAA;AAAA,EACjD;AAEJ;AAEA,IAAO,kBAAQ;;;AC1Jf,IAAOA,mBAAQ;","names":["Tooltip_default"]}
+{"version":3,"sources":["../src/Tooltip/Tooltip.tsx","../src/Tooltip/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TooltipPlacement as HeroTooltipPlacement } from '@heroui/tooltip';\nimport type { ReactNode } from 'react';\n\nimport { Tooltip as HeroTooltip } from '@heroui/tooltip';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// tooltip variants\nexport const tooltipVariants = tv({\n  slots: {\n    base: '',\n    body: 'w-full px-4 py-2',\n    content: 'flex max-h-[80vh] flex-col p-0',\n    divider: 'border-divider m-0 w-full p-0',\n    footer: 'w-full px-4 py-2',\n    footerWrapper: 'w-full',\n    header: 'w-full px-4 pt-2 pb-1 font-semibold',\n    headerWrapper: 'w-full',\n    trigger: 'cursor-pointer',\n  },\n  variants: {\n    size: {\n      xs: {\n        // base: 'max-w-xs',\n        body: 'max-w-xs',\n        footer: 'max-w-xs',\n        header: 'max-w-xs',\n      },\n      sm: {\n        // base: 'max-w-sm',\n        body: 'max-w-sm',\n        footer: 'max-w-sm',\n        header: 'max-w-sm',\n      },\n      md: {\n        // base: 'max-w-md',\n        body: 'max-w-md',\n        footer: 'max-w-md',\n        header: 'max-w-md',\n      },\n      lg: {\n        // base: 'max-w-lg',\n        body: 'max-w-lg',\n        footer: 'max-w-lg',\n        header: 'max-w-lg',\n      },\n      xl: {\n        // base: 'max-w-xl',\n        body: 'max-w-xl',\n        footer: 'max-w-xl',\n        header: 'max-w-xl',\n      },\n      '2xl': {\n        // base: 'max-w-2xl',\n        body: 'max-w-2xl',\n        footer: 'max-w-2xl',\n        header: 'max-w-2xl',\n      },\n      '3xl': {\n        // base: 'max-w-3xl',\n        body: 'max-w-3xl',\n        footer: 'max-w-3xl',\n        header: 'max-w-3xl',\n      },\n      full: { base: '' },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof tooltipVariants>;\ntype ClassName = TVClassName<typeof tooltipVariants>;\n\nexport type TooltipPlacement = HeroTooltipPlacement;\n\nexport interface TooltipProps extends VariantProps {\n  /** trigger child components */\n  children: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** delay in milliseconds before the tooltip opens. */\n  closeDelay?: number;\n  /** placement padding in px */\n  containerPadding?: number;\n  /** content displayed in the tooltip */\n  content: ReactNode;\n  /** open overlay initially when uncontrolled */\n  defaultOpen?: boolean;\n  /** delay in milliseconds before the tooltip opens. */\n  delay?: number;\n  /** tooltip footer */\n  footer?: ReactNode;\n  /** tooltip header */\n  header?: ReactNode;\n  /** handler that is called when the overlay's open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** placement if the tooltip */\n  placement?: TooltipPlacement;\n  /** size of the tooltip */\n  size?: VariantProps['size'];\n}\n\n/**\n * Tooltip component based on [HeroUI Tooltip](https://www.heroui.com//docs/components/tooltip)\n */\nconst Tooltip = ({\n  children,\n  className: _className = undefined,\n  closeDelay = 500,\n  containerPadding = 0,\n  content,\n  defaultOpen = false,\n  delay = 0,\n  footer = undefined,\n  header = undefined,\n  onOpenChange = undefined,\n  placement = 'top',\n  size = 'full',\n}: TooltipProps) => {\n  // classNames from slots\n  const variants = tooltipVariants({ size });\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroTooltip\n      shouldFlip\n      showArrow\n      classNames={classNames}\n      closeDelay={closeDelay}\n      containerPadding={containerPadding}\n      defaultOpen={defaultOpen}\n      delay={delay}\n      onOpenChange={onOpenChange}\n      placement={placement}\n      content={\n        <div>\n          {header ? (\n            <div className={classNames.headerWrapper}>\n              <div className={classNames.header}>{header}</div>\n              <hr className={classNames.divider} />\n            </div>\n          ) : null}\n          <ScrollShadow className={classNames.body}>{content}</ScrollShadow>\n          {footer ? (\n            <div className={classNames.footerWrapper}>\n              <hr className={classNames.divider} />\n              <div className={classNames.footer}>{footer}</div>\n            </div>\n          ) : null}\n        </div>\n      }\n      onClick={(e) => {\n        e.preventDefault();\n      }}\n    >\n      <span className={classNames.trigger}>{children}</span>\n    </HeroTooltip>\n  );\n};\n\nexport default Tooltip;\n","import Tooltip from './Tooltip';\n\nexport type { TooltipProps, TooltipPlacement } from './Tooltip';\n\nexport { Tooltip };\n\nexport default Tooltip;\n"],"mappings":";;;;;AAIA,SAAS,WAAW,mBAAmB;AAEvC,SAAS,IAAI,4BAA4B;AAqI7B,SACE,KADF;AAhIL,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA;AAAA,QAEF,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,IAAI;AAAA;AAAA,QAEF,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,IAAI;AAAA;AAAA,QAEF,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,IAAI;AAAA;AAAA,QAEF,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,IAAI;AAAA;AAAA,QAEF,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA;AAAA,QAEL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA;AAAA,QAEL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,MAAM,EAAE,MAAM,GAAG;AAAA,IACnB;AAAA,EACF;AACF,CAAC;AAqCD,IAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA,WAAW,aAAa;AAAA,EACxB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,OAAO;AACT,MAAoB;AAElB,QAAM,WAAW,gBAAgB,EAAE,KAAK,CAAC;AACzC,QAAM,aAAa,qBAAqB,UAAU,YAAY,MAAM;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAU;AAAA,MACV,WAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SACE,qBAAC,SACE;AAAA,iBACC,qBAAC,SAAI,WAAW,WAAW,eACzB;AAAA,8BAAC,SAAI,WAAW,WAAW,QAAS,kBAAO;AAAA,UAC3C,oBAAC,QAAG,WAAW,WAAW,SAAS;AAAA,WACrC,IACE;AAAA,QACJ,oBAAC,wBAAa,WAAW,WAAW,MAAO,mBAAQ;AAAA,QAClD,SACC,qBAAC,SAAI,WAAW,WAAW,eACzB;AAAA,8BAAC,QAAG,WAAW,WAAW,SAAS;AAAA,UACnC,oBAAC,SAAI,WAAW,WAAW,QAAS,kBAAO;AAAA,WAC7C,IACE;AAAA,SACN;AAAA,MAEF,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AAAA,MACnB;AAAA,MAEA,8BAAC,UAAK,WAAW,WAAW,SAAU,UAAS;AAAA;AAAA,EACjD;AAEJ;AAEA,IAAO,kBAAQ;;;AC5Jf,IAAOA,mBAAQ;","names":["Tooltip_default"]}

package/dist/{chunk-PHQVYJS2.cjs → chunk-BPBEZCSP.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkD4TLDLEXcjs = require('./chunk-D4TLDLEX.cjs');
+var _chunkAHEA4IJVcjs = require('./chunk-AHEA4IJV.cjs');
 
 // src/Label/Label.tsx
 var _chip = require('@heroui/chip');
@@ -16,7 +16,7 @@ var labelVariants = _pixelutils.tv.call(void 0, {
     icon: ""
   },
   variants: {
-    color: _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {
+    color: _chunkAHEA4IJVcjs.__spreadValues.call(void 0, {
       // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/chip.ts
       info: {
         dot: "bg-info"
@@ -108,7 +108,7 @@ var Label = ({
       size,
       variant,
       children: [
-        icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: classNames.icon, children: icon }),
+        icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: classNames.icon, children: icon }) : null,
         children
       ]
     }
@@ -124,4 +124,4 @@ var Label_default2 = Label_default;
 
 
 exports.labelVariants = labelVariants; exports.Label_default = Label_default; exports.Label_default2 = Label_default2;
-//# sourceMappingURL=chunk-PHQVYJS2.cjs.map
+//# sourceMappingURL=chunk-BPBEZCSP.cjs.map

package/dist/chunk-BPBEZCSP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-BPBEZCSP.cjs","../src/Label/Label.tsx","../src/Label/index.ts"],"names":["Label_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACAA,oCAAkC;AAClC,sCAA0C;AAE1C,oDAAyC;AAgIrC,+CAAA;AA7HG,IAAM,cAAA,EAAgB,4BAAA;AAAG,EAC9B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,EAAA;AAAA,IACN,WAAA,EAAa,EAAA;AAAA,IACb,OAAA,EAAS,EAAA;AAAA,IACT,GAAA,EAAK,EAAA;AAAA,IACL,IAAA,EAAM;AAAA,EACR,CAAA;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO,8CAAA;AAAA;AAAA,MAEL,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IAAA,CAAA,EACG,WAAA,CAAkB,QAAA,CAAS,KAAA,CAAA;AAAA,IAEhC,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS;AAAA,MACX,CAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACL,OAAA,EAAS;AAAA,MACX;AAAA,IACF,CAAA;AAAA,IACA,aAAA,EAAe;AAAA,MACb,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,MACR;AAAA,IACF,CAAA;AAAA,IACA,OAAA,EAAS,WAAA,CAAkB,QAAA,CAAS;AAAA,EACtC,CAAA;AAAA,EACA,eAAA,EAAiB,WAAA,CAAkB,eAAA;AAAA,EACnC,gBAAA,EAAkB;AAAA;AAAA,IAEhB,GAAG,WAAA,CAAkB,gBAAA;AAAA;AAAA,IAErB;AAAA,MACE,OAAA,EAAS,OAAA;AAAA,MACT,KAAA,EAAO,MAAA;AAAA,MACP,KAAA,EAAO;AAAA,QACL,IAAA,EAAM;AAAA,MACR;AAAA,IACF,CAAA;AAAA;AAAA,IAEA;AAAA,MACE,OAAA,EAAS,UAAA;AAAA,MACT,KAAA,EAAO,MAAA;AAAA,MACP,KAAA,EAAO;AAAA,QACL,IAAA,EAAM;AAAA,MACR;AAAA,IACF,CAAA;AAAA;AAAA,IAEA;AAAA,MACE,OAAA,EAAS,OAAA;AAAA,MACT,KAAA,EAAO,MAAA;AAAA,MACP,KAAA,EAAO;AAAA,QACL,IAAA,EAAM;AAAA,MACR;AAAA,IACF,CAAA;AAAA;AAAA,IAEA;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,KAAA,EAAO,MAAA;AAAA,MACP,KAAA,EAAO;AAAA,QACL,IAAA,EAAM;AAAA,MACR;AAAA,IACF,CAAA;AAAA;AAAA,IAEA;AAAA,MACE,OAAA,EAAS,OAAA;AAAA,MACT,KAAA,EAAO,MAAA;AAAA,MACP,KAAA,EAAO;AAAA,QACL,IAAA,EAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;AA6BD,IAAM,MAAA,EAAQ,CAAC;AAAA,EACb,SAAA,EAAW,KAAA,CAAA;AAAA,EACX,SAAA,EAAW,WAAA,EAAa,KAAA,CAAA;AAAA,EACxB,MAAA,EAAQ,SAAA;AAAA,EACR,WAAA,EAAa,KAAA,CAAA;AAAA,EACb,KAAA,EAAO,KAAA,CAAA;AAAA,EACP,QAAA,EAAU,KAAA,CAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,KAAA,EAAO,IAAA;AAAA,EACP,QAAA,EAAU;AACZ,CAAA,EAAA,GAAkB;AAEhB,EAAA,MAAM,WAAA,EAAa,CAAC,CAAC,KAAA,GAAQ,CAAC,SAAA,GAAY,CAAC,UAAA;AAC3C,EAAA,MAAM,cAAA,EAAgB,CAAC,CAAC,UAAA;AAGxB,EAAA,MAAM,SAAA,EAAW,aAAA,CAAc,EAAE,KAAA,EAAO,UAAA,EAAY,aAAA,EAAe,QAAQ,CAAC,CAAA;AAC5E,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,UAAA,EAAY,MAAM,CAAA;AAEpE,EAAA,uBACE,8BAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,KAAA,kBAAO,6BAAA,MAAC,EAAA,EAAK,SAAA,EAAW,UAAA,CAAW,IAAA,EAAO,QAAA,EAAA,KAAA,CAAK,EAAA,EAAU,IAAA;AAAA,QACzD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,EAAQ,KAAA;ADhCf;AACA;AEhHA,IAAOA,eAAAA,EAAQ,aAAA;AFkHf;AACA;AACE;AACA;AACA;AACF,sHAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-BPBEZCSP.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ChipProps as HeroLabelProps } from '@heroui/chip';\nimport type { ReactNode } from 'react';\n\nimport { Chip as HeroLabel } from '@heroui/chip';\nimport { chip as heroLabelVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// label variants\nexport const labelVariants = tv({\n  slots: {\n    base: '',\n    closeButton: '',\n    content: '',\n    dot: '',\n    icon: '',\n  },\n  variants: {\n    color: {\n      // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/chip.ts\n      info: {\n        dot: 'bg-info',\n      },\n      ...heroLabelVariants.variants.color,\n    },\n    isIconOnly: {\n      true: {\n        content: 'px-1',\n      },\n      false: {\n        content: 'flex items-center gap-2',\n      },\n    },\n    hasEndContent: {\n      true: {\n        base: 'pr-2',\n      },\n    },\n    variant: heroLabelVariants.variants.variant,\n  },\n  defaultVariants: heroLabelVariants.defaultVariants,\n  compoundVariants: [\n    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/chip.ts\n    ...heroLabelVariants.compoundVariants,\n    // solid / color info\n    {\n      variant: 'solid',\n      color: 'info',\n      class: {\n        base: 'bg-info text-info-foreground',\n      },\n    },\n    // bordered / color info\n    {\n      variant: 'bordered',\n      color: 'info',\n      class: {\n        base: 'border-info text-info',\n      },\n    },\n    // light / color info\n    {\n      variant: 'light',\n      color: 'info',\n      class: {\n        base: 'text-info',\n      },\n    },\n    // flat / color info\n    {\n      variant: 'flat',\n      color: 'info',\n      class: {\n        base: 'bg-info/20 text-info-600',\n      },\n    },\n    // faded / color info\n    {\n      variant: 'faded',\n      color: 'info',\n      class: {\n        base: 'border-default text-info',\n      },\n    },\n  ],\n});\n\ntype VariantProps = TVProps<typeof labelVariants>;\ntype ClassName = TVClassName<typeof labelVariants>;\n\nexport interface LabelProps extends VariantProps {\n  /** content of the label */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** color of the label */\n  color?: VariantProps['color'];\n  /** element to be rendered in the right side of the label */\n  endContent?: HeroLabelProps['endContent'];\n  /** optional label icon, when only icon provided without children and endContent  */\n  icon?: ReactNode;\n  /** add close button to endContent */\n  onClose?: HeroLabelProps['onClose'];\n  /** radius of the label */\n  radius?: HeroLabelProps['radius'];\n  /** size of the label */\n  size?: HeroLabelProps['size'];\n  /** style variant of the label */\n  variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'dot';\n}\n\n/**\n * Label component based on [HeroUI Chip](https://www.heroui.com//docs/components/chip)\n */\nconst Label = ({\n  children = undefined,\n  className: _className = undefined,\n  color = 'default',\n  endContent = undefined,\n  icon = undefined,\n  onClose = undefined,\n  radius = 'full',\n  size = 'md',\n  variant = 'solid',\n}: LabelProps) => {\n  // determine variants based on props\n  const isIconOnly = !!icon && !children && !endContent;\n  const hasEndContent = !!endContent;\n\n  // classNames from slots\n  const variants = labelVariants({ color, isIconOnly, hasEndContent, variant });\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroLabel\n      classNames={classNames}\n      endContent={endContent}\n      onClose={onClose}\n      radius={radius}\n      size={size}\n      variant={variant}\n    >\n      {icon ? <span className={classNames.icon}>{icon}</span> : null}\n      {children}\n    </HeroLabel>\n  );\n};\n\nexport default Label;\n","import Label, { labelVariants } from './Label';\n\nexport type { LabelProps } from './Label';\n\nexport { Label, labelVariants };\n\nexport default Label;\n"]}

package/dist/{chunk-WFR7OUY7.cjs → chunk-DLZNJESG.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkD4TLDLEXcjs = require('./chunk-D4TLDLEX.cjs');
+var _chunkAHEA4IJVcjs = require('./chunk-AHEA4IJV.cjs');
 
 // src/Menu/Menu.tsx
 var _fa6 = require('react-icons/fa6');
@@ -22,22 +22,29 @@ var menuVariants = _pixelutils.tv.call(void 0, {
   }
 });
 var getDisabledKeys = (items) => {
-  return items.map((item) => typeof (item == null ? void 0 : item.items) === "undefined" ? item : item.items).flat().filter((item) => {
+  return items.map((item) => {
+    return typeof (item == null ? void 0 : item.items) === "undefined" ? item : item.items;
+  }).flat().filter((item) => {
     return Object.hasOwn(item, "disabled") && item.disabled === true;
-  }).map((item) => item.key);
+  }).map((item) => {
+    return item.key;
+  });
+};
+var renderMenuItem = (item, itemClassName) => {
+  var _a;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _dropdown.DropdownItem,
+    {
+      className: _pixelutils.cn.call(void 0, itemClassName, item.className),
+      "data-testid": (_a = item.testId) != null ? _a : item.key,
+      description: item.description,
+      onPress: item.onClick,
+      startContent: item.icon,
+      children: item.label
+    },
+    item.key
+  );
 };
-var renderMenuItem = (item, itemClassName) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  _dropdown.DropdownItem,
-  {
-    className: _pixelutils.cn.call(void 0, itemClassName, item.className),
-    "data-testid": item.testId || item.key,
-    description: item.description,
-    onPress: item.onClick,
-    startContent: item.icon,
-    children: item.label
-  },
-  item.key
-);
 var Menu = ({
   ariaLabel = void 0,
   children = null,
@@ -55,7 +62,7 @@ var Menu = ({
   if (!children) {
     triggerButton = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       _button.Button,
-      _chunkD4TLDLEXcjs.__spreadProps.call(void 0, _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {
+      _chunkAHEA4IJVcjs.__spreadProps.call(void 0, _chunkAHEA4IJVcjs.__spreadValues.call(void 0, {
         className: _pixelutils.cn.call(void 0, "min-w-0", className.trigger),
         size: "sm",
         variant: "flat"
@@ -64,8 +71,7 @@ var Menu = ({
       })
     );
   } else if (triggerButtonProps) {
-    triggerButton = // eslint-disable-next-line react/jsx-props-no-spreading
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, _chunkD4TLDLEXcjs.__spreadProps.call(void 0, _chunkD4TLDLEXcjs.__spreadValues.call(void 0, { className: className.trigger }, triggerButtonProps), { children }));
+    triggerButton = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, _chunkAHEA4IJVcjs.__spreadProps.call(void 0, _chunkAHEA4IJVcjs.__spreadValues.call(void 0, { className: className.trigger }, triggerButtonProps), { children }));
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _dropdown.Dropdown,
@@ -78,8 +84,8 @@ var Menu = ({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _dropdown.DropdownMenu,
           {
-            items,
             disabledKeys: getDisabledKeys(items),
+            items,
             onAction,
             children: (item) => {
               if ("items" in item) {
@@ -112,4 +118,4 @@ var Menu_default2 = Menu_default;
 
 
 exports.Menu_default = Menu_default; exports.Menu_default2 = Menu_default2;
-//# sourceMappingURL=chunk-WFR7OUY7.cjs.map
+//# sourceMappingURL=chunk-DLZNJESG.cjs.map

package/dist/chunk-DLZNJESG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-DLZNJESG.cjs","../src/Menu/Menu.tsx","../src/Menu/index.ts"],"names":["Menu_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-DLZNJESG.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps } from '@heroui/button';\nimport type {\n  DropdownItemProps as HeroDropdownItemProps,\n  DropdownProps as HeroDropdownProps,\n  DropdownSectionProps as HeroDropdownSectionProps,\n} from '@heroui/dropdown';\nimport type { Key, ReactNode } from 'react';\n\nimport { FaEllipsisVertical } from 'react-icons/fa6';\n\nimport { Button } from '@heroui/button';\nimport {\n  Dropdown as HeroDropdown,\n  DropdownItem as HeroDropdownItem,\n  DropdownMenu as HeroDropdownMenu,\n  DropdownSection as HeroDropdownSection,\n  DropdownTrigger as HeroDropdownTrigger,\n} from '@heroui/dropdown';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n/**\n * Menu item type\n */\nexport interface MenuItem {\n  /** unique identifier */\n  key: string;\n  /** CSS class name */\n  className?: string;\n  /** additional description shown under the label */\n  description?: string;\n  /** disables the menu item */\n  disabled?: boolean;\n  /** menu item icon  */\n  icon?: ReactNode;\n  /** menu item name */\n  label: ReactNode;\n  /** click event handler */\n  onClick?: HeroDropdownItemProps['onPress'];\n  /** e2e test identifier */\n  testId?: string;\n}\n\n/**\n * Menu section type\n */\nexport interface MenuSection {\n  /** unique identifier */\n  key: string;\n  /** section label */\n  label: ReactNode;\n  /** section items (array of MenuItem) */\n  items: MenuItem[];\n}\n\n// menu styling variants\nexport const menuVariants = tv({\n  slots: {\n    item: '',\n    trigger: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof menuVariants>;\ntype ClassName = TVClassName<typeof menuVariants>;\n\nexport interface MenuProps extends VariantProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** menu item structure */\n  items: (MenuSection | MenuItem)[];\n  /** disable menu trigger */\n  isDisabled?: boolean;\n  /** placement of the menu */\n  placement?: HeroDropdownProps['placement'];\n  /** called if item is selected */\n  onAction?: (key: Key) => void;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n  triggerButtonProps?: Pick<\n    ButtonProps,\n    | 'aria-label'\n    | 'className'\n    | 'color'\n    | 'disableAnimation'\n    | 'disabled'\n    | 'size'\n    | 'variant'\n  >;\n}\n\n/** returns String[] of disabled items/keys */\nconst getDisabledKeys = (items: (MenuSection | MenuItem)[]) => {\n  return items\n    .map((item) => {\n      // @ts-expect-error typing issue with MenuSection | MenuItem\n      return typeof item?.items === 'undefined' ? item : item.items;\n    })\n    .flat<MenuItem[]>()\n    .filter((item) => {\n      return Object.hasOwn(item, 'disabled') && item.disabled === true;\n    })\n    .map((item) => {\n      return item.key;\n    });\n};\n\nconst renderMenuItem = (item: MenuItem, itemClassName?: string) => {\n  return (\n    <HeroDropdownItem\n      key={item.key}\n      className={cn(itemClassName, item.className)}\n      data-testid={item.testId ?? item.key}\n      description={item.description}\n      onPress={item.onClick}\n      startContent={item.icon}\n    >\n      {item.label}\n    </HeroDropdownItem>\n  );\n};\n\n/**\n * Dropdown menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)\n */\nconst Menu = ({\n  ariaLabel = undefined,\n  children = null,\n  className: _className = undefined,\n  isDisabled = false,\n  items,\n  onAction = undefined,\n  placement = undefined,\n  testId = undefined,\n  triggerButtonProps = undefined,\n}: MenuProps) => {\n  // className from slots\n  const variants = menuVariants();\n  const className = variantsToClassNames(variants, _className, 'trigger');\n\n  // determine trigger button variant\n  let triggerButton = <button type=\"button\">{children}</button>;\n  if (!children) {\n    //  default to ellipsis icon when no children are provided\n    triggerButton = (\n      <Button\n        className={cn('min-w-0', className.trigger)}\n        size=\"sm\"\n        variant=\"flat\"\n        {...triggerButtonProps}\n      >\n        <FaEllipsisVertical />\n      </Button>\n    );\n  } else if (triggerButtonProps) {\n    // use provided triggerButtonProps with hero button\n    triggerButton = (\n      <Button className={className.trigger} {...triggerButtonProps}>\n        {children}\n      </Button>\n    );\n  }\n\n  return (\n    <HeroDropdown\n      aria-label={ariaLabel}\n      isDisabled={isDisabled}\n      placement={placement}\n    >\n      <HeroDropdownTrigger data-testid={testId}>\n        {/* NOTE: type and aria properties are injected by HeroDropdownTrigger */}\n        {triggerButton}\n      </HeroDropdownTrigger>\n      <HeroDropdownMenu\n        disabledKeys={getDisabledKeys(items)}\n        items={items}\n        onAction={onAction}\n      >\n        {(item) => {\n          if ('items' in item) {\n            return (\n              <HeroDropdownSection\n                key={item.key}\n                items={item.items}\n                title={item.label as HeroDropdownSectionProps['title']}\n              >\n                {(sectionItem) => {\n                  return renderMenuItem(sectionItem, className.item);\n                }}\n              </HeroDropdownSection>\n            );\n          }\n          return renderMenuItem(item, className.item);\n        }}\n      </HeroDropdownMenu>\n    </HeroDropdown>\n  );\n};\n\nexport default Menu;\n","import Menu from './Menu';\n\nexport type { MenuProps, MenuItem, MenuSection } from './Menu';\n\nexport { Menu };\n\nexport default Menu;\n"]}

package/dist/{chunk-HOWDEBJG.js → chunk-F37RLKXJ.js}

@@ -1,56 +1,58 @@
 import {
+  __spreadProps,
   __spreadValues
-} from "./chunk-J7N2552D.js";
+} from "./chunk-OAIRL2FN.js";
 
 // src/Button/Button.tsx
 import { Button as HeroButton } from "@heroui/button";
 import { button as heroButtonVariants } from "@heroui/theme";
-import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { tv } from "@fuf-stack/pixel-utils";
 
 // src/Button/subcomponents/LoadingSpinner.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var LoadingSpinner_default = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    className: "h-5 w-5 animate-spin text-current",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          className: "opacity-25",
-          cx: "12",
-          cy: "12",
-          r: "10",
-          stroke: "currentColor",
-          strokeWidth: "4"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          className: "opacity-75",
-          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
-          fill: "currentColor"
-        }
-      )
-    ]
-  }
-);
+var LoadingSpinner = () => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "h-5 w-5 animate-spin text-current",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "opacity-75",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
+var LoadingSpinner_default = LoadingSpinner;
 
 // src/Button/Button.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonVariants = tv({
-  slots: {
-    base: ""
-  },
+  extend: heroButtonVariants,
   variants: {
-    color: __spreadValues({
+    color: __spreadProps(__spreadValues({}, heroButtonVariants.variants.color), {
       // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/button.ts
       info: ""
-    }, heroButtonVariants.variants.color),
+    }),
     variant: heroButtonVariants.variants.variant,
     size: heroButtonVariants.variants.size
   },
@@ -58,13 +60,23 @@ var buttonVariants = tv({
     // white text on solid / shadow success button
     {
       color: "success",
-      variant: ["solid", "shadow"],
+      variant: "solid",
+      class: "text-white"
+    },
+    {
+      color: "success",
+      variant: "shadow",
       class: "text-white"
     },
     // white text on solid / shadow warning button
     {
       color: "warning",
-      variant: ["solid", "shadow"],
+      variant: "solid",
+      class: "text-white"
+    },
+    {
+      color: "warning",
+      variant: "shadow",
       class: "text-white"
     },
     {
@@ -75,7 +87,7 @@ var buttonVariants = tv({
     {
       color: "info",
       variant: "shadow",
-      class: 'text-info-foreground" bg-info shadow-info/40 shadow-lg'
+      class: "text-info-foreground bg-info shadow-info/40 shadow-lg"
     },
     {
       color: "info",
@@ -107,7 +119,7 @@ var buttonVariants = tv({
 var Button = ({
   ariaLabel = void 0,
   children = void 0,
-  className = void 0,
+  className: _className = void 0,
   color = "default",
   disableAnimation = false,
   disabled = false,
@@ -121,26 +133,27 @@ var Button = ({
   type = void 0,
   variant = "solid"
 }) => {
-  const variants = buttonVariants({ color, variant, size });
-  const classNames = variantsToClassNames(variants, className, "base");
+  const className = buttonVariants({
+    className: _className,
+    disableAnimation,
+    isDisabled: disabled,
+    color,
+    size,
+    variant,
+    isIconOnly: !!(icon && !children),
+    radius
+  });
   return /* @__PURE__ */ jsxs2(
     HeroButton,
     {
       "aria-label": ariaLabel,
-      className: classNames.base,
-      color,
+      className,
       "data-testid": testId,
-      disableAnimation,
       disableRipple: disableAnimation || !ripple,
-      isDisabled: disabled,
-      isIconOnly: !!(icon && !children),
       isLoading: loading,
       onPress: onClick,
-      radius,
-      size,
       spinner: /* @__PURE__ */ jsx2(LoadingSpinner_default, {}),
       type,
-      variant,
       children: [
         icon,
         children
@@ -158,4 +171,4 @@ export {
   Button_default,
   Button_default2
 };
-//# sourceMappingURL=chunk-HOWDEBJG.js.map
+//# sourceMappingURL=chunk-F37RLKXJ.js.map

package/dist/chunk-F37RLKXJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Button/Button.tsx","../src/Button/subcomponents/LoadingSpinner.tsx","../src/Button/index.ts"],"sourcesContent":["import type { TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps as HeroButtonProps } from '@heroui/button';\nimport type { ReactNode } from 'react';\n\nimport { Button as HeroButton } from '@heroui/button';\nimport { button as heroButtonVariants } from '@heroui/theme';\n\nimport { tv } from '@fuf-stack/pixel-utils';\n\nimport LoadingSpinner from './subcomponents/LoadingSpinner';\n\nexport const buttonVariants = tv({\n  extend: heroButtonVariants,\n  variants: {\n    color: {\n      ...heroButtonVariants.variants.color,\n      // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/button.ts\n      info: '',\n    },\n    variant: heroButtonVariants.variants.variant,\n    size: heroButtonVariants.variants.size,\n  },\n  compoundVariants: [\n    // white text on solid / shadow success button\n    {\n      color: 'success',\n      variant: 'solid',\n      class: 'text-white',\n    },\n    {\n      color: 'success',\n      variant: 'shadow',\n      class: 'text-white',\n    },\n    // white text on solid / shadow warning button\n    {\n      color: 'warning',\n      variant: 'solid',\n      class: 'text-white',\n    },\n    {\n      color: 'warning',\n      variant: 'shadow',\n      class: 'text-white',\n    },\n    {\n      color: 'info',\n      variant: 'solid',\n      class: 'bg-info text-info-foreground',\n    },\n    {\n      color: 'info',\n      variant: 'shadow',\n      class: 'text-info-foreground bg-info shadow-info/40 shadow-lg',\n    },\n    {\n      color: 'info',\n      variant: 'bordered',\n      class: 'border-medium border-info text-info bg-transparent',\n    },\n    {\n      color: 'info',\n      variant: 'flat',\n      class: 'bg-info/20 text-info-600',\n    },\n    {\n      color: 'info',\n      variant: 'faded',\n      class: 'border-default bg-default-100 text-info',\n    },\n    {\n      color: 'info',\n      variant: 'light',\n      class: 'text-info data-[hover=true]:bg-info-100 bg-transparent',\n    },\n    {\n      color: 'info',\n      variant: 'ghost',\n      class:\n        'border-info text-info data-[hover=true]:!bg-info data-[hover=true]:!text-info-foreground',\n    },\n  ],\n});\n\ntype VariantProps = TVProps<typeof buttonVariants>;\n\nexport interface ButtonProps extends VariantProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** content of the button */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** color of the button */\n  color?: VariantProps['color'];\n  /** disables the button */\n  disabled?: boolean;\n  /** disables all animations */\n  disableAnimation?: boolean;\n  /** shows loading animation */\n  loading?: boolean;\n  /** optional icon */\n  icon?: ReactNode;\n  /** click event handler */\n  onClick?: HeroButtonProps['onPress'];\n  /** border radius size */\n  radius?: VariantProps['radius'];\n  /** enable ripple animation effect on click */\n  ripple?: boolean;\n  /** size options */\n  size?: VariantProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** HTML button type attribute */\n  type?: 'button' | 'submit' | 'reset' | undefined;\n  /** visual style variant */\n  variant?: VariantProps['variant'];\n}\n\n/**\n * Button component based on [HeroUI Button](https://www.heroui.com//docs/components/button)\n */\nconst Button = ({\n  ariaLabel = undefined,\n  children = undefined,\n  className: _className = undefined,\n  color = 'default',\n  disableAnimation = false,\n  disabled = false,\n  icon = undefined,\n  loading = false,\n  onClick = undefined,\n  radius = undefined,\n  ripple = false,\n  size = undefined,\n  testId = undefined,\n  type = undefined,\n  variant = 'solid',\n}: ButtonProps) => {\n  const className = buttonVariants({\n    className: _className,\n    disableAnimation,\n    isDisabled: disabled,\n    color,\n    size,\n    variant,\n    isIconOnly: !!(icon && !children),\n    radius,\n  });\n\n  return (\n    <HeroButton\n      aria-label={ariaLabel}\n      className={className}\n      data-testid={testId}\n      disableRipple={disableAnimation || !ripple}\n      isLoading={loading}\n      onPress={onClick}\n      spinner={<LoadingSpinner />}\n      type={type}\n    >\n      {icon}\n      {children}\n    </HeroButton>\n  );\n};\n\nexport default Button;\n","/**\n * svg loading spinner for button\n * @see https://www.heroui.com//docs/components/button#loading\n * */\nconst LoadingSpinner = () => {\n  return (\n    <svg\n      className=\"h-5 w-5 animate-spin text-current\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport default LoadingSpinner;\n","import Button, { buttonVariants } from './Button';\n\nexport type { ButtonProps } from './Button';\n\nexport { Button, buttonVariants };\n\nexport default Button;\n"],"mappings":"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","names":["jsx","jsxs","Button_default"]}

package/dist/{chunk-RYO74XL7.cjs → chunk-G3YTOGEG.cjs}

@@ -51,16 +51,19 @@ var Tabs = ({
       selectedKey,
       size,
       variant,
-      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
-      )
+      children: (item) => {
+        var _a;
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _tabs.Tab,
+          {
+            "data-testid": _pixelutils.slugify.call(void 0, `${testId}_${(_a = item.testId) != null ? _a : item.key}`),
+            isDisabled: !!item.disabled,
+            title: item.label,
+            children: item.content
+          },
+          item.key
+        );
+      }
     }
   );
 };
@@ -74,4 +77,4 @@ var Tabs_default2 = Tabs_default;
 
 
 exports.tabsVariants = tabsVariants; exports.Tabs_default = Tabs_default; exports.Tabs_default2 = Tabs_default2;
-//# sourceMappingURL=chunk-RYO74XL7.cjs.map
+//# sourceMappingURL=chunk-G3YTOGEG.cjs.map

package/dist/chunk-G3YTOGEG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-G3YTOGEG.cjs","../src/Tabs/Tabs.tsx","../src/Tabs/index.ts"],"names":[],"mappings":"AAAA;ACGA,oCAAiD;AAEjD,oDAAkD;AA+GxC,+CAAA;AA7GH,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;AA0DD,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,GAAS;AAlHjB,QAAA,IAAA,EAAA;AAmHQ,QAAA,uBACE,6BAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YAEC,aAAA,EAAa,iCAAA,CAAQ,EAAA;AACF,YAAA;AACP,YAAA;AAEN,YAAA;AAAA,UAAA;AALI,UAAA;AAMZ,QAAA;AAEJ,MAAA;AAAA,IAAA;AACF,EAAA;AAEJ;AAEe;AD5DqB;AACA;AEjErB;AFmEqB;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-G3YTOGEG.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\ntype Key = string | number;\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: 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: Key | null) => 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?: Key;\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        return (\n          <HeroTab\n            key={item.key}\n            data-testid={slugify(`${testId}_${item.testId ?? item.key}`)}\n            isDisabled={!!item.disabled}\n            title={item.label}\n          >\n            {item.content}\n          </HeroTab>\n        );\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-JSANDW3W.cjs → chunk-HG7AE6Q2.cjs}

@@ -46,4 +46,4 @@ var Badge_default2 = Badge_default;
 
 
 exports.Badge_default = Badge_default; exports.Badge_default2 = Badge_default2;
-//# sourceMappingURL=chunk-JSANDW3W.cjs.map
+//# sourceMappingURL=chunk-HG7AE6Q2.cjs.map

package/dist/chunk-HG7AE6Q2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-HG7AE6Q2.cjs","../src/Badge/Badge.tsx","../src/Badge/index.ts"],"names":["Badge_default"],"mappings":"AAAA;ACIA,sCAAmC;AAEnC,oDAAyC;AAqDrC,+CAAA;AAlDG,IAAM,cAAA,EAAgB,4BAAA;AAAG,EAC9B,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,EAAA;AAAA,IACP,IAAA,EAAM;AAAA,EACR;AACF,CAAC,CAAA;AA2BD,IAAM,OAAA,EAAS,CAAC;AAAA,EACd,QAAA;AAAA,EACA,SAAA,EAAW,WAAA,EAAa,KAAA,CAAA;AAAA,EACxB,QAAA,EAAU,KAAA,CAAA;AAAA,EACV,MAAA,EAAQ,SAAA;AAAA,EACR,UAAA,EAAY,KAAA;AAAA,EACZ,UAAA,EAAY,KAAA;AAAA,EACZ,UAAA,EAAY,WAAA;AAAA,EACZ,KAAA,EAAO;AACT,CAAA,EAAA,GAA6B;AAC3B,EAAA,GAAA,CAAI,QAAA,IAAY,KAAA,CAAA,EAAW;AACzB,IAAA,OAAO,QAAA;AAAA,EACT;AAEA,EAAA,MAAM,SAAA,EAAW,aAAA,CAAc,CAAA;AAC/B,EAAA,MAAM,UAAA,EAAY,8CAAA,QAAqB,EAAU,UAAA,EAAY,MAAM,CAAA;AAEnE,EAAA,uBACE,6BAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAY,SAAA;AAAA,MACZ,KAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,EAAa,CAAC,SAAA;AAAA,MACd,IAAA;AAAA,MAEC;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,EAAQ,MAAA;ADjCf;AACA;AEnCA,IAAOA,eAAAA,EAAQ,aAAA;AFqCf;AACA;AACE;AACA;AACF,+EAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-HG7AE6Q2.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { BadgeProps as HeroBadgeProps } from '@heroui/badge';\nimport type { ReactNode } from 'react';\n\nimport { Badge as HeroBadge } from '@heroui/badge';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// badge styling variants\nexport const badgeVariants = tv({\n  slots: {\n    badge: '',\n    base: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof badgeVariants>;\ntype ClassName = TVClassName<typeof badgeVariants>;\n\nexport interface BadgeProps extends VariantProps {\n  /** component which is wrapped by the batch */\n  children: HeroBadgeProps['children'];\n  /** CSS class name */\n  className?: ClassName;\n  /** badge content */\n  content?: HeroBadgeProps['content'];\n  /** color of the badge */\n  color?: HeroBadgeProps['color'];\n  /** if set the badge have the same height and width */\n  isOneChar?: HeroBadgeProps['isOneChar'];\n  /** removes the badge outline */\n  noOutline?: boolean;\n  /** placement of the badge */\n  placement?: HeroBadgeProps['placement'];\n  /** size of the badge */\n  size?: HeroBadgeProps['size'];\n}\n\n/**\n * Badge component based on [HeroUI Badge](https://www.heroui.com//docs/components/badge)\n */\nconst Avatar = ({\n  children,\n  className: _className = undefined,\n  content = undefined,\n  color = 'default',\n  isOneChar = false,\n  noOutline = false,\n  placement = 'top-right',\n  size = 'md',\n}: BadgeProps): ReactNode => {\n  if (content === undefined) {\n    return children;\n  }\n  // className from slots\n  const variants = badgeVariants();\n  const className = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroBadge\n      classNames={className}\n      color={color}\n      content={content}\n      isOneChar={isOneChar}\n      placement={placement}\n      showOutline={!noOutline}\n      size={size}\n    >\n      {children}\n    </HeroBadge>\n  );\n};\n\nexport default Avatar;\n","import Badge from './Badge';\n\nexport type { BadgeProps } from './Badge';\n\nexport { Badge };\n\nexport default Badge;\n"]}

package/dist/{chunk-OOJRHIVU.js → chunk-HMYQTHGT.js}

@@ -51,16 +51,19 @@ var Tabs = ({
       selectedKey,
       size,
       variant,
-      children: (item) => /* @__PURE__ */ jsx(
-        HeroTab,
-        {
-          isDisabled: !!item.disabled,
-          title: item.label,
-          "data-testid": slugify(`${testId}_${item.testId || item.key}`),
-          children: item.content
-        },
-        item.key
-      )
+      children: (item) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          HeroTab,
+          {
+            "data-testid": slugify(`${testId}_${(_a = item.testId) != null ? _a : item.key}`),
+            isDisabled: !!item.disabled,
+            title: item.label,
+            children: item.content
+          },
+          item.key
+        );
+      }
     }
   );
 };
@@ -74,4 +77,4 @@ export {
   Tabs_default,
   Tabs_default2
 };
-//# sourceMappingURL=chunk-OOJRHIVU.js.map
+//# sourceMappingURL=chunk-HMYQTHGT.js.map