@fuf-stack/pixels 1.9.0 → 1.10.0

package/dist/Popover/Popover.js

@@ -0,0 +1,71 @@
+import ScrollShadow_default from "../ScrollShadow/ScrollShadow.js";
+import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@heroui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@heroui/popover";
+//#region src/Popover/Popover.tsx
+const popoverVariants = tv({ slots: {
+	body: "w-full px-4 py-2",
+	content: "flex max-h-[80vh] flex-col p-0",
+	divider: "m-0 w-full border-divider p-0",
+	footer: "w-full px-4 py-2",
+	footerWrapper: "w-full",
+	header: "w-full px-4 pb-1 pt-2 font-semibold",
+	headerWrapper: "w-full",
+	trigger: ""
+} });
+/**
+* Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)
+*/
+const Popover$1 = ({ children = null, className: _className = void 0, content, contentTestId = void 0, footer = void 0, header = void 0, openControlled = void 0, placement = "top", portalContainer = void 0, shouldBlockScroll = void 0, testId = void 0, triggerButtonProps = void 0 }) => {
+	const className = variantsToClassNames(popoverVariants(), _className, "trigger");
+	return /* @__PURE__ */ jsxs(Popover, {
+		showArrow: true,
+		classNames: className,
+		placement,
+		portalContainer,
+		radius: "sm",
+		shouldBlockScroll,
+		...openControlled ? {
+			isOpen: openControlled.open,
+			onOpenChange: openControlled.setOpen
+		} : {},
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			"data-testid": testId,
+			children: triggerButtonProps ? /* @__PURE__ */ jsx(Button, {
+				className: className.trigger,
+				...triggerButtonProps,
+				children
+			}) : /* @__PURE__ */ jsx("button", {
+				className: className.trigger,
+				children
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			"data-testid": contentTestId,
+			children: [
+				header ? /* @__PURE__ */ jsxs("div", {
+					className: className.headerWrapper,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: className.header,
+						children: header
+					}), /* @__PURE__ */ jsx("hr", { className: className.divider })]
+				}) : null,
+				/* @__PURE__ */ jsx(ScrollShadow_default, {
+					className: className.body,
+					children: content
+				}),
+				footer ? /* @__PURE__ */ jsxs("div", {
+					className: className.footerWrapper,
+					children: [/* @__PURE__ */ jsx("hr", { className: className.divider }), /* @__PURE__ */ jsx("div", {
+						className: className.footer,
+						children: footer
+					})]
+				}) : null
+			]
+		})]
+	});
+};
+//#endregion
+export { Popover$1 as default };
+
+//# sourceMappingURL=Popover.js.map

