@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/components/pricing-card/index.js

@@ -0,0 +1,406 @@
+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/pricing-card/index.ts
+import"@lostgradient/cinder/pricing-card/styles";
+
+// src/components/pricing-card/pricing-card.svelte
+import"svelte/internal/disclose-version";
+import * as $2 from "svelte/internal/client";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/button/button.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
+// src/components/button/button.svelte
+var root_2 = $.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
+var root_4 = $.from_html(`<span class="cinder-sr-only"> </span>`);
+var root_5 = $.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
+var root_3 = $.from_html(`<!> <!>`, 1);
+var root_8 = $.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
+var root_1 = $.from_html(`<!> <!> <!>`, 1);
+var root_9 = $.from_html(`<a><!></a>`);
+var root_10 = $.from_html(`<button><!></button>`);
+function Button($$anchor, $$props) {
+  $.push($$props, true);
+  const buttonContent = ($$anchor2) => {
+    var fragment = root_1();
+    var node = $.first_child(fragment);
+    {
+      var consequent = ($$anchor3) => {
+        var span = root_2();
+        var node_1 = $.child(span);
+        $.snippet(node_1, () => $$props.leadingIcon);
+        $.reset(span);
+        $.append($$anchor3, span);
+      };
+      $.if(node, ($$render) => {
+        if ($$props.leadingIcon)
+          $$render(consequent);
+      });
+    }
+    var node_2 = $.sibling(node, 2);
+    {
+      var consequent_3 = ($$anchor3) => {
+        var fragment_1 = root_3();
+        var node_3 = $.first_child(fragment_1);
+        {
+          var consequent_1 = ($$anchor4) => {
+            var span_1 = root_4();
+            var text2 = $.child(span_1, true);
+            $.reset(span_1);
+            $.template_effect(() => $.set_text(text2, $$props.label));
+            $.append($$anchor4, span_1);
+          };
+          $.if(node_3, ($$render) => {
+            if (!$.get(resolvedAriaLabel) && !$.get(resolvedAriaLabelledBy) && $$props.label)
+              $$render(consequent_1);
+          });
+        }
+        var node_4 = $.sibling(node_3, 2);
+        {
+          var consequent_2 = ($$anchor4) => {
+            var span_2 = root_5();
+            var node_5 = $.child(span_2);
+            $.snippet(node_5, () => $$props.children);
+            $.reset(span_2);
+            $.append($$anchor4, span_2);
+          };
+          $.if(node_4, ($$render) => {
+            if ($$props.children)
+              $$render(consequent_2);
+          });
+        }
+        $.append($$anchor3, fragment_1);
+      };
+      var consequent_4 = ($$anchor3) => {
+        var fragment_2 = $.comment();
+        var node_6 = $.first_child(fragment_2);
+        $.snippet(node_6, () => $$props.children);
+        $.append($$anchor3, fragment_2);
+      };
+      var alternate = ($$anchor3) => {
+        var text_1 = $.text();
+        $.template_effect(() => $.set_text(text_1, $$props.label));
+        $.append($$anchor3, text_1);
+      };
+      $.if(node_2, ($$render) => {
+        if (iconOnly())
+          $$render(consequent_3);
+        else if ($$props.children)
+          $$render(consequent_4, 1);
+        else
+          $$render(alternate, -1);
+      });
+    }
+    var node_7 = $.sibling(node_2, 2);
+    {
+      var consequent_5 = ($$anchor3) => {
+        var span_3 = root_8();
+        var node_8 = $.child(span_3);
+        $.snippet(node_8, () => $$props.trailingIcon);
+        $.reset(span_3);
+        $.append($$anchor3, span_3);
+      };
+      $.if(node_7, ($$render) => {
+        if ($$props.trailingIcon)
+          $$render(consequent_5);
+      });
+    }
+    $.append($$anchor2, fragment);
+  };
+  const variant = $.prop($$props, "variant", 3, "secondary"), size = $.prop($$props, "size", 3, "md"), fullWidth = $.prop($$props, "fullWidth", 3, false), loading = $.prop($$props, "loading", 3, false), iconOnly = $.prop($$props, "iconOnly", 3, false), rest = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "variant",
+    "size",
+    "fullWidth",
+    "loading",
+    "iconOnly",
+    "leadingIcon",
+    "trailingIcon",
+    "children",
+    "label",
+    "class",
+    "href",
+    "onclick",
+    "aria-disabled",
+    "aria-busy",
+    "aria-label",
+    "aria-labelledby",
+    "aria-expanded",
+    "aria-controls",
+    "aria-haspopup"
+  ]);
+  const mergedClassName = $.derived(() => classNames("cinder-button", $$props.class));
+  const dataAttributes = $.derived(() => ({
+    "data-cinder-variant": variant(),
+    "data-cinder-size": size(),
+    "data-cinder-full-width": fullWidth() ? "" : undefined,
+    "data-cinder-loading": loading() ? "" : undefined,
+    "data-cinder-icon-only": iconOnly() ? "" : undefined
+  }));
+  const resolvedAriaDisabled = $.derived(() => loading() ? "true" : $$props["aria-disabled"]);
+  const resolvedAriaBusy = $.derived(() => loading() ? "true" : $$props["aria-busy"]);
+  const resolvedAriaLabel = $.derived(() => typeof $$props["aria-label"] === "string" && $$props["aria-label"].trim().length > 0 ? $$props["aria-label"] : undefined);
+  const resolvedAriaLabelledBy = $.derived(() => typeof $$props["aria-labelledby"] === "string" && $$props["aria-labelledby"].trim().length > 0 ? $$props["aria-labelledby"] : undefined);
+  const anchorAttributes = rest;
+  const buttonAttributes = rest;
+  const anchorTabIndex = $.derived(() => $$props.tabindex);
+  const buttonType = $.derived(() => $$props.type);
+  const buttonDisabled = $.derived(() => $$props.disabled ?? false);
+  function handleClick(event) {
+    if (loading()) {
+      event.preventDefault();
+      return;
+    }
+    if (typeof $$props.onclick === "function") {
+      $$props.onclick(event);
+    }
+  }
+  $.user_effect(() => {
+    const hasLabel = typeof $$props.label === "string" && $$props.label.trim().length > 0;
+    const hasChildren = Boolean($$props.children);
+    const hasAriaLabel = $.get(resolvedAriaLabel) !== undefined;
+    const hasAriaLabelledBy = $.get(resolvedAriaLabelledBy) !== undefined;
+    if (!hasLabel && !hasChildren && !hasAriaLabel && !hasAriaLabelledBy) {
+      devWarn("[cinder/Button] rendered without an accessible name — pass a non-empty `label`, `children`, `aria-label`, or `aria-labelledby`.");
+    }
+    if (iconOnly() && !hasAriaLabel && !hasAriaLabelledBy && !hasLabel) {
+      devWarn("[cinder/Button] iconOnly=true requires aria-label, aria-labelledby, or a non-empty label.");
+    }
+    if (iconOnly() && !$$props.leadingIcon && !$$props.trailingIcon && !$$props.children) {
+      devWarn("[cinder/Button] iconOnly=true requires a visible icon — pass leadingIcon, trailingIcon, or children.");
+    }
+  });
+  var fragment_4 = $.comment();
+  var node_9 = $.first_child(fragment_4);
+  {
+    var consequent_6 = ($$anchor2) => {
+      var a = root_9();
+      $.attribute_effect(a, () => ({
+        ...anchorAttributes,
+        href: loading() ? undefined : $$props.href,
+        tabindex: loading() ? -1 : $.get(anchorTabIndex),
+        class: $.get(mergedClassName),
+        ...$.get(dataAttributes),
+        "aria-disabled": $.get(resolvedAriaDisabled),
+        "aria-busy": $.get(resolvedAriaBusy),
+        "aria-label": $.get(resolvedAriaLabel),
+        "aria-labelledby": $.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
+        onclick: handleClick
+      }));
+      var node_10 = $.child(a);
+      buttonContent(node_10);
+      $.reset(a);
+      $.append($$anchor2, a);
+    };
+    var alternate_1 = ($$anchor2) => {
+      var button = root_10();
+      $.attribute_effect(button, () => ({
+        ...buttonAttributes,
+        type: $.get(buttonType) ?? "button",
+        class: $.get(mergedClassName),
+        ...$.get(dataAttributes),
+        disabled: $.get(buttonDisabled) || loading(),
+        "aria-disabled": $.get(resolvedAriaDisabled),
+        "aria-busy": $.get(resolvedAriaBusy),
+        "aria-label": $.get(resolvedAriaLabel),
+        "aria-labelledby": $.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
+        onclick: handleClick
+      }));
+      var node_11 = $.child(button);
+      buttonContent(node_11);
+      $.reset(button);
+      $.append($$anchor2, button);
+    };
+    $.if(node_9, ($$render) => {
+      if ($$props.href !== undefined)
+        $$render(consequent_6);
+      else
+        $$render(alternate_1, -1);
+    });
+  }
+  $.append($$anchor, fragment_4);
+  $.pop();
+}
+
+// src/components/pricing-card/pricing-card.svelte
+var root_12 = $2.from_html(`<span class="cinder-pricing-card__selected-flag">Selected</span>`);
+var root_22 = $2.from_html(`<li class="cinder-pricing-card__feature"> </li>`);
+var root_32 = $2.from_html(`<p class="cinder-pricing-card__caveat" data-cinder-caveat=""> </p>`);
+var root = $2.from_html(`<div><div class="cinder-pricing-card__header"><div class="cinder-pricing-card__heading-row"><h3 class="cinder-pricing-card__name"> </h3> <!></div> <p class="cinder-pricing-card__price"> </p></div> <div class="cinder-pricing-card__body"><ul class="cinder-pricing-card__features"></ul> <!></div> <div class="cinder-pricing-card__footer"><!></div></div>`);
+function Pricing_card($$anchor, $$props) {
+  $2.push($$props, true);
+  let selected = $2.prop($$props, "selected", 3, false), rest = $2.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "name",
+    "price",
+    "features",
+    "cta",
+    "onselect",
+    "caveat",
+    "selected",
+    "class"
+  ]);
+  var div = root();
+  $2.attribute_effect(div, ($0) => ({
+    class: $0,
+    "data-cinder-selected": selected() ? "" : undefined,
+    "aria-current": selected() ? "true" : undefined,
+    ...rest
+  }), [() => classNames("cinder-pricing-card", $$props.class)]);
+  var div_1 = $2.child(div);
+  var div_2 = $2.child(div_1);
+  var h3 = $2.child(div_2);
+  var text2 = $2.child(h3, true);
+  $2.reset(h3);
+  var node = $2.sibling(h3, 2);
+  {
+    var consequent = ($$anchor2) => {
+      var span = root_12();
+      $2.append($$anchor2, span);
+    };
+    $2.if(node, ($$render) => {
+      if (selected())
+        $$render(consequent);
+    });
+  }
+  $2.reset(div_2);
+  var p = $2.sibling(div_2, 2);
+  var text_1 = $2.child(p, true);
+  $2.reset(p);
+  $2.reset(div_1);
+  var div_3 = $2.sibling(div_1, 2);
+  var ul = $2.child(div_3);
+  $2.each(ul, 21, () => $$props.features, $2.index, ($$anchor2, feature) => {
+    var li = root_22();
+    var text_2 = $2.child(li, true);
+    $2.reset(li);
+    $2.template_effect(() => $2.set_text(text_2, $2.get(feature)));
+    $2.append($$anchor2, li);
+  });
+  $2.reset(ul);
+  var node_1 = $2.sibling(ul, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var p_1 = root_32();
+      var text_3 = $2.child(p_1, true);
+      $2.reset(p_1);
+      $2.template_effect(() => $2.set_text(text_3, $$props.caveat));
+      $2.append($$anchor2, p_1);
+    };
+    $2.if(node_1, ($$render) => {
+      if ($$props.caveat)
+        $$render(consequent_1);
+    });
+  }
+  $2.reset(div_3);
+  var div_4 = $2.sibling(div_3, 2);
+  var node_2 = $2.child(div_4);
+  {
+    let $0 = $2.derived(() => selected() ? "primary" : "secondary");
+    Button(node_2, {
+      get label() {
+        return $$props.cta;
+      },
+      get variant() {
+        return $2.get($0);
+      },
+      fullWidth: true,
+      get onclick() {
+        return $$props.onselect;
+      }
+    });
+  }
+  $2.reset(div_4);
+  $2.reset(div);
+  $2.template_effect(() => {
+    $2.set_text(text2, $$props.name);
+    $2.set_text(text_1, $$props.price);
+  });
+  $2.append($$anchor, div);
+  $2.pop();
+}
+
+// src/components/pricing-card/index.ts
+var pricing_card_default = Pricing_card;
+export {
+  pricing_card_default as default,
+  Pricing_card as PricingCard
+};
+
+//# debugId=C8B79E45252D437464756E2164756E21

