@fuf-stack/pixels 1.2.0 → 1.2.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/Tabs/Tabs.tsx","../src/Tabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Tab as HeroTab, Tabs as HeroTabs } from '@heroui/tabs';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const tabsVariants = tv({\n  slots: {\n    base: '',\n    cursor: '',\n    panel: '',\n    tab: 'data-[hover-unselected=true]:opacity-100',\n    tabContent: 'text-foreground',\n    tabList: '',\n    tabWrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof tabsVariants>;\ntype ClassName = TVClassName<typeof tabsVariants>;\n\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        <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;AA8G1C;AA5GD,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;AA0DD,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;;;AC1Hf,IAAOA,gBAAQ;","names":["Tabs_default"]}
+{"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\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"],"mappings":";AAGA,SAAS,OAAO,SAAS,QAAQ,gBAAgB;AAEjD,SAAS,SAAS,IAAI,4BAA4B;AA+GxC;AA7GH,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;AA0DD,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,SAAS;AAlHjB;AAmHQ,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,eAAa,QAAQ,GAAG,MAAM,KAAI,UAAK,WAAL,YAAe,KAAK,GAAG,EAAE;AAAA,YAC3D,YAAY,CAAC,CAAC,KAAK;AAAA,YACnB,OAAO,KAAK;AAAA,YAEX,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,eAAQ;;;AC5Hf,IAAOA,gBAAQ;","names":["Tabs_default"]}

package/dist/{chunk-DTG27JQ7.cjs → chunk-HPZBCSP3.cjs}

@@ -54,11 +54,13 @@ var Modal = ({
       placement: "center",
       portalContainer,
       scrollBehavior: "inside",
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _modal.ModalContent, { "data-testid": testId ? `modal_${testId}` : "modal", children: () => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        header && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _modal.ModalHeader, { children: header }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _modal.ModalBody, { id: "modal_body", children }),
-        footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _modal.ModalFooter, { children: footer })
-      ] }) })
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _modal.ModalContent, { "data-testid": testId ? `modal_${testId}` : "modal", children: () => {
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          header ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _modal.ModalHeader, { children: header }) : null,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _modal.ModalBody, { id: "modal_body", children }),
+          footer ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _modal.ModalFooter, { children: footer }) : null
+        ] });
+      } })
     }
   );
 };
@@ -72,4 +74,4 @@ var Modal_default2 = Modal_default;
 
 
 exports.modalVariants = modalVariants; exports.Modal_default = Modal_default; exports.Modal_default2 = Modal_default2;
-//# sourceMappingURL=chunk-DTG27JQ7.cjs.map
+//# sourceMappingURL=chunk-HPZBCSP3.cjs.map

package/dist/chunk-HPZBCSP3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-HPZBCSP3.cjs","../src/Modal/Modal.tsx","../src/Modal/index.ts"],"names":[],"mappings":"AAAA;ACIA;AACE;AACA;AACA;AACA;AACA;AAAe,sCACV;AAEP,oDAAyC;AAoF7B,+CAAA;AAjFL,IAAM,cAAA,EAAgB,4BAAA;AAAG,EAC9B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU,EAAA;AAAA,IACV,IAAA,EAAM,EAAA;AAAA,IACN,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,EAAA;AAAA,IACb,MAAA,EAAQ,2BAAA;AAAA,IACR,MAAA,EAAQ,2BAAA;AAAA,IACR,OAAA,EAAS;AAAA,EACX,CAAA;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,MACvB,EAAA,EAAI,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,MACvB,EAAA,EAAI,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,MACvB,EAAA,EAAI,EAAE,IAAA,EAAM,YAAY,CAAA;AAAA,MACxB,IAAA,EAAM,EAAE,IAAA,EAAM,uBAAuB;AAAA,IACvC;AAAA,EACF;AACF,CAAC,CAAA;AA+BD,IAAM,MAAA,EAAQ,CAAC;AAAA,EACb,SAAA,EAAW,IAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,iBAAA,EAAmB,KAAA;AAAA,EACnB,OAAA,EAAS,KAAA,CAAA;AAAA,EACT,OAAA,EAAS,KAAA,CAAA;AAAA,EACT,MAAA;AAAA,EACA,OAAA;AAAA,EACA,gBAAA,EAAkB,KAAA,CAAA;AAAA,EAClB,KAAA,EAAO,IAAA;AAAA,EACP,OAAA,EAAS,KAAA;AACX,CAAA,EAAA,GAAkB;AAEhB,EAAA,MAAM,SAAA,EAAW,aAAA,CAAc,EAAE,KAAK,CAAC,CAAA;AACvC,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,SAAA,EAAW,MAAM,CAAA;AAEnE,EAAA,uBACE,6BAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAS,QAAA;AAAA,MACT,UAAA;AAAA,MACA,aAAA,EAAa,MAAA;AAAA,MACb,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,EAAU,QAAA;AAAA,MACV,eAAA;AAAA,MACA,cAAA,EAAe,QAAA;AAAA,MAEf,QAAA,kBAAA,6BAAA,mBAAC,EAAA,EAAiB,aAAA,EAAa,OAAA,EAAS,CAAA,MAAA,EAAS,MAAM,CAAA,EAAA;AAI9C,QAAA;AAAuD,UAAA;AACf,0BAAA;AACe,UAAA;AAC1D,QAAA;AAGN,MAAA;AAAA,IAAA;AACF,EAAA;AAEJ;AAEe;ADzCiF;AACA;AE9DjF;AFgEiF;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-HPZBCSP3.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ModalProps as HeroModalProps } from '@heroui/modal';\nimport type { ReactNode } from 'react';\n\nimport {\n  Modal as HeroModal,\n  ModalBody as HeroModalBody,\n  ModalContent as HeroModalContent,\n  ModalFooter as HeroModalFooter,\n  ModalHeader as HeroModalHeader,\n} from '@heroui/modal';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// modal variants\nexport const modalVariants = tv({\n  slots: {\n    backdrop: '',\n    base: '',\n    body: 'py-4',\n    closeButton: '',\n    footer: 'border-t-divider border-t',\n    header: 'border-b-divider border-b',\n    wrapper: '',\n  },\n  variants: {\n    size: {\n      sm: { base: 'max-w-sm' },\n      md: { base: 'max-w-md' },\n      lg: { base: 'max-w-lg' },\n      xl: { base: 'max-w-5xl' },\n      full: { base: 'h-[80dvh] max-w-full' },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof modalVariants>;\ntype ClassName = TVClassName<typeof modalVariants>;\n\nexport interface ModalProps extends VariantProps {\n  /** modal body content */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Disable animations completely */\n  disableAnimation?: boolean;\n  /** modal footer */\n  footer?: ReactNode;\n  /** modal header */\n  header?: ReactNode;\n  /** open state (controlled) */\n  isOpen: boolean;\n  /** close event handler */\n  onClose: () => void;\n  /** The container element in which the overlay portal will be placed */\n  portalContainer?: HeroModalProps['portalContainer'];\n  /** modal size */\n  size?: VariantProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)\n */\nconst Modal = ({\n  children = null,\n  className = undefined,\n  disableAnimation = false,\n  footer = undefined,\n  header = undefined,\n  isOpen,\n  onClose,\n  portalContainer = undefined,\n  size = 'md',\n  testId = undefined,\n}: ModalProps) => {\n  // classNames from slots\n  const variants = modalVariants({ size });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroModal\n      backdrop=\"opaque\"\n      classNames={classNames}\n      data-testid={testId}\n      disableAnimation={disableAnimation}\n      isOpen={isOpen}\n      onClose={onClose}\n      placement=\"center\"\n      portalContainer={portalContainer}\n      scrollBehavior=\"inside\"\n    >\n      <HeroModalContent data-testid={testId ? `modal_${testId}` : 'modal'}>\n        {() => {\n          return (\n            <>\n              {header ? <HeroModalHeader>{header}</HeroModalHeader> : null}\n              <HeroModalBody id=\"modal_body\">{children}</HeroModalBody>\n              {footer ? <HeroModalFooter>{footer}</HeroModalFooter> : null}\n            </>\n          );\n        }}\n      </HeroModalContent>\n    </HeroModal>\n  );\n};\n\nexport default Modal;\n","import Modal, { modalVariants } from './Modal';\n\nexport type { ModalProps } from './Modal';\n\nexport { Modal, modalVariants };\n\nexport default Modal;\n"]}