package/dist/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":["Popover","HeroPopover","HeroPopoverTrigger","HeroPopoverContent","ScrollShadow"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps } from '@heroui/button';\nimport type { PopoverProps as HeroPopoverProps } from '@heroui/popover';\nimport type { ReactNode } from 'react';\n\nimport { Button } from '@heroui/button';\nimport {\n  Popover as HeroPopover,\n  PopoverContent as HeroPopoverContent,\n  PopoverTrigger as HeroPopoverTrigger,\n} from '@heroui/popover';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// popover styling variants\nexport const popoverVariants = tv({\n  slots: {\n    body: 'w-full px-4 py-2',\n    content: 'flex max-h-[80vh] flex-col p-0',\n    divider: 'm-0 w-full border-divider p-0',\n    footer: 'w-full px-4 py-2',\n    footerWrapper: 'w-full',\n    header: 'w-full px-4 pb-1 pt-2 font-semibold',\n    headerWrapper: 'w-full',\n    trigger: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof popoverVariants>;\ntype ClassName = TVClassName<typeof popoverVariants>;\n\nexport interface PopoverProps extends VariantProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** content of the popover */\n  content: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  contentTestId?: string;\n  /** popover footer */\n  footer?: ReactNode;\n  /** Popover title */\n  header?: ReactNode;\n  /** use as controlled component  */\n  openControlled?: { open: boolean; setOpen: (open: boolean) => void };\n  /** placement of the popover relative to its trigger reference */\n  placement?: HeroPopoverProps['placement'];\n  /** The container element in which the overlay portal will be placed. */\n  portalContainer?: HeroPopoverProps['portalContainer'];\n  /** Whether to block scrolling outside the popover */\n  shouldBlockScroll?: boolean;\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/**\n * Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)\n */\nconst Popover = ({\n  children = null,\n  className: _className = undefined,\n  content,\n  contentTestId = undefined,\n  footer = undefined,\n  header = undefined,\n  openControlled = undefined,\n  placement = 'top',\n  portalContainer = undefined,\n  shouldBlockScroll = undefined,\n  testId = undefined,\n  triggerButtonProps = undefined,\n}: PopoverProps) => {\n  // className from slots\n  const variants = popoverVariants();\n  const className = variantsToClassNames(variants, _className, 'trigger');\n\n  return (\n    <HeroPopover\n      showArrow\n      classNames={className}\n      placement={placement}\n      portalContainer={portalContainer}\n      radius=\"sm\"\n      shouldBlockScroll={shouldBlockScroll}\n      {...(openControlled\n        ? { isOpen: openControlled.open, onOpenChange: openControlled.setOpen }\n        : {})}\n    >\n      <HeroPopoverTrigger data-testid={testId}>\n        {/* NOTE: type and aria properties are injected by HeroPopoverTrigger */}\n        {triggerButtonProps ? (\n          // TODO: currently we have to use @heroui/button because\n          // passing ref does not work (even with forwardRef in Button)\n\n          <Button className={className.trigger} {...triggerButtonProps}>\n            {children}\n          </Button>\n        ) : (\n          //  eslint-disable-next-line react/button-has-type\n          <button className={className.trigger}>{children}</button>\n        )}\n      </HeroPopoverTrigger>\n      <HeroPopoverContent data-testid={contentTestId}>\n        {header ? (\n          <div className={className.headerWrapper}>\n            <div className={className.header}>{header}</div>\n            <hr className={className.divider} />\n          </div>\n        ) : null}\n        <ScrollShadow className={className.body}>{content}</ScrollShadow>\n        {footer ? (\n          <div className={className.footerWrapper}>\n            <hr className={className.divider} />\n            <div className={className.footer}>{footer}</div>\n          </div>\n        ) : null}\n      </HeroPopoverContent>\n    </HeroPopover>\n  );\n};\n\nexport default Popover;\n"],"mappings":";;;;;;AAiBA,MAAa,kBAAkB,GAAG,EAChC,OAAO;CACL,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,eAAe;CACf,SAAS;AACX,EACF,CAAC;;;;AA4CD,MAAMA,aAAW,EACf,WAAW,MACX,WAAW,aAAa,KAAA,GACxB,SACA,gBAAgB,KAAA,GAChB,SAAS,KAAA,GACT,SAAS,KAAA,GACT,iBAAiB,KAAA,GACjB,YAAY,OACZ,kBAAkB,KAAA,GAClB,oBAAoB,KAAA,GACpB,SAAS,KAAA,GACT,qBAAqB,KAAA,QACH;CAGlB,MAAM,YAAY,qBADD,gBAC6B,GAAG,YAAY,SAAS;CAEtE,OACE,qBAACC,SAAD;EACE,WAAA;EACA,YAAY;EACD;EACM;EACjB,QAAO;EACY;EACnB,GAAK,iBACD;GAAE,QAAQ,eAAe;GAAM,cAAc,eAAe;EAAQ,IACpE,CAAC;YATP,CAWE,oBAACC,gBAAD;GAAoB,eAAa;aAE9B,qBAIC,oBAAC,QAAD;IAAQ,WAAW,UAAU;IAAS,GAAI;IACvC;GACK,CAAA,IAGR,oBAAC,UAAD;IAAQ,WAAW,UAAU;IAAU;GAAiB,CAAA;EAExC,CAAA,GACpB,qBAACC,gBAAD;GAAoB,eAAa;aAAjC;IACG,SACC,qBAAC,OAAD;KAAK,WAAW,UAAU;eAA1B,CACE,oBAAC,OAAD;MAAK,WAAW,UAAU;gBAAS;KAAY,CAAA,GAC/C,oBAAC,MAAD,EAAI,WAAW,UAAU,QAAU,CAAA,CAChC;SACH;IACJ,oBAACC,sBAAD;KAAc,WAAW,UAAU;eAAO;IAAsB,CAAA;IAC/D,SACC,qBAAC,OAAD;KAAK,WAAW,UAAU;eAA1B,CACE,oBAAC,MAAD,EAAI,WAAW,UAAU,QAAU,CAAA,GACnC,oBAAC,OAAD;MAAK,WAAW,UAAU;gBAAS;KAAY,CAAA,CAC5C;SACH;GACc;IACT;;AAEjB"}

