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

package/dist/components/feedback/locked-overlay/locked-overlay.svelte

@@ -0,0 +1,77 @@
+<!--
+  Origin: the React package 2.23.0 `locked-overlay.tsx`
+  Diverged: generic, per the round 5 triage (round 8 plan, R8-8): the React
+    comments and stories spoke of pricing tiers; the lock here is anything the
+    reader cannot open yet (access, setup, a plan). `action` and `children` are
+    snippets. Lucide's lock. Spreads the rest onto the root, as every component
+    does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /**
+   * A lock over one card's body, for a widget the reader cannot open while the
+   * rest of the page works. The card keeps its frame and header; only the body
+   * is swapped for a blurred sample with the pitch on top.
+   *
+   * The sample and the pitch share one grid cell rather than the pitch being
+   * positioned over the sample, so the body is as tall as whichever is taller:
+   * positioned absolutely, a short sample let the pitch spill over the card's
+   * header. The pitch layer is `relative` for its paint order: the sample's
+   * opacity and blur lift it into the positioned layer, and without it the
+   * faded sample drew over the pitch card.
+   */
+  export type LockedOverlayProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+    /** What is locked, as the pitch's heading. */
+    title: string
+    /** One line saying what the locked content would show. */
+    message: string
+    /** The way in: "Ask for access", "Finish setup". */
+    action: Snippet
+    /**
+     * Sample content in the shape of the real thing. Blurred, inert and hidden
+     * from assistive technology, so its made-up figures are never read as the
+     * reader's own.
+     */
+    children: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import LockIcon from '@lucide/svelte/icons/lock'
+
+  import { cn } from '../../../utils/cn.js'
+  import Card from '../../layout/card/card.svelte'
+  import CardDescription from '../../layout/card/card-description.svelte'
+  import CardFooter from '../../layout/card/card-footer.svelte'
+  import CardHeader from '../../layout/card/card-header.svelte'
+  import CardTitle from '../../layout/card/card-title.svelte'
+
+  let { title, message, action, children, class: className, ...rest }: LockedOverlayProps = $props()
+</script>
+
+<div data-slot="locked-overlay" class={cn('grid h-full', className)} {...rest}>
+  <div
+    aria-hidden="true"
+    inert
+    data-slot="locked-overlay-sample"
+    class="pointer-events-none col-start-1 row-start-1 self-start select-none opacity-60 blur-sm"
+  >
+    {@render children()}
+  </div>
+  <div class="relative col-start-1 row-start-1 flex items-center justify-center p-4">
+    <Card class="w-full max-w-xs text-center">
+      <CardHeader class="justify-items-center">
+        <span
+          class="bg-foreground/[0.07] text-muted-foreground flex size-10 items-center justify-center rounded-full"
+        >
+          <LockIcon class="size-5" />
+        </span>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{message}</CardDescription>
+      </CardHeader>
+      <CardFooter class="justify-center">{@render action()}</CardFooter>
+    </Card>
+  </div>
+</div>

package/dist/components/feedback/locked-overlay/locked-overlay.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * A lock over one card's body, for a widget the reader cannot open while the
+ * rest of the page works. The card keeps its frame and header; only the body
+ * is swapped for a blurred sample with the pitch on top.
+ *
+ * The sample and the pitch share one grid cell rather than the pitch being
+ * positioned over the sample, so the body is as tall as whichever is taller:
+ * positioned absolutely, a short sample let the pitch spill over the card's
+ * header. The pitch layer is `relative` for its paint order: the sample's
+ * opacity and blur lift it into the positioned layer, and without it the
+ * faded sample drew over the pitch card.
+ */
+export type LockedOverlayProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+    /** What is locked, as the pitch's heading. */
+    title: string;
+    /** One line saying what the locked content would show. */
+    message: string;
+    /** The way in: "Ask for access", "Finish setup". */
+    action: Snippet;
+    /**
+     * Sample content in the shape of the real thing. Blurred, inert and hidden
+     * from assistive technology, so its made-up figures are never read as the
+     * reader's own.
+     */
+    children: Snippet;
+};
+declare const LockedOverlay: import("svelte").Component<LockedOverlayProps, {}, "">;
+type LockedOverlay = ReturnType<typeof LockedOverlay>;
+export default LockedOverlay;

