@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/components/spectrum-chart/spectrum-chart.css

@@ -0,0 +1,49 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-spectrum-chart {
+    display: grid;
+    gap: var(--cinder-space-3);
+    color: var(--cinder-text);
+  }
+
+  .cinder-spectrum-chart__description {
+    margin: 0;
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-spectrum-chart__viewport {
+    position: relative;
+  }
+
+  .cinder-spectrum-chart svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .cinder-spectrum-chart__bar {
+    fill: var(--cinder-chart-series-1);
+    rx: 2;
+  }
+
+  .cinder-spectrum-chart__grid-line {
+    stroke: var(--cinder-border-muted);
+    stroke-dasharray: 3 3;
+  }
+
+  .cinder-spectrum-chart__tick-label {
+    fill: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-spectrum-chart__state {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    color: var(--cinder-text-muted);
+    background: color-mix(in oklch, var(--cinder-surface) 88%, transparent);
+    z-index: 1;
+  }
+}

package/dist/components/spectrum-chart/spectrum-chart.schema.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentSchema } from '../../schema-types';
+declare const _default: ComponentSchema;
+export default _default;

package/dist/components/spectrum-chart/spectrum-chart.schema.js

@@ -0,0 +1,97 @@
+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 __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/spectrum-chart/spectrum-chart.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    label: {
+      type: "string"
+    },
+    description: {
+      type: "string"
+    },
+    height: {
+      type: "number"
+    },
+    loading: {
+      type: "boolean"
+    },
+    dataTableVisibility: {
+      enum: ["screen-reader-only", "visible", "hidden"]
+    },
+    dataTableCaption: {
+      type: "string"
+    },
+    class: {
+      type: "string"
+    }
+  },
+  additionalProperties: false,
+  required: ["label"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "bins",
+        reason: "unknown-shape"
+      }
+    ]
+  }
+};
+var spectrum_chart_schema_default = schema;
+export {
+  spectrum_chart_schema_default as default
+};
+
+//# debugId=03249C3A85CFBA7D64756E2164756E21

package/dist/components/spectrum-chart/spectrum-chart.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @cinder
+ * @category data-display
+ * @status alpha
+ * @purpose Responsive SVG frequency-bin bar chart for visualizing audio spectrum magnitude data.
+ * @tag chart
+ * @tag spectrum
+ * @tag signal
+ * @tag audio
+ * @useWhen Displaying pre-computed frequency-domain magnitude data from an FFT or spectrum analyzer.
+ * @useWhen Showing a static frequency response or spectrum snapshot with labelled frequency bins.
+ * @avoidWhen Real-time live audio spectrum is needed — feed live AnalyserNode data as props yourself.
+ * @avoidWhen A full time × frequency heatmap is needed — use spectrogram instead.
+ * @avoidWhen General categorical bar comparison — use bar-chart instead.
+ * @related waveform, spectrogram, bar-chart
+ */
+export type { SpectrumChartProps, SpectrumChartSchemaProps } from './spectrum-chart.types.ts';
+import type { SpectrumChartProps } from './spectrum-chart.types.ts';
+declare const SpectrumChart: import("svelte").Component<SpectrumChartProps, {}, "">;
+type SpectrumChart = ReturnType<typeof SpectrumChart>;
+export default SpectrumChart;

package/dist/components/spectrum-chart/spectrum-chart.types.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChartDataTableVisibility } from '../chart.types.ts';
+export type SpectrumBin = {
+    /** Frequency label, e.g. '440 Hz' or '1 kHz'. */
+    label: string;
+    /** Magnitude or power for this bin. Non-negative. */
+    value: number;
+};
+export type SpectrumChartProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /** Accessible label for the chart. Required for screen readers. */
+    label: string;
+    /** Optional description rendered below the label. */
+    description?: string;
+    /** Frequency bins with label + magnitude value. */
+    bins: SpectrumBin[];
+    /** Pixel height of the chart. Default `160`. */
+    height?: number;
+    /** Whether the chart is in a loading state. */
+    loading?: boolean;
+    /** Controls data table visibility. Default `screen-reader-only`. */
+    dataTableVisibility?: ChartDataTableVisibility;
+    /** Custom data table caption; falls back to `label`. */
+    dataTableCaption?: string;
+    /** Custom class applied to the root element. */
+    class?: string;
+    /** Snippet rendered when there are no bins. */
+    empty?: Snippet;
+    /** Snippet rendered while loading. */
+    loadingContent?: Snippet;
+};
+export type SpectrumChartSchemaProps = {
+    label: string;
+    description?: string;
+    bins: SpectrumBin[];
+    height?: number;
+    loading?: boolean;
+    dataTableVisibility?: ChartDataTableVisibility;
+    dataTableCaption?: string;
+    class?: string;
+};

