@noxlovette/material 0.3.2 → 0.4.0

package/dist/components/forms/tooltip/Tooltip.stories.svelte

@@ -0,0 +1,90 @@
+<!--
+  Tooltip only renders its content while open, and opening normally requires a real hover/focus
+  interaction on the trigger. Each story below passes `isOpen={true}` so the tooltip renders open
+  by default for visual review, without needing to hover in Storybook.
+-->
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Tooltip from './Tooltip.svelte';
+  import Button from '../../buttons/Button.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Forms/Tooltip',
+    component: Tooltip
+  });
+</script>
+
+<Story name="Snack (Default)" asChild>
+  <div class="p-24">
+    <Tooltip supportingText="Add to library" isOpen={true}>
+      {#snippet trigger(props)}
+        <Button {...props} variant="filled" iconProps={{ name: 'add' }}>Add</Button>
+      {/snippet}
+    </Tooltip>
+  </div>
+</Story>
+
+<Story name="Rich" asChild>
+  <div class="p-24">
+    <Tooltip
+      variant="rich"
+      style="container"
+      subhead="Accessibility settings"
+      supportingText="Adjust text size, contrast, and motion preferences."
+      isOpen={true}
+    >
+      {#snippet trigger(props)}
+        <Button {...props} variant="outlined">Settings</Button>
+      {/snippet}
+    </Tooltip>
+  </div>
+</Story>
+
+<Story name="Rich — All Styles" asChild>
+  <div class="flex flex-wrap gap-24 p-24">
+    <Tooltip
+      variant="rich"
+      style="container"
+      subhead="Container"
+      supportingText="bg-surface-container"
+      isOpen={true}
+    >
+      {#snippet trigger(props)}
+        <Button {...props} variant="outlined">Container</Button>
+      {/snippet}
+    </Tooltip>
+    <Tooltip
+      variant="rich"
+      style="primary"
+      subhead="Primary"
+      supportingText="bg-primary-container"
+      isOpen={true}
+    >
+      {#snippet trigger(props)}
+        <Button {...props} variant="outlined">Primary</Button>
+      {/snippet}
+    </Tooltip>
+    <Tooltip
+      variant="rich"
+      style="secondary"
+      subhead="Secondary"
+      supportingText="bg-secondary-container"
+      isOpen={true}
+    >
+      {#snippet trigger(props)}
+        <Button {...props} variant="outlined">Secondary</Button>
+      {/snippet}
+    </Tooltip>
+    <Tooltip
+      variant="rich"
+      style="tertiary"
+      subhead="Tertiary"
+      supportingText="bg-tertiary-container"
+      isOpen={true}
+    >
+      {#snippet trigger(props)}
+        <Button {...props} variant="outlined">Tertiary</Button>
+      {/snippet}
+    </Tooltip>
+  </div>
+</Story>

package/dist/components/forms/tooltip/Tooltip.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Tooltip from './Tooltip.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tooltip = InstanceType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/forms/tooltip/Tooltip.svelte

@@ -21,7 +21,7 @@ Plain tooltips are used for simple labels, while rich tooltips can contain forma
     children,
     trigger,
     triggerClass,
-    delayDuration = 100,
+    delayDuration = 150,
     class: className,
     variant = 'snack',
     style = 'container',
@@ -36,10 +36,11 @@ Plain tooltips are used for simple labels, while rich tooltips can contain forma
     subhead: subheadCls,
     base,
     trigger: triggerCls,
-    supportingText: supportingTextCls
+    supportingText: supportingTextCls,
+    textContainer: textContainerCls
   } = $derived(tooltip({ variant, style }));
 
-  const baseCls = $derived(base({ class: clsx(className) }));
+  const baseCls = $derived(base({ class: clsx(className, textContainerCls()) }));
 
   /**
    * ButtonIcons always have tooltips on, but not always with text
@@ -86,7 +87,7 @@ Plain tooltips are used for simple labels, while rich tooltips can contain forma
                 {#if variant === 'rich'}
                   <Layer />
                   {#if subhead}
-                    <Title class={subheadCls()}>
+                    <Title size="small" class={subheadCls()}>
                       {subhead}
                     </Title>
                   {/if}

package/dist/components/forms/tooltip/theme.d.ts

@@ -33,6 +33,7 @@ export declare const tooltip: import("tailwind-variants").TVReturnType<{
     base: string;
     subhead: string;
     supportingText: string;
+    textContainer: string;
     trigger: string;
 }, undefined, {
     variant: {
@@ -67,8 +68,9 @@ export declare const tooltip: import("tailwind-variants").TVReturnType<{
     base: string;
     subhead: string;
     supportingText: string;
+    textContainer: string;
     trigger: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         rich: {
             base: string;
@@ -101,5 +103,6 @@ export declare const tooltip: import("tailwind-variants").TVReturnType<{
     base: string;
     subhead: string;
     supportingText: string;
+    textContainer: string;
     trigger: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/forms/tooltip/theme.js

@@ -4,6 +4,7 @@ export const tooltip = tv({
         base: 'min-w-60 py-3 px-4  shadow-elevation-2 rounded-md relative z-[100] pointer-events-auto',
         subhead: '',
         supportingText: '',
+        textContainer: '',
         trigger: 'relative inline-flex'
     },
     variants: {
@@ -12,7 +13,7 @@ export const tooltip = tv({
                 base: 'flex flex-col gap-3'
             },
             snack: {
-                base: 'inlie-flex min-w-0 max-w-50 bg-md-sys-color-inverse-surface text-md-sys-color-inverse-on-surface md-sys-typescale-body-small px-3 py-2 shadow-elevation-3 before:rounded-md',
+                base: 'inline-flex min-w-0 max-w-50 bg-md-sys-color-inverse-surface text-md-sys-color-inverse-on-surface md-sys-typescale-body-small px-3 py-2 shadow-elevation-3 before:rounded-md',
                 supportingText: 'text-md-sys-color-inverse-on-surface md-sys-typescale-body-small',
                 textContainer: ''
             }
@@ -20,19 +21,19 @@ export const tooltip = tv({
         style: {
             container: {
                 base: 'bg-md-sys-color-surface-container',
-                textContainer: 'text-md-sys-on-surface-variant'
+                textContainer: 'text-md-sys-color-on-surface-variant'
             },
             primary: {
                 base: 'bg-md-sys-color-primary-container',
-                textContainer: 'text-md-sys-on-primary-container'
+                textContainer: 'text-md-sys-color-on-primary-container'
             },
             secondary: {
                 base: 'bg-md-sys-color-secondary-container',
-                textContainer: 'text-md-sys-on-secondary-container'
+                textContainer: 'text-md-sys-color-on-secondary-container'
             },
             tertiary: {
                 base: 'bg-md-sys-color-tertiary-container',
-                textContainer: 'text-md-sys-on-tertiary-container'
+                textContainer: 'text-md-sys-color-on-tertiary-container'
             }
         }
     },

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './badge/index.js';
 export * from './buttons/index.js';
 export * from './cards/index.js';
+export * from './chips/index.js';
 export * from './containers/index.js';
 export * from './date/index.js';
 export * from './forms/index.js';

package/dist/components/index.js

@@ -3,6 +3,7 @@
 export * from './badge/index.js';
 export * from './buttons/index.js';
 export * from './cards/index.js';
+export * from './chips/index.js';
 export * from './containers/index.js';
 export * from './date/index.js';
 export * from './forms/index.js';

package/dist/components/misc/Avatar.stories.svelte

@@ -0,0 +1,63 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Avatar from './Avatar.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Misc/Avatar',
+    component: Avatar,
+    argTypes: {
+      size: { control: 'select', options: ['sm', 'md', 'lg'] },
+      seed: { control: 'text' },
+      dicebearStyle: { control: 'text' }
+    },
+    args: {
+      size: 'lg',
+      seed: 'ogonek'
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <Avatar size={args.size} seed={args.seed} dicebearStyle={args.dicebearStyle} />
+  {/snippet}
+</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex items-end gap-4">
+    <Avatar size="sm" seed="small" />
+    <Avatar size="md" seed="medium" />
+    <Avatar size="lg" seed="large" />
+  </div>
+</Story>
+
+<Story name="Generated Fallback" asChild>
+  <div class="flex items-end gap-4">
+    <Avatar seed="alice" />
+    <Avatar seed="bob" />
+    <Avatar seed="carol" />
+  </div>
+</Story>
+
+<Story name="With Image" asChild>
+  <div class="flex items-end gap-4">
+    <Avatar src="https://picsum.photos/seed/ogonek-1/200" alt="Sample user" />
+    <Avatar
+      src="https://this-url-does-not-resolve.example/broken.jpg"
+      alt="Broken image"
+      seed="fallback"
+    />
+  </div>
+</Story>
+
+<Story name="Clickable" asChild>
+  <Avatar seed="clickable" onclick={() => console.log('Avatar clicked')} />
+</Story>
+
+<Story name="Animated" asChild>
+  <div class="flex items-end gap-4">
+    <Avatar seed="alice" dicebearStyle="gaze" tags={['animation']} />
+    <Avatar seed="bob" dicebearStyle="shapes" tags={['animation']} />
+    <Avatar seed="carol" dicebearStyle="blobs" tags={['animation']} />
+  </div>
+</Story>

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

@@ -0,0 +1,19 @@
+import Avatar from './Avatar.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Avatar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Avatar = InstanceType<typeof Avatar>;
+export default Avatar;

package/dist/components/misc/Avatar.svelte

@@ -8,6 +8,8 @@ Avatars can be used to represent people or objects.
   import { Avatar as AvatarPrimitive } from 'bits-ui';
   import { Layer } from '../../utils/index.js';
   import { avatar } from './theme.js';
+  import { DicebearAvatarBuilder } from './DicebearAvatarBuilder.js';
+  import { getMaterialAvatarPalette } from './materialAvatarPalette.js';
   import type { AvatarProps } from './types.js';
 
   let {
@@ -15,6 +17,8 @@ Avatars can be used to represent people or objects.
     alt = 'User avatar',
     seed = 'ogonek',
     dicebearStyle = 'shapes',
+    backgroundColor,
+    tags,
     size = 'lg',
     loadingStatus = $bindable('loading'),
     class: className,
@@ -22,23 +26,40 @@ Avatars can be used to represent people or objects.
     ...rest
   }: AvatarProps = $props();
 
-  const materialPalette = ['e8f0fe', 'e8f5e9', 'fff7e6', 'fde7ec', 'e3f2fd'];
   const sizeMap = {
+    xxs: 20,
+    xs: 32,
     sm: 48,
     md: 72,
     lg: 96
   } as const;
 
-  const generatedAvatar = $derived.by(() => {
+  let generatedAvatar = $state('');
+
+  $effect(() => {
     const sizePx = sizeMap[size ?? 'lg'] ?? 96;
-    const params = new URLSearchParams({
-      seed,
-      size: String(sizePx),
-      radius: '50',
-      backgroundColor: materialPalette.join(',')
+    const currentSeed = seed;
+    const currentStyle = dicebearStyle ?? 'shapes';
+    const palette = backgroundColor ?? getMaterialAvatarPalette();
+    const currentTags = tags;
+    let cancelled = false;
+
+    const builder = new DicebearAvatarBuilder(currentStyle)
+      .seed(currentSeed)
+      .size(sizePx)
+      .borderRadius(50)
+      .background(palette);
+
+    if (currentTags) builder.tags(currentTags);
+
+    builder.toDataUri().then((uri) => {
+      if (cancelled) return;
+      generatedAvatar = uri;
     });
 
-    return `https://api.dicebear.com/9.x/${dicebearStyle}/svg?${params.toString()}`;
+    return () => {
+      cancelled = true;
+    };
   });
 
   const { root, image, fallback, button } = $derived(avatar({ size }));
@@ -54,7 +75,9 @@ Avatars can be used to represent people or objects.
         <AvatarPrimitive.Image {src} {alt} class={image()} />
       {/if}
       <AvatarPrimitive.Fallback class={fallback()}>
-        <img src={generatedAvatar} {alt} class={image()} />
+        {#if generatedAvatar}
+          <img src={generatedAvatar} {alt} class={image()} />
+        {/if}
       </AvatarPrimitive.Fallback>
     </AvatarPrimitive.Root>
   </button>
@@ -64,7 +87,9 @@ Avatars can be used to represent people or objects.
       <AvatarPrimitive.Image {src} {alt} class={image()} />
     {/if}
     <AvatarPrimitive.Fallback class={fallback()}>
-      <img src={generatedAvatar} {alt} class={image()} />
+      {#if generatedAvatar}
+        <img src={generatedAvatar} {alt} class={image()} />
+      {/if}
     </AvatarPrimitive.Fallback>
   </AvatarPrimitive.Root>
 {/if}

package/dist/components/misc/DicebearAvatarBuilder.d.ts

@@ -0,0 +1,59 @@
+import { Avatar as DicebearAvatar } from '@dicebear/core';
+import type { DicebearStyleName } from './dicebearStyles.js';
+export type DicebearFlip = 'none' | 'horizontal' | 'vertical' | 'both';
+export type DicebearColorFill = 'solid' | 'linear' | 'radial';
+export type DicebearColorOrder = 'random' | 'fixed';
+/** The raw options bag passed to DiceBear's `Avatar` constructor. */
+export type DicebearAvatarOptions = Record<string, unknown>;
+/**
+ * Fluent builder around DiceBear's `Style` + `Avatar` SDK classes
+ * (https://www.dicebear.com/customize/options/). The style definition is only
+ * lazily imported once a terminal method (`build`/`toDataUri`/`toSvg`) is called.
+ *
+ * Covers the generic options every style accepts (seed, transform, background,
+ * typography) as named methods; use `.option()`/`.options()` for options specific
+ * to the chosen style's own components (e.g. `hairColor`, `eyesVariant`), which
+ * can't be named generically — see the selected style's `OptionsDescriptor`.
+ *
+ * @example
+ * ```ts
+ * const uri = await new DicebearAvatarBuilder('lorelei')
+ *   .seed('alice')
+ *   .size(96)
+ *   .background(['b6e3f4', 'c0aede'])
+ *   .option('hairColor', ['2c1b18'])
+ *   .toDataUri();
+ * ```
+ */
+export declare class DicebearAvatarBuilder {
+    #private;
+    constructor(styleName: DicebearStyleName);
+    seed(seed: string): this;
+    size(px: number): this;
+    idRandomization(enabled?: boolean): this;
+    title(text: string): this;
+    font(family: string | string[], weight?: number): this;
+    flip(value: DicebearFlip): this;
+    rotate(degrees: number): this;
+    scale(factor: number): this;
+    borderRadius(radius: number): this;
+    translate(x: number, y: number): this;
+    background(colors: string[], fill?: DicebearColorFill, order?: DicebearColorOrder): this;
+    backgroundGradient(stops: number, angle: number): this;
+    /**
+     * Filters which variant a style picks by tag — currently DiceBear's only tag is
+     * `'animation'`, which opts a supporting style (e.g. `gaze`, `shapes`, `blobs`) into its
+     * animated variants; prefix with `!` (e.g. `'!animation'`) to force the static variant
+     * instead. A no-op for styles that don't define the tag.
+     * @see https://www.dicebear.com/guides/filter-variants-with-tags
+     */
+    tags(tags: string[]): this;
+    /** Escape hatch for an option specific to the chosen style (e.g. `hairColor`, `eyesVariant`). */
+    option(key: string, value: unknown): this;
+    /** Merges an arbitrary options object in, e.g. one collected from user input. */
+    options(values: DicebearAvatarOptions): this;
+    /** Resolves the style definition and constructs the underlying `Avatar` instance. */
+    build(): Promise<DicebearAvatar>;
+    toDataUri(): Promise<string>;
+    toSvg(): Promise<string>;
+}

package/dist/components/misc/DicebearAvatarBuilder.js

@@ -0,0 +1,115 @@
+import { Avatar as DicebearAvatar } from '@dicebear/core';
+import { loadDicebearStyle } from './dicebearStyles.js';
+/**
+ * Fluent builder around DiceBear's `Style` + `Avatar` SDK classes
+ * (https://www.dicebear.com/customize/options/). The style definition is only
+ * lazily imported once a terminal method (`build`/`toDataUri`/`toSvg`) is called.
+ *
+ * Covers the generic options every style accepts (seed, transform, background,
+ * typography) as named methods; use `.option()`/`.options()` for options specific
+ * to the chosen style's own components (e.g. `hairColor`, `eyesVariant`), which
+ * can't be named generically — see the selected style's `OptionsDescriptor`.
+ *
+ * @example
+ * ```ts
+ * const uri = await new DicebearAvatarBuilder('lorelei')
+ *   .seed('alice')
+ *   .size(96)
+ *   .background(['b6e3f4', 'c0aede'])
+ *   .option('hairColor', ['2c1b18'])
+ *   .toDataUri();
+ * ```
+ */
+export class DicebearAvatarBuilder {
+    #styleName;
+    #options = {};
+    constructor(styleName) {
+        this.#styleName = styleName;
+    }
+    seed(seed) {
+        this.#options.seed = seed;
+        return this;
+    }
+    size(px) {
+        this.#options.size = px;
+        return this;
+    }
+    idRandomization(enabled = true) {
+        this.#options.idRandomization = enabled;
+        return this;
+    }
+    title(text) {
+        this.#options.title = text;
+        return this;
+    }
+    font(family, weight) {
+        this.#options.fontFamily = Array.isArray(family) ? family : [family];
+        if (weight !== undefined)
+            this.#options.fontWeight = weight;
+        return this;
+    }
+    flip(value) {
+        this.#options.flip = value;
+        return this;
+    }
+    rotate(degrees) {
+        this.#options.rotate = degrees;
+        return this;
+    }
+    scale(factor) {
+        this.#options.scale = factor;
+        return this;
+    }
+    borderRadius(radius) {
+        this.#options.borderRadius = radius;
+        return this;
+    }
+    translate(x, y) {
+        this.#options.translateX = x;
+        this.#options.translateY = y;
+        return this;
+    }
+    background(colors, fill = 'solid', order = 'random') {
+        this.#options.backgroundColor = colors;
+        this.#options.backgroundColorFill = fill;
+        this.#options.backgroundColorOrder = order;
+        return this;
+    }
+    backgroundGradient(stops, angle) {
+        this.#options.backgroundColorFillStops = stops;
+        this.#options.backgroundColorAngle = angle;
+        return this;
+    }
+    /**
+     * Filters which variant a style picks by tag — currently DiceBear's only tag is
+     * `'animation'`, which opts a supporting style (e.g. `gaze`, `shapes`, `blobs`) into its
+     * animated variants; prefix with `!` (e.g. `'!animation'`) to force the static variant
+     * instead. A no-op for styles that don't define the tag.
+     * @see https://www.dicebear.com/guides/filter-variants-with-tags
+     */
+    tags(tags) {
+        this.#options.tags = tags;
+        return this;
+    }
+    /** Escape hatch for an option specific to the chosen style (e.g. `hairColor`, `eyesVariant`). */
+    option(key, value) {
+        this.#options[key] = value;
+        return this;
+    }
+    /** Merges an arbitrary options object in, e.g. one collected from user input. */
+    options(values) {
+        Object.assign(this.#options, values);
+        return this;
+    }
+    /** Resolves the style definition and constructs the underlying `Avatar` instance. */
+    async build() {
+        const style = await loadDicebearStyle(this.#styleName);
+        return new DicebearAvatar(style, this.#options);
+    }
+    async toDataUri() {
+        return (await this.build()).toDataUri();
+    }
+    async toSvg() {
+        return (await this.build()).toString();
+    }
+}

package/dist/components/misc/ThemeSettings.svelte

@@ -55,7 +55,7 @@
         type="file"
         accept="image/*"
         onchange={handleImageUpload}
-        class="file:bg-md-sys-color-primary-container file:text-md-sys-color-on-primary-container hover:file:bg-md-sys-color-primary-container/80 text-sm file:mr-4 file:rounded-full file:border-0 file:px-4 file:py-2 file:text-sm file:font-semibold"
+        class="file:bg-md-sys-color-primary-container file:text-md-sys-color-on-primary-container hover:file:bg-md-sys-color-primary-container/80 md-sys-typescale-body-medium file:md-sys-typescale-label-large file:mr-4 file:rounded-full file:border-0 file:px-4 file:py-2"
       />
     </div>
   </div>

package/dist/components/misc/ThemeSwitcher.svelte

@@ -8,8 +8,8 @@
 
 <div class="fixed right-4 bottom-4 z-50 hidden md:block">
   <Popover bind:open title="Theme Settings" side="top" align="end" sideOffset={16}>
-    {#snippet trigger()}
-      <FAB iconProps={{ name: 'palette' }} config="primary" />
+    {#snippet trigger(triggerProps)}
+      <FAB iconProps={{ name: 'palette' }} config="primary" {...triggerProps} />
     {/snippet}
 
     <div

package/dist/components/misc/dicebearStyles.d.ts

@@ -0,0 +1,21 @@
+import { OptionsDescriptor, Style } from '@dicebear/core';
+/**
+ * `@dicebear/core` does not publicly export its `Descriptor`/`FieldDescriptor` types (only
+ * the `OptionsDescriptor` class itself), so they're recovered structurally from its `toJSON()`
+ * return type instead of being duplicated by hand.
+ */
+export type DicebearDescriptor = ReturnType<InstanceType<typeof OptionsDescriptor>['toJSON']>;
+export type DicebearFieldDescriptor = DicebearDescriptor[string];
+/**
+ * Every style shipped by `@dicebear/styles` (v10). Kept as the single source of
+ * truth for the `DicebearStyle` type in `types.ts` — extend this list first when
+ * DiceBear adds a new style, everything else derives from it.
+ */
+export declare const DICEBEAR_STYLES: readonly ["adventurer", "adventurer-neutral", "avataaars", "avataaars-neutral", "big-ears", "big-ears-neutral", "big-smile", "blobs", "bottts", "bottts-neutral", "cameo", "clay", "constellation", "critters", "croodles", "croodles-neutral", "cutouts", "disco", "dylan", "fun-emoji", "gaze", "glass", "glyphs", "icons", "identicon", "initial-face", "initials", "landscape", "line-face", "loops", "lorelei", "lorelei-neutral", "marbles", "micah", "miniavs", "moods", "notionists", "notionists-neutral", "open-peeps", "patchwork", "personas", "pixel-art", "pixel-art-neutral", "pixelbot", "planets", "rings", "shadows", "shape-grid", "shapes", "slice", "sprouts", "squircles", "stack", "stripes", "thumbs", "toon-head", "triangles", "voxel-art", "voxel-bot", "waves", "weave"];
+export type DicebearStyleName = (typeof DICEBEAR_STYLES)[number];
+/** Lazily imports and validates a style definition, caching the resulting `Style` instance. */
+export declare function loadDicebearStyle(name: DicebearStyleName): Promise<Style>;
+/** Lazily builds the `OptionsDescriptor` JSON for a style, describing every option it accepts. */
+export declare function loadDicebearOptionsDescriptor(name: DicebearStyleName): Promise<DicebearDescriptor>;
+/** Turns a style name like `big-ears-neutral` into `Big Ears Neutral`. */
+export declare function formatDicebearStyleLabel(name: string): string;