package/dist/{chunk-ZZOEFQWQ.cjs → chunk-IBX6A72P.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/Breadcrumb/Breadcrumb.tsx
 
@@ -45,33 +45,35 @@ var Breadcrumb = ({
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _breadcrumbs.Breadcrumbs,
     {
-      classNames: {
-        base: classNames.nav,
-        ellipsis: classNames.separator,
-        list: classNames.list
-      },
       color,
       disableAnimation,
       hideSeparator,
       isDisabled: disabled,
-      itemClasses: {
-        base: classNames.itemBase,
-        item: classNames.item,
-        separator: classNames.separator
-      },
       maxItems,
       radius,
       separator,
       size,
       underline,
       variant,
-      children: breadcrumbItems.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _breadcrumbs.BreadcrumbItem,
-        _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {
-          isDisabled: disabled || (item == null ? void 0 : item.disabled)
-        }, item),
-        index
-      ))
+      classNames: {
+        base: classNames.nav,
+        ellipsis: classNames.separator,
+        list: classNames.list
+      },
+      itemClasses: {
+        base: classNames.itemBase,
+        item: classNames.item,
+        separator: classNames.separator
+      },
+      children: breadcrumbItems.map((item, index) => {
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _breadcrumbs.BreadcrumbItem,
+          _chunkAHEA4IJVcjs.__spreadValues.call(void 0, {
+            isDisabled: disabled || (item == null ? void 0 : item.disabled)
+          }, item),
+          index
+        );
+      })
     }
   );
 };
@@ -85,4 +87,4 @@ var Breadcrumb_default2 = Breadcrumb_default;
 
 
 exports.breadcrumbVariants = breadcrumbVariants; exports.Breadcrumb_default = Breadcrumb_default; exports.Breadcrumb_default2 = Breadcrumb_default2;
-//# sourceMappingURL=chunk-ZZOEFQWQ.cjs.map
+//# sourceMappingURL=chunk-IBX6A72P.cjs.map

