orbital-ds 0.9.0 → 0.10.0

package/dist/themes/tactile.tokens.json

@@ -0,0 +1,42 @@
+{
+  "name": "tactile",
+  "light": {
+    "palette": [
+      "#f2b33d",
+      "#17624f",
+      "#2f6fb0",
+      "#b53a22",
+      "#8b5a9e",
+      "#2a649e",
+      "#7a5200",
+      "#ae3821"
+    ],
+    "foreground": "#2a2233",
+    "muted": "rgba(42, 34, 51, 0.7)",
+    "border": "rgba(42, 34, 51, 0.14)",
+    "surface": "#fffcf4",
+    "surfaceForeground": "#2a2233",
+    "fontSans": "'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "fontDisplay": "'Fraunces', Georgia, 'Times New Roman', serif",
+    "motionBaseMs": 160,
+    "motionSlowMs": 240
+  },
+  "dark": {
+    "palette": [
+      "#f2b33d",
+      "#5cc9a8",
+      "#7db3f0",
+      "#ff8266",
+      "#c79ad8"
+    ],
+    "foreground": "#f4ebda",
+    "muted": "rgba(244, 235, 218, 0.72)",
+    "border": "rgba(244, 235, 218, 0.14)",
+    "surface": "#2c2636",
+    "surfaceForeground": "#f4ebda",
+    "fontSans": "'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "fontDisplay": "'Fraunces', Georgia, 'Times New Roman', serif",
+    "motionBaseMs": 160,
+    "motionSlowMs": 240
+  }
+}

package/dist/themes/twitter.css

@@ -266,7 +266,9 @@
   }
 
   /* Tarjetas: planas, con filete, sin elevación */
-  [data-slot='card'] {
+  [data-slot='card'],
+  [data-slot='panel']:is([data-variant='default'], [data-variant='outline']),
+  [data-slot='stat'][data-variant='card'] {
     border: var(--ds-rule-w) solid var(--border);
     box-shadow: none;
   }

package/dist/themes/twitter.scoped.css

@@ -266,7 +266,9 @@
   }
 
   /* Tarjetas: planas, con filete, sin elevación */
-  [data-slot='card'] {
+  [data-slot='card'],
+  [data-slot='panel']:is([data-variant='default'], [data-variant='outline']),
+  [data-slot='stat'][data-variant='card'] {
     border: var(--ds-rule-w) solid var(--border);
     box-shadow: none;
   }

package/dist/themes/twitter.tokens.json

@@ -0,0 +1,45 @@
+{
+  "name": "twitter",
+  "light": {
+    "palette": [
+      "#1d9bf0",
+      "#00ba7c",
+      "#ffd400",
+      "#f91880",
+      "#7856ff",
+      "#1573b1",
+      "#007c53",
+      "#8a6d00",
+      "#d4141f"
+    ],
+    "foreground": "#0f1419",
+    "muted": "#536471",
+    "border": "#eff3f4",
+    "surface": "#ffffff",
+    "surfaceForeground": "#0f1419",
+    "fontSans": "'Chirp', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    "fontDisplay": "'Chirp', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    "motionBaseMs": 200,
+    "motionSlowMs": 300
+  },
+  "dark": {
+    "palette": [
+      "#1d9bf0",
+      "#00ba7c",
+      "#ffd400",
+      "#f91880",
+      "#7856ff",
+      "#4db3f5",
+      "#ff5a64"
+    ],
+    "foreground": "#f7f9f9",
+    "muted": "#8b98a5",
+    "border": "#38444d",
+    "surface": "#1e2732",
+    "surfaceForeground": "#f7f9f9",
+    "fontSans": "'Chirp', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    "fontDisplay": "'Chirp', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    "motionBaseMs": 200,
+    "motionSlowMs": 300
+  }
+}

package/dist/themes/zyro.css

@@ -323,7 +323,9 @@
   }
 
   /* Tarjetas: contenido casi opaco con filo superior luminoso */
-  [data-slot='card'] {
+  [data-slot='card'],
+  [data-slot='panel'][data-variant='default'],
+  [data-slot='stat'][data-variant='card'] {
     border: var(--ds-rule-w) solid var(--zy-card-bs);
     border-top-color: var(--zy-card-bt);
   }

package/dist/themes/zyro.scoped.css

@@ -323,7 +323,9 @@
   }
 
   /* Tarjetas: contenido casi opaco con filo superior luminoso */
