@fuf-stack/pixels 1.9.0 → 1.10.0

package/dist/Table/Table.d.cts

@@ -0,0 +1,178 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { ReactNode } from "react";
+
+//#region src/Table/Table.d.ts
+declare const tableVariants: import("tailwind-variants").TVReturnType<{
+  separation: {
+    divider: {
+      tr: string;
+    };
+    'divider-x': {
+      tr: string;
+    };
+    'divider-y': {
+      tr: string;
+    };
+    'striped-divider-x': {
+      tr: string;
+      th: string;
+      td: string;
+    };
+    striped: {
+      tr: string;
+      td: string;
+    };
+    none: {};
+  };
+}, {
+  base: string;
+  wrapper: string;
+  table: string;
+  thead: string;
+  tbody: string;
+  tr: string;
+  th: string;
+  td: string;
+  tfoot: string;
+  sortIcon: string;
+  emptyWrapper: string;
+  loadingWrapper: string;
+}, undefined, {
+  separation: {
+    divider: {
+      tr: string;
+    };
+    'divider-x': {
+      tr: string;
+    };
+    'divider-y': {
+      tr: string;
+    };
+    'striped-divider-x': {
+      tr: string;
+      th: string;
+      td: string;
+    };
+    striped: {
+      tr: string;
+      td: string;
+    };
+    none: {};
+  };
+}, {
+  base: string;
+  wrapper: string;
+  table: string;
+  thead: string;
+  tbody: string;
+  tr: string;
+  th: string;
+  td: string;
+  tfoot: string;
+  sortIcon: string;
+  emptyWrapper: string;
+  loadingWrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+  separation: {
+    divider: {
+      tr: string;
+    };
+    'divider-x': {
+      tr: string;
+    };
+    'divider-y': {
+      tr: string;
+    };
+    'striped-divider-x': {
+      tr: string;
+      th: string;
+      td: string;
+    };
+    striped: {
+      tr: string;
+      td: string;
+    };
+    none: {};
+  };
+}, {
+  base: string;
+  wrapper: string;
+  table: string;
+  thead: string;
+  tbody: string;
+  tr: string;
+  th: string;
+  td: string;
+  tfoot: string;
+  sortIcon: string;
+  emptyWrapper: string;
+  loadingWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof tableVariants>;
+type ClassName = TVClassName<typeof tableVariants>;
+interface TableColumnProps {
+  key: string;
+  label: ReactNode;
+}
+interface TableRowProps {
+  key: string | number;
+  [key: string | number]: ReactNode;
+}
+interface TableProps extends VariantProps {
+  /** Aria label for the Table. */
+  ariaLabel?: string;
+  /** Component to display at the bottom of the Table. */
+  bottomContent?: ReactNode;
+  /** CSS class name */
+  className?: ClassName;
+  /** Objects with table data */
+  columns: TableColumnProps[];
+  /** Component to display if there are no rows! */
+  emptyContent?: ReactNode;
+  /** Determine if the Table should have a card like wrapper. */
+  hasWrapper?: boolean;
+  /** remove header */
+  hideHeader?: boolean;
+  /** Tells the Table to show the loading component. */
+  loading?: boolean;
+  /** Loading animation component. */
+  loadingContent?: ReactNode;
+  /** The maximum height of the table in pixels. Required when using virtualization. */
+  maxTableHeight?: number;
+  /** The fixed height of each row item in pixels. Required when using virtualization. */
+  rowHeight?: number;
+  /** Items displayed as rows in the Table. Should have key-value pair for each column. */
+  rows?: TableRowProps[];
+  /** Separation style for the rows & columns. */
+  separation?: 'none' | 'striped' | 'striped-divider-x' | 'divider-x' | 'divider-y' | 'divider';
+  /** Keeps the header of the Table in view while scrolling a height limited Table. */
+  stickyHeader?: boolean;
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+  /** Virtualize allows efficient rendering of large lists by only rendering items that are visible in the viewport. */
+  virtualized?: boolean;
+}
+/**
+ * Table component based on [HeroUI Table](https://www.heroui.com//docs/components/table)
+ */
+declare const Table: ({
+  ariaLabel,
+  bottomContent,
+  className,
+  columns,
+  emptyContent,
+  hasWrapper,
+  hideHeader,
+  loading,
+  loadingContent,
+  maxTableHeight,
+  rowHeight,
+  rows,
+  separation,
+  stickyHeader,
+  testId,
+  virtualized
+}: TableProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Table, TableColumnProps, TableProps, TableRowProps, VariantProps, tableVariants };
+//# sourceMappingURL=Table.d.cts.map

package/dist/Table/Table.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.cts","names":[],"sources":["../../src/Table/Table.tsx"],"mappings":";;;;cAgBa,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCd,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KACrC,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,gBAAA;EACf,GAAA;EACA,KAAA,EAAO,SAAS;AAAA;AAAA,UAGD,aAAA;EACf,GAAA;EAAA,CACC,GAAA,oBAAuB,SAAS;AAAA;AAAA,UAGlB,UAAA,SAAmB,YAAA;EAHD;EAKjC,SAAA;EAFe;EAIf,aAAA,GAAgB,SAAA;;EAEhB,SAAA,GAAY,SAAA;EAAA;EAEZ,OAAA,EAAS,gBAAA;EAEM;EAAf,YAAA,GAAe,SAAA;EAcR;EAZP,UAAA;EAZ8C;EAc9C,UAAA;EAdkC;EAgBlC,OAAA;EAZA;EAcA,cAAA,GAAiB,SAAA;EAZjB;EAcA,cAAA;EAZA;EAcA,SAAA;EAZA;EAcA,IAAA,GAAO,aAAA;EAZP;EAcA,UAAA;EAVA;EAkBA,YAAA;EAhBiB;EAkBjB,MAAA;EAdA;EAgBA,WAAA;AAAA;;;;cAMI,KAAA;EAAS,SAAA;EAAA,aAAA;EAAA,SAAA;EAAA,OAAA;EAAA,YAAA;EAAA,UAAA;EAAA,UAAA;EAAA,OAAA;EAAA,cAAA;EAAA,cAAA;EAAA,SAAA;EAAA,IAAA;EAAA,UAAA;EAAA,YAAA;EAAA,MAAA;EAAA;AAAA,GAiBZ,UAAA,iCAAU,GAAA,CAAA,OAAA"}

package/dist/Table/Table.d.ts

@@ -0,0 +1,178 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { ReactNode } from "react";
+
+//#region src/Table/Table.d.ts
+declare const tableVariants: import("tailwind-variants").TVReturnType<{
+  separation: {
+    divider: {
+      tr: string;
+    };
+    'divider-x': {
+      tr: string;
+    };
+    'divider-y': {
+      tr: string;
+    };
+    'striped-divider-x': {
+      tr: string;
+      th: string;
+      td: string;
+    };
+    striped: {
+      tr: string;
+      td: string;
+    };
+    none: {};
+  };
+}, {
+  base: string;
+  wrapper: string;
+  table: string;
+  thead: string;
+  tbody: string;
+  tr: string;
+  th: string;
+  td: string;
+  tfoot: string;
+  sortIcon: string;
+  emptyWrapper: string;
+  loadingWrapper: string;
+}, undefined, {
+  separation: {
+    divider: {
+      tr: string;
+    };
+    'divider-x': {
+      tr: string;
+    };
+    'divider-y': {
+      tr: string;
+    };
+    'striped-divider-x': {
+      tr: string;
+      th: string;
+      td: string;
+    };
+    striped: {
+      tr: string;
+      td: string;
+    };
+    none: {};
+  };
+}, {
+  base: string;
+  wrapper: string;
+  table: string;
+  thead: string;
+  tbody: string;
+  tr: string;
+  th: string;
+  td: string;
+  tfoot: string;
+  sortIcon: string;
+  emptyWrapper: string;
+  loadingWrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+  separation: {
+    divider: {
+      tr: string;
+    };
+    'divider-x': {
+      tr: string;
+    };
+    'divider-y': {
+      tr: string;
+    };
+    'striped-divider-x': {
+      tr: string;
+      th: string;
+      td: string;
+    };
+    striped: {
+      tr: string;
+      td: string;
+    };
+    none: {};
+  };
+}, {
+  base: string;
+  wrapper: string;
+  table: string;
+  thead: string;
+  tbody: string;
+  tr: string;
+  th: string;
+  td: string;
+  tfoot: string;
+  sortIcon: string;
+  emptyWrapper: string;
+  loadingWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof tableVariants>;
+type ClassName = TVClassName<typeof tableVariants>;
+interface TableColumnProps {
+  key: string;
+  label: ReactNode;
+}
+interface TableRowProps {
+  key: string | number;
+  [key: string | number]: ReactNode;
+}
+interface TableProps extends VariantProps {
+  /** Aria label for the Table. */
+  ariaLabel?: string;
+  /** Component to display at the bottom of the Table. */
+  bottomContent?: ReactNode;
+  /** CSS class name */
+  className?: ClassName;
+  /** Objects with table data */
+  columns: TableColumnProps[];
+  /** Component to display if there are no rows! */
+  emptyContent?: ReactNode;
+  /** Determine if the Table should have a card like wrapper. */
+  hasWrapper?: boolean;
+  /** remove header */
+  hideHeader?: boolean;
+  /** Tells the Table to show the loading component. */
+  loading?: boolean;
+  /** Loading animation component. */
+  loadingContent?: ReactNode;
+  /** The maximum height of the table in pixels. Required when using virtualization. */
+  maxTableHeight?: number;
+  /** The fixed height of each row item in pixels. Required when using virtualization. */
+  rowHeight?: number;
+  /** Items displayed as rows in the Table. Should have key-value pair for each column. */
+  rows?: TableRowProps[];
+  /** Separation style for the rows & columns. */
+  separation?: 'none' | 'striped' | 'striped-divider-x' | 'divider-x' | 'divider-y' | 'divider';
+  /** Keeps the header of the Table in view while scrolling a height limited Table. */
+  stickyHeader?: boolean;
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+  /** Virtualize allows efficient rendering of large lists by only rendering items that are visible in the viewport. */
+  virtualized?: boolean;
+}
+/**
+ * Table component based on [HeroUI Table](https://www.heroui.com//docs/components/table)
+ */
+declare const Table: ({
+  ariaLabel,
+  bottomContent,
+  className,
+  columns,
+  emptyContent,
+  hasWrapper,
+  hideHeader,
+  loading,
+  loadingContent,
+  maxTableHeight,
+  rowHeight,
+  rows,
+  separation,
+  stickyHeader,
+  testId,
+  virtualized
+}: TableProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Table, TableColumnProps, TableProps, TableRowProps, VariantProps, tableVariants };
+//# sourceMappingURL=Table.d.ts.map

package/dist/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","names":[],"sources":["../../src/Table/Table.tsx"],"mappings":";;;;cAgBa,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCd,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KACrC,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,gBAAA;EACf,GAAA;EACA,KAAA,EAAO,SAAS;AAAA;AAAA,UAGD,aAAA;EACf,GAAA;EAAA,CACC,GAAA,oBAAuB,SAAS;AAAA;AAAA,UAGlB,UAAA,SAAmB,YAAA;EAHD;EAKjC,SAAA;EAFe;EAIf,aAAA,GAAgB,SAAA;;EAEhB,SAAA,GAAY,SAAA;EAAA;EAEZ,OAAA,EAAS,gBAAA;EAEM;EAAf,YAAA,GAAe,SAAA;EAcR;EAZP,UAAA;EAZ8C;EAc9C,UAAA;EAdkC;EAgBlC,OAAA;EAZA;EAcA,cAAA,GAAiB,SAAA;EAZjB;EAcA,cAAA;EAZA;EAcA,SAAA;EAZA;EAcA,IAAA,GAAO,aAAA;EAZP;EAcA,UAAA;EAVA;EAkBA,YAAA;EAhBiB;EAkBjB,MAAA;EAdA;EAgBA,WAAA;AAAA;;;;cAMI,KAAA;EAAS,SAAA;EAAA,aAAA;EAAA,SAAA;EAAA,OAAA;EAAA,YAAA;EAAA,UAAA;EAAA,UAAA;EAAA,OAAA;EAAA,cAAA;EAAA,cAAA;EAAA,SAAA;EAAA,IAAA;EAAA,UAAA;EAAA,YAAA;EAAA,MAAA;EAAA;AAAA,GAiBZ,UAAA,iCAAU,GAAA,CAAA,OAAA"}

package/dist/Table/Table.js

@@ -0,0 +1,73 @@
+import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, getKeyValue } from "@heroui/table";
+//#region src/Table/Table.tsx
+const tableVariants = 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$1 = ({ 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__ */ jsxs(Table, {
+		"aria-label": ariaLabel,
+		bottomContent,
+		classNames: variantsToClassNames(tableVariants({ separation }), className, "base"),
+		"data-testid": testId ? slugify(testId) : null,
+		hideHeader,
+		isHeaderSticky: stickyHeader,
+		isStriped: separation === "striped" || separation === "striped-divider-x",
+		isVirtualized: virtualized,
+		maxTableHeight,
+		removeWrapper: virtualized ? false : !hasWrapper,
+		rowHeight,
+		children: [/* @__PURE__ */ jsx(TableHeader, {
+			columns,
+			children: (column) => {
+				return /* @__PURE__ */ jsx(TableColumn, { children: column.label }, column.key);
+			}
+		}), /* @__PURE__ */ jsx(TableBody, {
+			emptyContent,
+			isLoading: loading,
+			items: rows,
+			loadingContent: loadingContent ?? "...",
+			children: (item) => {
+				return /* @__PURE__ */ jsx(TableRow, { children: (columnKey) => {
+					return /* @__PURE__ */ jsx(TableCell, { children: getKeyValue(item, columnKey) });
+				} }, item.key);
+			}
+		})]
+	});
+};
+//#endregion
+export { Table$1 as default, tableVariants };
+
+//# sourceMappingURL=Table.js.map

package/dist/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":["Table","HeroTable"],"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,gBAAgB,GAAG;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,MAAMA,WAAS,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,qBAACC,OAAD;EACE,cAAY;EACG;EACf,YANe,qBADF,cAAc,EAAE,WAAW,CACG,GAAG,WAAW,MAMpC;EACrB,eAAa,SAAS,QAAQ,MAAM,IAAI;EAC5B;EACZ,gBAAgB;EAChB,WAAW,eAAe,aAAa,eAAe;EACtD,eAAe;EACC;EAChB,eAAe,cAAc,QAAQ,CAAC;EAC3B;YAXb,CAaE,oBAAC,aAAD;GAAsB;cAClB,WAA6B;IAC7B,OAAO,oBAAC,aAAD,EAAA,UAA+B,OAAO,MAAmB,GAAvC,OAAO,GAAgC;GAClE;EACW,CAAA,GACb,oBAAC,WAAD;GACgB;GACd,WAAW;GACX,OAAO;GACP,gBAAgB,kBAAkB;cAEhC,SAAwB;IACxB,OACE,oBAAC,UAAD,EAAA,WAII,cAAc;KACd,OAAO,oBAAC,WAAD,EAAA,UAAY,YAAY,MAAM,SAAS,EAAa,CAAA;IAC7D,EACQ,GANH,KAAK,GAMF;GAEd;EACS,CAAA,CACF;;AAEf"}

package/dist/Table/index.cjs

@@ -1,12 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Table = require("./Table.cjs");
+//#region src/Table/index.ts
+var Table_default = require_Table.default;
+//#endregion
+exports.Table = require_Table.default;
+exports.default = Table_default;
+exports.tableVariants = require_Table.tableVariants;
 
-
-
-var _chunkYUR6N2RBcjs = require('../chunk-YUR6N2RB.cjs');
-require('../chunk-AHEA4IJV.cjs');
-
-
-
-
-exports.Table = _chunkYUR6N2RBcjs.Table_default; exports.default = _chunkYUR6N2RBcjs.Table_default2; exports.tableVariants = _chunkYUR6N2RBcjs.tableVariants;
 //# sourceMappingURL=index.cjs.map

package/dist/Table/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/Table/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACF,6JAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/Table/index.cjs"}
+{"version":3,"file":"index.cjs","names":["Table"],"sources":["../../src/Table/index.ts"],"sourcesContent":["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"],"mappings":";;;;;;AAWA,IAAA,gBAAeA,cAAAA"}

package/dist/Table/index.d.cts

@@ -1,10 +1,2 @@
-import { T as Table } from '../Table-LKaPSY4D.cjs';
-export { c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from '../Table-LKaPSY4D.cjs';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { Table, Table as default };
+import { Table, TableColumnProps, TableProps, TableRowProps, VariantProps, tableVariants } from "./Table.cjs";
+export { Table, Table as default, type TableColumnProps, type TableProps, type TableRowProps, type VariantProps, tableVariants };

package/dist/Table/index.d.ts

@@ -1,10 +1,2 @@
-import { T as Table } from '../Table-LKaPSY4D.js';
-export { c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from '../Table-LKaPSY4D.js';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { Table, Table as default };
+import { Table, TableColumnProps, TableProps, TableRowProps, VariantProps, tableVariants } from "./Table.js";
+export { Table, Table as default, type TableColumnProps, type TableProps, type TableRowProps, type VariantProps, tableVariants };

package/dist/Table/index.js

@@ -1,12 +1,7 @@
-import {
-  Table_default,
-  Table_default2,
-  tableVariants
-} from "../chunk-3SXXVV5T.js";
-import "../chunk-OAIRL2FN.js";
-export {
-  Table_default as Table,
-  Table_default2 as default,
-  tableVariants
-};
+import Table, { tableVariants } from "./Table.js";
+//#region src/Table/index.ts
+var Table_default = Table;
+//#endregion
+export { Table, Table_default as default, tableVariants };
+
 //# sourceMappingURL=index.js.map

package/dist/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Table/index.ts"],"sourcesContent":["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"],"mappings":";;AAWA,IAAA,gBAAe"}

package/dist/Tabs/Tabs.cjs

@@ -0,0 +1,49 @@
+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_tabs = require("@heroui/tabs");
+//#region src/Tabs/Tabs.tsx
+const tabsVariants = (0, _fuf_stack_pixel_utils.tv)({ slots: {
+	base: "",
+	cursor: "",
+	panel: "",
+	tab: "data-[hover-unselected=true]:opacity-100",
+	tabContent: "text-foreground",
+	tabList: "",
+	tabWrapper: ""
+} });
+/**
+* Tabs component based on [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)
+*/
+const Tabs = ({ ariaLabel = void 0, className = void 0, defaultSelectedKey = void 0, destroyInactiveTabPanel = true, disableAnimation = false, disabledKeys = void 0, fullWidth = true, onSelectionChange = void 0, placement = void 0, radius = void 0, selectedKey = void 0, size = "md", tabs, testId = "tab", variant = "solid", vertical = false }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_tabs.Tabs, {
+		"aria-label": ariaLabel,
+		classNames: (0, _fuf_stack_pixel_utils.variantsToClassNames)(tabsVariants(), className, "base"),
+		defaultSelectedKey,
+		destroyInactiveTabPanel,
+		disableAnimation,
+		disabledKeys,
+		fullWidth,
+		isVertical: vertical,
+		items: tabs || [],
+		onSelectionChange,
+		placement,
+		radius,
+		selectedKey,
+		size,
+		variant,
+		children: (item) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_tabs.Tab, {
+				"data-testid": (0, _fuf_stack_pixel_utils.slugify)(`${testId}_${item.testId ?? item.key}`),
+				isDisabled: !!item.disabled,
+				title: item.label,
+				children: item.content
+			}, item.key);
+		}
+	});
+};
+//#endregion
+exports.default = Tabs;
+exports.tabsVariants = tabsVariants;
+
+//# sourceMappingURL=Tabs.cjs.map

package/dist/Tabs/Tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.cjs","names":["HeroTabs","HeroTab"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Tab as HeroTab, Tabs as HeroTabs } from '@heroui/tabs';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const tabsVariants = tv({\n  slots: {\n    base: '',\n    cursor: '',\n    panel: '',\n    tab: 'data-[hover-unselected=true]:opacity-100',\n    tabContent: 'text-foreground',\n    tabList: '',\n    tabWrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof tabsVariants>;\ntype ClassName = TVClassName<typeof tabsVariants>;\n\ntype Key = string | number;\n\nexport interface TabProps {\n  /** Content to be displayed in the tab panel */\n  content: ReactNode;\n  /** Disables the tab so it can not be selected */\n  disabled?: boolean;\n  /** Unique identifier for the tab */\n  key: Key;\n  /** Label content displayed in the tab button */\n  label: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nexport interface TabsProps extends VariantProps {\n  /** Accessible label for the tabs component */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Key of the tab that should be selected by default */\n  defaultSelectedKey?: string | number;\n  /** Whether to destroy inactive tab panel DOM nodes */\n  destroyInactiveTabPanel?: boolean;\n  /** Whether the animation should be disabled. */\n  disableAnimation?: boolean;\n  /** Array of keys for the tabs to disable */\n  disabledKeys?: string[];\n  /** Whether tabs should take up full container width */\n  fullWidth?: boolean;\n  /** Callback fired when tab selection changes */\n  onSelectionChange?: (key: Key | null) => void;\n  /** Position of the tab list relative to the content */\n  placement?: 'top' | 'bottom' | 'start' | 'end' | undefined;\n  /** Radius of the tabs */\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n  /** Selected tab key (controlled) */\n  selectedKey?: Key;\n  /** Size of the tabs */\n  size?: 'sm' | 'md' | 'lg';\n  /** Array of tab configurations */\n  tabs: TabProps[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Style variant of the tabs */\n  variant?: 'bordered' | 'light' | 'solid' | 'underlined';\n  /** Whether to display tabs vertically */\n  vertical?: boolean;\n}\n\n/**\n * Tabs component based on [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst Tabs = ({\n  ariaLabel = undefined,\n  className = undefined,\n  defaultSelectedKey = undefined,\n  destroyInactiveTabPanel = true,\n  disableAnimation = false,\n  disabledKeys = undefined,\n  fullWidth = true,\n  onSelectionChange = undefined,\n  placement = undefined,\n  radius = undefined,\n  selectedKey = undefined,\n  size = 'md',\n  tabs,\n  testId = 'tab',\n  variant = 'solid',\n  vertical = false,\n}: TabsProps) => {\n  const variants = tabsVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroTabs\n      aria-label={ariaLabel}\n      classNames={classNames}\n      defaultSelectedKey={defaultSelectedKey}\n      destroyInactiveTabPanel={destroyInactiveTabPanel}\n      disableAnimation={disableAnimation}\n      disabledKeys={disabledKeys}\n      fullWidth={fullWidth}\n      isVertical={vertical}\n      items={tabs || []}\n      onSelectionChange={onSelectionChange}\n      placement={placement}\n      radius={radius}\n      selectedKey={selectedKey}\n      size={size}\n      variant={variant}\n    >\n      {(item) => {\n        return (\n          <HeroTab\n            key={item.key}\n            data-testid={slugify(`${testId}_${item.testId ?? item.key}`)}\n            isDisabled={!!item.disabled}\n            title={item.label}\n          >\n            {item.content}\n          </HeroTab>\n        );\n      }}\n    </HeroTabs>\n  );\n};\n\nexport default Tabs;\n"],"mappings":";;;;;AAOA,MAAa,gBAAA,GAAA,uBAAA,IAAkB,EAC7B,OAAO;CACL,MAAM;CACN,QAAQ;CACR,OAAO;CACP,KAAK;CACL,YAAY;CACZ,SAAS;CACT,YAAY;AACd,EACF,CAAC;;;;AA0DD,MAAM,QAAQ,EACZ,YAAY,KAAA,GACZ,YAAY,KAAA,GACZ,qBAAqB,KAAA,GACrB,0BAA0B,MAC1B,mBAAmB,OACnB,eAAe,KAAA,GACf,YAAY,MACZ,oBAAoB,KAAA,GACpB,YAAY,KAAA,GACZ,SAAS,KAAA,GACT,cAAc,KAAA,GACd,OAAO,MACP,MACA,SAAS,OACT,UAAU,SACV,WAAW,YACI;CAIf,OACE,iBAAA,GAAA,kBAAA,KAACA,aAAAA,MAAD;EACE,cAAY;EACZ,aAAA,GAAA,uBAAA,sBANa,aAC8B,GAAG,WAAW,MAKpC;EACD;EACK;EACP;EACJ;EACH;EACX,YAAY;EACZ,OAAO,QAAQ,CAAC;EACG;EACR;EACH;EACK;EACP;EACG;aAEP,SAAS;GACT,OACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,KAAD;IAEE,gBAAA,GAAA,uBAAA,SAAqB,GAAG,OAAO,GAAG,KAAK,UAAU,KAAK,KAAK;IAC3D,YAAY,CAAC,CAAC,KAAK;IACnB,OAAO,KAAK;cAEX,KAAK;GACC,GANF,KAAK,GAMH;EAEb;CACQ,CAAA;AAEd"}