package/dist/components/pricing-card/pricing-card.css

@@ -0,0 +1,173 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  /* ========================================
+ * PRICING CARD
+ * ======================================== */
+
+  .cinder-pricing-card {
+    container-type: inline-size;
+    container-name: cinder-pricing-card;
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+    border-radius: var(--cinder-radius-lg);
+    background: var(--cinder-surface-raised);
+    border: 1px solid var(--cinder-border-muted);
+    color: var(--cinder-text);
+    box-shadow: var(--cinder-shadow-sm);
+    overflow: hidden;
+    transition:
+      border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  .cinder-pricing-card[data-cinder-selected] {
+    border-color: var(--cinder-accent);
+    box-shadow:
+      var(--cinder-shadow-sm),
+      0 0 0 2px color-mix(in oklch, var(--cinder-accent), transparent 70%);
+  }
+
+  /* ----------------------------------------
+ * Header
+ * ---------------------------------------- */
+
+  .cinder-pricing-card__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-4) var(--cinder-space-4) var(--cinder-space-3);
+    border-bottom: 1px solid var(--cinder-border-muted);
+  }
+
+  .cinder-pricing-card[data-cinder-selected] .cinder-pricing-card__header {
+    background: color-mix(in oklch, var(--cinder-accent), transparent 92%);
+  }
+
+  .cinder-pricing-card__heading-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cinder-space-2);
+  }
+
+  /* Non-color cue for the selected plan (WCAG 1.4.1): a text pill in the header
+   * so selection is conveyed independently of the accent treatment. */
+  .cinder-pricing-card__selected-flag {
+    flex-shrink: 0;
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-semibold);
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+    color: var(--cinder-accent-text);
+    background: color-mix(in oklch, var(--cinder-accent), transparent 85%);
+    border-radius: var(--cinder-radius-full);
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    line-height: 1;
+  }
+
+  /* ----------------------------------------
+ * Name & price
+ * ---------------------------------------- */
+
+  .cinder-pricing-card__name {
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-semibold);
+    color: var(--cinder-text);
+    margin: 0;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+  }
+
+  .cinder-pricing-card[data-cinder-selected] .cinder-pricing-card__name {
+    color: var(--cinder-accent-text);
+  }
+
+  .cinder-pricing-card__price {
+    font-size: var(--cinder-text-3xl);
+    font-weight: var(--cinder-font-bold);
+    color: var(--cinder-text);
+    margin: 0;
+    line-height: 1;
+  }
+
+  /* ----------------------------------------
+ * Body
+ * ---------------------------------------- */
+
+  .cinder-pricing-card__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-3);
+    padding: var(--cinder-space-4);
+  }
+
+  /* ----------------------------------------
+ * Features list
+ * ---------------------------------------- */
+
+  .cinder-pricing-card__features {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-pricing-card__feature {
+    display: flex;
+    align-items: baseline;
+    gap: var(--cinder-space-2);
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+  }
+
+  .cinder-pricing-card__feature::before {
+    content: '';
+    display: inline-block;
+    inline-size: 0.375rem;
+    block-size: 0.375rem;
+    border-radius: var(--cinder-radius-full);
+    background: var(--cinder-accent);
+    flex-shrink: 0;
+    translate: 0 0.1em;
+  }
+
+  /* ----------------------------------------
+ * Caveat
+ * ---------------------------------------- */
+
+  .cinder-pricing-card__caveat {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-subtle);
+    margin: 0;
+    font-style: italic;
+  }
+
+  /* ----------------------------------------
+ * Footer (CTA)
+ * ---------------------------------------- */
+
+  .cinder-pricing-card__footer {
+    padding: var(--cinder-space-3) var(--cinder-space-4) var(--cinder-space-4);
+    border-top: 1px solid var(--cinder-border-muted);
+  }
+
+  /* ----------------------------------------
+ * Responsive
+ * ---------------------------------------- */
+
+  /* Shrink the price only when the card itself is genuinely cramped — near the
+   * tight end of an auto-fit grid (examples floor at ~14rem). A viewport @media
+   * here would be wrong: a pricing card reacts to its own box width, not the
+   * viewport (RESPONSIVE-POLICY.md). The previous 640px viewport breakpoint
+   * fired on phones; the equivalent container threshold is far smaller because
+   * pricing cards render at ~14–22rem, not full-viewport width. */
+  @container cinder-pricing-card (max-width: 16rem) {
+    .cinder-pricing-card__price {
+      font-size: var(--cinder-text-2xl);
+    }
+  }
+}

