@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/connection-indicator/index.js

@@ -1,42 +0,0 @@
-import { createRequire } from "node:module";
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// src/components/connection-indicator/connection-indicator.svelte
-import * as $ 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/connection-indicator/connection-indicator.svelte
-function Connection_indicator($$renderer, $$props) {
-  $$renderer.component(($$renderer2) => {
-    let { state, label, class: className, $$slots, $$events, ...rest } = $$props;
-    const defaultLabels = {
-      connected: "Connected",
-      connecting: "Connecting",
-      disconnected: "Disconnected",
-      error: "Error"
-    };
-    const visibleLabel = $.derived(() => label ?? defaultLabels[state]);
-    $$renderer2.push(`<span${$.attributes({
-      ...rest,
-      class: $.clsx(classNames("cinder-connection-indicator", className)),
-      "data-cinder-state": state,
-      role: "status",
-      "aria-live": "polite",
-      "aria-atomic": "true"
-    })}><span class="cinder-connection-indicator__dot" aria-hidden="true"></span> <span class="cinder-connection-indicator__label">${$.escape(visibleLabel())}</span></span>`);
-  });
-}
-
-// src/components/connection-indicator/index.ts
-var connection_indicator_default = Connection_indicator;
-export {
-  connection_indicator_default as default,
-  Connection_indicator as ConnectionIndicator
-};
-
-//# debugId=B0A5F8A89CC5DC3764756E2164756E21

package/dist/server/components/experimental/connection-indicator/index.js

@@ -1,23 +0,0 @@
-import { createRequire } from "node:module";
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// ../../node_modules/esm-env/false.js
-var false_default = false;
-// ../../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/experimental/connection-indicator/index.ts
-devWarn("[cinder] '@lostgradient/cinder/experimental/connection-indicator' is deprecated and will be removed in the next major. " + "Import from '@lostgradient/cinder/connection-indicator' instead.");
-export {
-  default2 as default,
-  ConnectionIndicator
-};
-
-//# debugId=2714CD15622BF14864756E2164756E21

package/dist/server/components/subscription-badge/index.css

