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

package/dist/components/actions/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -0,0 +1,32 @@
+<!--
+  Origin: the React package 2.23.0 `dropdown-menu.tsx` (`DropdownMenuShortcut`), itself shadcn/ui new-york `dropdown-menu`
+  Svelte: shadcn-svelte `dropdown-menu`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type DropdownMenuShortcutProps = WithElementRef<HTMLAttributes<HTMLSpanElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: DropdownMenuShortcutProps = $props()
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="dropdown-menu-shortcut"
+  class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+  {...rest}
+>
+  {@render children?.()}
+</span>

package/dist/components/actions/dropdown-menu/dropdown-menu-shortcut.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type DropdownMenuShortcutProps = WithElementRef<HTMLAttributes<HTMLSpanElement>>;
+declare const DropdownMenuShortcut: import("svelte").Component<DropdownMenuShortcutProps, {}, "ref">;
+type DropdownMenuShortcut = ReturnType<typeof DropdownMenuShortcut>;
+export default DropdownMenuShortcut;

package/dist/components/actions/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -0,0 +1,26 @@
+<!--
+  Origin: the React package 2.23.0 `dropdown-menu.tsx` (`DropdownMenuSubContent`), itself shadcn/ui new-york `dropdown-menu`
+  Svelte: shadcn-svelte `dropdown-menu`
+  Diverged: the origin variable is bits-ui's.
+-->
+<script lang="ts" module>
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+
+  export type DropdownMenuSubContentProps = DropdownMenuPrimitive.SubContentProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: DropdownMenuSubContentProps = $props()
+</script>
+
+<DropdownMenuPrimitive.SubContent
+  bind:ref
+  data-slot="dropdown-menu-sub-content"
+  class={cn(
+    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--bits-menu-content-transform-origin) overflow-hidden rounded-2xl p-1.5 shadow-lg ring-1 ring-foreground/5 dark:ring-foreground/10',
+    className,
+  )}
+  {...rest}
+/>

package/dist/components/actions/dropdown-menu/dropdown-menu-sub-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+export type DropdownMenuSubContentProps = DropdownMenuPrimitive.SubContentProps;
+declare const DropdownMenuSubContent: import("svelte").Component<DropdownMenuPrimitive.SubContentProps, {}, "ref">;
+type DropdownMenuSubContent = ReturnType<typeof DropdownMenuSubContent>;
+export default DropdownMenuSubContent;

package/dist/components/actions/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -0,0 +1,41 @@
+<!--
+  Origin: the React package 2.23.0 `dropdown-menu.tsx` (`DropdownMenuSubTrigger`), itself shadcn/ui new-york `dropdown-menu`
+  Svelte: shadcn-svelte `dropdown-menu`
+  Diverged: bits-ui marks the active row `data-highlighted` rather than focusing
+    it, so each `focus:` utility is mirrored on `data-[highlighted]`.
+-->
+<script lang="ts" module>
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+
+  export type DropdownMenuSubTriggerProps = DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean
+  }
+</script>
+
+<script lang="ts">
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    inset,
+    class: className,
+    children,
+    ...rest
+  }: DropdownMenuSubTriggerProps = $props()
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+  bind:ref
+  data-slot="dropdown-menu-sub-trigger"
+  data-inset={inset || undefined}
+  class={cn(
+    "focus:bg-muted data-[highlighted]:bg-muted focus:text-foreground data-[highlighted]:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center min-h-7 gap-2 rounded-xl in-data-[slot=dialog-content]:rounded-2xl px-2 py-1.5 text-sm whitespace-nowrap outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+  <ChevronRightIcon class="ml-auto size-4" />
+</DropdownMenuPrimitive.SubTrigger>

package/dist/components/actions/dropdown-menu/dropdown-menu-sub-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+export type DropdownMenuSubTriggerProps = DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+};
+declare const DropdownMenuSubTrigger: import("svelte").Component<DropdownMenuSubTriggerProps, {}, "ref">;
+type DropdownMenuSubTrigger = ReturnType<typeof DropdownMenuSubTrigger>;
+export default DropdownMenuSubTrigger;

package/dist/components/actions/dropdown-menu/dropdown-menu-sub.svelte

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `dropdown-menu.tsx` (`DropdownMenuSub`), itself shadcn/ui new-york `dropdown-menu`
+  Svelte: shadcn-svelte `dropdown-menu`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+
+  export type DropdownMenuSubProps = DropdownMenuPrimitive.SubProps
+</script>
+
+<script lang="ts">
+  let { open = $bindable(false), ...rest }: DropdownMenuSubProps = $props()
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...rest} />