package/dist/chunk-IBX6A72P.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-IBX6A72P.cjs","../src/Breadcrumb/Breadcrumb.tsx","../src/Breadcrumb/index.ts"],"names":["Breadcrumb_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACDA;AACE;AACA;AAAkB,kDACb;AAEP,oDAAyC;AAkH/B,+CAAA;AA9GH,IAAM,mBAAA,EAAqB,4BAAA;AAAG,EACnC,KAAA,EAAO;AAAA;AAAA,IAEL,QAAA,EAAU,EAAA;AAAA;AAAA,IAEV,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,QAAA,EAAU,EAAA;AAAA;AAAA;AAAA,IAEV,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,SAAA,EAAW,EAAA;AAAA;AAAA,IAEX,GAAA,EAAK;AAAA,EACP;AACF,CAAC,CAAA;AAoDD,IAAM,WAAA,EAAa,CAAC;AAAA,EAClB,eAAA;AAAA,EACA,SAAA,EAAW,WAAA,EAAa,KAAA,CAAA;AAAA,EACxB,MAAA,EAAQ,YAAA;AAAA,EACR,iBAAA,EAAmB,KAAA;AAAA,EACnB,SAAA,EAAW,KAAA;AAAA,EACX,cAAA,EAAgB,KAAA;AAAA,EAChB,SAAA,EAAW,KAAA,CAAA;AAAA,EACX,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,KAAA,EAAO,IAAA;AAAA,EACP,UAAA,EAAY,OAAA;AAAA,EACZ,QAAA,EAAU;AACZ,CAAA,EAAA,GAAuB;AAErB,EAAA,MAAM,SAAA,EAAW,kBAAA,CAAmB,CAAC,CAAC,CAAA;AACtC,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,UAAA,EAAY,KAAK,CAAA;AAEnE,EAAA,uBACE,6BAAA;AAAA,IAAC,wBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA,EAAY,QAAA;AAAA,MACZ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,UAAA,CAAW,GAAA;AAAA,QACjB,QAAA,EAAU,UAAA,CAAW,SAAA;AAAA,QACrB,IAAA,EAAM,UAAA,CAAW;AAAA,MACnB,CAAA;AAAA,MACA,WAAA,EAAa;AAAA,QACX,IAAA,EAAM,UAAA,CAAW,QAAA;AAAA,QACjB,IAAA,EAAM,UAAA,CAAW,IAAA;AAAA,QACjB,SAAA,EAAW,UAAA,CAAW;AAAA,MACxB,CAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,EAAA,GAAU;AACpC,QAAA,uBACE,6BAAA;AAAA,UAAC,2BAAA;AAAA,UAAA,8CAAA;AAAA,YAGC,UAAA,EAAY,SAAA,GAAA,CAAY,KAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,IAAA,CAAM,QAAA;AAAA,UAAA,CAAA,EAC1B,IAAA,CAAA;AAAA,UAFC;AAAA,QAGP,CAAA;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,mBAAA,EAAQ,UAAA;ADtDf;AACA;AE3EA,IAAOA,oBAAAA,EAAQ,kBAAA;AF6Ef;AACA;AACE;AACA;AACA;AACF,oJAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-IBX6A72P.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n  Breadcrumbs as HeroBreadcrumb,\n  BreadcrumbItem as HeroBreadcrumbItem,\n} from '@heroui/breadcrumbs';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// breadcrumb styling variants\n// see: https://www.heroui.com//docs/components/breadcrumbs#breadcrumbitem-props\nexport const breadcrumbVariants = tv({\n  slots: {\n    /** ellipsis slot */\n    ellipsis: '',\n    /** li > span slot */\n    item: '',\n    /** li  slot */\n    itemBase: '', // base for item slot\n    /** ol slot */\n    list: '',\n    /** separator slot */\n    separator: '',\n    /** nav slot, breadcrumb base slot in heroui */\n    nav: '',\n  },\n});\n\nexport interface BreadcrumbItemProps {\n  /** Content of the breadcrumb item */\n  children: ReactNode;\n  /** Disables the breadcrumb item */\n  disabled?: boolean;\n  /** content displayed before the children */\n  startContent?: ReactNode;\n  /** content displayed after the children */\n  endContent?: ReactNode;\n}\n\ntype VariantProps = TVProps<typeof breadcrumbVariants>;\ntype ClassName = TVClassName<typeof breadcrumbVariants>;\n\nexport interface BreadcrumbProps extends VariantProps {\n  /** Props for breadcrumbItem, will render the breadcrumb items programmatically */\n  breadcrumbItems: BreadcrumbItemProps[];\n  /** CSS class name */\n  className?: ClassName;\n  /** color of the active BreadcrumbItem */\n  color?:\n    | 'foreground'\n    | 'primary'\n    | 'secondary'\n    | 'success'\n    | 'warning'\n    | 'danger';\n  /** Disables the breadcrumb animation */\n  disableAnimation?: boolean;\n  /** hides the separator between items */\n  hideSeparator?: boolean;\n  /** disables all items */\n  disabled?: boolean;\n  /** Maximum number of items to show without \"...\" in between */\n  maxItems?: number;\n  /** Radius of the breadcrumb */\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n  /** Separator between items */\n  separator?: ReactNode;\n  /** Size of the breadcrumb */\n  size?: 'sm' | 'md' | 'lg';\n  /** Adjust when the breadcrumb items should be underlined */\n  underline?: 'none' | 'active' | 'hover' | 'focus' | 'always';\n  /** Style variant of the breadcrumb */\n  variant?: 'solid' | 'bordered' | 'light';\n}\n\n/**\n * Breadcrumb component based on [HeroUI Breadcrumbs](https://www.heroui.com//docs/components/breadcrumbs)\n */\nconst Breadcrumb = ({\n  breadcrumbItems,\n  className: _className = undefined,\n  color = 'foreground',\n  disableAnimation = false,\n  disabled = false,\n  hideSeparator = false,\n  maxItems = undefined,\n  radius = 'none',\n  separator = undefined,\n  size = 'md',\n  underline = 'hover',\n  variant = 'light',\n}: BreadcrumbProps) => {\n  // itemClasses from className slots\n  const variants = breadcrumbVariants({});\n  const classNames = variantsToClassNames(variants, _className, 'nav');\n\n  return (\n    <HeroBreadcrumb\n      color={color}\n      disableAnimation={disableAnimation}\n      hideSeparator={hideSeparator}\n      isDisabled={disabled}\n      maxItems={maxItems}\n      radius={radius}\n      separator={separator}\n      size={size}\n      underline={underline}\n      variant={variant}\n      classNames={{\n        base: classNames.nav,\n        ellipsis: classNames.separator,\n        list: classNames.list,\n      }}\n      itemClasses={{\n        base: classNames.itemBase,\n        item: classNames.item,\n        separator: classNames.separator,\n      }}\n    >\n      {breadcrumbItems.map((item, index) => {\n        return (\n          <HeroBreadcrumbItem\n            // eslint-disable-next-line react/no-array-index-key\n            key={index}\n            isDisabled={disabled || item?.disabled}\n            {...item}\n          />\n        );\n      })}\n    </HeroBreadcrumb>\n  );\n};\n\nexport default Breadcrumb;\n","import Breadcrumb, { breadcrumbVariants } from './Breadcrumb';\n\nexport type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb';\n\nexport { Breadcrumb, breadcrumbVariants };\n\nexport default Breadcrumb;\n"]}

package/dist/{chunk-VBOUHWXM.js → chunk-IGRNC5NX.js}

@@ -71,11 +71,13 @@ var Drawer = ({
       radius,
       scrollBehavior: "inside",
       size,
-      children: /* @__PURE__ */ jsx(HeroDrawerContent, { "data-testid": testId ? `drawer_${testId}` : "drawer", children: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        header && /* @__PURE__ */ jsx(HeroDrawerHeader, { children: header }),
-        /* @__PURE__ */ jsx(HeroDrawerBody, { id: "drawer_body", children }),
-        footer && /* @__PURE__ */ jsx(HeroDrawerFooter, { children: footer })
-      ] }) })
+      children: /* @__PURE__ */ jsx(HeroDrawerContent, { "data-testid": testId ? `drawer_${testId}` : "drawer", children: () => {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          header ? /* @__PURE__ */ jsx(HeroDrawerHeader, { children: header }) : null,
+          /* @__PURE__ */ jsx(HeroDrawerBody, { id: "drawer_body", children }),
+          footer ? /* @__PURE__ */ jsx(HeroDrawerFooter, { children: footer }) : null
+        ] });
+      } })
     }
   );
 };
@@ -93,4 +95,4 @@ export {
   Drawer_default,
   Drawer_default2
 };
-//# sourceMappingURL=chunk-VBOUHWXM.js.map
+//# sourceMappingURL=chunk-IGRNC5NX.js.map