@@ -1,2 +0,0 @@
-/* src/components/subscription-badge/subscription-badge.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;

package/dist/server/components/subscription-badge/index.js

@@ -1,308 +0,0 @@
-import { createRequire } from "node:module";
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// src/components/subscription-badge/subscription-badge.svelte
-import * as $9 from "svelte/internal/server";
-
-// ../../node_modules/lucide-svelte/dist/icons/circle-check.svelte
-import * as $2 from "svelte/internal/server";
-
-// ../../node_modules/lucide-svelte/dist/Icon.svelte
-import * as $ from "svelte/internal/server";
-
-// ../../node_modules/lucide-svelte/dist/defaultAttributes.js
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": 2,
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
-};
-var defaultAttributes_default = defaultAttributes;
-
-// ../../node_modules/lucide-svelte/dist/Icon.svelte
-function Icon($$renderer, $$props) {
-  const $$sanitized_props = $.sanitize_props($$props);
-  const $$restProps = $.rest_props($$sanitized_props, [
-    "name",
-    "color",
-    "size",
-    "strokeWidth",
-    "absoluteStrokeWidth",
-    "iconNode"
-  ]);
-  $$renderer.component(($$renderer2) => {
-    let name = $.fallback($$props["name"], undefined);
-    let color = $.fallback($$props["color"], "currentColor");
-    let size = $.fallback($$props["size"], 24);
-    let strokeWidth = $.fallback($$props["strokeWidth"], 2);
-    let absoluteStrokeWidth = $.fallback($$props["absoluteStrokeWidth"], false);
-    let iconNode = $.fallback($$props["iconNode"], () => [], true);
-    const mergeClasses = (...classes) => classes.filter((className, index, array) => {
-      return Boolean(className) && array.indexOf(className) === index;
-    }).join(" ");
-    $$renderer2.push(`<svg${$.attributes({
-      ...defaultAttributes_default,
-      ...$$restProps,
-      width: size,
-      height: size,
-      stroke: color,
-      "stroke-width": absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-      class: $.clsx(mergeClasses("lucide-icon", "lucide", name ? `lucide-${name}` : "", $$sanitized_props.class))
-    }, undefined, undefined, undefined, 3)}><!--[-->`);
-    const each_array = $.ensure_array_like(iconNode);
-    for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
-      let [tag, attrs] = each_array[$$index];
-      $.element($$renderer2, tag, () => {
-        $$renderer2.push(`${$.attributes({ ...attrs }, undefined, undefined, undefined, 3)}`);
-      });
-    }
-    $$renderer2.push(`<!--]--><!--[-->`);
-    $.slot($$renderer2, $$props, "default", {}, null);
-    $$renderer2.push(`<!--]--></svg>`);
-    $.bind_props($$props, {
-      name,
-      color,
-      size,
-      strokeWidth,
-      absoluteStrokeWidth,
-      iconNode
-    });
-  });
-}
-
-// ../../node_modules/lucide-svelte/dist/icons/circle-check.svelte
-function Circle_check($$renderer, $$props) {
-  const $$sanitized_props = $2.sanitize_props($$props);
-  const iconNode = [
-    ["circle", { cx: "12", cy: "12", r: "10" }],
-    ["path", { d: "m9 12 2 2 4-4" }]
-  ];
-  Icon($$renderer, $2.spread_props([
-    { name: "circle-check" },
-    $$sanitized_props,
-    {
-      iconNode,
-      children: ($$renderer2) => {
-        $$renderer2.push(`<!--[-->`);
-        $2.slot($$renderer2, $$props, "default", {}, null);
-        $$renderer2.push(`<!--]-->`);
-      },
-      $$slots: { default: true }
-    }
-  ]));
-}
-// ../../node_modules/lucide-svelte/dist/icons/clock.svelte
-import * as $3 from "svelte/internal/server";
-function Clock($$renderer, $$props) {
-  const $$sanitized_props = $3.sanitize_props($$props);
-  const iconNode = [
-    ["circle", { cx: "12", cy: "12", r: "10" }],
-    ["polyline", { points: "12 6 12 12 16 14" }]
-  ];
-  Icon($$renderer, $3.spread_props([
-    { name: "clock" },
-    $$sanitized_props,
-    {
-      iconNode,
-      children: ($$renderer2) => {
-        $$renderer2.push(`<!--[-->`);
-        $3.slot($$renderer2, $$props, "default", {}, null);
-        $$renderer2.push(`<!--]-->`);
-      },
-      $$slots: { default: true }
-    }
-  ]));
-}
-// ../../node_modules/lucide-svelte/dist/icons/triangle-alert.svelte
-import * as $4 from "svelte/internal/server";
-function Triangle_alert($$renderer, $$props) {
-  const $$sanitized_props = $4.sanitize_props($$props);
-  const iconNode = [
-    [
-      "path",
-      {
-        d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
-      }
-    ],
-    ["path", { d: "M12 9v4" }],
-    ["path", { d: "M12 17h.01" }]
-  ];
-  Icon($$renderer, $4.spread_props([
-    { name: "triangle-alert" },
-    $$sanitized_props,
-    {
-      iconNode,
-      children: ($$renderer2) => {
-        $$renderer2.push(`<!--[-->`);
-        $4.slot($$renderer2, $$props, "default", {}, null);
-        $$renderer2.push(`<!--]-->`);
-      },
-      $$slots: { default: true }
-    }
-  ]));
-}
-// ../../node_modules/lucide-svelte/dist/icons/circle-x.svelte
-import * as $5 from "svelte/internal/server";
-function Circle_x($$renderer, $$props) {
-  const $$sanitized_props = $5.sanitize_props($$props);
-  const iconNode = [
-    ["circle", { cx: "12", cy: "12", r: "10" }],
-    ["path", { d: "m15 9-6 6" }],
-    ["path", { d: "m9 9 6 6" }]
-  ];
-  Icon($$renderer, $5.spread_props([
-    { name: "circle-x" },
-    $$sanitized_props,
-    {
-      iconNode,
-      children: ($$renderer2) => {
-        $$renderer2.push(`<!--[-->`);
-        $5.slot($$renderer2, $$props, "default", {}, null);
-        $$renderer2.push(`<!--]-->`);
-      },
-      $$slots: { default: true }
-    }
-  ]));
-}
-// ../../node_modules/lucide-svelte/dist/icons/calendar-x.svelte
-import * as $6 from "svelte/internal/server";
-function Calendar_x($$renderer, $$props) {
-  const $$sanitized_props = $6.sanitize_props($$props);
-  const iconNode = [
-    ["path", { d: "M8 2v4" }],
-    ["path", { d: "M16 2v4" }],
-    [
-      "rect",
-      { width: "18", height: "18", x: "3", y: "4", rx: "2" }
-    ],
-    ["path", { d: "M3 10h18" }],
-    ["path", { d: "m14 14-4 4" }],
-    ["path", { d: "m10 14 4 4" }]
-  ];
-  Icon($$renderer, $6.spread_props([
-    { name: "calendar-x" },
-    $$sanitized_props,
-    {
-      iconNode,
-      children: ($$renderer2) => {
-        $$renderer2.push(`<!--[-->`);
-        $6.slot($$renderer2, $$props, "default", {}, null);
-        $$renderer2.push(`<!--]-->`);
-      },
-      $$slots: { default: true }
-    }
-  ]));
-}
-// ../../node_modules/lucide-svelte/dist/icons/rotate-ccw.svelte
-import * as $7 from "svelte/internal/server";
-function Rotate_ccw($$renderer, $$props) {
-  const $$sanitized_props = $7.sanitize_props($$props);
-  const iconNode = [
-    [
-      "path",
-      { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }
-    ],
-    ["path", { d: "M3 3v5h5" }]
-  ];
-  Icon($$renderer, $7.spread_props([
-    { name: "rotate-ccw" },
-    $$sanitized_props,
-    {
-      iconNode,
-      children: ($$renderer2) => {
-        $$renderer2.push(`<!--[-->`);
-        $7.slot($$renderer2, $$props, "default", {}, null);
-        $$renderer2.push(`<!--]-->`);
-      },
-      $$slots: { default: true }
-    }
-  ]));
-}
-// src/components/badge/badge.svelte
-import * as $8 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/badge/badge.svelte
-function Badge($$renderer, $$props) {
-  $$renderer.component(($$renderer2) => {
-    let {
-      variant = "neutral",
-      size = "md",
-      mono = false,
-      class: customClassName,
-      children,
-      $$slots,
-      $$events,
-      ...rest
-    } = $$props;
-    $$renderer2.push(`<span${$8.attributes({
-      class: $8.clsx(classNames("cinder-badge", customClassName)),
-      "data-cinder-variant": variant,
-      "data-cinder-size": size,
-      "data-cinder-mono": mono ? "" : undefined,
-      ...rest
-    })}>`);
-    children?.($$renderer2);
-    $$renderer2.push(`<!----></span>`);
-  });
-}
-
-// src/components/subscription-badge/subscription-badge.svelte
-function Subscription_badge($$renderer, $$props) {
-  $$renderer.component(($$renderer2) => {
-    const STATE_CONFIG = {
-      active: { tone: "success", icon: Circle_check, label: "Active" },
-      trialing: { tone: "info", icon: Clock, label: "Trialing" },
-      "past-due": { tone: "warning", icon: Triangle_alert, label: "Past due" },
-      canceled: { tone: "neutral", icon: Circle_x, label: "Canceled" },
-      expired: { tone: "danger", icon: Calendar_x, label: "Expired" },
-      refunded: { tone: "neutral", icon: Rotate_ccw, label: "Refunded" }
-    };
-    let { state, class: customClassName, $$slots, $$events, ...rest } = $$props;
-    const config = $9.derived(() => STATE_CONFIG[state]);
-    const Icon2 = $9.derived(() => config().icon);
-    const label = $9.derived(() => config().label);
-    const tone = $9.derived(() => config().tone);
-    Badge($$renderer2, $9.spread_props([
-      {
-        variant: tone(),
-        class: classNames("cinder-subscription-badge", customClassName),
-        "data-cinder-state": state
-      },
-      rest,
-      {
-        children: ($$renderer3) => {
-          if (Icon2()) {
-            $$renderer3.push("<!--[-->");
-            Icon2()($$renderer3, { class: "icon-sm", "aria-hidden": "true" });
-            $$renderer3.push("<!--]-->");
-          } else {
-            $$renderer3.push("<!--[!-->");
-            $$renderer3.push("<!--]-->");
-          }
-          $$renderer3.push(` ${$9.escape(label())}`);
-        },
-        $$slots: { default: true }
-      }
-    ]));
-  });
-}
-
-// src/components/subscription-badge/index.ts
-var subscription_badge_default = Subscription_badge;
-export {
-  subscription_badge_default as default,
-  Subscription_badge as SubscriptionBadge
-};
-
-//# debugId=A407DCA939D96F2264756E2164756E21

package/dist/server/components/subscription-badge/subscription-badge.schema.js

@@ -1,28 +0,0 @@
-import { createRequire } from "node:module";
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// src/components/subscription-badge/subscription-badge.schema.ts
-var schema = {
-  $schema: "https://json-schema.org/draft/2020-12/schema",
-  type: "object",
-  properties: {
-    state: {
-      enum: ["active", "trialing", "past-due", "canceled", "expired", "refunded"],
-      description: `The billing lifecycle state to display.
-Determines the badge tone, icon, and label automatically.`
-    },
-    class: {
-      type: "string",
-      description: "Extra classes forwarded to the underlying Badge."
-    }
-  },
-  additionalProperties: false,
-  required: ["state"]
-};
-var subscription_badge_schema_default = schema;
-export {
-  subscription_badge_schema_default as default
-};
-
-//# debugId=43AF73D7DE7B4F9E64756E2164756E21

package/dist/server/components/subscription-badge/subscription-badge.variables.js

@@ -1,12 +0,0 @@
-import { createRequire } from "node:module";
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// src/components/subscription-badge/subscription-badge.variables.ts
-var variables = [];
-var subscription_badge_variables_default = variables;
-export {
-  subscription_badge_variables_default as default
-};
-
-//# debugId=4136026582995CA664756E2164756E21

package/src/components/connection-indicator/README.md

@@ -1,41 +0,0 @@
-# ConnectionIndicator
-
-Live-status pill pairing a semantic dot with a label to communicate real-time WebSocket, SSE, or polling connection state.
-
-## Usage
-
-```svelte
-<script lang="ts">
-  import ConnectionIndicator from '@lostgradient/cinder/connection-indicator';
-</script>
-
-<ConnectionIndicator state="connected" />
-```
-
-## Props
-
-<!-- generated:props:start -->
-
-| Prop    | Type                                                             | Required | Default | Description                                                             |
-| ------- | ---------------------------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------- |
-| `class` | `string`                                                         | no       | —       | Additional class names merged with `.cinder-connection-indicator`.      |
-| `label` | `string`                                                         | no       | —       | Optional override for the visible label. Defaults derived from `state`. |
-| `state` | `"connected"` \| `"connecting"` \| `"disconnected"` \| `"error"` | yes      | —       | Current connection state.                                               |
-
-<!-- generated:props:end -->
-
-## CSS Variables
-
-<!-- generated:variables:start -->
-
-This component does not declare any local CSS variables.
-
-<!-- generated:variables:end -->
-
-## Subcomponents
-
-<!-- generated:subcomponents:start -->
-
-None.
-
-<!-- generated:subcomponents:end -->

package/src/components/connection-indicator/connection-indicator.css

@@ -1,63 +0,0 @@
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-@layer cinder.components {
-  /* ========================================
- * CONNECTION INDICATOR
- * Live-status pill with semantic dot + label.
- * ======================================== */
-
-  .cinder-connection-indicator {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cinder-space-1-5);
-    padding: var(--cinder-space-0-5) var(--cinder-space-2);
-    font-size: var(--cinder-text-xs);
-    font-weight: var(--cinder-font-medium);
-    border-radius: var(--cinder-radius-full);
-    background: var(--cinder-surface-inset);
-    color: var(--cinder-text);
-  }
-
-  .cinder-connection-indicator__dot {
-    display: inline-block;
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: var(--cinder-radius-full);
-    background: currentColor;
-  }
-
-  .cinder-connection-indicator[data-cinder-state='connected'] {
-    color: var(--cinder-success);
-  }
-
-  .cinder-connection-indicator[data-cinder-state='connecting'] {
-    color: var(--cinder-warning);
-  }
-
-  .cinder-connection-indicator[data-cinder-state='connecting'] .cinder-connection-indicator__dot {
-    animation: cinder-connection-pulse 1.4s ease-in-out infinite;
-  }
-
-  @keyframes cinder-connection-pulse {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.3;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cinder-connection-indicator[data-cinder-state='connecting'] .cinder-connection-indicator__dot {
-      animation: none;
-    }
-  }
-
-  .cinder-connection-indicator[data-cinder-state='disconnected'] {
-    color: var(--cinder-text-muted);
-  }
-
-  .cinder-connection-indicator[data-cinder-state='error'] {
-    color: var(--cinder-danger);
-  }
-}