package/dist/components/actions/dropdown-menu/dropdown-menu-sub.svelte.d.ts

@@ -0,0 +1,5 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+export type DropdownMenuSubProps = DropdownMenuPrimitive.SubProps;
+declare const DropdownMenuSub: import("svelte").Component<import("bits-ui").ContextMenuSubPropsWithoutHTML, {}, "open">;
+type DropdownMenuSub = ReturnType<typeof DropdownMenuSub>;
+export default DropdownMenuSub;

package/dist/components/actions/dropdown-menu/dropdown-menu-trigger.svelte

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `dropdown-menu.tsx` (`DropdownMenuTrigger`), itself shadcn/ui new-york `dropdown-menu`
+  Svelte: shadcn-svelte `dropdown-menu`
+  Diverged: `asChild` is bits-ui's `child` snippet.
+-->
+<script lang="ts" module>
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+
+  export type DropdownMenuTriggerProps = DropdownMenuPrimitive.TriggerProps
+</script>
+
+<script lang="ts">
+  let { ref = $bindable(null), ...rest }: DropdownMenuTriggerProps = $props()
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...rest} />

package/dist/components/actions/dropdown-menu/dropdown-menu-trigger.svelte.d.ts

@@ -0,0 +1,5 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+export type DropdownMenuTriggerProps = DropdownMenuPrimitive.TriggerProps;
+declare const DropdownMenuTrigger: import("svelte").Component<DropdownMenuPrimitive.TriggerProps, {}, "ref">;
+type DropdownMenuTrigger = ReturnType<typeof DropdownMenuTrigger>;
+export default DropdownMenuTrigger;

package/dist/components/actions/dropdown-menu/dropdown-menu.svelte

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `dropdown-menu.tsx` (`DropdownMenu`), itself shadcn/ui new-york `dropdown-menu`
+  Svelte: shadcn-svelte `dropdown-menu`
+  Diverged: bits-ui DropdownMenu for Radix, with `bind:open`.
+-->
+<script lang="ts" module>
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'
+
+  export type DropdownMenuProps = DropdownMenuPrimitive.RootProps
+</script>
+
+<script lang="ts">
+  let { open = $bindable(false), ...rest }: DropdownMenuProps = $props()
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...rest} />

package/dist/components/actions/dropdown-menu/dropdown-menu.svelte.d.ts

@@ -0,0 +1,5 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+export type DropdownMenuProps = DropdownMenuPrimitive.RootProps;
+declare const DropdownMenu: import("svelte").Component<import("bits-ui").ContextMenuRootPropsWithoutHTML, {}, "open">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/components/actions/dropdown-menu/index.d.ts

@@ -0,0 +1,15 @@
+export { type DropdownMenuProps, default as DropdownMenu } from './dropdown-menu.svelte';
+export { type DropdownMenuCheckboxItemProps, default as DropdownMenuCheckboxItem, } from './dropdown-menu-checkbox-item.svelte';
+export { type DropdownMenuContentProps, default as DropdownMenuContent, } from './dropdown-menu-content.svelte';
+export { type DropdownMenuGroupProps, default as DropdownMenuGroup, } from './dropdown-menu-group.svelte';
+export { type DropdownMenuItemProps, default as DropdownMenuItem, } from './dropdown-menu-item.svelte';
+export { type DropdownMenuLabelProps, default as DropdownMenuLabel, } from './dropdown-menu-label.svelte';
+export { type DropdownMenuPortalProps, default as DropdownMenuPortal, } from './dropdown-menu-portal.svelte';
+export { type DropdownMenuRadioGroupProps, default as DropdownMenuRadioGroup, } from './dropdown-menu-radio-group.svelte';
+export { type DropdownMenuRadioItemProps, default as DropdownMenuRadioItem, } from './dropdown-menu-radio-item.svelte';
+export { type DropdownMenuSeparatorProps, default as DropdownMenuSeparator, } from './dropdown-menu-separator.svelte';
+export { type DropdownMenuShortcutProps, default as DropdownMenuShortcut, } from './dropdown-menu-shortcut.svelte';
+export { type DropdownMenuSubProps, default as DropdownMenuSub } from './dropdown-menu-sub.svelte';
+export { type DropdownMenuSubContentProps, default as DropdownMenuSubContent, } from './dropdown-menu-sub-content.svelte';
+export { type DropdownMenuSubTriggerProps, default as DropdownMenuSubTrigger, } from './dropdown-menu-sub-trigger.svelte';
+export { type DropdownMenuTriggerProps, default as DropdownMenuTrigger, } from './dropdown-menu-trigger.svelte';

