@lostgradient/cinder 0.1.0 → 0.2.0

package/dist/server/components/matrix-chart/matrix-chart.schema.js

@@ -0,0 +1,105 @@
+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/matrix-chart/matrix-chart.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    label: {
+      type: "string"
+    },
+    description: {
+      type: "string"
+    },
+    data: {
+      type: "array",
+      items: {
+        type: "object",
+        additionalProperties: {
+          anyOf: [
+            {
+              type: "string"
+            },
+            {
+              type: "number"
+            },
+            {
+              type: "null"
+            }
+          ]
+        }
+      }
+    },
+    xField: {
+      type: "string"
+    },
+    yField: {
+      type: "string"
+    },
+    valueField: {
+      type: "string"
+    },
+    colorScale: {
+      enum: ["sequential", "diverging"]
+    },
+    showCellLabels: {
+      type: "boolean"
+    },
+    height: {
+      type: "number"
+    },
+    loading: {
+      type: "boolean"
+    },
+    dataTableCaption: {
+      type: "string"
+    },
+    dataTableVisibility: {
+      enum: ["screen-reader-only", "visible", "hidden"]
+    },
+    class: {
+      type: "string"
+    }
+  },
+  additionalProperties: false,
+  required: ["data", "label", "valueField", "xField", "yField"]
+};
+var matrix_chart_schema_default = schema;
+export {
+  matrix_chart_schema_default as default
+};
+
+//# debugId=08ED24723F90F68164756E2164756E21

package/dist/server/components/matrix-chart/matrix-chart.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/matrix-chart/matrix-chart.variables.ts
+var variables = [];
+var matrix_chart_variables_default = variables;
+export {
+  matrix_chart_variables_default as default
+};
+
+//# debugId=ECC4A3BDAEBF320464756E2164756E21

package/dist/server/components/media-controls/index.css

