@lostgradient/cinder 0.1.0 → 0.2.0

package/src/components/matrix-chart/matrix-chart.variables.ts

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

package/src/components/media-controls/README.md

@@ -0,0 +1,60 @@
+# MediaControls
+
+Accessible playback controls for play, pause, and replay actions with optional progress display.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { MediaControls } from '@lostgradient/cinder/media-controls';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Embedding play/pause/replay controls for audio or video content.
+- Rendering media controls inside a toolbar or standalone on a card.
+
+### Avoid When
+
+- You need waveform visualization or Web Audio integration — wire that separately.
+- You need a full media player UI with seek scrubbing — use a dedicated player component.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop            | Type                        | Required | Default     | Description                                                                                                                |
+| --------------- | --------------------------- | -------- | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `class`         | `string`                    | no       | —           | Additional class names merged with `.cinder-media-controls`.                                                               |
+| `disabled`      | `boolean`                   | no       | `false`     | Disable all controls.                                                                                                      |
+| `layout`        | `"compact"` \| `"expanded"` | no       | `"compact"` | Layout mode.                                                                                                               |
+| `loading`       | `boolean`                   | no       | `false`     | Show loading state while media is buffering.                                                                               |
+| `playing`       | `boolean`                   | no       | `false`     | Whether playback is active.                                                                                                |
+| `progress`      | `number`                    | no       | —           | Progress value between 0 and 1. Omit to hide the progress bar.                                                             |
+| `progressLabel` | `string`                    | no       | —           | Accessible label for the progress bar.                                                                                     |
+| `replay`        | `boolean`                   | no       | `false`     | Show a replay action when the track has ended.                                                                             |
+| `unavailable`   | `boolean`                   | no       | `false`     | Controls are unavailable.                                                                                                  |
+| `onPause`       | `(opaque)`                  | no       | —           | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onPlay`        | `(opaque)`                  | no       | —           | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `onReplay`      | `(opaque)`                  | no       | —           | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+
+<!-- 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/media-controls/index.ts

@@ -0,0 +1,6 @@
+import './media-controls.css';
+import MediaControls from './media-controls.svelte';
+
+export default MediaControls;
+export type { MediaControlsLayout, MediaControlsProps } from './media-controls.types.ts';
+export { MediaControls };

package/src/components/media-controls/media-controls.css

@@ -0,0 +1,112 @@
+@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;
+    align-items: center;
+    justify-content: 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);
+    font-weight: 500;
+    line-height: 1;
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease;
+    min-width: 2rem;
+    min-height: 2rem;
+  }
+
+  @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: 0.5;
+  }
+
+  .cinder-media-controls__button[data-cinder-state='playing'] {
+    background-color: var(--cinder-surface-raised);
+  }
+
+  .cinder-media-controls__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .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(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-media-controls__svg--loading {
+      animation: none;
+    }
+  }
+
+  .cinder-media-controls__label {
+    white-space: nowrap;
+  }
+
+  /* Compact (icon-only) layout */
+  .cinder-media-controls[data-cinder-layout='compact'] .cinder-media-controls__button {
+    padding: var(--cinder-space-1);
+  }
+
+  /* Progress bar */
+  .cinder-media-controls__progress {
+    flex: 1;
+    min-width: 4rem;
+  }
+
+  .cinder-media-controls__progress-track {
+    height: 0.25rem;
+    border-radius: var(--cinder-radius-full, 9999px);
+    background-color: var(--cinder-border);
+    overflow: hidden;
+  }
+
+  .cinder-media-controls__progress-fill {
+    height: 100%;
+    border-radius: var(--cinder-radius-full, 9999px);
+    background-color: var(--cinder-accent);
+    transition: width 0.1s ease;
+  }
+}

package/src/components/media-controls/media-controls.examples.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "media-controls",
+  "import": "@lostgradient/cinder/media-controls",
+  "examples": [
+    {
+      "id": "desktop",
+      "title": "Desktop media controls",
+      "description": "Play, pause, and replay actions with optional progress. Compact icon-only layout suitable for a toolbar.",
+      "code": "<script lang=\"ts\">\n  import { onDestroy } from 'svelte';\n\n  import { MediaControls } from '@lostgradient/cinder/media-controls';\n\n  let playing = $state(false);\n  let progress = $state<number | undefined>(undefined);\n\n  const isReplay = $derived(progress !== undefined && !playing && progress >= 1);\n\n  // The progress timer is hoisted so pause/replay can stop it. Keeping it local\n  // to handlePlay would leak the interval on pause and stack a new one on every\n  // Play click.\n  let interval: ReturnType<typeof setInterval> | undefined;\n  let replayTimer: ReturnType<typeof setTimeout> | undefined;\n\n  function stopTimer() {\n    if (interval !== undefined) {\n      clearInterval(interval);\n      interval = undefined;\n    }\n  }\n\n  function handlePlay() {\n    playing = true;\n    progress = 0;\n    // Simulate progress. Clear any prior interval first so repeated Play clicks\n    // don't stack timers.\n    stopTimer();\n    interval = setInterval(() => {\n      progress = (progress ?? 0) + 0.05;\n      if ((progress ?? 0) >= 1) {\n        stopTimer();\n        playing = false;\n        progress = 1;\n      }\n    }, 200);\n  }\n\n  function handlePause() {\n    playing = false;\n    stopTimer();\n  }\n\n  function handleReplay() {\n    stopTimer();\n    playing = false;\n    progress = 0;\n    if (replayTimer !== undefined) clearTimeout(replayTimer);\n    replayTimer = setTimeout(() => handlePlay(), 100);\n  }\n\n  onDestroy(() => {\n    stopTimer();\n    if (replayTimer !== undefined) clearTimeout(replayTimer);\n  });\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n  {#if progress !== undefined}\n    <MediaControls\n      {playing}\n      replay={isReplay}\n      {progress}\n      onPlay={handlePlay}\n      onPause={handlePause}\n      onReplay={handleReplay}\n    />\n    <MediaControls\n      {playing}\n      replay={isReplay}\n      {progress}\n      layout=\"expanded\"\n      onPlay={handlePlay}\n      onPause={handlePause}\n      onReplay={handleReplay}\n    />\n  {:else}\n    <MediaControls\n      {playing}\n      replay={isReplay}\n      onPlay={handlePlay}\n      onPause={handlePause}\n      onReplay={handleReplay}\n    />\n    <MediaControls\n      {playing}\n      replay={isReplay}\n      layout=\"expanded\"\n      onPlay={handlePlay}\n      onPause={handlePause}\n      onReplay={handleReplay}\n    />\n  {/if}\n</div>\n"
+    },
+    {
+      "id": "states",
+      "title": "Media control states",
+      "description": "All states: paused, playing, loading, disabled, and unavailable.",
+      "code": "<script lang=\"ts\">\n  import { MediaControls } from '@lostgradient/cinder/media-controls';\n</script>\n\n<div style=\"display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;\">\n  <MediaControls layout=\"expanded\" />\n  <MediaControls layout=\"expanded\" playing />\n  <MediaControls layout=\"expanded\" replay />\n  <MediaControls layout=\"expanded\" loading />\n  <MediaControls layout=\"expanded\" disabled />\n  <MediaControls layout=\"expanded\" unavailable />\n</div>\n"
+    }
+  ]
+}

package/src/components/media-controls/media-controls.schema.json

@@ -0,0 +1,65 @@
+{
+  "$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"
+      }
+    ]
+  }
+}

package/src/components/media-controls/media-controls.schema.ts

@@ -0,0 +1,69 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const 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',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/media-controls/media-controls.svelte

@@ -0,0 +1,238 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category action
+   * @status alpha
+   * @purpose Accessible playback controls for play, pause, and replay actions with optional progress display.
+   * @tag action
+   * @tag media
+   * @useWhen Embedding play/pause/replay controls for audio or video content.
+   * @useWhen Rendering media controls inside a toolbar or standalone on a card.
+   * @avoidWhen You need waveform visualization or Web Audio integration — wire that separately.
+   * @avoidWhen You need a full media player UI with seek scrubbing — use a dedicated player component.
+   * @related button, toolbar, progress, tooltip
+   */
+  export type { MediaControlsLayout, MediaControlsProps } from './media-controls.types.ts';
+</script>
+
+<script lang="ts">
+  import { classNames } from '../../utilities/class-names.ts';
+  import VisuallyHiddenLiveRegion from '../_visually-hidden-live-region.svelte';
+  import type { MediaControlsProps } from './media-controls.types.ts';
+
+  let {
+    playing = false,
+    replay = false,
+    disabled = false,
+    loading = false,
+    unavailable = false,
+    progress,
+    progressLabel = 'Playback progress',
+    layout = 'compact',
+    onPlay,
+    onPause,
+    onReplay,
+    class: customClassName,
+    ...rest
+  }: MediaControlsProps = $props();
+
+  const isDisabled = $derived(disabled || loading || unavailable);
+  const iconOnly = $derived(layout === 'compact');
+  // A non-finite progress (NaN/Infinity) is treated as "no progress" rather than
+  // rendering a progressbar with NaN aria values — `typeof NaN === 'number'` is
+  // true, so the finite check is what actually guards the bar.
+  const hasProgress = $derived(Number.isFinite(progress));
+  const clampedProgress = $derived(
+    Number.isFinite(progress) ? Math.max(0, Math.min(1, progress as number)) : 0,
+  );
+  const progressPercent = $derived(Math.round(clampedProgress * 100));
+
+  let announcement = $state('');
+
+  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();
+    }
+  }
+
+  // The play/pause control is a TOGGLE button, so it keeps a STABLE label and
+  // communicates on/off via aria-pressed — never both a changing label AND
+  // aria-pressed (which makes AT announce confusing output like "Pause,
+  // pressed"). Replay is a momentary action (changing label, no pressed state).
+  // Loading / unavailable take precedence so the spoken name matches the visual.
+  const isToggle = $derived(!loading && !unavailable && !replay);
+  const primaryLabel = $derived(
+    loading
+      ? 'Loading playback controls'
+      : unavailable
+        ? 'Playback unavailable'
+        : replay
+          ? 'Replay'
+          : 'Play or pause',
+  );
+
+  // aria-pressed applies only to the play/pause toggle (true while playing).
+  const primaryPressed = $derived(isToggle ? (playing ? 'true' : 'false') : undefined);
+</script>
+
+<div
+  {...rest}
+  class={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"
+    aria-label={primaryLabel}
+    aria-pressed={primaryPressed}
+    aria-disabled={isDisabled ? 'true' : undefined}
+    aria-busy={loading ? 'true' : undefined}
+    disabled={isDisabled}
+    onclick={handlePrimaryAction}
+    data-cinder-state={loading
+      ? 'loading'
+      : unavailable
+        ? 'unavailable'
+        : replay
+          ? 'replay'
+          : playing
+            ? 'playing'
+            : 'paused'}
+  >
+    {#if loading}
+      <!-- Loading state: spinner-like indicator -->
+      <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" />
+        </svg>
+      </span>
+      {#if !iconOnly}
+        <span class="cinder-media-controls__label">Loading</span>
+      {/if}
+    {:else if unavailable}
+      <!-- Unavailable state -->
+      <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" />
+          <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+        </svg>
+      </span>
+      {#if !iconOnly}
+        <span class="cinder-media-controls__label">Unavailable</span>
+      {/if}
+    {:else if replay}
+      <!-- Replay icon -->
+      <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 d="M3 3v5h5" />
+        </svg>
+      </span>
+      {#if !iconOnly}
+        <span class="cinder-media-controls__label">Replay</span>
+      {/if}
+    {:else if playing}
+      <!-- Pause icon -->
+      <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 x="14" y="4" width="4" height="16" rx="1" />
+        </svg>
+      </span>
+      {#if !iconOnly}
+        <span class="cinder-media-controls__label">Pause</span>
+      {/if}
+    {:else}
+      <!-- Play icon -->
+      <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" />
+        </svg>
+      </span>
+      {#if !iconOnly}
+        <span class="cinder-media-controls__label">Play</span>
+      {/if}
+    {/if}
+  </button>
+
+  {#if hasProgress}
+    <div
+      class="cinder-media-controls__progress"
+      role="progressbar"
+      aria-label={progressLabel}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={progressPercent}
+      aria-valuetext="{progressPercent}%"
+    >
+      <div class="cinder-media-controls__progress-track">
+        <div class="cinder-media-controls__progress-fill" style:width="{progressPercent}%"></div>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- Announce state changes to assistive technology via a polite live region. -->
+<VisuallyHiddenLiveRegion message={announcement} />

package/src/components/media-controls/media-controls.types.ts

@@ -0,0 +1,80 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+/** Layout mode: compact icon-only or expanded icon+label. */
+export type MediaControlsLayout = 'compact' | 'expanded';
+
+/** Props for the MediaControls component. */
+export type MediaControlsProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+  /** Current playback state. @default "paused" */
+  playing?: boolean;
+  /** Show a replay action instead of play/pause when the track has ended. @default false */
+  replay?: boolean;
+  /** Disable all controls. @default false */
+  disabled?: boolean;
+  /** Show a loading spinner and prevent interaction while media is buffering. @default false */
+  loading?: boolean;
+  /** Controls are unavailable (e.g. media source missing). @default false */
+  unavailable?: boolean;
+  /** Progress value between 0 and 1. Omit to hide the progress bar. */
+  progress?: number;
+  /** Human-readable accessible label for the progress bar. @default "Playback progress" */
+  progressLabel?: string;
+  /** Layout mode: `compact` renders icon-only, `expanded` renders icon+label. @default "compact" */
+  layout?: MediaControlsLayout;
+  /** Called when the user triggers playback. */
+  onPlay?: () => void;
+  /** Called when the user pauses playback. */
+  onPause?: () => void;
+  /** Called when the user triggers replay. */
+  onReplay?: () => void;
+  /** Additional class names merged with `.cinder-media-controls`. */
+  class?: string;
+};
+
+/**
+ * Cinder-specific props for MediaControls, used by the schema generator.
+ */
+export interface MediaControlsSchemaProps {
+  /**
+   * Whether playback is active.
+   * @default false
+   */
+  playing?: boolean;
+  /**
+   * Show a replay action when the track has ended.
+   * @default false
+   */
+  replay?: boolean;
+  /**
+   * Disable all controls.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Show loading state while media is buffering.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Controls are unavailable.
+   * @default false
+   */
+  unavailable?: boolean;
+  /** Progress value between 0 and 1. Omit to hide the progress bar. */
+  progress?: number;
+  /** Accessible label for the progress bar. */
+  progressLabel?: string;
+  /**
+   * Layout mode.
+   * @default "compact"
+   */
+  layout?: MediaControlsLayout;
+  /** Additional class names merged with `.cinder-media-controls`. */
+  class?: string;
+  /** Called when the play action is triggered. */
+  onPlay?: () => void;
+  /** Called when the pause action is triggered. */
+  onPause?: () => void;
+  /** Called when the replay action is triggered. */
+  onReplay?: () => void;
+}

package/src/components/media-controls/media-controls.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/media-controls/media-controls.variables.ts

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