@dbcdk/react-components 0.0.2 → 0.0.4

package/dist/styles/themes/dbc/light.css

@@ -0,0 +1,245 @@
+:root {
+  --color-primary: #0c3ee3;
+  --color-primary-hover: #0932b6;
+  --color-secondary: #6b7280;
+  --color-secondary-hover: #4b5563;
+  --color-accent: #ec4899;
+  --color-accent-hover: #be185d;
+
+  --color-highlight: #3b6ff5;
+  --color-hover: var(--opac-bg-light);
+
+  --color-bg-selected: #e8edfd;
+  --color-bg-selected-hover: #dce5fc;
+  --color-border-selected: var(--color-primary);
+
+  --color-background: #ffffff;
+  --color-surface: #ffffff;
+  --color-surface-hover: var(--opac-bg-light);
+  --color-surface-pressed: var(--opac-bg-default);
+  --color-surface-selected: var(--color-bg-selected);
+
+  /* Text */
+  --color-text: #1a1a1a;
+  --color-text-secondary: #374151;
+  --color-text-muted: #5f6368;
+  --color-text-inverse: #ffffff;
+  --color-text-on-primary: var(--color-text-inverse);
+  --color-text-on-secondary: var(--color-text-inverse);
+  --color-text-on-highlight: var(--color-text-inverse);
+
+  /* Links */
+  --color-link: #0c3ee3;
+  --color-link-hover: #0932b6;
+  --color-link-visited: #5b3ee3;
+
+  /* Borders */
+  --color-border: rgba(0, 0, 0, 0.12);
+  --color-border-strong: rgba(0, 0, 0, 0.24);
+  --border-width-thin: 1px;
+  --border-width-thick: 2px;
+
+  /* Opacities (light) */
+  --opac-bg-light: rgba(0, 0, 0, 0.025);
+  --opac-bg-default: rgba(0, 0, 0, 0.05);
+  --opac-bg-dark: rgba(0, 0, 0, 0.1);
+  --opac-bg-brand: rgba(49, 94, 251, 0.05);
+  --opac-bg-light-invert: rgba(255, 255, 255, 0.025);
+  --opac-bg-default-invert: rgba(255, 255, 255, 0.05);
+  --opac-bg-dark-invert: rgba(255, 255, 255, 0.1);
+
+  /* Semantic (Status) */
+  --color-success: #166534;
+  --color-warning: #a05a00;
+  --color-error: #b91c1c;
+  --color-info: #075985;
+
+  --color-bg-success: #ecfdf5;
+  --color-bg-warning: #fff3d1;
+  --color-bg-error: #fef2f2;
+  --color-bg-info: #e0f2fe;
+
+  --color-text-success: #166534;
+  --color-text-warning: #a05a00;
+  --color-text-error: #b91c1c;
+  --color-text-info: #075985;
+
+  --color-border-success: #16a34a;
+  --color-border-warning: #d97706;
+  --color-border-error: #ef4444;
+  --color-border-info: #0284c7;
+
+  /* Disabled */
+  --color-disabled-bg: #f3f4f6;
+  --color-disabled-text: #9ca3af;
+  --color-disabled-border: #e5e7eb;
+
+  /* Focus */
+  --focus-ring-color: #7ea5ff; /* tuned for light backgrounds */
+  --focus-ring: 0 0 0 3px rgba(12, 62, 227, 0.25);
+
+  /* ===== Spacing & Layout ===== */
+  /* 4px base scale */
+  --spacing-2xs: 2px;
+  --spacing-xxs: 4px;
+  --spacing-xs: 8px;
+  --spacing-sm: 12px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 48px;
+  --spacing-3xl: 64px;
+  --spacing-4xl: 96px;
+
+  /* Gutters */
+  --gutter-sm: 12px;
+  --gutter-md: 16px;
+  --gutter-lg: 24px;
+
+  /* Breakpoints & Containers */
+  --bp-xs: 480px;
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1280px;
+
+  --container-xs: 480px;
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+
+  /* ===== Sizing ===== */
+  --icon-size: 20px;
+  --component-size-xs: 20px;
+  --component-size-sm: 30px;
+  --component-size-md: 40px;
+  --component-size-lg: 48px;
+  --component-size-xl: 64px;
+
+  /* Control paddings (horizontal/vertical) */
+  --control-padding-x: 12px;
+  --control-padding-y: 8px;
+
+  /* Border Radius */
+  --border-radius-none: 0;
+  --border-radius-default: 0.25rem;
+  --border-radius-rounded: 2rem;
+  --border-radius-round: 50%;
+  --border-radius-sm: 0.125rem;
+  --border-radius-md: 0.375rem;
+  --border-radius-lg: 0.5rem;
+  --border-radius-xl: 0.75rem;
+
+  /* Density presets (add/subtract from heights/paddings) */
+  --density-compact: -2px;
+  --density-comfortable: 0px;
+  --density-spacious: 4px;
+
+  /* ===== Typography ===== */
+  --font-family:
+    Roboto, Inter, ui-sans-serif, system-ui, 'Segoe UI', 'Helvetica Neue', Arial,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-md: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 24px;
+  --font-size-2xl: 30px;
+
+  /* Fluid helpers (optional) */
+  --font-size-fluid-sm: clamp(14px, 1.2vw, 16px);
+  --font-size-fluid-lg: clamp(18px, 1.6vw, 22px);
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  --letter-spacing-tight: -0.01em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.02em;
+
+  --nav-link-transform: none;
+  --breadcrumb-transform: none;
+  --tab-label-transform: none;
+
+  /* ===== Motion ===== */
+  --transition-fast: 150ms;
+  --transition-normal: 250ms;
+  --transition-slow: 400ms;
+
+  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
+
+  /* ===== Elevation & Overlay ===== */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+
+  --overlay-scrim: rgba(0, 0, 0, 0.5);
+  --backdrop-blur: 8px;
+
+  /* ===== Layers ===== */
+  --z-base: 0;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-banner: 1150;
+  --z-modal: 1200;
+  --z-drawer: 1250;
+  --z-popover: 1300;
+  --z-tooltip: 1400;
+  --z-toast: 1500;
+
+  /* ===== Data Visualization (optional but handy for tags/charts) ===== */
+  --viz-cat-1: #2563eb;
+  --viz-cat-2: #16a34a;
+  --viz-cat-3: #f59e0b;
+  --viz-cat-4: #ef4444;
+  --viz-cat-5: #8b5cf6;
+  --viz-cat-6: #14b8a6;
+
+  --viz-seq-start: #dbeafe;
+  --viz-seq-mid: #60a5fa;
+  --viz-seq-end: #1d4ed8;
+
+  /* ===== Components: Skeletons & Loaders ===== */
+  --skeleton-base: #e5e7eb;
+  --skeleton-pulse: #f3f4f6;
+  --spinner-size: 16px;
+  --spinner-stroke: 2px;
+
+  /* ===== Directionality / Logical Spacing ===== */
+  --space-inline-sm: 8px; /* use with margin-inline, padding-inline, etc. */
+}
+
+/* ===== Accessibility: Reduced Motion (light only) ===== */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --transition-fast: 1ms;
+    --transition-normal: 1ms;
+    --transition-slow: 1ms;
+  }
+  * {
+    animation: none !important;
+    transition-duration: 1ms !important;
+  }
+}
+
+/* ===== Optional: High-Contrast Variant (still light) ===== */
+:root[data-contrast='high'] {
+  --color-border: #4b5563;
+  --color-border-strong: #111827;
+  --focus-ring: 0 0 0 3px #111827;
+}