package/dist/components/feedback/navigation-progress/index.d.ts

@@ -0,0 +1 @@
+export { default as NavigationProgress, type NavigationProgressProps, } from './navigation-progress.svelte';

package/dist/components/feedback/navigation-progress/index.js

@@ -0,0 +1 @@
+export { default as NavigationProgress, } from './navigation-progress.svelte';

package/dist/components/feedback/navigation-progress/navigation-progress.svelte

@@ -0,0 +1,93 @@
+<!--
+  Origin: the React package 2.23.0 `navigation-progress.tsx`
+  Diverged: the shimmer's class and keyframes are `mise-` prefixed in
+    components.css. Effects on `pending` for React's two effects and refs.
+    `top-0`, which React's lacked: without it the fixed bar sat at its place in
+    the flow, not across the top of the viewport its own comment promises.
+-->
+<script lang="ts" module>
+  /** Where the bar waits while a navigation is in flight. */
+  const PEAK_POSITION = 0.65
+  const PEAK_ANIMATION_MS = 220
+  const DONE_ANIMATION_MS = 180
+  const BAR_HEIGHT = 5
+
+  /**
+   * The navigation progress bar across the top of the viewport.
+   *
+   * It does not report real progress, and cannot: a route transition has no
+   * measurable completion. It jumps to about two thirds and waits there, the
+   * honest version of the same lie every browser tells. A navigation that
+   * resolves instantly still flashes the bar to full and hides it, rather than
+   * leaving it parked: nothing is worse than a progress bar that stops.
+   */
+  export type NavigationProgressProps = {
+    /**
+     * Whether a navigation is in flight. Rising shows the bar and runs it to
+     * the peak; falling runs it to full width and hides it. The router stays in
+     * the app: Inertia's start and finish events, or SvelteKit's `navigating`.
+     */
+    pending: boolean
+  }
+</script>
+
+<script lang="ts">
+  let { pending }: NavigationProgressProps = $props()
+
+  let progress = $state(0)
+  let visible = $state(false)
+  let wasPending = false
+  let peakTimeout: ReturnType<typeof setTimeout> | undefined
+  let doneTimeout: ReturnType<typeof setTimeout> | undefined
+
+  $effect(() => {
+    if (pending && !wasPending) {
+      // Start: show the bar and move to the peak on the next tick, so the
+      // transition has a 0 to move away from.
+      wasPending = true
+      clearTimeout(doneTimeout)
+      visible = true
+      progress = 0
+      peakTimeout = setTimeout(() => {
+        progress = PEAK_POSITION
+      }, 0)
+    } else if (!pending && wasPending) {
+      // Done: run to full width, then hide.
+      wasPending = false
+      clearTimeout(peakTimeout)
+      progress = 1
+      doneTimeout = setTimeout(() => {
+        visible = false
+        progress = 0
+      }, DONE_ANIMATION_MS)
+    }
+  })
+
+  $effect(() => () => {
+    clearTimeout(peakTimeout)
+    clearTimeout(doneTimeout)
+  })
+
+  const duration = $derived(progress === 1 ? DONE_ANIMATION_MS : PEAK_ANIMATION_MS)
+</script>
+
+{#if visible}
+  <div
+    data-slot="navigation-progress"
+    class="fixed top-0 right-0 left-0 z-[1600]"
+    style:height="{BAR_HEIGHT}px"
+    role="progressbar"
+    aria-label="Loading"
+    aria-valuenow={Math.round(progress * 100)}
+    aria-valuemin={0}
+    aria-valuemax={100}
+  >
+    <div
+      class="bg-primary relative h-full overflow-hidden transition-[width] ease-out"
+      style:width="{progress * 100}%"
+      style:transition-duration="{duration}ms"
+    >
+      <div class="mise-navigation-progress-shimmer absolute inset-0" aria-hidden="true"></div>
+    </div>
+  </div>
+{/if}

package/dist/components/feedback/navigation-progress/navigation-progress.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The navigation progress bar across the top of the viewport.
+ *
+ * It does not report real progress, and cannot: a route transition has no
+ * measurable completion. It jumps to about two thirds and waits there, the
+ * honest version of the same lie every browser tells. A navigation that
+ * resolves instantly still flashes the bar to full and hides it, rather than
+ * leaving it parked: nothing is worse than a progress bar that stops.
+ */
+export type NavigationProgressProps = {
+    /**
+     * Whether a navigation is in flight. Rising shows the bar and runs it to
+     * the peak; falling runs it to full width and hides it. The router stays in
+     * the app: Inertia's start and finish events, or SvelteKit's `navigating`.
+     */
+    pending: boolean;
+};
+declare const NavigationProgress: import("svelte").Component<NavigationProgressProps, {}, "">;
+type NavigationProgress = ReturnType<typeof NavigationProgress>;
+export default NavigationProgress;

package/dist/components/feedback/progress/index.d.ts

@@ -0,0 +1 @@
+export { default as Progress, type ProgressProps } from './progress.svelte';

package/dist/components/feedback/progress/index.js

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

package/dist/components/feedback/progress/progress.svelte

@@ -0,0 +1,48 @@
+<!--
+  Origin: the React package 2.23.0 `progress.tsx`, itself shadcn/ui new-york `progress`
+  Svelte: shadcn-svelte `progress`
+  Diverged: none beyond the port. bits-ui Progress for Radix Progress; the
+    indicator reads `value` against `max`, as shadcn-svelte's does, where React
+    assumes a max of 100. The React divergence (`h-2` rather than `h-1.5`)
+    carries over.
+-->
+<script lang="ts" module>
+  import { Progress as ProgressPrimitive } from 'bits-ui'
+
+  import type { WithoutChildrenOrChild } from '../../../utils/types.js'
+
+  /**
+   * The bare bar. `MetricBar` and `MetricRow` colour it through
+   * `TONE_INDICATOR_CLASS`; reach for `Progress` directly when there is no label
+   * or figure beside it. An unknown `value` draws an empty bar, not an animated
+   * indeterminate one: the copy beside it carries "this is running".
+   */
+  export type ProgressProps = WithoutChildrenOrChild<ProgressPrimitive.RootProps>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    max = 100,
+    value,
+    ...rest
+  }: ProgressProps = $props()
+</script>
+
+<ProgressPrimitive.Root
+  bind:ref
+  data-slot="progress"
+  class={cn('bg-muted relative h-2 w-full overflow-hidden rounded-full', className)}
+  {value}
+  {max}
+  {...rest}
+>
+  <div
+    data-slot="progress-indicator"
+    class="bg-primary h-full w-full flex-1 transition-all"
+    style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max || 1)}%)"
+  ></div>
+</ProgressPrimitive.Root>

