@fuf-stack/pixels 1.9.0 → 1.10.0

package/dist/SearchInput/SearchInput.d.ts

@@ -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.ts.map

package/dist/SearchInput/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","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"}

package/dist/SearchInput/SearchInput.js

@@ -0,0 +1,52 @@
+import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { FaSearch } from "react-icons/fa";
+import { Input } from "@heroui/input";
+//#region src/SearchInput/SearchInput.tsx
+const inputVariants = 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] = useState(initialValue ?? "");
+	const handleChange = (e) => {
+		setValue(e?.target?.value ?? "");
+		onChange(e?.target?.value ?? null);
+	};
+	const classNames = variantsToClassNames(inputVariants(), _className, "base");
+	return /* @__PURE__ */ jsx(Input, {
+		isClearable: true,
+		autoComplete: "off",
+		"data-testid": testId ? slugify(testId) : void 0,
+		endContent,
+		isDisabled: disabled,
+		onChange: handleChange,
+		onClear: handleChange,
+		placeholder,
+		radius: "sm",
+		size,
+		startContent: startContent ?? /* @__PURE__ */ jsx(FaSearch, { className: "opacity-50" }),
+		value,
+		variant: "bordered",
+		classNames: {
+			base: classNames.base,
+			clearButton: classNames.clearButton,
+			input: classNames.input,
+			inputWrapper: classNames.inputWrapper
+		}
+	});
+};
+//#endregion
+export { SearchInput as default };
+
+//# sourceMappingURL=SearchInput.js.map

package/dist/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","names":["HeroInput"],"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,gBAAgB,GAAG,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,YAAY,SAAS,gBAAgB,EAAE;CAErD,MAAM,gBAAgB,MAAsC;EAC1D,SAAS,GAAG,QAAQ,SAAS,EAAE;EAC/B,SAAS,GAAG,QAAQ,SAAS,IAAI;CACnC;CAIA,MAAM,aAAa,qBADF,cAC8B,GAAG,YAAY,MAAM;CAEpE,OACE,oBAACA,OAAD;EACE,aAAA;EAEA,cAAa;EACb,eAAa,SAAS,QAAQ,MAAM,IAAI,KAAA;EAC5B;EACZ,YAAY;EACZ,UAAU;EACV,SAAS;EACI;EACb,QAAO;EACD;EACN,cAAc,gBAAgB,oBAAC,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/index.cjs

@@ -1,73 +1,12 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../chunk-AHEA4IJV.cjs');
-
-// src/SearchInput/SearchInput.tsx
-var _react = require('react');
-var _fa = require('react-icons/fa');
-var _input = require('@heroui/input');
-var _pixelutils = require('@fuf-stack/pixel-utils');
-var _jsxruntime = require('react/jsx-runtime');
-var inputVariants = _pixelutils.tv.call(void 0, {
-  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"
-  }
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
 });
-var 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] = _react.useState.call(void 0, initialValue != null ? initialValue : "");
-  const handleChange = (e) => {
-    var _a, _b, _c, _d;
-    setValue((_b = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value) != null ? _b : "");
-    onChange((_d = (_c = e == null ? void 0 : e.target) == null ? void 0 : _c.value) != null ? _d : null);
-  };
-  const variants = inputVariants();
-  const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, _className, "base");
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _input.Input,
-    {
-      isClearable: true,
-      autoComplete: "off",
-      "data-testid": testId ? _pixelutils.slugify.call(void 0, testId) : void 0,
-      endContent,
-      isDisabled: disabled,
-      onChange: handleChange,
-      onClear: handleChange,
-      placeholder,
-      radius: "sm",
-      size,
-      startContent: startContent != null ? startContent : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaSearch, { className: "opacity-50" }),
-      value,
-      variant: "bordered",
-      classNames: {
-        base: classNames.base,
-        clearButton: classNames.clearButton,
-        input: classNames.input,
-        inputWrapper: classNames.inputWrapper
-      }
-    }
-  );
-};
-var SearchInput_default = SearchInput;
-
-// src/SearchInput/index.ts
-var SearchInput_default2 = SearchInput_default;
-
-
+const require_SearchInput = require("./SearchInput.cjs");
+//#region src/SearchInput/index.ts
+var SearchInput_default = require_SearchInput.default;
+//#endregion
+exports.SearchInput = require_SearchInput.default;
+exports.default = SearchInput_default;
 
