@archetypeai/ds-ui-svelte-labs 0.7.1

package/dist/primitives/sensor-chart/types.d.ts

@@ -0,0 +1,27 @@
+import { type WithElementRef } from '../utils.js';
+import type { Component } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChartAxis } from '../chart/chart-utils.js';
+export declare const sensorChartVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xs border p-4 shadow-sm", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xs border p-4 shadow-sm", unknown, unknown, undefined>>;
+export type SensorChartProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    /** card header label identifying the sensor; header renders only when title or icon is set */
+    title?: string;
+    /** lucide icon component for header */
+    icon?: Component;
+    /** array of data points to chart */
+    data?: Record<string, unknown>[];
+    /** map of data key to display label */
+    signals?: Record<string, string>;
+    /** data key for x-axis values */
+    xKey?: string;
+    /** enables streaming mode with sliding window */
+    maxPoints?: number;
+    /** minimum y-axis value (required) */
+    yMin: number;
+    /** maximum y-axis value (required) */
+    yMax: number;
+    /** explicit y-axis tick values */
+    yTicks?: number[];
+    /** which axes to display */
+    axis?: ChartAxis;
+};

package/dist/primitives/sensor-chart/types.js

@@ -0,0 +1,6 @@
+import {} from '../utils.js';
+import { tv } from 'tailwind-variants';
+// card shell inlined from the retired background-card pattern
+export const sensorChartVariants = tv({
+    base: 'bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xs border p-4 shadow-sm'
+});

package/dist/primitives/slider/index.d.ts

@@ -0,0 +1,4 @@
+import Root from './slider.svelte';
+export { sliderVariants, sliderTrackVariants, sliderRangeVariants, sliderThumbVariants, type SliderProps } from './types.js';
+export { Root, Root as Slider };
+export default Root;

package/dist/primitives/slider/index.js

@@ -0,0 +1,6 @@
+import Root from './slider.svelte';
+export { sliderVariants, sliderTrackVariants, sliderRangeVariants, sliderThumbVariants } from './types.js';
+export { Root, 
+//
+Root as Slider };
+export default Root;

