tera-system-ui 0.1.64 → 0.1.66

package/dist/components/marketing/index.js

@@ -0,0 +1,4 @@
+export { default as FeatureCard } from './FeatureCard.svelte';
+export { default as StatBlock } from './StatBlock.svelte';
+export { default as PricingCard } from './PricingCard.svelte';
+export { default as TestimonialCard } from './TestimonialCard.svelte';

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

@@ -1,18 +1,37 @@
-import { type VariantProps } from "tailwind-variants";
+/**
+ * @component Popover - Floating panel anchored to a trigger element.
+ * Built on BitsUI Popover primitive with portal rendering.
+ */
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
-type PopoverVariants = VariantProps<typeof styles>;
-export interface PopoverProps extends HTMLAttributes<HTMLDivElement>, PopoverVariants {
+export interface PopoverProps {
     children?: Snippet;
+    /** Snippet used as the clickable trigger that opens the popover. */
+    trigger?: Snippet;
+    /** Additional CSS classes for the popover content panel. */
     class?: string;
-    triggerRef: HTMLElement | null;
-    offset?: number;
-    padding?: number;
+    /** Whether the popover is open. Bindable. */
     open?: boolean;
-    focusTriggerAfterClose?: boolean;
-    flip?: boolean;
-    autoTrigger?: boolean;
-    ref?: HTMLDivElement | null;
+    /** 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;
 }
-export {};

package/dist/components/popover/Popover.js

@@ -1,7 +1 @@
-import { tv } from "tailwind-variants";
-export const styles = tv({
-    base: '',
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {},
-});
+export {};

package/dist/components/popover/Popover.svelte

@@ -1,158 +1,40 @@
-<script lang="ts">
-    import {type PopoverProps} from "./Popover";
-    import {arrow, autoUpdate, computePosition, flip, offset, shift, size} from "@floating-ui/dom";
-    import {cn} from "../../utils/utils";
-
-    import {clickOutside} from "../../actions/clickOutside"
-    import {onDestroy, onMount} from "svelte";
-    import {circInOut} from "svelte/easing";
-
-    let {
-        children,
-        triggerRef,
-        class: className,
-        open = $bindable(),
-        offset: offsetAmount = 3,
-        padding: paddingAmount = 12,
-        focusTriggerAfterClose = true,
-        flip: enableFlip = false,
-        autoTrigger = true,
-        ...props
-    }: PopoverProps = $props();
-
-    let hasOpenedYet = $state(false)
-
-    function togglePopover() {
-        open = !open;
-    }
-
-
-    function handleClickOutside(e) {
-        open = false
-    }
-
-    let popover = $state();
-    let arrowElement = $state();
-
-
-    function updatePosition() {
-        computePosition(triggerRef, popover, {
-            placement: 'bottom',
-            middleware: [
-                offset(offsetAmount),
-                size({
-                    apply({rects, elements}) {
-                        Object.assign(elements.floating.style, {
-                            minWidth: `${rects.reference.width}px`,
-                            maxWidth: `${window.innerWidth - 16}px`,
-                        });
-                    },
-                }),
-                enableFlip ? flip() : undefined,
-                shift({padding: paddingAmount}),
-                arrow({element: arrowElement}),
-            ],
-        }).then(({x, y, placement, middlewareData}) => {
-            Object.assign(popover.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-            });
-            //
-            // // Accessing the data
-            // const {x: arrowX, y: arrowY} = middlewareData.arrow;
-            //
-            // const staticSide = {
-            //     top: 'bottom',
-            //     right: 'left',
-            //     bottom: 'top',
-            //     left: 'right',
-            // }[placement.split('-')[0]];
-            //
-            // Object.assign(arrowElement.style, {
-            //     left: arrowX != null ? `${arrowX}px` : '',
-            //     top: arrowY != null ? `${arrowY}px` : '',
-            //     right: '',
-            //     bottom: '',
-            //     [staticSide]: '-4px',
-            // });
-        });
-    }
-
-    onMount(() => {
-        if (autoTrigger)
-            triggerRef?.addEventListener("click", togglePopover);
-
-    })
-
-    onDestroy(() => {
-        if (autoTrigger)
-            triggerRef?.removeEventListener("click", togglePopover);
-
-    })
-
-    $effect(() => {
-        let cleanup: any
-
-        if (open) {
-            hasOpenedYet = true
-            updatePosition()
-
-            // Start auto updates.
-            cleanup = autoUpdate(
-                triggerRef,
-                popover,
-                updatePosition,
-            );
-        } else {
-            cleanup?.()
-            if (focusTriggerAfterClose && hasOpenedYet) {
-                try {
-                    triggerRef.focus()
-                } catch (e) {
-                    console.warn('Trigger element focus after close Popover error', e)
-                }
-            }
-        }
-
-        return () => {
-            cleanup?.()
-        }
-    })
-
-
-    function spin(node, {duration}) {
-        return {
-            duration,
-            css: (t) => {
-                const eased = circInOut(t);
-                return `
-                    transform-origin: 0% 0%;
-					transform: translateY(${eased * 10 - 10}px) scaleY(${eased * 0.05 + 0.95});
-					opacity: ${eased};
-				`
-
-            }
-        };
-    }
-
-
-</script>
-
-<!-- Popover Content -->
-{#if open}
-    <div bind:this={popover}
-         data-open={open}
-         class={cn("overflow-hidden absolute z-10 bg-neutral-token-1 shadow-2xl rounded-container border border-neutral-token-5", className)}
-         use:clickOutside={{exceptElement: triggerRef}}
-         onclick_outside={handleClickOutside}
-
-         in:spin={{ duration: 200 }}
-         out:spin={{ duration: 200 }}
-         {...props}
-    >
-        <!--    <div bind:this={arrowElement} class="size-2 absolute rotate-45 bg-inherit"></div>-->
-        {@render children?.()}
-    </div>
-{/if}
-
-
+<script lang="ts">import { Popover as PopoverPrimitive } from 'bits-ui';
+import { cn } from '../../utils/utils.js';
+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();
+</script>
+
+<PopoverPrimitive.Root bind:open>
+    {#if trigger}
+        <PopoverPrimitive.Trigger>
+            {#snippet child({ props: triggerProps })}
+                <span {...triggerProps} class="inline-flex">
+                    {@render trigger()}
+                </span>
+            {/snippet}
+        </PopoverPrimitive.Trigger>
+    {/if}
+
+    <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+            bind:ref
+            {side}
+            {sideOffset}
+            {align}
+            {alignOffset}
+            {trapFocus}
+            {preventScroll}
+            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
+            )}
+            {...props}
+        >
+            {@render children?.()}
+        </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+</PopoverPrimitive.Root>

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

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

package/dist/components/popover-responsive/PopoverResponsive.d.ts

@@ -1,11 +1,22 @@
-import { type VariantProps } from "tailwind-variants";
+/**
+ * @component PopoverResponsive - Shows a Popover on desktop and a Dialog on mobile.
+ * Automatically switches at the 640 px breakpoint.
+ */
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
-type PopoverResponsiveVariants = VariantProps<typeof styles>;
-export interface PopoverResponsiveProps extends HTMLAttributes<HTMLDivElement>, PopoverResponsiveVariants {
+export interface PopoverResponsiveProps {
+    /** Content rendered inside the popover/dialog panel. */
     children?: Snippet;
+    /** Snippet used as the clickable trigger. */
+    trigger?: Snippet;
+    /** Additional CSS classes for the content panel. */
     class?: string;
-    ref?: HTMLDivElement | null;
+    /** Whether the panel is open. Bindable. */
+    open?: boolean;
+    /** Which side of the trigger the desktop popover appears on. */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Distance in pixels between the trigger and popover (desktop only). */
+    sideOffset?: number;
+    /** Alignment of the popover relative to the trigger (desktop only). */
+    align?: 'start' | 'center' | 'end';
+    [key: string]: unknown;
 }
-export {};

package/dist/components/popover-responsive/PopoverResponsive.js

@@ -1,7 +1 @@
-import { tv } from "tailwind-variants";
-export const styles = tv({
-    base: '',
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {},
-});
+export {};

package/dist/components/popover-responsive/PopoverResponsive.svelte

@@ -1,87 +1,25 @@
-<script lang="ts">
-    import {type PopoverResponsiveProps} from "./PopoverResponsive";
-    import {Dialog} from "../dialog";
-    import {Popover} from "../popover";
-    import {onMount} from "svelte";
-    import {getScreenWidth, SCREEN_BREAK_POINTS} from "../side-navigation/SideNavigation";
-
-    let {
-        children,
-        triggerRef,
-        class: className,
-        open = $bindable(),
-        offset = 3,
-        popoverPadding = 12,
-        focusTriggerAfterClose = true,
-        flip = false,
-        ...props
-    }: PopoverResponsiveProps & {
-        dialogPadding?: string,
-        popoverPadding?: number,
-        offset?: number,
-        open?: boolean,
-        focusTriggerAfterClose?: boolean,
-        flip?: boolean,
-        triggerRef?: HTMLElement,
-    } = $props();
-
-    let openPopover = $state(false)
-    let openDialog = $state(false)
-
-    $effect(() => {
-        open = openPopover || openDialog
-    })
-
-    $effect(() => {
-        toggleOpen(open)
-    })
-
-    function toggleOpen(open?: boolean) {
-        if (getScreenWidth() >= SCREEN_BREAK_POINTS.sm) {
-            if (open === undefined) {
-                openPopover = !(openDialog || openPopover)
-            } else {
-                openPopover = open
-            }
-            openDialog = false
-        } else {
-            if (open === undefined) {
-                openDialog = !(openDialog || openPopover)
-            } else {
-                openDialog = open
-            }
-            openPopover = false
-        }
-    }
-
-    onMount(() => {
-        triggerRef?.addEventListener('click', (e) => {
-            e.stopPropagation()
-            toggleOpen()
-        })
-    })
-</script>
-
-
-<Popover bind:open={openPopover}
-         triggerRef={triggerRef}
-         autoTrigger={false}
-         padding={popoverPadding}
-         focusTriggerAfterClose={focusTriggerAfterClose}
-         offset={offset}
-         flip={flip}
-         class={className}
-         {...props}
->
-    {@render children?.()}
-</Popover>
-
-<Dialog bind:open={openDialog}
-        position="top"
-        padding="none"
-        class={className}
-        triggerRef={triggerRef}
-        focusTriggerAfterClose={focusTriggerAfterClose}
->
-    {@render children?.()}
-</Dialog>
+<script lang="ts">import { innerWidth } from 'svelte/reactivity/window';
+import { Dialog } from '../dialog/index.js';
+import { Popover } from '../popover/index.js';
+let { children, trigger, class: className, open = $bindable(false), side = 'bottom', sideOffset = 4, align = 'start', ...props } = $props();
+const isDesktop = $derived((innerWidth.current ?? 640) >= 640);
+</script>
+
+{#if isDesktop}
+    <!-- Desktop: bind open directly so both internal and external close work -->
+    <Popover bind:open {side} {sideOffset} {align} {trigger} class={className} {...props}>
+        {@render children?.()}
+    </Popover>
+{:else}
+    <!-- Mobile: bind open directly to Dialog, toggle via wrapper button -->
+    <button
+        type="button"
+        class="inline-flex appearance-none bg-transparent p-0 border-0 cursor-pointer"
+        onclick={() => open = !open}
+    >
+        {@render trigger?.()}
+    </button>
+    <Dialog bind:open position="top" padding="none" class={className}>
+        {@render children?.()}
+    </Dialog>
+{/if}

package/dist/components/popover-responsive/PopoverResponsive.svelte.d.ts

@@ -1,13 +1,4 @@
-import { type PopoverResponsiveProps } from "./PopoverResponsive";
-type $$ComponentProps = PopoverResponsiveProps & {
-    dialogPadding?: string;
-    popoverPadding?: number;
-    offset?: number;
-    open?: boolean;
-    focusTriggerAfterClose?: boolean;
-    flip?: boolean;
-    triggerRef?: HTMLElement;
-};
-declare const PopoverResponsive: import("svelte").Component<$$ComponentProps, {}, "open">;
+import type { PopoverResponsiveProps } from './PopoverResponsive.js';
+declare const PopoverResponsive: import("svelte").Component<PopoverResponsiveProps, {}, "open">;
 type PopoverResponsive = ReturnType<typeof PopoverResponsive>;
 export default PopoverResponsive;

package/dist/components/select/Select.d.ts

@@ -1,40 +1,54 @@
-import { type VariantProps } from "tailwind-variants";
-import type { Snippet } from "svelte";
-import type { HTMLSelectAttributes } from "svelte/elements";
-export declare const styles: import("tailwind-variants").TVReturnType<{
+/**
+ * @component Select - Dropdown select with flat or grouped options, keyboard navigation, and style variants.
+ * Built on BitsUI Select primitive.
+ */
+import type { VariantProps } from "tailwind-variants";
+export interface SelectOption {
+    /** Unique value submitted or passed to onchange. */
+    value: string;
+    /** Human-readable label shown in the list and trigger. */
+    label: string;
+    /** Prevents selecting this option. */
+    disabled?: boolean;
+}
+export interface SelectGroup {
+    /** Heading label displayed above the group's options. */
+    label: string;
+    /** Options belonging to this group. */
+    options: SelectOption[];
+}
+export declare const triggerStyles: import("tailwind-variants").TVReturnType<{
     variant: {
         outlined: string;
         filled: string;
         borderless: string;
     };
-    disabled: {
-        true: string;
-        false: string;
-    };
     size: {
         sm: string;
         md: string;
         lg: string;
     };
+    disabled: {
+        true: string;
+    };
     status: {
         error: string;
         warning: string;
     };
-}, undefined, "w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-neutral-token-13 appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E)] bg-[length:16px] bg-[right_0.75rem_center] bg-no-repeat", {
+}, undefined, "w-full inline-flex items-center justify-between gap-2 rounded-md outline-none font-normal text-left transition-[border-color,box-shadow,background-color] ease-ui duration-150", {
     variant: {
         outlined: string;
         filled: string;
         borderless: string;
     };
-    disabled: {
-        true: string;
-        false: string;
-    };
     size: {
         sm: string;
         md: string;
         lg: string;
     };
+    disabled: {
+        true: string;
+    };
     status: {
         error: string;
         warning: string;
@@ -45,25 +59,48 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         filled: string;
         borderless: string;
     };
-    disabled: {
-        true: string;
-        false: string;
-    };
     size: {
         sm: string;
         md: string;
         lg: string;
     };
+    disabled: {
+        true: string;
+    };
     status: {
         error: string;
         warning: string;
     };
-}, undefined, "w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-neutral-token-13 appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E)] bg-[length:16px] bg-[right_0.75rem_center] bg-no-repeat", unknown, unknown, undefined>>;
-type SelectVariants = VariantProps<typeof styles>;
-export interface SelectProps extends Omit<HTMLSelectAttributes, 'disabled' | 'size' | 'value'>, SelectVariants {
-    children?: Snippet;
+}, undefined, "w-full inline-flex items-center justify-between gap-2 rounded-md outline-none font-normal text-left transition-[border-color,box-shadow,background-color] ease-ui duration-150", unknown, unknown, undefined>>;
+type TriggerVariants = VariantProps<typeof triggerStyles>;
+export interface SelectProps extends TriggerVariants {
+    /** Selection mode. Use 'multiple' to allow picking several options. */
+    type?: 'single' | 'multiple';
+    /** Flat list of options. Use `groups` instead for grouped options. */
+    options?: SelectOption[];
+    /** Grouped options — renders labeled sections. Takes precedence over `options`. */
+    groups?: SelectGroup[];
+    /**
+     * Currently selected value(s). Bindable.
+     * A string for type='single', a string[] for type='multiple'.
+     */
+    value?: string | string[];
+    /** Text shown in the trigger when nothing is selected. */
+    placeholder?: string;
+    /** Prevents all interaction. */
+    disabled?: boolean;
+    /** Whether keyboard navigation wraps from the last item to the first. */
+    loop?: boolean;
+    /** Allow deselecting the current value by clicking it again (single mode only). */
+    allowDeselect?: boolean;
+    /** Whether the select is required for form submission. */
+    required?: boolean;
+    /** Name attribute used when submitting within a form. */
+    name?: string;
+    /** Additional CSS classes for the trigger button. */
     class?: string;
-    value?: string;
-    ref?: HTMLSelectElement | null;
+    /** Called when the selected value changes. */
+    onchange?: (value: string | string[]) => void;
+    [key: string]: unknown;
 }
 export {};

package/dist/components/select/Select.js

@@ -1,45 +1,24 @@
 import { tv } from "tailwind-variants";
-export const styles = tv({
-    base: 'w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-neutral-token-13 appearance-none bg-[url(\'data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E)] bg-[length:16px] bg-[right_0.75rem_center] bg-no-repeat',
+export const triggerStyles = tv({
+    base: 'w-full inline-flex items-center justify-between gap-2 rounded-md outline-none font-normal text-left transition-[border-color,box-shadow,background-color] ease-ui duration-150',
     variants: {
         variant: {
-            outlined: 'border border-neutral-token-5 bg-neutral-token-1 hover:border-primary-500 focus:border-primary-600 focus:shadow-[0_0_0_2px_rgba(59,130,246,0.1)] transition-all duration-200',
-            filled: 'bg-neutral-token-3 border border-transparent hover:bg-neutral-token-4 focus:bg-neutral-token-1 focus:border-primary-600 focus:shadow-[0_0_0_2px_rgba(59,130,246,0.1)] transition-all duration-200',
-            borderless: 'bg-transparent border-0 hover:bg-neutral-token-2 focus:bg-neutral-token-2 transition-all duration-200',
-        },
-        disabled: {
-            true: 'cursor-not-allowed bg-neutral-token-3 text-neutral-token-7 border-neutral-token-5',
-            false: 'cursor-pointer',
+            outlined: 'border border-border-default bg-surface-control hover:border-interactive data-[state=open]:border-interactive-hover data-[state=open]:shadow-focus',
+            filled: 'bg-surface-sunken border border-transparent hover:bg-surface-hover data-[state=open]:bg-surface data-[state=open]:border-interactive-hover data-[state=open]:shadow-focus',
+            borderless: 'bg-transparent border-0 hover:bg-surface-raised',
         },
         size: {
-            sm: 'h-6 px-3 pr-8 text-sm',
-            md: 'h-8 px-3 pr-8 text-sm',
-            lg: 'h-10 px-3 pr-10 text-base',
-        },
-        status: {
-            error: 'border-error-500 hover:border-error-400 focus:border-error-500 focus:shadow-[0_0_0_2px_rgba(239,68,68,0.1)]',
-            warning: 'border-warning-500 hover:border-warning-400 focus:border-warning-500 focus:shadow-[0_0_0_2px_rgba(249,115,22,0.1)]',
+            sm: 'h-6  px-3 text-sm',
+            md: 'h-9  px-3 text-sm',
+            lg: 'h-10 px-3 text-base',
         },
-    },
-    compoundVariants: [
-        {
-            variant: 'outlined',
-            disabled: true,
-            class: 'hover:border-neutral-token-5'
+        disabled: {
+            true: 'cursor-not-allowed bg-surface-sunken text-text-disabled border-border-default pointer-events-none',
         },
-        {
-            variant: 'filled',
-            disabled: true,
-            class: 'hover:bg-neutral-token-3'
+        status: {
+            error: 'border-error-default hover:border-error-hover data-[state=open]:border-error-default data-[state=open]:shadow-focus-error',
+            warning: 'border-warning-default hover:border-warning-hover data-[state=open]:border-warning-default data-[state=open]:shadow-focus-warning',
         },
-        {
-            variant: 'borderless',
-            disabled: true,
-            class: 'hover:bg-transparent'
-        }
-    ],
-    defaultVariants: {
-        variant: 'outlined',
-        size: 'md'
     },
+    defaultVariants: { variant: 'outlined', size: 'md' },
 });