-exports.SearchInput = SearchInput_default; exports.default = SearchInput_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/SearchInput/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/SearchInput/index.cjs","../../src/SearchInput/SearchInput.tsx","../../src/SearchInput/index.ts"],"names":["SearchInput_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/SearchInput/index.cjs","sourcesContent":[null,"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","import SearchInput from './SearchInput';\n\nexport type { SearchInputProps } from './SearchInput';\n\nexport { SearchInput };\n\nexport default SearchInput;\n"]}
+{"version":3,"file":"index.cjs","names":["SearchInput"],"sources":["../../src/SearchInput/index.ts"],"sourcesContent":["import SearchInput from './SearchInput';\n\nexport type { SearchInputProps } from './SearchInput';\n\nexport { SearchInput };\n\nexport default SearchInput;\n"],"mappings":";;;;;;AAMA,IAAA,sBAAeA,oBAAAA"}

package/dist/SearchInput/index.d.cts

@@ -1,89 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as tailwind_variants from 'tailwind-variants';
-import * as tailwind_merge from 'tailwind-merge';
-import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
-import { ReactNode } from 'react';
-
-declare const inputVariants: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_merge.ClassNameValue | {
-            base?: tailwind_merge.ClassNameValue;
-            clearButton?: tailwind_merge.ClassNameValue;
-            input?: tailwind_merge.ClassNameValue;
-            inputWrapper?: tailwind_merge.ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_merge.ClassNameValue | {
-            base?: tailwind_merge.ClassNameValue;
-            clearButton?: tailwind_merge.ClassNameValue;
-            input?: tailwind_merge.ClassNameValue;
-            inputWrapper?: 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]: tailwind_merge.ClassNameValue | {
-            base?: tailwind_merge.ClassNameValue;
-            clearButton?: tailwind_merge.ClassNameValue;
-            input?: tailwind_merge.ClassNameValue;
-            inputWrapper?: 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;
-}, 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) => react_jsx_runtime.JSX.Element;
-
-export { SearchInput, type SearchInputProps, SearchInput as default };
+import { SearchInput, SearchInputProps } from "./SearchInput.cjs";
+export { SearchInput, SearchInput as default, type SearchInputProps };

package/dist/SearchInput/index.d.ts

@@ -1,89 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as tailwind_variants from 'tailwind-variants';
-import * as tailwind_merge from 'tailwind-merge';
-import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
-import { ReactNode } from 'react';
-
-declare const inputVariants: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_merge.ClassNameValue | {
-            base?: tailwind_merge.ClassNameValue;
-            clearButton?: tailwind_merge.ClassNameValue;
-            input?: tailwind_merge.ClassNameValue;
-            inputWrapper?: tailwind_merge.ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_merge.ClassNameValue | {
-            base?: tailwind_merge.ClassNameValue;
-            clearButton?: tailwind_merge.ClassNameValue;
-            input?: tailwind_merge.ClassNameValue;
-            inputWrapper?: 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]: tailwind_merge.ClassNameValue | {
-            base?: tailwind_merge.ClassNameValue;
-            clearButton?: tailwind_merge.ClassNameValue;
-            input?: tailwind_merge.ClassNameValue;
-            inputWrapper?: 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;
-}, 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) => react_jsx_runtime.JSX.Element;
-
-export { SearchInput, type SearchInputProps, SearchInput as default };
+import { SearchInput, SearchInputProps } from "./SearchInput.js";
+export { SearchInput, SearchInput as default, type SearchInputProps };

package/dist/SearchInput/index.js

