@carbonid1/design-system 5.4.0 → 5.6.0

package/dist/Table/Table.d.ts

@@ -0,0 +1,3 @@
+import type { TableProps } from './Table.types';
+declare const Table: <Row>({ columns, rows, rowKey, empty }: TableProps<Row>) => import("react/jsx-runtime").JSX.Element;
+export { Table };

package/dist/Table/Table.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../helpers/cn/cn';
+import { cva } from 'class-variance-authority';
+import { defaultCellValue, EM_DASH } from './defaultCellValue';
+/**
+ * Presentational, config-driven table for structured/DB data. Renders semantic
+ * `<table>` markup (no ARIA grid roles) with zero hooks, state, or handlers, so
+ * it can be used directly inside a React Server Component — hence no `'use client'`.
+ *
+ * v1 is display-only. Sort / filter / pagination / selection / virtualization are
+ * intended to land later behind this same API by wrapping an engine (TanStack
+ * Table, React Aria), so the column shape mirrors TanStack's `ColumnDef`.
+ */
+// Header and body cells share one alignment axis; keep it in a single cva so a
+// future option (e.g. `center`) is added in exactly one place.
+const cellAlign = cva('', {
+    variants: {
+        align: { start: 'text-start', end: 'text-end' },
+    },
+    defaultVariants: { align: 'start' },
+});
+const HEADER_CELL = 'px-3 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground';
+const BODY_CELL = 'bg-muted/40 px-3 py-2.5 align-middle text-foreground transition-colors first:rounded-l-lg last:rounded-r-lg group-hover:bg-muted/60';
+const Table = ({ columns, rows, rowKey, empty = EM_DASH }) => (_jsxs("table", { className: "w-full border-separate border-spacing-x-0 border-spacing-y-1 text-sm", children: [_jsx("colgroup", { children: columns.map((column, index) => (_jsx("col", { style: column.width ? { width: column.width } : undefined }, `${column.accessorKey}:${index}`))) }), _jsx("thead", { children: _jsx("tr", { children: columns.map((column, index) => (_jsx("th", { scope: "col", className: cn(HEADER_CELL, cellAlign({ align: column.align })), children: column.header }, `${column.accessorKey}:${index}`))) }) }), _jsx("tbody", { children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length || 1, className: "bg-muted/40 text-muted-foreground rounded-lg px-3 py-6 text-center", children: empty }) })) : (rows.map(row => (_jsx("tr", { className: "group", children: columns.map((column, index) => (_jsx("td", { className: cn(BODY_CELL, cellAlign({ align: column.align })), children: column.render ? column.render(row) : defaultCellValue(row[column.accessorKey]) }, `${column.accessorKey}:${index}`))) }, rowKey(row))))) })] }));
+export { Table };

package/dist/Table/Table.types.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+/**
+ * Column config, intentionally aligned with TanStack Table's `ColumnDef` shape
+ * (`accessorKey` / `header` / cell-style `render`). Keeping this shape means
+ * sort / filter / pagination can later be added by wrapping an engine behind
+ * the same API without breaking consumers.
+ */
+type Column<Row> = {
+    /** Field used for the cell's default text when `render` is omitted. */
+    accessorKey: keyof Row & string;
+    /** Header content for the column. */
+    header: ReactNode;
+    /** Horizontal alignment of the header + cells. Defaults to `start`; use `end` for numbers. */
+    align?: 'start' | 'end';
+    /** Optional fixed column width (any CSS width, e.g. `'8rem'`). Auto-sized when omitted. */
+    width?: string;
+    /** Custom cell renderer; receives the whole row so a cell can compose fields. */
+    render?: (row: Row) => ReactNode;
+};
+type TableProps<Row> = {
+    columns: Column<Row>[];
+    rows: Row[];
+    /** Stable React key per row, e.g. `row => row.id`. */
+    rowKey: (row: Row) => string;
+    /** Rendered in one cell spanning all columns when `rows` is empty. Defaults to a dash. */
+    empty?: ReactNode;
+};
+export type { Column, TableProps };

package/dist/Table/Table.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Table/defaultCellValue.d.ts

@@ -0,0 +1,9 @@
+/** The placeholder glyph for a missing cell value and for the default empty state. */
+export declare const EM_DASH = "\u2014";
+/**
+ * Default text for a cell that has no custom `render`. Only *nullish*
+ * (`null` / `undefined`) collapses to the em dash — every other value is
+ * stringified, so a real `0`, `false`, or `''` still renders instead of being
+ * mistaken for "missing". (The naive `value ? … : '—'` is a bug for those.)
+ */
+export declare const defaultCellValue: (value: unknown) => string;

package/dist/Table/defaultCellValue.js

@@ -0,0 +1,9 @@
+/** The placeholder glyph for a missing cell value and for the default empty state. */
+export const EM_DASH = '—';
+/**
+ * Default text for a cell that has no custom `render`. Only *nullish*
+ * (`null` / `undefined`) collapses to the em dash — every other value is
+ * stringified, so a real `0`, `false`, or `''` still renders instead of being
+ * mistaken for "missing". (The naive `value ? … : '—'` is a bug for those.)
+ */
+export const defaultCellValue = (value) => value == null ? EM_DASH : String(value);

package/dist/index.d.ts

@@ -11,12 +11,16 @@ export { Slider } from './Slider/Slider';
 export { ContextMenu } from './ContextMenu/ContextMenu';
 export { Select } from './Select/Select';
 export type { SelectOption, SelectGroup, SelectOptionState, SelectProps, } from './Select/Select.types';
+export { Table } from './Table/Table';
+export type { Column, TableProps } from './Table/Table.types';
 export { Tooltip } from './Tooltip/Tooltip';
 export { ThemeProvider } from './ThemeProvider/ThemeProvider';
 export { ThemeCycler } from './ThemeCycler/ThemeCycler';
 export { Toaster } from './Toaster/Toaster';
 export { toast } from 'sonner';
 export { useTheme } from 'next-themes';
+export { useHotkeys, useRecordHotkeys, useHotkeysContext, isHotkeyPressed, HotkeysProvider, } from 'react-hotkeys-hook';
+export type { Options, Keys, HotkeyCallback } from 'react-hotkeys-hook';
 export { cn } from './helpers/cn/cn';
 export { getModKey } from './helpers/getModKey/getModKey';
 export { cva } from 'class-variance-authority';

package/dist/index.js

@@ -6,12 +6,14 @@ export { ProgressRing } from './ProgressRing/ProgressRing';
 export { Slider } from './Slider/Slider';
 export { ContextMenu } from './ContextMenu/ContextMenu';
 export { Select } from './Select/Select';
+export { Table } from './Table/Table';
 export { Tooltip } from './Tooltip/Tooltip';
 export { ThemeProvider } from './ThemeProvider/ThemeProvider';
 export { ThemeCycler } from './ThemeCycler/ThemeCycler';
 export { Toaster } from './Toaster/Toaster';
 export { toast } from 'sonner';
 export { useTheme } from 'next-themes';
+export { useHotkeys, useRecordHotkeys, useHotkeysContext, isHotkeyPressed, HotkeysProvider, } from 'react-hotkeys-hook';
 export { cn } from './helpers/cn/cn';
 export { getModKey } from './helpers/getModKey/getModKey';
 export { cva } from 'class-variance-authority';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",
@@ -77,7 +77,7 @@
   },
   "scripts": {
     "build": "tsc",
-    "storybook": "storybook dev -p 7006",
+    "storybook": "storybook dev -p 7006 --no-open",
     "build-storybook": "storybook build",
     "test": "vitest --run",
     "test:watch": "vitest",