package/dist/components/feedback/progress/progress.svelte.d.ts

@@ -0,0 +1,12 @@
+import { Progress as ProgressPrimitive } from 'bits-ui';
+import type { WithoutChildrenOrChild } from '../../../utils/types.js';
+/**
+ * The bare bar. `MetricBar` and `MetricRow` colour it through
+ * `TONE_INDICATOR_CLASS`; reach for `Progress` directly when there is no label
+ * or figure beside it. An unknown `value` draws an empty bar, not an animated
+ * indeterminate one: the copy beside it carries "this is running".
+ */
+export type ProgressProps = WithoutChildrenOrChild<ProgressPrimitive.RootProps>;
+declare const Progress: import("svelte").Component<Omit<Omit<ProgressPrimitive.RootProps, "child">, "children">, {}, "ref">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/feedback/skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as Skeleton, type SkeletonProps } from './skeleton.svelte';

package/dist/components/feedback/skeleton/index.js

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

package/dist/components/feedback/skeleton/skeleton.svelte

@@ -0,0 +1,33 @@
+<!--
+  Origin: the React package 2.23.0 `skeleton.tsx`, itself shadcn/ui new-york `skeleton`
+  Svelte: shadcn-svelte `skeleton`
+  Diverged: `bg-foreground/10` rather than `bg-accent`. shadcn's `--accent` is
+    a neutral grey; the React package redefined it as the brand tint for the
+    active nav row, so its skeletons pulsed in the brand colour. A foreground
+    wash reads as neutral on the page and on a card, in both schemes. The rest
+    is unaudited, as in the React package.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * Shaped to what it stands in for: there is no default size. Reach for it
+   * where a component has not already drawn its own loading shape.
+   */
+  export type SkeletonProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: SkeletonProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="skeleton"
+  class={cn('bg-foreground/10 animate-pulse rounded-md', className)}
+  {...rest}
+></div>