package/dist/styles/themes/forfatterweb/light.css

@@ -0,0 +1,104 @@
+:root {
+  /* Colors */
+  --color-primary: #1e88e5;
+  --color-primary-hover: #007bb0;
+  --color-highlight: #3b99e0;
+  --focus-ring: 0 0 0 2px #3b99e0;
+  --color-primary-hover: #0932b6;
+  --color-secondary: #6b7280;
+  --color-secondary-hover: #4b5563;
+  --color-accent: #ec4899;
+  --color-accent-hover: #be185d;
+
+  --color-highlight: #0932b6;
+  --color-hover: var(--opac-bg-light);
+
+  --color-background: #ffffff;
+
+  --color-text: #111827;
+  --color-text-on-primary: var(--color-text-inverse);
+  --color-text-on-highlight: var(--color-text-inverse);
+  --color-text-on-secondary: var(--color-text-inverse);
+  --color-text-muted: #6b7280;
+  --color-text-inverse: #ffffff;
+
+  --color-border: #e5e7eb;
+  --color-border-strong: #d1d5db;
+
+  --color-success: #16a34a;
+  --color-warning: #f59e0b;
+  --color-error: #dc2626;
+  --color-info: #0ea5e9;
+
+  --opac-bg-light: rgba(0, 0, 0, 0.025);
+  --opac-bg-default: rgba(0, 0, 0, 0.05);
+  --opac-bg-dark: rgba(0, 0, 0, 0.1);
+  --opac-bg-dark-inverse: rgba(255, 255, 255, 0.1);
+
+  /* Spacing */
+  --spacing-xxs: 0.25rem;
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 0.75rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+
+  --icon-size: 20px;
+
+  --component-size-xs: 1.5rem;
+  --component-size-sm: 2rem;
+  --component-size-md: 2.5rem;
+  --component-size-lg: 3rem;
+  --component-size-xl: 4rem;
+
+  /* Borders */
+
+  --border-width-thin: 1px;
+  --border-width-thick: 2px;
+
+  --border-radius-none: 0;
+  --border-radius-default: 0.25rem;
+  --border-radius-rounded: 2rem;
+  --border-radius-round: 50%;
+
+  /* Typography */
+  --font-family: Roboto, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, monospace;
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 2rem;
+  --font-size-2xl: 3rem;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Overlay */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+
+  /* Transitions */
+  --transition-fast: 150ms ease-in-out;
+  --transition-normal: 250ms ease-in-out;
+  --transition-slow: 400ms ease-in-out;
+
+  --focus-ring: 0 0 0 2px var(--color-primary);
+
+  /* Layers */
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-modal: 1200;
+  --z-popover: 1300;
+  --z-tooltip: 1400;
+}

