tera-system-ui 0.1.76 → 0.2.2

package/dist/components/tabs/Tabs.recipe.js

@@ -0,0 +1,76 @@
+/**
+ * Tabs recipe — the canonical styled layer for the base design language.
+ *
+ * Tabbed content panels built on the BitsUI Tabs primitive (root / list /
+ * trigger / content). The tabs are a multi-part component, so the recipe is
+ * SLOTTED: each visible part gets a named slot (root, list, trigger, content,
+ * indicator) that an app can target independently when extending with
+ * `tv({ extend: tabsRecipe, ... })` in typed code.
+ *
+ * Two visual styles are expressed as a `variant` variant — `line` (underline /
+ * accent-bar indicator) and `ios` (segmented control with a sliding pill). The
+ * `line` style also adapts to `orientation` (the indicator moves to the right
+ * edge when vertical). All of these were previously if/else branches in the
+ * markup; no class is lost.
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-tabs-radius) lets a theme/app retune the iOS segmented container's
+ * corner radius with no code change; it defaults to the global axis token via
+ * an inline fallback. 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 tabsRecipe = tv({
+    slots: {
+        root: 'max-h-full gap-2',
+        list: 'relative flex',
+        trigger: 'outline-none focus-visible:shadow-focus',
+        content: 'overflow-auto',
+        indicator: 'absolute pointer-events-none',
+    },
+    variants: {
+        variant: {
+            line: {
+                trigger: 'tab-button font-semibold px-2.5 py-1.5 rounded text-text-secondary hover:text-primary-token-4 hover:bg-surface-hover transition-[color,background-color] ease-ui duration-[var(--tera-duration-fast)] data-[state=active]:text-primary-token-7',
+                indicator: 'rounded-full bg-primary-token-5',
+            },
+            ios: {
+                list: 'bg-neutral-token-3 p-1 rounded-[var(--tera-tabs-radius,var(--tera-radius-lg))]',
+                trigger: 'relative z-10 flex-1 px-4 py-1.5 text-sm font-semibold text-center rounded-full select-none text-text-secondary data-[state=active]:text-text-primary transition-colors ease-ui duration-[var(--tera-duration-fast)]',
+                indicator: 'inset-y-1 rounded-md bg-surface shadow-sm transition-[left,width] duration-[var(--tera-duration-base)] ease-spring',
+            },
+        },
+        orientation: {
+            horizontal: {
+                root: 'grid grid-rows-[auto_1fr]',
+            },
+            vertical: {
+                root: 'grid grid-cols-[auto_1fr]',
+            },
+        },
+    },
+    compoundVariants: [
+        // Default horizontal line style: bottom border + underline indicator
+        {
+            variant: 'line',
+            orientation: 'horizontal',
+            class: {
+                list: 'gap-2 items-end border-b border-border-default',
+                indicator: 'bottom-0 h-0.5 transition-[left,width] duration-[var(--tera-duration-fast)] ease-ui',
+            },
+        },
+        // Vertical line style: right-side accent bar indicator
+        {
+            variant: 'line',
+            orientation: 'vertical',
+            class: {
+                list: 'flex-col gap-1 border-r border-border-default',
+                indicator: 'right-0 w-0.5 transition-[top,height] duration-[var(--tera-duration-fast)] ease-ui',
+            },
+        },
+    ],
+    defaultVariants: {
+        variant: 'line',
+        orientation: 'horizontal',
+    },
+});

package/dist/components/tabs/Tabs.svelte.d.ts

@@ -1,64 +1,8 @@
-import type { Snippet } from "svelte";
-export type TabsVariant = 'line' | 'ios';
+import type { TabsVariant } from "./Tabs.recipe.js";
+export type { TabsVariant } from "./Tabs.recipe.js";
 export type TabsContext = {
     readonly variant: TabsVariant;
     readonly orientation: 'horizontal' | 'vertical';
 };
 export declare const setTabsContext: (ctx: TabsContext) => TabsContext;
 export declare const getTabsContext: () => TabsContext;
-export type TabsProps = {
-    children?: Snippet;
-    /** Currently active tab value. Bindable. */
-    value?: string;
-    /** Called when the active tab changes. */
-    onchange?: (newTab: string) => void;
-    /** Additional CSS classes for the root element. */
-    class?: string;
-    /** Visual style of the tab list. */
-    variant?: TabsVariant;
-    /**
-     * How tabs activate on keyboard focus.
-     * - 'automatic': tab content switches immediately when a tab receives focus.
-     * - 'manual': the user must press Enter or Space to activate a focused tab.
-     */
-    activationMode?: 'automatic' | 'manual';
-    /**
-     * Orientation of the tab list.
-     * 'vertical' renders the list as a column alongside the content.
-     * Only supported with the 'line' variant.
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /** Whether keyboard navigation wraps from the last tab back to the first. */
-    loop?: boolean;
-    /** Bindable reference to the root element. */
-    ref?: HTMLDivElement | null;
-    [key: string]: unknown;
-};
-export type TabsListProps = {
-    children?: Snippet;
-    /** Additional CSS classes for the tab list container. */
-    class?: string;
-    indicatorClass?: string;
-    ref?: HTMLElement | null;
-    [key: string]: unknown;
-};
-export type TabsItemProps = {
-    children?: Snippet;
-    /** The value this tab represents — must match a TabsContent value. */
-    value: string;
-    /** Prevents the user from activating this tab. */
-    disabled?: boolean;
-    /** Additional CSS classes for the tab trigger. */
-    class?: string;
-    ref?: HTMLElement | null;
-    [key: string]: unknown;
-};
-export type TabsContentProps = {
-    children?: Snippet;
-    /** The value this content panel corresponds to — must match a TabsItem value. */
-    value: string;
-    /** Additional CSS classes for the content panel. */
-    class?: string;
-    ref?: HTMLElement | null;
-    [key: string]: unknown;
-};

