sve-ui 0.1.2 → 0.2.1

package/README.md

@@ -1,94 +1,126 @@
-# Sve-UI
-## _Best UI components library for Svelte_
+<div align="center">
 
-Sve-UI is a UI component library for Svelte that provides the best collection of components for building modern web applications and fast.
+# Sve·UI
 
-<br />
+**Styled, accessible Svelte 5 components — zero config.**
 
----
+[![npm](https://img.shields.io/npm/v/sve-ui?color=F56565)](https://www.npmjs.com/package/sve-ui)
+[![license](https://img.shields.io/npm/l/sve-ui?color=F56565)](https://github.com/rodriabregu/sve-ui/blob/main/LICENSE)
+[![Svelte 5](https://img.shields.io/badge/Svelte-5-FF3E00)](https://svelte.dev)
 
-<br />
+</div>
 
-## Features
+A library of ready-made, fully **styled** and fully **accessible** Svelte 5
+components, built on [Bits UI](https://bits-ui.com). The wedge: it needs **no
+Tailwind and no config** in your project. Install, import the stylesheet once,
+and use — then theme everything with CSS custom properties.
 
-- Responsive components that work seamlessly across all devices and screen sizes
-- Easy to use and highly customizable components
-- Well-documented API and usage examples
-- Regularly updated with new components and features
+```sh
+pnpm add sve-ui
+```
 
-<br />
+## Why Sve·UI
 
----
+- **No Tailwind, no config** — styles ship with the package. No `tailwind.config`,
+  no PostCSS, no utility classes in your app.
+- **Accessible by default** — overlays are built on Bits UI: WAI-ARIA, focus traps,
+  keyboard navigation.
+- **Themeable** — every color, radius and spacing value is a `--sve-*` CSS variable.
+  Light and dark out of the box.
+- **Svelte 5 + runes** — modern, typed, tree-shakeable, ships with provenance.
 
-<br />
+## Quick start
 
-## Installation
+Import the stylesheet once (e.g. in your root layout), then use the components:
 
-> You can install Sve-UI using pnpm, npm or yarn.
+```svelte
+<script>
+	import 'sve-ui/theme.css';
+	import { Button } from 'sve-ui';
+</script>
 
-```sh
-pnpm add sve-ui
-npm install sve-ui
-yarn add sve-ui
+<Button color="primary">Ship it</Button>
 ```
 
-To use:
+Wrap your app in `ThemeProvider` to control light/dark (optional — components work
+without it):
 
-```sh
+```svelte
 <script>
-  import { Button } from 'sve-ui';
-
-  function handleClick() {
-    alert('Button clicked!');
-  }
+	import { ThemeProvider, Button, Dialog } from 'sve-ui';
 </script>
 
-<Button onClick={handleClick}>Click me!</Button>
+<ThemeProvider colorScheme="dark">
+	<Dialog.Root>
+		<Dialog.Trigger>
+			{#snippet child({ props })}
+				<Button {...props}>Open dialog</Button>
+			{/snippet}
+		</Dialog.Trigger>
+		<Dialog.Overlay />
+		<Dialog.Content>
+			<Dialog.Title>Delete project?</Dialog.Title>
+			<Dialog.Description>This action can't be undone.</Dialog.Description>
+		</Dialog.Content>
+	</Dialog.Root>
+</ThemeProvider>
 ```
 
----
+## Components
 
-<br />
+**Display & form** — `Button`, `Input`, `Card`, `Badge`, `Avatar`, `Spinner`,
+`Text`, `Heading`, `Alert`.
 
-## Showcase & docs
+**Overlays** (on Bits UI) — `Dialog`, `DropdownMenu`, `Tooltip`, `Popover`.
 
-<br />
+Most components take `variant`, `color` and `size` props, e.g.:
 
+```svelte
+<Button variant="solid" color="primary">Primary</Button>
+<Button variant="outline" color="danger">Danger</Button>
+<Badge variant="subtle" color="success">Active</Badge>
+<Input variant="outline" size="md" placeholder="you@example.com" bind:value />
+```
 
-| Showcase | Link |
-| ------ | ------ |
-| Docs | [/docs][docs] |
-| Github page | [/sve-ui][Gp] |
-| GitHub issues | [/sve-ui/issues][Gpi] |
-| Github PR | [/sve-ui/pulls][Gppr] |
-| Npmjs | [/package/sve-ui][LSjs] |
+Overlays (`Dialog`, `DropdownMenu`, `Tooltip`, `Popover`, plus `Avatar`, `Card`,
+`Alert`) are **namespaced** compositions — import the namespace and compose its
+parts (`Dialog.Root`, `Dialog.Trigger`, `Dialog.Content`, …).
 
-<br />
+## Theming
 
----
+All design tokens are CSS custom properties under `:root`, established by
+`sve-ui/theme.css`. Override any of them to retheme — no rebuild, no config:
 
-<br />
+```css
+:root {
+	--sve-color-primary: #8b5cf6;
+	--sve-radius-md: 0.5rem;
+}
+```
 
-## List of components
+Semantic color roles (`primary`, `secondary`, `success`, `warning`, `danger`,
+`default`) each expose `…-foreground`, `…-surface`, `…-border`, `…-hover` and
+`…-active` variants. Light and dark are both included; `ThemeProvider` toggles
+the scheme via a `colorScheme` prop (`"light" | "dark" | "system"`) and can apply
+per-subtree token overrides via its `theme` prop.
 
-- Box, Center, Spacer, Flex, Grid, GridItem
-- Button, Text
-- CodeExample
-- Square, Circle
+## Package exports
 
-<br />
+| Import             | What                                                               |
+| ------------------ | ------------------------------------------------------------------ |
+| `sve-ui`           | All components, `ThemeProvider`, variant helpers and types         |
+| `sve-ui/theme`     | Token maps and theming utilities (`lightTokens`, `themeToVars`, …) |
+| `sve-ui/theme.css` | The stylesheet that registers all `--sve-*` variables              |
 
----
+## Requirements
 
-<br />
+- Svelte `^5` (peer dependency)
 
-## License
+## Links
 
-MIT
+- Docs: [sveui.org](https://sveui.org)
+- Source: [github.com/rodriabregu/sve-ui](https://github.com/rodriabregu/sve-ui)
 
+## License
 
-[Gp]: <https://github.com/rodriabregu/sve-ui>
-[Gpi]: <https://github.com/rodriabregu/sve-ui/issues>
-[Gppr]: <https://github.com/rodriabregu/sve-ui/pulls>
-[LSjs]: <https://www.npmjs.com/package/sve-ui>
-[docs]: <https://sveui.org/>
+[MIT](https://github.com/rodriabregu/sve-ui/blob/main/LICENSE) © Rodrigo Abregu

package/dist/ThemeProvider.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { setThemeContext } from './context';
+  import { themeToVars, type PartialSveTheme } from './theme/tokens';
+
+  interface Props {
+    colorScheme?: 'light' | 'dark' | 'system';
+    theme?: PartialSveTheme;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    colorScheme = 'system',
+    theme,
+    class: cls,
+    children,
+  }: Props = $props();
+
+  // TODO(phase-2): headSnippet for persisted scheme — inject a <script> into <head>
+  // that reads localStorage/cookie before first paint to avoid FOUC when the user's
+  // preferred scheme differs from the server-rendered default.
+
+  /**
+   * Inline CSS vars — only rendered when a theme override prop is provided.
+   * SSR-safe: Svelte emits the style attribute on the server too.
+   */
+  const styleVars = $derived(theme ? themeToVars(theme) : undefined);
+
+  // Expose color scheme to descendant components via Svelte context.
+  setThemeContext({
+    get colorScheme() {
+      return colorScheme;
+    },
+  });
+</script>
+
+<div
+  class={`sve-theme${cls ? ` ${cls}` : ''}`}
+  data-scheme={colorScheme}
+  class:dark={colorScheme === 'dark'}
+  class:light={colorScheme === 'light'}
+  style={styleVars}
+>
+  {@render children?.()}
+</div>

package/dist/ThemeProvider.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import { type PartialSveTheme } from './theme/tokens';
+interface Props {
+    colorScheme?: 'light' | 'dark' | 'system';
+    theme?: PartialSveTheme;
+    class?: string;
+    children?: Snippet;
+}
+declare const ThemeProvider: import("svelte").Component<Props, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.svelte.d.ts.map

package/dist/ThemeProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGjE,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC1C,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsCH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/Alert/AlertDescription.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: cls,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const className = $derived(
+    ['sve-alert__description', cls].filter(Boolean).join(' ')
+  );
+</script>
+
+<div class={className} {...rest}>
+  {@render children?.()}
+</div>
+
+<style>
+  .sve-alert__description {
+    font-size: var(--sve-font-size-sm);
+    line-height: var(--sve-line-height-normal);
+    opacity: 0.85;
+  }
+</style>

package/dist/components/Alert/AlertDescription.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    class?: string;
+    children?: Snippet;
+}
+declare const AlertDescription: import("svelte").Component<Props, {}, "">;
+type AlertDescription = ReturnType<typeof AlertDescription>;
+export default AlertDescription;
+//# sourceMappingURL=AlertDescription.svelte.d.ts.map

package/dist/components/Alert/AlertDescription.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDescription.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/AlertDescription.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyBH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/Alert/AlertRoot.svelte

@@ -0,0 +1,103 @@
+<script module lang="ts">
+  import { defineVariants } from '../../internal/variants';
+
+  type Color   = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+  type Variant = 'subtle' | 'solid' | 'outline';
+
+  export const alertVariants = defineVariants({
+    base: 'sve-alert',
+    variants: {
+      variant: {
+        subtle:  'sve-alert--subtle',
+        solid:   'sve-alert--solid',
+        outline: 'sve-alert--outline',
+      },
+      color: {
+        default:  'sve-c-default',
+        primary:  'sve-c-primary',
+        success:  'sve-c-success',
+        warning:  'sve-c-warning',
+        danger:   'sve-c-danger',
+      },
+    },
+    defaultVariants: {
+      variant: 'subtle',
+      color:   'default',
+    },
+  });
+
+  export type { Color, Variant };
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'role'> {
+    color?: Color;
+    variant?: Variant;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    color,
+    variant,
+    class: cls,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const className = $derived(
+    alertVariants({ color, variant, class: cls })
+  );
+
+  const role = $derived(
+    color === 'danger' || color === 'warning' ? 'alert' : 'status'
+  );
+</script>
+
+<!--
+  Live-region behavior: role="alert" and role="status" only trigger
+  screen-reader announcement when the element is *dynamically inserted*
+  into the DOM after initial page load. Alerts present on SSR / initial
+  render are NOT announced automatically — this is a browser limitation.
+  If you need an alert to be announced on first render, use aria-live
+  and insert the element after a short delay in the client.
+-->
+<div class={className} {role} {...rest}>
+  {@render children?.()}
+</div>
+
+<style>
+  .sve-alert {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sve-space-1);
+    padding: var(--sve-space-4);
+    border-radius: var(--sve-radius-md);
+    border: 1px solid transparent;
+    font-family: var(--sve-font-family-sans);
+  }
+
+  /* --- Subtle variant --- */
+  .sve-alert--subtle.sve-c-default  { background-color: var(--sve-color-default-surface);   color: var(--sve-color-default-foreground); border-color: transparent; }
+  .sve-alert--subtle.sve-c-primary  { background-color: var(--sve-color-primary-surface);   color: var(--sve-color-primary);           border-color: transparent; }
+  .sve-alert--subtle.sve-c-success  { background-color: var(--sve-color-success-surface);   color: var(--sve-color-success);           border-color: transparent; }
+  .sve-alert--subtle.sve-c-warning  { background-color: var(--sve-color-warning-surface);   color: var(--sve-color-warning-foreground); border-color: transparent; }
+  .sve-alert--subtle.sve-c-danger   { background-color: var(--sve-color-danger-surface);    color: var(--sve-color-danger);            border-color: transparent; }
+
+  /* --- Solid variant --- */
+  .sve-alert--solid.sve-c-default  { background-color: var(--sve-color-default);   color: var(--sve-color-default-foreground); border-color: var(--sve-color-default); }
+  .sve-alert--solid.sve-c-primary  { background-color: var(--sve-color-primary);   color: var(--sve-color-primary-foreground); border-color: var(--sve-color-primary); }
+  .sve-alert--solid.sve-c-success  { background-color: var(--sve-color-success);   color: var(--sve-color-success-foreground); border-color: var(--sve-color-success); }
+  .sve-alert--solid.sve-c-warning  { background-color: var(--sve-color-warning);   color: var(--sve-color-warning-foreground); border-color: var(--sve-color-warning); }
+  .sve-alert--solid.sve-c-danger   { background-color: var(--sve-color-danger);    color: var(--sve-color-danger-foreground);  border-color: var(--sve-color-danger); }
+
+  /* --- Outline variant --- */
+  .sve-alert--outline.sve-c-default  { background-color: transparent; color: var(--sve-color-default-foreground); border-color: var(--sve-color-default-border); }
+  .sve-alert--outline.sve-c-primary  { background-color: transparent; color: var(--sve-color-primary);           border-color: var(--sve-color-primary-border); }
+  .sve-alert--outline.sve-c-success  { background-color: transparent; color: var(--sve-color-success);           border-color: var(--sve-color-success-border); }
+  .sve-alert--outline.sve-c-warning  { background-color: transparent; color: var(--sve-color-warning-foreground); border-color: var(--sve-color-warning-border); }
+  .sve-alert--outline.sve-c-danger   { background-color: transparent; color: var(--sve-color-danger);            border-color: var(--sve-color-danger-border); }
+</style>

package/dist/components/Alert/AlertRoot.svelte.d.ts

@@ -0,0 +1,29 @@
+type Color = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+type Variant = 'subtle' | 'solid' | 'outline';
+export declare const alertVariants: (props?: import("../../internal/variants").VariantProps<{
+    variant: {
+        subtle: string;
+        solid: string;
+        outline: string;
+    };
+    color: {
+        default: string;
+        primary: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+}> | undefined) => string;
+export type { Color, Variant };
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'role'> {
+    color?: Color;
+    variant?: Variant;
+    class?: string;
+    children?: Snippet;
+}
+declare const AlertRoot: import("svelte").Component<Props, {}, "">;
+type AlertRoot = ReturnType<typeof AlertRoot>;
+export default AlertRoot;
+//# sourceMappingURL=AlertRoot.svelte.d.ts.map

package/dist/components/Alert/AlertRoot.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertRoot.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/AlertRoot.svelte.ts"],"names":[],"mappings":"AAKE,KAAK,KAAK,GAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACxE,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9C,eAAO,MAAM,aAAa;;;;;;;;;;;;;yBAoBxB,CAAC;AAEH,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AAGjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5E,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkCH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/Alert/AlertTitle.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+    /** Element to render. Defaults to a semantic `<p>` (not a bare `<div>`). */
+    as?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    as = 'p',
+    class: cls,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const className = $derived(
+    ['sve-alert__title', cls].filter(Boolean).join(' ')
+  );
+</script>
+
+<svelte:element this={as} class={className} {...rest}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .sve-alert__title {
+    font-weight: var(--sve-font-weight-medium);
+    font-size: var(--sve-font-size-md);
+    line-height: var(--sve-line-height-tight);
+  }
+</style>

package/dist/components/Alert/AlertTitle.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+    /** Element to render. Defaults to a semantic `<p>` (not a bare `<div>`). */
+    as?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const AlertTitle: import("svelte").Component<Props, {}, "">;
+type AlertTitle = ReturnType<typeof AlertTitle>;
+export default AlertTitle;
+//# sourceMappingURL=AlertTitle.svelte.d.ts.map

package/dist/components/Alert/AlertTitle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertTitle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/AlertTitle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAChE,4EAA4E;IAC5E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0BH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,11 @@
+/**
+ * Alert namespace — feedback component with color and variant support.
+ *
+ * Root: alert surface with role, color, and variant props.
+ * Title: styled title for the alert.
+ * Description: styled description/body for the alert.
+ */
+export { default as Root } from './AlertRoot.svelte';
+export { default as Title } from './AlertTitle.svelte';
+export { default as Description } from './AlertDescription.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/Alert/index.js

@@ -0,0 +1,10 @@
+/**
+ * Alert namespace — feedback component with color and variant support.
+ *
+ * Root: alert surface with role, color, and variant props.
+ * Title: styled title for the alert.
+ * Description: styled description/body for the alert.
+ */
+export { default as Root } from './AlertRoot.svelte';
+export { default as Title } from './AlertTitle.svelte';
+export { default as Description } from './AlertDescription.svelte';

package/dist/components/Avatar/AvatarFallback.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Avatar } from 'bits-ui';
+  import type { ComponentProps } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  type BitsFallbackProps = ComponentProps<typeof Avatar.Fallback>;
+
+  interface Props extends Omit<BitsFallbackProps, 'class'> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: cls, children, ...rest }: Props = $props();
+</script>
+
+<Avatar.Fallback
+  class={['sve-avatar__fallback', cls].filter(Boolean).join(' ')}
+  {children}
+  {...rest}
+/>
+
+<style>
+  :global(.sve-avatar__fallback) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-family: var(--sve-font-family-sans);
+    font-weight: var(--sve-font-weight-medium);
+    user-select: none;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import { Avatar } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+import type { Snippet } from 'svelte';
+type BitsFallbackProps = ComponentProps<typeof Avatar.Fallback>;
+interface Props extends Omit<BitsFallbackProps, 'class'> {
+    class?: string;
+    children?: Snippet;
+}
+declare const AvatarFallback: import("svelte").Component<Props, {}, "">;
+type AvatarFallback = ReturnType<typeof AvatarFallback>;
+export default AvatarFallback;
+//# sourceMappingURL=AvatarFallback.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarFallback.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Avatar/AvatarFallback.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC;AAEhE,UAAU,KAAM,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/Avatar/AvatarImage.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Avatar } from 'bits-ui';
+  import type { ComponentProps } from 'svelte';
+
+  type BitsImageProps = ComponentProps<typeof Avatar.Image>;
+
+  interface Props extends Omit<BitsImageProps, 'class' | 'alt'> {
+    /** Required: describes the image for screen readers. Always provide meaningful alt text. */
+    alt: string;
+    class?: string;
+  }
+
+  let { class: cls, ...rest }: Props = $props();
+</script>
+
+<Avatar.Image
+  class={['sve-avatar__image', cls].filter(Boolean).join(' ')}
+  {...rest}
+/>
+
+<style>
+  :global(.sve-avatar__image) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import { Avatar } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+type BitsImageProps = ComponentProps<typeof Avatar.Image>;
+interface Props extends Omit<BitsImageProps, 'class' | 'alt'> {
+    /** Required: describes the image for screen readers. Always provide meaningful alt text. */
+    alt: string;
+    class?: string;
+}
+declare const AvatarImage: import("svelte").Component<Props, {}, "">;
+type AvatarImage = ReturnType<typeof AvatarImage>;
+export default AvatarImage;
+//# sourceMappingURL=AvatarImage.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarImage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Avatar/AvatarImage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AAE1D,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,KAAK,CAAC;IAC3D,4FAA4F;IAC5F,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}