@jovertical/mise-design-system 0.0.0-stage → 1.0.0

package/dist/components/data-display/radial-stat/radial-stat.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Tone } from '../../../utils/tone.js';
+/**
+ * How heavy the ring is, as a fraction of its diameter. `regular` is a
+ * twelfth, a ring around a figure; `thick` is a sixth, with the weight to
+ * carry a card on its own. A ratio, because a fixed stroke is a hairline at
+ * 140px and a solid disc at 48px.
+ */
+export type RadialThickness = 'regular' | 'thick';
+/**
+ * A share, drawn as an arc with the figure inside it. A circle has an obvious
+ * whole, so the ring says "roughly a quarter" without the reader converting a
+ * length. Right for a handful of parts side by side; wrong for a list, where
+ * twenty rings are a wall of dials.
+ */
+export type RadialStatProps = HTMLAttributes<HTMLDivElement> & {
+    /** 0–100. Clamped: a share over 100 is a bug upstream, not a full ring plus. */
+    percent: number;
+    tone?: Tone;
+    /**
+     * Outer diameter in pixels; the stroke scales with it. `diameter`, not
+     * `size`, which across the package means `sm | md | lg`.
+     */
+    diameter?: number;
+    /** Ring weight. `thick` for a ring that is the subject of its own card. */
+    thickness?: RadialThickness;
+    /** Replaces the printed percentage: a count, or a short word. */
+    children?: Snippet;
+    /** Read by assistive tech in place of the ring. */
+    'aria-label'?: string;
+};
+declare const RadialStat: import("svelte").Component<RadialStatProps, {}, "">;
+type RadialStat = ReturnType<typeof RadialStat>;
+export default RadialStat;

package/dist/components/data-display/readiness/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ReadinessChecklist, type ReadinessChecklistProps } from './readiness.svelte';
+export { type ReadinessItem, type ReadinessStatus, type ReadinessSummaryData, summariseReadiness, } from './readiness-summarise.js';
+export { default as ReadinessSummary, type ReadinessSummaryProps } from './readiness-summary.svelte';

package/dist/components/data-display/readiness/index.js

@@ -0,0 +1,3 @@
+export { default as ReadinessChecklist } from './readiness.svelte';
+export { summariseReadiness, } from './readiness-summarise.js';
+export { default as ReadinessSummary } from './readiness-summary.svelte';

package/dist/components/data-display/readiness/readiness-summarise.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Origin: the React package 2.23.0 `readiness.tsx` (`ReadinessItem`, `summariseReadiness`)
+ * Diverged: the types and the counting in their own module, so a page can ask
+ *   the question without importing a component. `action` is a snippet.
+ */
+import type { Snippet } from 'svelte';
+export type ReadinessStatus = 'met' | 'unmet' | 'pending' | 'not-applicable';
+export type ReadinessItem = {
+    id: string;
+    label: string;
+    status: ReadinessStatus;
+    /** Unmet-but-optional reads differently from unmet-and-required. */
+    optional?: boolean;
+    /** What is wrong. A server has a sentence for this; a form usually does not. */
+    detail?: string;
+    /** Under an unmet row: "Fix this", pointing at wherever it is fixed. */
+    action?: Snippet;
+};
+export type ReadinessSummaryData = {
+    /** Everything except `not-applicable`, which is dropped rather than greyed. */
+    applicable: ReadinessItem[];
+    met: number;
+    total: number;
+    percent: number;
+    /** Required and unmet: the reason a gate is closed. */
+    blocking: ReadinessItem[];
+    /** In flight rather than missing. Neither met nor blocking. */
+    pending: ReadinessItem[];
+    complete: boolean;
+};
+/**
+ * The counting, in one place, so a checklist showing four ticks and a summary
+ * claiming three of five cannot happen. Exported because a page sometimes
+ * needs the answer without rendering either: whether to enable a button.
+ *
+ * Optional rows count toward progress and not toward permission, which is
+ * what lets a bar sit short of full on something that is nonetheless
+ * finishable.
+ */
+export declare function summariseReadiness(items: readonly ReadinessItem[]): ReadinessSummaryData;