package/dist/Popover/index.cjs

@@ -1,11 +1,12 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Popover = require("./Popover.cjs");
+//#region src/Popover/index.ts
+var Popover_default = require_Popover.default;
+//#endregion
+exports.Popover = require_Popover.default;
+exports.default = Popover_default;
 
-
-var _chunkRPULU7LCcjs = require('../chunk-RPULU7LC.cjs');
-require('../chunk-ITHJ52SN.cjs');
-require('../chunk-AHEA4IJV.cjs');
-
-
-
-exports.Popover = _chunkRPULU7LCcjs.Popover_default; exports.default = _chunkRPULU7LCcjs.Popover_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Popover/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/Popover/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACF,0GAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/Popover/index.cjs"}
+{"version":3,"file":"index.cjs","names":["Popover"],"sources":["../../src/Popover/index.ts"],"sourcesContent":["import Popover from './Popover';\n\nexport type { PopoverProps } from './Popover';\n\nexport { Popover };\n\nexport default Popover;\n"],"mappings":";;;;;;AAMA,IAAA,kBAAeA,gBAAAA"}

package/dist/Popover/index.d.cts

@@ -1,13 +1,2 @@
-import { P as Popover } from '../Popover-DKzS6RUP.cjs';
-export { a as PopoverProps } from '../Popover-DKzS6RUP.cjs';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import 'tailwind-merge';
-import '@fuf-stack/pixel-utils';
-import '@heroui/button';
-import '@heroui/popover';
-import 'react';
-
-
-
-export { Popover, Popover as default };
+import { Popover, PopoverProps } from "./Popover.cjs";
+export { Popover, Popover as default, type PopoverProps };

package/dist/Popover/index.d.ts

@@ -1,13 +1,2 @@
-import { P as Popover } from '../Popover-DKzS6RUP.js';
-export { a as PopoverProps } from '../Popover-DKzS6RUP.js';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import 'tailwind-merge';
-import '@fuf-stack/pixel-utils';
-import '@heroui/button';
-import '@heroui/popover';
-import 'react';
-
-
-
-export { Popover, Popover as default };
+import { Popover, PopoverProps } from "./Popover.js";
+export { Popover, Popover as default, type PopoverProps };

package/dist/Popover/index.js

@@ -1,11 +1,7 @@
-import {
-  Popover_default,
-  Popover_default2
-} from "../chunk-CUNIBDOS.js";
-import "../chunk-ZLSX6FH3.js";
-import "../chunk-OAIRL2FN.js";
-export {
-  Popover_default as Popover,
-  Popover_default2 as default
-};
+import Popover from "./Popover.js";
+//#region src/Popover/index.ts
+var Popover_default = Popover;
+//#endregion
+export { Popover, Popover_default as default };
+
 //# sourceMappingURL=index.js.map

package/dist/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Popover/index.ts"],"sourcesContent":["import Popover from './Popover';\n\nexport type { PopoverProps } from './Popover';\n\nexport { Popover };\n\nexport default Popover;\n"],"mappings":";;AAMA,IAAA,kBAAe"}

package/dist/Progress/Progress.cjs