package/dist/components/spectrum-chart/spectrum-chart.variables.d.ts

@@ -0,0 +1,2 @@
+declare const variables: readonly string[];
+export default variables;

package/dist/components/spectrum-chart/spectrum-chart.variables.js

@@ -0,0 +1,61 @@
+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 __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/spectrum-chart/spectrum-chart.variables.ts
+var variables = [];
+var spectrum_chart_variables_default = variables;
+export {
+  spectrum_chart_variables_default as default
+};
+
+//# debugId=ED703632F4479FD364756E2164756E21

package/dist/components/status-dot/status-dot.css

@@ -77,4 +77,12 @@
   .cinder-status-dot[data-cinder-status='neutral'] {
     --cinder-status-dot-color: var(--cinder-text-muted);
   }
+
+  .cinder-status-dot[data-cinder-status='success'] {
+    --cinder-status-dot-color: var(--cinder-success);
+  }
+
+  .cinder-status-dot[data-cinder-status='accent'] {
+    --cinder-status-dot-color: var(--cinder-accent);
+  }
 }

package/dist/components/status-dot/status-dot.schema.js

@@ -57,8 +57,8 @@ var schema = {
   type: "object",
   properties: {
     status: {
-      enum: ["online", "offline", "warning", "error", "pending", "neutral"],
-      description: "Required semantic status. Drives color via `data-cinder-status`."
+      enum: ["online", "offline", "warning", "error", "pending", "neutral", "success", "accent"],
+      description: "Required semantic status. Drives color via `data-cinder-status`. `success` maps to `--cinder-success`; `accent` maps to `--cinder-accent`."
     },
     label: {
       type: "string",
@@ -87,4 +87,4 @@ export {
   status_dot_schema_default as default
 };
 
-//# debugId=FC677803B1266AE464756E2164756E21
+//# debugId=81166438EC18082B64756E2164756E21

package/dist/components/status-dot/status-dot.types.d.ts

@@ -8,10 +8,13 @@ import type { HTMLAttributes } from 'svelte/elements';
  * `error` → `--cinder-danger`) lives in `status-dot.css` so consumers can
  * theme without forking the component.
  *
+ * - `success` maps to `--cinder-success` (same hue as `online`).
+ * - `accent` maps to `--cinder-accent`.
+ *
  * Exported so host components (e.g. `stacked-list-item.svelte`) can type
  * their own `status` prop against this union rather than restating it.
  */
-export type StatusDotStatus = 'online' | 'offline' | 'warning' | 'error' | 'pending' | 'neutral';
+export type StatusDotStatus = 'online' | 'offline' | 'warning' | 'error' | 'pending' | 'neutral' | 'success' | 'accent';
 export type StatusDotSize = 'sm' | 'md';
 /**
  * Props for StatusDot.
@@ -35,7 +38,7 @@ export type StatusDotProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
     class?: string;
 };
 export interface StatusDotSchemaProps {
-    /** Required semantic status. Drives color via `data-cinder-status`. */
+    /** Required semantic status. Drives color via `data-cinder-status`. `success` maps to `--cinder-success`; `accent` maps to `--cinder-accent`. */
     status: StatusDotStatus;
     /** Optional human label. Rendered visibly when `showLabel` is true; used as the accessible name either way. */
     label?: string;

package/dist/components/subscription-badge/index.d.ts

@@ -0,0 +1,5 @@
+import './subscription-badge.css';
+import SubscriptionBadge from './subscription-badge.svelte';
+export default SubscriptionBadge;
+export type { SubscriptionBadgeProps, SubscriptionState } from './subscription-badge.types.ts';
+export { SubscriptionBadge };