tera-system-ui 0.1.76 → 0.2.2

package/dist/components/text-area/TextArea.svelte

@@ -1,71 +1,76 @@
-<script lang="ts">import {} from "./TextArea";
-import { styles } from "./TextArea";
-import { IconX } from "../icons";
-let { children, class: className, value = $bindable(), ref = $bindable(), size = 'md', disabled, variant = 'outlined', autoSize, rows, allowClear, showCount, maxLength, status, ...props } = $props();
+<script lang="ts">import { textAreaRecipe } from "./TextArea.recipe";
+import { IconX } from "../../internal/icons";
+let { children, class: className, value = $bindable(), ref = $bindable(), size = 'md', disabled, variant = 'outlined', autoSize, rows, allowClear, showCount, maxLength, status, clearIcon, ...props } = $props();
 let textLength = $derived(value?.length || 0);
-function createAutoSizeTextarea(node, autoSize) {
-    if (!autoSize) {
-        return;
-    }
-    let minRows = null;
-    let maxRows = null;
-    if (autoSize === true) {
-        minRows = 1;
-    }
-    else {
-        minRows = Math.max(autoSize.minRows || 0, 1);
-        maxRows = autoSize.maxRows || null;
-    }
-    const updateSize = () => {
-        node.style.height = 'auto';
-        const computedStyle = window.getComputedStyle(node);
-        const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
-        const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
-        const offset = borderTopWidth + borderBottomWidth;
-        const scrollHeight = node.scrollHeight;
-        const lineHeight = parseFloat(computedStyle.lineHeight);
-        const minHeight = minRows * lineHeight + offset;
-        const maxHeight = maxRows ? maxRows * lineHeight : null;
-        node.style.height = `${Math.max(minHeight, Math.min(scrollHeight, maxHeight ?? scrollHeight))}px`;
-    };
-    $effect(() => {
+const r = $derived(textAreaRecipe({ variant, disabled, size, allowClear, status }));
+function autoSizeAttachment(autoSize) {
+    return (node) => {
+        if (!autoSize) {
+            return;
+        }
+        let minRows = null;
+        let maxRows = null;
+        if (autoSize === true) {
+            minRows = 1;
+        }
+        else {
+            minRows = Math.max(autoSize.minRows || 0, 1);
+            maxRows = autoSize.maxRows || null;
+        }
+        const updateSize = () => {
+            node.style.height = 'auto';
+            const computedStyle = window.getComputedStyle(node);
+            const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
+            const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
+            const offset = borderTopWidth + borderBottomWidth;
+            const scrollHeight = node.scrollHeight;
+            const lineHeight = parseFloat(computedStyle.lineHeight);
+            const minHeight = minRows * lineHeight + offset;
+            const maxHeight = maxRows ? maxRows * lineHeight : null;
+            node.style.height = `${Math.max(minHeight, Math.min(scrollHeight, maxHeight ?? scrollHeight))}px`;
+        };
+        // Re-run whenever `value` changes (read it to register the dependency).
         value;
         updateSize();
-    });
+    };
 }
 function clearText() {
     value = '';
     ref?.focus();
 }
-</script>
-
-<div class="relative w-full">
-    <textarea
-            bind:this={ref}
-            use:createAutoSizeTextarea={autoSize}
-            style={autoSize ? "resize: none; transition-property: border-color, box-shadow, background-color;" : ''}
-            class={styles({ variant, disabled , size, className, allowClear, status })}
-            {disabled}
-            rows={autoSize ? 1 : rows}
-            maxlength={maxLength}
-            {...props}
-            bind:value
-    ></textarea>
-
-    {#if allowClear && value && !disabled}
-        <button
-                type="button"
-                onclick={clearText}
-                class="absolute top-2 right-2 text-neutral-token-7 hover:text-neutral-token-10 transition-colors z-10"
-                tabindex="-1"
-        >
-            <IconX class="size-3.5"/>
-        </button>
-    {/if}
-
-    {#if showCount}
-        <div class="absolute bottom-1 right-2 text-xs text-neutral-token-7 pointer-events-none">
-            {textLength}{#if maxLength}/{maxLength}{/if}
-        </div>
-    {/if}
-</div>
+</script>
+
+<div class={r.root()}>
+    <textarea
+            bind:this={ref}
+            {@attach autoSizeAttachment(autoSize)}
+            style={autoSize ? "resize: none; transition-property: border-color, box-shadow, background-color;" : ''}
+            class={r.field({ class: className })}
+            {disabled}
+            rows={autoSize ? 1 : rows}
+            maxlength={maxLength}
+            {...props}
+            bind:value
+    ></textarea>
+
+    {#if allowClear && value && !disabled}
+        <button
+                type="button"
+                onclick={clearText}
+                class={r.clear()}
+                tabindex="-1"
+        >
+            {#if clearIcon}
+                {@render clearIcon()}
+            {:else}
+                <IconX class="size-3.5"/>
+            {/if}
+        </button>
+    {/if}
+
+    {#if showCount}
+        <div class="absolute bottom-1 right-2 text-xs text-neutral-token-7 pointer-events-none">
+            {textLength}{#if maxLength}/{maxLength}{/if}
+        </div>
+    {/if}
+</div>

package/dist/components/text-area/TextArea.svelte.d.ts

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

package/dist/components/text-area/index.d.ts

@@ -1,2 +1,3 @@
 export { default as TextArea } from './TextArea.svelte';
-export type { TextAreaProps, AutoSizeConfig } from './TextArea';
+export { textAreaRecipe } from './TextArea.recipe';
+export type { TextAreaProps, AutoSizeConfig, TextAreaRecipeProps } from './TextArea.recipe';

package/dist/components/text-area/index.js

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

package/dist/components/toast/ToastContainer.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">import { toast } from './toast.svelte.js';
-const accentColor = {
-    success: 'bg-success-500',
-    error: 'bg-error-500',
-    info: 'bg-information-500',
-    warning: 'bg-warning-500',
+// Status carried by a leading icon-chip (matches the redesigned Alert), not a
+// side-stripe bar. Semantic -default/-text tokens so tones stay dark-safe.
+const chipColor = {
+    success: 'bg-success-default/15 text-success-text',
+    error: 'bg-error-default/15 text-error-text',
+    info: 'bg-information-default/15 text-information-text',
+    warning: 'bg-warning-default/15 text-warning-text',
 };
 const iconSymbol = {
     success: '✓', error: '✕', info: 'ℹ', warning: '⚠',
@@ -13,31 +15,28 @@ const iconSymbol = {
 <div
     aria-live="polite"
     aria-label="Notifications"
-    class="fixed bottom-4 right-4 z-[9999] flex flex-col gap-2 max-sm:right-1/2 max-sm:translate-x-1/2"
+    class="fixed bottom-4 right-4 z-[60] flex flex-col gap-2 max-sm:right-1/2 max-sm:translate-x-1/2"
 >
     {#each toast.items as item (item.id)}
         <div
-            class="flex items-start gap-3 min-w-[280px] max-w-sm bg-surface-raised rounded-container shadow-lg border border-border-default overflow-hidden animate-in slide-in-from-bottom-4 fade-in duration-300 ease-spring"
+            class="flex items-start gap-3 min-w-[280px] max-w-sm p-3 bg-surface-raised rounded-[var(--tera-toast-radius,var(--border-radius-container))] shadow-lg border border-border-default animate-in slide-in-from-bottom-4 fade-in duration-[var(--tera-duration-slow)] ease-spring"
         >
-            <div class="w-1 self-stretch shrink-0 {accentColor[item.variant]}"></div>
-            <div class="flex-1 py-3 pr-3">
-                <p class="text-sm font-medium text-text-primary flex items-center gap-1.5">
-                    <span class="text-xs">{iconSymbol[item.variant]}</span>
-                    {item.message}
-                </p>
+            <span class="shrink-0 grid place-items-center size-5 rounded-full text-[11px] font-bold leading-none mt-px {chipColor[item.variant]}" aria-hidden="true">{iconSymbol[item.variant]}</span>
+            <div class="flex-1 min-w-0">
+                <p class="text-sm font-semibold text-text-primary">{item.message}</p>
                 {#if item.description}
-                    <p class="text-xs text-text-secondary mt-0.5">{item.description}</p>
+                    <p class="text-sm text-text-secondary mt-0.5">{item.description}</p>
                 {/if}
                 {#if item.action}
                     <button
-                        class="mt-1.5 text-xs font-semibold text-interactive hover:underline"
+                        class="mt-1.5 text-xs font-semibold text-interactive hover:text-interactive-hover hover:underline transition-colors duration-[var(--tera-duration-fast)] ease-ui"
                         onclick={item.action.onclick}
                     >{item.action.label}</button>
                 {/if}
             </div>
             <button
                 type="button"
-                class="p-3 text-text-tertiary hover:text-text-primary transition-colors"
+                class="shrink-0 -m-1.5 p-2.5 rounded text-text-tertiary hover:text-text-primary hover:bg-surface-hover focus-visible:shadow-focus transition-colors duration-[var(--tera-duration-fast)] ease-ui"
                 onclick={() => toast.remove(item.id)}
                 aria-label="Close"
             >

package/dist/components/tooltip/Tooltip.recipe.d.ts

@@ -0,0 +1,79 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+/**
+ * Tooltip recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component (built on bits-ui Tooltip): the recipe is slotted by role
+ * — trigger (the inline wrapper around the trigger element), content (the
+ * floating panel) and arrow (the pointer). An app restyles any part
+ * independently by extending with `tv({ extend: tooltipRecipe, ... })` in typed
+ * code; base layout, animation and color states are inherited.
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-tooltip-radius) lets a theme/app retune corner radius with no code
+ * change; it defaults to the global axis token via an inline fallback. 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 tooltipRecipe: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            trigger?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            arrow?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            trigger?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            arrow?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    trigger: string;
+    content: string;
+    arrow: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            trigger?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            arrow?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    trigger: string;
+    content: string;
+    arrow: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    trigger: string;
+    content: string;
+    arrow: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TooltipRecipeProps = VariantProps<typeof tooltipRecipe>;
+/**
+ * @component Tooltip - Floating label shown on hover or keyboard focus.
+ * Built on BitsUI Tooltip primitive with portal rendering.
+ */
+export interface TooltipProps {
+    /** Tooltip content — a plain string or a Svelte snippet for rich markup. */
+    content: string | Snippet;
+    /** Which side of the trigger the tooltip appears on. */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Alignment of the tooltip along the chosen side. */
+    align?: 'start' | 'center' | 'end';
+    /** Distance in pixels between the trigger element and the tooltip panel. */
+    sideOffset?: number;
+    /** Delay in milliseconds before the tooltip appears after hover/focus. */
+    delay?: number;
+    /** Prevents the tooltip from ever opening. */
+    disabled?: boolean;
+    /** The element that triggers the tooltip on hover/focus. */
+    children?: Snippet;
+    /** Additional CSS classes for the trigger wrapper span. */
+    class?: string;
+    /** Replace the default pointer arrow with custom markup (structural seam). */
+    arrow?: Snippet;
+}

package/dist/components/tooltip/Tooltip.recipe.js

@@ -0,0 +1,26 @@
+import { tv } from "tailwind-variants";
+/**
+ * Tooltip recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component (built on bits-ui Tooltip): the recipe is slotted by role
+ * — trigger (the inline wrapper around the trigger element), content (the
+ * floating panel) and arrow (the pointer). An app restyles any part
+ * independently by extending with `tv({ extend: tooltipRecipe, ... })` in typed
+ * code; base layout, animation and color states are inherited.
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-tooltip-radius) lets a theme/app retune corner radius with no code
+ * change; it defaults to the global axis token via an inline fallback. See
+ * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms
+ * doc generator doesn't grep its tokens).
+ */
+export const tooltipRecipe = tv({
+    slots: {
+        trigger: 'inline-flex',
+        content: `z-50 max-w-[220px] px-2.5 py-1.5 text-xs leading-snug font-mono font-medium tracking-tight rounded-[var(--tera-tooltip-radius,var(--tera-radius-sm))]
+                    bg-neutral-token-13 text-neutral-token-1 shadow-lg
+                    animate-in fade-in zoom-in-95 duration-[var(--tera-duration-fast)] ease-ui
+                    data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95`,
+        arrow: 'text-neutral-token-13',
+    },
+});

package/dist/components/tooltip/Tooltip.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">import { Tooltip as TooltipPrimitive } from 'bits-ui';
-let { content, side = 'top', align = 'center', sideOffset = 6, delay = 500, disabled, children, class: className = '', } = $props();
+import { tooltipRecipe } from './Tooltip.recipe.js';
+let { content, side = 'top', align = 'center', sideOffset = 6, delay = 500, disabled, children, arrow, class: className = '', } = $props();
+const r = tooltipRecipe();
 </script>
 
 <TooltipPrimitive.Provider delayDuration={delay}>
     <TooltipPrimitive.Root {disabled}>
-        <TooltipPrimitive.Trigger class="inline-flex {className}">
+        <TooltipPrimitive.Trigger class={r.trigger({class: className})}>
             {@render children?.()}
         </TooltipPrimitive.Trigger>
 
@@ -13,17 +15,18 @@ let { content, side = 'top', align = 'center', sideOffset = 6, delay = 500, disa
                 {side}
                 {align}
                 {sideOffset}
-                class="z-50 max-w-[200px] px-2.5 py-1.5 text-[10px] leading-tight rounded
-                    bg-neutral-token-11 text-neutral-token-1 shadow-md
-                    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"
+                class={r.content()}
             >
                 {#if typeof content === 'string'}
                     {content}
                 {:else}
                     {@render content()}
                 {/if}
-                <TooltipPrimitive.Arrow class="text-neutral-token-13" />
+                {#if arrow}
+                    {@render arrow()}
+                {:else}
+                    <TooltipPrimitive.Arrow class={r.arrow()} />
+                {/if}
             </TooltipPrimitive.Content>
         </TooltipPrimitive.Portal>
     </TooltipPrimitive.Root>

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

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

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

@@ -1,2 +1,3 @@
 export { default as Tooltip } from './Tooltip.svelte';
-export type { TooltipProps } from './Tooltip.js';
+export { tooltipRecipe } from './Tooltip.recipe';
+export type { TooltipProps, TooltipRecipeProps } from './Tooltip.recipe';

package/dist/components/tooltip/index.js

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

package/dist/index.d.ts

@@ -1,68 +1,58 @@
-export { Accordion, AccordionItem, AccordionContent, AccordionTrigger } from './components/accordion/index.js';
-export { ChatBubble, StreamText, ThinkingLoader, SuggestionChips, PromptInput } from './components/ai/index.js';
-export { Alert } from './components/alert/index.js';
-export { Avatar } from './components/avatar/index.js';
-export { Badge } from './components/badge/index.js';
-export { BrandLogo } from './components/brand-logo/index.js';
-export { Button } from './components/button/index.js';
-export { Card } from './components/card/index.js';
-export { Checkbox } from './components/checkbox/index.js';
-export { Combobox } from './components/combobox/index.js';
-export { Command, CommandEmpty, CommandGroup, CommandItem, CommandLinkItem, CommandInput, CommandList, CommandSeparator, CommandShortcut, CommandLoading } from './components/command/index.js';
-export { DateRangePicker } from './components/date-range-picker/index.js';
-export { Dialog } from './components/dialog/index.js';
-export { Drawer } from './components/drawer/index.js';
-export { DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator } from './components/dropdown-menu/index.js';
+export { Accordion, AccordionItem, AccordionContent, AccordionTrigger, accordionRecipe } from './components/accordion/index.js';
+export { Alert, alertRecipe } from './components/alert/index.js';
+export { Avatar, avatarRecipe } from './components/avatar/index.js';
+export { Badge, badgeRecipe } from './components/badge/index.js';
+export { BottomSheet, bottomSheetStore, bottomSheetRecipe } from './components/bottom-sheet/index.js';
+export { Button, buttonRecipe } from './components/button/index.js';
+export { Card, cardRecipe } from './components/card/index.js';
+export { Checkbox, checkboxRecipe } from './components/checkbox/index.js';
+export { Combobox, comboboxRecipe } from './components/combobox/index.js';
+export { Command, CommandEmpty, CommandGroup, CommandItem, CommandLinkItem, CommandInput, CommandList, CommandSeparator, CommandShortcut, CommandLoading, commandRecipe } from './components/command/index.js';
+export { DateRangePicker, dateRangePickerRecipe } from './components/date-range-picker/index.js';
+export { Dialog, dialogRecipe } from './components/dialog/index.js';
+export { Drawer, drawerRecipe, type DrawerRecipeProps, type DrawerProps } from './components/drawer/index.js';
+export { DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator, dropdownMenuRecipe } from './components/dropdown-menu/index.js';
 export { TeraFontSansSerif, TeraFontMono } from './components/fonts/index.js';
-export { Header } from './components/header/index.js';
-export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCoin, IconCoinConvert, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconLogout, IconMoon, IconPointFilled, IconSearch, IconSettings, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons/index.js';
-export { Input } from './components/input/index.js';
-export { Label } from './components/label/index.js';
-export { LanguagePickerButton } from './components/language-picker-button/index.js';
-export { LightDarkToggle } from './components/light-dark-toggle/index.js';
-export { FeatureCard, StatBlock, PricingCard, TestimonialCard } from './components/marketing/index.js';
-export { Popover } from './components/popover/index.js';
-export { PopoverResponsive } from './components/popover-responsive/index.js';
-export { Select } from './components/select/index.js';
-export { SideNavigation, SideNavigationLayout, SideNavigationGroup, toggleSideNavigation, isSideNavigationGroup } from './components/side-navigation/index.js';
-export { Skeleton } from './components/skeleton/index.js';
-export { Slider } from './components/slider/index.js';
-export { Spinner } from './components/spinner/index.js';
-export { StarRating } from './components/star-rating/index.js';
-export { Switch } from './components/switch/index.js';
-export { Table } from './components/table/index.js';
-export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs/index.js';
-export { TeraUiContext } from './components/tera-ui-context/index.js';
-export { TextArea } from './components/text-area/index.js';
+export { Input, inputRecipe } from './components/input/index.js';
+export { Label, labelRecipe } from './components/label/index.js';
+export { Popover, popoverRecipe } from './components/popover/index.js';
+export { PopoverResponsive, popoverResponsiveRecipe } from './components/popover-responsive/index.js';
+export { Select, selectRecipe } from './components/select/index.js';
+export { Skeleton, skeletonRecipe } from './components/skeleton/index.js';
+export { Slider, sliderRecipe } from './components/slider/index.js';
+export { Spinner, spinnerRecipe } from './components/spinner/index.js';
+export { StarRating, starRatingRecipe } from './components/star-rating/index.js';
+export { Switch, switchRecipe } from './components/switch/index.js';
+export { Table, tableRecipe } from './components/table/index.js';
+export { Tabs, TabsList, TabsItem, TabsContent, tabsRecipe } from './components/tabs/index.js';
+export { TextArea, textAreaRecipe } from './components/text-area/index.js';
 export { ToastContainer, toast } from './components/toast/index.js';
-export { Tooltip } from './components/tooltip/index.js';
-export { UserAvatarWithMenu } from './components/user-avatar-with-menu/index.js';
-export type { AccordionProps, AccordionItemProps, AccordionContentProps, AccordionTriggerProps } from './components/accordion/index.js';
-export type { AvatarProps } from './components/avatar/index.js';
-export type { BadgeProps } from './components/badge/index.js';
-export type { BrandLogoProps } from './components/brand-logo/index.js';
-export type { ButtonProps } from './components/button/index.js';
-export type { CardProps } from './components/card/index.js';
-export type { CheckboxProps } from './components/checkbox/index.js';
-export type { ComboboxProps, ComboboxItem } from './components/combobox/index.js';
-export type { DateRangePickerProps } from './components/date-range-picker/index.js';
-export type { DialogProps, DialogPropsAstro } from './components/dialog/index.js';
-export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuHeaderProps, DropdownMenuSeparatorProps } from './components/dropdown-menu/index.js';
-export type { HeaderProps } from './components/header/index.js';
-export type { InputProps } from './components/input/index.js';
-export type { LabelProps } from './components/label/index.js';
-export type { LanguagePickerButtonProps } from './components/language-picker-button/index.js';
-export type { LightDarkToggleProps } from './components/light-dark-toggle/index.js';
-export type { PopoverProps } from './components/popover/index.js';
-export type { PopoverResponsiveProps } from './components/popover-responsive/index.js';
-export type { SelectProps, SelectOption } from './components/select/index.js';
-export type { SideNavigationItem, SideNavigationGroupItem, SideNavigationEntry, SideNavigationProps } from './components/side-navigation/index.js';
-export type { SliderProps } from './components/slider/index.js';
-export type { StarRatingProps } from './components/star-rating/index.js';
-export type { SwitchProps } from './components/switch/index.js';
-export type { TabsProps, TabsListProps, TabsItemProps, TabsContentProps } from './components/tabs/index.js';
-export type { TeraUiContextProps } from './components/tera-ui-context/index.js';
-export type { TextAreaProps, AutoSizeConfig } from './components/text-area/index.js';
+export { Tooltip, tooltipRecipe } from './components/tooltip/index.js';
+export type { AccordionProps, AccordionItemProps, AccordionContentProps, AccordionTriggerProps, AccordionRecipeProps } from './components/accordion/index.js';
+export type { AlertRecipeProps, AlertProps, AlertVariant } from './components/alert/index.js';
+export type { AvatarProps, AvatarRecipeProps } from './components/avatar/index.js';
+export type { BadgeProps, BadgeRecipeProps } from './components/badge/index.js';
+export type { BottomSheetRecipeProps, BottomSheetProps, BottomSheetConfig, SheetStackItem } from './components/bottom-sheet/index.js';
+export type { ButtonProps, ButtonRecipeProps } from './components/button/index.js';
+export type { CardProps, CardRecipeProps } from './components/card/index.js';
+export type { CheckboxProps, CheckboxRecipeProps } from './components/checkbox/index.js';
+export type { ComboboxProps, ComboboxItem, ComboboxRecipeProps } from './components/combobox/index.js';
+export type { CommandRecipeProps } from './components/command/index.js';
+export type { DateRangePickerProps, DateRangePickerRecipeProps } from './components/date-range-picker/index.js';
+export type { DialogProps, DialogPropsAstro, DialogRecipeProps } from './components/dialog/index.js';
+export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuHeaderProps, DropdownMenuSeparatorProps, DropdownMenuRecipeProps } from './components/dropdown-menu/index.js';
+export type { InputProps, InputRecipeProps } from './components/input/index.js';
+export type { LabelProps, LabelRecipeProps } from './components/label/index.js';
+export type { PopoverProps, PopoverRecipeProps } from './components/popover/index.js';
+export type { PopoverResponsiveProps, PopoverResponsiveRecipeProps } from './components/popover-responsive/index.js';
+export type { SelectProps, SelectOption, SelectGroup, SelectRecipeProps } from './components/select/index.js';
+export type { SkeletonProps, SkeletonRecipeProps, SkeletonVariant } from './components/skeleton/index.js';
+export type { SliderProps, SliderRecipeProps } from './components/slider/index.js';
+export type { SpinnerRecipeProps, SpinnerProps } from './components/spinner/index.js';
+export type { StarRatingProps, StarRatingRecipeProps } from './components/star-rating/index.js';
+export type { SwitchProps, SwitchRecipeProps } from './components/switch/index.js';
+export type { TableProps, TableColumn, TableRecipeProps } from './components/table/index.js';
+export type { TabsProps, TabsListProps, TabsItemProps, TabsContentProps, TabsRecipeProps, TabsVariant } from './components/tabs/index.js';
+export type { TextAreaProps, AutoSizeConfig, TextAreaRecipeProps } from './components/text-area/index.js';
 export type { ToastItem, ToastVariant } from './components/toast/index.js';
-export type { TooltipProps } from './components/tooltip/index.js';
-export type { UserAvatarWithMenuProps } from './components/user-avatar-with-menu/index.js';
+export type { TooltipProps, TooltipRecipeProps } from './components/tooltip/index.js';

package/dist/index.js

@@ -1,39 +1,30 @@
-export { Accordion, AccordionItem, AccordionContent, AccordionTrigger } from './components/accordion/index.js';
-export { ChatBubble, StreamText, ThinkingLoader, SuggestionChips, PromptInput } from './components/ai/index.js';
-export { Alert } from './components/alert/index.js';
-export { Avatar } from './components/avatar/index.js';
-export { Badge } from './components/badge/index.js';
-export { BrandLogo } from './components/brand-logo/index.js';
-export { Button } from './components/button/index.js';
-export { Card } from './components/card/index.js';
-export { Checkbox } from './components/checkbox/index.js';
-export { Combobox } from './components/combobox/index.js';
-export { Command, CommandEmpty, CommandGroup, CommandItem, CommandLinkItem, CommandInput, CommandList, CommandSeparator, CommandShortcut, CommandLoading } from './components/command/index.js';
-export { DateRangePicker } from './components/date-range-picker/index.js';
-export { Dialog } from './components/dialog/index.js';
-export { Drawer } from './components/drawer/index.js';
-export { DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator } from './components/dropdown-menu/index.js';
+export { Accordion, AccordionItem, AccordionContent, AccordionTrigger, accordionRecipe } from './components/accordion/index.js';
+export { Alert, alertRecipe } from './components/alert/index.js';
+export { Avatar, avatarRecipe } from './components/avatar/index.js';
+export { Badge, badgeRecipe } from './components/badge/index.js';
+export { BottomSheet, bottomSheetStore, bottomSheetRecipe } from './components/bottom-sheet/index.js';
+export { Button, buttonRecipe } from './components/button/index.js';
+export { Card, cardRecipe } from './components/card/index.js';
+export { Checkbox, checkboxRecipe } from './components/checkbox/index.js';
+export { Combobox, comboboxRecipe } from './components/combobox/index.js';
+export { Command, CommandEmpty, CommandGroup, CommandItem, CommandLinkItem, CommandInput, CommandList, CommandSeparator, CommandShortcut, CommandLoading, commandRecipe } from './components/command/index.js';
+export { DateRangePicker, dateRangePickerRecipe } from './components/date-range-picker/index.js';
+export { Dialog, dialogRecipe } from './components/dialog/index.js';
+export { Drawer, drawerRecipe } from './components/drawer/index.js';
+export { DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator, dropdownMenuRecipe } from './components/dropdown-menu/index.js';
 export { TeraFontSansSerif, TeraFontMono } from './components/fonts/index.js';
-export { Header } from './components/header/index.js';
-export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCoin, IconCoinConvert, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconLogout, IconMoon, IconPointFilled, IconSearch, IconSettings, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons/index.js';
-export { Input } from './components/input/index.js';
-export { Label } from './components/label/index.js';
-export { LanguagePickerButton } from './components/language-picker-button/index.js';
-export { LightDarkToggle } from './components/light-dark-toggle/index.js';
-export { FeatureCard, StatBlock, PricingCard, TestimonialCard } from './components/marketing/index.js';
-export { Popover } from './components/popover/index.js';
-export { PopoverResponsive } from './components/popover-responsive/index.js';
-export { Select } from './components/select/index.js';
-export { SideNavigation, SideNavigationLayout, SideNavigationGroup, toggleSideNavigation, isSideNavigationGroup } from './components/side-navigation/index.js';
-export { Skeleton } from './components/skeleton/index.js';
-export { Slider } from './components/slider/index.js';
-export { Spinner } from './components/spinner/index.js';
-export { StarRating } from './components/star-rating/index.js';
-export { Switch } from './components/switch/index.js';
-export { Table } from './components/table/index.js';
-export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs/index.js';
-export { TeraUiContext } from './components/tera-ui-context/index.js';
-export { TextArea } from './components/text-area/index.js';
+export { Input, inputRecipe } from './components/input/index.js';
+export { Label, labelRecipe } from './components/label/index.js';
+export { Popover, popoverRecipe } from './components/popover/index.js';
+export { PopoverResponsive, popoverResponsiveRecipe } from './components/popover-responsive/index.js';
+export { Select, selectRecipe } from './components/select/index.js';
+export { Skeleton, skeletonRecipe } from './components/skeleton/index.js';
+export { Slider, sliderRecipe } from './components/slider/index.js';
+export { Spinner, spinnerRecipe } from './components/spinner/index.js';
+export { StarRating, starRatingRecipe } from './components/star-rating/index.js';
+export { Switch, switchRecipe } from './components/switch/index.js';
+export { Table, tableRecipe } from './components/table/index.js';
+export { Tabs, TabsList, TabsItem, TabsContent, tabsRecipe } from './components/tabs/index.js';
+export { TextArea, textAreaRecipe } from './components/text-area/index.js';
 export { ToastContainer, toast } from './components/toast/index.js';
-export { Tooltip } from './components/tooltip/index.js';
-export { UserAvatarWithMenu } from './components/user-avatar-with-menu/index.js';
+export { Tooltip, tooltipRecipe } from './components/tooltip/index.js';

package/dist/{components → internal}/icons/IconCheck.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import { styles } from "./Icons";
 import IconCheck from "@tabler/icons-svelte/icons/check";
 let { children, ...props } = $props();
-</script>
-
-<IconCheck class={styles({...props})}/>
-
+</script>
+
+<IconCheck class={styles({...props})}/>

package/dist/{components → internal}/icons/IconChevronDown.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import { styles } from "./Icons";
 import IconChevronDown from "@tabler/icons-svelte/icons/chevron-down";
 let { children, ...props } = $props();
-</script>
-
-<IconChevronDown class={styles({...props})}/>
-
+</script>
+
+<IconChevronDown class={styles({...props})}/>