@fuf-stack/pixels 1.11.0 → 1.11.2

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

@@ -1 +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"}
+{"version":3,"file":"SearchInput.d.ts","names":[],"sources":["../../src/SearchInput/SearchInput.tsx"],"mappings":";;;;cAWa,aAAA,IAAa,KAAA;EAAA;;;gbAWxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gbAXwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sbAaT;EAAA;IAAA;;;kbACH;;;;sbAEoB;EAAA;IAAA;;;kbAgBjB;;;;sbAhByB;EAAA;kbAE5B;;;;sbAMZ;EAAA;AAAA;;kbAMA;;;;sbAIM;EAAA;;obAqDP;;;;wbA/CoB;IAAA;;obAAA;;;;wbAUlB;IAAA;;obAVkB;;;;wbAAA;IAAA;;obAAA;;;;wbAAA;IAAA;EAAA;;;;MAAA,mDAUF;2BAqClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA1EI,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,gBAAA,SAAyB,YAAA;;EAExC,SAAA,GAAY,SAAA;;EAEZ,QAAA;;EAEA,UAAA,GAAa,SAAA;;EAEb,YAAA;;EAEA,QAAA,GAAW,KAAA;;EAEX,WAAA;;EAEA,IAAA;;EAEA,YAAA,GAAe,SAAA;;EAEf,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

@@ -25,10 +25,16 @@ const SearchInput = ({ className: _className = void 0, disabled = false, endCont
 	};
 	const classNames = variantsToClassNames(inputVariants(), _className, "base");
 	return /* @__PURE__ */ jsx(Input, {
-		isClearable: true,
 		autoComplete: "off",
+		classNames: {
+			base: classNames.base,
+			clearButton: classNames.clearButton,
+			input: classNames.input,
+			inputWrapper: classNames.inputWrapper
+		},
 		"data-testid": testId ? slugify(testId) : void 0,
 		endContent,
+		isClearable: true,
 		isDisabled: disabled,
 		onChange: handleChange,
 		onClear: handleChange,
@@ -37,13 +43,7 @@ const SearchInput = ({ className: _className = void 0, disabled = false, endCont
 		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
-		}
+		variant: "bordered"
 	});
 };
 //#endregion

package/dist/SearchInput/SearchInput.js.map

@@ -1 +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"}
+{"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      // disable password manager integrations\n      autoComplete=\"off\"\n      classNames={{\n        base: classNames.base,\n        clearButton: classNames.clearButton,\n        input: classNames.input,\n        inputWrapper: classNames.inputWrapper,\n      }}\n      data-testid={testId ? slugify(testId) : undefined}\n      endContent={endContent}\n      isClearable\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    />\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;EAEE,cAAa;EACb,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GACxB,OAAO,WAAW;GAClB,cAAc,WAAW;EAC3B;EACA,eAAa,SAAS,QAAQ,MAAM,IAAI,KAAA;EAC5B;EACZ,aAAA;EACA,YAAY;EACZ,UAAU;EACV,SAAS;EACI;EACb,QAAO;EACD;EACN,cAAc,gBAAgB,oBAAC,UAAD,EAAU,WAAU,aAAc,CAAA;EACzD;EACP,SAAQ;CACT,CAAA;AAEL"}

package/dist/Table/Table.cjs

@@ -1,4 +1,3 @@
-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");

package/dist/Table/Table.cjs.map

@@ -1 +1 @@
-{"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"}
+{"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"}