package/dist/components/data-display/readiness/readiness-summarise.js

@@ -0,0 +1,25 @@
+/**
+ * The counting, in one place, so a checklist showing four ticks and a summary
+ * claiming three of five cannot happen. Exported because a page sometimes
+ * needs the answer without rendering either: whether to enable a button.
+ *
+ * Optional rows count toward progress and not toward permission, which is
+ * what lets a bar sit short of full on something that is nonetheless
+ * finishable.
+ */
+export function summariseReadiness(items) {
+    const applicable = items.filter((item) => item.status !== 'not-applicable');
+    const met = applicable.filter((item) => item.status === 'met').length;
+    const total = applicable.length;
+    const blocking = applicable.filter((item) => item.status === 'unmet' && !item.optional);
+    const pending = applicable.filter((item) => item.status === 'pending');
+    return {
+        applicable,
+        met,
+        total,
+        percent: total > 0 ? Math.round((met / total) * 100) : 0,
+        blocking,
+        pending,
+        complete: blocking.length === 0 && pending.length === 0,
+    };
+}

package/dist/components/data-display/readiness/readiness-summary.svelte

@@ -0,0 +1,65 @@
+<!--
+  Origin: the React package 2.23.0 `readiness.tsx` (`ReadinessSummary`, `SummaryMessage`)
+  Diverged: spreads the rest onto the root, as every component does.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { ReadinessItem } from './readiness-summarise.js'
+
+  /**
+   * The count, the bar, and one line naming what is missing: naming it beats
+   * reporting that something is.
+   */
+  export type ReadinessSummaryProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    items: ReadinessItem[]
+    /**
+     * Whether the thing is actually ready, when something other than this list
+     * decides. Omit it and readiness is "every required item met", the only
+     * authority a form has; pass it where a server owns the gate.
+     */
+    ready?: boolean
+    readyMessage?: string
+  }
+</script>
+
+<script lang="ts">
+  import Progress from '../../feedback/progress/progress.svelte'
+  import Text from '../../typography/text/text.svelte'
+  import { summariseReadiness } from './readiness-summarise.js'
+
+  let {
+    items,
+    ready,
+    readyMessage = 'Everything required is done.',
+    ...rest
+  }: ReadinessSummaryProps = $props()
+
+  const summary = $derived(summariseReadiness(items))
+  const resolved = $derived(ready ?? summary.complete)
+  // A caller can pass ready={false} with every row ticked: the gate is shut for
+  // a reason this list does not know, and claiming readiness would be a lie.
+  const message = $derived.by(() => {
+    if (resolved) return readyMessage
+    if (summary.blocking.length > 0)
+      return `Still needed: ${summary.blocking.map((item) => item.label).join(', ')}.`
+    if (summary.pending.length > 0)
+      return `Waiting on: ${summary.pending.map((item) => item.label).join(', ')}.`
+    return 'Not ready yet.'
+  })
+</script>
+
+<div data-slot="readiness-summary" {...rest}>
+  <div class="flex items-baseline justify-between gap-3">
+    <span class="text-2xl font-semibold tabular-nums">
+      {summary.met}<span class="text-muted-foreground text-base">/{summary.total}</span>
+    </span>
+    <Text size="sm" muted numeric>{summary.percent}% ready</Text>
+  </div>
+  <Progress
+    value={summary.percent}
+    class="mt-3"
+    aria-label="{summary.met} of {summary.total} requirements met"
+  />
+  <p class="text-muted-foreground mt-3 text-xs">{message}</p>
+</div>

