@chrissnell/chonky-ui 0.1.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 chonky-ui contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+# chonky-ui
+
+A Svelte 5 component library with an opinionated monospace design system. Wraps [bits-ui](https://bits-ui.com) for accessibility and behavior.
+
+## Install
+
+```bash
+npm install @chrissnell/chonky-ui bits-ui @internationalized/date
+```
+
+## Setup
+
+Import the stylesheet in your root layout:
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script>
+  import '@chrissnell/chonky-ui/css';
+</script>
+```
+
+Optionally import just the design tokens:
+
+```svelte
+<script>
+  import '@chrissnell/chonky-ui/tokens';
+</script>
+```
+
+## Usage
+
+```svelte
+<script>
+  import { Button, Badge, Input, Modal } from '@chrissnell/chonky-ui';
+
+  let modalOpen = $state(false);
+</script>
+
+<Button variant="primary" onclick={() => modalOpen = true}>Save</Button>
+<Badge variant="success">online</Badge>
+<Input placeholder="Search..." />
+
+<Modal bind:open={modalOpen}>
+  <Modal.Header>Title</Modal.Header>
+  <Modal.Body>Content here.</Modal.Body>
+</Modal>
+```
+
+## Components
+
+**Core**: Button, Badge, Input, Select, Toggle, Radio, RadioGroup, Box, BoxHeader, Table, Label, Separator, Spinner, Dot, StatusBar, EmptyState, ApplyBanner, ThemeToggle
+
+**Navigation & Layout**: Tabs, Breadcrumb, Pagination, Accordion, Collapsible, Toolbar, ScrollArea, NavigationMenu, Menubar
+
+**Overlays**: Tooltip, Popover, DropdownMenu, ContextMenu, Command, AlertDialog, LinkPreview, Combobox, Listbox, Modal
+
+**Form & Data**: Checkbox, Slider, Progress, Meter, PinInput, ToggleButton, ToggleGroup, RatingGroup, Avatar, AspectRatio
+
+**Date & Time**: Calendar, RangeCalendar, DateField, DatePicker, DateRangeField, DateRangePicker, TimeField, TimeRangeField
+
+**Utilities**: LogViewer, Toast/Toaster
+
+## License
+
+MIT

package/dist/components/Accordion/AccordionContent.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Accordion as BitsAccordion } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: AccordionContentProps = $props();
+</script>
+
+<BitsAccordion.Content class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsAccordion.Content>

package/dist/components/Accordion/AccordionContent.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const AccordionContent: import("svelte").Component<AccordionContentProps, {}, "">;
+type AccordionContent = ReturnType<typeof AccordionContent>;
+export default AccordionContent;

package/dist/components/Accordion/AccordionItem.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Accordion as BitsAccordion } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    value,
+    class: className,
+    children,
+    ...restProps
+  }: AccordionItemProps = $props();
+</script>
+
+<BitsAccordion.Item {value} class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsAccordion.Item>

package/dist/components/Accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/Accordion/AccordionRoot.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Accordion as BitsAccordion } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface AccordionRootProps extends HTMLAttributes<HTMLDivElement> {
+    type?: 'single' | 'multiple';
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    type = 'single',
+    value = $bindable(''),
+    onValueChange,
+    class: className,
+    children,
+    ...restProps
+  }: AccordionRootProps = $props();
+</script>
+
+{#if type === 'multiple'}
+  <BitsAccordion.Root
+    type="multiple"
+    bind:value={value as string[]}
+    onValueChange={(v) => onValueChange?.(v)}
+    class={cn(className)}
+    {...restProps}
+  >
+    {@render children()}
+  </BitsAccordion.Root>
+{:else}
+  <BitsAccordion.Root
+    type="single"
+    bind:value={value as string}
+    onValueChange={(v) => onValueChange?.(v)}
+    class={cn(className)}
+    {...restProps}
+  >
+    {@render children()}
+  </BitsAccordion.Root>
+{/if}

package/dist/components/Accordion/AccordionRoot.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface AccordionRootProps extends HTMLAttributes<HTMLDivElement> {
+    type?: 'single' | 'multiple';
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    class?: string;
+    children?: Snippet;
+}
+declare const AccordionRoot: import("svelte").Component<AccordionRootProps, {}, "value">;
+type AccordionRoot = ReturnType<typeof AccordionRoot>;
+export default AccordionRoot;

package/dist/components/Accordion/AccordionTrigger.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Accordion as BitsAccordion } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface AccordionTriggerProps extends HTMLButtonAttributes {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: AccordionTriggerProps = $props();
+</script>
+
+<BitsAccordion.Header>
+  <BitsAccordion.Trigger class={cn(className)} {...restProps}>
+    {@render children()}
+  </BitsAccordion.Trigger>
+</BitsAccordion.Header>

package/dist/components/Accordion/AccordionTrigger.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export interface AccordionTriggerProps extends HTMLButtonAttributes {
+    class?: string;
+    children?: Snippet;
+}
+declare const AccordionTrigger: import("svelte").Component<AccordionTriggerProps, {}, "">;
+type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
+export default AccordionTrigger;

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,11 @@
+export type { AccordionRootProps } from './AccordionRoot.svelte';
+export type { AccordionItemProps } from './AccordionItem.svelte';
+export type { AccordionTriggerProps } from './AccordionTrigger.svelte';
+export type { AccordionContentProps } from './AccordionContent.svelte';
+declare const Accordion: import("svelte").Component<import("./AccordionRoot.svelte").AccordionRootProps, {}, "value"> & {
+    Root: import("svelte").Component<import("./AccordionRoot.svelte").AccordionRootProps, {}, "value">;
+    Item: import("svelte").Component<import("./AccordionItem.svelte").AccordionItemProps, {}, "">;
+    Trigger: import("svelte").Component<import("./AccordionTrigger.svelte").AccordionTriggerProps, {}, "">;
+    Content: import("svelte").Component<import("./AccordionContent.svelte").AccordionContentProps, {}, "">;
+};
+export { Accordion };

package/dist/components/Accordion/index.js

@@ -0,0 +1,6 @@
+import Root from './AccordionRoot.svelte';
+import Item from './AccordionItem.svelte';
+import Trigger from './AccordionTrigger.svelte';
+import Content from './AccordionContent.svelte';
+const Accordion = Object.assign(Root, { Root, Item, Trigger, Content });
+export { Accordion };

package/dist/components/AlertDialog/AlertDialogAction.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { AlertDialog as BitsAlertDialog } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface AlertDialogActionProps {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: AlertDialogActionProps = $props();
+</script>
+
+<BitsAlertDialog.Action class={cn('btn btn-danger', className)} {...restProps}>
+  {@render children()}
+</BitsAlertDialog.Action>

package/dist/components/AlertDialog/AlertDialogAction.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface AlertDialogActionProps {
+    class?: string;
+    children?: Snippet;
+}
+declare const AlertDialogAction: import("svelte").Component<AlertDialogActionProps, {}, "">;
+type AlertDialogAction = ReturnType<typeof AlertDialogAction>;
+export default AlertDialogAction;

package/dist/components/AlertDialog/AlertDialogCancel.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { AlertDialog as BitsAlertDialog } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface AlertDialogCancelProps {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: AlertDialogCancelProps = $props();
+</script>
+
+<BitsAlertDialog.Cancel class={cn('btn', className)} {...restProps}>
+  {@render children()}
+</BitsAlertDialog.Cancel>

package/dist/components/AlertDialog/AlertDialogCancel.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface AlertDialogCancelProps {
+    class?: string;
+    children?: Snippet;
+}
+declare const AlertDialogCancel: import("svelte").Component<AlertDialogCancelProps, {}, "">;
+type AlertDialogCancel = ReturnType<typeof AlertDialogCancel>;
+export default AlertDialogCancel;

package/dist/components/AlertDialog/AlertDialogContent.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { AlertDialog as BitsAlertDialog } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface AlertDialogContentProps {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: AlertDialogContentProps = $props();
+</script>
+
+<BitsAlertDialog.Overlay />
+<BitsAlertDialog.Content class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsAlertDialog.Content>

package/dist/components/AlertDialog/AlertDialogContent.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface AlertDialogContentProps {
+    class?: string;
+    children?: Snippet;
+}
+declare const AlertDialogContent: import("svelte").Component<AlertDialogContentProps, {}, "">;
+type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
+export default AlertDialogContent;

package/dist/components/AlertDialog/AlertDialogDescription.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { AlertDialog as BitsAlertDialog } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface AlertDialogDescriptionProps {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: AlertDialogDescriptionProps = $props();
+</script>
+
+<BitsAlertDialog.Description class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsAlertDialog.Description>

package/dist/components/AlertDialog/AlertDialogDescription.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface AlertDialogDescriptionProps {
+    class?: string;
+    children?: Snippet;
+}
+declare const AlertDialogDescription: import("svelte").Component<AlertDialogDescriptionProps, {}, "">;
+type AlertDialogDescription = ReturnType<typeof AlertDialogDescription>;
+export default AlertDialogDescription;

package/dist/components/AlertDialog/AlertDialogRoot.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { AlertDialog as BitsAlertDialog } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  export interface AlertDialogRootProps {
+    open?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    children,
+    ...restProps
+  }: AlertDialogRootProps = $props();
+</script>
+
+<BitsAlertDialog.Root bind:open {...restProps}>
+  {@render children()}
+</BitsAlertDialog.Root>

package/dist/components/AlertDialog/AlertDialogRoot.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface AlertDialogRootProps {
+    open?: boolean;
+    children?: Snippet;
+}
+declare const AlertDialogRoot: import("svelte").Component<AlertDialogRootProps, {}, "open">;
+type AlertDialogRoot = ReturnType<typeof AlertDialogRoot>;
+export default AlertDialogRoot;

package/dist/components/AlertDialog/AlertDialogTitle.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { AlertDialog as BitsAlertDialog } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface AlertDialogTitleProps {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: AlertDialogTitleProps = $props();
+</script>
+
+<BitsAlertDialog.Title class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsAlertDialog.Title>

package/dist/components/AlertDialog/AlertDialogTitle.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface AlertDialogTitleProps {
+    class?: string;
+    children?: Snippet;
+}
+declare const AlertDialogTitle: import("svelte").Component<AlertDialogTitleProps, {}, "">;
+type AlertDialogTitle = ReturnType<typeof AlertDialogTitle>;
+export default AlertDialogTitle;

package/dist/components/AlertDialog/AlertDialogTrigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { AlertDialog as BitsAlertDialog } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface AlertDialogTriggerProps {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: AlertDialogTriggerProps = $props();
+</script>
+
+<BitsAlertDialog.Trigger class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsAlertDialog.Trigger>

package/dist/components/AlertDialog/AlertDialogTrigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface AlertDialogTriggerProps {
+    class?: string;
+    children?: Snippet;
+}
+declare const AlertDialogTrigger: import("svelte").Component<AlertDialogTriggerProps, {}, "">;
+type AlertDialogTrigger = ReturnType<typeof AlertDialogTrigger>;
+export default AlertDialogTrigger;

package/dist/components/AlertDialog/index.d.ts

@@ -0,0 +1,17 @@
+export type { AlertDialogRootProps } from './AlertDialogRoot.svelte';
+export type { AlertDialogTriggerProps } from './AlertDialogTrigger.svelte';
+export type { AlertDialogContentProps } from './AlertDialogContent.svelte';
+export type { AlertDialogTitleProps } from './AlertDialogTitle.svelte';
+export type { AlertDialogDescriptionProps } from './AlertDialogDescription.svelte';
+export type { AlertDialogActionProps } from './AlertDialogAction.svelte';
+export type { AlertDialogCancelProps } from './AlertDialogCancel.svelte';
+declare const AlertDialog: import("svelte").Component<import("./AlertDialogRoot.svelte").AlertDialogRootProps, {}, "open"> & {
+    Root: import("svelte").Component<import("./AlertDialogRoot.svelte").AlertDialogRootProps, {}, "open">;
+    Trigger: import("svelte").Component<import("./AlertDialogTrigger.svelte").AlertDialogTriggerProps, {}, "">;
+    Content: import("svelte").Component<import("./AlertDialogContent.svelte").AlertDialogContentProps, {}, "">;
+    Title: import("svelte").Component<import("./AlertDialogTitle.svelte").AlertDialogTitleProps, {}, "">;
+    Description: import("svelte").Component<import("./AlertDialogDescription.svelte").AlertDialogDescriptionProps, {}, "">;
+    Action: import("svelte").Component<import("./AlertDialogAction.svelte").AlertDialogActionProps, {}, "">;
+    Cancel: import("svelte").Component<import("./AlertDialogCancel.svelte").AlertDialogCancelProps, {}, "">;
+};
+export { AlertDialog };

package/dist/components/AlertDialog/index.js

@@ -0,0 +1,9 @@
+import Root from './AlertDialogRoot.svelte';
+import Trigger from './AlertDialogTrigger.svelte';
+import Content from './AlertDialogContent.svelte';
+import Title from './AlertDialogTitle.svelte';
+import Description from './AlertDialogDescription.svelte';
+import Action from './AlertDialogAction.svelte';
+import Cancel from './AlertDialogCancel.svelte';
+const AlertDialog = Object.assign(Root, { Root, Trigger, Content, Title, Description, Action, Cancel });
+export { AlertDialog };

package/dist/components/ApplyBanner/ApplyBanner.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+  import Button from '../Button/Button.svelte';
+
+  export interface ApplyBannerProps extends HTMLAttributes<HTMLDivElement> {
+    count: number;
+    onApply: () => void;
+    class?: string;
+  }
+
+  let { count, onApply, class: className, ...restProps }: ApplyBannerProps = $props();
+</script>
+
+<div class={cn('apply', className)} {...restProps}>
+  <span class="apply-text">{count} pending changes</span>
+  <Button variant="primary" size="sm" onclick={onApply}>apply</Button>
+</div>

package/dist/components/ApplyBanner/ApplyBanner.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ApplyBannerProps extends HTMLAttributes<HTMLDivElement> {
+    count: number;
+    onApply: () => void;
+    class?: string;
+}
+declare const ApplyBanner: import("svelte").Component<ApplyBannerProps, {}, "">;
+type ApplyBanner = ReturnType<typeof ApplyBanner>;
+export default ApplyBanner;

package/dist/components/ApplyBanner/index.d.ts

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

package/dist/components/ApplyBanner/index.js

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

package/dist/components/AspectRatio/AspectRatio.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { AspectRatio as BitsAspectRatio } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    ratio?: number;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    ratio = 16 / 9,
+    children,
+    class: className,
+    ...restProps
+  }: AspectRatioProps = $props();
+</script>
+
+<BitsAspectRatio.Root
+  {ratio}
+  class={cn(className)}
+  {...restProps}
+>
+  {@render children()}
+</BitsAspectRatio.Root>

package/dist/components/AspectRatio/AspectRatio.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    ratio?: number;
+    children?: Snippet;
+    class?: string;
+}
+declare const AspectRatio: import("svelte").Component<AspectRatioProps, {}, "">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;

package/dist/components/AspectRatio/index.d.ts

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

package/dist/components/AspectRatio/index.js

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

package/dist/components/Avatar/Avatar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Avatar as BitsAvatar } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: number;
+    class?: string;
+  }
+
+  let {
+    src,
+    alt = '',
+    fallback = '?',
+    size = 32,
+    class: className,
+    ...restProps
+  }: AvatarProps = $props();
+</script>
+
+<BitsAvatar.Root
+  class={cn(className)}
+  style="width:{size}px;height:{size}px"
+  {...restProps}
+>
+  <BitsAvatar.Image {src} {alt} />
+  <BitsAvatar.Fallback>{fallback}</BitsAvatar.Fallback>
+</BitsAvatar.Root>

package/dist/components/Avatar/Avatar.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: number;
+    class?: string;
+}
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/Avatar/index.d.ts

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

package/dist/components/Avatar/index.js

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