@@ -0,0 +1,57 @@
+require("../_virtual/_rolldown/runtime.cjs");
+const require_useIsInitialRenderCycle = require("../hooks/useIsInitialRenderCycle/useIsInitialRenderCycle.cjs");
+let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _heroui_progress = require("@heroui/progress");
+//#region src/Progress/Progress.tsx
+const progressVariants = (0, _fuf_stack_pixel_utils.tv)({
+	slots: {
+		base: "",
+		indicator: "",
+		label: "",
+		labelWrapper: "",
+		track: "",
+		value: ""
+	},
+	variants: { color: {
+		danger: { indicator: "bg-danger" },
+		default: { indicator: "bg-default-400" },
+		info: { indicator: "bg-info" },
+		primary: { indicator: "bg-primary" },
+		secondary: { indicator: "bg-secondary" },
+		success: { indicator: "bg-success" },
+		warning: { indicator: "bg-warning" }
+	} }
+});
+/** formats percent with percent sign */
+const defaultFormat = (percent = 0) => {
+	return `${percent}%`;
+};
+/**
+* Progress component based on [HeroUI Progress](https://www.heroui.com//docs/components/progress)
+*/
+const Progress = ({ ariaLabel = "progress", className = void 0, color = "info", disableAnimation = false, disableFinishedState = false, format = defaultFormat, indeterminate = false, label = void 0, percent, showValueLabel = false, size = "md", testId = void 0 }) => {
+	const isInitialRenderCycle = require_useIsInitialRenderCycle.useIsInitialRenderCycle();
+	const isFinished = percent >= 100 && !disableFinishedState;
+	let progressColor = color;
+	if (isFinished) progressColor = "success";
+	const classNames = (0, _fuf_stack_pixel_utils.variantsToClassNames)(progressVariants({ color: progressColor }), className, "base");
+	const value = format(percent);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_progress.Progress, {
+		"aria-label": ariaLabel,
+		classNames,
+		"data-testid": testId,
+		disableAnimation: isInitialRenderCycle || disableAnimation,
+		isIndeterminate: indeterminate,
+		label,
+		showValueLabel,
+		size,
+		value: percent || 0,
+		valueLabel: !!percent && value
+	});
+};
+//#endregion
+exports.default = Progress;
+exports.progressVariants = progressVariants;
+
+//# sourceMappingURL=Progress.cjs.map

package/dist/Progress/Progress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.cjs","names":["useIsInitialRenderCycle","HeroProgress"],"sources":["../../src/Progress/Progress.tsx"],"sourcesContent":["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/useIsInitialRenderCycle';\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"],"mappings":";;;;;;AAUA,MAAa,oBAAA,GAAA,uBAAA,IAAsB;CACjC,OAAO;EAEL,MAAM;EAEN,WAAW;EAEX,OAAO;EAEP,cAAc;EAEd,OAAO;EAEP,OAAO;CACT;CACA,UAAU,EAER,OAAO;EACL,QAAQ,EACN,WAAW,YACb;EACA,SAAS,EACP,WAAW,iBACb;EACA,MAAM,EACJ,WAAW,UACb;EACA,SAAS,EACP,WAAW,aACb;EACA,WAAW,EACT,WAAW,eACb;EACA,SAAS,EACP,WAAW,aACb;EACA,SAAS,EACP,WAAW,aACb;CACF,EACF;AACF,CAAC;;AAiCD,MAAM,iBAAiB,UAAU,MAAM;CACrC,OAAO,GAAG,QAAQ;AACpB;;;;AAKA,MAAM,YAAY,EAChB,YAAY,YACZ,YAAY,KAAA,GACZ,QAAQ,QACR,mBAAmB,OACnB,uBAAuB,OACvB,SAAS,eACT,gBAAgB,OAChB,QAAQ,KAAA,GACR,SACA,iBAAiB,OACjB,OAAO,MACP,SAAS,KAAA,QACU;CAEnB,MAAM,uBAAuBA,gCAAAA,wBAAwB;CAGrD,MAAM,aAAa,WAAW,OAAO,CAAC;CAGtC,IAAI,gBAAuC;CAC3C,IAAI,YACF,gBAAgB;CAIlB,MAAM,cAAA,GAAA,uBAAA,sBADW,iBAAiB,EAAE,OAAO,cAAc,CACV,GAAG,WAAW,MAAM;CAEnE,MAAM,QAAQ,OAAO,OAAO;CAE5B,OACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EACE,cAAY;EACA;EACZ,eAAa;EACb,kBAAkB,wBAAwB;EAC1C,iBAAiB;EACV;EACS;EACV;EACN,OAAO,WAAW;EAClB,YAAY,CAAC,CAAC,WAAW;CAC1B,CAAA;AAEL"}