package/dist/{chunk-VBOUHWXM.js.map → chunk-IGRNC5NX.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/Drawer/Drawer.tsx","../src/Drawer/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { DrawerProps as HeroDrawerProps } from '@heroui/drawer';\nimport type { ReactNode } from 'react';\n\nimport {\n  Drawer as HeroDrawer,\n  DrawerBody as HeroDrawerBody,\n  DrawerContent as HeroDrawerContent,\n  DrawerFooter as HeroDrawerFooter,\n  DrawerHeader as HeroDrawerHeader,\n} from '@heroui/drawer';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// drawer variants\nexport const drawerVariants = tv({\n  slots: {\n    wrapper: '',\n    base: '',\n    backdrop: '',\n    header: '',\n    body: '',\n    footer: '',\n    closeButton: '',\n  },\n});\n\nexport const drawerSizes = [\n  'xs',\n  'sm',\n  'md',\n  'lg',\n  'xl',\n  '2xl',\n  '3xl',\n  '4xl',\n  '5xl',\n  'full',\n] as const;\nexport type DrawerSizes = (typeof drawerSizes)[number];\n\nexport const drawerRadii = ['none', 'sm', 'md', 'lg'] as const;\nexport type DrawerRadius = (typeof drawerRadii)[number];\n\nexport const drawerBackdrops = ['opaque', 'transparent', 'blur'] as const;\nexport type DrawerBackdrop = (typeof drawerBackdrops)[number];\n\nexport const drawerPlacements = ['left', 'right', 'top', 'bottom'] as const;\nexport type DrawerPlacement = (typeof drawerPlacements)[number];\n\ntype VariantProps = TVProps<typeof drawerVariants>;\ntype ClassName = TVClassName<typeof drawerVariants>;\n\nexport interface DrawerProps extends VariantProps {\n  /** The backdrop style of the Drawer. */\n  backdrop?: DrawerBackdrop;\n  /** Drawer body content */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Custom close button to display on top right corner. */\n  closeButton?: ReactNode;\n  /** Footer of the Drawer. */\n  footer?: ReactNode;\n  /** Header of the Drawer. */\n  header?: ReactNode;\n  /** Whether to hide the drawer close button. */\n  hideCloseButton?: boolean;\n  /** Whether the drawer is open by default (controlled). */\n  isOpen?: boolean;\n  /** Whether the drawer can be closed by clicking on the overlay or pressing the Esc key. */\n  isDismissable?: boolean;\n  /** Handler that is called when the drawer is closed. */\n  onClose?: () => void;\n  /** Handler that is called when the drawer's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** The drawer position. */\n  placement?: DrawerPlacement;\n  /** The container element in which the overlay portal will be placed */\n  portalContainer?: HeroDrawerProps['portalContainer'];\n  /** The drawer border radius. */\n  radius?: DrawerRadius;\n  /** The drawer size. */\n  size?: DrawerSizes;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Drawer component based on [HeroUI Drawer](https://www.heroui.com//docs/components/drawer)\n */\nconst Drawer = ({\n  backdrop = 'opaque',\n  children = null,\n  className = undefined,\n  closeButton = undefined,\n  footer = undefined,\n  header = undefined,\n  hideCloseButton = false,\n  isOpen = undefined,\n  isDismissable = true,\n  onClose = undefined,\n  onOpenChange = undefined,\n  placement = 'right',\n  portalContainer = undefined,\n  radius = 'lg',\n  size = 'md',\n  testId = undefined,\n}: DrawerProps) => {\n  // classNames from slots\n  const variants = drawerVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroDrawer\n      backdrop={backdrop}\n      classNames={classNames}\n      closeButton={closeButton}\n      data-testid={testId}\n      hideCloseButton={hideCloseButton}\n      isDismissable={isDismissable}\n      isOpen={isOpen}\n      onClose={onClose}\n      onOpenChange={onOpenChange}\n      placement={placement}\n      portalContainer={portalContainer}\n      radius={radius}\n      scrollBehavior=\"inside\"\n      size={size}\n    >\n      <HeroDrawerContent data-testid={testId ? `drawer_${testId}` : 'drawer'}>\n        {() => (\n          <>\n            {header && <HeroDrawerHeader>{header}</HeroDrawerHeader>}\n            <HeroDrawerBody id=\"drawer_body\">{children}</HeroDrawerBody>\n            {footer && <HeroDrawerFooter>{footer}</HeroDrawerFooter>}\n          </>\n        )}\n      </HeroDrawerContent>\n    </HeroDrawer>\n  );\n};\n\nexport default Drawer;\n","import Drawer, {\n  drawerBackdrops,\n  drawerPlacements,\n  drawerRadii,\n  drawerSizes,\n  drawerVariants,\n} from './Drawer';\n\nexport type { DrawerProps } from './Drawer';\n\nexport {\n  Drawer,\n  drawerBackdrops,\n  drawerPlacements,\n  drawerRadii,\n  drawerSizes,\n  drawerVariants,\n};\n\nexport default Drawer;\n"],"mappings":";AAIA;AAAA,EACE,UAAU;AAAA,EACV,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,OACX;AAEP,SAAS,IAAI,4BAA4B;AAwH/B,mBACa,KADb;AArHH,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,aAAa;AAAA,EACf;AACF,CAAC;AAEM,IAAM,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,cAAc,CAAC,QAAQ,MAAM,MAAM,IAAI;AAG7C,IAAM,kBAAkB,CAAC,UAAU,eAAe,MAAM;AAGxD,IAAM,mBAAmB,CAAC,QAAQ,SAAS,OAAO,QAAQ;AA4CjE,IAAM,SAAS,CAAC;AAAA,EACd,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX,MAAmB;AAEjB,QAAM,WAAW,eAAe;AAChC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAe;AAAA,MACf;AAAA,MAEA,8BAAC,qBAAkB,eAAa,SAAS,UAAU,MAAM,KAAK,UAC3D,gBACC,iCACG;AAAA,kBAAU,oBAAC,oBAAkB,kBAAO;AAAA,QACrC,oBAAC,kBAAe,IAAG,eAAe,UAAS;AAAA,QAC1C,UAAU,oBAAC,oBAAkB,kBAAO;AAAA,SACvC,GAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;;;AC5Hf,IAAOA,kBAAQ;","names":["Drawer_default"]}
+{"version":3,"sources":["../src/Drawer/Drawer.tsx","../src/Drawer/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { DrawerProps as HeroDrawerProps } from '@heroui/drawer';\nimport type { ReactNode } from 'react';\n\nimport {\n  Drawer as HeroDrawer,\n  DrawerBody as HeroDrawerBody,\n  DrawerContent as HeroDrawerContent,\n  DrawerFooter as HeroDrawerFooter,\n  DrawerHeader as HeroDrawerHeader,\n} from '@heroui/drawer';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// drawer variants\nexport const drawerVariants = tv({\n  slots: {\n    wrapper: '',\n    base: '',\n    backdrop: '',\n    header: '',\n    body: '',\n    footer: '',\n    closeButton: '',\n  },\n});\n\nexport const drawerSizes = [\n  'xs',\n  'sm',\n  'md',\n  'lg',\n  'xl',\n  '2xl',\n  '3xl',\n  '4xl',\n  '5xl',\n  'full',\n] as const;\nexport type DrawerSizes = (typeof drawerSizes)[number];\n\nexport const drawerRadii = ['none', 'sm', 'md', 'lg'] as const;\nexport type DrawerRadius = (typeof drawerRadii)[number];\n\nexport const drawerBackdrops = ['opaque', 'transparent', 'blur'] as const;\nexport type DrawerBackdrop = (typeof drawerBackdrops)[number];\n\nexport const drawerPlacements = ['left', 'right', 'top', 'bottom'] as const;\nexport type DrawerPlacement = (typeof drawerPlacements)[number];\n\ntype VariantProps = TVProps<typeof drawerVariants>;\ntype ClassName = TVClassName<typeof drawerVariants>;\n\nexport interface DrawerProps extends VariantProps {\n  /** The backdrop style of the Drawer. */\n  backdrop?: DrawerBackdrop;\n  /** Drawer body content */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Custom close button to display on top right corner. */\n  closeButton?: ReactNode;\n  /** Footer of the Drawer. */\n  footer?: ReactNode;\n  /** Header of the Drawer. */\n  header?: ReactNode;\n  /** Whether to hide the drawer close button. */\n  hideCloseButton?: boolean;\n  /** Whether the drawer is open by default (controlled). */\n  isOpen?: boolean;\n  /** Whether the drawer can be closed by clicking on the overlay or pressing the Esc key. */\n  isDismissable?: boolean;\n  /** Handler that is called when the drawer is closed. */\n  onClose?: () => void;\n  /** Handler that is called when the drawer's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** The drawer position. */\n  placement?: DrawerPlacement;\n  /** The container element in which the overlay portal will be placed */\n  portalContainer?: HeroDrawerProps['portalContainer'];\n  /** The drawer border radius. */\n  radius?: DrawerRadius;\n  /** The drawer size. */\n  size?: DrawerSizes;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Drawer component based on [HeroUI Drawer](https://www.heroui.com//docs/components/drawer)\n */\nconst Drawer = ({\n  backdrop = 'opaque',\n  children = null,\n  className = undefined,\n  closeButton = undefined,\n  footer = undefined,\n  header = undefined,\n  hideCloseButton = false,\n  isOpen = undefined,\n  isDismissable = true,\n  onClose = undefined,\n  onOpenChange = undefined,\n  placement = 'right',\n  portalContainer = undefined,\n  radius = 'lg',\n  size = 'md',\n  testId = undefined,\n}: DrawerProps) => {\n  // classNames from slots\n  const variants = drawerVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroDrawer\n      backdrop={backdrop}\n      classNames={classNames}\n      closeButton={closeButton}\n      data-testid={testId}\n      hideCloseButton={hideCloseButton}\n      isDismissable={isDismissable}\n      isOpen={isOpen}\n      onClose={onClose}\n      onOpenChange={onOpenChange}\n      placement={placement}\n      portalContainer={portalContainer}\n      radius={radius}\n      scrollBehavior=\"inside\"\n      size={size}\n    >\n      <HeroDrawerContent data-testid={testId ? `drawer_${testId}` : 'drawer'}>\n        {() => {\n          return (\n            <>\n              {header ? <HeroDrawerHeader>{header}</HeroDrawerHeader> : null}\n              <HeroDrawerBody id=\"drawer_body\">{children}</HeroDrawerBody>\n              {footer ? <HeroDrawerFooter>{footer}</HeroDrawerFooter> : null}\n            </>\n          );\n        }}\n      </HeroDrawerContent>\n    </HeroDrawer>\n  );\n};\n\nexport default Drawer;\n","import Drawer, {\n  drawerBackdrops,\n  drawerPlacements,\n  drawerRadii,\n  drawerSizes,\n  drawerVariants,\n} from './Drawer';\n\nexport type { DrawerProps } from './Drawer';\n\nexport {\n  Drawer,\n  drawerBackdrops,\n  drawerPlacements,\n  drawerRadii,\n  drawerSizes,\n  drawerVariants,\n};\n\nexport default Drawer;\n"],"mappings":";AAIA;AAAA,EACE,UAAU;AAAA,EACV,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,OACX;AAEP,SAAS,IAAI,4BAA4B;AAyH7B,mBACY,KADZ;AAtHL,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,aAAa;AAAA,EACf;AACF,CAAC;AAEM,IAAM,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,cAAc,CAAC,QAAQ,MAAM,MAAM,IAAI;AAG7C,IAAM,kBAAkB,CAAC,UAAU,eAAe,MAAM;AAGxD,IAAM,mBAAmB,CAAC,QAAQ,SAAS,OAAO,QAAQ;AA4CjE,IAAM,SAAS,CAAC;AAAA,EACd,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX,MAAmB;AAEjB,QAAM,WAAW,eAAe;AAChC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAe;AAAA,MACf;AAAA,MAEA,8BAAC,qBAAkB,eAAa,SAAS,UAAU,MAAM,KAAK,UAC3D,gBAAM;AACL,eACE,iCACG;AAAA,mBAAS,oBAAC,oBAAkB,kBAAO,IAAsB;AAAA,UAC1D,oBAAC,kBAAe,IAAG,eAAe,UAAS;AAAA,UAC1C,SAAS,oBAAC,oBAAkB,kBAAO,IAAsB;AAAA,WAC5D;AAAA,MAEJ,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;;;AC9Hf,IAAOA,kBAAQ;","names":["Drawer_default"]}

package/dist/{chunk-FUBGS3G4.cjs → chunk-ITHJ52SN.cjs}

@@ -9,19 +9,21 @@ var ScrollShadow_default = ({
   orientation = "vertical",
   size = 40,
   testId = void 0
-}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  _scrollshadow.ScrollShadow,
-  {
-    className: _pixelutils.cn.call(void 0, className),
-    "data-testid": testId,
-    hideScrollBar,
-    orientation,
-    size,
-    children
-  }
-);
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _scrollshadow.ScrollShadow,
+    {
+      className: _pixelutils.cn.call(void 0, className),
+      "data-testid": testId,
+      hideScrollBar,
+      orientation,
+      size,
+      children
+    }
+  );
+};
 
 
 
 exports.ScrollShadow_default = ScrollShadow_default;
