tera-system-ui 0.1.64 → 0.1.67

package/dist/components/slider/Slider.svelte

@@ -1,164 +1,38 @@
-<script lang="ts">
-    import {type SliderProps} from "./Slider";
-
-    let {
-        children,
-        min = 0,
-        max = 100,
-        step = 1,
-        value = $bindable(),
-        showTicks = false,
-        onchange,
-        ...props
-    }: SliderProps = $props();
-
-
-    let slider = $state<HTMLElement>()
-    let sliderHandle = $state<HTMLElement>()
-    let sliderTrack = $state<HTMLElement>()
-    let sliderRail = $state<HTMLElement>()
-    let sliderTooltip = $state<HTMLElement>()
-
-
-    $effect(() => {
-        if (!slider || !sliderHandle || !sliderTrack || !sliderRail) return
-
-        const stopDragging = () => {
-            document.removeEventListener('pointermove', onDrag);
-            document.removeEventListener('touchmove', onDrag);
-            sliderHandle?.removeAttribute('data-state');
-            toggleToolTip(false);
-        };
-
-        slider.addEventListener('pointerdown', (e) => {
-            sliderHandle.setAttribute('data-state', 'dragging');
-            onDrag(e);
-            document.addEventListener('pointermove', onDrag);
-            document.addEventListener('pointerup', stopDragging, {once: true});
-
-            // Add mouseout listener to window
-            window.addEventListener('mouseout', (e) => {
-                if ((e.relatedTarget as HTMLElement)?.tagName === 'IFRAME') {  // Mouse left the window
-                    stopDragging();
-                }
-            });
-        });
-
-        // For touch support
-        slider.addEventListener('touchstart', (e) => {
-            sliderHandle.setAttribute('data-state', 'dragging');
-            onDrag(e);
-            document.addEventListener('touchmove', onDrag, {passive: false});
-            document.addEventListener('touchend', stopDragging, {once: true});
-        }, {passive: false});
-
-        sliderHandle.addEventListener('pointerenter', (e) => {
-            toggleToolTip(true);
-            sliderHandle.addEventListener('pointerleave', (e) => {
-                toggleToolTip(false);
-            }, {once: true});
-        });
-
-    })
-
-    let tooltipInterval: ReturnType<typeof setTimeout> | undefined;
-
-    function toggleToolTip(open: boolean) {
-        if (tooltipInterval) clearInterval(tooltipInterval)
-
-        if (open) {
-            sliderTooltip?.classList.add('show');
-        } else {
-            tooltipInterval = setTimeout(() => {
-                sliderTooltip?.classList.remove('show');
-            }, 300)
-
-        }
-    }
-
-    const calculateValue = (position: number) => {
-        const sliderWidth = sliderRail?.offsetWidth || 0;
-        const totalSteps = (max - min) / step;
-        const stepSize = sliderWidth / totalSteps;
-
-        // Clamp position within the slider width
-        const clampedPosition = Math.max(0, Math.min(position, sliderWidth));
-        // Calculate steps with decimal precision
-        const stepCount = Math.round(clampedPosition / stepSize);
-
-        // Calculate the value with proper decimal precision
-        const value = min + (stepCount * step);
-        // Round to avoid floating-point precision errors
-        return Number(value.toFixed(10));
-    };
-
-    const onDrag = (event: PointerEvent | TouchEvent) => {
-        event.preventDefault();
-        event.stopPropagation();
-        toggleToolTip(true)
-
-        let position
-
-        if (event.type.startsWith('touch')) {
-            const touch = (event as TouchEvent).touches[0];
-            position = touch.clientX - (slider?.getBoundingClientRect().left || 0);
-        } else {
-            position = (event as PointerEvent).clientX - (slider?.getBoundingClientRect().left || 0);
-        }
-        let newValue = calculateValue(position);
-
-        if (newValue !== value) {
-            value = newValue;
-            onchange?.(value);
-        }
-
-        updateSliderByValue(newValue)
-    };
-
-
-    $effect(() => {
-        if (value == undefined) {
-            value = min
-        }
-        updateSliderByValue(value)
-    })
-
-    function updateSliderByValue(_v: number) {
-        const percentage = ((value - min) / (max - min)) * 100
-
-        // Update the position of the handle and track width
-        if (sliderHandle) sliderHandle.style.left = `${percentage}%`;
-        if (sliderTooltip) sliderTooltip.style.left = `${percentage}%`;
-        if (sliderTrack) sliderTrack.style.width = `${percentage}%`;
-    }
-</script>
-
-
-<div bind:this={slider} class="cursor-pointer w-full relative px-1 py-2.5">
-    <div data-slider-rail bind:this={sliderRail} class="w-full h-1.5 bg-neutral-token-4 rounded-full overflow-hidden hover:bg-neutral-token-5 transition-colors duration-200">
-        <div data-slider-track bind:this={sliderTrack} class="rounded-full w-full h-full bg-neutral-token-13"></div>
-    </div>
-
-    <div
-        bind:this={sliderHandle}
-        data-slider-handle
-        tabindex="0"
-        role="slider"
-        aria-valuemin={`${(min ?? 0)}`}
-        aria-valuemax={`${(max ?? 0)}`}
-        aria-valuenow={`${(value ?? 0)}`}
-        aria-orientation="horizontal"
-        class="slider-handle -translate-x-1/2 absolute top-1/2 -translate-y-1/2 rounded-full bg-neutral-token-1 border-2 outline-1 outline-neutral-token-1 border-neutral-token-13 size-4 shadow-sm"
-    >
-
-    </div>
-
-    <div bind:this={sliderTooltip} data-slider-tooltip class="">
-       <span class="z-10 relative text-xs">
-            {value}
-       </span>
-    </div>
-</div>
-
-<style>/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-.slider-handle{transition:all .2s cubic-bezier(.645,.045,.355,1),left}:is(.slider-handle:global([data-state="dragging"]),.slider-handle:hover,.slider-handle:focus,.slider-handle:active,.slider-handle:focus-visible){border-width:2px;transform:scale(1.2);box-shadow:0 0 0 4px #3b82f61f}.slider-handle:focus-visible{outline:none}[data-slider-tooltip]{pointer-events:none;background-color:var(--color-neutral-token-12);width:fit-content;color:var(--color-neutral-token-1);z-index:10;border-radius:6px;padding:4px 8px;font-size:12px;line-height:1.5;position:absolute;left:50%}[data-slider-tooltip]:after{content:"";background-color:var(--color-neutral-token-12);border-radius:2px;width:8px;height:8px;position:absolute;bottom:-3px;left:50%;transform:translate(-50%)rotate(45deg)}[data-slider-tooltip]{opacity:0;transition:all .2s cubic-bezier(.645,.045,.355,1),left;transform:translateY(-2.5rem)translate(-50%)scale(.9)}[data-slider-tooltip]:global(.show){opacity:1;transform:translateY(-3rem)translate(-50%)scale(1)}</style>
+<script lang="ts">import { Slider as SliderPrimitive } from 'bits-ui';
+let { min = 0, max = 100, step = 1, value = $bindable(0), onchange, onValueCommit, disabled, orientation = 'horizontal', class: className = '', } = $props();
+const isVertical = $derived(orientation === 'vertical');
+</script>
+
+<SliderPrimitive.Root
+    type="single"
+    bind:value
+    onValueChange={onchange}
+    {onValueCommit}
+    {min}
+    {max}
+    {step}
+    {disabled}
+    {orientation}
+    class="{isVertical
+        ? 'relative flex flex-col h-full touch-none select-none items-center px-2.5'
+        : 'relative flex w-full touch-none select-none items-center py-2.5'
+    } {disabled ? 'opacity-50 pointer-events-none' : ''} {className}"
+>
+    {#snippet children({ thumbItems })}
+        <!-- Track wrapper -->
+        <div class="{isVertical ? 'relative w-1.5 h-full grow rounded-full' : 'relative h-1.5 w-full grow rounded-full'} bg-neutral-token-4">
+            <SliderPrimitive.Range class="{isVertical ? 'absolute w-full bottom-0' : 'absolute h-full'} bg-interactive rounded-full" />
+        </div>
+
+        {#each thumbItems as { index } (index)}
+            <SliderPrimitive.Thumb
+                {index}
+                class="block size-4 rounded-full border-2 border-interactive bg-surface-control shadow-sm outline-none
+                    transition-[box-shadow,transform] ease-ui duration-150
+                    hover:shadow-focus hover:scale-110
+                    focus-visible:shadow-focus focus-visible:scale-110
+                    data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+            />
+        {/each}
+    {/snippet}
+</SliderPrimitive.Root>

package/dist/components/slider/Slider.svelte.d.ts

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

package/dist/components/spinner/Spinner.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">"use strict";
+let { size = 'md', color = 'primary', class: className = '', } = $props();
+const sizeMap = { xs: 12, sm: 16, md: 20, lg: 28 };
+const colorMap = {
+    primary: 'var(--color-interactive)',
+    white: '#ffffff',
+    current: 'currentColor',
+};
+const px = $derived(sizeMap[size]);
+const stroke = $derived(colorMap[color]);
+const r = 8;
+const circumference = 2 * Math.PI * r;
+</script>
+
+<svg
+    class="animate-spin {className}"
+    width={px}
+    height={px}
+    viewBox="0 0 20 20"
+    fill="none"
+    aria-label="Loading"
+    role="status"
+>
+    <circle
+        cx="10" cy="10" r={r}
+        stroke={stroke}
+        stroke-width="2"
+        stroke-opacity="0.25"
+    />
+    <circle
+        cx="10" cy="10" r={r}
+        stroke={stroke}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-dasharray={circumference}
+        stroke-dashoffset={circumference * 0.75}
+        transform="rotate(-90 10 10)"
+    />
+</svg>

package/dist/components/spinner/Spinner.svelte.d.ts

@@ -0,0 +1,10 @@
+type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
+type SpinnerColor = 'primary' | 'white' | 'current';
+type $$ComponentProps = {
+    size?: SpinnerSize;
+    color?: SpinnerColor;
+    class?: string;
+};
+declare const Spinner: import("svelte").Component<$$ComponentProps, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

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

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.svelte';

package/dist/components/spinner/index.js

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.svelte';

package/dist/components/star-rating/StarRating.svelte

@@ -1,51 +1,35 @@
-<script lang="ts">
-    import {type StarRatingProps, styles} from "./StarRating";
-
-    let {
-        children,
-        value = $bindable(),
-        onchange,
-        size = 'md',
-        ...props
-    }: StarRatingProps = $props();
-
-    let hoverRating = $state(0);
-
-    // Descriptive texts for each star rating
-    const descriptions = [
-        'Very Bad',
-        'Bad',
-        'Okay',
-        'Good',
-        'Excellent'
-    ];
-
-    // Sets the rating when a star is clicked
-    function setRating(v, e) {
-        if (value != v) {
-            value = v;
-        } else {
-            value = undefined
-        }
-
-        onchange?.(v)
-        // console.log('setRating', e.type)
-
-    }
-
-    // Updates hover state when hovering over a star
-    function setHover(v, e) {
-        hoverRating = v;
-        // console.log('setHover', v, e.type)
-    }
-
-    // Resets hover state when leaving the star area
-    function resetHover(e) {
-
-        hoverRating = 0;
-        // console.log('resetHover', e.type)
-    }
-
+<script lang="ts">import { styles } from "./StarRating";
+let { children, value = $bindable(), onchange, size = 'md', ...props } = $props();
+let hoverRating = $state(0);
+// Descriptive texts for each star rating
+const descriptions = [
+    'Very Bad',
+    'Bad',
+    'Okay',
+    'Good',
+    'Excellent'
+];
+// Sets the rating when a star is clicked
+function setRating(v, e) {
+    if (value != v) {
+        value = v;
+    }
+    else {
+        value = undefined;
+    }
+    onchange?.(v);
+    // console.log('setRating', e.type)
+}
+// Updates hover state when hovering over a star
+function setHover(v, e) {
+    hoverRating = v;
+    // console.log('setHover', v, e.type)
+}
+// Resets hover state when leaving the star area
+function resetHover(e) {
+    hoverRating = 0;
+    // console.log('resetHover', e.type)
+}
 </script>
 
 <div
@@ -60,7 +44,7 @@
                 aria-setsize="5"
                 data-rating-icon
                 data-hovering={hoverRating === (index + 1)}
-                aria-label=""
+                aria-label={`Rate ${index + 1} out of 5 stars`}
                 onpointerenter={(e) => setHover(index + 1, e)}
                 onpointerleave={resetHover}
                 ontouchendcapture={resetHover}

package/dist/components/switch/Switch.d.ts

@@ -1,12 +1,27 @@
+/**
+ * @component Switch - Toggle switch for boolean on/off state.
+ * Built on BitsUI Switch primitive with form integration support.
+ */
 import { type VariantProps } from "tailwind-variants";
-import type { Snippet } from "svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
 export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type SwitchVariants = VariantProps<typeof styles>;
-export interface SwitchProps extends HTMLButtonAttributes, SwitchVariants {
-    children?: Snippet;
+export interface SwitchProps extends SwitchVariants {
+    /** Additional CSS classes for the root element. */
     class?: string;
+    /** Whether the switch is on. Bindable. */
     checked?: boolean;
+    /** Prevents all interaction and dims the control. */
+    disabled?: boolean;
+    /** Whether the switch is required for form submission. */
+    required?: boolean;
+    /** Name attribute used when submitting within a form. */
+    name?: string;
+    /** Value sent with the form when the switch is checked. */
+    value?: string;
+    /** Called when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Bindable reference to the root button element. */
     ref?: HTMLButtonElement | null;
+    [key: string]: unknown;
 }
 export {};

package/dist/components/switch/Switch.js

@@ -1,3 +1,7 @@
+/**
+ * @component Switch - Toggle switch for boolean on/off state.
+ * Built on BitsUI Switch primitive with form integration support.
+ */
 import { tv } from "tailwind-variants";
 export const styles = tv({
     base: '',

package/dist/components/switch/Switch.svelte

@@ -1,26 +1,22 @@
-<script lang="ts">
-
-    import {Switch as SwitchPrimitive, type WithoutChildrenOrChild} from "bits-ui";
-    import {cn} from "../../utils";
-
-    let {
-        ref = $bindable(null),
-        class: className,
-        checked = $bindable(false),
-        ...restProps
-    }: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
-
+<script lang="ts">import { Switch as SwitchPrimitive } from "bits-ui";
+import { cn } from "../../utils/index.js";
+let { ref = $bindable(null), class: className, checked = $bindable(false), disabled, required, name, value, onCheckedChange, ...restProps } = $props();
 </script>
 
 <SwitchPrimitive.Root
         {...restProps}
         bind:checked
         bind:ref
+        {disabled}
+        {required}
+        {name}
+        {value}
+        {onCheckedChange}
         class={cn(
-		"relative group peer h-[22px] w-11 shrink-0 cursor-pointer items-center rounded-full transition-all duration-200",
-		"focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_rgba(59,130,246,0.1)]",
-		"data-[state=checked]:bg-primary-600",
-		"data-[state=unchecked]:bg-neutral-token-5",
+		"relative group peer h-[22px] w-11 shrink-0 cursor-pointer items-center rounded-full transition-[background-color,box-shadow] ease-ui duration-200",
+		"focus-visible:outline-none focus-visible:shadow-focus",
+		"data-[state=checked]:bg-interactive",
+		"data-[state=unchecked]:bg-border-default",
 		"disabled:cursor-not-allowed disabled:opacity-50",
 		"overflow-hidden",
 		className
@@ -32,7 +28,7 @@
 
     <SwitchPrimitive.Thumb
             class={cn(
-			"pointer-events-none block size-[18px] rounded-full bg-neutral-1 transition-transform duration-200",
+			"pointer-events-none block size-[18px] rounded-full bg-neutral-1 transition-transform ease-spring duration-[250ms]",
 			"shadow-[0_2px_4px_rgba(0,0,0,0.2)]",
 			"data-[state=checked]:translate-x-[23px] data-[state=unchecked]:translate-x-[2px]"
 		)}

package/dist/components/switch/Switch.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Switch as SwitchPrimitive } from "bits-ui";
-declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
+import type { SwitchProps } from './Switch.js';
+declare const Switch: import("svelte").Component<SwitchProps, {}, "ref" | "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/table/Table.svelte

@@ -0,0 +1,68 @@
+<script lang="ts" generics="T extends Record<string, unknown>">import { Skeleton } from '../skeleton/index.js';
+let { columns, data, loading, empty, striped, stickyHeader, onRowClick, class: className = '', } = $props();
+</script>
+
+<div class="w-full overflow-auto {className}">
+    <table class="w-full text-sm text-left border-collapse">
+        <thead class="bg-surface-sunken {stickyHeader ? 'sticky top-0 z-10' : ''}">
+            <tr>
+                {#each columns as col (col.key)}
+                    <th
+                        class="px-4 py-3 font-medium text-text-secondary whitespace-nowrap border-b border-border-default"
+                        style={col.width ? `width:${col.width}` : ''}
+                        class:text-center={col.align === 'center'}
+                        class:text-right={col.align === 'right'}
+                    >
+                        {col.label}
+                    </th>
+                {/each}
+            </tr>
+        </thead>
+        <tbody>
+            {#if loading}
+                {#each Array(4) as _, i (i)}
+                    <tr>
+                        {#each columns as col (col.key)}
+                            <td class="px-4 py-3 border-b border-border-default">
+                                <Skeleton variant="line" />
+                            </td>
+                        {/each}
+                    </tr>
+                {/each}
+            {:else if data.length === 0}
+                <tr>
+                    <td colspan={columns.length} class="px-4 py-10 text-center text-text-tertiary">
+                        {#if empty}
+                            {@render empty()}
+                        {:else}
+                            No data
+                        {/if}
+                    </td>
+                </tr>
+            {:else}
+                {#each data as row, i (i)}
+                    <tr
+                        class="border-b border-border-default transition-colors ease-ui duration-100
+                            {striped && i % 2 === 1 ? 'bg-surface-sunken' : 'bg-transparent'}
+                            {onRowClick ? 'cursor-pointer hover:bg-surface-hover' : 'hover:bg-surface-hover'}"
+                        onclick={() => onRowClick?.(row)}
+                    >
+                        {#each columns as col (col.key)}
+                            <td
+                                class="px-4 py-3 text-text-primary"
+                                class:text-center={col.align === 'center'}
+                                class:text-right={col.align === 'right'}
+                            >
+                                {#if col.render}
+                                    {@render col.render(row)}
+                                {:else}
+                                    {row[col.key] ?? ''}
+                                {/if}
+                            </td>
+                        {/each}
+                    </tr>
+                {/each}
+            {/if}
+        </tbody>
+    </table>
+</div>

package/dist/components/table/Table.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        columns: {
+            key: string;
+            label: string;
+            width?: string;
+            align?: "left" | "center" | "right";
+            render?: Snippet<[T]> | undefined;
+        }[];
+        data: T[];
+        loading?: boolean;
+        empty?: Snippet;
+        striped?: boolean;
+        stickyHeader?: boolean;
+        onRowClick?: (row: T) => void;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Table: $$IsomorphicComponent;
+type Table<T extends Record<string, unknown>> = InstanceType<typeof Table<T>>;
+export default Table;

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

@@ -0,0 +1 @@
+export { default as Table } from './Table.svelte';

package/dist/components/table/index.js

@@ -0,0 +1 @@
+export { default as Table } from './Table.svelte';

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

@@ -1,34 +1,63 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
-export type TabsProps = HTMLAttributes<HTMLDivElement> & {
+export type TabsVariant = 'line' | 'ios';
+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 = HTMLAttributes<HTMLDivElement> & {
+export type TabsListProps = {
     children?: Snippet;
+    /** Additional CSS classes for the tab list container. */
     class?: string;
-    ref?: HTMLDivElement | null;
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
 };
-export type TabsItemProps = HTMLButtonAttributes & {
+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?: HTMLButtonElement | null;
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
 };
-export type TabsContentProps = HTMLAttributes<HTMLDivElement> & {
+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?: HTMLDivElement | null;
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
 };
-export type TabsContext = {
-    currentTab: string | undefined;
-};
-export declare function createContext(props: {
-    currentTab?: string;
-    onchange?: (newTab: string) => void;
-}): void;
-export declare function getCtx(): TabsContext;