@shibui-ui/ui 1.25.1 → 1.26.1

package/dist/index204.js

@@ -1,165 +1,240 @@
-import { html, nothing } from "lit";
-const ROTATE_SVG = html`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor"
-  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M10 2.5A4.5 4.5 0 1 0 11 6"/>
-  <path d="M10 .5v2h2"/>
-</svg>`;
-const CARET_SVG = html`<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor"
-  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M2 4l3 3 3-3"/>
-</svg>`;
-function swatchGridTemplate(props) {
-  const { rows, selected, onSelect } = props;
+import { nothing, html } from "lit";
+function renderBadge(value, tone) {
+  const label = String(value ?? "");
+  return html`<span class="cell-badge tone-${tone}">${label}</span>`;
+}
+function renderProgress(value, tone) {
+  const pct = Math.min(100, Math.max(0, Number(value) || 0));
+  const toneClass = tone ? `tone-${tone}` : "";
   return html`
-    <div class="cp-swatches">
-      ${rows.map((row) => html`
-        <div class="cp-swatches-row">
-          <span class="cp-swatches-label">${row.label}</span>
-          ${row.colors.map((c) => html`
-            <div
-              class="cp-swatch ${c.value.toLowerCase() === selected.toLowerCase() ? "is-selected" : ""}"
-              style="background:${c.value};"
-              data-name="${c.name ?? ""}"
-              @click="${() => onSelect(c)}"
-              role="button"
-              aria-label="${c.name ?? c.value}"
-            ></div>
-          `)}
-        </div>
-      `)}
+    <div class="cell-progress">
+      <div class="progress-bar">
+        <div class="progress-fill ${toneClass}" style="width:${pct}%"></div>
+      </div>
+      <span class="progress-val">${pct}%</span>
     </div>
   `;
 }
-function pickerPanelTemplate(p) {
-  const { hex, r, g, b, h, s, l, alpha, inputMode, savedColors, showAlpha } = p;
-  const thumbX = s;
-  const thumbY = 100 - l;
-  const cssColor = alpha < 100 ? `rgba(${r},${g},${b},${(alpha / 100).toFixed(2)})` : hex;
-  const alphaGradient = `linear-gradient(to right, transparent, hsl(${h},${s}%,${l}%))`;
-  const inputsBlock = inputMode === "hex" ? html`
-        <div class="cp-input-group" style="flex:3">
-          <input class="cp-input" type="text" .value="${hex}" maxlength="7"
-            @input="${p.onHexInput}">
-          <span class="cp-input-label">HEX</span>
-        </div>
-        ${showAlpha ? html`
-          <div class="cp-input-group" style="flex:1">
-            <input class="cp-input" type="number" .value="${String(Math.round(alpha))}" min="0" max="100"
-              @input="${p.onAlphaNumInput}">
-            <span class="cp-input-label">A%</span>
-          </div>` : nothing}
-      ` : inputMode === "rgb" ? html`
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(r)}" min="0" max="255" @input="${(e) => p.onRgbInput(0, e)}"><span class="cp-input-label">R</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(g)}" min="0" max="255" @input="${(e) => p.onRgbInput(1, e)}"><span class="cp-input-label">G</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(b)}" min="0" max="255" @input="${(e) => p.onRgbInput(2, e)}"><span class="cp-input-label">B</span></div>
-        ${showAlpha ? html`<div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(Math.round(alpha))}" min="0" max="100" @input="${p.onAlphaNumInput}"><span class="cp-input-label">A%</span></div>` : nothing}
-      ` : html`
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(h)}" min="0" max="360" @input="${(e) => p.onHslInput(0, e)}"><span class="cp-input-label">H</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(s)}" min="0" max="100" @input="${(e) => p.onHslInput(1, e)}"><span class="cp-input-label">S%</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(l)}" min="0" max="100" @input="${(e) => p.onHslInput(2, e)}"><span class="cp-input-label">L%</span></div>
-        ${showAlpha ? html`<div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(Math.round(alpha))}" min="0" max="100" @input="${p.onAlphaNumInput}"><span class="cp-input-label">A%</span></div>` : nothing}
-      `;
+function renderAvatar(row, col) {
+  const name = String(row[col.key] ?? "");
+  const initials = col.initialsKey ? String(row[col.initialsKey] ?? "").slice(0, 2).toUpperCase() : name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+  const hint = col.hintKey ? String(row[col.hintKey] ?? "") : "";
   return html`
-    <!-- Canvas 2D -->
-    <div class="cp-canvas"
-      style="background: hsl(${h},100%,50%);"
-      @mousedown="${p.onCanvasMousedown}"
-    >
-      <div class="cp-thumb"
-        style="left:${thumbX}%;top:${thumbY}%;background:${cssColor};"
-      ></div>
-    </div>
-
-    <!-- Sliders -->
-    <div class="cp-sliders">
-      <div class="cp-preview-dot">
-        <div class="cp-preview-color" style="background:${cssColor};"></div>
-      </div>
-      <div class="cp-sliders-stack">
-        <input type="range" class="cp-range cp-range-hue"
-          min="0" max="360" .value="${String(h)}"
-          @input="${p.onHueInput}">
-        ${showAlpha ? html`
-          <div class="cp-alpha-wrap" style="height:10px;">
-            <div class="cp-alpha-checker">
-              <input type="range" class="cp-range cp-range-alpha"
-                min="0" max="100" .value="${String(Math.round(alpha))}"
-                style="background:${alphaGradient};"
-                @input="${p.onAlphaInput}">
-            </div>
-          </div>` : nothing}
+    <div class="cell-avatar">
+      <div class="avatar-circle">${initials}</div>
+      <div class="avatar-text">
+        <span class="avatar-name">${name}</span>
+        ${hint ? html`<span class="avatar-hint">${hint}</span>` : nothing}
       </div>
     </div>