-//# sourceMappingURL=chunk-FUBGS3G4.cjs.map
+//# sourceMappingURL=chunk-ITHJ52SN.cjs.map

package/dist/chunk-ITHJ52SN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-ITHJ52SN.cjs","../src/ScrollShadow/ScrollShadow.tsx"],"names":[],"mappings":"AAAA;ACEA,qDAA6B;AAE7B,oDAAmB;AA6Bf,+CAAA;AATJ,IAAO,qBAAA,EAAQ,CAAC;AAAA,EACd,SAAA,EAAW,IAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,cAAA,EAAgB,KAAA;AAAA,EAChB,YAAA,EAAc,UAAA;AAAA,EACd,KAAA,EAAO,EAAA;AAAA,EACP,OAAA,EAAS,KAAA;AACX,CAAA,EAAA,GAAyB;AACvB,EAAA,uBACE,6BAAA;AAAA,IAAC,0BAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,MACvB,aAAA,EAAa,MAAA;AAAA,MACb,aAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MAEC;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;ADnBA;AACA;AACE;AACF,oDAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-ITHJ52SN.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\nimport { ScrollShadow } from '@heroui/scroll-shadow';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nexport interface ScrollShadowProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string | string[];\n  /** Hides the scrollbar */\n  hideScrollBar?: boolean;\n  /** Orientation of the scroll shadow */\n  orientation?: 'horizontal' | 'vertical';\n  /** Shadow size in pixels */\n  size?: number;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Scroll Shadow component based on [HeroUI Scroll Shadow](https://www.heroui.com//docs/components/scroll-shadow)\n */\nexport default ({\n  children = null,\n  className = undefined,\n  hideScrollBar = false,\n  orientation = 'vertical',\n  size = 40,\n  testId = undefined,\n}: ScrollShadowProps) => {\n  return (\n    <ScrollShadow\n      className={cn(className)}\n      data-testid={testId}\n      hideScrollBar={hideScrollBar}\n      orientation={orientation}\n      size={size}\n    >\n      {children}\n    </ScrollShadow>\n  );\n};\n"]}

package/dist/{chunk-XOCP745X.cjs → chunk-IY2NXW6X.cjs}

@@ -48,7 +48,9 @@ var progressVariants = _pixelutils.tv.call(void 0, {
     }
   }
 });