@@ -1,73 +1,7 @@
-import "../chunk-OAIRL2FN.js";
-
-// src/SearchInput/SearchInput.tsx
-import { useState } from "react";
-import { FaSearch } from "react-icons/fa";
-import { Input as HeroInput } from "@heroui/input";
-import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
-import { jsx } from "react/jsx-runtime";
-var inputVariants = 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"
-  }
-});
-var 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] = useState(initialValue != null ? initialValue : "");
-  const handleChange = (e) => {
-    var _a, _b, _c, _d;
-    setValue((_b = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value) != null ? _b : "");
-    onChange((_d = (_c = e == null ? void 0 : e.target) == null ? void 0 : _c.value) != null ? _d : null);
-  };
-  const variants = inputVariants();
-  const classNames = variantsToClassNames(variants, _className, "base");
-  return /* @__PURE__ */ jsx(
-    HeroInput,
-    {
-      isClearable: true,
-      autoComplete: "off",
-      "data-testid": testId ? slugify(testId) : void 0,
-      endContent,
-      isDisabled: disabled,
-      onChange: handleChange,
-      onClear: handleChange,
-      placeholder,
-      radius: "sm",
-      size,
-      startContent: startContent != null ? startContent : /* @__PURE__ */ jsx(FaSearch, { className: "opacity-50" }),
-      value,
-      variant: "bordered",
-      classNames: {
-        base: classNames.base,
-        clearButton: classNames.clearButton,
-        input: classNames.input,
-        inputWrapper: classNames.inputWrapper
-      }
-    }
-  );
-};
+import SearchInput from "./SearchInput.js";
+//#region src/SearchInput/index.ts
 var SearchInput_default = SearchInput;
+//#endregion
+export { SearchInput, SearchInput_default as default };
 
-// src/SearchInput/index.ts
-var SearchInput_default2 = SearchInput_default;
-export {
-  SearchInput_default as SearchInput,
-  SearchInput_default2 as default
-};
 //# sourceMappingURL=index.js.map

package/dist/SearchInput/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SearchInput/SearchInput.tsx","../../src/SearchInput/index.ts"],"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","import SearchInput from './SearchInput';\n\nexport type { SearchInputProps } from './SearchInput';\n\nexport { SearchInput };\n\nexport default SearchInput;\n"],"mappings":";;;AAGA,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAEzB,SAAS,SAAS,iBAAiB;AAEnC,SAAS,SAAS,IAAI,4BAA4B;AA+Ed;AA5E7B,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA;AAAA,IAEN,aAAa;AAAA;AAAA,IAEb,OAAO;AAAA;AAAA,IAEP,cAAc;AAAA,EAChB;AACF,CAAC;AA6BD,IAAM,cAAc,CAAC;AAAA,EACnB,WAAW,aAAa;AAAA,EACxB,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,SAAS;AAAA,EACT,eAAe;AACjB,MAAwB;AAEtB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,sCAAgB,EAAE;AAErD,QAAM,eAAe,CAAC,MAAsC;AAjE9D;AAkEI,cAAS,kCAAG,WAAH,mBAAW,UAAX,YAAoB,EAAE;AAC/B,cAAS,kCAAG,WAAH,mBAAW,UAAX,YAAoB,IAAI;AAAA,EACnC;AAGA,QAAM,WAAW,cAAc;AAC/B,QAAM,aAAa,qBAAqB,UAAU,YAAY,MAAM;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MAEX,cAAa;AAAA,MACb,eAAa,SAAS,QAAQ,MAAM,IAAI;AAAA,MACxC;AAAA,MACA,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,SAAS;AAAA,MACT;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA,cAAc,sCAAgB,oBAAC,YAAS,WAAU,cAAa;AAAA,MAC/D;AAAA,MACA,SAAQ;AAAA,MACR,YAAY;AAAA,QACV,MAAM,WAAW;AAAA,QACjB,aAAa,WAAW;AAAA,QACxB,OAAO,WAAW;AAAA,QAClB,cAAc,WAAW;AAAA,MAC3B;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,sBAAQ;;;AC9Ff,IAAOA,uBAAQ;","names":["SearchInput_default"]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/SearchInput/index.ts"],"sourcesContent":["import SearchInput from './SearchInput';\n\nexport type { SearchInputProps } from './SearchInput';\n\nexport { SearchInput };\n\nexport default SearchInput;\n"],"mappings":";;AAMA,IAAA,sBAAe"}