package/dist/components/data-display/readiness/readiness-summary.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ReadinessItem } from './readiness-summarise.js';
+/**
+ * The count, the bar, and one line naming what is missing: naming it beats
+ * reporting that something is.
+ */
+export type ReadinessSummaryProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    items: ReadinessItem[];
+    /**
+     * Whether the thing is actually ready, when something other than this list
+     * decides. Omit it and readiness is "every required item met", the only
+     * authority a form has; pass it where a server owns the gate.
+     */
+    ready?: boolean;
+    readyMessage?: string;
+};
+declare const ReadinessSummary: import("svelte").Component<ReadinessSummaryProps, {}, "">;
+type ReadinessSummary = ReturnType<typeof ReadinessSummary>;
+export default ReadinessSummary;

package/dist/components/data-display/readiness/readiness.svelte

@@ -0,0 +1,102 @@
+<!--
+  Origin: the React package 2.23.0 `readiness.tsx` (`ReadinessChecklist`)
+  Diverged: the folder's root part, exported as ReadinessChecklist. Lucide's
+    circle-check (filled by class), loader, circle-dashed and circle-small
+    (filled) for Tabler's. Spreads the rest onto the list, as every component
+    does.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { ReadinessItem } from './readiness-summarise.js'
+
+  /**
+   * One row per requirement, answering "what does this page still need from
+   * me". Deliberately not wrapped in a card: it goes in an AsideCard on one
+   * page and a page body on another, and a component that brought its own
+   * surface would make the second impossible.
+   */
+  export type ReadinessChecklistProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    items: ReadinessItem[]
+    /** Shown when nothing is applicable: a server returning no rows. */
+    emptyMessage?: string
+    /**
+     * Drops the "Required" / "Optional" tag from unmet rows, for a progress
+     * list (what a server is doing), where a queued step tagged Required in
+     * warning colour reads as a problem when it simply has not started.
+     */
+    showRequirement?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import CircleCheckIcon from '@lucide/svelte/icons/circle-check'
+  import CircleDashedIcon from '@lucide/svelte/icons/circle-dashed'
+  import CircleSmallIcon from '@lucide/svelte/icons/circle-small'
+  import LoaderIcon from '@lucide/svelte/icons/loader'
+
+  import { cn } from '../../../utils/cn.js'
+  import Text from '../../typography/text/text.svelte'
+  import { summariseReadiness } from './readiness-summarise.js'
+
+  let {
+    items,
+    emptyMessage = 'Nothing to check yet.',
+    showRequirement = true,
+    class: className,
+    ...rest
+  }: ReadinessChecklistProps = $props()
+
+  const applicable = $derived(summariseReadiness(items).applicable)
+  const icon = 'mt-0.5 size-4 shrink-0'
+</script>
+
+{#if applicable.length === 0}
+  <Text as="p" size="sm" muted>{emptyMessage}</Text>
+{:else}
+  <ul data-slot="readiness-checklist" class={cn('flex flex-col gap-3', className)} {...rest}>
+    {#each applicable as item (item.id)}
+      {@const met = item.status === 'met'}
+      {@const pending = item.status === 'pending'}
+      <li data-status={item.status} class="flex items-start gap-2 text-sm">
+        {#if met}
+          <CircleCheckIcon class={cn('text-success fill-current [&_path]:text-background', icon)} />
+        {:else if pending}
+          <LoaderIcon class={cn('text-muted-foreground animate-spin', icon)} />
+        {:else if item.optional}
+          <!-- A skipped optional and a missing required are both unticked and
+               are not the same news: only the second shuts the gate. -->
+          <CircleDashedIcon class={cn('text-muted-foreground', icon)} />
+        {:else}
+          <CircleSmallIcon class={cn('text-warning fill-current', icon)} />
+        {/if}
+
+        <div class="min-w-0 flex-1">
+          <div class="flex items-baseline justify-between gap-2">
+            <span class={cn('min-w-0 truncate', !met && 'text-muted-foreground')}
+              >{item.label}</span
+            >
+            <!-- Only says what is needed: a tag on every row turns the column
+                 into a second list. -->
+            {#if showRequirement && !met && !pending}
+              <span
+                class={cn(
+                  'shrink-0 text-xs',
+                  item.optional ? 'text-muted-foreground' : 'text-warning',
+                )}
+              >
+                {item.optional ? 'Optional' : 'Required'}
+              </span>
+            {/if}
+          </div>
+          {#if !met && item.detail}
+            <p class="text-muted-foreground mt-0.5 text-xs">{item.detail}</p>
+          {/if}
+          {#if !met && item.action}
+            <div class="mt-0.5 text-xs">{@render item.action()}</div>
+          {/if}
+        </div>
+      </li>
+    {/each}
+  </ul>
+{/if}

package/dist/components/data-display/readiness/readiness.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ReadinessItem } from './readiness-summarise.js';
+/**
+ * One row per requirement, answering "what does this page still need from
+ * me". Deliberately not wrapped in a card: it goes in an AsideCard on one
+ * page and a page body on another, and a component that brought its own
+ * surface would make the second impossible.
+ */
+export type ReadinessChecklistProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    items: ReadinessItem[];
+    /** Shown when nothing is applicable: a server returning no rows. */
+    emptyMessage?: string;
+    /**
+     * Drops the "Required" / "Optional" tag from unmet rows, for a progress
+     * list (what a server is doing), where a queued step tagged Required in
+     * warning colour reads as a problem when it simply has not started.
+     */
+    showRequirement?: boolean;
+};
+declare const Readiness: import("svelte").Component<ReadinessChecklistProps, {}, "">;
+type Readiness = ReturnType<typeof Readiness>;
+export default Readiness;

package/dist/components/data-display/segmented-bar/index.d.ts

@@ -0,0 +1 @@
+export { default as SegmentedBar, type Segment, type SegmentedBarProps, type SegmentedBarSize, } from './segmented-bar.svelte';

package/dist/components/data-display/segmented-bar/index.js

@@ -0,0 +1 @@
+export { default as SegmentedBar, } from './segmented-bar.svelte';

package/dist/components/data-display/segmented-bar/segmented-bar.svelte

@@ -0,0 +1,116 @@
+<!--
+  Origin: the React package 2.23.0 `segmented-bar.tsx`
+  Diverged: takes `class` and spreads the rest onto the root, as every
+    component does.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import { TONE_SOLID_CLASS, type Tone } from '../../../utils/tone.js'
+
+  /**
+   * A segment is a solid fill, except the neutral one, which is the track's own
+   * colour: "everything else" should recede behind the named slices.
+   */
+  const SEGMENT_CLASS: Record<Tone, string> = {
+    ...TONE_SOLID_CLASS,
+    neutral: 'bg-muted text-muted-foreground',
+  }
+
+  /**
+   * `md` is the dashboard bar, tall enough to print each share inside it under
+   * its captions. `sm` is the same data at table-row scale: a rule, for a cell
+   * whose exact figures are the columns either side.
+   */
+  export type SegmentedBarSize = 'sm' | 'md'
+
+  const BAR_SIZE_CLASS: Record<SegmentedBarSize, string> = {
+    md: 'h-10 rounded-2xl',
+    sm: 'h-2 rounded-full',
+  }
+
+  export type Segment = {
+    label: string
+    /** In whatever unit the caller counts in. Shares come from the total. */
+    value: number
+    tone?: Tone
+  }
+
+  /**
+   * A whole, divided into named parts. One bar rather than one per part,
+   * because the question is how the total splits.
+   *
+   * A share below about 6% cannot hold its own percentage, so the text is
+   * dropped rather than shrunk or spilled; the caption still names it.
+   * Segments are drawn in the order given: sorting by size would make the same
+   * data look different week to week.
+   */
+  export type SegmentedBarProps = HTMLAttributes<HTMLDivElement> & {
+    segments: Segment[]
+    /** Print each share inside its segment. Off when the bar heads a list below. */
+    showShare?: boolean
+    /** Captions above the bar, each over the segment it names. */
+    showLabels?: boolean
+    size?: SegmentedBarSize
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    segments,
+    showShare = true,
+    showLabels = true,
+    size = 'md',
+    class: className,
+    ...rest
+  }: SegmentedBarProps = $props()
+
+  const total = $derived(segments.reduce((sum, segment) => sum + segment.value, 0))
+  const shares = $derived(segments.map((segment) => (segment.value / total) * 100))
+  /** At 8px there is no room for captions or shares, so `sm` drops them. */
+  const slim = $derived(size === 'sm')
+  const printsLabels = $derived(showLabels && !slim)
+  const printsShare = $derived(showShare && !slim)
+</script>
+
+{#if total <= 0}
+  <div
+    data-slot="segmented-bar"
+    class={cn('bg-muted w-full', BAR_SIZE_CLASS[size], className)}
+    {...rest}
+  ></div>
+{:else}
+  <div data-slot="segmented-bar" class={cn('w-full', className)} {...rest}>
+    {#if printsLabels}
+      <div class="flex w-full">
+        {#each segments as segment, index (segment.label)}
+          <div class="min-w-0 pr-2" style:width="{shares[index]}%">
+            <p class="text-muted-foreground truncate text-sm">{segment.label}</p>
+            <span aria-hidden="true" class="bg-muted-foreground/60 mt-1 block h-2 w-px"></span>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    <div class={cn('flex w-full overflow-hidden', BAR_SIZE_CLASS[size], printsLabels && 'mt-2')}>
+      {#each segments as segment, index (segment.label)}
+        <div
+          data-slot="segmented-bar-segment"
+          class={cn(
+            'flex items-center text-sm font-medium tabular-nums',
+            !slim && 'px-3',
+            SEGMENT_CLASS[segment.tone ?? 'neutral'],
+          )}
+          style:width="{shares[index]}%"
+          title="{segment.label}: {segment.value}"
+        >
+          {#if printsShare && shares[index] >= 6}
+            {shares[index].toFixed(1)}%
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+{/if}

package/dist/components/data-display/segmented-bar/segmented-bar.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../../utils/tone.js';
+/**
+ * `md` is the dashboard bar, tall enough to print each share inside it under
+ * its captions. `sm` is the same data at table-row scale: a rule, for a cell
+ * whose exact figures are the columns either side.
+ */
+export type SegmentedBarSize = 'sm' | 'md';
+export type Segment = {
+    label: string;
+    /** In whatever unit the caller counts in. Shares come from the total. */
+    value: number;
+    tone?: Tone;
+};
+/**
+ * A whole, divided into named parts. One bar rather than one per part,
+ * because the question is how the total splits.
+ *
+ * A share below about 6% cannot hold its own percentage, so the text is
+ * dropped rather than shrunk or spilled; the caption still names it.
+ * Segments are drawn in the order given: sorting by size would make the same
+ * data look different week to week.
+ */
+export type SegmentedBarProps = HTMLAttributes<HTMLDivElement> & {
+    segments: Segment[];
+    /** Print each share inside its segment. Off when the bar heads a list below. */
+    showShare?: boolean;
+    /** Captions above the bar, each over the segment it names. */
+    showLabels?: boolean;
+    size?: SegmentedBarSize;
+};
+declare const SegmentedBar: import("svelte").Component<SegmentedBarProps, {}, "">;
+type SegmentedBar = ReturnType<typeof SegmentedBar>;
+export default SegmentedBar;

package/dist/components/data-display/segmented-code/index.d.ts

@@ -0,0 +1 @@
+export { default as SegmentedCode, type SegmentedCodeProps } from './segmented-code.svelte';

package/dist/components/data-display/segmented-code/index.js

@@ -0,0 +1 @@
+export { default as SegmentedCode } from './segmented-code.svelte';

package/dist/components/data-display/segmented-code/segmented-code.svelte

@@ -0,0 +1,84 @@
+<!--
+  Origin: the React package 2.23.0 `segmented-code.tsx`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { Size } from '../../../utils/tone.js'
+
+  const SIZE_CLASS: Record<Size, string> = {
+    sm: 'h-9 text-sm',
+    md: 'h-11 text-base',
+    lg: 'h-13 text-lg',
+  }
+
+  /** A box's side padding grows with its type, so a 29-character key still fits a dialog at `sm`. */
+  const BOX_PADDING_CLASS: Record<Size, string> = {
+    sm: 'px-2',
+    md: 'px-2.5',
+    lg: 'px-3',
+  }
+
+  /** Splits `characters` into consecutive runs of `groups[i]` characters. */
+  function segmentsOf(characters: string, groups: readonly number[]): string[] {
+    return groups.map((groupLength, index) => {
+      const groupStart = groups.slice(0, index).reduce((total, length) => total + length, 0)
+      return characters.slice(groupStart, groupStart + groupLength)
+    })
+  }
+
+  /**
+   * A code to read off a screen and type in somewhere else, in joined boxes of
+   * a few characters each, so a key reads here in the same groups the device
+   * asks for it in. The operator reads a box, types a box.
+   *
+   * **Display only.** Copying, revealing and downloading are the caller's
+   * buttons: what a code allows differs by credential, and a key that works
+   * once wants a different set from a pairing code that expires.
+   *
+   * **In a muted strip.** The strip sets the code apart from the prose around
+   * it, as a `<code>` span does in a paragraph.
+   */
+  export type SegmentedCodeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /**
+     * The code as issued (`66G6D-ME7021KJ6JBFN82MAWQA9VCV`). Hyphens and spaces
+     * are dropped before it is split, so the groups decide where it breaks.
+     */
+    value: string
+    /** How many characters each box holds, left to right: `[5, 4, 4, 4, 4, 4, 4]`. */
+    groups: readonly number[]
+    size?: Size
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { value, groups, size = 'md', class: className, ...rest }: SegmentedCodeProps = $props()
+
+  const segments = $derived(segmentsOf(value.replace(/[\s-]/g, ''), groups))
+</script>
+
+<div
+  data-slot="segmented-code"
+  class={cn(
+    'bg-muted border-border inline-flex max-w-full overflow-hidden rounded-lg border font-semibold',
+    SIZE_CLASS[size],
+    className,
+  )}
+  {...rest}
+>
+  <!-- A segment's position is its identity: two can hold the same text, and the
+       groups are fixed, never reordered. -->
+  {#each segments as segment, index (index)}
+    <span
+      class={cn(
+        'border-border flex items-center justify-center border-l tracking-wide first:border-l-0',
+        BOX_PADDING_CLASS[size],
+      )}
+    >
+      {segment}
+    </span>
+  {/each}
+</div>

package/dist/components/data-display/segmented-code/segmented-code.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Size } from '../../../utils/tone.js';
+/**
+ * A code to read off a screen and type in somewhere else, in joined boxes of
+ * a few characters each, so a key reads here in the same groups the device
+ * asks for it in. The operator reads a box, types a box.
+ *
+ * **Display only.** Copying, revealing and downloading are the caller's
+ * buttons: what a code allows differs by credential, and a key that works
+ * once wants a different set from a pairing code that expires.
+ *
+ * **In a muted strip.** The strip sets the code apart from the prose around
+ * it, as a `<code>` span does in a paragraph.
+ */
+export type SegmentedCodeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /**
+     * The code as issued (`66G6D-ME7021KJ6JBFN82MAWQA9VCV`). Hyphens and spaces
+     * are dropped before it is split, so the groups decide where it breaks.
+     */
+    value: string;
+    /** How many characters each box holds, left to right: `[5, 4, 4, 4, 4, 4, 4]`. */
+    groups: readonly number[];
+    size?: Size;
+};
+declare const SegmentedCode: import("svelte").Component<SegmentedCodeProps, {}, "">;
+type SegmentedCode = ReturnType<typeof SegmentedCode>;
+export default SegmentedCode;

package/dist/components/data-display/sparkline/index.d.ts

@@ -0,0 +1 @@
+export { default as Sparkline, type SparklineProps } from './sparkline.svelte';

package/dist/components/data-display/sparkline/index.js

@@ -0,0 +1 @@
+export { default as Sparkline } from './sparkline.svelte';