@fuf-stack/pixels 0.32.1 → 0.32.3

package/dist/chunk-6NC5NOYF.js

@@ -0,0 +1,112 @@
+// src/Table/Table.tsx
+import {
+  getKeyValue,
+  Table as NextTable,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow
+} from "@heroui/table";
+import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var 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: {}
+    }
+  }
+});
+var 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,
+  rows = [],
+  separation = "none",
+  stickyHeader = false,
+  testId = void 0
+}) => {
+  const variants = tableVariants({ separation });
+  const classNames = variantsToClassNames(variants, className, "base");
+  return /* @__PURE__ */ jsxs(
+    NextTable,
+    {
+      "aria-label": ariaLabel,
+      bottomContent,
+      classNames,
+      "data-testid": testId && slugify(testId),
+      hideHeader,
+      isHeaderSticky: stickyHeader,
+      isStriped: separation === "striped" || separation === "striped-divider-x",
+      removeWrapper: !hasWrapper,
+      children: [
+        /* @__PURE__ */ jsx(TableHeader, { columns, children: (column) => /* @__PURE__ */ jsx(TableColumn, { children: column.label }, column.key) }),
+        /* @__PURE__ */ jsx(
+          TableBody,
+          {
+            isLoading: loading,
+            loadingContent: loadingContent || "...",
+            emptyContent,
+            items: rows,
+            children: (item) => /* @__PURE__ */ jsx(
+              TableRow,
+              {
+                children: (columnKey) => /* @__PURE__ */ jsx(TableCell, { children: getKeyValue(item, columnKey) })
+              },
+              item.key
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var Table_default = Table;
+
+// src/Table/index.ts
+var Table_default2 = Table_default;
+
+export {
+  tableVariants,
+  Table_default,
+  Table_default2
+};
+//# sourceMappingURL=chunk-6NC5NOYF.js.map

package/dist/chunk-6NC5NOYF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Table/Table.tsx","../src/Table/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n  getKeyValue,\n  Table as NextTable,\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  /** 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}\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  rows = [],\n  separation = 'none',\n  stickyHeader = false,\n  testId = undefined,\n}: TableProps) => {\n  const variants = tableVariants({ separation });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <NextTable\n      aria-label={ariaLabel}\n      bottomContent={bottomContent}\n      classNames={classNames}\n      data-testid={testId && slugify(testId)}\n      hideHeader={hideHeader}\n      isHeaderSticky={stickyHeader}\n      isStriped={separation === 'striped' || separation === 'striped-divider-x'}\n      removeWrapper={!hasWrapper}\n    >\n      <TableHeader columns={columns}>\n        {(column: TableColumnProps) => (\n          <TableColumn key={column.key}>{column.label}</TableColumn>\n        )}\n      </TableHeader>\n      <TableBody\n        isLoading={loading}\n        loadingContent={loadingContent || '...'} // TODO: use future spinner/loading component\n        emptyContent={emptyContent}\n        items={rows}\n      >\n        {(item: TableRowProps) => (\n          <TableRow\n            key={item.key}\n            // data-testid={`${slugify(testId || 'table')}_item_${slugify(JSON.stringify(item.testId || item.key))}`}\n          >\n            {(columnKey) => (\n              <TableCell>{getKeyValue(item, columnKey)}</TableCell>\n            )}\n          </TableRow>\n        )}\n      </TableBody>\n    </NextTable>\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"],"mappings":";AAGA;AAAA,EACE;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,SAAS,IAAI,4BAA4B;AAiH9C,SAYM,KAZN;AA9GG,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,SAAS;AAAA,QACP,IAAI;AAAA,MACN;AAAA,MACA,aAAa;AAAA,QACX,IAAI;AAAA,MACN;AAAA,MACA,aAAa;AAAA,QACX,IAAI;AAAA,MACN;AAAA,MACA,qBAAqB;AAAA,QACnB,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,MAAM,CAAC;AAAA,IACT;AAAA,EACF;AACF,CAAC;AAqDD,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,EACb,aAAa;AAAA,EACb,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,SAAS;AACX,MAAkB;AAChB,QAAM,WAAW,cAAc,EAAE,WAAW,CAAC;AAC7C,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,eAAa,UAAU,QAAQ,MAAM;AAAA,MACrC;AAAA,MACA,gBAAgB;AAAA,MAChB,WAAW,eAAe,aAAa,eAAe;AAAA,MACtD,eAAe,CAAC;AAAA,MAEhB;AAAA,4BAAC,eAAY,SACV,WAAC,WACA,oBAAC,eAA8B,iBAAO,SAApB,OAAO,GAAmB,GAEhD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,gBAAgB,kBAAkB;AAAA,YAClC;AAAA,YACA,OAAO;AAAA,YAEN,WAAC,SACA;AAAA,cAAC;AAAA;AAAA,gBAIE,WAAC,cACA,oBAAC,aAAW,sBAAY,MAAM,SAAS,GAAE;AAAA;AAAA,cAJtC,KAAK;AAAA,YAMZ;AAAA;AAAA,QAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;ACvJf,IAAOA,iBAAQ;","names":["Table_default"]}

package/dist/chunk-BB7I2MIX.cjs

@@ -0,0 +1,112 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Table/Table.tsx
+
+
+
+
+
+
+
+
+var _table = require('@heroui/table');
+var _pixelutils = require('@fuf-stack/pixel-utils');
+var _jsxruntime = require('react/jsx-runtime');
+var tableVariants = _pixelutils.tv.call(void 0, {
+  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: {}
+    }
+  }
+});
+var 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,
+  rows = [],
+  separation = "none",
+  stickyHeader = false,
+  testId = void 0
+}) => {
+  const variants = tableVariants({ separation });
+  const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _table.Table,
+    {
+      "aria-label": ariaLabel,
+      bottomContent,
+      classNames,
+      "data-testid": testId && _pixelutils.slugify.call(void 0, testId),
+      hideHeader,
+      isHeaderSticky: stickyHeader,
+      isStriped: separation === "striped" || separation === "striped-divider-x",
+      removeWrapper: !hasWrapper,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _table.TableHeader, { columns, children: (column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _table.TableColumn, { children: column.label }, column.key) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _table.TableBody,
+          {
+            isLoading: loading,
+            loadingContent: loadingContent || "...",
+            emptyContent,
+            items: rows,
+            children: (item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _table.TableRow,
+              {
+                children: (columnKey) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _table.TableCell, { children: _table.getKeyValue.call(void 0, item, columnKey) })
+              },
+              item.key
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var Table_default = Table;
+
+// src/Table/index.ts
+var Table_default2 = Table_default;
+
+
+
+
+
+exports.tableVariants = tableVariants; exports.Table_default = Table_default; exports.Table_default2 = Table_default2;
+//# sourceMappingURL=chunk-BB7I2MIX.cjs.map

package/dist/chunk-BB7I2MIX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-BB7I2MIX.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-BB7I2MIX.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n  getKeyValue,\n  Table as NextTable,\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  /** 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}\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  rows = [],\n  separation = 'none',\n  stickyHeader = false,\n  testId = undefined,\n}: TableProps) => {\n  const variants = tableVariants({ separation });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <NextTable\n      aria-label={ariaLabel}\n      bottomContent={bottomContent}\n      classNames={classNames}\n      data-testid={testId && slugify(testId)}\n      hideHeader={hideHeader}\n      isHeaderSticky={stickyHeader}\n      isStriped={separation === 'striped' || separation === 'striped-divider-x'}\n      removeWrapper={!hasWrapper}\n    >\n      <TableHeader columns={columns}>\n        {(column: TableColumnProps) => (\n          <TableColumn key={column.key}>{column.label}</TableColumn>\n        )}\n      </TableHeader>\n      <TableBody\n        isLoading={loading}\n        loadingContent={loadingContent || '...'} // TODO: use future spinner/loading component\n        emptyContent={emptyContent}\n        items={rows}\n      >\n        {(item: TableRowProps) => (\n          <TableRow\n            key={item.key}\n            // data-testid={`${slugify(testId || 'table')}_item_${slugify(JSON.stringify(item.testId || item.key))}`}\n          >\n            {(columnKey) => (\n              <TableCell>{getKeyValue(item, columnKey)}</TableCell>\n            )}\n          </TableRow>\n        )}\n      </TableBody>\n    </NextTable>\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"]}

package/dist/index.cjs

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
+var _chunkBB7I2MIXcjs = require('./chunk-BB7I2MIX.cjs');
+
+
+
 var _chunk2SQEDOXZcjs = require('./chunk-2SQEDOXZ.cjs');
 
 
@@ -16,15 +20,15 @@ var _chunkMWNBYTRNcjs = require('./chunk-MWNBYTRN.cjs');
 var _chunkZXN5DNKQcjs = require('./chunk-ZXN5DNKQ.cjs');
 
 
+var _chunkFFRBORVVcjs = require('./chunk-FFRBORVV.cjs');
 
 
 
 
 
-var _chunkWSM7WMFPcjs = require('./chunk-WSM7WMFP.cjs');
 
 
-var _chunkFFRBORVVcjs = require('./chunk-FFRBORVV.cjs');
+var _chunkWSM7WMFPcjs = require('./chunk-WSM7WMFP.cjs');
 
 
 var _chunkWV3ZDL4Jcjs = require('./chunk-WV3ZDL4J.cjs');
@@ -93,5 +97,7 @@ require('./chunk-D4TLDLEX.cjs');
 
 
 
-exports.Accordion = _chunkXTR4NKDPcjs.Accordion_default; exports.Avatar = _chunkBURI3HTZcjs.Avatar_default; exports.AvatarGroup = _chunkHPLU3CHPcjs.AvatarGroup_default; exports.Badge = _chunkD7KXMNEIcjs.Badge_default; exports.Breadcrumb = _chunkOOFJGGRScjs.Breadcrumb_default; exports.Button = _chunkA4FOULHYcjs.Button_default; exports.ButtonGroup = _chunkA4FOULHYcjs.ButtonGroup_default; exports.Card = _chunkZXN5DNKQcjs.Card_default; exports.Drawer = _chunkWSM7WMFPcjs.Drawer_default; exports.Json = _chunkFFRBORVVcjs.Json_default; exports.Label = _chunkWV3ZDL4Jcjs.Label_default; exports.Menu = _chunkORO34I7Xcjs.Menu_default; exports.Modal = _chunkT7EAVBXLcjs.Modal_default; exports.Popover = _chunkAJLLRWSEcjs.Popover_default; exports.Tabs = _chunk2SQEDOXZcjs.Tabs_default; exports.Tooltip = _chunkXNMTAL3Jcjs.Tooltip_default; exports.accordionVariants = _chunkXTR4NKDPcjs.accordionVariants; exports.breadcrumbVariants = _chunkOOFJGGRScjs.breadcrumbVariants; exports.buttonVariants = _chunkA4FOULHYcjs.buttonVariants; exports.cardVariants = _chunkZXN5DNKQcjs.cardVariants; exports.drawerBackdrops = _chunkWSM7WMFPcjs.drawerBackdrops; exports.drawerPlacements = _chunkWSM7WMFPcjs.drawerPlacements; exports.drawerRadii = _chunkWSM7WMFPcjs.drawerRadii; exports.drawerSizes = _chunkWSM7WMFPcjs.drawerSizes; exports.drawerVariants = _chunkWSM7WMFPcjs.drawerVariants; exports.modalVariants = _chunkT7EAVBXLcjs.modalVariants; exports.tabsVariants = _chunk2SQEDOXZcjs.tabsVariants; exports.tooltipPlacementOptions = _chunkXNMTAL3Jcjs.tooltipPlacementOptions; exports.useDebounce = _chunkMWNBYTRNcjs.useDebounce; exports.useLocalStorage = _chunkMWNBYTRNcjs.useLocalStorage;
+
+
+exports.Accordion = _chunkXTR4NKDPcjs.Accordion_default; exports.Avatar = _chunkBURI3HTZcjs.Avatar_default; exports.AvatarGroup = _chunkHPLU3CHPcjs.AvatarGroup_default; exports.Badge = _chunkD7KXMNEIcjs.Badge_default; exports.Breadcrumb = _chunkOOFJGGRScjs.Breadcrumb_default; exports.Button = _chunkA4FOULHYcjs.Button_default; exports.ButtonGroup = _chunkA4FOULHYcjs.ButtonGroup_default; exports.Card = _chunkZXN5DNKQcjs.Card_default; exports.Drawer = _chunkWSM7WMFPcjs.Drawer_default; exports.Json = _chunkFFRBORVVcjs.Json_default; exports.Label = _chunkWV3ZDL4Jcjs.Label_default; exports.Menu = _chunkORO34I7Xcjs.Menu_default; exports.Modal = _chunkT7EAVBXLcjs.Modal_default; exports.Popover = _chunkAJLLRWSEcjs.Popover_default; exports.Table = _chunkBB7I2MIXcjs.Table_default; exports.Tabs = _chunk2SQEDOXZcjs.Tabs_default; exports.Tooltip = _chunkXNMTAL3Jcjs.Tooltip_default; exports.accordionVariants = _chunkXTR4NKDPcjs.accordionVariants; exports.breadcrumbVariants = _chunkOOFJGGRScjs.breadcrumbVariants; exports.buttonVariants = _chunkA4FOULHYcjs.buttonVariants; exports.cardVariants = _chunkZXN5DNKQcjs.cardVariants; exports.drawerBackdrops = _chunkWSM7WMFPcjs.drawerBackdrops; exports.drawerPlacements = _chunkWSM7WMFPcjs.drawerPlacements; exports.drawerRadii = _chunkWSM7WMFPcjs.drawerRadii; exports.drawerSizes = _chunkWSM7WMFPcjs.drawerSizes; exports.drawerVariants = _chunkWSM7WMFPcjs.drawerVariants; exports.modalVariants = _chunkT7EAVBXLcjs.modalVariants; exports.tableVariants = _chunkBB7I2MIXcjs.tableVariants; exports.tabsVariants = _chunk2SQEDOXZcjs.tabsVariants; exports.tooltipPlacementOptions = _chunkXNMTAL3Jcjs.tooltipPlacementOptions; exports.useDebounce = _chunkMWNBYTRNcjs.useDebounce; exports.useLocalStorage = _chunkMWNBYTRNcjs.useLocalStorage;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,qoDAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/index.cjs"}
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,+uDAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/index.cjs"}

package/dist/index.d.cts

@@ -11,6 +11,7 @@ export { L as Label, a as LabelProps } from './Label-BH0taC2T.cjs';
 export { M as Menu, b as MenuItem, a as MenuProps, c as MenuSection } from './Menu-C7lpY7pY.cjs';
 export { M as Modal, a as ModalProps, m as modalVariants } from './Modal-DI5ZdS_3.cjs';
 export { _ as Popover, P as PopoverProps } from './Popover-Db9vCWrz.cjs';
+export { T as Table, c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from './Table-mg36Y5qK.cjs';
 export { b as TabProps, T as Tabs, a as TabsProps, t as tabsVariants } from './Tabs-XIux-c3p.cjs';
 export { T as Tooltip, a as TooltipProps, t as tooltipPlacementOptions } from './Tooltip-Bsq7nJLh.cjs';
 export { useDebounce, useLocalStorage } from './hooks/index.cjs';

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { L as Label, a as LabelProps } from './Label-BH0taC2T.js';
 export { M as Menu, b as MenuItem, a as MenuProps, c as MenuSection } from './Menu-C7lpY7pY.js';
 export { M as Modal, a as ModalProps, m as modalVariants } from './Modal-DI5ZdS_3.js';
 export { _ as Popover, P as PopoverProps } from './Popover-Db9vCWrz.js';
+export { T as Table, c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from './Table-mg36Y5qK.js';
 export { b as TabProps, T as Tabs, a as TabsProps, t as tabsVariants } from './Tabs-XIux-c3p.js';
 export { T as Tooltip, a as TooltipProps, t as tooltipPlacementOptions } from './Tooltip-Bsq7nJLh.js';
 export { useDebounce, useLocalStorage } from './hooks/index.js';

package/dist/index.js

@@ -1,3 +1,7 @@
+import {
+  Table_default,
+  tableVariants
+} from "./chunk-6NC5NOYF.js";
 import {
   Tabs_default,
   tabsVariants
@@ -14,6 +18,9 @@ import {
   Card_default,
   cardVariants
 } from "./chunk-XUF52AKP.js";
+import {
+  Json_default
+} from "./chunk-UZPVE6UB.js";
 import {
   Drawer_default,
   drawerBackdrops,
@@ -22,9 +29,6 @@ import {
   drawerSizes,
   drawerVariants
 } from "./chunk-ITOA7Q42.js";
-import {
-  Json_default
-} from "./chunk-UZPVE6UB.js";
 import {
   Label_default
 } from "./chunk-ZZC6S7D2.js";
@@ -77,6 +81,7 @@ export {
   Menu_default as Menu,
   Modal_default as Modal,
   Popover_default as Popover,
+  Table_default as Table,
   Tabs_default as Tabs,
   Tooltip_default as Tooltip,
   accordionVariants,
@@ -89,6 +94,7 @@ export {
   drawerSizes,
   drawerVariants,
   modalVariants,
+  tableVariants,
   tabsVariants,
   tooltipPlacementOptions,
   useDebounce,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fuf-stack/pixels",
   "description": "fuf core react component library",
   "author": "Hannes Tiede",
-  "version": "0.32.1",
+  "version": "0.32.3",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -172,10 +172,10 @@
     "@uiw/react-json-view": "2.0.0-alpha.30",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "@repo/storybook-config": "0.0.1",
     "@repo/tailwind-config": "0.0.1",
     "@repo/tsup-config": "0.0.1",
-    "@repo/vite-config": "0.0.1"
+    "@repo/vite-config": "0.0.1",
+    "@repo/storybook-config": "0.0.1"
   },
   "scripts": {
     "build": "tsup --config node_modules/@repo/tsup-config/config.ts --dts-resolve",