package/dist/Table/Table.cjs

@@ -0,0 +1,75 @@
+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_table = require("@heroui/table");
+//#region src/Table/Table.tsx
+const tableVariants = (0, _fuf_stack_pixel_utils.tv)({
+	slots: {
+		base: "",
+		wrapper: "",
+		table: "",
+		thead: "",
+		tbody: "",
+		tr: "",
+		th: "bg-content2",
+		td: "",
+		tfoot: "",
+		sortIcon: "",
+		emptyWrapper: "",
+		loadingWrapper: ""
+	},
+	variants: { separation: {
+		divider: { tr: "divide-x rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none" },
+		"divider-x": { tr: "divide-x" },
+		"divider-y": { tr: "rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none" },
+		"striped-divider-x": {
+			tr: "divide-x",
+			th: "border-divider",
+			td: "border-divider first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2"
+		},
+		striped: {
+			tr: "",
+			td: "first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2"
+		},
+		none: {}
+	} }
+});
+/**
+* Table component based on [HeroUI Table](https://www.heroui.com//docs/components/table)
+*/
+const Table = ({ ariaLabel = void 0, bottomContent = void 0, className = void 0, columns, emptyContent = "No rows to display.", hasWrapper = false, hideHeader = false, loading = false, loadingContent = void 0, maxTableHeight = void 0, rowHeight = void 0, rows = [], separation = "none", stickyHeader = false, testId = void 0, virtualized = false }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_table.Table, {
+		"aria-label": ariaLabel,
+		bottomContent,
+		classNames: (0, _fuf_stack_pixel_utils.variantsToClassNames)(tableVariants({ separation }), className, "base"),
+		"data-testid": testId ? (0, _fuf_stack_pixel_utils.slugify)(testId) : null,
+		hideHeader,
+		isHeaderSticky: stickyHeader,
+		isStriped: separation === "striped" || separation === "striped-divider-x",
+		isVirtualized: virtualized,
+		maxTableHeight,
+		removeWrapper: virtualized ? false : !hasWrapper,
+		rowHeight,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_table.TableHeader, {
+			columns,
+			children: (column) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_table.TableColumn, { children: column.label }, column.key);
+			}
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_table.TableBody, {
+			emptyContent,
+			isLoading: loading,
+			items: rows,
+			loadingContent: loadingContent ?? "...",
+			children: (item) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_table.TableRow, { children: (columnKey) => {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_table.TableCell, { children: (0, _heroui_table.getKeyValue)(item, columnKey) });
+				} }, item.key);
+			}
+		})]
+	});
+};
+//#endregion
+exports.default = Table;
+exports.tableVariants = tableVariants;
+
+//# sourceMappingURL=Table.cjs.map

