@fuf-stack/pixels 1.9.0 → 1.10.0

package/dist/ProgressCircular/ProgressCircular.js

@@ -0,0 +1,100 @@
+import { useIsInitialRenderCycle } from "../hooks/useIsInitialRenderCycle/useIsInitialRenderCycle.js";
+import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx } from "react/jsx-runtime";
+import { circularProgress } from "@heroui/theme";
+import { FaCheck, FaTimes } from "react-icons/fa";
+import { CircularProgress } from "@heroui/progress";
+//#region src/ProgressCircular/ProgressCircular.tsx
+const progressCircularVariants = tv({
+	slots: {
+		base: "",
+		indicator: "",
+		label: "",
+		svg: "",
+		svgWrapper: "",
+		track: "stroke-default-300",
+		value: ""
+	},
+	variants: {
+		color: {
+			info: { svg: "text-info" },
+			...circularProgress.variants.color
+		},
+		hasError: { true: { svg: "text-danger" } },
+		isFinished: { true: { svg: "text-success" } },
+		size: {
+			xs: {
+				svg: "h-10 w-10",
+				value: "text-[0.6rem]"
+			},
+			sm: {
+				svg: "h-12 w-12",
+				value: "text-xs"
+			},
+			md: {
+				svg: "h-16 w-16",
+				value: "text-md"
+			},
+			lg: {
+				svg: "h-20 w-20",
+				value: "text-lg"
+			},
+			xl: {
+				svg: "h-24 w-24",
+				value: "text-xl"
+			}
+		}
+	}
+});
+/** formats percent with percent sign */
+const defaultFormat = (percent = 0) => {
+	return `${percent}%`;
+};
+/**
+* ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)
+*/
+const ProgressCircular = ({ ariaLabel = "progress", className = void 0, format = defaultFormat, hasError = false, percent, disableAnimation = false, disableFinishedState = false, size = "md", color = "info", strokeWidth: strokeWidthProp = void 0 }) => {
+	const isInitialRenderCycle = useIsInitialRenderCycle();
+	const isFinished = !hasError && percent >= 100 && !disableFinishedState;
+	const classNames = variantsToClassNames(progressCircularVariants({
+		color,
+		hasError,
+		isFinished,
+		size
+	}), className, "base");
+	let value = format(percent);
+	let strokeWidth = strokeWidthProp;
+	if (!strokeWidth) switch (size) {
+		case "xs":
+			strokeWidth = 2;
+			break;
+		case "sm":
+			strokeWidth = 1.8;
+			break;
+		default:
+			strokeWidth = 1.6;
+			break;
+	}
+	let progressColor = color;
+	if (hasError) {
+		progressColor = "danger";
+		value = /* @__PURE__ */ jsx(FaTimes, { className: "text-danger" });
+	} else if (isFinished) {
+		progressColor = "success";
+		value = /* @__PURE__ */ jsx(FaCheck, { className: "text-success" });
+	}
+	return /* @__PURE__ */ jsx(CircularProgress, {
+		showValueLabel: true,
+		"aria-label": ariaLabel,
+		classNames,
+		color: Object.keys(circularProgress.variants.color).includes(color) ? progressColor : void 0,
+		disableAnimation: isInitialRenderCycle || disableAnimation,
+		strokeWidth,
+		value: percent || 0,
+		valueLabel: value
+	});
+};
+//#endregion
+export { ProgressCircular as default, progressCircularVariants };
+
+//# sourceMappingURL=ProgressCircular.js.map