package/dist/primitives/slider/slider.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { Slider as SliderPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import {
+    sliderRangeVariants,
+    sliderThumbVariants,
+    sliderTrackVariants,
+    sliderVariants,
+    type SliderProps
+  } from './types.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    orientation = 'horizontal',
+    class: className,
+    'aria-label': ariaLabel,
+    ...restProps
+  }: SliderProps = $props();
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<SliderPrimitive.Root
+  bind:ref
+  bind:value={value as never}
+  data-slot="slider"
+  {orientation}
+  class={cn(sliderVariants(), className)}
+  {...restProps}
+>
+  {#snippet children({ thumbs })}
+    <span data-orientation={orientation} data-slot="slider-track" class={sliderTrackVariants()}>
+      <SliderPrimitive.Range data-slot="slider-range" class={sliderRangeVariants()} />
+    </span>
+    {#each thumbs as thumb (thumb)}
+      <SliderPrimitive.Thumb
+        data-slot="slider-thumb"
+        index={thumb}
+        aria-label={ariaLabel}
+        class={sliderThumbVariants()}
+      />
+    {/each}
+  {/snippet}
+</SliderPrimitive.Root>

package/dist/primitives/slider/slider.svelte.d.ts

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

package/dist/primitives/slider/types.d.ts

@@ -0,0 +1,7 @@
+import type { Slider as SliderPrimitive } from 'bits-ui';
+import { type WithoutChildrenOrChild } from '../utils.js';
+export declare const sliderVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", unknown, unknown, undefined>>;
+export declare const sliderTrackVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5", unknown, unknown, undefined>>;
+export declare const sliderRangeVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full", unknown, unknown, undefined>>;
+export declare const sliderThumbVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
+export type SliderProps = WithoutChildrenOrChild<SliderPrimitive.RootProps>;

package/dist/primitives/slider/types.js

@@ -0,0 +1,14 @@
+import {} from '../utils.js';
+import { tv } from 'tailwind-variants';
+export const sliderVariants = tv({
+    base: 'relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col'
+});
+export const sliderTrackVariants = tv({
+    base: 'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
+});
+export const sliderRangeVariants = tv({
+    base: 'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
+});
+export const sliderThumbVariants = tv({
+    base: 'border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50'
+});

package/dist/primitives/switch/index.d.ts

@@ -0,0 +1,4 @@
+import Root from './switch.svelte';
+export { switchVariants, switchThumbVariants, type SwitchProps, type SwitchSize } from './types.js';
+export { Root, Root as Switch };
+export default Root;

package/dist/primitives/switch/index.js

@@ -0,0 +1,6 @@
+import Root from './switch.svelte';
+export { switchVariants, switchThumbVariants } from './types.js';
+export { Root, 
+//
+Root as Switch };
+export default Root;

package/dist/primitives/switch/switch.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { Switch as SwitchPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import { type SwitchProps, switchThumbVariants, switchVariants } from './types.js';
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    class: className,
+    size = 'default',
+    ...restProps
+  }: SwitchProps = $props();
+</script>
+
+<SwitchPrimitive.Root
+  bind:ref
+  bind:checked
+  data-slot="switch"
+  data-size={size}
+  class={cn(switchVariants({ size }), className)}
+  {...restProps}
+>
+  <SwitchPrimitive.Thumb
+    data-slot="switch-thumb"
+    data-size={size}
+    class={cn(switchThumbVariants({ size }))}
+  />
+</SwitchPrimitive.Root>

package/dist/primitives/switch/switch.svelte.d.ts

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

package/dist/primitives/switch/types.d.ts

@@ -0,0 +1,45 @@
+import type { Switch as SwitchPrimitive } from 'bits-ui';
+import type { WithoutChildrenOrChild } from '../utils.js';
+import { type VariantProps } from 'tailwind-variants';
+export declare const switchVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", unknown, unknown, undefined>>;
+export declare const switchThumbVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0", {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0", unknown, unknown, undefined>>;
+export type SwitchSize = VariantProps<typeof switchVariants>['size'];
+export type SwitchProps = WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+    size?: SwitchSize;
+};

package/dist/primitives/switch/types.js

@@ -0,0 +1,27 @@
+import { tv } from 'tailwind-variants';
+export const switchVariants = tv({
+    base: 'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+    variants: {
+        size: {
+            sm: 'h-4 w-7',
+            default: 'h-5 w-9',
+            lg: 'h-6 w-11'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+export const switchThumbVariants = tv({
+    base: 'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+    variants: {
+        size: {
+            sm: 'h-3 w-3 data-[state=checked]:translate-x-3',
+            default: 'h-4 w-4 data-[state=checked]:translate-x-4',
+            lg: 'h-5 w-5 data-[state=checked]:translate-x-5'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});

package/dist/primitives/toggle/index.d.ts

@@ -0,0 +1,4 @@
+import Root from './toggle.svelte';
+export { toggleVariants, type ToggleProps, type ToggleSize, type ToggleVariant } from './types.js';
+export { Root, Root as Toggle };
+export default Root;

package/dist/primitives/toggle/index.js

@@ -0,0 +1,6 @@
+import Root from './toggle.svelte';
+export { toggleVariants } from './types.js';
+export { Root, 
+//
+Root as Toggle };
+export default Root;

package/dist/primitives/toggle/toggle.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Toggle as TogglePrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import { type ToggleProps, toggleVariants } from './types.js';
+
+  let {
+    ref = $bindable(null),
+    pressed = $bindable(false),
+    class: className,
+    size = 'default',
+    variant = 'default',
+    ...restProps
+  }: ToggleProps = $props();
+</script>
+
+<TogglePrimitive.Root
+  bind:ref
+  bind:pressed
+  data-slot="toggle"
+  data-variant={variant}
+  data-size={size}
+  class={cn(toggleVariants({ variant, size }), className)}
+  {...restProps}
+/>

package/dist/primitives/toggle/toggle.svelte.d.ts

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

package/dist/primitives/toggle/types.d.ts

@@ -0,0 +1,39 @@
+import type { Toggle as TogglePrimitive } from 'bits-ui';
+import { type VariantProps } from 'tailwind-variants';
+export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-xs text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-xs text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
+export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+export type ToggleProps = TogglePrimitive.RootProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};

package/dist/primitives/toggle/types.js

@@ -0,0 +1,19 @@
+import { tv } from 'tailwind-variants';
+export const toggleVariants = tv({
+    base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-xs text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            outline: 'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs'
+        },
+        size: {
+            default: 'h-9 min-w-9 px-2',
+            sm: 'h-8 min-w-8 px-1.5',
+            lg: 'h-10 min-w-10 px-2.5'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default'
+    }
+});

package/dist/primitives/utils.d.ts

@@ -0,0 +1,4 @@
+export { cn, type WithoutChild, type WithoutChildren, type WithoutChildrenOrChild, type WithElementRef } from '@archetypeai/ds-ui-svelte-console/primitives/utils';
+export declare function clamp(value: number, min?: number, max?: number): number;
+export declare function healthTier(score: number, variant?: 'bg' | 'text'): "bg-atai-good" | "text-atai-good" | "bg-atai-warning" | "text-atai-warning" | "bg-atai-critical" | "text-atai-critical";
+export declare function formatMMSS(totalSeconds: number): string;

package/dist/primitives/utils.js

@@ -0,0 +1,29 @@
+// class merging + element-ref type helpers come from the console tier so a
+// single cn/twMerge instance (with console's extended class groups) exists
+// in the tree; labs keeps only its domain helpers below.
+export { cn } from '@archetypeai/ds-ui-svelte-console/primitives/utils';
+// constants: health tiers
+const HEALTH_TIERS = {
+    good: { bg: 'bg-atai-good', text: 'text-atai-good' },
+    warning: { bg: 'bg-atai-warning', text: 'text-atai-warning' },
+    critical: { bg: 'bg-atai-critical', text: 'text-atai-critical' }
+};
+// utility: clamp a value between a minimum and maximum
+export function clamp(value, min = 0, max = 100) {
+    return Math.max(min, Math.min(max, value));
+}
+// utility: get the health tier for a score
+export function healthTier(score, variant = 'bg') {
+    if (score >= 67)
+        return HEALTH_TIERS.good[variant];
+    if (score >= 34)
+        return HEALTH_TIERS.warning[variant];
+    return HEALTH_TIERS.critical[variant];
+}
+// utility: format a total seconds into MM:SS
+export function formatMMSS(totalSeconds) {
+    const s = Math.floor(totalSeconds);
+    const m = Math.floor(s / 60);
+    const sec = s % 60;
+    return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
+}

package/dist/primitives/video-player/index.d.ts

@@ -0,0 +1,4 @@
+import Root from './video-player.svelte';
+export { videoPlayerVariants, videoPlayerOverlayVariants, videoPlayerControlsVariants, type VideoPlayerProps } from './types.js';
+export { Root, Root as VideoPlayer };
+export default Root;

package/dist/primitives/video-player/index.js

@@ -0,0 +1,6 @@
+import Root from './video-player.svelte';
+export { videoPlayerVariants, videoPlayerOverlayVariants, videoPlayerControlsVariants } from './types.js';
+export { Root, 
+//
+Root as VideoPlayer };
+export default Root;

package/dist/primitives/video-player/types.d.ts

@@ -0,0 +1,49 @@
+import { type WithElementRef } from '../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+export declare const videoPlayerVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative overflow-hidden p-0", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative overflow-hidden p-0", unknown, unknown, undefined>>;
+export declare const videoPlayerOverlayVariants: import("tailwind-variants").TVReturnType<{
+    visible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "absolute inset-0 flex cursor-pointer items-center justify-center transition-opacity duration-300", {
+    visible: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    visible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "absolute inset-0 flex cursor-pointer items-center justify-center transition-opacity duration-300", unknown, unknown, undefined>>;
+export declare const videoPlayerControlsVariants: import("tailwind-variants").TVReturnType<{
+    visible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "bg-card/20 absolute inset-x-0 bottom-0 flex items-center justify-between gap-4 px-3 py-1.5 backdrop-blur-xs transition-opacity duration-300", {
+    visible: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    visible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "bg-card/20 absolute inset-x-0 bottom-0 flex items-center justify-between gap-4 px-3 py-1.5 backdrop-blur-xs transition-opacity duration-300", unknown, unknown, undefined>>;
+export type VideoPlayerProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    /** video source URL (remote or static path) */
+    src: string;
+    /** thumbnail image shown before playback */
+    poster?: string;
+    /** auto-start playback on mount */
+    autoplay?: boolean;
+    /** mute audio */
+    muted?: boolean;
+    /** show custom controls overlay */
+    controls?: boolean;
+    /** aspect ratio for the video container */
+    ratio?: number;
+};

package/dist/primitives/video-player/types.js

@@ -0,0 +1,32 @@
+import {} from '../utils.js';
+import { tv } from 'tailwind-variants';
+// extra root classes layered onto console's card shell
+export const videoPlayerVariants = tv({
+    base: 'relative overflow-hidden p-0'
+});
+// center play/pause overlay shown when custom controls are disabled
+export const videoPlayerOverlayVariants = tv({
+    base: 'absolute inset-0 flex cursor-pointer items-center justify-center transition-opacity duration-300',
+    variants: {
+        visible: {
+            true: 'opacity-100',
+            false: 'pointer-events-none opacity-0'
+        }
+    },
+    defaultVariants: {
+        visible: true
+    }
+});
+// bottom control bar with play/pause, seek and time display
+export const videoPlayerControlsVariants = tv({
+    base: 'bg-card/20 absolute inset-x-0 bottom-0 flex items-center justify-between gap-4 px-3 py-1.5 backdrop-blur-xs transition-opacity duration-300',
+    variants: {
+        visible: {
+            true: 'opacity-100',
+            false: 'pointer-events-none opacity-0'
+        }
+    },
+    defaultVariants: {
+        visible: true
+    }
+});

package/dist/primitives/video-player/video-player.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { cn, formatMMSS } from '../utils.js';
+  import { Card } from '@archetypeai/ds-ui-svelte-console/primitives/card';
+  import { Button } from '@archetypeai/ds-ui-svelte-console/primitives/button';
+  import { AspectRatio } from '../aspect-ratio/index.js';
+  import Slider from '../slider/index.js';
+  import {
+    videoPlayerControlsVariants,
+    videoPlayerOverlayVariants,
+    videoPlayerVariants,
+    type VideoPlayerProps
+  } from './types.js';
+  import PlayIcon from '@lucide/svelte/icons/play';
+  import PauseIcon from '@lucide/svelte/icons/pause';
+
+  let {
+    ref = $bindable(null),
+    src,
+    poster,
+    autoplay = false,
+    muted = false,
+    controls = true,
+    ratio = 16 / 9,
+    class: className,
+    ...restProps
+  }: VideoPlayerProps = $props();
+
+  let time = $state(0);
+  let duration = $state(0);
+  let paused = $state(true);
+  let controlsVisible = $state(true);
+  let hideTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function resetControls() {
+    controlsVisible = true;
+    clearTimeout(hideTimer);
+  }
+
+  function scheduleHide(delay: number) {
+    hideTimer = setTimeout(() => {
+      controlsVisible = false;
+    }, delay);
+  }
+
+  function showControls() {
+    resetControls();
+    if (!paused) scheduleHide(2500);
+  }
+
+  function handleMouseLeave() {
+    if (!paused) scheduleHide(1000);
+  }
+</script>
+
+<Card
+  bind:ref
+  data-slot="video-player"
+  class={cn(videoPlayerVariants(), className)}
+  onmouseenter={showControls}
+  onmousemove={showControls}
+  onmouseleave={handleMouseLeave}
+  {...restProps}
+>
+  <AspectRatio {ratio}>
+    <video
+      data-slot="video-player-video"
+      {src}
+      {poster}
+      {autoplay}
+      {muted}
+      bind:currentTime={time}
+      bind:duration
+      bind:paused
+      class="absolute inset-0 h-full w-full rounded-xs object-cover"
+      onplay={showControls}
+      onpause={resetControls}
+      onended={resetControls}
+    ></video>
+
+    {#if !controls && (paused || controlsVisible)}
+      <button
+        data-slot="video-player-overlay"
+        class={videoPlayerOverlayVariants({ visible: paused || controlsVisible })}
+        onclick={() => (paused = !paused)}
+        aria-label={paused ? 'Play' : 'Pause'}
+      >
+        <span
+          class="bg-background/30 hover:bg-background/40 flex size-14 items-center justify-center rounded-full backdrop-blur-xs transition-colors"
+        >
+          {#if paused}
+            <PlayIcon strokeWidth={1.25} class="text-foreground size-7" aria-hidden="true" />
+          {:else}
+            <PauseIcon strokeWidth={1.25} class="text-foreground size-7" aria-hidden="true" />
+          {/if}
+        </span>
+      </button>
+    {/if}
+
+    {#if controls}
+      <div
+        data-slot="video-player-controls"
+        class={videoPlayerControlsVariants({ visible: controlsVisible })}
+      >
+        <Button
+          variant="floating"
+          size="icon"
+          class="bg-background/30 hover:bg-background/40 cursor-pointer rounded-full"
+          onclick={() => (paused = !paused)}
+          aria-label={paused ? 'Play' : 'Pause'}
+        >
+          {#if paused}
+            <PlayIcon strokeWidth={2} class="text-foreground size-4" aria-hidden="true" />
+          {:else}
+            <PauseIcon strokeWidth={2} class="text-foreground size-4" aria-hidden="true" />
+          {/if}
+        </Button>
+
+        <Slider
+          type="multiple"
+          value={[time]}
+          max={duration || 1}
+          step={0.1}
+          aria-label="Seek"
+          class="**:data-[slot=slider-track]:bg-background/60 **:data-[slot=slider-range]:bg-foreground/90 **:data-[slot=slider-thumb]:bg-foreground max-w-100 min-w-0 flex-1 **:data-[slot=slider-thumb]:size-3.5 **:data-[slot=slider-thumb]:cursor-grab **:data-[slot=slider-thumb]:border-0 **:data-[slot=slider-thumb]:shadow-md **:data-[slot=slider-track]:h-1.5"
+          onValueCommit={(v) => {
+            time = v[0];
+          }}
+        />
+
+        <span
+          data-slot="video-player-time"
+          class="bg-background/30 text-foreground rounded-full px-3 py-1.5 whitespace-nowrap"
+        >
+          {formatMMSS(time)} / {formatMMSS(duration)}
+        </span>
+      </div>
+    {/if}
+  </AspectRatio>
+</Card>

package/dist/primitives/video-player/video-player.svelte.d.ts

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