package/dist/Progress/Progress.d.cts

@@ -0,0 +1,146 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { ReactNode } from "react";
+
+//#region src/Progress/Progress.d.ts
+declare const progressVariants: import("tailwind-variants").TVReturnType<{
+  color: {
+    danger: {
+      indicator: string;
+    };
+    default: {
+      indicator: string;
+    };
+    info: {
+      indicator: string;
+    };
+    primary: {
+      indicator: string;
+    };
+    secondary: {
+      indicator: string;
+    };
+    success: {
+      indicator: string;
+    };
+    warning: {
+      indicator: string;
+    };
+  };
+}, {
+  base: string;
+  indicator: string;
+  label: string;
+  labelWrapper: string;
+  track: string;
+  value: string;
+}, undefined, {
+  color: {
+    danger: {
+      indicator: string;
+    };
+    default: {
+      indicator: string;
+    };
+    info: {
+      indicator: string;
+    };
+    primary: {
+      indicator: string;
+    };
+    secondary: {
+      indicator: string;
+    };
+    success: {
+      indicator: string;
+    };
+    warning: {
+      indicator: string;
+    };
+  };
+}, {
+  base: string;
+  indicator: string;
+  label: string;
+  labelWrapper: string;
+  track: string;
+  value: string;
+}, import("tailwind-variants").TVReturnType<{
+  color: {
+    danger: {
+      indicator: string;
+    };
+    default: {
+      indicator: string;
+    };
+    info: {
+      indicator: string;
+    };
+    primary: {
+      indicator: string;
+    };
+    secondary: {
+      indicator: string;
+    };
+    success: {
+      indicator: string;
+    };
+    warning: {
+      indicator: string;
+    };
+  };
+}, {
+  base: string;
+  indicator: string;
+  label: string;
+  labelWrapper: string;
+  track: string;
+  value: string;
+}, undefined, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof progressVariants>;
+type ClassName = TVClassName<typeof progressVariants>;
+interface ProgressProps extends VariantProps {
+  /** sets HTML aria-label attribute */
+  ariaLabel?: string;
+  /** CSS class name */
+  className?: ClassName;
+  /** color of the progress bar */
+  color?: VariantProps['color'];
+  /** disables all animations */
+  disableAnimation?: boolean;
+  /** disables special finished state (checkmark icon and success color) */
+  disableFinishedState?: boolean;
+  /** function to format the progress value */
+  format?: (percent: number) => ReactNode;
+  /** shows indeterminate progress animation */
+  indeterminate?: boolean;
+  /** label of the progress bar */
+  label?: ReactNode;
+  /** percentage / progress of the progress bar */
+  percent: number;
+  /** whether to show the value label */
+  showValueLabel?: boolean;
+  /** size of the progress bar */
+  size?: 'sm' | 'md' | 'lg';
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+}
+/**
+ * Progress component based on [HeroUI Progress](https://www.heroui.com//docs/components/progress)
+ */
+declare const Progress: ({
+  ariaLabel,
+  className,
+  color,
+  disableAnimation,
+  disableFinishedState,
+  format,
+  indeterminate,
+  label,
+  percent,
+  showValueLabel,
+  size,
+  testId
+}: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Progress, ProgressProps, progressVariants };
+//# sourceMappingURL=Progress.d.cts.map

