cortena-ui 1.2.0 → 1.3.1

package/src/components/chart/nivo-charts.tsx

@@ -2,10 +2,10 @@
 
 import * as React from "react";
 import { useChart } from "./container";
-import { treeIdentity } from "./data";
+import { isMatrix, matrixToSeries, treeIdentity } from "./data";
 import { useNivoTheme } from "./nivo-theme";
 import { chartScales, contrastLabel, resolveVizSeries, useThemeVersion } from "./tokens";
-import type { ChartConfig, ChartDay, ChartRenderer, ChartScale, ChartSeries, ChartTree, ChartType } from "./types";
+import type { ChartConfig, ChartDay, ChartMatrix, ChartRenderer, ChartScale, ChartSeries, ChartTree, ChartType } from "./types";
 
 export type NivoType = Extract<ChartType, "heatmap" | "calendar" | "treemap" | "sunburst">;
 
@@ -18,16 +18,42 @@ export type NivoType = Extract<ChartType, "heatmap" | "calendar" | "treemap" | "
  */
 type AnyComponent = React.ComponentType<Record<string, unknown>>;
 
-const lazy = (load: () => Promise<AnyComponent>) =>
-  React.lazy(async () => ({ default: await load() }));
+const loaders = {
+  "heatmap-svg": async () => (await import("@nivo/heatmap")).ResponsiveHeatMap as AnyComponent,
+  "heatmap-canvas": async () => (await import("@nivo/heatmap")).ResponsiveHeatMapCanvas as AnyComponent,
+  "calendar-svg": async () => (await import("@nivo/calendar")).ResponsiveCalendar as unknown as AnyComponent,
+  "calendar-canvas": async () =>
+    (await import("@nivo/calendar")).ResponsiveCalendarCanvas as unknown as AnyComponent,
+  "treemap-svg": async () => (await import("@nivo/treemap")).ResponsiveTreeMap as AnyComponent,
+  "treemap-canvas": async () => (await import("@nivo/treemap")).ResponsiveTreeMapCanvas as AnyComponent,
+  "sunburst-svg": async () => (await import("@nivo/sunburst")).ResponsiveSunburst as AnyComponent,
+} satisfies Record<string, () => Promise<AnyComponent>>;
 
