tera-system-ui 0.1.75 → 0.2.1

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

@@ -1,4 +1,4 @@
-import type { DropdownMenuSeparatorProps } from '../DropdownMenu.js';
+import { type DropdownMenuSeparatorProps } from '../DropdownMenu.recipe';
 declare const DropdownMenuSeparator: import("svelte").Component<DropdownMenuSeparatorProps, {}, "">;
 type DropdownMenuSeparator = ReturnType<typeof DropdownMenuSeparator>;
 export default DropdownMenuSeparator;

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

@@ -3,4 +3,5 @@ export { default as DropdownMenuItem } from './components/DropdownMenuItem.svelt
 export { default as DropdownMenuGroup } from './components/DropdownMenuGroup.svelte';
 export { default as DropdownMenuHeader } from './components/DropdownMenuHeader.svelte';
 export { default as DropdownMenuSeparator } from './components/DropdownMenuSeparator.svelte';
-export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuHeaderProps, DropdownMenuSeparatorProps } from './DropdownMenu';
+export { dropdownMenuRecipe } from './DropdownMenu.recipe';
+export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuHeaderProps, DropdownMenuSeparatorProps, DropdownMenuRecipeProps } from './DropdownMenu.recipe';

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

@@ -3,3 +3,4 @@ export { default as DropdownMenuItem } from './components/DropdownMenuItem.svelt
 export { default as DropdownMenuGroup } from './components/DropdownMenuGroup.svelte';
 export { default as DropdownMenuHeader } from './components/DropdownMenuHeader.svelte';
 export { default as DropdownMenuSeparator } from './components/DropdownMenuSeparator.svelte';
+export { dropdownMenuRecipe } from './DropdownMenu.recipe';

package/dist/components/fonts/TeraFontMono.svelte

@@ -1,4 +1,4 @@
 <script lang="ts">// Geist Mono first (modern, preferred), fallback to Roboto Mono Variable
-import '@fontsource/geist-mono';
+import '@fontsource-variable/geist-mono';
 import '@fontsource-variable/roboto-mono';
 </script>

package/dist/components/fonts/TeraFontMono.svelte.d.ts

@@ -1,4 +1,4 @@
-import '@fontsource/geist-mono';
+import '@fontsource-variable/geist-mono';
 import '@fontsource-variable/roboto-mono';
 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> & {

package/dist/components/input/Input.recipe.d.ts

@@ -0,0 +1,166 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+/**
+ * Input recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component, so it is slotted: `root` (the relative wrapper),
+ * `field` (the `<input>` itself, where every variant/size/status lives),
+ * `prefix` / `suffix` (the affix spans), and `clear` (the allow-clear button).
+ * An app owns its look by extending this recipe with
+ * `tv({ extend: inputRecipe, ... })` in typed code; base sizing, focus and
+ * status states are inherited. 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 vars below
+ * (--tera-input-*) let a theme/app retune corner radius with no code change;
+ * they default to global axis tokens in tera-ui-base.css.
+ */
+export declare const inputRecipe: import("tailwind-variants").TVReturnType<{
+    variant: {
+        outlined: {
+            field: string;
+        };
+        filled: {
+            field: string;
+        };
+        borderless: {
+            field: string;
+        };
+    };
+    disabled: {
+        true: {
+            field: string;
+        };
+        false: {
+            field: string;
+        };
+    };
+    size: {
+        sm: {
+            field: string;
+        };
+        md: {
+            field: string;
+        };
+        lg: {
+            field: string;
+        };
+    };
+    status: {
+        error: {
+            field: string;
+        };
+        warning: {
+            field: string;
+        };
+    };
+}, {
+    root: string;
+    field: string;
+    prefix: string;
+    suffix: string;
+    clear: string;
+}, undefined, {
+    variant: {
+        outlined: {
+            field: string;
+        };
+        filled: {
+            field: string;
+        };
+        borderless: {
+            field: string;
+        };
+    };
+    disabled: {
+        true: {
+            field: string;
+        };
+        false: {
+            field: string;
+        };
+    };
+    size: {
+        sm: {
+            field: string;
+        };
+        md: {
+            field: string;
+        };
+        lg: {
+            field: string;
+        };
+    };
+    status: {
+        error: {
+            field: string;
+        };
+        warning: {
+            field: string;
+        };
+    };
+}, {
+    root: string;
+    field: string;
+    prefix: string;
+    suffix: string;
+    clear: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        outlined: {
+            field: string;
+        };
+        filled: {
+            field: string;
+        };
+        borderless: {
+            field: string;
+        };
+    };
+    disabled: {
+        true: {
+            field: string;
+        };
+        false: {
+            field: string;
+        };
+    };
+    size: {
+        sm: {
+            field: string;
+        };
+        md: {
+            field: string;
+        };
+        lg: {
+            field: string;
+        };
+    };
+    status: {
+        error: {
+            field: string;
+        };
+        warning: {
+            field: string;
+        };
+    };
+}, {
+    root: string;
+    field: string;
+    prefix: string;
+    suffix: string;
+    clear: string;
+}, undefined, unknown, unknown, undefined>>;
+export type InputRecipeProps = VariantProps<typeof inputRecipe>;
+export interface InputProps extends Omit<HTMLInputAttributes, 'disabled' | 'size' | 'value' | 'prefix'>, InputRecipeProps {
+    children?: Snippet;
+    class?: string;
+    value?: string;
+    ref?: HTMLInputElement | null;
+    prefix?: Snippet;
+    suffix?: Snippet;
+    allowClear?: boolean;
+    /** Replace the default clear (X) icon with custom markup (structural seam). */
+    clearIcon?: Snippet;
+}