-
-    <!-- Inputs -->
-    <div class="cp-inputs-wrap">
-      <button class="cp-mode-btn" title="Cambiar modo" @click="${p.onModeToggle}">
-        ${ROTATE_SVG}
-      </button>
-      <div style="display:flex;gap:var(--lib-space-xs);flex:1;">
-        ${inputsBlock}
+  `;
+}
+function renderActionsBtn(row, idx, onRowAction) {
+  return html`
+    <button class="actions-btn"
+      aria-label="Acciones"
+      @click="${(e) => {
+    e.stopPropagation();
+    onRowAction(row, idx);
+  }}"
+    >⋯</button>
+  `;
+}
+function renderCell(col, row, idx, onRowAction) {
+  const value = row[col.key];
+  switch (col.type) {
+    case "badge": {
+      const tone = col.toneKey ? String(row[col.toneKey] ?? "inactive") : col.badgeTone ?? "inactive";
+      return renderBadge(value, tone);
+    }
+    case "progress":
+      return renderProgress(value, col.progressTone ?? "");
+    case "avatar":
+      return renderAvatar(row, col);
+    case "actions":
+      return renderActionsBtn(row, idx, onRowAction);
+    case "mono":
+      return html`<span class="cell-mono">${value ?? "—"}</span>`;
+    default:
+      return html`${value ?? "—"}`;
+  }
+}
+function thClasses(col, sortKey, sortDir) {
+  const parts = [];
+  if (col.type === "num") parts.push("cell-num", "is-num");
+  if (col.sticky) parts.push("col-sticky");
+  if (col.sortable) {
+    parts.push("is-sortable");
+    if (sortKey === col.key) parts.push(sortDir === "asc" ? "sort-asc" : "sort-desc");
+  }
+  return parts.join(" ");
+}
+function tdClasses(col) {
+  const parts = [];
+  if (col.type === "num") parts.push("cell-num");
+  if (col.type === "actions") parts.push("cell-actions");
+  if (col.sticky) parts.push("col-sticky");
+  if (col.truncate) parts.push("cell-truncate");
+  return parts.join(" ");
+}
+function rowClass(row, idx, selected) {
+  const state = row._state;
+  const isSelected = selected.has(idx) || state === "selected";
+  const parts = [];
+  if (isSelected) parts.push("is-selected");
+  else if (state) parts.push(`is-${state}`);
+  return parts.join(" ");
+}
+const WIDTHS = ["w-80", "w-60", "w-40", "w-60", "w-80"];
+function renderSkeletonCell(col, idx) {
+  const w = WIDTHS[idx % WIDTHS.length] ?? "w-60";
+  if (col.type === "avatar") return html`
+    <div class="skel-cell">
+      <div class="skel-avatar"></div>
+      <div style="flex:1;display:flex;flex-direction:column;gap:4px;">
+        <div class="skel-line ${w}"></div>
+        <div class="skel-line w-40" style="height:7px;"></div>
       </div>
