@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/pricing-card/pricing-card.svelte

@@ -1,95 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @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';
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../utilities/class-names.ts';
-  import { devWarn } from '../../utilities/dev-warn.ts';
-  import Button from '../button/button.svelte';
-  import type { PricingCardProps } from './pricing-card.types.ts';
-
-  let {
-    name,
-    price,
-    features,
-    cta,
-    onselect,
-    caveat,
-    selected = false,
-    class: className,
-    ...rest
-  }: PricingCardProps = $props();
-
-  // Deduplicate features by value (first occurrence wins) so the keyed {#each}
-  // never receives duplicate keys and Svelte cannot throw each_key_duplicate.
-  // A dev warning is emitted when duplicates are found so the data author can fix
-  // their input, but the component continues to render the deduplicated list.
-  const renderableFeatures = $derived.by(() => {
-    const seen = new Set<string>();
-    const result: string[] = [];
-    let hasDuplicates = false;
-    for (const feature of features) {
-      if (seen.has(feature)) {
-        hasDuplicates = true;
-      } else {
-        seen.add(feature);
-        result.push(feature);
-      }
-    }
-    if (hasDuplicates) {
-      devWarn(
-        '[cinder/PricingCard] Duplicate feature values detected. Each feature must be unique when used as a list key. Duplicates were removed; only the first occurrence of each value is shown.',
-      );
-    }
-    return result;
-  });
-</script>
-
-<div
-  class={classNames('cinder-pricing-card', className)}
-  data-cinder-selected={selected ? '' : undefined}
-  aria-current={selected ? 'true' : undefined}
-  {...rest}
->
-  <div class="cinder-pricing-card__header">
-    <div class="cinder-pricing-card__heading-row">
-      <h3 class="cinder-pricing-card__name">{name}</h3>
-      <!-- A visible, non-color cue for the selected plan: the accent border and
-           CTA tint alone would not be perceivable to a colour-blind sighted
-           user (WCAG 1.4.1), so the selected state also carries explicit text. -->
-      {#if selected}
-        <span class="cinder-pricing-card__selected-flag">Selected</span>
-      {/if}
-    </div>
-    <p class="cinder-pricing-card__price">{price}</p>
-  </div>
-
-  <div class="cinder-pricing-card__body">
-    <ul class="cinder-pricing-card__features">
-      {#each renderableFeatures as feature (feature)}
-        <li class="cinder-pricing-card__feature">{feature}</li>
-      {/each}
-    </ul>
-
-    {#if caveat}
-      <p class="cinder-pricing-card__caveat" data-cinder-caveat="">{caveat}</p>
-    {/if}
-  </div>
-
-  <div class="cinder-pricing-card__footer">
-    <Button label={cta} variant={selected ? 'primary' : 'secondary'} fullWidth onclick={onselect} />
-  </div>
-</div>

package/src/components/pricing-card/pricing-card.types.ts

@@ -1,49 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-
-/** Props for the PricingCard component. */
-export type PricingCardProps = Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> & {
-  /** Plan name displayed as the card heading. */
-  name: string;
-  /** Price string, e.g. "$9/mo" or "Free". Rendered verbatim — include any currency symbol and billing period. */
-  price: string;
-  /** List of feature strings to display. Rendered as a bulleted list. */
-  features: string[];
-  /** Label for the call-to-action button. */
-  cta: string;
-  /** Called when the CTA button is clicked. */
-  onselect: () => void;
-  /**
-   * Optional footnote or caveat displayed beneath the features list.
-   * Use for legal disclaimers, billing notes, or conditional terms.
-   * Rendered in a visually subdued style to distinguish it from the main feature list.
-   */
-  caveat?: string;
-  /**
-   * Whether this card represents the currently selected plan.
-   * Sets `data-cinder-selected` and `aria-current="true"` on the root element.
-   */
-  selected?: boolean;
-  /** Merged with the root element's class list. */
-  class?: string;
-};
-
-/** Cinder-specific props for the PricingCard component, used by the schema generator. */
-export interface PricingCardSchemaProps {
-  /** Plan name displayed as the card heading. */
-  name: string;
-  /** Price string, e.g. "$9/mo" or "Free". */
-  price: string;
-  /** Feature strings to display in the bulleted list. */
-  features: string[];
-  /** Label for the call-to-action button. */
-  cta: string;
-  /** Optional footnote or caveat beneath the features list. */
-  caveat?: string;
-  /**
-   * Whether this card is the currently selected plan.
-   * @default false
-   */
-  selected?: boolean;
-  /** Custom class merged with `.cinder-pricing-card`. */
-  class?: string;
-}

package/src/components/pricing-section/index.ts

@@ -1,6 +0,0 @@
-import './pricing-section.css';
-import PricingSection from './pricing-section.svelte';
-
-export default PricingSection;
-export type { PricingSectionPlan, PricingSectionProps } from './pricing-section.types.ts';
-export { PricingSection };

package/src/components/pricing-section/pricing-section.svelte

@@ -1,84 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category domain
-   * @status stable
-   * @purpose Pricing comparison section that lays out multiple plans using the existing PricingCard primitive.
-   * @tag marketing
-   * @tag pricing
-   * @tag plans
-   * @useWhen Presenting tiered subscription plans with features and action buttons.
-   * @useWhen Highlighting a recommended plan while still allowing side-by-side comparison.
-   * @avoidWhen Showing generic metrics without plan selection controls. | stats-section
-   * @avoidWhen Rendering a single standalone plan card outside of a section context. | pricing-card
-   * @related pricing-card, stats-section, cta-section, container
-   */
-  export type { PricingSectionPlan, PricingSectionProps } from './pricing-section.types.ts';
-</script>
-
-<script lang="ts">
-  import Container from '../container/container.svelte';
-  import PricingCard from '../pricing-card/pricing-card.svelte';
-  import { classNames } from '../../utilities/class-names.ts';
-
-  import type { PricingSectionProps } from './pricing-section.types.ts';
-
-  let {
-    as = 'section',
-    title,
-    description,
-    plans,
-    columns = 3,
-    onPlanSelect,
-    maxWidth = 'wide',
-    class: className,
-    ...rest
-  }: PricingSectionProps = $props();
-
-  function optionalPlanProps(plan: PricingSectionProps['plans'][number]): {
-    caveat?: string;
-    selected?: boolean;
-  } {
-    return {
-      ...(plan.caveat ? { caveat: plan.caveat } : {}),
-      ...(plan.selected !== undefined ? { selected: plan.selected } : {}),
-    };
-  }
-</script>
-
-<svelte:element
-  this={as}
-  class={classNames('cinder-pricing-section', className)}
-  data-cinder-columns={String(columns)}
-  {...rest}
->
-  <Container {maxWidth}>
-    <div class="cinder-pricing-section__inner">
-      {#if title}
-        <header class="cinder-pricing-section__header">
-          <h2 class="cinder-pricing-section__title">{title}</h2>
-          {#if description}
-            <p class="cinder-pricing-section__description">{description}</p>
-          {/if}
-        </header>
-      {/if}
-
-      <ul class="cinder-pricing-section__list">
-        {#each plans as plan, index (`${plan.name}-${index}`)}
-          <li class="cinder-pricing-section__item">
-            <PricingCard
-              name={plan.name}
-              price={plan.price}
-              features={plan.features}
-              cta={plan.cta}
-              {...optionalPlanProps(plan)}
-              onselect={() => {
-                onPlanSelect?.(plan, index);
-              }}
-            />
-          </li>
-        {/each}
-      </ul>
-    </div>
-  </Container>
-</svelte:element>

package/src/components/pricing-section/pricing-section.types.ts

@@ -1,55 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ContainerMaxWidth } from '../container/container.types.ts';
-
-/** @schemaObject */
-export type PricingSectionPlan = {
-  /** Plan name. */
-  name: string;
-  /** Plan price label. */
-  price: string;
-  /** Included features. */
-  features: string[];
-  /** CTA label for the plan action button. */
-  cta: string;
-  /** Optional caveat text. */
-  caveat?: string;
-  /** Marks plan as highlighted/selected. */
-  selected?: boolean;
-};
-
-/** Props for the PricingSection component. */
-export type PricingSectionProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
-  /** Wrapper element tag. @default "section" */
-  as?: 'section' | 'div';
-  /** Optional section title. */
-  title?: string;
-  /** Optional section description. */
-  description?: string;
-  /** Plans rendered as PricingCard components. */
-  plans: PricingSectionPlan[];
-  /** Grid column count. @default 3 */
-  columns?: 1 | 2 | 3 | 4;
-  /** Callback fired when a plan CTA is clicked. */
-  onPlanSelect?: (plan: PricingSectionPlan, index: number) => void;
-  /** Max width token forwarded to Container. @default "wide" */
-  maxWidth?: ContainerMaxWidth;
-  /** Custom class merged with `.cinder-pricing-section`. */
-  class?: string;
-};
-
-export interface PricingSectionSchemaProps {
-  /** Wrapper element tag. @default "section" */
-  as?: 'section' | 'div';
-  /** Optional section title. */
-  title?: string;
-  /** Optional section description. */
-  description?: string;
-  /** Plans rendered as PricingCard components. */
-  plans: PricingSectionPlan[];
-  /** Grid column count. @default 3 */
-  columns?: 1 | 2 | 3 | 4;
-  /** Max width token forwarded to Container. @default "wide" */
-  maxWidth?: ContainerMaxWidth;
-  /** Custom class merged with `.cinder-pricing-section`. */
-  class?: string;
-}

package/src/components/progress/index.ts

@@ -1,6 +0,0 @@
-import './progress.css';
-import Progress from './progress.svelte';
-
-export default Progress;
-export type { ProgressProps, ProgressSize, ProgressVariant } from './progress.types.ts';
-export { Progress };

package/src/components/progress/progress.svelte

@@ -1,123 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category feedback
-   * @status stable
-   * @purpose Determinate or indeterminate progressbar rendered as a horizontal bar or ring with full ARIA value semantics.
-   * @tag feedback
-   * @tag progress
-   * @useWhen Reporting measurable progress of a known task such as a file upload or multi-step import.
-   * @useWhen Showing an indeterminate work indicator when the task duration is unknown but the surface needs a progressbar role.
-   * @avoidWhen Showing a bounded measurement gauge (battery, CPU, quota) that is not task completion. | meter
-   * @avoidWhen Showing a small inline busy state next to a control — use spinner.
-   * @avoidWhen Reserving placeholder space for incoming content — use skeleton.
-   * @related meter, spinner, skeleton
-   */
-  export type { ProgressProps, ProgressSize, ProgressVariant } from './progress.types.ts';
-</script>
-
-<script lang="ts">
-  import type { ProgressProps } from './progress.types.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import { devWarn } from '../../utilities/dev-warn.ts';
-
-  let {
-    value,
-    max = 100,
-    variant = 'bar',
-    size = 'md',
-    label,
-    ariaLabel,
-    ariaLabelledby,
-    class: className,
-  }: ProgressProps = $props();
-
-  // A progressbar must have an accessible name (ARIA 1.2 §6.9). `label` feeds
-  // aria-valuetext only, so warn JS consumers (who bypass the TS docs) when
-  // neither name source is supplied. Re-checks reactively; devWarn self-gates on DEV.
-  $effect(() => {
-    const hasAriaLabel = typeof ariaLabel === 'string' && ariaLabel.trim().length > 0;
-    const hasAriaLabelledby =
-      typeof ariaLabelledby === 'string' && ariaLabelledby.trim().length > 0;
-    if (!hasAriaLabel && !hasAriaLabelledby) {
-      devWarn(
-        '[cinder/Progress] rendered without an accessible name — pass `ariaLabel` or `ariaLabelledby`. `label` only sets aria-valuetext and does not name the progressbar.',
-      );
-    }
-  });
-
-  // A usable upper bound: only a finite, strictly-positive `max` can define a
-  // determinate scale. Zero, negative, or non-finite `max` cannot, so the bar
-  // falls back to indeterminate rather than dividing by zero (NaN/Infinity).
-  const effectiveMax = $derived(Number.isFinite(max) && max > 0 ? max : undefined);
-  const isIndeterminate = $derived(
-    value === undefined || !Number.isFinite(value) || effectiveMax === undefined,
-  );
-  const clampedValue = $derived(
-    isIndeterminate ? undefined : Math.max(0, Math.min(effectiveMax!, value!)),
-  );
-  const percent = $derived(
-    clampedValue === undefined ? undefined : Math.round((clampedValue / effectiveMax!) * 100),
-  );
-
-  // Default valuetext mirrors the percent for determinate; falls back to a
-  // generic "Loading" string for indeterminate so screen readers have
-  // something to announce.
-  const valueText = $derived(label ?? (isIndeterminate ? 'Loading' : `${percent}%`));
-</script>
-
-{#if variant === 'ring'}
-  <div
-    class={classNames('cinder-progress', 'cinder-progress--ring', className)}
-    role="progressbar"
-    aria-label={ariaLabel}
-    aria-labelledby={ariaLabelledby}
-    aria-valuemin={0}
-    aria-valuemax={effectiveMax}
-    aria-valuenow={clampedValue}
-    aria-valuetext={valueText}
-    data-cinder-size={size}
-    data-cinder-indeterminate={isIndeterminate || undefined}
-  >
-    <svg viewBox="0 0 36 36" class="cinder-progress__svg" aria-hidden="true">
-      <circle class="cinder-progress__track" cx="18" cy="18" r="16" />
-      {#if !isIndeterminate}
-        <circle
-          class="cinder-progress__fill"
-          cx="18"
-          cy="18"
-          r="16"
-          style:--_cinder-progress-percent={percent}
-        />
-      {:else}
-        <circle
-          class="cinder-progress__fill cinder-progress__fill--indeterminate"
-          cx="18"
-          cy="18"
-          r="16"
-        />
-      {/if}
-    </svg>
-  </div>
-{:else}
-  <div
-    class={classNames('cinder-progress', 'cinder-progress--bar', className)}
-    role="progressbar"
-    aria-label={ariaLabel}
-    aria-labelledby={ariaLabelledby}
-    aria-valuemin={0}
-    aria-valuemax={effectiveMax}
-    aria-valuenow={clampedValue}
-    aria-valuetext={valueText}
-    data-cinder-size={size}
-    data-cinder-indeterminate={isIndeterminate || undefined}
-  >
-    <div class="cinder-progress__track">
-      {#if !isIndeterminate}
-        <div class="cinder-progress__fill" style:width="{percent}%"></div>
-      {:else}
-        <div class="cinder-progress__fill cinder-progress__fill--indeterminate"></div>
-      {/if}
-    </div>
-  </div>
-{/if}

package/src/components/progress/progress.types.ts

@@ -1,45 +0,0 @@
-export type ProgressVariant = 'bar' | 'ring';
-export type ProgressSize = 'sm' | 'md' | 'lg';
-/**
- * Props for the Progress component.
- *
- * Determinate progress passes a `value` between 0 and `max` (default 100).
- * Indeterminate progress omits `value` (or passes `undefined`); the
- * component renders a looping animation under normal motion preferences
- * and a static surface under `prefers-reduced-motion: reduce`.
- *
- * ACCESSIBLE NAME (required): every progressbar must have an accessible name
- * per ARIA 1.2 §6.9. Provide `ariaLabel` or `ariaLabelledby` (at least one). If
- * both are supplied, `aria-labelledby` wins per ARIA name-computation precedence.
- * `label` does NOT satisfy this — it only feeds `aria-valuetext` (the announced
- * status string), not the element's accessible name.
- */
-export type ProgressProps = {
-  /** Current progress value. Omit for indeterminate. */
-  value?: number;
-  /** Maximum value. Defaults to 100. */
-  max?: number;
-  /** Visual variant. Default `bar`. */
-  variant?: ProgressVariant;
-  /** Size token. Default `md`. */
-  size?: ProgressSize;
-  /**
-   * Human-readable status, exposed as `aria-valuetext`. NOT the accessible
-   * name — supply `ariaLabel` or `ariaLabelledby` for that.
-   */
-  label?: string;
-  /**
-   * Accessible name applied directly to the progressbar element when no
-   * visible label element is present in the page. Required unless
-   * `ariaLabelledby` is supplied.
-   */
-  ariaLabel?: string;
-  /**
-   * Id of a visible element that serves as the accessible name for the
-   * progressbar. Prefer this over `ariaLabel` when a visible label exists.
-   * Required unless `ariaLabel` is supplied.
-   */
-  ariaLabelledby?: string;
-  /** Additional class names merged with `.cinder-progress`. */
-  class?: string;
-};

package/src/components/qr-code/index.ts

@@ -1,6 +0,0 @@
-import './qr-code.css';
-import QrCode from './qr-code.svelte';
-
-export default QrCode;
-export type { QrCodeErrorCorrectionLevel, QrCodeProps } from './qr-code.types.ts';
-export { QrCode };

package/src/components/qr-code/qr-code.svelte

@@ -1,160 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status beta
-   * @purpose Encodes a string payload as an inline SVG QR code with an explicit accessible label.
-   * @tag qr-code
-   * @tag sharing
-   * @useWhen Presenting a scannable URL, token, or Wi-Fi credential that users can scan from another device.
-   * @useWhen You need a theme-aware QR graphic that stays crisp at any scale.
-   * @avoidWhen You only need to expose a copyable short text value without camera scanning affordance. | copy-button
-   * @avoidWhen The payload is sensitive and should never be displayed as machine-readable visual data.
-   * @related copy-button, share-card
-   */
-  export type { QrCodeErrorCorrectionLevel, QrCodeProps } from './qr-code.types.ts';
-</script>
-
-<script lang="ts">
-  import QRCode from 'qrcode';
-
-  import { classNames } from '../../utilities/class-names.ts';
-
-  import type { QrCodeProps } from './qr-code.types.ts';
-
-  let {
-    value,
-    label,
-    size = 160,
-    margin = 4,
-    errorCorrectionLevel = 'M',
-    class: customClassName,
-    ...rest
-  }: QrCodeProps = $props();
-
-  const mergedClassName = $derived(classNames('cinder-qr-code', customClassName));
-  const resolvedSize = $derived(Number.isFinite(size) && size > 0 ? size : 160);
-  const resolvedMargin = $derived(Number.isFinite(margin) && margin >= 0 ? Math.floor(margin) : 4);
-  const safeLabel = $derived(
-    typeof label === 'string' && label.trim().length > 0 ? label.trim() : 'QR code',
-  );
-
-  function svgCommand(command: string, x: number, y: number | undefined = undefined): string {
-    return typeof y === 'number' ? `${command}${x} ${y}` : `${command}${x}`;
-  }
-
-  function qrModulesToPath(
-    data: ArrayLike<boolean | number>,
-    moduleSize: number,
-    marginSize: number,
-  ): string {
-    let path = '';
-    let moveBy = 0;
-    let newRow = false;
-    let lineLength = 0;
-
-    for (let index = 0; index < data.length; index += 1) {
-      const column = Math.floor(index % moduleSize);
-      const row = Math.floor(index / moduleSize);
-
-      if (!column && !newRow) newRow = true;
-
-      if (data[index]) {
-        lineLength += 1;
-
-        if (!(index > 0 && column > 0 && data[index - 1])) {
-          path += newRow
-            ? svgCommand('M', column + marginSize, 0.5 + row + marginSize)
-            : svgCommand('m', moveBy, 0);
-          moveBy = 0;
-          newRow = false;
-        }
-
-        if (!(column + 1 < moduleSize && data[index + 1])) {
-          path += svgCommand('h', lineLength);
-          lineLength = 0;
-        }
-      } else {
-        moveBy += 1;
-      }
-    }
-
-    return path;
-  }
-
-  function renderSvgData(
-    modules: ArrayLike<boolean | number>,
-    moduleSize: number,
-    marginSize: number,
-  ): { pathData: string; viewBox: string } {
-    const qrSize = moduleSize + marginSize * 2;
-    return {
-      pathData: qrModulesToPath(modules, moduleSize, marginSize),
-      viewBox: `0 0 ${qrSize} ${qrSize}`,
-    };
-  }
-
-  const qrGenerationResult = $derived.by(() => {
-    try {
-      const qrData = QRCode.create(value, { errorCorrectionLevel });
-      const svgData = renderSvgData(qrData.modules.data, qrData.modules.size, resolvedMargin);
-
-      return {
-        pathData: svgData.pathData,
-        viewBox: svgData.viewBox,
-        generationFailed: false,
-      };
-    } catch {
-      return {
-        pathData: '',
-        viewBox: '0 0 0 0',
-        generationFailed: true,
-      };
-    }
-  });
-  const pathData = $derived(qrGenerationResult.pathData);
-  const viewBox = $derived(qrGenerationResult.viewBox);
-  const generationFailed = $derived(qrGenerationResult.generationFailed);
-  const resolvedRole = $derived(generationFailed ? 'status' : 'img');
-  const resolvedAriaLabel = $derived(generationFailed ? 'Unable to render QR code' : safeLabel);
-  const resolvedAriaLive = $derived(generationFailed ? 'polite' : undefined);
-</script>
-
-<span
-  {...rest}
-  class={mergedClassName}
-  role={resolvedRole}
-  aria-label={resolvedAriaLabel}
-  aria-live={resolvedAriaLive}
-  data-cinder-invalid={generationFailed ? 'true' : undefined}
-  data-cinder-state={generationFailed ? 'error' : 'ready'}
-  style:inline-size={`${resolvedSize}px`}
-  style:block-size={`${resolvedSize}px`}
->
-  {#if pathData.length > 0}
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={resolvedSize}
-      height={resolvedSize}
-      {viewBox}
-      shape-rendering="crispEdges"
-      aria-hidden="true"
-      focusable="false"
-    >
-      <path fill="none" stroke="currentColor" d={pathData} />
-    </svg>
-  {:else}
-    <span
-      class="cinder-qr-code__placeholder"
-      data-cinder-state={generationFailed ? 'error' : 'ready'}
-      aria-hidden="true"
-    >
-      {#if generationFailed}
-        <span class="cinder-qr-code__error-mark">!</span>
-      {/if}
-    </span>
-    {#if generationFailed}
-      <span class="cinder-sr-only">Unable to render QR code.</span>
-    {/if}
-  {/if}
-</span>

package/src/components/qr-code/qr-code.types.ts

@@ -1,36 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-
-export type QrCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
-
-/** Props for the QrCode component. */
-export type QrCodeProps = Omit<
-  HTMLAttributes<HTMLSpanElement>,
-  'aria-label' | 'aria-live' | 'children' | 'class' | 'role'
-> & {
-  /** Text payload encoded into the QR code matrix. */
-  value: string;
-  /** Accessible label announced for the QR image. Defaults to `QR code`. */
-  label?: string;
-  /** Square pixel size of the rendered QR code. @default 160 */
-  size?: number;
-  /** Quiet-zone width in QR modules. @default 4 */
-  margin?: number;
-  /** QR error correction level. @default "M" */
-  errorCorrectionLevel?: QrCodeErrorCorrectionLevel;
-  class?: string;
-};
-
-export interface QrCodeSchemaProps {
-  /** Text payload encoded into the QR code matrix. */
-  value: string;
-  /** Accessible label announced for the QR image. @default `QR code` */
-  label?: string;
-  /** Square pixel size of the rendered QR code. @default 160 */
-  size?: number;
-  /** Quiet-zone width in QR modules. @default 4 */
-  margin?: number;
-  /** QR error correction level. @default "M" */
-  errorCorrectionLevel?: QrCodeErrorCorrectionLevel;
-  /** Custom class merged with `.cinder-qr-code`. */
-  class?: string;
-}