package/src/components/connection-indicator/connection-indicator.svelte

@@ -1,44 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category feedback
-   * @status stable
-   * @purpose Live-status pill pairing a semantic dot with a label to communicate real-time WebSocket, SSE, or polling connection state.
-   * @tag connection
-   * @tag status
-   * @tag realtime
-   * @useWhen Surfacing whether a realtime channel is connected, connecting, disconnected, or errored on a dashboard or app chrome.
-   * @useWhen Giving operators an at-a-glance health signal for a long-lived transport.
-   * @avoidWhen Communicating generic semantic state with no realtime connection backing it — status-dot is the lower-level primitive.
-   * @related status-dot, spinner
-   */
-  export type { ConnectionIndicatorProps, ConnectionState } from './connection-indicator.types.ts';
-</script>
-
-<script lang="ts">
-  import type { ConnectionIndicatorProps, ConnectionState } from './connection-indicator.types.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-
-  let { state, label, class: className, ...rest }: ConnectionIndicatorProps = $props();
-
-  const defaultLabels: Record<ConnectionState, string> = {
-    connected: 'Connected',
-    connecting: 'Connecting',
-    disconnected: 'Disconnected',
-    error: 'Error',
-  };
-
-  const visibleLabel = $derived(label ?? defaultLabels[state]);
-</script>
-
-<span
-  {...rest}
-  class={classNames('cinder-connection-indicator', className)}
-  data-cinder-state={state}
-  role="status"
-  aria-live="polite"
-  aria-atomic="true"
->
-  <span class="cinder-connection-indicator__dot" aria-hidden="true"></span>
-  <span class="cinder-connection-indicator__label">{visibleLabel}</span>
-</span>

