tera-system-ui 0.1.76 → 0.2.1

package/dist/components/accordion/Accordion.recipe.d.ts

@@ -0,0 +1,125 @@
+/**
+ * Accordion recipe — the canonical styled layer for the base design language.
+ *
+ * Built on the BitsUI Accordion primitive (root / item / header / trigger /
+ * content) with full keyboard navigation. The accordion is a multi-part
+ * component, so the recipe is SLOTTED: each visible part gets a named slot
+ * (root, item, header, trigger, chevron, content, body) that an app can target
+ * independently when extending with `tv({ extend: accordionRecipe, ... })`.
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS vars below
+ * (--tera-accordion-*) let a theme/app retune the trigger's vertical rhythm,
+ * weight and the content's bottom padding with no code change; they default to
+ * global axis tokens in tera-ui-base.css. See docs/ARCHITECTURE.md for the
+ * worked extend example (kept out of this JSDoc so the llms doc generator
+ * doesn't grep its tokens).
+ */
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+export declare const accordionRecipe: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            header?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            chevron?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            body?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            header?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            chevron?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            body?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    chevron: string;
+    content: string;
+    body: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
+            header?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            chevron?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            body?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    chevron: string;
+    content: string;
+    body: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    chevron: string;
+    content: string;
+    body: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AccordionRecipeProps = VariantProps<typeof accordionRecipe>;
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, AccordionRecipeProps {
+    children?: Snippet;
+    /** Additional CSS classes for the root element. */
+    class?: string;
+    /** Whether only one item can be open at a time ('single') or many ('multiple'). */
+    type: 'multiple' | 'single';
+    /** The currently open item value(s). Bindable. */
+    value: string | string[];
+    /** Called when the open item(s) change. */
+    onchange?: (value: string | string[]) => void;
+    /** Use controlled mode — manage value externally and pass it back via onchange. */
+    controlledValue?: boolean;
+    /** Whether the entire accordion is disabled. */
+    disabled?: boolean;
+    /** Whether keyboard navigation wraps around at the first/last item. */
+    loop?: boolean;
+    /** Layout orientation — affects arrow-key navigation direction. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Bindable reference to the root element. */
+    ref?: HTMLDivElement | null;
+}
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Unique identifier for this item — matched against the root `value`. */
+    value: string;
+    /** Prevents the user from interacting with this specific item. */
+    disabled?: boolean;
+    ref?: HTMLDivElement | null;
+    children?: Snippet;
+}
+export interface AccordionTriggerProps extends HTMLButtonAttributes {
+    children?: Snippet;
+    /** Replace the default chevron with custom markup (structural seam). */
+    chevronIcon?: Snippet;
+    ref?: HTMLButtonElement | null;
+}
+export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    /**
+     * Keep the content mounted in the DOM even when the item is collapsed.
+     * Useful for Svelte transitions or preserving internal component state.
+     */
+    forceMount?: boolean;
+    ref?: HTMLDivElement | null;
+}

package/dist/components/accordion/Accordion.recipe.js

@@ -0,0 +1,28 @@
+/**
+ * Accordion recipe — the canonical styled layer for the base design language.
+ *
+ * Built on the BitsUI Accordion primitive (root / item / header / trigger /
+ * content) with full keyboard navigation. The accordion is a multi-part
+ * component, so the recipe is SLOTTED: each visible part gets a named slot
+ * (root, item, header, trigger, chevron, content, body) that an app can target
+ * independently when extending with `tv({ extend: accordionRecipe, ... })`.
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS vars below
+ * (--tera-accordion-*) let a theme/app retune the trigger's vertical rhythm,
+ * weight and the content's bottom padding with no code change; they default to
+ * global axis tokens in tera-ui-base.css. See docs/ARCHITECTURE.md for the
+ * worked extend example (kept out of this JSDoc so the llms doc generator
+ * doesn't grep its tokens).
+ */
+import { tv } from "tailwind-variants";
+export const accordionRecipe = tv({
+    slots: {
+        root: '',
+        item: 'border-b',
+        header: 'flex',
+        trigger: 'flex flex-1 items-center justify-between py-[var(--tera-accordion-trigger-py,1rem)] [font-weight:var(--tera-accordion-trigger-weight,500)] transition-all [&[data-state=open]>svg]:rotate-180',
+        chevron: 'size-4 shrink-0 transition-transform ease-ui duration-[var(--tera-duration-fast)]',
+        content: 'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm',
+        body: 'pb-[var(--tera-accordion-content-pb,1rem)]',
+    },
+});