package/dist/components/actions/dropdown-menu/index.js

@@ -0,0 +1,15 @@
+export { default as DropdownMenu } from './dropdown-menu.svelte';
+export { default as DropdownMenuCheckboxItem, } from './dropdown-menu-checkbox-item.svelte';
+export { default as DropdownMenuContent, } from './dropdown-menu-content.svelte';
+export { default as DropdownMenuGroup, } from './dropdown-menu-group.svelte';
+export { default as DropdownMenuItem, } from './dropdown-menu-item.svelte';
+export { default as DropdownMenuLabel, } from './dropdown-menu-label.svelte';
+export { default as DropdownMenuPortal, } from './dropdown-menu-portal.svelte';
+export { default as DropdownMenuRadioGroup, } from './dropdown-menu-radio-group.svelte';
+export { default as DropdownMenuRadioItem, } from './dropdown-menu-radio-item.svelte';
+export { default as DropdownMenuSeparator, } from './dropdown-menu-separator.svelte';
+export { default as DropdownMenuShortcut, } from './dropdown-menu-shortcut.svelte';
+export { default as DropdownMenuSub } from './dropdown-menu-sub.svelte';
+export { default as DropdownMenuSubContent, } from './dropdown-menu-sub-content.svelte';
+export { default as DropdownMenuSubTrigger, } from './dropdown-menu-sub-trigger.svelte';
+export { default as DropdownMenuTrigger, } from './dropdown-menu-trigger.svelte';

package/dist/components/actions/theme-toggle/index.d.ts

@@ -0,0 +1,3 @@
+export { type Theme, ThemeState, useTheme } from './theme.svelte.js';
+export { default as ThemeProvider, type ThemeProviderProps } from './theme-provider.svelte';
+export { default as ThemeToggle, type ThemeToggleProps } from './theme-toggle.svelte';

package/dist/components/actions/theme-toggle/index.js

@@ -0,0 +1,3 @@
+export { ThemeState, useTheme } from './theme.svelte.js';
+export { default as ThemeProvider } from './theme-provider.svelte';
+export { default as ThemeToggle } from './theme-toggle.svelte';

package/dist/components/actions/theme-toggle/theme-provider.svelte