package/dist/components/tabs/Tabs.svelte.js

@@ -2,6 +2,9 @@
  * @component Tabs - Tabbed content panels with line and iOS segmented variants.
  * Parts: Tabs, TabsList, TabsItem, TabsContent.
  * Built on BitsUI Tabs primitive.
+ *
+ * This module holds the runtime context only. Styling and the Props interfaces
+ * live in ./Tabs.recipe.ts.
  */
 import { getContext, setContext } from "svelte";
 const TABS_CTX = 'tera-tabs-ctx';

package/dist/components/tabs/components/Tabs.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">import { Tabs as TabsPrimitive } from 'bits-ui';
-import { cn } from '../../../utils/utils.js';
+import { tabsRecipe } from '../Tabs.recipe.js';
 import { setTabsContext } from '../Tabs.svelte.js';
-let { children, value = $bindable(null), class: className, variant = 'line', onchange, activationMode, orientation = 'horizontal', loop, ...props } = $props();
+let { children, 
+// Default to '' (not undefined) so an uncontrolled <Tabs> (no value /
+// bind:value) doesn't bind `undefined` into bits-ui's value, which has a
+// fallback — that combination throws `props_invalid_value` in Svelte 5.
+value = $bindable(''), class: className, variant = 'line', onchange, activationMode, orientation = 'horizontal', loop, ...props } = $props();
 // Pass getter objects so consumers read the current value reactively
 setTabsContext({
     get variant() { return variant; },
     get orientation() { return orientation; }
 });
-const isVertical = $derived(orientation === 'vertical');
+const r = $derived(tabsRecipe({ variant, orientation }));
 </script>
 
 <TabsPrimitive.Root
@@ -16,11 +20,7 @@ const isVertical = $derived(orientation === 'vertical');
     {activationMode}
     {orientation}
     {loop}
-    class={cn(
-        isVertical ? 'grid grid-cols-[auto_1fr]' : 'grid grid-rows-[auto_1fr]',
-        'max-h-full gap-2',
-        className
-    )}
+    class={r.root({class: className})}
     {...props}
 >
     {@render children?.()}

package/dist/components/tabs/components/Tabs.svelte.d.ts

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

package/dist/components/tabs/components/TabsContent.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">import { Tabs as TabsPrimitive } from 'bits-ui';
-import { cn } from '../../../utils/utils.js';
+import { tabsRecipe } from '../Tabs.recipe.js';
 let { children, class: className, value, ref = $bindable(null), ...props } = $props();
+const r = tabsRecipe();
 </script>
 
 <TabsPrimitive.Content
     bind:ref
     {value}
-    class={cn('overflow-auto', className)}
+    class={r.content({class: className})}
     {...props}
 >
     {@render children?.()}

package/dist/components/tabs/components/TabsContent.svelte.d.ts

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

package/dist/components/tabs/components/TabsItem.svelte

@@ -1,43 +1,18 @@
 <script lang="ts">import { Tabs as TabsPrimitive } from 'bits-ui';
-import { cn } from '../../../utils/utils.js';
+import { tabsRecipe } from '../Tabs.recipe.js';
 import { getTabsContext } from '../Tabs.svelte.js';
 let { children, class: className, value, ref = $bindable(null), ...props } = $props();
 const ctx = getTabsContext();
 const variant = $derived(ctx.variant);
+const orientation = $derived(ctx.orientation);
+const r = $derived(tabsRecipe({ variant, orientation }));
 </script>
 