package/dist/components/feedback/skeleton/skeleton.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * Shaped to what it stands in for: there is no default size. Reach for it
+ * where a component has not already drawn its own loading shape.
+ */
+export type SkeletonProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "ref">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/feedback/sonner/index.d.ts

@@ -0,0 +1,2 @@
+export { toast } from 'svelte-sonner';
+export { default as Toaster, type ToasterProps } from './sonner.svelte';

package/dist/components/feedback/sonner/index.js

@@ -0,0 +1,2 @@
+export { toast } from 'svelte-sonner';
+export { default as Toaster } from './sonner.svelte';

package/dist/components/feedback/sonner/sonner.svelte

@@ -0,0 +1,87 @@
+<!--
+  Origin: the React package 2.23.0 `sonner.tsx`, itself shadcn/ui new-york `sonner`
+  Svelte: shadcn-svelte `sonner`
+  Diverged: svelte-sonner for sonner. mise has no theme provider, so with no
+    `theme` prop the toaster follows the `.dark` class on <html>, the same class
+    every other component answers to; `system` is resolved here rather than
+    handed to svelte-sonner, as in React. The per-type class is `mise-toast`.
+-->
+<script lang="ts" module>
+  import type { ToasterProps as SonnerProps } from 'svelte-sonner'
+
+  export type ToasterProps = SonnerProps
+</script>
+
+<script lang="ts">
+  import CircleCheckIcon from '@lucide/svelte/icons/circle-check'
+  import InfoIcon from '@lucide/svelte/icons/info'
+  import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle'
+  import OctagonXIcon from '@lucide/svelte/icons/octagon-x'
+  import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert'
+  import { Toaster as Sonner } from 'svelte-sonner'
+
+  let { theme, toastOptions, ...rest }: ToasterProps = $props()
+
+  let pageIsDark = $state(false)
+
+  /*
+   * Follow the page rather than the OS. A toaster left on `system` picks its
+   * theme from prefers-color-scheme while the page follows the `.dark` class,
+   * and with a dark OS and a light app that put light text on a white toast.
+   */
+  $effect(() => {
+    const root = document.documentElement
+    const read = () => {
+      pageIsDark = root.classList.contains('dark')
+    }
+    read()
+    const observer = new MutationObserver(read)
+    observer.observe(root, { attributes: true, attributeFilter: ['class'] })
+    return () => observer.disconnect()
+  })
+
+  function systemTheme(): 'light' | 'dark' {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const resolvedTheme = $derived.by((): 'light' | 'dark' => {
+    if (theme === 'light' || theme === 'dark') return theme
+    if (theme === 'system') return systemTheme()
+
+    return pageIsDark ? 'dark' : 'light'
+  })
+</script>
+
+{#snippet successIcon()}
+  <CircleCheckIcon class="size-4" />
+{/snippet}
+{#snippet infoIcon()}
+  <InfoIcon class="size-4" />
+{/snippet}
+{#snippet warningIcon()}
+  <TriangleAlertIcon class="size-4" />
+{/snippet}
+{#snippet errorIcon()}
+  <OctagonXIcon class="size-4" />
+{/snippet}
+{#snippet loadingIcon()}
+  <LoaderCircleIcon class="size-4 animate-spin" />
+{/snippet}
+
+<Sonner
+  theme={resolvedTheme}
+  class="toaster group"
+  style="--normal-bg: var(--popover); --normal-text: var(--popover-foreground); --normal-border: var(--border); --border-radius: var(--radius);"
+  {successIcon}
+  {infoIcon}
+  {warningIcon}
+  {errorIcon}
+  {loadingIcon}
+  {...rest}
+  toastOptions={{
+    ...toastOptions,
+    // The hook the per-type colours in components.css hang off. Merged rather
+    // than replaced, so a caller's own toastOptions extend it.
+    classes: { toast: 'mise-toast', ...toastOptions?.classes },
+  }}
+/>

package/dist/components/feedback/sonner/sonner.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ToasterProps as SonnerProps } from 'svelte-sonner';
+export type ToasterProps = SonnerProps;
+import { Toaster as Sonner } from 'svelte-sonner';
+declare const Sonner: import("svelte").Component<SonnerProps, {}, "">;
+type Sonner = ReturnType<typeof Sonner>;
+export default Sonner;

package/dist/components/feedback/spinner/index.d.ts

@@ -0,0 +1 @@
+export { default as Spinner, type SpinnerProps } from './spinner.svelte';

package/dist/components/feedback/spinner/index.js

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

package/dist/components/feedback/spinner/spinner.svelte

@@ -0,0 +1,50 @@
+<!--
+  Origin: the React package 2.23.0 `spinner.tsx`, itself shadcn/ui new-york `spinner`
+  Svelte: shadcn-svelte `spinner`
+  Diverged: takes an optional caption as children, absorbing React's `LoadingStatus`
+    (`loading-status.tsx`). Captioned, it renders a `<span>` rather than LoadingStatus's
+    `<p>`, so it can sit inside a button or a line of text. Otherwise unaudited, as in
+    the React package.
+-->
+<script lang="ts" module>
+  import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle'
+  import type { ComponentProps, Snippet } from 'svelte'
+
+  /**
+   * `role="status"` and an `aria-label`, unlike a hand-spun icon: reach for this
+   * rather than a spinning loader glyph, which is silent to a screen reader.
+   *
+   * Give it a caption to say what is being waited on; "Loading…" alone says
+   * nothing the spinner does not. Captioned, the status announces the caption
+   * and the icon is hidden from assistive technology.
+   */
+  export type SpinnerProps = ComponentProps<typeof LoaderCircleIcon> & {
+    /** A short sentence naming what is being waited on. */
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { class: className, children, ...rest }: SpinnerProps = $props()
+</script>
+
+{#if children}
+  <span
+    role="status"
+    data-slot="spinner"
+    class="text-muted-foreground inline-flex items-center gap-2 text-sm"
+  >
+    <LoaderCircleIcon aria-hidden="true" class={cn('size-4 animate-spin', className)} {...rest} />
+    <span>{@render children()}</span>
+  </span>
+{:else}
+  <LoaderCircleIcon
+    role="status"
+    aria-label="Loading"
+    data-slot="spinner"
+    class={cn('size-4 animate-spin', className)}
+    {...rest}
+  />
+{/if}

package/dist/components/feedback/spinner/spinner.svelte.d.ts

@@ -0,0 +1,17 @@
+import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle';
+import type { ComponentProps, Snippet } from 'svelte';
+/**
+ * `role="status"` and an `aria-label`, unlike a hand-spun icon: reach for this
+ * rather than a spinning loader glyph, which is silent to a screen reader.
+ *
+ * Give it a caption to say what is being waited on; "Loading…" alone says
+ * nothing the spinner does not. Captioned, the status announces the caption
+ * and the icon is hidden from assistive technology.
+ */
+export type SpinnerProps = ComponentProps<typeof LoaderCircleIcon> & {
+    /** A short sentence naming what is being waited on. */
+    children?: Snippet;
+};
+declare const Spinner: import("svelte").Component<SpinnerProps, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/forms/button-group/button-group-separator.svelte

@@ -0,0 +1,31 @@
+<!--
+  Origin: the React package 2.23.0 `button-group.tsx` (`ButtonGroupSeparator`), itself shadcn/ui new-york `button-group`
+  Svelte: shadcn-svelte `button-group`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { SeparatorProps } from '../../layout/separator/separator.svelte'
+
+  /** A rule between two parts of a group. Vertical by default, for a row. */
+  export type ButtonGroupSeparatorProps = SeparatorProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Separator from '../../layout/separator/separator.svelte'
+
+  let {
+    ref = $bindable(null),
+    orientation = 'vertical',
+    class: className,
+    ...rest
+  }: ButtonGroupSeparatorProps = $props()
+</script>
+
+<Separator
+  bind:ref
+  data-slot="button-group-separator"
+  {orientation}
+  class={cn('bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto', className)}
+  {...rest}
+/>

package/dist/components/forms/button-group/button-group-separator.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { SeparatorProps } from '../../layout/separator/separator.svelte';
+/** A rule between two parts of a group. Vertical by default, for a row. */
+export type ButtonGroupSeparatorProps = SeparatorProps;
+declare const ButtonGroupSeparator: import("svelte").Component<import("bits-ui").SeparatorRootProps, {}, "ref">;
+type ButtonGroupSeparator = ReturnType<typeof ButtonGroupSeparator>;
+export default ButtonGroupSeparator;

package/dist/components/forms/button-group/button-group-text.svelte

@@ -0,0 +1,46 @@
+<!--
+  Origin: the React package 2.23.0 `button-group.tsx` (`ButtonGroupText`), itself shadcn/ui new-york `button-group`
+  Svelte: shadcn-svelte `button-group`
+  Diverged: `asChild` is a `child` snippet that receives the merged props. Carries
+    `data-slot="button-group-text"`, which React's lacks.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /** A fixed label inside a group: a unit, a prefix, a caption ahead of an action. */
+  export type ButtonGroupTextProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    child,
+    children,
+    ...rest
+  }: ButtonGroupTextProps = $props()
+
+  const merged = $derived({
+    ...rest,
+    'data-slot': 'button-group-text',
+    class: cn(
+      "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+      className,
+    ),
+  })
+</script>
+
+{#if child}
+  {@render child({ props: merged })}
+{:else}
+  <div bind:this={ref} {...merged}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/components/forms/button-group/button-group-text.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/** A fixed label inside a group: a unit, a prefix, a caption ahead of an action. */
+export type ButtonGroupTextProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const ButtonGroupText: import("svelte").Component<ButtonGroupTextProps, {}, "ref">;
+type ButtonGroupText = ReturnType<typeof ButtonGroupText>;
+export default ButtonGroupText;

package/dist/components/forms/button-group/button-group-variants.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Origin: the React package 2.23.0 `button-group.tsx` (`buttonGroupVariants`), itself shadcn/ui new-york `button-group`
+ * Diverged: split out of the component file, as field-variants.ts is. Joined
+ *   children overlap by a pixel (`-ml-px`, `-mt-px` when vertical) instead of
+ *   dropping a border (`border-l-0`, `border-t-0`), and a toned child is raised
+ *   above its neighbours, so a critical outline button keeps its whole outline;
+ *   React's drops the shared side and shows its neighbour's grey edge there.
+ */
+import { type VariantProps } from 'class-variance-authority';
+export declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonGroupOrientation = NonNullable<VariantProps<typeof buttonGroupVariants>['orientation']>;