package/dist/components/accordion/components/Accordion.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">import { Accordion as AccordionPrimitive } from "bits-ui";
-let { ref = $bindable(null), value = $bindable(), ...restProps } = $props();
+import { accordionRecipe } from "../Accordion.recipe";
+let { ref = $bindable(null), value = $bindable(), class: className, ...restProps } = $props();
+const r = accordionRecipe();
 </script>
 
 <AccordionPrimitive.Root
         bind:ref
         bind:value={value as never}
         data-slot="accordion"
+        class={r.root({ class: className })}
         {...restProps}
 />

package/dist/components/accordion/components/AccordionContent.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">import { Accordion as AccordionPrimitive } from "bits-ui";
-import { cn } from "../../../utils";
+import { accordionRecipe } from "../Accordion.recipe";
 let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+const r = accordionRecipe();
 </script>
 
 <AccordionPrimitive.Content
         bind:ref
-        class={cn(
-		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-		className
-	)}
+        class={r.content({ class: className })}
         {...restProps}
 >
-    <div class="pb-4">{@render children?.()}</div>
+    <div class={r.body()}>{@render children?.()}</div>
 </AccordionPrimitive.Content>

package/dist/components/accordion/components/AccordionItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { Accordion as AccordionPrimitive } from "bits-ui";
-import { cn } from "../../../utils";
+import { accordionRecipe } from "../Accordion.recipe";
 let { ref = $bindable(null), class: className, ...restProps } = $props();
+const r = accordionRecipe();
 </script>
 
-<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />
+<AccordionPrimitive.Item bind:ref class={r.item({ class: className })} {...restProps} />

package/dist/components/accordion/components/AccordionTrigger.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">import { Accordion as AccordionPrimitive } from "bits-ui";
-import { cn } from "../../../utils";
-import { IconChevronDown } from "../../icons";
-let { ref = $bindable(null), class: className, level = 3, children, ...restProps } = $props();
+import { IconChevronDown } from "../../../internal/icons";
+import { accordionRecipe } from "../Accordion.recipe";
+let { ref = $bindable(null), class: className, level = 3, children, chevronIcon, ...restProps } = $props();
+const r = accordionRecipe();
 </script>
 
-<AccordionPrimitive.Header {level} class="flex">
+<AccordionPrimitive.Header {level} class={r.header()}>
     <AccordionPrimitive.Trigger
             bind:ref
-            class={cn(
-			"flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>svg]:rotate-180",
-			className
-		)}
+            class={r.trigger({ class: className })}
             {...restProps}
     >
         {@render children?.()}
