@fuf-stack/pixels 0.34.2 → 0.36.0

package/dist/Json/index.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunk264THKFKcjs = require('../chunk-264THKFK.cjs');
+var _chunkZASS525Kcjs = require('../chunk-ZASS525K.cjs');
 require('../chunk-4X43AGXE.cjs');
 require('../chunk-D4TLDLEX.cjs');
 
 
 
-exports.Json = _chunk264THKFKcjs.Json_default; exports.default = _chunk264THKFKcjs.Json_default2;
+exports.Json = _chunkZASS525Kcjs.Json_default; exports.default = _chunkZASS525Kcjs.Json_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Json/index.d.cts

@@ -1,5 +1,5 @@
-import { J as Json } from '../Json-DZue23GO.cjs';
-export { a as JsonProps } from '../Json-DZue23GO.cjs';
+import { J as Json } from '../Json-ngM0f9n2.cjs';
+export { a as JsonProps } from '../Json-ngM0f9n2.cjs';
 import 'react/jsx-runtime';
 import 'react';
 

package/dist/Json/index.d.ts

@@ -1,5 +1,5 @@
-import { J as Json } from '../Json-DZue23GO.js';
-export { a as JsonProps } from '../Json-DZue23GO.js';
+import { J as Json } from '../Json-ngM0f9n2.js';
+export { a as JsonProps } from '../Json-ngM0f9n2.js';
 import 'react/jsx-runtime';
 import 'react';
 

package/dist/Json/index.js