package/dist/styles/themes/types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/styles/themes/types.d.ts

@@ -0,0 +1,16 @@
+export type ThemeId = string;
+export type ThemeUrls = Record<ThemeId, string>;
+export type ResolveThemeHref = (id: ThemeId) => string | null;
+export type ThemeControllerOptions = {
+    /** Provide either `urls` OR `resolveHref` */
+    urls?: ThemeUrls;
+    resolveHref?: ResolveThemeHref;
+    /** DOM id for the <link> we manage */
+    linkId?: string;
+    /** Preload other themes once the first theme is set */
+    preloadOthers?: boolean;
+    /** Persist selection in localStorage */
+    persist?: boolean;
+    /** LocalStorage key */
+    storageKey?: string;
+};

package/dist/styles/themes/types.js

@@ -0,0 +1 @@
+

package/dist/tanstack.cjs

@@ -0,0 +1,231 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactTable = require('@tanstack/react-table');
+var Table = require('./components/table/Table');
+var ColumnResizer = require('./components/table/components/column-resizer/ColumnResizer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ColumnResizer__default = /*#__PURE__*/_interopDefault(ColumnResizer);
+
+function mapDefsToColumnItems(defs) {
+  if (!(defs == null ? void 0 : defs.length)) return [];
+  return defs.map((def) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    const header = typeof def.header === "string" ? def.header : String((_b = (_a = def.accessorKey) != null ? _a : def.id) != null ? _b : "");
+    const accessor = def.accessorKey;
+    const accessorFn = def.accessorFn;
+    const cell = def.cell;
+    let render;
+    if (typeof cell === "function") {
+      render = (row) => cell({
+        row: { original: row },
+        getValue: () => accessor != null ? row[accessor] : accessorFn ? accessorFn(row) : void 0
+      });
+    } else if (accessorFn) {
+      render = (row) => accessorFn(row);
+    } else if (accessor != null) {
+      render = (row) => row[accessor];
+    }
+    return {
+      header,
+      accessor,
+      sortable: (_c = def.enableSorting) != null ? _c : !!accessor,
+      render,
+      hidden: (_e = (_d = def.meta) == null ? void 0 : _d.hidden) != null ? _e : false,
+      align: (_g = (_f = def.meta) == null ? void 0 : _f.align) != null ? _g : void 0,
+      fitContent: (_i = (_h = def.meta) == null ? void 0 : _h.fitContent) != null ? _i : false,
+      fillWidth: (_k = (_j = def.meta) == null ? void 0 : _j.fillWidth) != null ? _k : false
+    };
+  });
+}
+function TanstackTable({
+  data,
+  dataKey,
+  columns,
+  filterable = [],
+  loading,
+  onRowClick,
+  striped,
+  fillViewport = false,
+  viewportBottomOffset = 0,
+  viewportMin = 120,
+  viewportIncludeMarginTop = false,
+  pageSize,
+  skip,
+  totalItemsCount,
+  onPageChange,
+  variant,
+  size
+}) {
+  var _a, _b;
+  const [sorting, setSorting] = React__namespace.useState([]);
+  const [columnFilters, setColumnFilters] = React__namespace.useState([]);
+  const [columnSizing, setColumnSizing] = React__namespace.useState({});
+  const table = reactTable.useReactTable({
+    data,
+    columns,
+    state: { sorting, columnFilters, columnSizing },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnSizingChange: setColumnSizing,
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    getFilteredRowModel: reactTable.getFilteredRowModel(),
+    enableColumnResizing: true,
+    columnResizeMode: "onChange",
+    defaultColumn: {
+      enableResizing: true,
+      minSize: 80,
+      size: 180,
+      maxSize: 800
+    }
+  });
+  const columnItems = React__namespace.useMemo(() => mapDefsToColumnItems(columns), [columns]);
+  const visibleData = React__namespace.useMemo(
+    () => table.getRowModel().rows.map((r) => r.original),
+    [table, data]
+  );
+  const s = (_a = table.getState().sorting) == null ? void 0 : _a[0];
+  const sortBy = (_b = s == null ? void 0 : s.id) != null ? _b : void 0;
+  const sortDirection = s ? s.desc ? "desc" : "asc" : null;
+  const gridTemplateColumns = React__namespace.useMemo(() => {
+    return columnItems.filter((ci) => !ci.hidden).map((ci) => {
+      var _a2, _b2;
+      const id = String((_a2 = ci.accessor) != null ? _a2 : "");
+      const col = id ? table.getColumn(id) : void 0;
+      const w = (_b2 = col == null ? void 0 : col.getSize) == null ? void 0 : _b2.call(col);
+      if (ci.fillWidth) return "1fr";
+      if (ci.fitContent) return "1%";
+      return `${w != null ? w : 180}px`;
+    }).join(" ");
+  }, [columnItems, table, table.getState().columnSizing]);
+  const columnStyles = React__namespace.useMemo(() => {
+    var _a2;
+    const styles = {};
+    for (const c of table.getAllLeafColumns()) {
+      const id = c.id;
+      const key = (_a2 = c.columnDef.accessorKey) != null ? _a2 : id;
+      const ci = columnItems.find((x) => {
+        var _a3;
+        return String((_a3 = x.accessor) != null ? _a3 : "") === String(key);
+      });
+      if (ci == null ? void 0 : ci.fillWidth) {
+        styles[String(key)] = {
+          width: "auto",
+          minWidth: 0
+        };
+      } else if (ci == null ? void 0 : ci.fitContent) {
+        styles[String(key)] = {
+          width: "1%",
+          whiteSpace: "nowrap"
+        };
+      } else {
+        const w = c.getSize();
+        styles[String(key)] = { width: w, minWidth: w, maxWidth: w };
+      }
+    }
+    return styles;
+  }, [table, table.getState().columnSizing, columnItems]);
+  const headerExtras = React__namespace.useCallback(
+    ({ index }) => {
+      var _a2, _b2, _c, _d;
+      const headerGroups = table.getHeaderGroups();
+      const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
+      const header = leafHeaders[index];
+      if (!header) return null;
+      const canResize = (_c = (_b2 = (_a2 = header.column).getCanResize) == null ? void 0 : _b2.call(_a2)) != null ? _c : false;
+      const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
+      if (!canResize || !handler) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer__default.default, { id: header.column.id, handler });
+    },
+    [table]
+  );
+  const headerBelowRow = React__namespace.useMemo(() => {
+    if (!(filterable == null ? void 0 : filterable.length)) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns,
+          gap: 8
+        },
+        children: columnItems.map((ci) => {
+          var _a2, _b2;
+          const id = String((_a2 = ci.accessor) != null ? _a2 : "");
+          const isFilterable = id && filterable.includes(id);
+          if (!isFilterable) return /* @__PURE__ */ jsxRuntime.jsx("div", {}, id);
+          const col = table.getColumn(id);
+          const value = (_b2 = col == null ? void 0 : col.getFilterValue()) != null ? _b2 : "";
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              value,
+              placeholder: `Filter ${ci.header}`,
+              onChange: (e) => col == null ? void 0 : col.setFilterValue(e.target.value),
+              style: { width: "100%", padding: "4px 6px" }
+            },
+            id
+          );
+        })
+      }
+    );
+  }, [columnItems, filterable, table, table.getState().columnFilters, gridTemplateColumns]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Table.Table,
+    {
+      dataKey,
+      variant,
+      data: visibleData,
+      columns: columnItems,
+      sortBy,
+      sortDirection,
+      onSortChange: (col, dir) => {
+        var _a2;
+        const id = String((_a2 = col.accessor) != null ? _a2 : "");
+        if (!id) return;
+        if (!dir) table.setSorting([]);
+        else table.setSorting([{ id, desc: dir === "desc" }]);
+      },
+      headerExtras,
+      columnStyles,
+      headerBelowRow,
+      loading,
+      onRowClick,
+      striped,
+      fillViewport,
+      viewportBottomOffset,
+      viewportMin,
+      viewportIncludeMarginTop,
+      take: pageSize,
+      skip,
+      totalItemsCount,
+      onPageChange,
+      size
+    }
+  );
+}
+
+exports.TanstackTable = TanstackTable;

package/dist/tanstack.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type ColumnDef } from '@tanstack/react-table';
+import { TableVariant } from './components/table/Table';
+import { PageChangeEvent } from './components/pagination/Pagination';
+type Filterable<T> = Array<keyof T>;
+export declare function TanstackTable<T extends Record<string, any>>({ data, dataKey, columns, filterable, loading, onRowClick, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, pageSize, skip, totalItemsCount, onPageChange, variant, size, }: {
+    data: T[];
+    dataKey: keyof T;
+    columns: ReadonlyArray<ColumnDef<T, any>>;
+    filterable?: Filterable<T>;
+    loading?: boolean;
+    onRowClick?: (row: T) => void;
+    striped?: boolean;
+    fillViewport?: boolean;
+    viewportBottomOffset?: number;
+    viewportMin?: number;
+    viewportIncludeMarginTop?: boolean;
+    pageSize?: number;
+    skip?: number;
+    totalItemsCount?: number;
+    onPageChange?: (e: PageChangeEvent) => void;
+    variant?: TableVariant;
+    size?: 'sm' | 'md';
+}): React.ReactNode;
+export {};