npm - @dashforge/tw - Versions diffs - 0.8.0-beta → 0.9.0-beta - Mend

@dashforge/tw 0.8.0-beta → 0.9.0-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (183) hide show

package/test-output/vitest/coverage/src/utils/cn.ts.html ADDED Viewed

@@ -0,0 +1,172 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for src/utils/cn.ts</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../prettify.css" />
+    <link rel="stylesheet" href="../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/utils</a> cn.ts</h1>
+        <div class='clearfix'>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>1/1</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>0/0</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>1/1</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>1/1</span>
+            </div>
+        </div>
+        <p class="quiet">
+            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input type="search" id="fileSearch">
+            </div>
+        </template>
+    </div>
+    <div class='status-line high'></div>
+    <pre><table class="coverage">
+<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
+<a name='L2'></a><a href='#L2'>2</a>
+<a name='L3'></a><a href='#L3'>3</a>
+<a name='L4'></a><a href='#L4'>4</a>
+<a name='L5'></a><a href='#L5'>5</a>
+<a name='L6'></a><a href='#L6'>6</a>
+<a name='L7'></a><a href='#L7'>7</a>
+<a name='L8'></a><a href='#L8'>8</a>
+<a name='L9'></a><a href='#L9'>9</a>
+<a name='L10'></a><a href='#L10'>10</a>
+<a name='L11'></a><a href='#L11'>11</a>
+<a name='L12'></a><a href='#L12'>12</a>
+<a name='L13'></a><a href='#L13'>13</a>
+<a name='L14'></a><a href='#L14'>14</a>
+<a name='L15'></a><a href='#L15'>15</a>
+<a name='L16'></a><a href='#L16'>16</a>
+<a name='L17'></a><a href='#L17'>17</a>
+<a name='L18'></a><a href='#L18'>18</a>
+<a name='L19'></a><a href='#L19'>19</a>
+<a name='L20'></a><a href='#L20'>20</a>
+<a name='L21'></a><a href='#L21'>21</a>
+<a name='L22'></a><a href='#L22'>22</a>
+<a name='L23'></a><a href='#L23'>23</a>
+<a name='L24'></a><a href='#L24'>24</a>
+<a name='L25'></a><a href='#L25'>25</a>
+<a name='L26'></a><a href='#L26'>26</a>
+<a name='L27'></a><a href='#L27'>27</a>
+<a name='L28'></a><a href='#L28'>28</a>
+<a name='L29'></a><a href='#L29'>29</a>
+<a name='L30'></a><a href='#L30'>30</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">28228x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import clsx, { type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+&nbsp;
+/**
+ * className composition helper for Dashforge TW components.
+ *
+ * Wraps `clsx` (for boolean / object / array compaction) with
+ * `tailwind-merge` (for last-wins conflict resolution between
+ * conflicting Tailwind utilities). This is the override contract
+ * that powers `sx` and `slotProps`:
+ *
+ * ```tsx
+ * cn(buttonVariants({ variant: 'solid', color: 'primary' }), sx)
+ * // sx="bg-red-500" beats the variant's `bg-primary-500`.
+ * ```
+ *
+ * Without `tailwind-merge`, Tailwind's stylesheet output order decides
+ * who wins, which is unpredictable for consumers and breaks the
+ * documented "override always wins" semantics.
+ *
+ * @example
+ * ```tsx
+ * &lt;button className={cn('px-4 py-2', isPrimary &amp;&amp; 'bg-primary-500')}&gt;
+ * cn(['inline-flex', { 'opacity-50': disabled }], extra);
+ * ```
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+&nbsp;</pre></td></tr></table></pre>
+                <div class='push'></div><!-- for sticky footer -->
+            </div><!-- /wrapper -->
+            <div class='footer quiet pad2 space-top1 center small'>
+                Code coverage generated by
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at 2026-05-20T08:18:26.407Z
+            </div>
+        <script src="../../prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="../../sorter.js"></script>
+        <script src="../../block-navigation.js"></script>
+    </body>
+</html>

package/test-output/vitest/coverage/src/utils/index.html ADDED Viewed

@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for src/utils</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../prettify.css" />
+    <link rel="stylesheet" href="../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <h1><a href="../../index.html">All files</a> src/utils</h1>
+        <div class='clearfix'>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>1/1</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>0/0</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>1/1</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>1/1</span>
+            </div>
+        </div>
+        <p class="quiet">
+            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input type="search" id="fileSearch">
+            </div>
+        </template>
+    </div>
+    <div class='status-line high'></div>
+    <div class="pad1">
+<table class="coverage-summary">
+<thead>
+<tr>
+   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
+   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
+   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
+   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
+   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
+   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
+   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
+</tr>
+</thead>
+<tbody><tr>
+	<td class="file high" data-value="cn.ts"><a href="cn.ts.html">cn.ts</a></td>
+	<td data-value="100" class="pic high">
+	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
+	</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="1" class="abs high">1/1</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="1" class="abs high">1/1</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="1" class="abs high">1/1</td>
+	</tr>
+</tbody>
+</table>
+</div>
+                <div class='push'></div><!-- for sticky footer -->
+            </div><!-- /wrapper -->
+            <div class='footer quiet pad2 space-top1 center small'>
+                Code coverage generated by
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at 2026-05-20T08:18:26.407Z
+            </div>
+        <script src="../../prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="../../sorter.js"></script>
+        <script src="../../block-navigation.js"></script>
+    </body>
+</html>

package/dist/src/components/DataGrid/visibility/ColumnVisibilityDialog.d.ts DELETED Viewed

@@ -1,33 +0,0 @@
-import type { TableColumn } from '../../Table/table.types.js';
-/**
- * Column visibility dialog for DataGrid.
- *
- * Renders a toolbar button (the trigger) that opens a `<Dialog>` with
- * one checkbox per `hideable` column. The consumer can:
- *  - Show/hide individual columns
- *  - "Show all" / "Hide all" shortcuts
- *  - Persist visibility via the controllable `hiddenColumns` model
- *
- * Columns with `hideable: false` are NEVER shown in the dialog —
- * those are considered structurally required (e.g. an ID column).
- *
- * RBAC-hidden columns (`access.onUnauthorized === 'hide'`) are also
- * excluded — they're already removed from `visibleCols` upstream.
- */
-export interface ColumnVisibilityLabels {
-    columnsButton?: string;
-    columnsTitle?: string;
-    columnsDescription?: string;
-    columnsShowAll?: string;
-    columnsHideAll?: string;
-    columnsDone?: string;
-}
-export interface ColumnVisibilityTriggerProps<T extends object> {
-    cols: TableColumn<T>[];
-    hiddenColumns: string[];
-    onChange: (next: string[]) => void;
-    disabled?: boolean;
-    labels?: ColumnVisibilityLabels;
-}
-export declare function ColumnVisibilityTrigger<T extends object>(props: ColumnVisibilityTriggerProps<T>): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ColumnVisibilityDialog.d.ts.map