-const HeatMapSvg = lazy(async () => (await import("@nivo/heatmap")).ResponsiveHeatMap as AnyComponent);
-const HeatMapCanvas = lazy(async () => (await import("@nivo/heatmap")).ResponsiveHeatMapCanvas as AnyComponent);
-const CalendarSvg = lazy(async () => (await import("@nivo/calendar")).ResponsiveCalendar as unknown as AnyComponent);
-const CalendarCanvas = lazy(async () => (await import("@nivo/calendar")).ResponsiveCalendarCanvas as unknown as AnyComponent);
-const TreeMapSvg = lazy(async () => (await import("@nivo/treemap")).ResponsiveTreeMap as AnyComponent);
-const TreeMapCanvas = lazy(async () => (await import("@nivo/treemap")).ResponsiveTreeMapCanvas as AnyComponent);
-const SunburstSvg = lazy(async () => (await import("@nivo/sunburst")).ResponsiveSunburst as AnyComponent);
+type ChunkName = keyof typeof loaders;
+
+/*
+ * `React.lazy` memoises the outcome of its loader, a rejection included: a
+ * chunk that fails once — an offline moment, a deploy that moved the file —
+ * throws the same error for the life of the page, and no re-render retries it.
+ * The lazy components are therefore cached here rather than frozen at module
+ * scope, and `resetNivoChunks` drops the cache so the next render builds fresh
+ * ones and asks for the chunk again. `Chart`'s ChunkBoundary calls it.
+ */
+let chunks = new Map<ChunkName, AnyComponent>();
+
+function chunk(name: ChunkName): AnyComponent {
+  let component = chunks.get(name);
+  if (!component) {
+    component = React.lazy(async () => ({ default: await loaders[name]() })) as unknown as AnyComponent;
+    chunks.set(name, component);
+  }
+  return component;
+}
+
+/** Forget every loaded-or-failed Nivo chunk, so the next render loads it again. */
+export function resetNivoChunks(): void {
+  chunks = new Map();
+}
 
 export interface NivoRenderProps {
   type: NivoType;
@@ -93,8 +119,9 @@ export function NivoChart({ type, data, config, renderer, scale, legend, valueFo
 
   switch (type) {
     case "heatmap": {
-      const Component = canvas ? HeatMapCanvas : HeatMapSvg;
-      const rows = data as ChartSeries[];
+      const Component = chunk(canvas ? "heatmap-canvas" : "heatmap-svg");
+      // Either shape lands on Nivo's `[{ id, data: [{ x, y }] }]`.
+      const rows = isMatrix(data) ? matrixToSeries(data as ChartMatrix) : (data as ChartSeries[]);
       // Labels only when cells are big enough to carry them.
       const cells = rows.reduce((n, r) => n + r.data.length, 0);
       const colorConfig =
@@ -138,7 +165,7 @@ export function NivoChart({ type, data, config, renderer, scale, legend, valueFo
     }
 
     case "calendar": {
-      const Component = canvas ? CalendarCanvas : CalendarSvg;
+      const Component = chunk(canvas ? "calendar-canvas" : "calendar-svg");
       const days = data as ChartDay[];
       const range = calendarRange(days, from, to);
       return (
@@ -176,7 +203,7 @@ export function NivoChart({ type, data, config, renderer, scale, legend, valueFo
     }
 
     case "treemap": {
-      const Component = canvas ? TreeMapCanvas : TreeMapSvg;
+      const Component = chunk(canvas ? "treemap-canvas" : "treemap-svg");
       const tree = data as ChartTree;
       return (
         <Component
@@ -201,9 +228,11 @@ export function NivoChart({ type, data, config, renderer, scale, legend, valueFo
     }
 
     case "sunburst": {
+      // Sunburst has no canvas renderer; SVG either way.
+      const Component = chunk("sunburst-svg");
       const tree = data as ChartTree;
       return (
-        <SunburstSvg
+        <Component
           data={tree}
           id={treeIdentity(tree)}
           value="value"

package/src/components/chart/types.ts

@@ -21,7 +21,10 @@ import type * as React from "react";
  *   (the Nivo line shape the webchat emits). `ChartRow[]` is also accepted.
  * - **pie**, **donut**, **funnel**: `ChartSlice[]` — `[{ id, label?, value }]`.
  * - **scatter** (alias `scatterplot`): `ChartSeries[]` — one series per group.
- * - **heatmap**: `ChartSeries[]` — Nivo heatmap shape, `[{ id: row, data: [{ x: column, y: value }] }]`.
+ * - **heatmap**: `ChartSeries[]` — Nivo heatmap shape, `[{ id: row, data: [{ x: column, y: value }] }]` —
+ *   or `ChartMatrix`, the categorical form a correlation / confusion matrix
+ *   already has: `{ rows, columns, values }` with `values[r][c]` at
+ *   `rows[r] × columns[c]`.
  * - **calendar**: `ChartDay[]` — `[{ day: "2026-01-31", value }]`; `from`/`to`
  *   default to the data's range.
  * - **treemap**, **sunburst**: `ChartTree` — Nivo tree, `{ id, children?: [...], value? }`
@@ -68,6 +71,18 @@ export interface ChartSlice {
   value: number;
 }
 
+/**
+ * A categorical matrix: `values[r][c]` is the cell at `rows[r]` × `columns[c]`.
+ * The shape a correlation matrix, a confusion matrix or a day × hour grid is
+ * already in, so it needs no pivot at the call site. Short rows are padded
+ * with `null` (drawn as the empty colour) rather than treated as zero.
+ */
+export interface ChartMatrix {
+  rows: string[];
+  columns: string[];
+  values: Array<Array<number | null | undefined>>;
+}
+
 /** One day of a calendar heatmap. */
 export interface ChartDay {
   day: string;
@@ -90,7 +105,9 @@ export type ChartDataFor<T extends ChartType> = T extends "bar" | "radar"
     ? ChartSeries[] | ChartRow[]
     : T extends "pie" | "donut" | "funnel"
       ? ChartSlice[]
-      : T extends "scatter" | "scatterplot" | "heatmap"
+      : T extends "heatmap"
+      ? ChartSeries[] | ChartMatrix
+      : T extends "scatter" | "scatterplot"
         ? ChartSeries[]
         : T extends "calendar"
           ? ChartDay[]

package/src/components/data-table/data-table.tsx

@@ -78,6 +78,16 @@ export interface DataTableViewProps<Row extends RowData> {
   /** Error to show above the table, in addition to the server source's. */
   error?: string | Error | null;
   onRowClick?: (row: Row, event: React.MouseEvent<HTMLTableRowElement>) => void;
+  /**
+   * The row a detail pane is currently showing, matched against the row id
+   * (`getRowId`, the row index when that is not set). It gets `data-active`
+   * and the `--ds-primary-soft` tint, independent of checkbox selection — a
+   * master/detail list highlights one row without selecting it, and a table
+   * with both can show a selected set and one open row at once.
+   */
+  activeRowId?: string | null;
+  /** Extra classes per row, e.g. to dim rows the app considers stale. */
+  rowClassName?: (row: Row) => string | undefined;
 }
 
 export type DataTableProps<Row extends RowData> = DataTableViewProps<Row> &
@@ -112,6 +122,8 @@ function DataTableOwned<Row extends RowData>(props: DataTableViewProps<Row> & Us
     loading,
     error,
     onRowClick,
+    activeRowId,
+    rowClassName,
     ...options
   } = props;
   const instance = useDataTable<Row>({
@@ -140,6 +152,8 @@ function DataTableOwned<Row extends RowData>(props: DataTableViewProps<Row> & Us
       loading={loading}
       error={error}
       onRowClick={onRowClick}
+      activeRowId={activeRowId}
+      rowClassName={rowClassName}
     />
   );
 }
@@ -259,6 +273,8 @@ function DataTableView<Row extends RowData>({
   loading,
   error,
   onRowClick,
+  activeRowId,
+  rowClassName,
 }: DataTableViewProps<Row> & { instance: DataTableInstance<Row> }) {
   const { table, paginationMode } = instance;
   const rows = table.getRowModel().rows;
@@ -446,6 +462,7 @@ function DataTableView<Row extends RowData>({
     const endStart = cells.findIndex((cell) => cell.column.getIsPinned() === "end");
     const splitAt = endStart === -1 ? cells.length : endStart;
     const selected = row.getIsSelected();
+    const active = activeRowId != null && row.id === activeRowId;
     const expanded = renderSubComponent && row.getIsExpanded();
 
     const renderCell = (cell: DataTableCell<Row, any>, c: number) => {
@@ -481,7 +498,7 @@ function DataTableView<Row extends RowData>({
             // Pinned cells cover what scrolls under them, so their background is
             // opaque card with the translucent hover / selected tint layered on.
             pin.pinned &&
-              "z-[1] bg-[var(--ds-card)] group-hover/row:bg-[linear-gradient(var(--ds-hover),var(--ds-hover))] group-data-[selected]/row:bg-[linear-gradient(var(--ds-primary-soft),var(--ds-primary-soft))]",
+              "z-[1] bg-[var(--ds-card)] group-hover/row:bg-[linear-gradient(var(--ds-hover),var(--ds-hover))] group-data-[selected]/row:bg-[linear-gradient(var(--ds-primary-soft),var(--ds-primary-soft))] group-data-[active]/row:bg-[linear-gradient(var(--ds-primary-soft),var(--ds-primary-soft))]",
             pin.pinned === "start" && pin.edge && "shadow-[inset_-1px_0_0_var(--ds-border)]",
             pin.pinned === "end" && pin.edge && "shadow-[inset_1px_0_0_var(--ds-border)]",
             !isEditing && "truncate",
@@ -510,6 +527,7 @@ function DataTableView<Row extends RowData>({
           data-slot="data-table-row"
           data-index={virtualIndex}
           data-selected={selected ? "" : undefined}
+          data-active={active ? "" : undefined}
           data-expanded={expanded ? "" : undefined}
           aria-rowindex={index + 2}
           aria-selected={table.options.enableRowSelection ? selected : undefined}
@@ -518,7 +536,11 @@ function DataTableView<Row extends RowData>({
           className={cn(
             "group/row border-b border-[var(--ds-border-subtle)] transition-colors duration-[var(--ds-duration-fast)]",
             "hover:bg-[var(--ds-hover)] data-[selected]:bg-[var(--ds-primary-soft)]",
+            // Independent of selection: a detail pane highlights one row
+            // without ticking its checkbox.
+            "data-[active]:bg-[var(--ds-primary-soft)]",
             onRowClick && "cursor-pointer",
+            rowClassName?.(row.original),
           )}
         >
           {cells.slice(0, splitAt).map((cell, c) => renderCell(cell, c))}

package/src/components/data-table/export.ts

@@ -54,13 +54,29 @@ export function toSheet<Row extends RowData>(
   };
 }
 
+/**
+ * Text a spreadsheet would evaluate rather than display. Excel, Sheets and
+ * LibreOffice all treat a leading `=`, `+`, `-` or `@` as the start of a
+ * formula, and a leading tab or CR as whitespace they strip before looking
+ * again — so `\t=cmd|'/c calc'!A1` is a formula too. Only strings are checked:
+ * a number, boolean or Date cell cannot carry one, and prefixing `-5` would
+ * turn a number column into text.
+ */
+const FORMULA_START = /^[=+\-@\t\r]/;
+
 function csvField(value: ExportCell): string {
   if (value == null) return "";
-  const text = value instanceof Date ? value.toISOString() : String(value);
+  let text = value instanceof Date ? value.toISOString() : String(value);
+  // Prefix before quoting: the apostrophe is what makes the spreadsheet read
+  // the cell as text, and it has to sit inside the quotes to survive the parse.
+  if (typeof value === "string" && FORMULA_START.test(text)) text = `'${text}`;
   return /[",\n\r]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
 }
 
-/** RFC 4180 text: comma separated, CRLF lines, quotes doubled. */
+/**
+ * RFC 4180 text: comma separated, CRLF lines, quotes doubled. A cell that a
+ * spreadsheet would read as a formula is prefixed with `'` so it stays text.
+ */
 export function toCsv<Row extends RowData>(
   table: DataTableTable<Row>,
   rows?: DataTableRow<Row>[],

package/src/components/data-table/use-server-source.ts

@@ -168,11 +168,23 @@ function useLocalStrategy<Row>(
     : !(state.scopeKey === scopeKey && state.page === query.page && state.pages.length > 0);
   const requestKey = `${scopeKey}|${targetPage}|${tick}`;
 
+  // The consumer's `fetch` is usually an inline arrow — `fetch: q => api.list(q)`
+  // is the documented call — so it is a new function on every parent render.
+  // Depending on it would abort and refire the request each time; the request's
+  // identity is `requestKey`, so the latest function is read from a ref instead.
+  const fetchRef = React.useRef(fetch);
   React.useEffect(() => {
-    if (!fetch || !needs) return;
+    fetchRef.current = fetch;
+  });
+
+  const hasFetch = Boolean(fetch);
+
+  React.useEffect(() => {
+    const run = fetchRef.current;
+    if (!run || !needs) return;
     const controller = new AbortController();
     setState((s) => ({ ...s, isFetching: true }));
-    fetch({ ...scope, page: targetPage }, controller.signal).then(
+    run({ ...scope, page: targetPage }, controller.signal).then(
       (result) => {
         if (controller.signal.aborted) return;
         setState((s) => ({
@@ -189,9 +201,10 @@ function useLocalStrategy<Row>(
       },
     );
     return () => controller.abort();
-    // `requestKey` is the identity of the request; `scope` and `targetPage` derive from it.
+    // `requestKey` is the identity of the request; `scope` and `targetPage` derive
+    // from it. `fetch` itself is held in a ref, so only its presence is a dep.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetch, requestKey, needs]);
+  }, [hasFetch, requestKey, needs]);
 
   // Like keepPreviousData: the last result stays on screen while the next loads.
   const rows = React.useMemo(

package/src/components/dropzone.tsx

@@ -21,6 +21,30 @@ import { cn } from "@/lib/cn";
  * `onFiles` receives only the accepted files; rejections go to `onReject`.
  * `FileList` and `formatFileSize` are separate parts for listing what was
  * picked, so a form can keep the zone and the list in different places.
+ *
+ * ## Wrapping a whole page as a drop target
+ *
+ * `noClick` and `noKeyboard` turn off the two activators that only make sense
+ * on a dashed box: clicking anywhere inside opens the file dialog, and Enter /
+ * Space on the focused root does the same. A page-sized zone wraps content
+ * that has its own buttons and inputs, so both have to go — otherwise every
+ * click in the page opens a file picker.
+ *
+ * ```tsx
+ * <Dropzone noClick noKeyboard onFiles={upload} className="min-h-dvh border-0 bg-transparent p-0">
+ *   {({ isDragActive, open }) => (
+ *     <>
+ *       <PageContent />
+ *       <Button onClick={open}>Browse…</Button>
+ *       {isDragActive ? <DropHint /> : null}
+ *     </>
+ *   )}
+ * </Dropzone>
+ * ```
+ *
+ * The render-prop form gets react-dropzone's `open()`, which is the way back
+ * to the file dialog from a deliberate control. With `noClick` the root also
+ * drops its `cursor-pointer`, since it is no longer clickable.
  */
 
 const UNITS = ["B", "KB", "MB", "GB", "TB"] as const;
@@ -71,6 +95,10 @@ export interface DropzoneProps extends Omit<
   /** Most files accepted per drop; `0` means unlimited. */
   maxFiles?: number;
   disabled?: boolean;
+  /** Do not open the file dialog on click; for a zone that wraps clickable content. @default false */
+  noClick?: boolean;
+  /** Do not open the file dialog on Enter or Space; pair with `noClick`. @default false */
+  noKeyboard?: boolean;
   /** Primary line of the default body. */
   label?: React.ReactNode;
   /** Muted second line of the default body; derived from `accept` and `maxSize` when omitted. */
@@ -87,6 +115,8 @@ function Dropzone({
   maxSize,
   maxFiles,
   disabled = false,
+  noClick = false,
+  noKeyboard = false,
   label,
   hint,
   children,
@@ -100,6 +130,8 @@ function Dropzone({
     maxSize,
     maxFiles,
     disabled,
+    noClick,
+    noKeyboard,
     onDropAccepted: (files) => onFiles(files),
     onDropRejected: (rejections) => onReject?.(rejections),
   });
@@ -168,7 +200,7 @@ function Dropzone({
         className: cn(
           "group/dropzone flex flex-col items-center justify-center gap-2 p-6 text-center",
           "rounded-[var(--ds-radius-lg)] border border-dashed border-[var(--ds-border)] bg-[var(--ds-card)]",
-          "cursor-pointer select-none outline-none",
+          noClick ? "select-none outline-none" : "cursor-pointer select-none outline-none",
           "transition-[border-color,background-color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]",
           "hover:border-[var(--ds-border-strong)] hover:bg-[var(--ds-hover)]",
           "focus-visible:border-[var(--ds-ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40",
@@ -184,6 +216,8 @@ function Dropzone({
       data-reject={isDragReject || undefined}
       data-focused={isFocused || undefined}
       data-disabled={disabled || undefined}
+      data-no-click={noClick || undefined}
+      data-no-keyboard={noKeyboard || undefined}
     >
       <input data-slot="dropzone-input" {...getInputProps()} />
       {body}

package/src/components/section-card.tsx

@@ -29,6 +29,10 @@ export interface SectionCardProps extends Omit<CardProps, "title"> {
  * SectionCard — a Card with a header row (title, description, actions), a
  * body and an optional footer. It composes the Card parts rather than
  * restyling them, so a SectionCard and a hand-built Card look identical.
+ *
+ * `render` is Card's and reaches the outer element, so a section card can be
+ * the landmark it is named after: `render={<section aria-labelledby={id} />}`
+ * with the same `id` on the title, or `render={<aside />}` for a side panel.
  */
 function SectionCard({
   title,

package/src/components/select.tsx

@@ -18,9 +18,38 @@ import { cn } from "@/lib/cn";
  * - `onValueChange` receives `(value, eventDetails)`.
  * - `SelectContent` defaults to the dropdown layout; pass
  *   `alignItemWithTrigger` for Base UI's native-like overlay of the selected item.
+ *
+ * ## Typing the value
+ *
+ * `null` is the cleared / placeholder state, so `onValueChange` always hands
+ * back `Value | null`, never bare `Value`. Name the value type on the element
+ * to keep that union at `string | null` instead of letting inference widen it:
+ *
+ * ```tsx
+ * const [status, setStatus] = useState("");
+ *
+ * <Select<string>
+ *   // "" is not a value any item carries; `|| null` is the placeholder state,
+ *   // which is what makes SelectValue fall back to its `placeholder`.
+ *   value={status || null}
+ *   onValueChange={(next) => setStatus(next ?? "")} // next: string | null
+ * >
+ * ```
+ *
+ * Without the explicit `<string>` the type argument is inferred from `value`,
+ * so a `string | null` value widens `Value` and the handler's parameter turns
+ * into `string | null | null`. Multi-select narrows too:
+ * `<Select<string, true> multiple>` hands back `string[]`, never `null`.
+ *
+ * `SelectProps` is the same props type, for a wrapper that forwards them.
  */
+export type SelectProps<
+  Value = string,
+  Multiple extends boolean | undefined = false,
+> = SelectPrimitive.Root.Props<Value, Multiple>;
+
 function Select<Value, Multiple extends boolean | undefined = false>(
-  props: SelectPrimitive.Root.Props<Value, Multiple>,
+  props: SelectProps<Value, Multiple>,
 ) {
   return <SelectPrimitive.Root {...props} />;
 }

package/src/components/sheet.tsx

@@ -2,7 +2,7 @@
 
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+import * as React from "react";
 import { cn } from "@/lib/cn";
 
 /**
@@ -12,9 +12,43 @@ import { cn } from "@/lib/cn";
  * Description, Close); only the Popup's placement differs, chosen by `side`.
  * `SheetContent` composes Portal + Backdrop + Popup so consumers keep writing
  * `<SheetContent side="right">…</SheetContent>`.
+ *
+ * ## Non-modal side panels
+ *
+ * `modal={false}` is the help-panel / inspector case: a sheet read *alongside*
+ * the app rather than instead of it. No backdrop is rendered, focus is not
+ * trapped, page scroll is not locked, and the rest of the page stays clickable,
+ * so a user can keep working with the panel open. `modal="trap-focus"` is the
+ * middle setting Base UI offers: focus stays inside, the page still scrolls.
+ *
+ * ```tsx
+ * <Sheet modal={false} open={helpOpen} onOpenChange={setHelpOpen}>
+ *   <SheetContent side="right" disablePointerDismissal>…</SheetContent>
+ * </Sheet>
+ * ```
+ *
+ * A non-modal sheet closes when focus or a press leaves it; pass
+ * `disablePointerDismissal` (a Base UI Root prop, forwarded) to keep it open
+ * until the user closes it. `modal` is on the Root because that is where Base
+ * UI reads it; `SheetContent` picks the backdrop up from there through context.
  */
-function Sheet(props: SheetPrimitive.Root.Props) {
-  return <SheetPrimitive.Root {...props} />;
+const SheetModalContext = React.createContext<boolean | "trap-focus">(true);
+
+export interface SheetProps extends SheetPrimitive.Root.Props {
+  /**
+   * `true` (default) traps focus, locks page scroll and draws a backdrop.
+   * `false` draws no backdrop and traps nothing, for a panel read alongside
+   * the app. `"trap-focus"` keeps focus in but leaves the page scrollable.
+   */
+  modal?: boolean | "trap-focus";
+}
+
+function Sheet({ modal = true, ...props }: SheetProps) {
+  return (
+    <SheetModalContext.Provider value={modal}>
+      <SheetPrimitive.Root modal={modal} {...props} />
+    </SheetModalContext.Provider>
+  );
 }
 
 function SheetTrigger(props: SheetPrimitive.Trigger.Props) {
@@ -85,12 +119,14 @@ function SheetContent({
   container,
   ...props
 }: SheetContentProps) {
+  const modal = React.useContext(SheetModalContext);
   return (
     <SheetPortal keepMounted={keepMounted} container={container}>
-      <SheetOverlay />
+      {modal === false ? null : <SheetOverlay />}
       <SheetPrimitive.Popup
         data-slot="sheet-content"
         data-side={side}
+        data-modal={modal === false ? undefined : modal === true ? "" : modal}
         className={cn(sheetVariants({ side }), className)}
         {...props}
       >