@@ -1,7 +1,7 @@
 import {
   Json_default,
   Json_default2
-} from "../chunk-CA5JB6OY.js";
+} from "../chunk-3JUTQREC.js";
 import "../chunk-HL5BEHIS.js";
 import "../chunk-J7N2552D.js";
 export {

package/dist/{Json-DZue23GO.d.cts → Json-ngM0f9n2.d.cts}

@@ -12,6 +12,8 @@ interface JsonProps {
     maxHeight?: string | number;
     /** Callback when copy action is performed */
     onCopy?: (copiedValue: string) => void;
+    /** Color scheme, if not provided component tries to determine it with next-themes and body dark class */
+    theme?: 'light' | 'dark';
     /** Object to be visualized JSON string or object */
     value: string | object;
 }
@@ -19,6 +21,6 @@ interface JsonProps {
  * Json renderer based on [react-json-view](https://uiwjs.github.io/react-json-view)
  * with improved error handling, accessibility, and customization options
  */
-declare const Json: ({ className, collapsed, value, maxHeight, onCopy, errorRenderer, }: JsonProps) => react_jsx_runtime.JSX.Element;
+declare const Json: ({ className, collapsed, errorRenderer, maxHeight, onCopy, theme, value, }: JsonProps) => react_jsx_runtime.JSX.Element;
 
 export { Json as J, type JsonProps as a };

package/dist/{Json-DZue23GO.d.ts → Json-ngM0f9n2.d.ts}

@@ -12,6 +12,8 @@ interface JsonProps {
     maxHeight?: string | number;
     /** Callback when copy action is performed */
     onCopy?: (copiedValue: string) => void;
+    /** Color scheme, if not provided component tries to determine it with next-themes and body dark class */
+    theme?: 'light' | 'dark';
     /** Object to be visualized JSON string or object */
     value: string | object;
 }
@@ -19,6 +21,6 @@ interface JsonProps {
  * Json renderer based on [react-json-view](https://uiwjs.github.io/react-json-view)
  * with improved error handling, accessibility, and customization options
  */
-declare const Json: ({ className, collapsed, value, maxHeight, onCopy, errorRenderer, }: JsonProps) => react_jsx_runtime.JSX.Element;
+declare const Json: ({ className, collapsed, errorRenderer, maxHeight, onCopy, theme, value, }: JsonProps) => react_jsx_runtime.JSX.Element;
 
 export { Json as J, type JsonProps as a };

package/dist/Table/index.cjs

@@ -2,11 +2,11 @@
 
 
 
-var _chunkCXHVRIPZcjs = require('../chunk-CXHVRIPZ.cjs');
+var _chunk2DCJPDZLcjs = require('../chunk-2DCJPDZL.cjs');
 require('../chunk-D4TLDLEX.cjs');
 
 
 
 
-exports.Table = _chunkCXHVRIPZcjs.Table_default; exports.default = _chunkCXHVRIPZcjs.Table_default2; exports.tableVariants = _chunkCXHVRIPZcjs.tableVariants;
+exports.Table = _chunk2DCJPDZLcjs.Table_default; exports.default = _chunk2DCJPDZLcjs.Table_default2; exports.tableVariants = _chunk2DCJPDZLcjs.tableVariants;
 //# sourceMappingURL=index.cjs.map

package/dist/Table/index.d.cts

@@ -1,5 +1,5 @@
-import { T as Table } from '../Table-mg36Y5qK.cjs';
-export { c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from '../Table-mg36Y5qK.cjs';
+import { T as Table } from '../Table-ClTZfWXT.cjs';
+export { c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from '../Table-ClTZfWXT.cjs';
 import 'react/jsx-runtime';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config.js';

package/dist/Table/index.d.ts

@@ -1,5 +1,5 @@
-import { T as Table } from '../Table-mg36Y5qK.js';
-export { c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from '../Table-mg36Y5qK.js';
+import { T as Table } from '../Table-ClTZfWXT.js';
+export { c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from '../Table-ClTZfWXT.js';
 import 'react/jsx-runtime';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config.js';

package/dist/Table/index.js

@@ -2,7 +2,7 @@ import {
   Table_default,
   Table_default2,
   tableVariants
-} from "../chunk-OVS2CO2K.js";
+} from "../chunk-PACHM4GL.js";
 import "../chunk-J7N2552D.js";
 export {
   Table_default as Table,

package/dist/{Table-mg36Y5qK.d.cts → Table-ClTZfWXT.d.cts}

@@ -235,10 +235,12 @@ interface TableProps extends VariantProps {
     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, rows, separation, stickyHeader, testId, }: TableProps) => react_jsx_runtime.JSX.Element;
+declare const Table: ({ ariaLabel, bottomContent, className, columns, emptyContent, hasWrapper, hideHeader, loading, loadingContent, rows, separation, stickyHeader, testId, virtualized, }: TableProps) => react_jsx_runtime.JSX.Element;
 
 export { Table as T, type VariantProps as V, type TableProps as a, type TableRowProps as b, type TableColumnProps as c, tableVariants as t };

package/dist/{Table-mg36Y5qK.d.ts → Table-ClTZfWXT.d.ts}

@@ -235,10 +235,12 @@ interface TableProps extends VariantProps {
     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, rows, separation, stickyHeader, testId, }: TableProps) => react_jsx_runtime.JSX.Element;
+declare const Table: ({ ariaLabel, bottomContent, className, columns, emptyContent, hasWrapper, hideHeader, loading, loadingContent, rows, separation, stickyHeader, testId, virtualized, }: TableProps) => react_jsx_runtime.JSX.Element;
 
 export { Table as T, type VariantProps as V, type TableProps as a, type TableRowProps as b, type TableColumnProps as c, tableVariants as t };

package/dist/{chunk-CXHVRIPZ.cjs → chunk-2DCJPDZL.cjs}

@@ -62,7 +62,8 @@ var Table = ({
   rows = [],
   separation = "none",
   stickyHeader = false,
-  testId = void 0
+  testId = void 0,
+  virtualized = false
 }) => {
   const variants = tableVariants({ separation });
   const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
@@ -76,6 +77,7 @@ var Table = ({
       hideHeader,
       isHeaderSticky: stickyHeader,
       isStriped: separation === "striped" || separation === "striped-divider-x",
+      isVirtualized: virtualized,
       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) }),
@@ -109,4 +111,4 @@ var Table_default2 = Table_default;
 
 
 exports.tableVariants = tableVariants; exports.Table_default = Table_default; exports.Table_default2 = Table_default2;
-//# sourceMappingURL=chunk-CXHVRIPZ.cjs.map
+//# sourceMappingURL=chunk-2DCJPDZL.cjs.map

package/dist/chunk-2DCJPDZL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-2DCJPDZL.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-2DCJPDZL.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  /** 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  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)}\n      hideHeader={hideHeader}\n      isHeaderSticky={stickyHeader}\n      isStriped={separation === 'striped' || separation === 'striped-divider-x'}\n      isVirtualized={virtualized}\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    </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"]}

package/dist/{chunk-CA5JB6OY.js → chunk-3JUTQREC.js}

@@ -2718,17 +2718,20 @@ var handleCopy = (rawValue, onCopy) => {
 var Json = ({
   className = void 0,
   collapsed = false,
-  value,
+  errorRenderer = void 0,
   maxHeight = void 0,
   onCopy = void 0,
-  errorRenderer = void 0
+  theme = void 0,
+  value
 }) => {
   const [showDetails, setShowDetails] = useState3(false);
   const { resolvedTheme } = useTheme();
-  const isDarkMode = useMemo2(
-    () => resolvedTheme === "dark" || document.body.classList.contains("dark"),
-    [resolvedTheme]
-  );
+  const isDarkMode = useMemo2(() => {
+    if (theme) {
+      return theme === "dark";
+    }
+    return resolvedTheme === "dark" || document.body.classList.contains("dark");
+  }, [resolvedTheme, theme]);
   let content = null;
   let error = null;
   try {
@@ -2780,4 +2783,4 @@ export {
   Json_default,
   Json_default2
 };
-//# sourceMappingURL=chunk-CA5JB6OY.js.map
+//# sourceMappingURL=chunk-3JUTQREC.js.map