tera-system-ui 0.1.76 → 0.2.2

package/dist/components/avatar/Avatar.recipe.js

@@ -0,0 +1,37 @@
+import { tv } from "tailwind-variants";
+/**
+ * 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 const avatarRecipe = tv({
+    slots: {
+        root: 'relative rounded-[var(--tera-avatar-radius,9999px)] object-cover bg-surface-sunken text-text-secondary border border-border-strong shadow-xs select-none grid place-content-center leading-none font-mono font-semibold tracking-tight overflow-clip',
+        ring: 'pointer-events-none absolute inset-[0px] border-[2px] border-transparent rounded-[var(--tera-avatar-radius,9999px)]',
+    },
+    variants: {
+        size: {
+            sm: { root: 'size-8 text-xs', ring: 'border-[2px]' },
+            md: { root: 'size-10 text-sm', ring: 'border-[2px]' },
+            lg: { root: 'size-12 text-base', ring: 'border-[3px]' },
+            xl: { root: 'size-16 text-xl', ring: 'border-[3px]' },
+        },
+        border: {
+            true: { root: 'text-text-primary', ring: 'border-border-strong' },
+            false: {},
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        border: true,
+    },
+});

package/dist/components/avatar/Avatar.svelte

@@ -1,28 +1,23 @@
-<script lang="ts">import { styles } from "./Avatar";
-import { getUserAvatarUrl } from "../../internal/service/user.service";
-import { cn } from "../../utils/utils";
-let { children, alt = 'Avatar', size = 'md', src, class: className, border = true, ref = $bindable(), userUid, apiUrl, ...props } = $props();
+<script lang="ts">import { avatarRecipe } from "./Avatar.recipe";
+let { children, alt = 'Avatar', size = 'md', src, class: className, border = true, ref = $bindable(), ...props } = $props();
 let isError = $state();
 function handleErrorImage() {
     isError = true;
 }
-let imgUrl = $derived(src ? src : userUid ? getUserAvatarUrl(userUid, apiUrl) : undefined);
-</script>
-
-<div bind:this={ref}
-     class={styles({ size, className, border })} {...props}>
-    {#if imgUrl && !isError}
-        <img src={imgUrl} alt={alt} onerror={handleErrorImage} class="w-full h-full object-cover"/>
-    {:else}
-        <span class="leading-none">
-            {@render children?.()}
-        </span>
-    {/if}
-    <div class={
-        cn("absolute inset-[0px] border-[2px] border-neutral-token-2 rounded-full", {
-            'border-[3px]' : size === 'lg' || size === 'xl',
-        })
-    }>
-
-    </div>
-</div>
+let imgUrl = $derived(src);
+let r = $derived(avatarRecipe({ size, border }));
+</script>
+
+<div bind:this={ref}
+     class={r.root({class: className})} {...props}>
+    {#if imgUrl && !isError}
+        <img src={imgUrl} alt={alt} onerror={handleErrorImage} class="w-full h-full object-cover"/>
+    {:else}
+        <span class="leading-none">
+            {@render children?.()}
+        </span>
+    {/if}
+    <div class={r.ring({size, border})}>
+
+    </div>
+</div>

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

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

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

@@ -1,2 +1,3 @@
 export { default as Avatar } from './Avatar.svelte';
-export type { AvatarProps } from './Avatar';
+export { avatarRecipe } from './Avatar.recipe';
+export type { AvatarProps, AvatarRecipeProps } from './Avatar.recipe';

package/dist/components/avatar/index.js

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

package/dist/components/badge/Badge.recipe.d.ts

@@ -0,0 +1,68 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * Badge 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: badgeRecipe, ... })` in typed code — base sizing and tones
+ * 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-badge-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 badgeRecipe: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        primary: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, "inline-flex items-center gap-1.5 rounded-[var(--tera-badge-radius,var(--tera-radius-sm))] font-mono font-medium uppercase whitespace-nowrap select-none shadow-xs transition-[colors,box-shadow] duration-[var(--tera-duration-fast)] ease-ui", {
+    variant: {
+        default: string;
+        primary: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        primary: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, "inline-flex items-center gap-1.5 rounded-[var(--tera-badge-radius,var(--tera-radius-sm))] font-mono font-medium uppercase whitespace-nowrap select-none shadow-xs transition-[colors,box-shadow] duration-[var(--tera-duration-fast)] ease-ui", unknown, unknown, undefined>>;
+export type BadgeRecipeProps = VariantProps<typeof badgeRecipe>;
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, BadgeRecipeProps {
+    children?: Snippet;
+    class?: string;
+    dot?: boolean;
+    closable?: boolean;
+    onclose?: () => void;
+    /** Replace the default leading dot indicator with custom markup (structural seam). */
+    dotIcon?: Snippet;
+    /** Replace the default close button icon with custom markup (structural seam). */
+    closeIcon?: Snippet;
+}