package/dist/ProgressCircular/ProgressCircular.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircular.js","names":["heroCircularProgressVariants","HeroCircularProgress"],"sources":["../../src/ProgressCircular/ProgressCircular.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { CircularProgressProps as HeroCircularProgressProps } from '@heroui/progress';\nimport type { ReactNode } from 'react';\n\nimport { FaCheck, FaTimes } from 'react-icons/fa';\n\nimport { CircularProgress as HeroCircularProgress } from '@heroui/progress';\nimport { circularProgress as heroCircularProgressVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks/useIsInitialRenderCycle';\n\nexport const progressCircularVariants = tv({\n  slots: {\n    // wrapper around the whole component\n    base: '',\n    // indicator of the circle (finished part)\n    indicator: '',\n    // label next to the svgWrapper\n    label: '',\n    // wrapper for the circle\n    svg: '',\n    // wrapper around progress svg and value span\n    svgWrapper: '',\n    // track of the circle (not finished part)\n    track: 'stroke-default-300',\n    // outer span next to the svg\n    value: '',\n  },\n  variants: {\n    color: {\n      info: {\n        svg: 'text-info',\n      },\n      // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n      ...heroCircularProgressVariants.variants.color,\n    },\n    hasError: {\n      true: {\n        svg: 'text-danger',\n      },\n    },\n    isFinished: {\n      true: {\n        svg: 'text-success',\n      },\n    },\n    size: {\n      xs: {\n        svg: 'h-10 w-10',\n        value: 'text-[0.6rem]',\n      },\n      sm: {\n        svg: 'h-12 w-12',\n        value: 'text-xs',\n      },\n      md: {\n        svg: 'h-16 w-16',\n        value: 'text-md',\n      },\n      lg: {\n        svg: 'h-20 w-20',\n        value: 'text-lg',\n      },\n      xl: {\n        svg: 'h-24 w-24',\n        value: 'text-xl',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof progressCircularVariants>;\ntype ClassName = TVClassName<typeof progressCircularVariants>;\n\nexport interface ProgressCircularProps extends VariantProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** color options */\n  color?: VariantProps['color'];\n  /** disables all animations */\n  disableAnimation?: boolean;\n  /** disables special finished state (checkmark icon and success color) */\n  disableFinishedState?: boolean;\n  /** formats the display value of the progress in the center */\n  format?: (percent?: number) => ReactNode;\n  /** enables error version */\n  hasError?: boolean;\n  /** percentage / progress of the circular progress bar */\n  percent: number;\n  /** size options */\n  size?: VariantProps['size'];\n  /** stroke width of the circular progress bar */\n  strokeWidth?: number;\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => {\n  return `${percent}%`;\n};\n\n/**\n * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)\n */\nconst ProgressCircular = ({\n  ariaLabel = 'progress',\n  className = undefined,\n  format = defaultFormat,\n  hasError = false,\n  percent,\n  disableAnimation = false,\n  disableFinishedState = false,\n  size = 'md',\n  color = 'info',\n  strokeWidth: strokeWidthProp = undefined,\n}: ProgressCircularProps) => {\n  // used to disable animation on initial render cycle\n  const isInitialRenderCycle = useIsInitialRenderCycle();\n\n  // Apply finished state if percent is 100 or more and not disabled by disableFinishedState\n  const isFinished = !hasError && percent >= 100 && !disableFinishedState;\n\n  const variants = progressCircularVariants({\n    color,\n    hasError,\n    isFinished,\n    size,\n  });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // format value\n  let value = format(percent);\n\n  let strokeWidth = strokeWidthProp;\n  // set strokeWidth based on size prop when no strokeWidth provided\n  if (!strokeWidth) {\n    switch (size) {\n      case 'xs':\n        strokeWidth = 2;\n        break;\n      case 'sm':\n        strokeWidth = 1.8;\n        break;\n      default:\n        strokeWidth = 1.6;\n        break;\n    }\n  }\n\n  // handle special states\n  let progressColor: VariantProps['color'] = color;\n  if (hasError) {\n    progressColor = 'danger';\n    value = <FaTimes className=\"text-danger\" />;\n  } else if (isFinished) {\n    progressColor = 'success';\n    value = <FaCheck className=\"text-success\" />;\n  }\n\n  // pass only HeroUI colors as props\n  const heroUiColor = Object.keys(\n    heroCircularProgressVariants.variants.color,\n  ).includes(color)\n    ? (progressColor as HeroCircularProgressProps['color'])\n    : undefined;\n\n  return (\n    <HeroCircularProgress\n      showValueLabel\n      aria-label={ariaLabel}\n      classNames={classNames}\n      color={heroUiColor}\n      disableAnimation={isInitialRenderCycle || disableAnimation}\n      strokeWidth={strokeWidth}\n      // INFO: we do NOT use spinner animation when no percent provided\n      value={percent || 0}\n      valueLabel={value}\n    />\n  );\n};\n\nexport default ProgressCircular;\n"],"mappings":";;;;;;;AAaA,MAAa,2BAA2B,GAAG;CACzC,OAAO;EAEL,MAAM;EAEN,WAAW;EAEX,OAAO;EAEP,KAAK;EAEL,YAAY;EAEZ,OAAO;EAEP,OAAO;CACT;CACA,UAAU;EACR,OAAO;GACL,MAAM,EACJ,KAAK,YACP;GAEA,GAAGA,iBAA6B,SAAS;EAC3C;EACA,UAAU,EACR,MAAM,EACJ,KAAK,cACP,EACF;EACA,YAAY,EACV,MAAM,EACJ,KAAK,eACP,EACF;EACA,MAAM;GACJ,IAAI;IACF,KAAK;IACL,OAAO;GACT;GACA,IAAI;IACF,KAAK;IACL,OAAO;GACT;GACA,IAAI;IACF,KAAK;IACL,OAAO;GACT;GACA,IAAI;IACF,KAAK;IACL,OAAO;GACT;GACA,IAAI;IACF,KAAK;IACL,OAAO;GACT;EACF;CACF;AACF,CAAC;;AA6BD,MAAM,iBAAiB,UAAU,MAAM;CACrC,OAAO,GAAG,QAAQ;AACpB;;;;AAKA,MAAM,oBAAoB,EACxB,YAAY,YACZ,YAAY,KAAA,GACZ,SAAS,eACT,WAAW,OACX,SACA,mBAAmB,OACnB,uBAAuB,OACvB,OAAO,MACP,QAAQ,QACR,aAAa,kBAAkB,KAAA,QACJ;CAE3B,MAAM,uBAAuB,wBAAwB;CAGrD,MAAM,aAAa,CAAC,YAAY,WAAW,OAAO,CAAC;CAQnD,MAAM,aAAa,qBANF,yBAAyB;EACxC;EACA;EACA;EACA;CACF,CAC+C,GAAG,WAAW,MAAM;CAGnE,IAAI,QAAQ,OAAO,OAAO;CAE1B,IAAI,cAAc;CAElB,IAAI,CAAC,aACH,QAAQ,MAAR;EACE,KAAK;GACH,cAAc;GACd;EACF,KAAK;GACH,cAAc;GACd;EACF;GACE,cAAc;GACd;CACJ;CAIF,IAAI,gBAAuC;CAC3C,IAAI,UAAU;EACZ,gBAAgB;EAChB,QAAQ,oBAAC,SAAD,EAAS,WAAU,cAAe,CAAA;CAC5C,OAAO,IAAI,YAAY;EACrB,gBAAgB;EAChB,QAAQ,oBAAC,SAAD,EAAS,WAAU,eAAgB,CAAA;CAC7C;CASA,OACE,oBAACC,kBAAD;EACE,gBAAA;EACA,cAAY;EACA;EACZ,OAXgB,OAAO,KACzBD,iBAA6B,SAAS,KACxC,EAAE,SAAS,KAAK,IACX,gBACD,KAAA;EAQA,kBAAkB,wBAAwB;EAC7B;EAEb,OAAO,WAAW;EAClB,YAAY;CACb,CAAA;AAEL"}

package/dist/ProgressCircular/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_ProgressCircular = require("./ProgressCircular.cjs");
+//#region src/ProgressCircular/index.ts
+var ProgressCircular_default = require_ProgressCircular.default;
+//#endregion
+exports.ProgressCircular = require_ProgressCircular.default;
+exports.default = ProgressCircular_default;
+exports.progressCircularVariants = require_ProgressCircular.progressCircularVariants;
 
-
-
-var _chunkFQJ32476cjs = require('../chunk-FQJ32476.cjs');
-require('../chunk-ON3PVFZY.cjs');
-require('../chunk-AHEA4IJV.cjs');
-
-
-
-
-exports.ProgressCircular = _chunkFQJ32476cjs.ProgressCircular_default; exports.default = _chunkFQJ32476cjs.ProgressCircular_default2; exports.progressCircularVariants = _chunkFQJ32476cjs.progressCircularVariants;
 //# sourceMappingURL=index.cjs.map

package/dist/ProgressCircular/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/ProgressCircular/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACF,oNAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/ProgressCircular/index.cjs"}
+{"version":3,"file":"index.cjs","names":["ProgressCircular"],"sources":["../../src/ProgressCircular/index.ts"],"sourcesContent":["import ProgressCircular, { progressCircularVariants } from './ProgressCircular';\n\nexport type { ProgressCircularProps } from './ProgressCircular';\n\nexport { ProgressCircular, progressCircularVariants };\n\nexport default ProgressCircular;\n"],"mappings":";;;;;;AAMA,IAAA,2BAAeA,yBAAAA"}

package/dist/ProgressCircular/index.d.cts

@@ -1,10 +1,2 @@
-import { P as ProgressCircular } from '../ProgressCircular-CkZsOW4R.cjs';
-export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-CkZsOW4R.cjs';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { ProgressCircular, ProgressCircular as default };
+import { ProgressCircular, ProgressCircularProps, progressCircularVariants } from "./ProgressCircular.cjs";
+export { ProgressCircular, ProgressCircular as default, type ProgressCircularProps, progressCircularVariants };

package/dist/ProgressCircular/index.d.ts

@@ -1,10 +1,2 @@
-import { P as ProgressCircular } from '../ProgressCircular-CkZsOW4R.js';
-export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-CkZsOW4R.js';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { ProgressCircular, ProgressCircular as default };
+import { ProgressCircular, ProgressCircularProps, progressCircularVariants } from "./ProgressCircular.js";
+export { ProgressCircular, ProgressCircular as default, type ProgressCircularProps, progressCircularVariants };

package/dist/ProgressCircular/index.js

@@ -1,13 +1,7 @@
-import {
-  ProgressCircular_default,
-  ProgressCircular_default2,
-  progressCircularVariants
-} from "../chunk-4SBEERL5.js";
-import "../chunk-GKYJUGD4.js";
-import "../chunk-OAIRL2FN.js";
-export {
-  ProgressCircular_default as ProgressCircular,
-  ProgressCircular_default2 as default,
-  progressCircularVariants
-};
+import ProgressCircular, { progressCircularVariants } from "./ProgressCircular.js";
+//#region src/ProgressCircular/index.ts
+var ProgressCircular_default = ProgressCircular;
+//#endregion
+export { ProgressCircular, ProgressCircular_default as default, progressCircularVariants };
+
 //# sourceMappingURL=index.js.map

package/dist/ProgressCircular/index.js.map

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

package/dist/ScrollShadow/ScrollShadow.cjs

@@ -0,0 +1,22 @@
+require("../_virtual/_rolldown/runtime.cjs");
+let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _heroui_scroll_shadow = require("@heroui/scroll-shadow");
+//#region src/ScrollShadow/ScrollShadow.tsx
+/**
+* Scroll Shadow component based on [HeroUI Scroll Shadow](https://www.heroui.com//docs/components/scroll-shadow)
+*/
+var ScrollShadow_default = ({ children = null, className = void 0, hideScrollBar = false, orientation = "vertical", size = 40, testId = void 0 }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_scroll_shadow.ScrollShadow, {
+		className: (0, _fuf_stack_pixel_utils.cn)(className),
+		"data-testid": testId,
+		hideScrollBar,
+		orientation,
+		size,
+		children
+	});
+};
+//#endregion
+exports.default = ScrollShadow_default;
+
+//# sourceMappingURL=ScrollShadow.cjs.map