package/dist/Progress/Progress.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.cts","names":[],"sources":["../../src/Progress/Progress.tsx"],"mappings":";;;;cAUa,gBAAA,8BAAgB,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CjB,YAAA,GAAe,OAAO,QAAQ,gBAAA;AAAA,KACrC,SAAA,GAAY,WAAW,QAAQ,gBAAA;AAAA,UAEnB,aAAA,SAAsB,YAAA;EAMrC;EAJA,SAAA;EAMA;EAJA,SAAA,GAAY,SAAA;EAQZ;EANA,KAAA,GAAQ,YAAA;EAMsB;EAJ9B,gBAAA;EAQA;EANA,oBAAA;EAQA;EANA,MAAA,IAAU,OAAA,aAAoB,SAAA;EAU9B;EARA,aAAA;EAUM;EARN,KAAA,GAAQ,SAAA;EAmBJ;EAjBJ,OAAA;;EAEA,cAAA;EAegB;EAbhB,IAAA;EAagB;EAXhB,MAAA;AAAA;;;;cAWI,QAAA;EAAY,SAAA;EAAA,SAAA;EAAA,KAAA;EAAA,gBAAA;EAAA,oBAAA;EAAA,MAAA;EAAA,aAAA;EAAA,KAAA;EAAA,OAAA;EAAA,cAAA;EAAA,IAAA;EAAA;AAAA,GAaf,aAAA,iCAAa,GAAA,CAAA,OAAA"}

package/dist/Progress/Progress.d.ts

@@ -0,0 +1,146 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { ReactNode } from "react";
+
+//#region src/Progress/Progress.d.ts
+declare const progressVariants: import("tailwind-variants").TVReturnType<{
+  color: {
+    danger: {
+      indicator: string;
+    };
+    default: {
+      indicator: string;
+    };
+    info: {
+      indicator: string;
+    };
+    primary: {
+      indicator: string;
+    };
+    secondary: {
+      indicator: string;
+    };
+    success: {
+      indicator: string;
+    };
+    warning: {
+      indicator: string;
+    };
+  };
+}, {
+  base: string;
+  indicator: string;
+  label: string;
+  labelWrapper: string;
+  track: string;
+  value: string;
+}, undefined, {
+  color: {
+    danger: {
+      indicator: string;
+    };
+    default: {
+      indicator: string;
+    };
+    info: {
+      indicator: string;
+    };
+    primary: {
+      indicator: string;
+    };
+    secondary: {
+      indicator: string;
+    };
+    success: {
+      indicator: string;
+    };
+    warning: {
+      indicator: string;
+    };
+  };
+}, {
+  base: string;
+  indicator: string;
+  label: string;
+  labelWrapper: string;
+  track: string;
+  value: string;
+}, import("tailwind-variants").TVReturnType<{
+  color: {
+    danger: {
+      indicator: string;
+    };
+    default: {
+      indicator: string;
+    };
+    info: {
+      indicator: string;
+    };
+    primary: {
+      indicator: string;
+    };
+    secondary: {
+      indicator: string;
+    };
+    success: {
+      indicator: string;
+    };
+    warning: {
+      indicator: string;
+    };
+  };
+}, {
+  base: string;
+  indicator: string;
+  label: string;
+  labelWrapper: string;
+  track: string;
+  value: string;
+}, undefined, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof progressVariants>;
+type ClassName = TVClassName<typeof progressVariants>;
+interface ProgressProps extends VariantProps {
+  /** sets HTML aria-label attribute */
+  ariaLabel?: string;
+  /** CSS class name */
+  className?: ClassName;
+  /** color of the progress bar */
+  color?: VariantProps['color'];
+  /** disables all animations */
+  disableAnimation?: boolean;
+  /** disables special finished state (checkmark icon and success color) */
+  disableFinishedState?: boolean;
+  /** function to format the progress value */
+  format?: (percent: number) => ReactNode;
+  /** shows indeterminate progress animation */
+  indeterminate?: boolean;
+  /** label of the progress bar */
+  label?: ReactNode;
+  /** percentage / progress of the progress bar */
+  percent: number;
+  /** whether to show the value label */
+  showValueLabel?: boolean;
+  /** size of the progress bar */
+  size?: 'sm' | 'md' | 'lg';
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+}
+/**
+ * Progress component based on [HeroUI Progress](https://www.heroui.com//docs/components/progress)
+ */
+declare const Progress: ({
+  ariaLabel,
+  className,
+  color,
+  disableAnimation,
+  disableFinishedState,
+  format,
+  indeterminate,
+  label,
+  percent,
+  showValueLabel,
+  size,
+  testId
+}: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Progress, ProgressProps, progressVariants };
+//# sourceMappingURL=Progress.d.ts.map