package/src/components/connection-indicator/connection-indicator.types.ts

@@ -1,18 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-
-/**
- * Live-status pill with a semantic dot and label. Use to show real-time
- * connection state (WebSocket, SSE, polling) on dashboards.
- */
-export type ConnectionState = 'connected' | 'connecting' | 'disconnected' | 'error';
-// Extends native span attributes so consumers can forward `id`, `data-*`,
-// `aria-*`, etc. onto the root. `class` and `role` are Omit-ted: `class` is
-// merged explicitly, and `role="status"` is intrinsic to the live-region purpose.
-export type ConnectionIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'role'> & {
-  /** Current connection state. */
-  state: ConnectionState;
-  /** Optional override for the visible label. Defaults derived from `state`. */
-  label?: string;
-  /** Additional class names merged with `.cinder-connection-indicator`. */
-  class?: string;
-};

package/src/components/connection-indicator/index.ts

@@ -1,6 +0,0 @@
-import './connection-indicator.css';
-import ConnectionIndicator from './connection-indicator.svelte';
-
-export default ConnectionIndicator;
-export type { ConnectionIndicatorProps, ConnectionState } from './connection-indicator.types.ts';
-export { ConnectionIndicator };

package/src/components/experimental/connection-indicator/index.ts

@@ -1,20 +0,0 @@
-// Deprecated alias — do not edit by hand.
-//
-// `@lostgradient/cinder/experimental/connection-indicator` moved to `@lostgradient/cinder/connection-indicator`
-// when the component was promoted to stable. This shim re-exports the new
-// location so existing imports keep resolving during the deprecation window,
-// and warns once (dev only) so consumers migrate before the alias is removed
-// in the next major. Generated/managed by scripts/generate-exports.ts.
-
-import { devWarn } from '../../../utilities/dev-warn.ts';
-
-devWarn(
-  "[cinder] '@lostgradient/cinder/experimental/connection-indicator' is deprecated and will be removed in the next major. " +
-    "Import from '@lostgradient/cinder/connection-indicator' instead.",
-);
-
-export { ConnectionIndicator, default } from '../../connection-indicator/index.ts';
-export type {
-  ConnectionIndicatorProps,
-  ConnectionState,
-} from '../../connection-indicator/index.ts';