package/dist/ScrollShadow/ScrollShadow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollShadow.cjs","names":["ScrollShadow"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;AAwBA,IAAA,wBAAgB,EACd,WAAW,MACX,YAAY,KAAA,GACZ,gBAAgB,OAChB,cAAc,YACd,OAAO,IACP,SAAS,KAAA,QACc;CACvB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,cAAD;EACE,YAAA,GAAA,uBAAA,IAAc,SAAS;EACvB,eAAa;EACE;EACF;EACP;EAEL;CACW,CAAA;AAElB"}

package/dist/ScrollShadow/ScrollShadow.d.cts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+
+//#region src/ScrollShadow/ScrollShadow.d.ts
+interface ScrollShadowProps {
+  /** child components */
+  children?: ReactNode;
+  /** CSS class name */
+  className?: string | string[];
+  /** Hides the scrollbar */
+  hideScrollBar?: boolean;
+  /** Orientation of the scroll shadow */
+  orientation?: 'horizontal' | 'vertical';
+  /** Shadow size in pixels */
+  size?: number;
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+}
+/**
+ * Scroll Shadow component based on [HeroUI Scroll Shadow](https://www.heroui.com//docs/components/scroll-shadow)
+ */
+declare const _default: ({
+  children,
+  className,
+  hideScrollBar,
+  orientation,
+  size,
+  testId
+}: ScrollShadowProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { ScrollShadowProps, _default };
+//# sourceMappingURL=ScrollShadow.d.cts.map

package/dist/ScrollShadow/ScrollShadow.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollShadow.d.cts","names":[],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"mappings":";;;UAMiB,iBAAA;;EAEf,QAAA,GAAW,SAAS;EAFY;EAIhC,SAAA;EAFoB;EAIpB,aAAA;EAJW;EAMX,WAAA;EAFA;EAIA,IAAA;EAAA;EAEA,MAAA;AAAA;AAAM;AACP;;AADO,cACP,QAAA;EAKe,QAAA;EAAA,SAAA;EAAA,aAAA;EAAA,WAAA;EAAA,IAAA;EAAA;AAAA,GAOb,iBAAA,iCAAiB,GAAA,CAAA,OAAA"}

package/dist/ScrollShadow/ScrollShadow.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+
+//#region src/ScrollShadow/ScrollShadow.d.ts
+interface ScrollShadowProps {
+  /** child components */
+  children?: ReactNode;
+  /** CSS class name */
+  className?: string | string[];
+  /** Hides the scrollbar */
+  hideScrollBar?: boolean;
+  /** Orientation of the scroll shadow */
+  orientation?: 'horizontal' | 'vertical';
+  /** Shadow size in pixels */
+  size?: number;
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+}
+/**
+ * Scroll Shadow component based on [HeroUI Scroll Shadow](https://www.heroui.com//docs/components/scroll-shadow)
+ */
+declare const _default: ({
+  children,
+  className,
+  hideScrollBar,
+  orientation,
+  size,
+  testId
+}: ScrollShadowProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { ScrollShadowProps, _default };
+//# sourceMappingURL=ScrollShadow.d.ts.map

package/dist/ScrollShadow/ScrollShadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollShadow.d.ts","names":[],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"mappings":";;;UAMiB,iBAAA;;EAEf,QAAA,GAAW,SAAS;EAFY;EAIhC,SAAA;EAFoB;EAIpB,aAAA;EAJW;EAMX,WAAA;EAFA;EAIA,IAAA;EAAA;EAEA,MAAA;AAAA;AAAM;AACP;;AADO,cACP,QAAA;EAKe,QAAA;EAAA,SAAA;EAAA,aAAA;EAAA,WAAA;EAAA,IAAA;EAAA;AAAA,GAOb,iBAAA,iCAAiB,GAAA,CAAA,OAAA"}

package/dist/ScrollShadow/ScrollShadow.js

@@ -0,0 +1,21 @@
+import { cn } from "@fuf-stack/pixel-utils";
+import { jsx } from "react/jsx-runtime";
+import { ScrollShadow } from "@heroui/scroll-shadow";
+//#region src/ScrollShadow/ScrollShadow.tsx
+/**
+* Scroll Shadow component based on [HeroUI Scroll Shadow](https://www.heroui.com//docs/components/scroll-shadow)
+*/
+var ScrollShadow_default = ({ children = null, className = void 0, hideScrollBar = false, orientation = "vertical", size = 40, testId = void 0 }) => {
+	return /* @__PURE__ */ jsx(ScrollShadow, {
+		className: cn(className),
+		"data-testid": testId,
+		hideScrollBar,
+		orientation,
+		size,
+		children
+	});
+};
+//#endregion
+export { ScrollShadow_default as default };
+
+//# sourceMappingURL=ScrollShadow.js.map

package/dist/ScrollShadow/ScrollShadow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollShadow.js","names":[],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;AAwBA,IAAA,wBAAgB,EACd,WAAW,MACX,YAAY,KAAA,GACZ,gBAAgB,OAChB,cAAc,YACd,OAAO,IACP,SAAS,KAAA,QACc;CACvB,OACE,oBAAC,cAAD;EACE,WAAW,GAAG,SAAS;EACvB,eAAa;EACE;EACF;EACP;EAEL;CACW,CAAA;AAElB"}

package/dist/ScrollShadow/index.cjs

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_ScrollShadow = require("./ScrollShadow.cjs");
+//#region src/ScrollShadow/index.ts
+var ScrollShadow_default$1 = require_ScrollShadow.default;
+//#endregion
+exports.ScrollShadow = require_ScrollShadow.default;
+exports.default = ScrollShadow_default$1;
 
-var _chunkITHJ52SNcjs = require('../chunk-ITHJ52SN.cjs');
-require('../chunk-AHEA4IJV.cjs');
-
-// src/ScrollShadow/index.ts
-var ScrollShadow_default2 = _chunkITHJ52SNcjs.ScrollShadow_default;
-
-
-
-exports.ScrollShadow = _chunkITHJ52SNcjs.ScrollShadow_default; exports.default = ScrollShadow_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/ScrollShadow/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/ScrollShadow/index.cjs","../../src/ScrollShadow/index.ts"],"names":["ScrollShadow_default"],"mappings":"AAAA;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACA;ACCA,IAAOA,sBAAAA,EAAQ,sCAAA;ADCf;AACE;AACA;AACF,uGAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/ScrollShadow/index.cjs","sourcesContent":[null,"import ScrollShadow from './ScrollShadow';\n\nexport type { ScrollShadowProps } from './ScrollShadow';\n\nexport { ScrollShadow };\n\nexport default ScrollShadow;\n"]}
+{"version":3,"file":"index.cjs","names":["ScrollShadow"],"sources":["../../src/ScrollShadow/index.ts"],"sourcesContent":["import ScrollShadow from './ScrollShadow';\n\nexport type { ScrollShadowProps } from './ScrollShadow';\n\nexport { ScrollShadow };\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;AAMA,IAAA,yBAAeA,qBAAAA"}

package/dist/ScrollShadow/index.d.cts

@@ -1,23 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-interface ScrollShadowProps {
-    /** child components */
-    children?: ReactNode;
-    /** CSS class name */
-    className?: string | string[];
-    /** Hides the scrollbar */
-    hideScrollBar?: boolean;
-    /** Orientation of the scroll shadow */
-    orientation?: 'horizontal' | 'vertical';
-    /** Shadow size in pixels */
-    size?: number;
-    /** HTML data-testid attribute used in e2e tests */
-    testId?: string;
-}
-/**
- * Scroll Shadow component based on [HeroUI Scroll Shadow](https://www.heroui.com//docs/components/scroll-shadow)
- */
-declare const _default: ({ children, className, hideScrollBar, orientation, size, testId, }: ScrollShadowProps) => react_jsx_runtime.JSX.Element;
-
-export { _default as ScrollShadow, type ScrollShadowProps, _default as default };
+import { ScrollShadowProps, _default } from "./ScrollShadow.cjs";
+export { _default as ScrollShadow, _default as default, type ScrollShadowProps };

package/dist/ScrollShadow/index.d.ts

@@ -1,23 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-interface ScrollShadowProps {
-    /** child components */
-    children?: ReactNode;
-    /** CSS class name */
-    className?: string | string[];
-    /** Hides the scrollbar */
-    hideScrollBar?: boolean;
-    /** Orientation of the scroll shadow */
-    orientation?: 'horizontal' | 'vertical';
-    /** Shadow size in pixels */
-    size?: number;
-    /** HTML data-testid attribute used in e2e tests */
-    testId?: string;
-}
-/**
- * Scroll Shadow component based on [HeroUI Scroll Shadow](https://www.heroui.com//docs/components/scroll-shadow)
- */
-declare const _default: ({ children, className, hideScrollBar, orientation, size, testId, }: ScrollShadowProps) => react_jsx_runtime.JSX.Element;
-
-export { _default as ScrollShadow, type ScrollShadowProps, _default as default };
+import { ScrollShadowProps, _default } from "./ScrollShadow.js";
+export { _default as ScrollShadow, _default as default, type ScrollShadowProps };

package/dist/ScrollShadow/index.js

@@ -1,12 +1,7 @@
-import {
-  ScrollShadow_default
-} from "../chunk-ZLSX6FH3.js";
-import "../chunk-OAIRL2FN.js";
+import ScrollShadow_default from "./ScrollShadow.js";
+//#region src/ScrollShadow/index.ts
+var ScrollShadow_default$1 = ScrollShadow_default;
+//#endregion
+export { ScrollShadow_default as ScrollShadow, ScrollShadow_default$1 as default };
 
-// src/ScrollShadow/index.ts
-var ScrollShadow_default2 = ScrollShadow_default;
-export {
-  ScrollShadow_default as ScrollShadow,
-  ScrollShadow_default2 as default
-};
 //# sourceMappingURL=index.js.map

package/dist/ScrollShadow/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ScrollShadow/index.ts"],"sourcesContent":["import ScrollShadow from './ScrollShadow';\n\nexport type { ScrollShadowProps } from './ScrollShadow';\n\nexport { ScrollShadow };\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;AAMA,IAAOA,wBAAQ;","names":["ScrollShadow_default"]}
+{"version":3,"file":"index.js","names":["ScrollShadow"],"sources":["../../src/ScrollShadow/index.ts"],"sourcesContent":["import ScrollShadow from './ScrollShadow';\n\nexport type { ScrollShadowProps } from './ScrollShadow';\n\nexport { ScrollShadow };\n\nexport default ScrollShadow;\n"],"mappings":";;AAMA,IAAA,yBAAeA"}

package/dist/SearchInput/SearchInput.cjs

@@ -0,0 +1,53 @@
+require("../_virtual/_rolldown/runtime.cjs");
+let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let react_icons_fa = require("react-icons/fa");
+let _heroui_input = require("@heroui/input");
+//#region src/SearchInput/SearchInput.tsx
+const inputVariants = (0, _fuf_stack_pixel_utils.tv)({ slots: {
+	/** wrapper around the whole input */
+	base: "",
+	/** clear button */
+	clearButton: "",
+	/** actual input element */
+	input: "",
+	/** inner wrapper (HeroUI inputWrapper slot) */
+	inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
+} });
+/**
+* SearchInput component based on [HeroUI Input](https://www.heroui.com//docs/components/input)
+*/
+const SearchInput = ({ className: _className = void 0, disabled = false, endContent = void 0, onChange, placeholder = void 0, size = void 0, startContent = void 0, testId = void 0, initialValue = void 0 }) => {
+	const [value, setValue] = (0, react.useState)(initialValue ?? "");
+	const handleChange = (e) => {
+		setValue(e?.target?.value ?? "");
+		onChange(e?.target?.value ?? null);
+	};
+	const classNames = (0, _fuf_stack_pixel_utils.variantsToClassNames)(inputVariants(), _className, "base");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_input.Input, {
+		isClearable: true,
+		autoComplete: "off",
+		"data-testid": testId ? (0, _fuf_stack_pixel_utils.slugify)(testId) : void 0,
+		endContent,
+		isDisabled: disabled,
+		onChange: handleChange,
+		onClear: handleChange,
+		placeholder,
+		radius: "sm",
+		size,
+		startContent: startContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_fa.FaSearch, { className: "opacity-50" }),
+		value,
+		variant: "bordered",
+		classNames: {
+			base: classNames.base,
+			clearButton: classNames.clearButton,
+			input: classNames.input,
+			inputWrapper: classNames.inputWrapper
+		}
+	});
+};
+//#endregion
+exports.default = SearchInput;
+
+//# sourceMappingURL=SearchInput.cjs.map