-var defaultFormat = (percent = 0) => `${percent}%`;
+var defaultFormat = (percent = 0) => {
+  return `${percent}%`;
+};
 var Progress = ({
   ariaLabel = "progress",
   className = void 0,
@@ -98,4 +100,4 @@ var Progress_default2 = Progress_default;
 
 
 exports.progressVariants = progressVariants; exports.Progress_default = Progress_default; exports.Progress_default2 = Progress_default2;
-//# sourceMappingURL=chunk-XOCP745X.cjs.map
+//# sourceMappingURL=chunk-IY2NXW6X.cjs.map

package/dist/chunk-IY2NXW6X.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-IY2NXW6X.cjs","../src/Progress/Progress.tsx","../src/Progress/index.ts"],"names":["Progress_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACDA,4CAAyC;AAEzC,oDAAyC;AAsHrC,+CAAA;AAjHG,IAAM,iBAAA,EAAmB,4BAAA;AAAG,EACjC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,SAAA,EAAW,EAAA;AAAA;AAAA,IAEX,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,YAAA,EAAc,EAAA;AAAA;AAAA,IAEd,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,KAAA,EAAO;AAAA,EACT,CAAA;AAAA,EACA,QAAA,EAAU;AAAA;AAAA,IAER,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ;AAAA,QACN,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,SAAA,EAAW;AAAA,QACT,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;AAiCD,IAAM,cAAA,EAAgB,CAAC,QAAA,EAAU,CAAA,EAAA,GAAM;AACrC,EAAA,OAAO,CAAA,EAAA;AACT;AAKM;AACJ,EAAA;AACA,EAAA;AACQ,EAAA;AACR,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACQ,EAAA;AACR,EAAA;AACA,EAAA;AACO,EAAA;AACP,EAAA;AACmB;AAEb,EAAA;AAGA,EAAA;AAGF,EAAA;AACA,EAAA;AACF,IAAA;AACF,EAAA;AAEM,EAAA;AACA,EAAA;AAEA,EAAA;AAGJ,EAAA;AAAC,IAAA;AAAA,IAAA;AACC,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAAyB,IAAA;AAC3B,EAAA;AAEJ;AAEO;AD7CG;AACA;AExFHA;AF0FG;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-IY2NXW6X.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Progress as HeroProgress } from '@heroui/progress';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\n// progress styling variants\nexport const progressVariants = tv({\n  slots: {\n    // wrapper around the whole component\n    base: '',\n    // indicator of the progress (finished part)\n    indicator: '',\n    // label at the top left of the progress bar\n    label: '',\n    // wrapper around progress label and label span\n    labelWrapper: '',\n    // track of the progress (not finished part)\n    track: '',\n    // span around the progress value\n    value: '',\n  },\n  variants: {\n    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n    color: {\n      danger: {\n        indicator: 'bg-danger',\n      },\n      default: {\n        indicator: 'bg-default-400',\n      },\n      info: {\n        indicator: 'bg-info',\n      },\n      primary: {\n        indicator: 'bg-primary',\n      },\n      secondary: {\n        indicator: 'bg-secondary',\n      },\n      success: {\n        indicator: 'bg-success',\n      },\n      warning: {\n        indicator: 'bg-warning',\n      },\n    },\n  },\n});\n\nexport type VariantProps = TVProps<typeof progressVariants>;\ntype ClassName = TVClassName<typeof progressVariants>;\n\nexport interface ProgressProps extends VariantProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** color of the progress bar */\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  /** function to format the progress value */\n  format?: (percent: number) => ReactNode;\n  /** shows indeterminate progress animation */\n  indeterminate?: boolean;\n  /** label of the progress bar */\n  label?: ReactNode;\n  /** percentage / progress of the progress bar */\n  percent: number;\n  /** whether to show the value label */\n  showValueLabel?: boolean;\n  /** size of the progress bar */\n  size?: 'sm' | 'md' | 'lg';\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => {\n  return `${percent}%`;\n};\n\n/**\n * Progress component based on [HeroUI Progress](https://www.heroui.com//docs/components/progress)\n */\nconst Progress = ({\n  ariaLabel = 'progress',\n  className = undefined,\n  color = 'info',\n  disableAnimation = false,\n  disableFinishedState = false,\n  format = defaultFormat,\n  indeterminate = false,\n  label = undefined,\n  percent,\n  showValueLabel = false,\n  size = 'md',\n  testId = undefined,\n}: ProgressProps) => {\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 = percent >= 100 && !disableFinishedState;\n\n  // handle special states\n  let progressColor: VariantProps['color'] = color;\n  if (isFinished) {\n    progressColor = 'success';\n  }\n\n  const variants = progressVariants({ color: progressColor });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const value = format(percent);\n\n  return (\n    <HeroProgress\n      aria-label={ariaLabel}\n      classNames={classNames}\n      data-testid={testId}\n      disableAnimation={isInitialRenderCycle || disableAnimation}\n      isIndeterminate={indeterminate}\n      label={label}\n      showValueLabel={showValueLabel}\n      size={size}\n      value={percent || 0}\n      valueLabel={!!percent && value}\n    />\n  );\n};\n\nexport default Progress;\n","import Progress, { progressVariants } from './Progress';\n\nexport type { ProgressProps } from './Progress';\n\nexport { Progress, progressVariants };\n\nexport default Progress;\n"]}

package/dist/{chunk-WFPRB4JT.js → chunk-IYQQOML7.js}

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk-J7N2552D.js";
+} from "./chunk-OAIRL2FN.js";
 
 // src/Menu/Menu.tsx
 import { FaEllipsisVertical } from "react-icons/fa6";