-{#if variant === 'ios'}
-    <!-- iOS: flex-1 equal width, no bg hover (pill handles visual feedback) -->
-    <TabsPrimitive.Trigger
-        bind:ref
-        {value}
-        class={cn(
-            'relative z-10 flex-1 px-4 py-1.5 text-sm font-semibold text-center rounded-full select-none',
-            'text-text-secondary',
-            'data-[state=active]:text-text-primary',
-            'transition-colors ease-ui duration-150',
-            'outline-none focus-visible:shadow-focus',
-            className
-        )}
-        {...props}
-    >
-        {@render children?.()}
-    </TabsPrimitive.Trigger>
-{:else}
-    <!-- Default line style -->
-    <TabsPrimitive.Trigger
-        bind:ref
-        {value}
-        class={cn(
-            'tab-button font-semibold px-2.5 py-1.5 rounded',
-            'text-text-secondary hover:text-primary-token-4 hover:bg-surface-hover',
-            'transition-[color,background-color] ease-ui duration-150',
-            'data-[state=active]:text-primary-token-7',
-            'outline-none focus-visible:shadow-focus',
-            className
-        )}
-        {...props}
-    >
-        {@render children?.()}
-    </TabsPrimitive.Trigger>
-{/if}
+<TabsPrimitive.Trigger
+    bind:ref
+    {value}
+    class={r.trigger({class: className})}
+    {...props}
+>
+    {@render children?.()}
+</TabsPrimitive.Trigger>

package/dist/components/tabs/components/TabsItem.svelte.d.ts

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

package/dist/components/tabs/components/TabsList.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">import { Tabs as TabsPrimitive } from 'bits-ui';
-import { cn } from '../../../utils/utils.js';
+import { tabsRecipe } from '../Tabs.recipe.js';
 import { getTabsContext } from '../Tabs.svelte.js';
 let { children, class: className, indicatorClass, ref = $bindable(null), ...props } = $props();
 const ctx = getTabsContext();
 const variant = $derived(ctx.variant);
 const orientation = $derived(ctx.orientation);
 const isVertical = $derived(orientation === 'vertical');
+const r = $derived(tabsRecipe({ variant, orientation }));
 let tabsList = $state(null);
 let tabIndicator = $state(null);
 function updateIndicator() {
@@ -47,44 +48,14 @@ $effect(() => {
 });
 </script>
 
-{#if variant === 'ios'}
-    <!-- iOS segmented control: gray pill container, sliding white background — horizontal only -->
-    <TabsPrimitive.List
-            bind:ref={tabsList}
-            class={cn('relative flex bg-neutral-token-3 p-1 rounded-lg', className)}
-            {...props}
-    >
-        {@render children?.()}
-        <!-- Sliding white pill (background layer) -->
-        <div
-                bind:this={tabIndicator}
-                class={cn("absolute inset-y-1 rounded-md bg-surface shadow-sm transition-[left,width] duration-200 ease-spring pointer-events-none", indicatorClass)}
-        ></div>
-    </TabsPrimitive.List>
-{:else if isVertical}
-    <!-- Vertical line style: right-side accent bar indicator -->
-    <TabsPrimitive.List
-            bind:ref={tabsList}
-            class={cn('relative flex flex-col gap-1 border-r border-border-default', className)}
-            {...props}
-    >
-        {@render children?.()}
-        <div
-                bind:this={tabIndicator}
-                class="absolute right-0 w-0.5 rounded-full bg-primary-token-5 transition-[top,height] duration-150 ease-ui pointer-events-none"
-        ></div>
-    </TabsPrimitive.List>
-{:else}
-    <!-- Default horizontal line style: underline indicator -->
-    <TabsPrimitive.List
-            bind:ref={tabsList}
-            class={cn('relative flex gap-2 items-end border-b border-border-default', className)}
-            {...props}
-    >
-        {@render children?.()}
-        <div
-                bind:this={tabIndicator}
-                class="absolute bottom-0 h-0.5 rounded-full bg-primary-token-5 transition-[left,width] duration-150 ease-ui pointer-events-none"
-        ></div>
-    </TabsPrimitive.List>
-{/if}
+<TabsPrimitive.List
+        bind:ref={tabsList}
+        class={r.list({class: className})}
+        {...props}
+>
+    {@render children?.()}
+    <div
+            bind:this={tabIndicator}
+            class={r.indicator({class: indicatorClass})}
+    ></div>
+</TabsPrimitive.List>

package/dist/components/tabs/components/TabsList.svelte.d.ts

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

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

@@ -2,4 +2,5 @@ export { default as Tabs } from './components/Tabs.svelte';
 export { default as TabsList } from './components/TabsList.svelte';
 export { default as TabsItem } from './components/TabsItem.svelte';
 export { default as TabsContent } from './components/TabsContent.svelte';
-export type { TabsProps, TabsListProps, TabsItemProps, TabsContentProps } from './Tabs.svelte.js';
+export { tabsRecipe } from './Tabs.recipe';
+export type { TabsProps, TabsListProps, TabsItemProps, TabsContentProps, TabsRecipeProps, TabsVariant } from './Tabs.recipe';

package/dist/components/tabs/index.js

@@ -2,3 +2,4 @@ export { default as Tabs } from './components/Tabs.svelte';
 export { default as TabsList } from './components/TabsList.svelte';
 export { default as TabsItem } from './components/TabsItem.svelte';
 export { default as TabsContent } from './components/TabsContent.svelte';
+export { tabsRecipe } from './Tabs.recipe';

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

@@ -0,0 +1,181 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLTextareaAttributes } from "svelte/elements";
+/**
+ * TextArea recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component, so it slots: `root` (positioning wrapper), `field`
+ * (the textarea itself, which carries every variant/state), and `clear` (the
+ * optional clear-button affordance). An app owns its look by extending this
+ * recipe with `tv({ extend: textAreaRecipe, ... })` in typed code — base
+ * sizing and states 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).
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-textarea-radius) lets a theme/app retune the corner radius with no
+ * code change; it defaults to a global axis token in tera-ui-base.css.
+ */
+export declare const textAreaRecipe: 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;
+        };
+    };
+    allowClear: {
+        true: {
+            field: string;
+        };
+    };
+    status: {
+        error: {
+            field: string;
+        };
+        warning: {
+            field: string;
+        };
+    };
+}, {
+    root: string;
+    field: 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;
+        };
+    };
+    allowClear: {
+        true: {
+            field: string;
+        };
+    };
+    status: {
+        error: {
+            field: string;
+        };
+        warning: {
+            field: string;
+        };
+    };
+}, {
+    root: string;
+    field: 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;
+        };
+    };
+    allowClear: {
+        true: {
+            field: string;
+        };
+    };
+    status: {
+        error: {
+            field: string;
+        };
+        warning: {
+            field: string;
+        };
+    };
+}, {
+    root: string;
+    field: string;
+    clear: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TextAreaRecipeProps = VariantProps<typeof textAreaRecipe>;
+export type AutoSizeConfig = boolean | {
+    minRows?: number;
+    maxRows?: number;
+};
+export interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'disabled' | 'rows' | 'prefix'>, TextAreaRecipeProps {
+    children?: Snippet;
+    class?: string;
+    value?: string;
+    ref?: HTMLTextAreaElement | null;
+    autoSize?: AutoSizeConfig;
+    rows?: number;
+    allowClear?: boolean;
+    showCount?: boolean;
+    maxLength?: number;
+    /** Replace the default clear icon (IconX) with custom markup (structural seam). */
+    clearIcon?: Snippet;
+}

package/dist/components/text-area/TextArea.recipe.js

@@ -0,0 +1,81 @@
+import { tv } from "tailwind-variants";
+/**
+ * TextArea recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component, so it slots: `root` (positioning wrapper), `field`
+ * (the textarea itself, which carries every variant/state), and `clear` (the
+ * optional clear-button affordance). An app owns its look by extending this
+ * recipe with `tv({ extend: textAreaRecipe, ... })` in typed code — base
+ * sizing and states 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).
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-textarea-radius) lets a theme/app retune the corner radius with no
+ * code change; it defaults to a global axis token in tera-ui-base.css.
+ */
+export const textAreaRecipe = tv({
+    slots: {
+        root: 'relative w-full',
+        field: 'w-full inline-flex items-start rounded-[var(--tera-textarea-radius,var(--tera-radius-base))] outline-none font-normal text-text-primary placeholder:text-text-tertiary resize-y transition-[border-color,box-shadow,background-color,height] ease-ui duration-[var(--tera-duration-fast)]',
+        clear: 'absolute top-2 right-2 text-neutral-token-7 hover:text-neutral-token-10 transition-colors z-10',
+    },
+    variants: {
+        variant: {
+            outlined: {
+                field: 'border border-border-default bg-surface 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 resize-none',
+            },
+            false: {
+                field: 'cursor-text',
+            },
+        },
+        size: {
+            sm: { field: 'px-[var(--tera-control-px-md)] py-1 text-sm min-h-[60px]' },
+            md: { field: 'px-[var(--tera-control-px-md)] py-1.5 text-sm min-h-[80px]' },
+            lg: { field: 'px-[var(--tera-control-px-md)] py-2 text-base min-h-[100px]' },
+        },
+        allowClear: {
+            true: { field: 'pr-9' },
+        },
+        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',
+    },
+});