package/dist/components/input/Input.recipe.js

@@ -0,0 +1,86 @@
+import { tv } from "tailwind-variants";
+/**
+ * Input recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component, so it is slotted: `root` (the relative wrapper),
+ * `field` (the `<input>` itself, where every variant/size/status lives),
+ * `prefix` / `suffix` (the affix spans), and `clear` (the allow-clear button).
+ * An app owns its look by extending this recipe with
+ * `tv({ extend: inputRecipe, ... })` in typed code; base sizing, focus and
+ * status states are inherited. 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 vars below
+ * (--tera-input-*) let a theme/app retune corner radius with no code change;
+ * they default to global axis tokens in tera-ui-base.css.
+ */
+export const inputRecipe = tv({
+    slots: {
+        root: 'relative inline-flex w-full',
+        field: 'w-full inline-flex items-center justify-center rounded-[var(--tera-input-radius,var(--tera-radius-base))] outline-none font-normal text-text-primary placeholder:text-text-tertiary transition-[border-color,box-shadow,background-color] ease-ui duration-[var(--tera-duration-fast)]',
+        prefix: 'absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary pointer-events-none',
+        suffix: 'absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary pointer-events-none',
+        clear: 'absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-neutral-token-10 transition-colors',
+    },
+    variants: {
+        variant: {
+            outlined: {
+                field: 'border border-border-default bg-surface-control hover:border-border-strong focus:border-interactive focus:shadow-focus',
+            },
+            filled: {
+                field: 'bg-surface-sunken border border-transparent shadow-[inset_0_1px_2px_rgba(15,23,42,0.05)] hover:bg-surface-hover focus:bg-surface focus:border-interactive focus:shadow-focus',
+            },
+            borderless: {
+                field: 'bg-transparent border-0 hover:bg-surface-raised focus:bg-surface-raised',
+            },
+        },
+        disabled: {
+            true: {
+                field: 'cursor-not-allowed bg-surface-sunken text-text-disabled border-border-default',
+            },
+            false: {
+                field: 'cursor-text',
+            },
+        },
+        size: {
+            sm: {
+                field: 'h-[var(--tera-control-height-sm)] px-[var(--tera-control-px-md)] text-sm',
+            },
+            md: {
+                field: 'h-[var(--tera-control-height-md)] px-[var(--tera-control-px-md)] text-sm',
+            },
+            lg: {
+                field: 'h-[var(--tera-control-height-lg)] px-[var(--tera-control-px-md)] text-base',
+            },
+        },
+        status: {
+            error: {
+                field: 'border-error-default hover:border-error-hover focus:border-error-default focus:shadow-focus-error',
+            },
+            warning: {
+                field: 'border-warning-default hover:border-warning-hover focus:border-warning-default focus:shadow-focus-warning',
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'outlined',
+            disabled: true,
+            class: { field: 'hover:border-border-default' },
+        },
+        {
+            variant: 'filled',
+            disabled: true,
+            class: { field: 'hover:bg-surface-sunken' },
+        },
+        {
+            variant: 'borderless',
+            disabled: true,
+            class: { field: 'hover:bg-transparent' },
+        },
+    ],
+    defaultVariants: {
+        variant: 'outlined',
+        size: 'md',
+    },
+});

package/dist/components/input/Input.svelte

@@ -1,42 +1,47 @@
-<script lang="ts">import { styles } from "./Input";
-import { IconX } from "../icons";
-let { children, class: className, value = $bindable(), ref = $bindable(), size = 'md', disabled, variant = 'outlined', prefix, suffix, allowClear, status, ...props } = $props();
+<script lang="ts">import { inputRecipe } from "./Input.recipe";
+import { IconX } from "../../internal/icons";
+let { children, class: className, value = $bindable(), ref = $bindable(), size = 'md', disabled, variant = 'outlined', prefix, suffix, allowClear, status, clearIcon, ...props } = $props();
+const r = $derived(inputRecipe({ variant, disabled, size, status }));
 function clearInput() {
     value = '';
     ref?.focus();
 }
-</script>
-
-<div class="relative inline-flex w-full">
-    {#if prefix}
-        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary pointer-events-none">
-            {@render prefix()}
-        </span>
-    {/if}
-
-    <input
-            type="text"
-            bind:this={ref}
-            class={styles({ variant, disabled , size, status, className })}
-            class:pl-9={prefix}
-            class:pr-9={allowClear && value || suffix}
-            {disabled}
-            {...props}
-            bind:value
-    />
-
-    {#if allowClear && value && !disabled}
-        <button
-                type="button"
-                onclick={clearInput}
-                class="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-neutral-token-10 transition-colors"
-                tabindex="-1"
-        >
-            <IconX class="size-3.5"/>
-        </button>
-    {:else if suffix}
-        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary pointer-events-none">
-            {@render suffix()}
-        </span>
-    {/if}
-</div>
+</script>
+
+<div class={r.root()}>
+    {#if prefix}
+        <span class={r.prefix()}>
+            {@render prefix()}
+        </span>
+    {/if}
+
+    <input
+            type="text"
+            bind:this={ref}
+            class={r.field({ class: className })}
+            class:pl-9={prefix}
+            class:pr-9={allowClear && value || suffix}
+            {disabled}
+            {...props}
+            bind:value
+    />
+
+    {#if allowClear && value && !disabled}
+        <button
+                type="button"
+                onclick={clearInput}
+                class={r.clear()}
+                tabindex="-1"
+        >
+            {#if clearIcon}
+                {@render clearIcon()}
+            {:else}
+                <IconX class="size-3.5"/>
+            {/if}
+        </button>
+    {:else if suffix}
+        <span class={r.suffix()}>
+            {@render suffix()}
+        </span>
+    {/if}
+</div>

package/dist/components/input/Input.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type InputProps } from "./Input";
+import { type InputProps } from "./Input.recipe";
 declare const Input: import("svelte").Component<InputProps, {}, "value" | "ref">;
 type Input = ReturnType<typeof Input>;
 export default Input;

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

@@ -1,2 +1,3 @@
 export { default as Input } from './Input.svelte';
-export type { InputProps } from './Input';
+export { inputRecipe } from './Input.recipe';
+export type { InputProps, InputRecipeProps } from './Input.recipe';

package/dist/components/input/index.js

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

package/dist/components/label/Label.recipe.d.ts

@@ -0,0 +1,46 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLLabelAttributes } from "svelte/elements";
+/**
+ * Label recipe — the canonical styled layer for the base design language.
+ *
+ * Primary customization surface: an app owns its look by extending this recipe
+ * with `tv({ extend: labelRecipe, ... })` in typed code — base sizing and the
+ * required-asterisk treatment are inherited; only the design language changes.
+ * See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the
+ * llms doc generator doesn't grep its variant tokens).
+ */
+export declare const labelRecipe: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    required: {
+        true: string;
+    };
+}, undefined, "inline-flex items-center gap-1 select-none font-semibold tracking-tight text-text-primary leading-tight peer-disabled:cursor-not-allowed peer-disabled:text-text-disabled", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    required: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    required: {
+        true: string;
+    };
+}, undefined, "inline-flex items-center gap-1 select-none font-semibold tracking-tight text-text-primary leading-tight peer-disabled:cursor-not-allowed peer-disabled:text-text-disabled", unknown, unknown, undefined>>;
+export type LabelRecipeProps = VariantProps<typeof labelRecipe>;
+export interface LabelProps extends HTMLLabelAttributes, LabelRecipeProps {
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLLabelElement | null;
+}

package/dist/components/label/Label.recipe.js

@@ -0,0 +1,27 @@
+import { tv } from "tailwind-variants";
+/**
+ * Label recipe — the canonical styled layer for the base design language.
+ *
+ * Primary customization surface: an app owns its look by extending this recipe
+ * with `tv({ extend: labelRecipe, ... })` in typed code — base sizing and the
+ * required-asterisk treatment are inherited; only the design language changes.
+ * See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the
+ * llms doc generator doesn't grep its variant tokens).
+ */
+export const labelRecipe = tv({
+    base: 'inline-flex items-center gap-1 select-none font-semibold tracking-tight text-text-primary leading-tight peer-disabled:cursor-not-allowed peer-disabled:text-text-disabled',
+    variants: {
+        size: {
+            sm: 'text-xs tracking-normal text-text-secondary',
+            md: 'text-sm',
+            lg: 'text-base',
+        },
+        required: {
+            true: "after:content-['*'] after:font-mono after:font-semibold after:leading-none after:-translate-y-px after:text-error-default",
+        },
+    },
+    compoundVariants: [],
+    defaultVariants: {
+        size: 'md',
+    },
+});

package/dist/components/label/Label.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">import { Label as LabelPrimitive } from "bits-ui";
 import { cn } from "../../utils";
-import { styles } from "./Label";
+import { labelRecipe } from "./Label.recipe";
 let { ref = $bindable(null), class: className, size = 'md', required, ...restProps } = $props();
 </script>
 
 <LabelPrimitive.Root
     bind:ref
-    class={cn(styles({ size, required }), className)}
+    class={cn(labelRecipe({ size, required }), className)}
     {...restProps}
 />

package/dist/components/label/Label.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type LabelProps } from "./Label";
+import { type LabelProps } from "./Label.recipe";
 declare const Label: import("svelte").Component<LabelProps, {}, "ref">;
 type Label = ReturnType<typeof Label>;
 export default Label;

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

@@ -1,2 +1,3 @@
 export { default as Label } from './Label.svelte';
-export type { LabelProps } from './Label';
+export { labelRecipe } from './Label.recipe';
+export type { LabelProps, LabelRecipeProps } from './Label.recipe';

package/dist/components/label/index.js

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

package/dist/components/popover/Popover.recipe.d.ts

@@ -0,0 +1,80 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+/**
+ * Popover recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component (built on bits-ui Popover): the recipe is slotted by role
+ * — `trigger` (the inline wrapper around the clickable trigger) and `content`
+ * (the floating panel with its open/close animations). An app owns its look by
+ * extending this recipe with `tv({ extend: popoverRecipe, ... })` in typed code.
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-popover-radius) lets a theme/app retune the panel's corner radius with
+ * no code change; it defaults to the global container-radius token. See
+ * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms
+ * doc generator doesn't grep its tokens).
+ */
+export declare const popoverRecipe: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            trigger?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            trigger?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    trigger: string;
+    content: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            trigger?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    trigger: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    trigger: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PopoverRecipeProps = VariantProps<typeof popoverRecipe>;
+export interface PopoverProps extends PopoverRecipeProps {
+    children?: Snippet;
+    /** Snippet used as the clickable trigger that opens the popover. */
+    trigger?: Snippet;
+    /** Additional CSS classes for the popover content panel. */
+    class?: string;
+    /** Whether the popover is open. Bindable. */
+    open?: boolean;
+    /** Which side of the trigger the popover appears on. */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Distance in pixels between the trigger and popover panel. */
+    sideOffset?: number;
+    /** Alignment of the popover relative to the trigger. */
+    align?: 'start' | 'center' | 'end';
+    /** Additional offset in pixels along the alignment axis. */
+    alignOffset?: number;
+    /** Whether clicking outside the popover closes it. */
+    closeOnClickOutside?: boolean;
+    /** Whether pressing Escape closes the popover. Defaults to true. */
+    closeOnEscape?: boolean;
+    /** Whether focus is trapped inside the popover content while open. */
+    trapFocus?: boolean;
+    /** Prevent the page from scrolling while the popover is open. */
+    preventScroll?: boolean;
+    /** Called when the user interacts outside the popover boundaries. */
+    onInteractOutside?: () => void;
+    /** ARIA role for the popover content element. */
+    role?: string;
+    /** Bindable reference to the popover content element. */
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
+}

package/dist/components/popover/Popover.recipe.js

@@ -0,0 +1,23 @@
+import { tv } from "tailwind-variants";
+/**
+ * Popover recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component (built on bits-ui Popover): the recipe is slotted by role
+ * — `trigger` (the inline wrapper around the clickable trigger) and `content`
+ * (the floating panel with its open/close animations). An app owns its look by
+ * extending this recipe with `tv({ extend: popoverRecipe, ... })` in typed code.
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-popover-radius) lets a theme/app retune the panel's corner radius with
+ * no code change; it defaults to the global container-radius token. See
+ * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms
+ * doc generator doesn't grep its tokens).
+ */
+export const popoverRecipe = tv({
+    slots: {
+        trigger: 'inline-flex',
+        content: `z-50 overflow-hidden bg-surface rounded-[var(--tera-popover-radius,var(--border-radius-container))] border border-border-default shadow-lg
+                animate-in fade-in zoom-in-95 duration-[var(--tera-duration-fast)]
+                data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95`,
+    },
+});

package/dist/components/popover/Popover.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">import { Popover as PopoverPrimitive } from 'bits-ui';
-import { cn } from '../../utils/utils.js';
+import { popoverRecipe } from './Popover.recipe';
 let { children, trigger, class: className, open = $bindable(false), side = 'bottom', sideOffset = 4, align = 'start', alignOffset, closeOnClickOutside = true, closeOnEscape = true, trapFocus, preventScroll, onInteractOutside, ref = $bindable(null), ...props } = $props();
+const r = $derived(popoverRecipe());
 </script>
 
 <PopoverPrimitive.Root bind:open>
     {#if trigger}
         <PopoverPrimitive.Trigger>
             {#snippet child({ props: triggerProps })}
-                <span {...triggerProps} class="inline-flex">
+                <span {...triggerProps} class={r.trigger()}>
                     {@render trigger()}
                 </span>
             {/snippet}
@@ -26,12 +27,7 @@ let { children, trigger, class: className, open = $bindable(false), side = 'bott
             interactOutsideBehavior={closeOnClickOutside ? 'close' : 'ignore'}
             escapeKeydownBehavior={closeOnEscape ? 'close' : 'ignore'}
             onInteractOutside={() => onInteractOutside?.()}
-            class={cn(
-                'z-50 overflow-hidden bg-surface rounded-container border border-border-default shadow-lg',
-                'animate-in fade-in zoom-in-95 duration-150',
-                'data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95',
-                className
-            )}
+            class={r.content({ class: className })}
             {...props}
         >
             {@render children?.()}

package/dist/components/popover/Popover.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { PopoverProps } from './Popover.js';
+import { type PopoverProps } from './Popover.recipe';
 declare const Popover: import("svelte").Component<PopoverProps, {}, "ref" | "open">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

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

@@ -1,2 +1,3 @@
 export { default as Popover } from './Popover.svelte';
-export type { PopoverProps } from './Popover';
+export { popoverRecipe } from './Popover.recipe';
+export type { PopoverProps, PopoverRecipeProps } from './Popover.recipe';

package/dist/components/popover/index.js

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