@@ -0,0 +1,109 @@
+/* src/components/media-controls/media-controls.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-media-controls {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-media-controls__button {
+    display: inline-flex;
+    justify-content: center;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    background-color: var(--cinder-surface);
+    color: var(--cinder-text);
+    cursor: pointer;
+    font-size: var(--cinder-text-sm);
+    min-width: 2rem;
+    min-height: 2rem;
+    transition: background-color .15s, border-color .15s;
+    font-weight: 500;
+    line-height: 1;
+  }
+
+  @media (hover: hover) {
+    .cinder-media-controls__button:hover:not(:disabled) {
+      background-color: var(--cinder-surface-raised);
+      border-color: var(--cinder-border-strong);
+    }
+  }
+
+  .cinder-media-controls__button:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: 0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color), 0 0 0 calc(var(--cinder-ring-offset)  + var(--cinder-ring-width)) var(--cinder-ring-color);
+  }
+
+  .cinder-media-controls__button:disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  .cinder-media-controls__button[data-cinder-state="playing"] {
+    background-color: var(--cinder-surface-raised);
+  }
+
+  .cinder-media-controls__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items:  center;
+  }
+
+  .cinder-media-controls__svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  .cinder-media-controls__svg--loading {
+    animation: cinder-media-controls-spin 1s linear infinite;
+  }
+
+  @keyframes cinder-media-controls-spin {
+    from {
+      transform: rotate(0);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-media-controls__svg--loading {
+      animation: none;
+    }
+  }
+
+  .cinder-media-controls__label {
+    white-space: nowrap;
+  }
+
+  .cinder-media-controls[data-cinder-layout="compact"] .cinder-media-controls__button {
+    padding: var(--cinder-space-1);
+  }
+
+  .cinder-media-controls__progress {
+    flex: 1;
+    min-width: 4rem;
+  }
+
+  .cinder-media-controls__progress-track {
+    border-radius: var(--cinder-radius-full, 9999px);
+    background-color: var(--cinder-border);
+    overflow: hidden;
+    height: .25rem;
+  }
+
+  .cinder-media-controls__progress-fill {
+    border-radius: var(--cinder-radius-full, 9999px);
+    background-color: var(--cinder-accent);
+    height: 100%;
+    transition: width .1s;
+  }
+}

package/dist/server/components/media-controls/index.js

@@ -0,0 +1,192 @@
+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/media-controls/media-controls.svelte
+import * as $2 from "svelte/internal/server";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/_visually-hidden-live-region.svelte
+import * as $ from "svelte/internal/server";
+function _visually_hidden_live_region($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { message = "", priority = "polite", class: className } = $$props;
+    let rendered = "";
+    let setTimeoutId = null;
+    let version = 0;
+    let isDestroyed = false;
+    $$renderer2.push(`<div${$.attr("role", priority === "assertive" ? "alert" : "status")}${$.attr("aria-live", priority === "assertive" ? "assertive" : "polite")} aria-atomic="true"${$.attr_class($.clsx(classNames("cinder-sr-only", className)))}>${$.escape(rendered)}</div>`);
+  });
+}
+
+// src/components/media-controls/media-controls.svelte
+function Media_controls($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      playing = false,
+      replay = false,
+      disabled = false,
+      loading = false,
+      unavailable = false,
+      progress,
+      progressLabel = "Playback progress",
+      layout = "compact",
+      onPlay,
+      onPause,
+      onReplay,
+      class: customClassName,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const isDisabled = $2.derived(() => disabled || loading || unavailable);
+    const iconOnly = $2.derived(() => layout === "compact");
+    const hasProgress = $2.derived(() => Number.isFinite(progress));
+    const clampedProgress = $2.derived(() => Number.isFinite(progress) ? Math.max(0, Math.min(1, progress)) : 0);
+    const progressPercent = $2.derived(() => Math.round(clampedProgress() * 100));
+    let announcement = "";
+    function handlePlay() {
+      if (isDisabled())
+        return;
+      announcement = "Playing";
+      onPlay?.();
+    }
+    function handlePause() {
+      if (isDisabled())
+        return;
+      announcement = "Paused";
+      onPause?.();
+    }
+    function handleReplay() {
+      if (isDisabled())
+        return;
+      announcement = "Replaying";
+      onReplay?.();
+    }
+    function handlePrimaryAction() {
+      if (replay) {
+        handleReplay();
+      } else if (playing) {
+        handlePause();
+      } else {
+        handlePlay();
+      }
+    }
+    const isToggle = $2.derived(() => !loading && !unavailable && !replay);
+    const primaryLabel = $2.derived(() => loading ? "Loading playback controls" : unavailable ? "Playback unavailable" : replay ? "Replay" : "Play or pause");
+    const primaryPressed = $2.derived(() => isToggle() ? playing ? "true" : "false" : undefined);
+    $$renderer2.push(`<div${$2.attributes({
+      ...rest,
+      class: $2.clsx(classNames("cinder-media-controls", customClassName)),
+      "data-cinder-layout": layout,
+      "data-cinder-playing": playing ? "" : undefined,
+      "data-cinder-loading": loading ? "" : undefined,
+      "data-cinder-unavailable": unavailable ? "" : undefined
+    })}><button type="button" class="cinder-media-controls__button"${$2.attr("aria-label", primaryLabel())}${$2.attr("aria-pressed", primaryPressed())}${$2.attr("aria-disabled", isDisabled() ? "true" : undefined)}${$2.attr("aria-busy", loading ? "true" : undefined)}${$2.attr("disabled", isDisabled(), true)}${$2.attr("data-cinder-state", loading ? "loading" : unavailable ? "unavailable" : replay ? "replay" : playing ? "playing" : "paused")}>`);
+    if (loading) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-media-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cinder-media-controls__svg cinder-media-controls__svg--loading"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg></span> `);
+      if (!iconOnly()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-media-controls__label">Loading</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else if (unavailable) {
+      $$renderer2.push("<!--[1-->");
+      $$renderer2.push(`<span class="cinder-media-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cinder-media-controls__svg"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg></span> `);
+      if (!iconOnly()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-media-controls__label">Unavailable</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else if (replay) {
+      $$renderer2.push("<!--[2-->");
+      $$renderer2.push(`<span class="cinder-media-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cinder-media-controls__svg"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg></span> `);
+      if (!iconOnly()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-media-controls__label">Replay</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else if (playing) {
+      $$renderer2.push("<!--[3-->");
+      $$renderer2.push(`<span class="cinder-media-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="cinder-media-controls__svg"><rect x="6" y="4" width="4" height="16" rx="1"></rect><rect x="14" y="4" width="4" height="16" rx="1"></rect></svg></span> `);
+      if (!iconOnly()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-media-controls__label">Pause</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<span class="cinder-media-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="cinder-media-controls__svg"><polygon points="5,3 19,12 5,21"></polygon></svg></span> `);
+      if (!iconOnly()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-media-controls__label">Play</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]-->`);
+    }
+    $$renderer2.push(`<!--]--></button> `);
+    if (hasProgress()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-media-controls__progress" role="progressbar"${$2.attr("aria-label", progressLabel)}${$2.attr("aria-valuemin", 0)}${$2.attr("aria-valuemax", 100)}${$2.attr("aria-valuenow", progressPercent())}${$2.attr("aria-valuetext", `${$2.stringify(progressPercent())}%`)}><div class="cinder-media-controls__progress-track"><div class="cinder-media-controls__progress-fill"${$2.attr_style("", { width: `${$2.stringify(progressPercent())}%` })}></div></div></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div> `);
+    _visually_hidden_live_region($$renderer2, { message: announcement });
+    $$renderer2.push(`<!---->`);
+  });
+}
+
+// src/components/media-controls/index.ts
+var media_controls_default = Media_controls;
+export {
+  media_controls_default as default,
+  Media_controls as MediaControls
+};
+
+//# debugId=6A529170371C9E0064756E2164756E21

package/dist/server/components/media-controls/media-controls.schema.js

@@ -0,0 +1,107 @@
+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/media-controls/media-controls.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    playing: {
+      type: "boolean",
+      description: "Whether playback is active.",
+      default: false
+    },
+    replay: {
+      type: "boolean",
+      description: "Show a replay action when the track has ended.",
+      default: false
+    },
+    disabled: {
+      type: "boolean",
+      description: "Disable all controls.",
+      default: false
+    },
+    loading: {
+      type: "boolean",
+      description: "Show loading state while media is buffering.",
+      default: false
+    },
+    unavailable: {
+      type: "boolean",
+      description: "Controls are unavailable.",
+      default: false
+    },
+    progress: {
+      type: "number",
+      description: "Progress value between 0 and 1. Omit to hide the progress bar."
+    },
+    progressLabel: {
+      type: "string",
+      description: "Accessible label for the progress bar."
+    },
+    layout: {
+      enum: ["compact", "expanded"],
+      description: "Layout mode.",
+      default: "compact"
+    },
+    class: {
+      type: "string",
+      description: "Additional class names merged with `.cinder-media-controls`."
+    }
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "onPause",
+        reason: "function-or-snippet"
+      },
+      {
+        name: "onPlay",
+        reason: "function-or-snippet"
+      },
+      {
+        name: "onReplay",
+        reason: "function-or-snippet"
+      }
+    ]
+  }
+};
+var media_controls_schema_default = schema;
+export {
+  media_controls_schema_default as default
+};
+
+//# debugId=B4672C06A2FC830D64756E2164756E21

package/dist/server/components/media-controls/media-controls.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/media-controls/media-controls.variables.ts
+var variables = [];
+var media_controls_variables_default = variables;
+export {
+  media_controls_variables_default as default
+};
+
+//# debugId=49FF24A101C5288764756E2164756E21

package/dist/server/components/menu-bar/index.css

@@ -260,7 +260,6 @@
 
 /* src/components/menu-bar/menu-bar.css */
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-@import "../dropdown/dropdown.css";
 
 @layer cinder.components {
   .cinder-menu-bar {