@@ -0,0 +1,49 @@
+<!--
+  Origin: the React package 2.23.0 `use-theme.tsx` (`ThemeProvider`), in its hooks folder
+  Diverged: a Svelte context for React's (round 8 plan, R8-6). Same storage key
+    default, `system` handling and class on `<html>`, so an app moving over keeps
+    its users' stored choice.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
+  import type { Theme } from './theme.svelte.js'
+
+  /**
+   * Applies a `light` / `dark` class to `<html>` and persists the choice. The
+   * class on the root is what Tailwind's `dark:` variant reads, so this touches
+   * the DOM directly rather than passing a value down alone.
+   *
+   * `system` re-reads `prefers-color-scheme` on every mount but does not
+   * subscribe to it. Web only, as React's.
+   */
+  export type ThemeProviderProps = {
+    defaultTheme?: Theme
+    /** localStorage key. Distinct per app, so two apps on one host do not share a theme. */
+    storageKey?: string
+    children: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { setThemeContext, ThemeState } from './theme.svelte.js'
+
+  let {
+    defaultTheme = 'system',
+    storageKey = 'vite-ui-theme',
+    children,
+  }: ThemeProviderProps = $props()
+
+  // The key and default are read once, at mount, as React's useState initialiser read them.
+  // svelte-ignore state_referenced_locally
+  const state = new ThemeState(storageKey, defaultTheme)
+  setThemeContext(state)
+
+  $effect(() => {
+    const root = document.documentElement
+    root.classList.remove('light', 'dark')
+    root.classList.add(state.resolved)
+  })
+</script>
+
+{@render children()}

package/dist/components/actions/theme-toggle/theme-provider.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { Theme } from './theme.svelte.js';
+/**
+ * Applies a `light` / `dark` class to `<html>` and persists the choice. The
+ * class on the root is what Tailwind's `dark:` variant reads, so this touches
+ * the DOM directly rather than passing a value down alone.
+ *
+ * `system` re-reads `prefers-color-scheme` on every mount but does not
+ * subscribe to it. Web only, as React's.
+ */
+export type ThemeProviderProps = {
+    defaultTheme?: Theme;
+    /** localStorage key. Distinct per app, so two apps on one host do not share a theme. */
+    storageKey?: string;
+    children: Snippet;
+};
+declare const ThemeProvider: import("svelte").Component<ThemeProviderProps, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;

package/dist/components/actions/theme-toggle/theme-toggle.svelte

@@ -0,0 +1,48 @@
+<!--
+  Origin: the React package 2.23.0 `theme-toggle.tsx`
+  Diverged: Lucide's sun and moon for Tabler's. Spreads the rest onto the
+    button, as every component does.
+-->
+<script lang="ts" module>
+  import type { ButtonProps } from '../button/button.svelte'
+
+  /**
+   * Icon-only toggle between light and dark, inside a `ThemeProvider`.
+   *
+   * `system` only ever arrives as the app's initial value; this never sets it
+   * back. So a first click from `system` cannot be a silent no-op: the
+   * resolved theme decides which concrete value to flip to, and the icon and
+   * the click always agree on what "currently active" means.
+   */
+  export type ThemeToggleProps = Omit<ButtonProps, 'children' | 'onclick'>
+</script>
+
+<script lang="ts">
+  import MoonIcon from '@lucide/svelte/icons/moon'
+  import SunIcon from '@lucide/svelte/icons/sun'
+
+  import { cn } from '../../../utils/cn.js'
+  import Button from '../button/button.svelte'
+  import { useTheme } from './theme.svelte.js'
+
+  let { class: className, ...rest }: ThemeToggleProps = $props()
+
+  const theme = useTheme()
+  const dark = $derived(theme.resolved === 'dark')
+</script>
+
+<Button
+  variant="ghost"
+  size="sm"
+  iconOnly
+  class={cn('rounded-full', className)}
+  onclick={() => theme.setTheme(dark ? 'light' : 'dark')}
+  aria-label={dark ? 'Switch to light theme' : 'Switch to dark theme'}
+  {...rest}
+>
+  {#if dark}
+    <SunIcon class="size-4" />
+  {:else}
+    <MoonIcon class="size-4" />
+  {/if}
+</Button>

package/dist/components/actions/theme-toggle/theme-toggle.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ButtonProps } from '../button/button.svelte';
+/**
+ * Icon-only toggle between light and dark, inside a `ThemeProvider`.
+ *
+ * `system` only ever arrives as the app's initial value; this never sets it
+ * back. So a first click from `system` cannot be a silent no-op: the
+ * resolved theme decides which concrete value to flip to, and the icon and
+ * the click always agree on what "currently active" means.
+ */
+export type ThemeToggleProps = Omit<ButtonProps, 'children' | 'onclick'>;
+declare const ThemeToggle: import("svelte").Component<ThemeToggleProps, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/actions/theme-toggle/theme.svelte.d.ts

@@ -0,0 +1,17 @@
+export type Theme = 'dark' | 'light' | 'system';
+/** The chosen theme, persisted under `storageKey`. */
+export declare class ThemeState {
+    #private;
+    constructor(storageKey: string, defaultTheme: Theme);
+    get theme(): Theme;
+    setTheme: (next: Theme) => void;
+    /**
+     * `system` resolved against `prefers-color-scheme`. Read on demand rather
+     * than subscribed to: a theme that changes under the user mid-session is
+     * more surprising than one that settles at load.
+     */
+    get resolved(): 'dark' | 'light';
+}
+export declare const setThemeContext: (state: ThemeState) => ThemeState;
+/** The theme from the nearest `ThemeProvider`. */
+export declare function useTheme(): ThemeState;

package/dist/components/actions/theme-toggle/theme.svelte.js

@@ -0,0 +1,45 @@
+/**
+ * Origin: the React package 2.23.0 `use-theme.tsx` (`ThemeProviderState`, `useTheme`), in its hooks folder
+ * Diverged: a rune-backed state shared through Svelte's context, for React's
+ *   context and hook (round 8 plan, R8-6). It reads `localStorage` only in a
+ *   browser, so a server render gets the default rather than a crash.
+ */
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('mise-theme');
+/** The chosen theme, persisted under `storageKey`. */
+export class ThemeState {
+    #storageKey;
+    #theme = $state('system');
+    constructor(storageKey, defaultTheme) {
+        this.#storageKey = storageKey;
+        const stored = typeof localStorage === 'undefined'
+            ? null
+            : localStorage.getItem(storageKey);
+        this.#theme = stored || defaultTheme;
+    }
+    get theme() {
+        return this.#theme;
+    }
+    setTheme = (next) => {
+        localStorage.setItem(this.#storageKey, next);
+        this.#theme = next;
+    };
+    /**
+     * `system` resolved against `prefers-color-scheme`. Read on demand rather
+     * than subscribed to: a theme that changes under the user mid-session is
+     * more surprising than one that settles at load.
+     */
+    get resolved() {
+        if (this.#theme !== 'system')
+            return this.#theme;
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+}
+export const setThemeContext = (state) => setContext(KEY, state);
+/** The theme from the nearest `ThemeProvider`. */
+export function useTheme() {
+    const state = getContext(KEY);
+    if (!state)
+        throw new Error('useTheme must be used within a <ThemeProvider>');
+    return state;
+}

package/dist/components/data-display/avatar/avatar-fallback.svelte

@@ -0,0 +1,29 @@
+<!--
+  Origin: the React package 2.23.0 `avatar.tsx` (`AvatarFallback`), itself shadcn/ui new-york `avatar`
+  Svelte: shadcn-svelte `avatar`
+  Diverged: unaudited, as in the React package. bits-ui Avatar for Radix.
+    The fill is `bg-foreground/[0.07]`, the neutral wash, not `bg-muted`, which
+    vanished on the muted canvas and on a muted row.
+-->
+<script lang="ts" module>
+  import { Avatar as AvatarPrimitive } from 'bits-ui'
+
+  /** Renders while the image loads, and stays if it fails. */
+  export type AvatarFallbackProps = AvatarPrimitive.FallbackProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: AvatarFallbackProps = $props()
+</script>
+
+<AvatarPrimitive.Fallback
+  bind:ref
+  data-slot="avatar-fallback"
+  class={cn(
+    'bg-foreground/[0.07] flex size-full items-center justify-center rounded-full',
+    className,
+  )}
+  {...rest}
+/>

package/dist/components/data-display/avatar/avatar-fallback.svelte.d.ts

@@ -0,0 +1,6 @@
+import { Avatar as AvatarPrimitive } from 'bits-ui';
+/** Renders while the image loads, and stays if it fails. */
+export type AvatarFallbackProps = AvatarPrimitive.FallbackProps;
+declare const AvatarFallback: import("svelte").Component<AvatarPrimitive.FallbackProps, {}, "ref">;
+type AvatarFallback = ReturnType<typeof AvatarFallback>;
+export default AvatarFallback;

package/dist/components/data-display/avatar/avatar-image.svelte

@@ -0,0 +1,23 @@
+<!--
+  Origin: the React package 2.23.0 `avatar.tsx` (`AvatarImage`), itself shadcn/ui new-york `avatar`
+  Svelte: shadcn-svelte `avatar`
+  Diverged: unaudited, as in the React package. bits-ui Avatar for Radix.
+-->
+<script lang="ts" module>
+  import { Avatar as AvatarPrimitive } from 'bits-ui'
+
+  export type AvatarImageProps = AvatarPrimitive.ImageProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: AvatarImageProps = $props()
+</script>
+
+<AvatarPrimitive.Image
+  bind:ref
+  data-slot="avatar-image"
+  class={cn('aspect-square size-full', className)}
+  {...rest}
+/>

package/dist/components/data-display/avatar/avatar-image.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Avatar as AvatarPrimitive } from 'bits-ui';
+export type AvatarImageProps = AvatarPrimitive.ImageProps;
+declare const AvatarImage: import("svelte").Component<AvatarPrimitive.ImageProps, {}, "ref">;
+type AvatarImage = ReturnType<typeof AvatarImage>;
+export default AvatarImage;

package/dist/components/data-display/avatar/avatar-status.svelte

@@ -0,0 +1,48 @@
+<!--
+  Origin: the React package 2.23.0 `avatar.tsx` (`AvatarStatus`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * An avatar with a `PresenceDot` on its edge while someone is here. It wraps
+   * an `Avatar` rather than sitting inside it: `Avatar` clips its children to a
+   * circle, and the dot has to overhang the edge to read as a badge.
+   */
+  export type AvatarStatusProps = WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+    /** Shows the dot: someone is here right now. */
+    isOnline: boolean
+    /** Read to screen readers while online, e.g. "Has this ticket open". */
+    label?: string
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import PresenceDot from './presence-dot.svelte'
+
+  let {
+    ref = $bindable(null),
+    isOnline,
+    label,
+    class: className,
+    children,
+    ...rest
+  }: AvatarStatusProps = $props()
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="avatar-status"
+  data-online={isOnline || undefined}
+  class={cn('relative inline-flex shrink-0', className)}
+  {...rest}
+>
+  {@render children?.()}
+  {#if isOnline}
+    <PresenceDot {label} class="absolute right-0 bottom-0" />
+  {/if}
+</span>

package/dist/components/data-display/avatar/avatar-status.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * An avatar with a `PresenceDot` on its edge while someone is here. It wraps
+ * an `Avatar` rather than sitting inside it: `Avatar` clips its children to a
+ * circle, and the dot has to overhang the edge to read as a badge.
+ */
+export type AvatarStatusProps = WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+    /** Shows the dot: someone is here right now. */
+    isOnline: boolean;
+    /** Read to screen readers while online, e.g. "Has this ticket open". */
+    label?: string;
+};
+declare const AvatarStatus: import("svelte").Component<AvatarStatusProps, {}, "ref">;
+type AvatarStatus = ReturnType<typeof AvatarStatus>;
+export default AvatarStatus;

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

@@ -0,0 +1,24 @@
+<!--
+  Origin: the React package 2.23.0 `avatar.tsx` (`Avatar`), itself shadcn/ui new-york `avatar`
+  Svelte: shadcn-svelte `avatar`
+  Diverged: unaudited, as in the React package. bits-ui Avatar for Radix.
+-->
+<script lang="ts" module>
+  import { Avatar as AvatarPrimitive } from 'bits-ui'
+
+  /** `size-8` by default; a caller resizing it sets the initials' size too. */
+  export type AvatarProps = AvatarPrimitive.RootProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: AvatarProps = $props()
+</script>
+
+<AvatarPrimitive.Root
+  bind:ref
+  data-slot="avatar"
+  class={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
+  {...rest}
+/>

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

@@ -0,0 +1,6 @@
+import { Avatar as AvatarPrimitive } from 'bits-ui';
+/** `size-8` by default; a caller resizing it sets the initials' size too. */
+export type AvatarProps = AvatarPrimitive.RootProps;
+declare const Avatar: import("svelte").Component<AvatarPrimitive.RootProps, {}, "ref">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

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

@@ -0,0 +1,5 @@
+export { type AvatarProps, default as Avatar } from './avatar.svelte';
+export { type AvatarFallbackProps, default as AvatarFallback } from './avatar-fallback.svelte';
+export { type AvatarImageProps, default as AvatarImage } from './avatar-image.svelte';
+export { type AvatarStatusProps, default as AvatarStatus } from './avatar-status.svelte';
+export { default as PresenceDot, type PresenceDotProps } from './presence-dot.svelte';

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

@@ -0,0 +1,5 @@
+export { default as Avatar } from './avatar.svelte';
+export { default as AvatarFallback } from './avatar-fallback.svelte';
+export { default as AvatarImage } from './avatar-image.svelte';
+export { default as AvatarStatus } from './avatar-status.svelte';
+export { default as PresenceDot } from './presence-dot.svelte';