package/dist/{chunk-YUR6N2RB.cjs.map → Table/Table.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-YUR6N2RB.cjs","../src/Table/Table.tsx","../src/Table/index.ts"],"names":["Table_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-YUR6N2RB.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n  getKeyValue,\n  Table as HeroTable,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from '@heroui/table';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// table styling variants\nexport const tableVariants = tv({\n  slots: {\n    base: '',\n    wrapper: '',\n    table: '',\n    thead: '',\n    tbody: '',\n    tr: '',\n    th: 'bg-content2',\n    td: '',\n    tfoot: '',\n    sortIcon: '',\n    emptyWrapper: '',\n    loadingWrapper: '',\n  },\n  variants: {\n    separation: {\n      divider: {\n        tr: 'divide-x rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n      },\n      'divider-x': {\n        tr: 'divide-x',\n      },\n      'divider-y': {\n        tr: 'rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n      },\n      'striped-divider-x': {\n        tr: 'divide-x',\n        th: 'border-divider',\n        td: 'border-divider first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n      },\n      striped: {\n        tr: '',\n        td: 'first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n      },\n      none: {},\n    },\n  },\n});\n\nexport type VariantProps = TVProps<typeof tableVariants>;\ntype ClassName = TVClassName<typeof tableVariants>;\n\nexport interface TableColumnProps {\n  key: string;\n  label: ReactNode;\n}\n\nexport interface TableRowProps {\n  key: string | number;\n  [key: string | number]: ReactNode;\n}\n\nexport interface TableProps extends VariantProps {\n  /** Aria label for the Table. */\n  ariaLabel?: string;\n  /** Component to display at the bottom of the Table. */\n  bottomContent?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Objects with table data */\n  columns: TableColumnProps[];\n  /** Component to display if there are no rows! */\n  emptyContent?: ReactNode;\n  /** Determine if the Table should have a card like wrapper. */\n  hasWrapper?: boolean;\n  /** remove header */\n  hideHeader?: boolean;\n  /** Tells the Table to show the loading component. */\n  loading?: boolean;\n  /** Loading animation component. */\n  loadingContent?: ReactNode;\n  /** The maximum height of the table in pixels. Required when using virtualization. */\n  maxTableHeight?: number;\n  /** The fixed height of each row item in pixels. Required when using virtualization. */\n  rowHeight?: number;\n  /** Items displayed as rows in the Table. Should have key-value pair for each column. */\n  rows?: TableRowProps[];\n  /** Separation style for the rows & columns. */\n  separation?:\n    | 'none'\n    | 'striped'\n    | 'striped-divider-x'\n    | 'divider-x'\n    | 'divider-y'\n    | 'divider';\n  /** Keeps the header of the Table in view while scrolling a height limited Table. */\n  stickyHeader?: boolean;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Virtualize allows efficient rendering of large lists by only rendering items that are visible in the viewport. */\n  virtualized?: boolean;\n}\n\n/**\n * Table component based on [HeroUI Table](https://www.heroui.com//docs/components/table)\n */\nconst Table = ({\n  ariaLabel = undefined,\n  bottomContent = undefined,\n  className = undefined,\n  columns,\n  emptyContent = 'No rows to display.',\n  hasWrapper = false,\n  hideHeader = false,\n  loading = false,\n  loadingContent = undefined,\n  maxTableHeight = undefined,\n  rowHeight = undefined,\n  rows = [],\n  separation = 'none',\n  stickyHeader = false,\n  testId = undefined,\n  virtualized = false,\n}: TableProps) => {\n  const variants = tableVariants({ separation });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroTable\n      aria-label={ariaLabel}\n      bottomContent={bottomContent}\n      classNames={classNames}\n      data-testid={testId ? slugify(testId) : null}\n      hideHeader={hideHeader}\n      isHeaderSticky={stickyHeader}\n      isStriped={separation === 'striped' || separation === 'striped-divider-x'}\n      isVirtualized={virtualized}\n      maxTableHeight={maxTableHeight}\n      removeWrapper={virtualized ? false : !hasWrapper} // always show wrapper if virtualized\n      rowHeight={rowHeight}\n    >\n      <TableHeader columns={columns}>\n        {(column: TableColumnProps) => {\n          return <TableColumn key={column.key}>{column.label}</TableColumn>;\n        }}\n      </TableHeader>\n      <TableBody\n        emptyContent={emptyContent}\n        isLoading={loading}\n        items={rows}\n        loadingContent={loadingContent ?? '...'} // TODO: use future spinner/loading component\n      >\n        {(item: TableRowProps) => {\n          return (\n            <TableRow\n              key={item.key}\n              // data-testid={`${slugify(testId || 'table')}_item_${slugify(JSON.stringify(item.testId || item.key))}`}\n            >\n              {(columnKey) => {\n                return <TableCell>{getKeyValue(item, columnKey)}</TableCell>;\n              }}\n            </TableRow>\n          );\n        }}\n      </TableBody>\n    </HeroTable>\n  );\n};\n\nexport default Table;\n","import Table, { tableVariants } from './Table';\n\nexport type {\n  TableProps,\n  TableRowProps,\n  TableColumnProps,\n  VariantProps,\n} from './Table';\n\nexport { Table, tableVariants };\n\nexport default Table;\n"]}
+{"version":3,"file":"Table.cjs","names":["HeroTable","TableHeader","TableColumn","TableBody","TableRow","TableCell"],"sources":["../../src/Table/Table.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n  getKeyValue,\n  Table as HeroTable,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from '@heroui/table';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// table styling variants\nexport const tableVariants = tv({\n  slots: {\n    base: '',\n    wrapper: '',\n    table: '',\n    thead: '',\n    tbody: '',\n    tr: '',\n    th: 'bg-content2',\n    td: '',\n    tfoot: '',\n    sortIcon: '',\n    emptyWrapper: '',\n    loadingWrapper: '',\n  },\n  variants: {\n    separation: {\n      divider: {\n        tr: 'divide-x rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n      },\n      'divider-x': {\n        tr: 'divide-x',\n      },\n      'divider-y': {\n        tr: 'rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n      },\n      'striped-divider-x': {\n        tr: 'divide-x',\n        th: 'border-divider',\n        td: 'border-divider first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n      },\n      striped: {\n        tr: '',\n        td: 'first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n      },\n      none: {},\n    },\n  },\n});\n\nexport type VariantProps = TVProps<typeof tableVariants>;\ntype ClassName = TVClassName<typeof tableVariants>;\n\nexport interface TableColumnProps {\n  key: string;\n  label: ReactNode;\n}\n\nexport interface TableRowProps {\n  key: string | number;\n  [key: string | number]: ReactNode;\n}\n\nexport interface TableProps extends VariantProps {\n  /** Aria label for the Table. */\n  ariaLabel?: string;\n  /** Component to display at the bottom of the Table. */\n  bottomContent?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Objects with table data */\n  columns: TableColumnProps[];\n  /** Component to display if there are no rows! */\n  emptyContent?: ReactNode;\n  /** Determine if the Table should have a card like wrapper. */\n  hasWrapper?: boolean;\n  /** remove header */\n  hideHeader?: boolean;\n  /** Tells the Table to show the loading component. */\n  loading?: boolean;\n  /** Loading animation component. */\n  loadingContent?: ReactNode;\n  /** The maximum height of the table in pixels. Required when using virtualization. */\n  maxTableHeight?: number;\n  /** The fixed height of each row item in pixels. Required when using virtualization. */\n  rowHeight?: number;\n  /** Items displayed as rows in the Table. Should have key-value pair for each column. */\n  rows?: TableRowProps[];\n  /** Separation style for the rows & columns. */\n  separation?:\n    | 'none'\n    | 'striped'\n    | 'striped-divider-x'\n    | 'divider-x'\n    | 'divider-y'\n    | 'divider';\n  /** Keeps the header of the Table in view while scrolling a height limited Table. */\n  stickyHeader?: boolean;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Virtualize allows efficient rendering of large lists by only rendering items that are visible in the viewport. */\n  virtualized?: boolean;\n}\n\n/**\n * Table component based on [HeroUI Table](https://www.heroui.com//docs/components/table)\n */\nconst Table = ({\n  ariaLabel = undefined,\n  bottomContent = undefined,\n  className = undefined,\n  columns,\n  emptyContent = 'No rows to display.',\n  hasWrapper = false,\n  hideHeader = false,\n  loading = false,\n  loadingContent = undefined,\n  maxTableHeight = undefined,\n  rowHeight = undefined,\n  rows = [],\n  separation = 'none',\n  stickyHeader = false,\n  testId = undefined,\n  virtualized = false,\n}: TableProps) => {\n  const variants = tableVariants({ separation });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroTable\n      aria-label={ariaLabel}\n      bottomContent={bottomContent}\n      classNames={classNames}\n      data-testid={testId ? slugify(testId) : null}\n      hideHeader={hideHeader}\n      isHeaderSticky={stickyHeader}\n      isStriped={separation === 'striped' || separation === 'striped-divider-x'}\n      isVirtualized={virtualized}\n      maxTableHeight={maxTableHeight}\n      removeWrapper={virtualized ? false : !hasWrapper} // always show wrapper if virtualized\n      rowHeight={rowHeight}\n    >\n      <TableHeader columns={columns}>\n        {(column: TableColumnProps) => {\n          return <TableColumn key={column.key}>{column.label}</TableColumn>;\n        }}\n      </TableHeader>\n      <TableBody\n        emptyContent={emptyContent}\n        isLoading={loading}\n        items={rows}\n        loadingContent={loadingContent ?? '...'} // TODO: use future spinner/loading component\n      >\n        {(item: TableRowProps) => {\n          return (\n            <TableRow\n              key={item.key}\n              // data-testid={`${slugify(testId || 'table')}_item_${slugify(JSON.stringify(item.testId || item.key))}`}\n            >\n              {(columnKey) => {\n                return <TableCell>{getKeyValue(item, columnKey)}</TableCell>;\n              }}\n            </TableRow>\n          );\n        }}\n      </TableBody>\n    </HeroTable>\n  );\n};\n\nexport default Table;\n"],"mappings":";;;;;AAgBA,MAAa,iBAAA,GAAA,uBAAA,IAAmB;CAC9B,OAAO;EACL,MAAM;EACN,SAAS;EACT,OAAO;EACP,OAAO;EACP,OAAO;EACP,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACP,UAAU;EACV,cAAc;EACd,gBAAgB;CAClB;CACA,UAAU,EACR,YAAY;EACV,SAAS,EACP,IAAI,mHACN;EACA,aAAa,EACX,IAAI,WACN;EACA,aAAa,EACX,IAAI,0GACN;EACA,qBAAqB;GACnB,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,SAAS;GACP,IAAI;GACJ,IAAI;EACN;EACA,MAAM,CAAC;CACT,EACF;AACF,CAAC;;;;AA2DD,MAAM,SAAS,EACb,YAAY,KAAA,GACZ,gBAAgB,KAAA,GAChB,YAAY,KAAA,GACZ,SACA,eAAe,uBACf,aAAa,OACb,aAAa,OACb,UAAU,OACV,iBAAiB,KAAA,GACjB,iBAAiB,KAAA,GACjB,YAAY,KAAA,GACZ,OAAO,CAAC,GACR,aAAa,QACb,eAAe,OACf,SAAS,KAAA,GACT,cAAc,YACE;CAIhB,OACE,iBAAA,GAAA,kBAAA,MAACA,cAAAA,OAAD;EACE,cAAY;EACG;EACf,aAAA,GAAA,uBAAA,sBAPa,cAAc,EAAE,WAAW,CACG,GAAG,WAAW,MAMpC;EACrB,eAAa,UAAA,GAAA,uBAAA,SAAiB,MAAM,IAAI;EAC5B;EACZ,gBAAgB;EAChB,WAAW,eAAe,aAAa,eAAe;EACtD,eAAe;EACC;EAChB,eAAe,cAAc,QAAQ,CAAC;EAC3B;YAXb,CAaE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD;GAAsB;cAClB,WAA6B;IAC7B,OAAO,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD,EAAA,UAA+B,OAAO,MAAmB,GAAvC,OAAO,GAAgC;GAClE;EACW,CAAA,GACb,iBAAA,GAAA,kBAAA,KAACC,cAAAA,WAAD;GACgB;GACd,WAAW;GACX,OAAO;GACP,gBAAgB,kBAAkB;cAEhC,SAAwB;IACxB,OACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,UAAD,EAAA,WAII,cAAc;KACd,OAAO,iBAAA,GAAA,kBAAA,KAACC,cAAAA,WAAD,EAAA,WAAA,GAAA,cAAA,aAAwB,MAAM,SAAS,EAAa,CAAA;IAC7D,EACQ,GANH,KAAK,GAMF;GAEd;EACS,CAAA,CACF;;AAEf"}