-        <IconChevronDown class="size-4 shrink-0 transition-transform ease-ui duration-150" />
+        {#if chevronIcon}
+            {@render chevronIcon()}
+        {:else}
+            <IconChevronDown class={r.chevron()} />
+        {/if}
     </AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>

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

@@ -1,6 +1,9 @@
 import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+import type { Snippet } from "svelte";
 type $$ComponentProps = WithoutChild<AccordionPrimitive.TriggerProps> & {
     level?: AccordionPrimitive.HeaderProps["level"];
+    /** Replace the default chevron with custom markup (structural seam). */
+    chevronIcon?: Snippet;
 };
 declare const AccordionTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type AccordionTrigger = ReturnType<typeof AccordionTrigger>;

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

@@ -2,4 +2,5 @@ export { default as Accordion } from "./components/Accordion.svelte";
 export { default as AccordionItem } from "./components/AccordionItem.svelte";
 export { default as AccordionContent } from "./components/AccordionContent.svelte";
 export { default as AccordionTrigger } from "./components/AccordionTrigger.svelte";
-export type { AccordionProps, AccordionItemProps, AccordionContentProps, AccordionTriggerProps } from './Accordion';
+export { accordionRecipe } from "./Accordion.recipe";
+export type { AccordionProps, AccordionItemProps, AccordionContentProps, AccordionTriggerProps, AccordionRecipeProps } from './Accordion.recipe';

package/dist/components/accordion/index.js

@@ -2,3 +2,4 @@ export { default as Accordion } from "./components/Accordion.svelte";
 export { default as AccordionItem } from "./components/AccordionItem.svelte";
 export { default as AccordionContent } from "./components/AccordionContent.svelte";
 export { default as AccordionTrigger } from "./components/AccordionTrigger.svelte";
+export { accordionRecipe } from "./Accordion.recipe";

package/dist/components/alert/Alert.recipe.d.ts

@@ -0,0 +1,113 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+/**
+ * Alert recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part inline banner, so it is slotted: `root` (the banner wrapper, where
+ * the variant bg/border lives), `icon` (the leading status glyph), `title`,
+ * `description` (string/children body), and `close` (the dismiss button). The
+ * single `variant` axis (info/success/warning/error) drives the background,
+ * left border, and the icon/text colors across every slot. An app owns its look
+ * by extending this recipe with `tv({ extend: alertRecipe, ... })` in typed
+ * code. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc
+ * so the llms doc generator doesn't grep its tokens).
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-alert-radius) lets a theme/app retune corner radius with no code
+ * change; it defaults to the global radius axis token.
+ */
+export declare const alertRecipe: import("tailwind-variants").TVReturnType<{
+    variant: {
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        error: {
+            root: string;
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    body: string;
+    title: string;
+    description: string;
+    close: string;
+}, undefined, {
+    variant: {
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        error: {
+            root: string;
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    body: string;
+    title: string;
+    description: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        error: {
+            root: string;
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    body: string;
+    title: string;
+    description: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AlertRecipeProps = VariantProps<typeof alertRecipe>;
+export type AlertVariant = NonNullable<AlertRecipeProps['variant']>;
+export interface AlertProps extends AlertRecipeProps {
+    title?: string;
+    description?: string | Snippet;
+    closable?: boolean;
+    /** Show the leading status icon (default true). */
+    icon?: boolean;
+    children?: Snippet;
+    class?: string;
+    /** Replace the default status glyph with custom markup (structural seam). */
+    iconContent?: Snippet;
+    /** Replace the default close (X) icon with custom markup (structural seam). */
+    closeIcon?: Snippet;
+    [key: string]: unknown;
+}

package/dist/components/alert/Alert.recipe.js

@@ -0,0 +1,53 @@
+import { tv } from "tailwind-variants";
+/**
+ * Alert recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part inline banner, so it is slotted: `root` (the banner wrapper, where
+ * the variant bg/border lives), `icon` (the leading status glyph), `title`,
+ * `description` (string/children body), and `close` (the dismiss button). The
+ * single `variant` axis (info/success/warning/error) drives the background,
+ * left border, and the icon/text colors across every slot. An app owns its look
+ * by extending this recipe with `tv({ extend: alertRecipe, ... })` in typed
+ * code. See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc
+ * so the llms doc generator doesn't grep its tokens).
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-alert-radius) lets a theme/app retune corner radius with no code
+ * change; it defaults to the global radius axis token.
+ */
+export const alertRecipe = tv({
+    slots: {
+        // Full border + tint, never a side-stripe. Semantic status tokens so the
+        // banner adapts correctly to dark mode. A colored icon chip carries the
+        // status; title/body stay high-contrast neutral for legibility.
+        root: 'rounded-[var(--tera-alert-radius,var(--border-radius-container))] p-4 flex gap-3 border',
+        icon: 'shrink-0 grid place-items-center size-5 rounded-full text-[11px] font-bold leading-none mt-px',
+        body: 'flex-1 min-w-0',
+        title: 'font-semibold text-sm text-text-primary mb-0.5',
+        description: 'text-sm text-text-secondary',
+        close: 'shrink-0 text-text-tertiary hover:text-text-secondary transition-colors',
+    },
+    variants: {
+        variant: {
+            info: {
+                root: 'bg-information-subtle border-information-border',
+                icon: 'bg-information-default/15 text-information-text',
+            },
+            success: {
+                root: 'bg-success-subtle border-success-border',
+                icon: 'bg-success-default/15 text-success-text',
+            },
+            warning: {
+                root: 'bg-warning-subtle border-warning-border',
+                icon: 'bg-warning-default/15 text-warning-text',
+            },
+            error: {
+                root: 'bg-error-subtle border-error-border',
+                icon: 'bg-error-default/15 text-error-text',
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'info',
+    },
+});

package/dist/components/alert/Alert.svelte

@@ -1,46 +1,56 @@
-<script lang="ts">let { variant = 'info', title, description, closable, icon = true, children, class: className = '', ...props } = $props();
+<script lang="ts">import { alertRecipe } from './Alert.recipe';
+let { variant = 'info', title, description, closable, icon = true, children, iconContent, closeIcon, class: className = '', ...props } = $props();
 let visible = $state(true);
-const config = {
-    info: { bg: 'bg-information-50', border: 'border-l-4 border-information-500', icon: 'ℹ', iconColor: 'text-information-600', textColor: 'text-information-900' },
-    success: { bg: 'bg-success-50', border: 'border-l-4 border-success-500', icon: '✓', iconColor: 'text-success-600', textColor: 'text-success-900' },
-    warning: { bg: 'bg-warning-50', border: 'border-l-4 border-warning-500', icon: '⚠', iconColor: 'text-warning-600', textColor: 'text-warning-900' },
-    error: { bg: 'bg-error-50', border: 'border-l-4 border-error-500', icon: '✕', iconColor: 'text-error-600', textColor: 'text-error-900' },
+const glyphs = {
+    info: 'ℹ',
+    success: '✓',
+    warning: '⚠',
+    error: '✕',
 };
-const c = $derived(config[variant]);
-export {};
+const r = $derived(alertRecipe({ variant }));
 </script>
 
 {#if visible}
     <div
         role="alert"
-        class="{c.bg} {c.border} rounded p-4 flex gap-3 {className}"
+        class={r.root({class: className})}
         {...props}
     >
         {#if icon}
-            <span class="shrink-0 font-bold text-base leading-none mt-0.5 {c.iconColor}">{c.icon}</span>
+            <span class={r.icon()}>
+                {#if iconContent}
+                    {@render iconContent()}
+                {:else}
+                    {glyphs[variant]}
+                {/if}
+            </span>
         {/if}
-        <div class="flex-1 min-w-0">
+        <div class={r.body()}>
             {#if title}
-                <p class="font-medium text-sm {c.textColor} mb-0.5">{title}</p>
+                <p class={r.title()}>{title}</p>
             {/if}
             {#if typeof description === 'string'}
-                <p class="text-sm {c.textColor} opacity-85">{description}</p>
+                <p class={r.description()}>{description}</p>
             {:else if description}
                 {@render description()}
             {:else if children}
-                <div class="text-sm {c.textColor} opacity-85">{@render children()}</div>
+                <div class={r.description()}>{@render children()}</div>
             {/if}
         </div>
         {#if closable}
             <button
                 type="button"
-                class="shrink-0 hover:opacity-60 transition-opacity {c.iconColor}"
+                class={r.close()}
                 onclick={() => visible = false}
                 aria-label="Close"
             >
-                <svg class="size-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-                    <path d="M4 4l8 8M12 4l-8 8"/>
-                </svg>
+                {#if closeIcon}
+                    {@render closeIcon()}
+                {:else}
+                    <svg class="size-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                        <path d="M4 4l8 8M12 4l-8 8"/>
+                    </svg>
+                {/if}
             </button>
         {/if}
     </div>

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

@@ -1,15 +1,4 @@
-import type { Snippet } from 'svelte';
-type AlertVariant = 'info' | 'success' | 'warning' | 'error';
-type $$ComponentProps = {
-    variant?: AlertVariant;
-    title?: string;
-    description?: string | Snippet;
-    closable?: boolean;
-    icon?: boolean;
-    children?: Snippet;
-    class?: string;
-    [key: string]: unknown;
-};
-declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
+import { type AlertProps } from './Alert.recipe';
+declare const Alert: import("svelte").Component<AlertProps, {}, "">;
 type Alert = ReturnType<typeof Alert>;
 export default Alert;

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

@@ -1 +1,3 @@
 export { default as Alert } from './Alert.svelte';
+export { alertRecipe } from './Alert.recipe';
+export type { AlertRecipeProps, AlertProps, AlertVariant } from './Alert.recipe';

package/dist/components/alert/index.js

@@ -1 +1,2 @@
 export { default as Alert } from './Alert.svelte';
+export { alertRecipe } from './Alert.recipe';

package/dist/components/avatar/Avatar.recipe.d.ts

@@ -0,0 +1,113 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * Avatar recipe — the canonical styled layer for the base design language.
+ *
+ * Two stylable parts: `root` (the circular frame holding the image or initials
+ * fallback) and `ring` (the overlay border drawn on top). An app owns its look
+ * by extending this recipe with `tv({ extend: avatarRecipe, ... })` in typed
+ * code — sizing and the fallback behavior are inherited. See
+ * docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the
+ * llms doc generator doesn't grep its variant tokens).
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-avatar-radius) lets a theme/app retune the corner radius with no code
+ * change; it defaults to a full circle (9999px).
+ */
+export declare const avatarRecipe: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            ring: string;
+        };
+        md: {
+            root: string;
+            ring: string;
+        };
+        lg: {
+            root: string;
+            ring: string;
+        };
+        xl: {
+            root: string;
+            ring: string;
+        };
+    };
+    border: {
+        true: {
+            root: string;
+            ring: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    ring: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+            ring: string;
+        };
+        md: {
+            root: string;
+            ring: string;
+        };
+        lg: {
+            root: string;
+            ring: string;
+        };
+        xl: {
+            root: string;
+            ring: string;
+        };
+    };
+    border: {
+        true: {
+            root: string;
+            ring: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    ring: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            ring: string;
+        };
+        md: {
+            root: string;
+            ring: string;
+        };
+        lg: {
+            root: string;
+            ring: string;
+        };
+        xl: {
+            root: string;
+            ring: string;
+        };
+    };
+    border: {
+        true: {
+            root: string;
+            ring: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    ring: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AvatarRecipeProps = VariantProps<typeof avatarRecipe>;
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'>, AvatarRecipeProps {
+    children?: Snippet;
+    class?: string;
+    alt?: string;
+    src?: string;
+    ref?: HTMLDivElement | null;
+}