-  [data-slot='card'] {
+  [data-slot='card'],
+  [data-slot='panel'][data-variant='default'],
+  [data-slot='stat'][data-variant='card'] {
     border: var(--ds-rule-w) solid var(--zy-card-bs);
     border-top-color: var(--zy-card-bt);
   }

package/dist/themes/zyro.tokens.json

@@ -0,0 +1,46 @@
+{
+  "name": "zyro",
+  "light": {
+    "palette": [
+      "#0349fe",
+      "#14bd44",
+      "#ffb300",
+      "#eb1919",
+      "#9747ff",
+      "#1267a1",
+      "#0b742a",
+      "#845f00",
+      "#c21414"
+    ],
+    "foreground": "rgba(14, 22, 48, 0.92)",
+    "muted": "rgba(14, 22, 48, 0.66)",
+    "border": "rgba(168, 190, 235, 0.3)",
+    "surface": "#ffffff",
+    "surfaceForeground": "rgba(14, 22, 48, 0.92)",
+    "fontSans": "'Roboto', system-ui, -apple-system, sans-serif",
+    "fontDisplay": "'Montserrat', system-ui, -apple-system, sans-serif",
+    "motionBaseMs": 200,
+    "motionSlowMs": 300
+  },
+  "dark": {
+    "palette": [
+      "#36b3ed",
+      "#14bd44",
+      "#ffb300",
+      "#eb1919",
+      "#9747ff",
+      "#70b7e3",
+      "#3cc864",
+      "#ff6b6b"
+    ],
+    "foreground": "rgba(255, 255, 255, 0.94)",
+    "muted": "rgba(255, 255, 255, 0.68)",
+    "border": "rgba(255, 255, 255, 0.07)",
+    "surface": "rgba(22, 32, 68, 0.97)",
+    "surfaceForeground": "rgba(255, 255, 255, 0.94)",
+    "fontSans": "'Roboto', system-ui, -apple-system, sans-serif",
+    "fontDisplay": "'Montserrat', system-ui, -apple-system, sans-serif",
+    "motionBaseMs": 200,
+    "motionSlowMs": 300
+  }
+}

package/dist/ui/calendar.js

@@ -7,6 +7,7 @@ import {
   getDefaultClassNames
 } from "react-day-picker";
 import { Button, buttonVariants } from "./button";
+import { useDsMessages } from "../hooks/use-ds-messages";
 import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react";
 function Calendar({
   className,
@@ -20,6 +21,7 @@ function Calendar({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
+  const t = useDsMessages();
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
@@ -32,6 +34,7 @@ function Calendar({
       ),
       captionLayout,
       locale,
+      labels: { labelPrevious: () => t.calendarPrevious, labelNext: () => t.calendarNext, ...props.labels },
       formatters: {
         formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
         ...formatters
@@ -188,6 +191,7 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
+  const t = useDsMessages();
   const ref = React.useRef(null);
   React.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();

package/dist/ui/code-block.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+declare function CodeBlock({ code, html, language, title, showLineNumbers, copyable, className, ...props }: Omit<React.ComponentProps<"div">, "title"> & {
+    code: string;
+    html?: string;
+    language?: string;
+    title?: React.ReactNode;
+    showLineNumbers?: boolean;
+    copyable?: boolean;
+}): React.JSX.Element;
+/** Código en línea, dentro de un texto. */
+declare function Code({ className, ...props }: React.ComponentProps<"code">): React.JSX.Element;
+
+export { Code, CodeBlock };

package/dist/ui/code-block.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useDsMessages } from "../hooks/use-ds-messages";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+function CodeBlock({
+  code,
+  html,
+  language,
+  title,
+  showLineNumbers = false,
+  copyable = true,
+  className,
+  ...props
+}) {
+  const t = useDsMessages();
+  const [copied, setCopied] = React.useState(false);
+  React.useEffect(() => {
+    if (!copied) return;
+    const id = window.setTimeout(() => setCopied(false), 2e3);
+    return () => window.clearTimeout(id);
+  }, [copied]);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+    } catch {
+    }
+  };
+  const lines = code.replace(/\n$/, "").split("\n");
+  const header = title || language;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "code-block",
+      "data-language": language,
+      className: cn(
+        "group/code-block relative min-w-0 overflow-hidden rounded-code border border-border bg-(--ds-code-bg) text-(--ds-code-fg)",
+        className
+      ),
+      ...props,
+      children: [
+        header && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "code-block-header",
+            className: "flex items-center gap-2 border-b border-border ps-(--ds-code-p) pe-2 py-1 text-xs text-(--ds-code-muted)",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono", children: title ?? language }),
+              title && language && /* @__PURE__ */ jsx("span", { className: "font-mono uppercase", children: language }),
+              copyable && /* @__PURE__ */ jsx(CopyButton, { copied, onCopy: copy, label: copied ? t.codeCopied : t.codeCopy })
+            ]
+          }
+        ),
+        !header && copyable && /* @__PURE__ */ jsx("div", { className: "absolute end-2 top-2 opacity-0 transition-opacity duration-(--ds-motion-snap) group-hover/code-block:opacity-100 group-focus-within/code-block:opacity-100", children: /* @__PURE__ */ jsx(CopyButton, { copied, onCopy: copy, label: copied ? t.codeCopied : t.codeCopy }) }),
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            "data-slot": "code-block-pre",
+            dir: "ltr",
+            className: "overflow-x-auto p-(--ds-code-p) font-mono text-xs leading-relaxed",
+            children: html ? /* @__PURE__ */ jsx("code", { "data-slot": "code-block-code", dangerouslySetInnerHTML: { __html: html } }) : showLineNumbers ? /* @__PURE__ */ jsx("code", { "data-slot": "code-block-code", className: "table", children: lines.map((line, i) => /* @__PURE__ */ jsxs("span", { "data-slot": "code-block-line", className: "table-row", children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "table-cell pe-4 text-end text-(--ds-code-muted) select-none", children: i + 1 }),
+              /* @__PURE__ */ jsx("span", { className: "table-cell whitespace-pre", children: line || " " })
+            ] }, i)) }) : /* @__PURE__ */ jsx("code", { "data-slot": "code-block-code", children: code })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? t.codeCopied : null })
+      ]
+    }
+  );
+}
+function CopyButton({ copied, onCopy, label }) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-slot": "code-block-copy",
+      type: "button",
+      variant: "ghost",
+      size: "icon-xs",
+      "aria-label": label,
+      title: label,
+      onClick: onCopy,
+      children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+    }
+  );
+}
+function Code({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      "data-slot": "code",
+      className: cn(
+        "rounded-sm bg-(--ds-code-bg) px-(--ds-code-inline-px) py-0.5 font-mono text-(length:--ds-code-inline-size) text-(--ds-code-fg)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Code,
+  CodeBlock
+};

package/dist/ui/data-table.d.ts

@@ -0,0 +1,185 @@
+import * as _tanstack_react_table from '@tanstack/react-table';
+import { ColumnDef, SortingState, ColumnFiltersState, ColumnVisibilityState, RowSelectionState } from '@tanstack/react-table';
+import * as React from 'react';
+import { DsDataTone } from './legend.js';
+
+/** Opción de un filtro `select`. */
+interface DataTableFilterOption {
+    value: string;
+    label: React.ReactNode;
+}
+/** `columnDef.meta` de una columna de DataTable. */
+interface DataTableColumnMeta {
+    /** Alineación lógica de cabecera y celdas (por defecto `start`; `end` si es numérica). */
+    align?: "start" | "end" | "center";
+    /** Cifra: tabular-nums, alineada al final, formato Intl del idioma activo; null → «—». */
+    numeric?: boolean;
+    /** Opciones de Intl.NumberFormat para las columnas numéricas. */
+    format?: Intl.NumberFormatOptions;
+    /** Filtro propio de la columna en la barra de herramientas. */
+    filter?: "text" | "select";
+    /** Opciones del filtro `select`. */
+    filterOptions?: DataTableFilterOption[];
+    /** Nombre de la columna (menú de columnas, filtros) cuando la cabecera no es texto. */
+    label?: string;
+    /** Clases extra para la cabecera y las celdas de la columna. */
+    className?: string;
+}
+/**
+ * Lo que sabe hacer la tabla. TanStack Table 9 registra las features de forma
+ * explícita (lo que no está aquí no entra en el bundle ni en los tipos). Los
+ * modelos de filas van detrás de su feature. La paginación la hace DataTable
+ * (recorta una página fuera de rango en vez de mostrar una tabla vacía), por
+ * eso no registra `rowPaginationFeature`.
+ */
+declare const dataTableFeatures: {
+    rowSortingFeature: _tanstack_react_table.TableFeature;
+    columnFilteringFeature: _tanstack_react_table.TableFeature;
+    globalFilteringFeature: _tanstack_react_table.TableFeature;
+    columnVisibilityFeature: _tanstack_react_table.TableFeature;
+    rowSelectionFeature: _tanstack_react_table.TableFeature;
+    sortedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    filteredRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    filterFns: {
+        includesString: _tanstack_react_table.CreatedFilterFn<any, any>;
+        equalsString: _tanstack_react_table.CreatedFilterFn<any, any>;
+    };
+    sortFns: {
+        alphanumeric: _tanstack_react_table.CreatedSortFn<any, any>;
+        text: _tanstack_react_table.CreatedSortFn<any, any>;
+        basic: _tanstack_react_table.CreatedSortFn<any, any>;
+        datetime: _tanstack_react_table.CreatedSortFn<any, any>;
+        number: _tanstack_react_table.CreatedSortFn<any, any>;
+    };
+    columnMeta: DataTableColumnMeta;
+};
+type DataTableFeatures = typeof dataTableFeatures;
+/** Columna de DataTable: así la declaran las pantallas. */
+type DataTableColumn<TData extends object> = ColumnDef<DataTableFeatures, TData, unknown>;
+/** Ayudante tipado para declarar columnas (`helper.accessor("calls", {…})`). */
+declare function createDataTableColumnHelper<TData extends object>(): _tanstack_react_table.ColumnHelper<{
+    rowSortingFeature: _tanstack_react_table.TableFeature;
+    columnFilteringFeature: _tanstack_react_table.TableFeature;
+    globalFilteringFeature: _tanstack_react_table.TableFeature;
+    columnVisibilityFeature: _tanstack_react_table.TableFeature;
+    rowSelectionFeature: _tanstack_react_table.TableFeature;
+    sortedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    filteredRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    filterFns: {
+        includesString: _tanstack_react_table.CreatedFilterFn<any, any>;
+        equalsString: _tanstack_react_table.CreatedFilterFn<any, any>;
+    };
+    sortFns: {
+        alphanumeric: _tanstack_react_table.CreatedSortFn<any, any>;
+        text: _tanstack_react_table.CreatedSortFn<any, any>;
+        basic: _tanstack_react_table.CreatedSortFn<any, any>;
+        datetime: _tanstack_react_table.CreatedSortFn<any, any>;
+        number: _tanstack_react_table.CreatedSortFn<any, any>;
+    };
+    columnMeta: DataTableColumnMeta;
+}, TData>;
+/** Estado completo de la tabla (controlable con `state` / `onStateChange`). */
+interface DataTableState {
+    /** Búsqueda global. */
+    search: string;
+    /** Orden (`[{ id, desc }]`, varias columnas con Mayús). */
+    sorting: SortingState;
+    /** Página, desde 1. */
+    page: number;
+    pageSize: number;
+    columnFilters: ColumnFiltersState;
+    columnVisibility: ColumnVisibilityState;
+    rowSelection: RowSelectionState;
+}
+declare const DATA_TABLE_PAGE_SIZES: readonly [10, 20, 50, 100];
+/**
+ * Estado de la tabla en search params. Lo que está en su valor por defecto no
+ * se escribe (URL limpia). La selección de filas no viaja: es efímera.
+ *
+ * - `q`: búsqueda · `sort`: `col` asc, `-col` desc, varias separadas por comas
+ * - `page` (desde 1) · `size`: filas por página
+ * - `hide`: columnas ocultas separadas por comas
+ * - `f.<columna>`: valor del filtro de esa columna
+ */
+type DataTableSearch = {
+    q?: string;
+    sort?: string;
+    page?: number;
+    size?: number;
+    hide?: string;
+} & {
+    [filter: `f.${string}`]: string | undefined;
+};
+/**
+ * `validateSearch` para rutas con tabla: se queda solo con los valores válidos.
+ * El router puede convertir `?q=123` en número: se pasa a texto. Sin recortar
+ * la búsqueda (se valida en cada pulsación y se comería el espacio recién
+ * escrito); solo se descarta si está vacía.
+ */
+declare function validateDataTableSearch(search: Record<string, unknown>, options?: {
+    pageSizes?: readonly number[];
+}): DataTableSearch;
+/** Search params (validados aquí) → estado parcial para `state`. */
+declare function dataTableStateFromSearch(search: Record<string, unknown>, options?: {
+    pageSizes?: readonly number[];
+}): Partial<DataTableState>;
+/** Estado → search params limpios (sin valores por defecto ni selección). */
+declare function dataTableStateToSearch(state: Partial<DataTableState>, options?: {
+    pageSizes?: readonly number[];
+}): DataTableSearch;
+/** Cifra con el formato Intl del idioma activo; null/undefined/NaN → «—». */
+declare function DataTableNumber({ value, format, className, }: {
+    value: number | null | undefined;
+    format?: Intl.NumberFormatOptions;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Celda de ranking: la cifra y una ProportionBar con su proporción sobre `max`
+ * (p. ej. el mayor valor de la columna). null → «—» y barra rayada de «sin
+ * dato», nunca una barra a 0. La barra es decorativa (aria-hidden): la cifra
+ * ya da el valor al lector de pantalla.
+ */
+declare function DataTableBarCell({ value, max, format, tone, className, }: {
+    value: number | null | undefined;
+    max: number;
+    format?: Intl.NumberFormatOptions;
+    tone?: DsDataTone;
+    className?: string;
+}): React.JSX.Element;
+interface DataTableProps<TData extends object> {
+    columns: DataTableColumn<TData>[];
+    data: TData[];
+    /** Id estable de cada fila (selección que sobrevive a ordenar y filtrar). Por defecto, el índice. */
+    getRowId?: (row: TData, index: number) => string;
+    /** Estado controlado (todo o parte). */
+    state?: Partial<DataTableState>;
+    /** Cada cambio de estado, completo. Buscar, ordenar o filtrar vuelve a la página 1. */
+    onStateChange?: (state: DataTableState) => void;
+    /** Estado inicial cuando no se controla. */
+    defaultState?: Partial<DataTableState>;
+    /** Buscador global (por defecto, sí). */
+    searchable?: boolean;
+    /** Casillas de selección de filas. */
+    selectable?: boolean;
+    /** Menú de columnas visibles (por defecto, sí). */
+    columnToggle?: boolean;
+    /** Opciones de filas por página. */
+    pageSizes?: readonly number[];
+    /** Mientras carga se pintan filas skeleton y la tabla queda aria-busy. */
+    loading?: boolean;
+    /** Qué pintar si no hay filas (por defecto, Empty con «Sin resultados»). */
+    empty?: React.ReactNode;
+    /** Fila pulsable (ratón, Enter o Espacio). */
+    onRowClick?: (row: TData) => void;
+    /** Hueco de la barra de herramientas para acciones de la pantalla. */
+    toolbar?: React.ReactNode;
+    /** Acciones al final de cada fila (botón, menú…). */
+    rowActions?: (row: TData) => React.ReactNode;
+    density?: "comfortable" | "compact";
+    /** Nombre accesible de la tabla. */
+    "aria-label"?: string;
+    className?: string;
+}
+declare function DataTable<TData extends object>({ columns, data, getRowId, state: controlled, onStateChange, defaultState, searchable, selectable, columnToggle, pageSizes, loading, empty, onRowClick, toolbar, rowActions, density, "aria-label": ariaLabel, className, }: DataTableProps<TData>): React.JSX.Element;
+
+export { DATA_TABLE_PAGE_SIZES, DataTable, DataTableBarCell, type DataTableColumn, type DataTableColumnMeta, type DataTableFeatures, type DataTableFilterOption, DataTableNumber, type DataTableProps, type DataTableSearch, type DataTableState, createDataTableColumnHelper, dataTableFeatures, dataTableStateFromSearch, dataTableStateToSearch, validateDataTableSearch };