-    </div>
-
-    <!-- Saved colors -->
-    <div class="cp-saved">
-      <span class="cp-saved-label">Guardados</span>
-      ${savedColors.map((sc) => html`
-        <div class="cp-swatch cp-swatch-sm"
-          style="background:${sc};"
-          data-name="${sc}"
-          @click="${() => p.onSavedClick(sc)}"
-        ></div>
+    </div>`;
+  if (col.type === "badge") return html`<div class="skel-badge"></div>`;
+  if (col.type === "num") return html`<div class="skel-line ${w}" style="margin-left:auto;"></div>`;
+  return html`<div class="skel-line ${w}"></div>`;
+}
+function renderSkeleton(count, cols, selectable) {
+  return html`${Array.from({ length: count }, (_, r) => html`
+    <tr class="tbl-tr">
+      ${selectable ? html`<td class="cell-check"></td>` : nothing}
+      ${cols.map((col, c) => html`
+        <td class="${tdClasses(col)}" style="${col.type === "actions" ? "" : ""}">
+          ${renderSkeletonCell(col, r + c)}
+        </td>
       `)}
-      <button class="cp-saved-add" title="Guardar color actual" @click="${p.onSaveColor}">+</button>
-    </div>
-
-    <!-- Actions -->
-    <div class="cp-actions">
-      <button class="cp-btn cp-btn-cancel" @click="${p.onCancel}">Cancelar</button>
-      <button class="cp-btn cp-btn-ok" @click="${p.onApply}">Aplicar</button>
+    </tr>
+  `)}`;
+}
+function renderEmpty(title, desc, colSpan) {
+  return html`
+    <tr class="empty-row">
+      <td colspan="${colSpan}">
+        <span class="empty-icon">◯</span>
+        <span class="empty-title">${title}</span>
+        <span class="empty-desc">${desc}</span>
+      </td>
+    </tr>
+  `;
+}
+function renderToolbar(p) {
+  const countLabel = p.query ? `${p.filteredTotal} de ${p.totalRows}` : `${p.totalRows} registros`;
+  return html`
+    <div class="tbl-toolbar">
+      ${p.toolbarTitle ? html`<span class="tbl-toolbar-title">${p.toolbarTitle}</span>` : nothing}
+      <span class="tbl-toolbar-count">${countLabel}</span>
+      <input
+        class="tbl-toolbar-search"
+        type="search"
+        placeholder="Buscar…"
+        .value="${p.query}"
+        @input="${(e) => p.onSearch(e.target.value)}"
+      >
+      <slot name="toolbar-actions"></slot>
     </div>
   `;
 }
-function colorPickerTemplate(props) {
-  const {
-    variant,
-    /*label,*/
-    hex,
-    alpha,
-    panelOpen,
-    onTriggerClick
-  } = props;
-  const panel = html`
-    <div class="cp ${variant === "trigger" && panelOpen ? "is-open" : ""}">
-      ${pickerPanelTemplate(props)}
+function buildPageNumbers(current, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = [1];
+  if (current > 3) pages.push("…");
+  const lo = Math.max(2, current - 1);
+  const hi = Math.min(total - 1, current + 1);
+  for (let i = lo; i <= hi; i++) pages.push(i);
+  if (current < total - 2) pages.push("…");
+  pages.push(total);
+  return pages;
+}
+function renderPagination(p) {
+  if (p.pageSize <= 0 || p.totalPages <= 1) return html``;
+  const start = (p.page - 1) * p.pageSize + 1;
+  const end = Math.min(p.page * p.pageSize, p.filteredTotal);
+  const pages = buildPageNumbers(p.page, p.totalPages);
+  return html`
+    <div class="tbl-pagination">
+      <span class="pag-info">${start}–${end} de ${p.filteredTotal}</span>
+
+      <button class="pag-btn" ?disabled="${p.page <= 1}"
+        @click="${() => p.onPageChange(p.page - 1)}">‹</button>
+
+      ${pages.map((pg) => pg === "…" ? html`<span class="pag-sep">…</span>` : html`
+          <button class="pag-btn ${p.page === pg ? "is-active" : ""}"
+            @click="${() => p.onPageChange(pg)}">${pg}</button>
+        `)}
+
+      <button class="pag-btn" ?disabled="${p.page >= p.totalPages}"
+        @click="${() => p.onPageChange(p.page + 1)}">›</button>
     </div>
   `;
-  if (variant === "inline") {
-    return panel;
-  }
-  const cssColor = alpha < 100 ? `rgba(${props.r},${props.g},${props.b},${(alpha / 100).toFixed(2)})` : hex;
+}
+function dataTableTemplate(p) {
+  const colSpan = p.columns.length + (p.selectable ? 1 : 0);
+  const wrapCls = `tbl-wrap${p.stickyHead ? " tbl-sticky-head" : ""}`;
   return html`
-    <div class="cp-trigger-wrap">
-      <button
-        class="cp-trigger ${panelOpen ? "is-open" : ""}"
-        @click="${onTriggerClick}"
-        aria-expanded="${panelOpen}"
-        aria-haspopup="true"
-      >
-        <div class="cp-trigger-dot">
-          <div class="cp-trigger-color" style="background:${cssColor};"></div>
-        </div>
-        <span>${hex.toUpperCase()}</span>
-        ${CARET_SVG}
-      </button>
-      ${panel}
+    ${p.toolbar ? renderToolbar(p) : nothing}
+
+    <div class="${wrapCls}">
+      <table>
+        ${p.caption ? html`<caption>${p.caption}</caption>` : nothing}
+
+        <!-- THEAD -->
+        <thead>
+          <tr>
+            ${p.selectable ? html`
+              <th class="cell-check">
+                <input type="checkbox"
+                  .indeterminate="${p.someSelected}"
+                  .checked="${p.allSelected}"
+                  @change="${(e) => p.onSelectAll(e.target.checked, p.data.length)}">
+              </th>
+            ` : nothing}
+
+            ${p.columns.map((col) => html`
+              <th class="${thClasses(col, p.sortKey, p.sortDir)}"
+                @click="${col.sortable ? () => p.onSort(col.key) : nothing}">
+                ${col.header}
+              </th>
+            `)}
+          </tr>
+        </thead>
+
+        <!-- TBODY -->
+        <tbody>
+          ${p.loading ? renderSkeleton(p.skeletonRows, p.columns, p.selectable) : p.data.length === 0 ? renderEmpty(p.emptyTitle, p.emptyDesc, colSpan) : p.data.map((row, idx) => {
+    const globalIdx = (p.page - 1) * (p.pageSize || 0) + idx;
+    return html`
+                    <tr class="${rowClass(row, globalIdx, p.selected)}">
+                      ${p.selectable ? html`
+                        <td class="cell-check">
+                          <input type="checkbox"
+                            .checked="${p.selected.has(globalIdx)}"
+                            @change="${(e) => p.onSelectRow(globalIdx, e.target.checked)}">
+                        </td>
+                      ` : nothing}
+
+                      ${p.columns.map((col) => html`
+                        <td class="${tdClasses(col)}">
+                          ${renderCell(col, row, globalIdx, p.onRowAction)}
+                        </td>
+                      `)}
+                    </tr>
+                  `;
+  })}
+        </tbody>
+      </table>
     </div>
+
+    ${renderPagination(p)}
+    <slot name="pagination"></slot>
   `;
 }
 export {
-  colorPickerTemplate,
-  pickerPanelTemplate,
-  swatchGridTemplate
+  dataTableTemplate
 };
 //# sourceMappingURL=index204.js.map

package/dist/index204.js.map

@@ -1 +1 @@
-{"version":3,"file":"index204.js","sources":["../src/components/molecules/color-picker/lib-color-picker.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { ColorPickerVariant, ColorInputMode, SwatchRow, SwatchColor } from './lib-color-picker.types';\n\n/* ── Icono ↺ inline para el mode button ── */\nconst ROTATE_SVG = html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\"\n  stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M10 2.5A4.5 4.5 0 1 0 11 6\"/>\n  <path d=\"M10 .5v2h2\"/>\n</svg>`;\n\n/* ── Caret-down para trigger ── */\nconst CARET_SVG = html`<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\"\n  stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M2 4l3 3 3-3\"/>\n</svg>`;\n\n/* ────────────────────────────────────────────\n   Interfaces de props para cada sub-sección\n   ──────────────────────────────────────────── */\n\nexport interface PickerPanelProps {\n  hex:          string;\n  r: number; g: number; b: number;\n  h: number; s: number; l: number;\n  alpha:        number;   // 0–100\n  inputMode:    ColorInputMode;\n  savedColors:  string[];\n  showAlpha:    boolean;\n  /** Callbacks */\n  onCanvasMousedown: (e: MouseEvent) => void;\n  onHueInput:        (e: Event) => void;\n  onAlphaInput:      (e: Event) => void;\n  onModeToggle:      () => void;\n  onHexInput:        (e: Event) => void;\n  onRgbInput:        (rIdx: 0|1|2, e: Event) => void;\n  onHslInput:        (cIdx: 0|1|2, e: Event) => void;\n  onAlphaNumInput:   (e: Event) => void;\n  onSaveColor:       () => void;\n  onSavedClick:      (hex: string) => void;\n  onCancel:          () => void;\n  onApply:           () => void;\n}\n\nexport interface SwatchGridProps {\n  rows:     SwatchRow[];\n  selected: string;\n  onSelect: (color: SwatchColor) => void;\n}\n\n/* ────────────────────────────────────────────\n   Swatch grid template\n   ──────────────────────────────────────────── */\nexport function swatchGridTemplate(props: SwatchGridProps): TemplateResult {\n  const { rows, selected, onSelect } = props;\n  return html`\n    <div class=\"cp-swatches\">\n      ${rows.map(row => html`\n        <div class=\"cp-swatches-row\">\n          <span class=\"cp-swatches-label\">${row.label}</span>\n          ${row.colors.map(c => html`\n            <div\n              class=\"cp-swatch ${c.value.toLowerCase() === selected.toLowerCase() ? 'is-selected' : ''}\"\n              style=\"background:${c.value};\"\n              data-name=\"${c.name ?? ''}\"\n              @click=\"${(): void => onSelect(c)}\"\n              role=\"button\"\n              aria-label=\"${c.name ?? c.value}\"\n            ></div>\n          `)}\n        </div>\n      `)}\n    </div>\n  `;\n}\n\n/* ────────────────────────────────────────────\n   Picker panel template (canvas + sliders + inputs + saved + actions)\n   ──────────────────────────────────────────── */\nexport function pickerPanelTemplate(p: PickerPanelProps): TemplateResult {\n  const { hex, r, g, b, h, s, l, alpha, inputMode, savedColors, showAlpha } = p;\n\n  /* Thumb position: x = saturation %, y = inverted lightness % */\n  const thumbX = s;\n  const thumbY = 100 - l;\n\n  const cssColor = alpha < 100\n    ? `rgba(${r},${g},${b},${(alpha / 100).toFixed(2)})`\n    : hex;\n\n  const alphaGradient =\n    `linear-gradient(to right, transparent, hsl(${h},${s}%,${l}%))`;\n\n  /* Inputs según el modo */\n  const inputsBlock: TemplateResult = inputMode === 'hex'\n    ? html`\n        <div class=\"cp-input-group\" style=\"flex:3\">\n          <input class=\"cp-input\" type=\"text\" .value=\"${hex}\" maxlength=\"7\"\n            @input=\"${p.onHexInput}\">\n          <span class=\"cp-input-label\">HEX</span>\n        </div>\n        ${showAlpha ? html`\n          <div class=\"cp-input-group\" style=\"flex:1\">\n            <input class=\"cp-input\" type=\"number\" .value=\"${String(Math.round(alpha))}\" min=\"0\" max=\"100\"\n              @input=\"${p.onAlphaNumInput}\">\n            <span class=\"cp-input-label\">A%</span>\n          </div>` : nothing}\n      `\n    : inputMode === 'rgb'\n    ? html`\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(r)}\" min=\"0\" max=\"255\" @input=\"${(e: Event): void => p.onRgbInput(0, e)}\"><span class=\"cp-input-label\">R</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(g)}\" min=\"0\" max=\"255\" @input=\"${(e: Event): void => p.onRgbInput(1, e)}\"><span class=\"cp-input-label\">G</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(b)}\" min=\"0\" max=\"255\" @input=\"${(e: Event): void => p.onRgbInput(2, e)}\"><span class=\"cp-input-label\">B</span></div>\n        ${showAlpha ? html`<div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(Math.round(alpha))}\" min=\"0\" max=\"100\" @input=\"${p.onAlphaNumInput}\"><span class=\"cp-input-label\">A%</span></div>` : nothing}\n      `\n    : html`\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(h)}\" min=\"0\" max=\"360\" @input=\"${(e: Event): void => p.onHslInput(0, e)}\"><span class=\"cp-input-label\">H</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(s)}\" min=\"0\" max=\"100\" @input=\"${(e: Event): void => p.onHslInput(1, e)}\"><span class=\"cp-input-label\">S%</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(l)}\" min=\"0\" max=\"100\" @input=\"${(e: Event): void => p.onHslInput(2, e)}\"><span class=\"cp-input-label\">L%</span></div>\n        ${showAlpha ? html`<div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(Math.round(alpha))}\" min=\"0\" max=\"100\" @input=\"${p.onAlphaNumInput}\"><span class=\"cp-input-label\">A%</span></div>` : nothing}\n      `;\n\n  return html`\n    <!-- Canvas 2D -->\n    <div class=\"cp-canvas\"\n      style=\"background: hsl(${h},100%,50%);\"\n      @mousedown=\"${p.onCanvasMousedown}\"\n    >\n      <div class=\"cp-thumb\"\n        style=\"left:${thumbX}%;top:${thumbY}%;background:${cssColor};\"\n      ></div>\n    </div>\n\n    <!-- Sliders -->\n    <div class=\"cp-sliders\">\n      <div class=\"cp-preview-dot\">\n        <div class=\"cp-preview-color\" style=\"background:${cssColor};\"></div>\n      </div>\n      <div class=\"cp-sliders-stack\">\n        <input type=\"range\" class=\"cp-range cp-range-hue\"\n          min=\"0\" max=\"360\" .value=\"${String(h)}\"\n          @input=\"${p.onHueInput}\">\n        ${showAlpha ? html`\n          <div class=\"cp-alpha-wrap\" style=\"height:10px;\">\n            <div class=\"cp-alpha-checker\">\n              <input type=\"range\" class=\"cp-range cp-range-alpha\"\n                min=\"0\" max=\"100\" .value=\"${String(Math.round(alpha))}\"\n                style=\"background:${alphaGradient};\"\n                @input=\"${p.onAlphaInput}\">\n            </div>\n          </div>` : nothing}\n      </div>\n    </div>\n\n    <!-- Inputs -->\n    <div class=\"cp-inputs-wrap\">\n      <button class=\"cp-mode-btn\" title=\"Cambiar modo\" @click=\"${p.onModeToggle}\">\n        ${ROTATE_SVG}\n      </button>\n      <div style=\"display:flex;gap:var(--lib-space-xs);flex:1;\">\n        ${inputsBlock}\n      </div>\n    </div>\n\n    <!-- Saved colors -->\n    <div class=\"cp-saved\">\n      <span class=\"cp-saved-label\">Guardados</span>\n      ${savedColors.map(sc => html`\n        <div class=\"cp-swatch cp-swatch-sm\"\n          style=\"background:${sc};\"\n          data-name=\"${sc}\"\n          @click=\"${(): void => p.onSavedClick(sc)}\"\n        ></div>\n      `)}\n      <button class=\"cp-saved-add\" title=\"Guardar color actual\" @click=\"${p.onSaveColor}\">+</button>\n    </div>\n\n    <!-- Actions -->\n    <div class=\"cp-actions\">\n      <button class=\"cp-btn cp-btn-cancel\" @click=\"${p.onCancel}\">Cancelar</button>\n      <button class=\"cp-btn cp-btn-ok\" @click=\"${p.onApply}\">Aplicar</button>\n    </div>\n  `;\n}\n\n/* ────────────────────────────────────────────\n   Root template — inline vs trigger\n   ──────────────────────────────────────────── */\n\nexport interface ColorPickerRootProps extends PickerPanelProps {\n  variant:    ColorPickerVariant;\n  label:      string;\n  panelOpen:  boolean;\n  onTriggerClick: () => void;\n}\n\nexport function colorPickerTemplate(props: ColorPickerRootProps): TemplateResult {\n  const { variant, /*label,*/ hex, alpha, panelOpen, onTriggerClick } = props;\n\n  const panel = html`\n    <div class=\"cp ${variant === 'trigger' && panelOpen ? 'is-open' : ''}\">\n      ${pickerPanelTemplate(props)}\n    </div>\n  `;\n\n  if (variant === 'inline') {\n    return panel;\n  }\n\n  /* Trigger variant — botón + panel flotante */\n  const cssColor = alpha < 100\n    ? `rgba(${props.r},${props.g},${props.b},${(alpha / 100).toFixed(2)})`\n    : hex;\n\n  return html`\n    <div class=\"cp-trigger-wrap\">\n      <button\n        class=\"cp-trigger ${panelOpen ? 'is-open' : ''}\"\n        @click=\"${onTriggerClick}\"\n        aria-expanded=\"${panelOpen}\"\n        aria-haspopup=\"true\"\n      >\n        <div class=\"cp-trigger-dot\">\n          <div class=\"cp-trigger-color\" style=\"background:${cssColor};\"></div>\n        </div>\n        <span>${hex.toUpperCase()}</span>\n        ${CARET_SVG}\n      </button>\n      ${panel}\n    </div>\n  `;\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index204.js","sources":["../src/components/organisms/data-table/lib-data-table.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type {\n  TableColumn,\n  TableRowData,\n  TableVariant,\n  TableSize,\n  TableBadgeTone,\n} from './lib-data-table.types';\n\n/* ── Template Props ─────────────────────────────────────── */\nexport interface DataTableTemplateProps {\n  columns:       TableColumn[];\n  data:          TableRowData[];\n  filteredTotal: number;\n  totalRows:     number;\n  variant:       TableVariant;\n  size:          TableSize;\n  dark:          boolean;\n  loading:       boolean;\n  selectable:    boolean;\n  stickyHead:    boolean;\n  caption:       string;\n  emptyTitle:    string;\n  emptyDesc:     string;\n  toolbar:       boolean;\n  toolbarTitle:  string;\n  skeletonRows:  number;\n  sortKey:       string;\n  sortDir:       'asc' | 'desc';\n  query:         string;\n  selected:      Set<number>;\n  allSelected:   boolean;\n  someSelected:  boolean;\n  page:          number;\n  pageSize:      number;\n  totalPages:    number;\n  onSort:        (key: string) => void;\n  onSearch:      (q: string) => void;\n  onSelectAll:   (checked: boolean, total: number) => void;\n  onSelectRow:   (idx: number, checked: boolean) => void;\n  onRowAction:   (row: TableRowData, idx: number) => void;\n  onPageChange:  (p: number) => void;\n}\n\n/* ── Helpers: Cell renderers ───────────────────────────── */\n\nfunction renderBadge(value: unknown, tone: string): TemplateResult {\n  const label = String(value ?? '');\n  return html`<span class=\"cell-badge tone-${tone}\">${label}</span>`;\n}\n\nfunction renderProgress(value: unknown, tone: 'kaki' | 'celadon' | ''): TemplateResult {\n  const pct = Math.min(100, Math.max(0, Number(value) || 0));\n  const toneClass = tone ? `tone-${tone}` : '';\n  return html`\n    <div class=\"cell-progress\">\n      <div class=\"progress-bar\">\n        <div class=\"progress-fill ${toneClass}\" style=\"width:${pct}%\"></div>\n      </div>\n      <span class=\"progress-val\">${pct}%</span>\n    </div>\n  `;\n}\n\nfunction renderAvatar(row: TableRowData, col: TableColumn): TemplateResult {\n  const name     = String(row[col.key] ?? '');\n  const initials = col.initialsKey\n    ? String(row[col.initialsKey] ?? '').slice(0, 2).toUpperCase()\n    : name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();\n  const hint = col.hintKey ? String(row[col.hintKey] ?? '') : '';\n\n  return html`\n    <div class=\"cell-avatar\">\n      <div class=\"avatar-circle\">${initials}</div>\n      <div class=\"avatar-text\">\n        <span class=\"avatar-name\">${name}</span>\n        ${hint ? html`<span class=\"avatar-hint\">${hint}</span>` : nothing}\n      </div>\n    </div>\n  `;\n}\n\nfunction renderActionsBtn(row: TableRowData, idx: number, onRowAction: (r: TableRowData, i: number) => void): TemplateResult {\n  return html`\n    <button class=\"actions-btn\"\n      aria-label=\"Acciones\"\n      @click=\"${(e: Event):void => { e.stopPropagation(); onRowAction(row, idx); }}\"\n    >⋯</button>\n  `;\n}\n\nfunction renderCell(col: TableColumn, row: TableRowData, idx: number, onRowAction: (r: TableRowData, i: number) => void): TemplateResult {\n  const value = row[col.key];\n\n  switch (col.type) {\n    case 'badge': {\n      const tone = col.toneKey\n        ? String(row[col.toneKey] ?? 'inactive')\n        : (col.badgeTone ?? 'inactive');\n      return renderBadge(value, tone as TableBadgeTone);\n    }\n    case 'progress':\n      return renderProgress(value, col.progressTone ?? '');\n    case 'avatar':\n      return renderAvatar(row, col);\n    case 'actions':\n      return renderActionsBtn(row, idx, onRowAction);\n    case 'mono':\n      return html`<span class=\"cell-mono\">${value ?? '—'}</span>`;\n    default:\n      return html`${value ?? '—'}`;\n  }\n}\n\n/* ── Helpers: Structural ───────────────────────────────── */\n\nfunction thClasses(col: TableColumn, sortKey: string, sortDir: 'asc' | 'desc'): string {\n  const parts: string[] = [];\n  if (col.type === 'num')     parts.push('cell-num', 'is-num');\n  if (col.sticky)             parts.push('col-sticky');\n  if (col.sortable) {\n    parts.push('is-sortable');\n    if (sortKey === col.key)  parts.push(sortDir === 'asc' ? 'sort-asc' : 'sort-desc');\n  }\n  return parts.join(' ');\n}\n\nfunction tdClasses(col: TableColumn): string {\n  const parts: string[] = [];\n  if (col.type === 'num')      parts.push('cell-num');\n  if (col.type === 'actions')  parts.push('cell-actions');\n  if (col.sticky)              parts.push('col-sticky');\n  if (col.truncate)            parts.push('cell-truncate');\n  return parts.join(' ');\n}\n\nfunction rowClass(row: TableRowData, idx: number, selected: Set<number>): string {\n  const state = row._state;\n  const isSelected = selected.has(idx) || state === 'selected';\n  const parts: string[] = [];\n  if (isSelected)           parts.push('is-selected');\n  else if (state)           parts.push(`is-${state}`);\n  return parts.join(' ');\n}\n\n/* ── Skeleton rows ───────────────────────────────────────── */\nconst WIDTHS = ['w-80', 'w-60', 'w-40', 'w-60', 'w-80'] as const;\n\nfunction renderSkeletonCell(col: TableColumn, idx: number): TemplateResult {\n  const w = WIDTHS[idx % WIDTHS.length] ?? 'w-60';\n  if (col.type === 'avatar') return html`\n    <div class=\"skel-cell\">\n      <div class=\"skel-avatar\"></div>\n      <div style=\"flex:1;display:flex;flex-direction:column;gap:4px;\">\n        <div class=\"skel-line ${w}\"></div>\n        <div class=\"skel-line w-40\" style=\"height:7px;\"></div>\n      </div>\n    </div>`;\n  if (col.type === 'badge')  return html`<div class=\"skel-badge\"></div>`;\n  if (col.type === 'num')    return html`<div class=\"skel-line ${w}\" style=\"margin-left:auto;\"></div>`;\n  return html`<div class=\"skel-line ${w}\"></div>`;\n}\n\nfunction renderSkeleton(count: number, cols: TableColumn[], selectable: boolean): TemplateResult {\n  return html`${Array.from({ length: count }, (_, r) => html`\n    <tr class=\"tbl-tr\">\n      ${selectable ? html`<td class=\"cell-check\"></td>` : nothing}\n      ${cols.map((col, c) => html`\n        <td class=\"${tdClasses(col)}\" style=\"${col.type === 'actions' ? '' : ''}\">\n          ${renderSkeletonCell(col, r + c)}\n        </td>\n      `)}\n    </tr>\n  `)}`;\n}\n\n/* ── Empty state ─────────────────────────────────────────── */\nfunction renderEmpty(title: string, desc: string, colSpan: number): TemplateResult {\n  return html`\n    <tr class=\"empty-row\">\n      <td colspan=\"${colSpan}\">\n        <span class=\"empty-icon\">◯</span>\n        <span class=\"empty-title\">${title}</span>\n        <span class=\"empty-desc\">${desc}</span>\n      </td>\n    </tr>\n  `;\n}\n\n/* ── Toolbar ─────────────────────────────────────────────── */\nfunction renderToolbar(p: DataTableTemplateProps): TemplateResult {\n  const countLabel = p.query\n    ? `${p.filteredTotal} de ${p.totalRows}`\n    : `${p.totalRows} registros`;\n\n  return html`\n    <div class=\"tbl-toolbar\">\n      ${p.toolbarTitle ? html`<span class=\"tbl-toolbar-title\">${p.toolbarTitle}</span>` : nothing}\n      <span class=\"tbl-toolbar-count\">${countLabel}</span>\n      <input\n        class=\"tbl-toolbar-search\"\n        type=\"search\"\n        placeholder=\"Buscar…\"\n        .value=\"${p.query}\"\n        @input=\"${(e: Event):void => p.onSearch((e.target as HTMLInputElement).value)}\"\n      >\n      <slot name=\"toolbar-actions\"></slot>\n    </div>\n  `;\n}\n\n/* ── Built-in pagination bar ─────────────────────────────── */\nfunction buildPageNumbers(current: number, total: number): (number | '…')[] {\n  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);\n  const pages: (number | '…')[] = [1];\n  if (current > 3) pages.push('…');\n  const lo = Math.max(2, current - 1);\n  const hi = Math.min(total - 1, current + 1);\n  for (let i = lo; i <= hi; i++) pages.push(i);\n  if (current < total - 2) pages.push('…');\n  pages.push(total);\n  return pages;\n}\n\nfunction renderPagination(p: DataTableTemplateProps): TemplateResult {\n  if (p.pageSize <= 0 || p.totalPages <= 1) return html``;\n  const start  = (p.page - 1) * p.pageSize + 1;\n  const end    = Math.min(p.page * p.pageSize, p.filteredTotal);\n  const pages  = buildPageNumbers(p.page, p.totalPages);\n\n  return html`\n    <div class=\"tbl-pagination\">\n      <span class=\"pag-info\">${start}–${end} de ${p.filteredTotal}</span>\n\n      <button class=\"pag-btn\" ?disabled=\"${p.page <= 1}\"\n        @click=\"${():void => p.onPageChange(p.page - 1)}\">‹</button>\n\n      ${pages.map(pg => pg === '…'\n        ? html`<span class=\"pag-sep\">…</span>`\n        : html`\n          <button class=\"pag-btn ${p.page === pg ? 'is-active' : ''}\"\n            @click=\"${():void => p.onPageChange(pg as number)}\">${pg}</button>\n        `)}\n\n      <button class=\"pag-btn\" ?disabled=\"${p.page >= p.totalPages}\"\n        @click=\"${():void => p.onPageChange(p.page + 1)}\">›</button>\n    </div>\n  `;\n}\n\n/* ── Main template ────────────────────────────────────────── */\nexport function dataTableTemplate(p: DataTableTemplateProps): TemplateResult {\n  const colSpan  = p.columns.length + (p.selectable ? 1 : 0);\n  const wrapCls  = `tbl-wrap${p.stickyHead ? ' tbl-sticky-head' : ''}`;\n\n  return html`\n    ${p.toolbar ? renderToolbar(p) : nothing}\n\n    <div class=\"${wrapCls}\">\n      <table>\n        ${p.caption ? html`<caption>${p.caption}</caption>` : nothing}\n\n        <!-- THEAD -->\n        <thead>\n          <tr>\n            ${p.selectable ? html`\n              <th class=\"cell-check\">\n                <input type=\"checkbox\"\n                  .indeterminate=\"${p.someSelected}\"\n                  .checked=\"${p.allSelected}\"\n                  @change=\"${(e: Event):void =>\n                    p.onSelectAll((e.target as HTMLInputElement).checked, p.data.length)}\">\n              </th>\n            ` : nothing}\n\n            ${p.columns.map(col => html`\n              <th class=\"${thClasses(col, p.sortKey, p.sortDir)}\"\n                @click=\"${col.sortable ? ():void => p.onSort(col.key) : nothing}\">\n                ${col.header}\n              </th>\n            `)}\n          </tr>\n        </thead>\n\n        <!-- TBODY -->\n        <tbody>\n          ${p.loading\n            ? renderSkeleton(p.skeletonRows, p.columns, p.selectable)\n            : p.data.length === 0\n              ? renderEmpty(p.emptyTitle, p.emptyDesc, colSpan)\n              : p.data.map((row, idx) => {\n                  const globalIdx = (p.page - 1) * (p.pageSize || 0) + idx;\n                  return html`\n                    <tr class=\"${rowClass(row, globalIdx, p.selected)}\">\n                      ${p.selectable ? html`\n                        <td class=\"cell-check\">\n                          <input type=\"checkbox\"\n                            .checked=\"${p.selected.has(globalIdx)}\"\n                            @change=\"${(e: Event):void =>\n                              p.onSelectRow(globalIdx, (e.target as HTMLInputElement).checked)}\">\n                        </td>\n                      ` : nothing}\n\n                      ${p.columns.map(col => html`\n                        <td class=\"${tdClasses(col)}\">\n                          ${renderCell(col, row, globalIdx, p.onRowAction)}\n                        </td>\n                      `)}\n                    </tr>\n                  `;\n                })\n          }\n        </tbody>\n      </table>\n    </div>\n\n    ${renderPagination(p)}\n    <slot name=\"pagination\"></slot>\n  `;\n}"],"names":[],"mappings":"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"}

package/dist/index205.js

@@ -1,46 +1,85 @@
-const SHIBUI_SWATCHES = [
-  {
-    label: "washi",
-    colors: [
-      { value: "#FAF7F4", name: "washi-50" },
-      { value: "#F2EDE6", name: "washi-100" },
-      { value: "#E5DDD3", name: "washi-200" },
-      { value: "#D3C8BC", name: "washi-300" },
-      { value: "#B8A99A", name: "washi-400" },
-      { value: "#9A8878", name: "washi-500" },
-      { value: "#7A6A5C", name: "washi-600" },
-      { value: "#5C4E42", name: "washi-700" },
-      { value: "#3D332A", name: "washi-800" },
-      { value: "#221C16", name: "washi-900" },
-      { value: "#120E0A", name: "washi-950" }
-    ]
-  },
-  {
-    label: "kaki",
-    colors: [
-      { value: "#FDF3EC", name: "kaki-50" },
-      { value: "#FAE2CC", name: "kaki-100" },
-      { value: "#F5C89A", name: "kaki-200" },
-      { value: "#EBAA66", name: "kaki-300" },
-      { value: "#D97234", name: "kaki-400" },
-      { value: "#B85A1E", name: "kaki-500" },
-      { value: "#8C4115", name: "kaki-600" }
-    ]
-  },
-  {
-    label: "celadón",
-    colors: [
-      { value: "#EFF5F3", name: "celadon-50" },
-      { value: "#D3E8E1", name: "celadon-100" },
-      { value: "#A8D0C5", name: "celadon-200" },
-      { value: "#76B3A5", name: "celadon-300" },
-      { value: "#4D8E82", name: "celadon-400" },
-      { value: "#357164", name: "celadon-500" },
-      { value: "#245249", name: "celadon-600" }
-    ]
-  }
-];
+import { html } from "lit";
+const closeSvg = html`
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
+       stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+    <path d="M1 1l10 10M11 1L1 11"/>
+  </svg>
+`;
+const dangerSvg = html`
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+       stroke="var(--color-error)" stroke-width="1.5"
+       stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 2L14.5 13H1.5L8 2z"/>
+    <path d="M8 6v3M8 11v.5"/>
+  </svg>
+`;
+const warningSvg = html`
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+       stroke="var(--color-warning)" stroke-width="1.5"
+       stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="8" cy="8" r="6"/>
+    <path d="M8 5v3M8 10v.5"/>
+  </svg>
+`;
+function dialogTemplate(props) {
+  const {
+    eyebrow,
+    dlgTitle,
+    variant,
+    size,
+    layout,
+    footerMeta,
+    onClose
+  } = props;
+  const layoutCls = layout === "drawer-right" ? "dlg-drawer-right" : layout === "drawer-bottom" ? "dlg-drawer-bottom" : "";
+  const alertCls = layout === "alert" ? "dlg-alert" : "";
+  const sizeCls = `dlg-${size}`;
+  const dlgCls = `dlg ${sizeCls} ${layoutCls} ${alertCls}`.trim();
+  const hasIcon = variant === "danger" || variant === "warning";
+  const headerIcon = hasIcon ? html`<div class="dlg-header-icon">
+        ${variant === "danger" ? dangerSvg : warningSvg}
+      </div>` : null;
+  return html`
+    <dialog
+      class="${dlgCls}"
+      @cancel="${(e) => {
+    e.preventDefault();
+    onClose();
+  }}"
+      @click="${(e) => {
+    if (e.target.tagName === "DIALOG") onClose();
+  }}"
+    >
+      <!-- HEADER -->
+      <div class="dlg-header">
+        ${headerIcon}
+        <div class="dlg-header-text" style="${hasIcon ? "margin-left: var(--lib-space-md)" : ""}">
+          ${eyebrow ? html`<p class="dlg-eyebrow">${eyebrow}</p>` : null}
+          <slot name="header">
+            <h2 class="dlg-title">${dlgTitle}</h2>
+          </slot>
+        </div>
+        <button
+          class="dlg-close"
+          aria-label="Cerrar"
+          @click="${() => onClose()}"
+        >${closeSvg}</button>
+      </div>
+
+      <!-- BODY -->
+      <div class="dlg-body">
+        <slot></slot>
+      </div>
+
+      <!-- FOOTER -->
+      <div class="dlg-footer">
+        ${footerMeta ? html`<span class="dlg-footer-meta">${footerMeta}</span>` : null}
+        <slot name="footer"></slot>
+      </div>
+    </dialog>
+  `;
+}
 export {
-  SHIBUI_SWATCHES
+  dialogTemplate
 };
 //# sourceMappingURL=index205.js.map