package/dist/src/components/DataGrid/visibility/ColumnVisibilityDialog.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ColumnVisibilityDialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/DataGrid/visibility/ColumnVisibilityDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D;;;;;;;;;;;;;;GAcG;AAEH,MAAM,WAAW,sBAAsB;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAWD,MAAM,WAAW,4BAA4B,CAAC,CAAC,SAAS,MAAM;IAC5D,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,sBAAsB,CAAC;CACjC;AAED,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,MAAM,EACtD,KAAK,EAAE,4BAA4B,CAAC,CAAC,CAAC,2CA8CvC"}

package/src/components/DataGrid/visibility/ColumnVisibilityDialog.tsx DELETED Viewed

@@ -1,200 +0,0 @@
-import { useState, useEffect, type ReactNode } from 'react';
-import { Dialog } from '../../Dialog/Dialog.js';
-import { cn } from '../../../utils/cn.js';
-import type { TableColumn } from '../../Table/table.types.js';
-/**
- * Column visibility dialog for DataGrid.
- *
- * Renders a toolbar button (the trigger) that opens a `<Dialog>` with
- * one checkbox per `hideable` column. The consumer can:
- *  - Show/hide individual columns
- *  - "Show all" / "Hide all" shortcuts
- *  - Persist visibility via the controllable `hiddenColumns` model
- *
- * Columns with `hideable: false` are NEVER shown in the dialog —
- * those are considered structurally required (e.g. an ID column).
- *
- * RBAC-hidden columns (`access.onUnauthorized === 'hide'`) are also
- * excluded — they're already removed from `visibleCols` upstream.
- */
-export interface ColumnVisibilityLabels {
-  columnsButton?: string;
-  columnsTitle?: string;
-  columnsDescription?: string;
-  columnsShowAll?: string;
-  columnsHideAll?: string;
-  columnsDone?: string;
-}
-const DEFAULT_VISIBILITY_LABELS: Required<ColumnVisibilityLabels> = {
-  columnsButton: 'Columns',
-  columnsTitle: 'Manage columns',
-  columnsDescription: 'Show or hide columns. Required columns cannot be toggled.',
-  columnsShowAll: 'Show all',
-  columnsHideAll: 'Hide all',
-  columnsDone: 'Done',
-};
-export interface ColumnVisibilityTriggerProps<T extends object> {
-  cols: TableColumn<T>[];
-  hiddenColumns: string[];
-  onChange: (next: string[]) => void;
-  disabled?: boolean;
-  labels?: ColumnVisibilityLabels;
-}
-export function ColumnVisibilityTrigger<T extends object>(
-  props: ColumnVisibilityTriggerProps<T>,
-) {
-  const { cols, hiddenColumns, onChange, disabled, labels: labelsProp } = props;
-  const labels = { ...DEFAULT_VISIBILITY_LABELS, ...labelsProp };
-  const [open, setOpen] = useState(false);
-  // Hideable cols are the only ones the user can toggle. `hideable`
-  // defaults to `true` — a column is hideable unless explicitly opted
-  // out with `hideable: false` (structurally required column).
-  const hideableCols = cols.filter((c) => c.hideable !== false);
-  return (
-    <>
-      <button
-        type="button"
-        onClick={() => setOpen(true)}
-        disabled={disabled}
-        className={cn(
-          'inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md',
-          'text-sm text-neutral-700 hover:text-neutral-900',
-          'border border-neutral-300 bg-neutral-50 hover:bg-neutral-100',
-          'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
-          'transition-colors motion-reduce:transition-none',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
-        )}
-      >
-        <ColumnsIcon />
-        <span>{labels.columnsButton}</span>
-      </button>
-      <Dialog
-        open={open}
-        onOpenChange={setOpen}
-        title={labels.columnsTitle}
-        description={labels.columnsDescription}
-        size="sm"
-      >
-        <ColumnVisibilityBody
-          cols={hideableCols}
-          hiddenColumns={hiddenColumns}
-          onChange={onChange}
-          onDone={() => setOpen(false)}
-          labels={labels}
-        />
-      </Dialog>
-    </>
-  );
-}
-// ───── Dialog body ─────
-function ColumnVisibilityBody<T extends object>(props: {
-  cols: TableColumn<T>[];
-  hiddenColumns: string[];
-  onChange: (next: string[]) => void;
-  onDone: () => void;
-  labels: Required<ColumnVisibilityLabels>;
-}) {
-  const { cols, hiddenColumns, onChange, onDone, labels } = props;
-  // Local draft so the user can stage changes; commit on Done.
-  const [draft, setDraft] = useState<string[]>(hiddenColumns);
-  // Re-sync when the dialog re-opens with a different external state.
-  useEffect(() => {
-    setDraft(hiddenColumns);
-  }, [hiddenColumns]);
-  const toggle = (field: string) => {
-    setDraft((prev) =>
-      prev.includes(field) ? prev.filter((f) => f !== field) : [...prev, field],
-    );
-  };
-  const showAll = () => setDraft([]);
-  const hideAll = () => setDraft(cols.map((c) => c.field as string));
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="flex items-center gap-2 pb-2 border-b border-neutral-200">
-        <button
-          type="button"
-          onClick={showAll}
-          className="text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline"
-        >
-          {labels.columnsShowAll}
-        </button>
-        <span className="text-neutral-300">·</span>
-        <button
-          type="button"
-          onClick={hideAll}
-          className="text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline"
-        >
-          {labels.columnsHideAll}
-        </button>
-      </div>
-      <ul className="flex flex-col gap-1.5 max-h-72 overflow-auto">
-        {cols.map((col) => {
-          const field = col.field as string;
-          const hidden = draft.includes(field);
-          const header =
-            typeof col.header === 'function' ? col.header() : col.header;
-          return (
-            <li key={field}>
-              <label className="flex items-center gap-2 cursor-pointer py-1 px-1 rounded hover:bg-neutral-100">
-                <input
-                  type="checkbox"
-                  checked={!hidden}
-                  onChange={() => toggle(field)}
-                  className="cursor-pointer"
-                />
-                <span className="text-sm text-neutral-900">{header}</span>
-              </label>
-            </li>
-          );
-        })}
-      </ul>
-      <div className="flex justify-end gap-2 pt-2 border-t border-neutral-200">
-        <button
-          type="button"
-          onClick={() => {
-            onChange(draft);
-            onDone();
-          }}
-          className="text-sm bg-primary-500 text-white rounded-md hover:bg-primary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 px-3 py-1.5"
-        >
-          {labels.columnsDone}
-        </button>
-      </div>
-    </div>
-  );
-}
-// ───── Icon ─────
-function ColumnsIcon(): ReactNode {
-  return (
-    <svg
-      width="0.875em"
-      height="0.875em"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <rect x="2" y="3" width="3.5" height="10" rx="0.5" />
-      <rect x="6.25" y="3" width="3.5" height="10" rx="0.5" />
-      <rect x="10.5" y="3" width="3.5" height="10" rx="0.5" />
-    </svg>
-  );
-}