@@ -22,22 +22,29 @@ var menuVariants = tv({
   }
 });
 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__ */ jsx(
+    HeroDropdownItem,
+    {
+      className: cn(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__ */ jsx(
-  HeroDropdownItem,
-  {
-    className: cn(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,
@@ -64,8 +71,7 @@ var Menu = ({
       })
     );
   } else if (triggerButtonProps) {
-    triggerButton = // eslint-disable-next-line react/jsx-props-no-spreading
-    /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({ className: className.trigger }, triggerButtonProps), { children }));
+    triggerButton = /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({ className: className.trigger }, triggerButtonProps), { children }));
   }
   return /* @__PURE__ */ jsxs(
     HeroDropdown,
@@ -78,8 +84,8 @@ var Menu = ({
         /* @__PURE__ */ jsx(
           HeroDropdownMenu,
           {
-            items,
             disabledKeys: getDisabledKeys(items),
+            items,
             onAction,
             children: (item) => {
               if ("items" in item) {
@@ -112,4 +118,4 @@ export {
   Menu_default,
   Menu_default2
 };
-//# sourceMappingURL=chunk-WFPRB4JT.js.map
+//# sourceMappingURL=chunk-IYQQOML7.js.map

package/dist/chunk-IYQQOML7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Menu/Menu.tsx","../src/Menu/index.ts"],"sourcesContent":["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"],"mappings":";;;;;;AASA,SAAS,0BAA0B;AAEnC,SAAS,cAAc;AACvB;AAAA,EACE,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,OACd;AAEP,SAAS,IAAI,IAAI,4BAA4B;AA+FzC,cAuDA,YAvDA;AA1DG,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF,CAAC;AAoCD,IAAM,kBAAkB,CAAC,UAAsC;AAC7D,SAAO,MACJ,IAAI,CAAC,SAAS;AAEb,WAAO,QAAO,6BAAM,WAAU,cAAc,OAAO,KAAK;AAAA,EAC1D,CAAC,EACA,KAAiB,EACjB,OAAO,CAAC,SAAS;AAChB,WAAO,OAAO,OAAO,MAAM,UAAU,KAAK,KAAK,aAAa;AAAA,EAC9D,CAAC,EACA,IAAI,CAAC,SAAS;AACb,WAAO,KAAK;AAAA,EACd,CAAC;AACL;AAEA,IAAM,iBAAiB,CAAC,MAAgB,kBAA2B;AAjHnE;AAkHE,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,WAAW,GAAG,eAAe,KAAK,SAAS;AAAA,MAC3C,gBAAa,UAAK,WAAL,YAAe,KAAK;AAAA,MACjC,aAAa,KAAK;AAAA,MAClB,SAAS,KAAK;AAAA,MACd,cAAc,KAAK;AAAA,MAElB,eAAK;AAAA;AAAA,IAPD,KAAK;AAAA,EAQZ;AAEJ;AAKA,IAAM,OAAO,CAAC;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,WAAW,aAAa;AAAA,EACxB,aAAa;AAAA,EACb;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,qBAAqB;AACvB,MAAiB;AAEf,QAAM,WAAW,aAAa;AAC9B,QAAM,YAAY,qBAAqB,UAAU,YAAY,SAAS;AAGtE,MAAI,gBAAgB,oBAAC,YAAO,MAAK,UAAU,UAAS;AACpD,MAAI,CAAC,UAAU;AAEb,oBACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,WAAW,UAAU,OAAO;AAAA,QAC1C,MAAK;AAAA,QACL,SAAQ;AAAA,SACJ,qBAJL;AAAA,QAMC,8BAAC,sBAAmB;AAAA;AAAA,IACtB;AAAA,EAEJ,WAAW,oBAAoB;AAE7B,oBACE,oBAAC,uCAAO,WAAW,UAAU,WAAa,qBAAzC,EACE,WACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,uBAAoB,eAAa,QAE/B,yBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,cAAc,gBAAgB,KAAK;AAAA,YACnC;AAAA,YACA;AAAA,YAEC,WAAC,SAAS;AACT,kBAAI,WAAW,MAAM;AACnB,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC,OAAO,KAAK;AAAA,oBACZ,OAAO,KAAK;AAAA,oBAEX,WAAC,gBAAgB;AAChB,6BAAO,eAAe,aAAa,UAAU,IAAI;AAAA,oBACnD;AAAA;AAAA,kBANK,KAAK;AAAA,gBAOZ;AAAA,cAEJ;AACA,qBAAO,eAAe,MAAM,UAAU,IAAI;AAAA,YAC5C;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,eAAQ;;;ACvMf,IAAOA,gBAAQ;","names":["Menu_default"]}

package/dist/{chunk-J4HCGFN4.cjs → chunk-J2LI4ONS.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkFUBGS3G4cjs = require('./chunk-FUBGS3G4.cjs');
+var _chunkITHJ52SNcjs = require('./chunk-ITHJ52SN.cjs');
 
 // src/Tooltip/Tooltip.tsx
 var _tooltip = require('@heroui/tooltip');
@@ -85,27 +85,29 @@ var Tooltip = ({
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _tooltip.Tooltip,
     {
+      shouldFlip: true,
+      showArrow: true,
       classNames,
       closeDelay,
       containerPadding,
+      defaultOpen,
+      delay,
+      onOpenChange,
+      placement,
       content: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-        header && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: classNames.headerWrapper, children: [
+        header ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: classNames.headerWrapper, children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classNames.header, children: header }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "hr", { className: classNames.divider })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFUBGS3G4cjs.ScrollShadow_default, { className: classNames.body, children: content }),
-        footer && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: classNames.footerWrapper, children: [
+        ] }) : null,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkITHJ52SNcjs.ScrollShadow_default, { className: classNames.body, children: content }),
+        footer ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: classNames.footerWrapper, children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "hr", { className: classNames.divider }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "span", { className: classNames.trigger, children })
     }
   );
@@ -119,4 +121,4 @@ var Tooltip_default2 = Tooltip_default;
 
 
 exports.Tooltip_default = Tooltip_default; exports.Tooltip_default2 = Tooltip_default2;
-//# sourceMappingURL=chunk-J4HCGFN4.cjs.map
+//# sourceMappingURL=chunk-J2LI4ONS.cjs.map

package/dist/chunk-J2LI4ONS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-J2LI4ONS.cjs","../src/Tooltip/Tooltip.tsx","../src/Tooltip/index.ts"],"names":["Tooltip_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACAA,0CAAuC;AAEvC,oDAAyC;AAqI7B,+CAAA;AAhIL,IAAM,gBAAA,EAAkB,4BAAA;AAAG,EAChC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,EAAA;AAAA,IACN,IAAA,EAAM,kBAAA;AAAA,IACN,OAAA,EAAS,gCAAA;AAAA,IACT,OAAA,EAAS,+BAAA;AAAA,IACT,MAAA,EAAQ,kBAAA;AAAA,IACR,aAAA,EAAe,QAAA;AAAA,IACf,MAAA,EAAQ,qCAAA;AAAA,IACR,aAAA,EAAe,QAAA;AAAA,IACf,OAAA,EAAS;AAAA,EACX,CAAA;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI;AAAA;AAAA,QAEF,IAAA,EAAM,UAAA;AAAA,QACN,MAAA,EAAQ,UAAA;AAAA,QACR,MAAA,EAAQ;AAAA,MACV,CAAA;AAAA,MACA,EAAA,EAAI;AAAA;AAAA,QAEF,IAAA,EAAM,UAAA;AAAA,QACN,MAAA,EAAQ,UAAA;AAAA,QACR,MAAA,EAAQ;AAAA,MACV,CAAA;AAAA,MACA,EAAA,EAAI;AAAA;AAAA,QAEF,IAAA,EAAM,UAAA;AAAA,QACN,MAAA,EAAQ,UAAA;AAAA,QACR,MAAA,EAAQ;AAAA,MACV,CAAA;AAAA,MACA,EAAA,EAAI;AAAA;AAAA,QAEF,IAAA,EAAM,UAAA;AAAA,QACN,MAAA,EAAQ,UAAA;AAAA,QACR,MAAA,EAAQ;AAAA,MACV,CAAA;AAAA,MACA,EAAA,EAAI;AAAA;AAAA,QAEF,IAAA,EAAM,UAAA;AAAA,QACN,MAAA,EAAQ,UAAA;AAAA,QACR,MAAA,EAAQ;AAAA,MACV,CAAA;AAAA,MACA,KAAA,EAAO;AAAA;AAAA,QAEL,IAAA,EAAM,WAAA;AAAA,QACN,MAAA,EAAQ,WAAA;AAAA,QACR,MAAA,EAAQ;AAAA,MACV,CAAA;AAAA,MACA,KAAA,EAAO;AAAA;AAAA,QAEL,IAAA,EAAM,WAAA;AAAA,QACN,MAAA,EAAQ,WAAA;AAAA,QACR,MAAA,EAAQ;AAAA,MACV,CAAA;AAAA,MACA,IAAA,EAAM,EAAE,IAAA,EAAM,GAAG;AAAA,IACnB;AAAA,EACF;AACF,CAAC,CAAA;AAqCD,IAAM,QAAA,EAAU,CAAC;AAAA,EACf,QAAA;AAAA,EACA,SAAA,EAAW,WAAA,EAAa,KAAA,CAAA;AAAA,EACxB,WAAA,EAAa,GAAA;AAAA,EACb,iBAAA,EAAmB,CAAA;AAAA,EACnB,OAAA;AAAA,EACA,YAAA,EAAc,KAAA;AAAA,EACd,MAAA,EAAQ,CAAA;AAAA,EACR,OAAA,EAAS,KAAA,CAAA;AAAA,EACT,OAAA,EAAS,KAAA,CAAA;AAAA,EACT,aAAA,EAAe,KAAA,CAAA;AAAA,EACf,UAAA,EAAY,KAAA;AAAA,EACZ,KAAA,EAAO;AACT,CAAA,EAAA,GAAoB;AAElB,EAAA,MAAM,SAAA,EAAW,eAAA,CAAgB,EAAE,KAAK,CAAC,CAAA;AACzC,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,UAAA,EAAY,MAAM,CAAA;AAEpE,EAAA,uBACE,6BAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAU,IAAA;AAAA,MACV,SAAA,EAAS,IAAA;AAAA,MACT,UAAA;AAAA,MACA,UAAA;AAAA,MACA,gBAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA,kBACE,8BAAA,KAAC,EAAA,EACE,QAAA,EAAA;AAAA,QAAA,OAAA,kBACC,8BAAA,KAAC,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,aAAA,EACzB,QAAA,EAAA;AAAA,0BAAA,6BAAA,KAAC,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,MAAA,EAAS,QAAA,EAAA,OAAA,CAAO,CAAA;AAAA,0BAC3C,6BAAA,IAAC,EAAA,EAAG,SAAA,EAAW,UAAA,CAAW,QAAA,CAAS;AAAA,QAAA,EAAA,CACrC,EAAA,EACE,IAAA;AAAA,wBACJ,6BAAA,sCAAC,EAAA,EAAa,SAAA,EAAW,UAAA,CAAW,IAAA,EAAO,QAAA,EAAA,QAAA,CAAQ,CAAA;AAAA,QAClD,OAAA,kBACC,8BAAA,KAAC,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,aAAA,EACzB,QAAA,EAAA;AAAA,0BAAA,6BAAA,IAAC,EAAA,EAAG,SAAA,EAAW,UAAA,CAAW,QAAA,CAAS,CAAA;AAAA,0BACnC,6BAAA,KAAC,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,MAAA,EAAS,QAAA,EAAA,OAAA,CAAO;AAAA,QAAA,EAAA,CAC7C,EAAA,EACE;AAAA,MAAA,EAAA,CACN,CAAA;AAAA,MAEF,OAAA,EAAS,CAAC,CAAA,EAAA,GAAM;AACd,QAAA,CAAA,CAAE,cAAA,CAAe,CAAA;AAAA,MACnB,CAAA;AAAA,MAEA,QAAA,kBAAA,6BAAA,MAAC,EAAA,EAAK,SAAA,EAAW,UAAA,CAAW,OAAA,EAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EACjD,CAAA;AAEJ,CAAA;AAEA,IAAO,gBAAA,EAAQ,OAAA;AD/Cf;AACA;AE9GA,IAAOA,iBAAAA,EAAQ,eAAA;AFgHf;AACA;AACE;AACA;AACF,uFAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-J2LI4ONS.cjs","sourcesContent":[null,"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"]}

package/dist/{chunk-XHGGLUFN.js → chunk-JQNZVQVJ.js}

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk-J7N2552D.js";
+} from "./chunk-OAIRL2FN.js";
 
 // src/Toast/index.ts
 import { Toast } from "@heroui/toast";
@@ -171,4 +171,4 @@ export {
   Toast,
   Toast_default
 };
-//# sourceMappingURL=chunk-XHGGLUFN.js.map
+//# sourceMappingURL=chunk-JQNZVQVJ.js.map