package/dist/Progress/Progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","names":[],"sources":["../../src/Progress/Progress.tsx"],"mappings":";;;;cAUa,gBAAA,8BAAgB,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CjB,YAAA,GAAe,OAAO,QAAQ,gBAAA;AAAA,KACrC,SAAA,GAAY,WAAW,QAAQ,gBAAA;AAAA,UAEnB,aAAA,SAAsB,YAAA;EAMrC;EAJA,SAAA;EAMA;EAJA,SAAA,GAAY,SAAA;EAQZ;EANA,KAAA,GAAQ,YAAA;EAMsB;EAJ9B,gBAAA;EAQA;EANA,oBAAA;EAQA;EANA,MAAA,IAAU,OAAA,aAAoB,SAAA;EAU9B;EARA,aAAA;EAUM;EARN,KAAA,GAAQ,SAAA;EAmBJ;EAjBJ,OAAA;;EAEA,cAAA;EAegB;EAbhB,IAAA;EAagB;EAXhB,MAAA;AAAA;;;;cAWI,QAAA;EAAY,SAAA;EAAA,SAAA;EAAA,KAAA;EAAA,gBAAA;EAAA,oBAAA;EAAA,MAAA;EAAA,aAAA;EAAA,KAAA;EAAA,OAAA;EAAA,cAAA;EAAA,IAAA;EAAA;AAAA,GAaf,aAAA,iCAAa,GAAA,CAAA,OAAA"}

package/dist/Progress/Progress.js

@@ -0,0 +1,55 @@
+import { useIsInitialRenderCycle } from "../hooks/useIsInitialRenderCycle/useIsInitialRenderCycle.js";
+import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx } from "react/jsx-runtime";
+import { Progress } from "@heroui/progress";
+//#region src/Progress/Progress.tsx
+const progressVariants = tv({
+	slots: {
+		base: "",
+		indicator: "",
+		label: "",
+		labelWrapper: "",
+		track: "",
+		value: ""
+	},
+	variants: { color: {
+		danger: { indicator: "bg-danger" },
+		default: { indicator: "bg-default-400" },
+		info: { indicator: "bg-info" },
+		primary: { indicator: "bg-primary" },
+		secondary: { indicator: "bg-secondary" },
+		success: { indicator: "bg-success" },
+		warning: { indicator: "bg-warning" }
+	} }
+});
+/** formats percent with percent sign */
+const defaultFormat = (percent = 0) => {
+	return `${percent}%`;
+};
+/**
+* Progress component based on [HeroUI Progress](https://www.heroui.com//docs/components/progress)
+*/
+const Progress$1 = ({ ariaLabel = "progress", className = void 0, color = "info", disableAnimation = false, disableFinishedState = false, format = defaultFormat, indeterminate = false, label = void 0, percent, showValueLabel = false, size = "md", testId = void 0 }) => {
+	const isInitialRenderCycle = useIsInitialRenderCycle();
+	const isFinished = percent >= 100 && !disableFinishedState;
+	let progressColor = color;
+	if (isFinished) progressColor = "success";
+	const classNames = variantsToClassNames(progressVariants({ color: progressColor }), className, "base");
+	const value = format(percent);
+	return /* @__PURE__ */ jsx(Progress, {
+		"aria-label": ariaLabel,
+		classNames,
+		"data-testid": testId,
+		disableAnimation: isInitialRenderCycle || disableAnimation,
+		isIndeterminate: indeterminate,
+		label,
+		showValueLabel,
+		size,
+		value: percent || 0,
+		valueLabel: !!percent && value
+	});
+};
+//#endregion
+export { Progress$1 as default, progressVariants };
+
+//# sourceMappingURL=Progress.js.map