package/dist/SearchInput/SearchInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.cjs","names":["HeroInput","FaSearch"],"sources":["../../src/SearchInput/SearchInput.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaSearch } from 'react-icons/fa';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface SearchInputProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** optional initial value of the input */\n  initialValue?: string;\n  /** callback that is fired when the value is changed or cleared */\n  onChange: (value: string | null) => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * SearchInput component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst SearchInput = ({\n  className: _className = undefined,\n  disabled = false,\n  endContent = undefined,\n  onChange,\n  placeholder = undefined,\n  size = undefined,\n  startContent = undefined,\n  testId = undefined,\n  initialValue = undefined,\n}: SearchInputProps) => {\n  // handle controlled value with initial value\n  const [value, setValue] = useState(initialValue ?? '');\n\n  const handleChange = (e?: ChangeEvent<HTMLInputElement>) => {\n    setValue(e?.target?.value ?? '');\n    onChange(e?.target?.value ?? null);\n  };\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroInput\n      isClearable\n      // disable password manager integrations\n      autoComplete=\"off\"\n      data-testid={testId ? slugify(testId) : undefined}\n      endContent={endContent}\n      isDisabled={disabled}\n      onChange={handleChange}\n      onClear={handleChange}\n      placeholder={placeholder}\n      radius=\"sm\"\n      size={size}\n      startContent={startContent ?? <FaSearch className=\"opacity-50\" />}\n      value={value}\n      variant=\"bordered\"\n      classNames={{\n        base: classNames.base,\n        clearButton: classNames.clearButton,\n        input: classNames.input,\n        inputWrapper: classNames.inputWrapper,\n      }}\n    />\n  );\n};\n\nexport default SearchInput;\n"],"mappings":";;;;;;;AAWA,MAAa,iBAAA,GAAA,uBAAA,IAAmB,EAC9B,OAAO;;CAEL,MAAM;;CAEN,aAAa;;CAEb,OAAO;;CAEP,cAAc;AAChB,EACF,CAAC;;;;AA6BD,MAAM,eAAe,EACnB,WAAW,aAAa,KAAA,GACxB,WAAW,OACX,aAAa,KAAA,GACb,UACA,cAAc,KAAA,GACd,OAAO,KAAA,GACP,eAAe,KAAA,GACf,SAAS,KAAA,GACT,eAAe,KAAA,QACO;CAEtB,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,gBAAgB,EAAE;CAErD,MAAM,gBAAgB,MAAsC;EAC1D,SAAS,GAAG,QAAQ,SAAS,EAAE;EAC/B,SAAS,GAAG,QAAQ,SAAS,IAAI;CACnC;CAIA,MAAM,cAAA,GAAA,uBAAA,sBADW,cAC8B,GAAG,YAAY,MAAM;CAEpE,OACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,OAAD;EACE,aAAA;EAEA,cAAa;EACb,eAAa,UAAA,GAAA,uBAAA,SAAiB,MAAM,IAAI,KAAA;EAC5B;EACZ,YAAY;EACZ,UAAU;EACV,SAAS;EACI;EACb,QAAO;EACD;EACN,cAAc,gBAAgB,iBAAA,GAAA,kBAAA,KAACC,eAAAA,UAAD,EAAU,WAAU,aAAc,CAAA;EACzD;EACP,SAAQ;EACR,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GACxB,OAAO,WAAW;GAClB,cAAc,WAAW;EAC3B;CACD,CAAA;AAEL"}

package/dist/SearchInput/SearchInput.d.cts

@@ -0,0 +1,86 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { ReactNode } from "react";
+
+//#region src/SearchInput/SearchInput.d.ts
+declare const inputVariants: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-merge").ClassNameValue | {
+      base?: import("tailwind-merge").ClassNameValue;
+      clearButton?: import("tailwind-merge").ClassNameValue;
+      input?: import("tailwind-merge").ClassNameValue;
+      inputWrapper?: import("tailwind-merge").ClassNameValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-merge").ClassNameValue | {
+      base?: import("tailwind-merge").ClassNameValue;
+      clearButton?: import("tailwind-merge").ClassNameValue;
+      input?: import("tailwind-merge").ClassNameValue;
+      inputWrapper?: import("tailwind-merge").ClassNameValue;
+    };
+  };
+} | {}, {
+  /** wrapper around the whole input */base: string; /** clear button */
+  clearButton: string; /** actual input element */
+  input: string; /** inner wrapper (HeroUI inputWrapper slot) */
+  inputWrapper: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-merge").ClassNameValue | {
+      base?: import("tailwind-merge").ClassNameValue;
+      clearButton?: import("tailwind-merge").ClassNameValue;
+      input?: import("tailwind-merge").ClassNameValue;
+      inputWrapper?: import("tailwind-merge").ClassNameValue;
+    };
+  };
+} | {}, {
+  /** wrapper around the whole input */base: string; /** clear button */
+  clearButton: string; /** actual input element */
+  input: string; /** inner wrapper (HeroUI inputWrapper slot) */
+  inputWrapper: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+  /** wrapper around the whole input */base: string; /** clear button */
+  clearButton: string; /** actual input element */
+  input: string; /** inner wrapper (HeroUI inputWrapper slot) */
+  inputWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof inputVariants>;
+type ClassName = TVClassName<typeof inputVariants>;
+interface SearchInputProps extends VariantProps {
+  /** CSS class name */
+  className?: ClassName;
+  /** input field is disabled */
+  disabled?: boolean;
+  /** added content to the end of the input Field. */
+  endContent?: ReactNode;
+  /** optional initial value of the input */
+  initialValue?: string;
+  /** callback that is fired when the value is changed or cleared */
+  onChange: (value: string | null) => void;
+  /** form field placeholder */
+  placeholder?: string;
+  /** size of the input */
+  size?: 'sm' | 'md' | 'lg';
+  /** content added to the start of the input field */
+  startContent?: ReactNode;
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+}
+/**
+ * SearchInput component based on [HeroUI Input](https://www.heroui.com//docs/components/input)
+ */
+declare const SearchInput: ({
+  className: _className,
+  disabled,
+  endContent,
+  onChange,
+  placeholder,
+  size,
+  startContent,
+  testId,
+  initialValue
+}: SearchInputProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { SearchInput, SearchInputProps };
+//# sourceMappingURL=SearchInput.d.cts.map

package/dist/SearchInput/SearchInput.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.cts","names":[],"sources":["../../src/SearchInput/SearchInput.tsx"],"mappings":";;;;cAWa,aAAA,8BAAa,YAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAarB,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,gBAAA,SAAyB,YAAA;EAHtB;EAKlB,SAAA,GAAY,SAAA;EAJT;EAMH,QAAA;;EAEA,UAAA,GAAa,SAAA;EARkC;EAU/C,YAAA;EARgC;EAUhC,QAAA,GAAW,KAAA;EARC;EAUZ,WAAA;EAIe;EAFf,IAAA;EAdoD;EAgBpD,YAAA,GAAe,SAAA;EAhByB;EAkBxC,MAAA;AAAA;;;;cAMI,WAAA;EAAe,SAAA,EAAA,UAAA;EAAA,QAAA;EAAA,UAAA;EAAA,QAAA;EAAA,WAAA;EAAA,IAAA;EAAA,YAAA;EAAA,MAAA;EAAA;AAAA,GAUlB,gBAAA,iCAAgB,GAAA,CAAA,OAAA"}