package/dist/components/badge/Badge.recipe.js

@@ -0,0 +1,35 @@
+import { tv } from "tailwind-variants";
+/**
+ * Badge 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: badgeRecipe, ... })` in typed code — base sizing and tones
+ * 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-badge-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 badgeRecipe = tv({
+    base: 'inline-flex items-center gap-1.5 rounded-[var(--tera-badge-radius,var(--tera-radius-sm))] font-mono font-medium uppercase whitespace-nowrap select-none shadow-xs transition-[colors,box-shadow] duration-[var(--tera-duration-fast)] ease-ui',
+    variants: {
+        variant: {
+            default: 'bg-surface-sunken text-text-secondary border border-border-strong',
+            primary: 'bg-interactive-subtle text-interactive-text border border-interactive-border',
+            success: 'bg-success-subtle text-success-text border border-success-border',
+            error: 'bg-error-subtle text-error-text border border-error-border',
+            warning: 'bg-warning-subtle text-warning-text border border-warning-border',
+            info: 'bg-information-subtle text-information-text border border-information-border',
+        },
+        size: {
+            sm: 'px-1.5 py-0.5 text-[10px] leading-none tracking-wide',
+            md: 'px-2 py-0.5 text-[11px] leading-none tracking-wider',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md',
+    },
+});

package/dist/components/badge/Badge.svelte

@@ -1,10 +1,14 @@
-<script lang="ts">import { styles } from './Badge.js';
-let { children, class: className, variant, size, dot, closable, onclose, ...props } = $props();
+<script lang="ts">import { badgeRecipe } from './Badge.recipe';
+let { children, class: className, variant, size, dot, closable, onclose, dotIcon, closeIcon, ...props } = $props();
 </script>
 
-<span class={styles({ variant, size, className })} {...props}>
+<span class={badgeRecipe({ variant, size, class: className })} {...props}>
     {#if dot}
-        <span class="size-1.5 rounded-full bg-current opacity-70"></span>
+        {#if dotIcon}
+            {@render dotIcon()}
+        {:else}
+            <span class="size-1.5 rounded-[1px] bg-current" aria-hidden="true"></span>
+        {/if}
     {/if}
     {@render children?.()}
     {#if closable}
@@ -14,9 +18,13 @@ let { children, class: className, variant, size, dot, closable, onclose, ...prop
             onclick={onclose}
             aria-label="Remove"
         >
-            <svg class="size-2.5" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M2 2l6 6M8 2l-6 6"/>
-            </svg>
+            {#if closeIcon}
+                {@render closeIcon()}
+            {:else}
+                <svg class="size-2.5" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <path d="M2 2l6 6M8 2l-6 6"/>
+                </svg>
+            {/if}
         </button>
     {/if}
 </span>

package/dist/components/badge/Badge.svelte.d.ts

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

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

@@ -1,2 +1,3 @@
 export { default as Badge } from './Badge.svelte';
-export type { BadgeProps } from './Badge.js';
+export { badgeRecipe } from './Badge.recipe';
+export type { BadgeProps, BadgeRecipeProps } from './Badge.recipe';

package/dist/components/badge/index.js

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

package/dist/components/bottom-sheet/BottomSheet.recipe.d.ts

@@ -0,0 +1,130 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+/**
+ * BottomSheet recipe — the canonical styled layer for the draggable sheet.
+ *
+ * An iOS-style bottom sheet with snap points, gesture dragging, container-scale
+ * effect, and stacking (custom behavior — not bits-ui). The recipe is slotted by
+ * role — backdrop / sheet / handle / handleBar / header / closeButton / content —
+ * so an app can restyle any part independently. Only the *themeable, static*
+ * surface lives here; the per-frame transforms (translate / scale / opacity) are
+ * driven imperatively from the component and the runtime transition duration is
+ * passed through the `--transition-duration` CSS var.
+ *
+ * The `constrained` variant switches fixed → absolute positioning when the sheet
+ * is bounded inside a container; `dragging` carries the grabbing cursor.
+ *
+ * Primary customization surface: extend with `tv({ extend: bottomSheetRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS var (--tera-bottom-sheet-radius)
+ * retunes the top corner radius with no code change; it defaults to the prior
+ * literal value inline.
+ */
+export declare const bottomSheetRecipe: import("tailwind-variants").TVReturnType<{
+    constrained: {
+        true: {
+            backdrop: string;
+            sheet: string;
+        };
+        false: {};
+    };
+    dragging: {
+        true: {
+            sheet: string;
+        };
+        false: {};
+    };
+}, {
+    backdrop: string;
+    sheet: string;
+    handle: string;
+    handleBar: string;
+    header: string;
+    closeButton: string;
+    content: string;
+}, undefined, {
+    constrained: {
+        true: {
+            backdrop: string;
+            sheet: string;
+        };
+        false: {};
+    };
+    dragging: {
+        true: {
+            sheet: string;
+        };
+        false: {};
+    };
+}, {
+    backdrop: string;
+    sheet: string;
+    handle: string;
+    handleBar: string;
+    header: string;
+    closeButton: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    constrained: {
+        true: {
+            backdrop: string;
+            sheet: string;
+        };
+        false: {};
+    };
+    dragging: {
+        true: {
+            sheet: string;
+        };
+        false: {};
+    };
+}, {
+    backdrop: string;
+    sheet: string;
+    handle: string;
+    handleBar: string;
+    header: string;
+    closeButton: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BottomSheetRecipeProps = VariantProps<typeof bottomSheetRecipe>;
+export interface BottomSheetProps {
+    /** Unique identifier for this sheet (drives stacking/z-index registry). */
+    id: string;
+    /** Whether the sheet is open. Bindable. */
+    open?: boolean;
+    /** Snap positions as viewport fractions (0–1), e.g. [0.25, 0.5, 0.9]. */
+    snapPoints?: number[];
+    /** Index into `snapPoints` to settle at when opening. */
+    defaultSnapPoint?: number;
+    /** Container element to constrain the sheet within (constrained mode). */
+    containerRef?: HTMLElement | null;
+    /** Element to apply the background scale effect to (defaults to containerRef). */
+    scaleTargetRef?: HTMLElement | null;
+    /** Constrain the sheet inside `containerRef` (absolute positioning). */
+    constrainToContainer?: boolean;
+    /** Scale/round the background target as the sheet opens (iOS effect). */
+    scaleBackground?: boolean;
+    /** Allow dragging down past the lowest snap point to close. */
+    dragToClose?: boolean;
+    /** Close when the backdrop is tapped. */
+    closeOnBackdrop?: boolean;
+    /** Show a close (X) button in the header (requires the `header` snippet). */
+    showCloseButton?: boolean;
+    /**
+     * Keep the browser UI tint (iOS Safari status bar / Android address bar) matching the page
+     * while the sheet is open. The full-screen backdrop darkens the area behind the status bar;
+     * iOS Safari, when the page declares no `<meta name="theme-color">`, re-samples that area and
+     * flips the status bar dark — losing the immersive look. When true (the default) the sheet,
+     * only if the page has no `theme-color` of its own, adds one pinned to the page background for
+     * its open lifetime and removes it on close. A page that sets its own tint is left untouched.
+     */
+    syncThemeColor?: boolean;
+    /** Called after the sheet finishes closing. */
+    onClose?: () => void;
+    /** Called whenever the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Main body content. */
+    children?: Snippet;
+    /** Header content; renders the header bar when set. */
+    header?: Snippet;
+}

package/dist/components/bottom-sheet/BottomSheet.recipe.js

@@ -0,0 +1,47 @@
+import { tv } from "tailwind-variants";
+/**
+ * BottomSheet recipe — the canonical styled layer for the draggable sheet.
+ *
+ * An iOS-style bottom sheet with snap points, gesture dragging, container-scale
+ * effect, and stacking (custom behavior — not bits-ui). The recipe is slotted by
+ * role — backdrop / sheet / handle / handleBar / header / closeButton / content —
+ * so an app can restyle any part independently. Only the *themeable, static*
+ * surface lives here; the per-frame transforms (translate / scale / opacity) are
+ * driven imperatively from the component and the runtime transition duration is
+ * passed through the `--transition-duration` CSS var.
+ *
+ * The `constrained` variant switches fixed → absolute positioning when the sheet
+ * is bounded inside a container; `dragging` carries the grabbing cursor.
+ *
+ * Primary customization surface: extend with `tv({ extend: bottomSheetRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS var (--tera-bottom-sheet-radius)
+ * retunes the top corner radius with no code change; it defaults to the prior
+ * literal value inline.
+ */
+export const bottomSheetRecipe = tv({
+    slots: {
+        backdrop: 'fixed inset-0 bg-black opacity-0 touch-none [will-change:opacity] [-webkit-tap-highlight-color:transparent] transition-opacity duration-[var(--transition-duration,0.35s)] ease-out',
+        sheet: 'fixed bottom-0 left-0 right-0 flex flex-col overflow-visible bg-surface-raised rounded-t-[var(--tera-bottom-sheet-radius,12px)] [will-change:translate] [translate:0_100%] [transform:translateZ(0)] [backface-visibility:hidden] transition-[translate] duration-[var(--transition-duration,0.35s)] ease-[cubic-bezier(0.2,0.9,0.36,1)]',
+        handle: 'flex shrink-0 items-center justify-center px-4 pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing',
+        handleBar: 'h-[5px] w-9 rounded-[2.5px] bg-text-tertiary',
+        header: 'relative shrink-0 cursor-grab touch-none select-none border-b border-border-default px-4 pt-1 pb-3 active:cursor-grabbing',
+        closeButton: 'absolute right-2 top-[calc(50%-4px)] flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0 text-text-tertiary [touch-action:manipulation] [-webkit-tap-highlight-color:transparent] transition-colors hover:bg-surface-hover hover:text-text-primary active:bg-surface-hover',
+        content: 'flex min-h-0 flex-1 flex-col overflow-hidden [touch-action:pan-y]',
+    },
+    variants: {
+        // Sheet bounded inside a container (vs. the viewport): switch fixed → absolute.
+        constrained: {
+            true: { backdrop: 'absolute', sheet: 'absolute' },
+            false: {},
+        },
+        // Active drag: grabbing cursor + suppress selection.
+        dragging: {
+            true: { sheet: 'cursor-grabbing select-none' },
+            false: {},
+        },
+    },
+    defaultVariants: {
+        constrained: false,
+        dragging: false,
+    },
+});