package/dist/Progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","names":["Progress","HeroProgress"],"sources":["../../src/Progress/Progress.tsx"],"sourcesContent":["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/useIsInitialRenderCycle';\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"],"mappings":";;;;;AAUA,MAAa,mBAAmB,GAAG;CACjC,OAAO;EAEL,MAAM;EAEN,WAAW;EAEX,OAAO;EAEP,cAAc;EAEd,OAAO;EAEP,OAAO;CACT;CACA,UAAU,EAER,OAAO;EACL,QAAQ,EACN,WAAW,YACb;EACA,SAAS,EACP,WAAW,iBACb;EACA,MAAM,EACJ,WAAW,UACb;EACA,SAAS,EACP,WAAW,aACb;EACA,WAAW,EACT,WAAW,eACb;EACA,SAAS,EACP,WAAW,aACb;EACA,SAAS,EACP,WAAW,aACb;CACF,EACF;AACF,CAAC;;AAiCD,MAAM,iBAAiB,UAAU,MAAM;CACrC,OAAO,GAAG,QAAQ;AACpB;;;;AAKA,MAAMA,cAAY,EAChB,YAAY,YACZ,YAAY,KAAA,GACZ,QAAQ,QACR,mBAAmB,OACnB,uBAAuB,OACvB,SAAS,eACT,gBAAgB,OAChB,QAAQ,KAAA,GACR,SACA,iBAAiB,OACjB,OAAO,MACP,SAAS,KAAA,QACU;CAEnB,MAAM,uBAAuB,wBAAwB;CAGrD,MAAM,aAAa,WAAW,OAAO,CAAC;CAGtC,IAAI,gBAAuC;CAC3C,IAAI,YACF,gBAAgB;CAIlB,MAAM,aAAa,qBADF,iBAAiB,EAAE,OAAO,cAAc,CACV,GAAG,WAAW,MAAM;CAEnE,MAAM,QAAQ,OAAO,OAAO;CAE5B,OACE,oBAACC,UAAD;EACE,cAAY;EACA;EACZ,eAAa;EACb,kBAAkB,wBAAwB;EAC1C,iBAAiB;EACV;EACS;EACV;EACN,OAAO,WAAW;EAClB,YAAY,CAAC,CAAC,WAAW;CAC1B,CAAA;AAEL"}

package/dist/Progress/index.cjs

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Progress = require("./Progress.cjs");
+//#region src/Progress/index.ts
+var Progress_default = require_Progress.default;
+//#endregion
+exports.Progress = require_Progress.default;
+exports.default = Progress_default;
+exports.progressVariants = require_Progress.progressVariants;
 
-
-
-var _chunkK5VPNWIJcjs = require('../chunk-K5VPNWIJ.cjs');
-require('../chunk-ON3PVFZY.cjs');
-require('../chunk-AHEA4IJV.cjs');
-
-
-
-
-exports.Progress = _chunkK5VPNWIJcjs.Progress_default; exports.default = _chunkK5VPNWIJcjs.Progress_default2; exports.progressVariants = _chunkK5VPNWIJcjs.progressVariants;
 //# sourceMappingURL=index.cjs.map

package/dist/Progress/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/Progress/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACF,4KAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/Progress/index.cjs"}
+{"version":3,"file":"index.cjs","names":["Progress"],"sources":["../../src/Progress/index.ts"],"sourcesContent":["import Progress, { progressVariants } from './Progress';\n\nexport type { ProgressProps } from './Progress';\n\nexport { Progress, progressVariants };\n\nexport default Progress;\n"],"mappings":";;;;;;AAMA,IAAA,mBAAeA,iBAAAA"}

package/dist/Progress/index.d.cts

@@ -1,10 +1,2 @@
-import { P as Progress } from '../Progress-Deph-HCf.cjs';
-export { a as ProgressProps, p as progressVariants } from '../Progress-Deph-HCf.cjs';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { Progress, Progress as default };
+import { Progress, ProgressProps, progressVariants } from "./Progress.cjs";
+export { Progress, Progress as default, type ProgressProps, progressVariants };