@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/server/components/data-table/data-table.schema.js

@@ -0,0 +1,85 @@
+import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/data-table/data-table.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    caption: {
+      type: "string",
+      description: "Visual caption rendered as a `<caption>` element above the table."
+    },
+    stickyHeader: {
+      type: "boolean",
+      description: "When true, the header sticks to the top of the scrolling container."
+    },
+    density: {
+      enum: ["comfortable", "condensed", "spacious"],
+      description: "Vertical padding density for header and body cells.\nDefaults to `'comfortable'`."
+    },
+    scrollable: {
+      type: "boolean",
+      description: "When true, wraps the table in a `.cinder-table-scroll` container that\nenables horizontal overflow scrolling on small viewports."
+    },
+    class: {
+      type: "string",
+      description: 'Additional class names merged onto DataTable\'s root wrapper element (the\n`<div class="cinder-data-table">` that contains the table). To style the\n`<table>` itself, target `.cinder-data-table table` from this class.'
+    }
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "columns",
+        reason: "unknown-shape"
+      },
+      {
+        name: "rows",
+        reason: "generic-type-parameter"
+      },
+      {
+        name: "sort",
+        reason: "unknown-shape"
+      }
+    ]
+  }
+};
+var data_table_schema_default = schema;
+export {
+  data_table_schema_default as default
+};
+
+//# debugId=EB2487DAED6A414964756E2164756E21

package/dist/server/components/data-table/data-table.variables.js

@@ -0,0 +1,43 @@
+import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/data-table/data-table.variables.ts
+var variables = [];
+var data_table_variables_default = variables;
+export {
+  data_table_variables_default as default
+};
+
+//# debugId=5AFB951AE1CC032D64756E2164756E21

package/dist/server/components/data-table/index.css

@@ -0,0 +1,182 @@
+/* src/components/table-body/table-body.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+/* src/components/table-cell/table-cell.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+/* src/components/table-header/table-header.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+/* src/components/table-header-cell/table-header-cell.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+/* src/components/table-row/table-row.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+/* src/components/table/table.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-table {
+    border-collapse: collapse;
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+    background: var(--cinder-surface);
+    width: 100%;
+  }
+
+  .cinder-table-scroll {
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    -webkit-overflow-scrolling: touch;
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
+  .cinder-table-scroll > .cinder-table {
+    min-inline-size: max-content;
+  }
+
+  .cinder-table__caption {
+    caption-side: top;
+    text-align: left;
+    padding-block: var(--cinder-space-3) var(--cinder-space-2);
+    padding-inline: var(--cinder-space-3);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text);
+  }
+
+  .cinder-table__header {
+    background: var(--cinder-surface-inset);
+  }
+
+  .cinder-table[data-cinder-sticky-header] .cinder-table__header {
+    position: sticky;
+    z-index: 1;
+    top: 0;
+  }
+
+  .cinder-table__header-cell {
+    padding-block: var(--cinder-space-2);
+    padding-inline: var(--cinder-space-3);
+    text-align: left;
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text-muted);
+    border-bottom: 1px solid var(--cinder-border-muted);
+    text-wrap: balance;
+  }
+
+  .cinder-table__header-cell[aria-sort="ascending"], .cinder-table__header-cell[aria-sort="descending"] {
+    color: var(--cinder-text);
+  }
+
+  .cinder-table[data-cinder-density="condensed"] .cinder-table__cell, .cinder-table[data-cinder-density="condensed"] .cinder-table__header-cell {
+    padding-block: var(--cinder-space-1);
+    padding-inline: var(--cinder-space-3);
+  }
+
+  .cinder-table[data-cinder-density="spacious"] .cinder-table__cell, .cinder-table[data-cinder-density="spacious"] .cinder-table__header-cell {
+    padding-block: var(--cinder-space-3);
+    padding-inline: var(--cinder-space-4);
+  }
+
+  .cinder-table[data-cinder-selectable] .cinder-table__cell--selection, .cinder-table[data-cinder-selectable] .cinder-table__header-cell--selection {
+    padding-inline: var(--cinder-space-3);
+    padding-block: var(--cinder-space-2);
+    text-align: center;
+    vertical-align: middle;
+    width: 1px;
+  }
+
+  .cinder-table__sort-button {
+    appearance: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+    text-align: inherit;
+    border-radius: var(--cinder-radius-sm);
+    white-space: nowrap;
+    position: relative;
+    background: none;
+    border: none;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .cinder-table__header-cell[data-cinder-align="center"] .cinder-table__sort-button {
+    justify-content: center;
+  }
+
+  .cinder-table__header-cell[data-cinder-align="right"] .cinder-table__sort-button {
+    justify-content: flex-end;
+  }
+
+  .cinder-table__sort-button:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+    z-index: 2;
+  }
+
+  .cinder-table__sort-indicator {
+    display: inline-flex;
+    color: var(--cinder-text-subtle);
+  }
+
+  .cinder-table__sort-indicator[data-cinder-direction="ascending"], .cinder-table__sort-indicator[data-cinder-direction="descending"] {
+    color: var(--cinder-text);
+  }
+
+  .cinder-table__sort-indicator[data-cinder-direction="ascending"] .cinder-table__sort-chevron-down, .cinder-table__sort-indicator[data-cinder-direction="descending"] .cinder-table__sort-chevron-up {
+    opacity: .3;
+  }
+
+  .cinder-table__row {
+    transition: background var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  @media (hover: hover) {
+    .cinder-table__body .cinder-table__row:hover {
+      background: var(--cinder-surface-hover);
+    }
+  }
+
+  .cinder-table__cell {
+    padding-block: var(--cinder-space-2);
+    padding-inline: var(--cinder-space-3);
+    border-bottom: 1px solid var(--cinder-border-muted);
+  }
+
+  .cinder-table__cell[data-cinder-align="center"] {
+    text-align: center;
+  }
+
+  .cinder-table__cell[data-cinder-align="right"] {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .cinder-table__header-cell[data-cinder-align="center"] {
+    text-align: center;
+  }
+
+  .cinder-table__header-cell[data-cinder-align="right"] {
+    text-align: right;
+  }
+}
+
+/* src/components/data-table/data-table.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-data-table {
+    display: contents;
+  }
+
+  .cinder-data-table.cinder-table-scroll {
+    display: block;
+  }
+}