package/dist/components/pricing-card/pricing-card.schema.d.ts

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

package/dist/components/pricing-card/pricing-card.schema.js

@@ -0,0 +1,100 @@
+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/pricing-card/pricing-card.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    name: {
+      type: "string",
+      description: "Plan name displayed as the card heading."
+    },
+    price: {
+      type: "string",
+      description: 'Price string, e.g. "$9/mo" or "Free".'
+    },
+    features: {
+      type: "array",
+      items: {
+        type: "string"
+      },
+      description: "Feature strings to display in the bulleted list."
+    },
+    cta: {
+      type: "string",
+      description: "Label for the call-to-action button."
+    },
+    caveat: {
+      type: "string",
+      description: "Optional footnote or caveat beneath the features list."
+    },
+    selected: {
+      type: "boolean",
+      description: "Whether this card is the currently selected plan.",
+      default: false
+    },
+    class: {
+      type: "string",
+      description: "Custom class merged with `.cinder-pricing-card`."
+    }
+  },
+  additionalProperties: false,
+  required: ["cta", "features", "name", "price"]
+};
+var pricing_card_schema_default = schema;
+export {
+  pricing_card_schema_default as default
+};
+
+//# debugId=103908E7FB47863564756E2164756E21

package/dist/components/pricing-card/pricing-card.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @cinder
+ * @category data-display
+ * @status alpha
+ * @purpose Presents a single pricing plan with its name, price, feature list, and a call-to-action button.
+ * @tag pricing
+ * @tag plan
+ * @useWhen Letting users compare and select subscription tiers or product plans.
+ * @useWhen Highlighting one tier as selected or recommended in a pricing comparison.
+ * @avoidWhen Showing generic grouped content without a distinct price or CTA — use card instead.
+ * @avoidWhen Displaying a single key metric in isolation — use stat or stat-group instead.
+ * @related card, button, stat, stat-group
+ */
+export type { PricingCardProps } from './pricing-card.types.ts';
+import type { PricingCardProps } from './pricing-card.types.ts';
+declare const PricingCard: import("svelte").Component<PricingCardProps, {}, "">;
+type PricingCard = ReturnType<typeof PricingCard>;
+export default PricingCard;