@loidolt/theme-svelte 0.2.0

package/dist/index.js

@@ -0,0 +1,44 @@
+export { default as Alert } from './components/Alert.svelte';
+export { default as AppShell } from './components/AppShell.svelte';
+export { default as Badge } from './components/Badge.svelte';
+export { default as Brand } from './components/Brand.svelte';
+export { default as Button } from './components/Button.svelte';
+export { default as Card } from './components/Card.svelte';
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as ContextBar } from './components/ContextBar.svelte';
+export { default as Dialog } from './components/Dialog.svelte';
+export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as Field } from './components/Field.svelte';
+export { default as IconButton } from './components/IconButton.svelte';
+export { default as Input } from './components/Input.svelte';
+export { default as Label } from './components/Label.svelte';
+export { default as NavMenu } from './components/NavMenu.svelte';
+export { default as NumberField } from './components/NumberField.svelte';
+export { default as PageHeader } from './components/PageHeader.svelte';
+export { default as Panel } from './components/Panel.svelte';
+export { default as Popover } from './components/Popover.svelte';
+export { default as Progress } from './components/Progress.svelte';
+export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as Section } from './components/Section.svelte';
+export { default as Select } from './components/Select.svelte';
+export { default as Separator } from './components/Separator.svelte';
+export { default as Sidebar } from './components/Sidebar.svelte';
+export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as Spinner } from './components/Spinner.svelte';
+export { default as Switch } from './components/Switch.svelte';
+export { default as Table } from './components/Table.svelte';
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
+export { default as Toast } from './components/Toast.svelte';
+export { default as ToastViewport } from './components/ToastViewport.svelte';
+export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as TooltipProvider } from './components/TooltipProvider.svelte';
+export { default as Topbar } from './components/Topbar.svelte';
+export { default as Workspace } from './components/Workspace.svelte';
+/**
+ * Bits UI primitives behind the wrappers, for menus and overlays this package does not
+ * model declaratively (checkbox/radio items, submenus, custom overlay composition).
+ */
+export { Dialog as DialogPrimitive, DropdownMenu as DropdownMenuPrimitive, Popover as PopoverPrimitive, Tabs as TabsPrimitive, Tooltip as TooltipPrimitive, } from 'bits-ui';
+export { cx } from './utils.js';
+export { createToaster } from './toaster.svelte.js';

package/dist/styles.css

@@ -0,0 +1 @@
+@import '@loidolt/theme-styles';

package/dist/toaster.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { StatusVariant } from './types.js';
+export interface ToastOptions {
+    title: string;
+    description?: string;
+    variant?: StatusVariant;
+    /** Milliseconds before auto-dismiss. `0` or `Infinity` keeps the toast until dismissed. */
+    duration?: number;
+}
+export interface ToastRecord extends ToastOptions {
+    id: string;
+}
+export interface ToasterOptions {
+    /** Default `duration` for toasts that do not set one. */
+    duration?: number;
+    /** Oldest toasts past this count are dropped. */
+    max?: number;
+}
+export interface Toaster {
+    /** Live queue, oldest first. Feed it to `ToastViewport`. */
+    readonly toasts: ToastRecord[];
+    /** Adds a toast and returns its id. */
+    push(toast: ToastOptions): string;
+    dismiss(id: string): void;
+    clear(): void;
+    /** Suspends every auto-dismiss timer — call on pointer enter / focus in. */
+    pause(): void;
+    /** Resumes with the time each toast had left — call on pointer leave / focus out. */
+    resume(): void;
+}
+/**
+ * Queue behind `Toast` / `ToastViewport`: auto-dismiss with the remaining time preserved
+ * across `pause()`/`resume()`, so hovering a toast does not lose the countdown.
+ *
+ * ```svelte
+ * const toaster = createToaster();
+ * <ToastViewport onpointerenter={toaster.pause} onpointerleave={toaster.resume}>
+ *   {#each toaster.toasts as toast (toast.id)}
+ *     <Toast {...toast} onDismiss={() => toaster.dismiss(toast.id)} />
+ *   {/each}
+ * </ToastViewport>
+ * ```
+ */
+export declare function createToaster(options?: ToasterOptions): Toaster;

package/dist/toaster.svelte.js

@@ -0,0 +1,82 @@
+/**
+ * Queue behind `Toast` / `ToastViewport`: auto-dismiss with the remaining time preserved
+ * across `pause()`/`resume()`, so hovering a toast does not lose the countdown.
+ *
+ * ```svelte
+ * const toaster = createToaster();
+ * <ToastViewport onpointerenter={toaster.pause} onpointerleave={toaster.resume}>
+ *   {#each toaster.toasts as toast (toast.id)}
+ *     <Toast {...toast} onDismiss={() => toaster.dismiss(toast.id)} />
+ *   {/each}
+ * </ToastViewport>
+ * ```
+ */
+export function createToaster(options = {}) {
+    const { duration: defaultDuration = 5000, max = 5 } = options;
+    const toasts = $state([]);
+    // Plain Map on purpose: these are timer handles, not UI state, and nothing renders from them.
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const timers = new Map();
+    let startedAt = 0;
+    let paused = false;
+    let counter = 0;
+    function clearTimer(id) {
+        const timer = timers.get(id);
+        if (timer)
+            clearTimeout(timer.timeout);
+        timers.delete(id);
+    }
+    function arm(id, remaining) {
+        if (!Number.isFinite(remaining) || remaining <= 0)
+            return;
+        startedAt = Date.now();
+        timers.set(id, { timeout: setTimeout(() => dismiss(id), remaining), remaining });
+    }
+    function dismiss(id) {
+        clearTimer(id);
+        const index = toasts.findIndex((toast) => toast.id === id);
+        if (index !== -1)
+            toasts.splice(index, 1);
+    }
+    function push(toast) {
+        const id = `ldt-toast-${++counter}`;
+        toasts.push({ ...toast, id });
+        while (toasts.length > max)
+            dismiss(toasts[0].id);
+        if (!paused)
+            arm(id, toast.duration ?? defaultDuration);
+        else
+            timers.set(id, { timeout: 0, remaining: toast.duration ?? defaultDuration });
+        return id;
+    }
+    return {
+        get toasts() {
+            return toasts;
+        },
+        push,
+        dismiss,
+        clear() {
+            for (const toast of [...toasts])
+                dismiss(toast.id);
+        },
+        pause() {
+            if (paused)
+                return;
+            paused = true;
+            const elapsed = Date.now() - startedAt;
+            for (const [id, timer] of timers) {
+                clearTimeout(timer.timeout);
+                timers.set(id, { timeout: 0, remaining: Math.max(0, timer.remaining - elapsed) });
+            }
+        },
+        resume() {
+            if (!paused)
+                return;
+            paused = false;
+            for (const [id, timer] of [...timers]) {
+                timers.delete(id);
+                arm(id, timer.remaining);
+            }
+        },
+    };
+}

package/dist/types.d.ts

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+/** Action colour set — anything the user can press. */
+export type ActionVariant = 'default' | 'primary' | 'quiet' | 'danger' | 'ghost' | 'text';
+/** Status colour set — anything that reports state. */
+export type StatusVariant = 'info' | 'success' | 'warning' | 'error';
+/** Badge spans both sets: neutral, brand accent, or a status. */
+export type BadgeVariant = 'default' | 'accent' | StatusVariant;
+/** Shared control scale. Dialogs extend it with `xl`. */
+export type ControlSize = 'sm' | 'md' | 'lg';
+export type DialogSize = ControlSize | 'xl';
+export type Placement = 'top' | 'right' | 'bottom' | 'left';
+export type Alignment = 'start' | 'center' | 'end';
+export type Orientation = 'horizontal' | 'vertical';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** A selectable value with a human label. Used by Select, RadioGroup, Tabs and menus. */
+export interface Option<T extends string = string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+/** `Option` is the single vocabulary for choice lists; `NavItem` is kept as a readable alias. */
+export type NavItem<T extends string = string> = Option<T>;
+/** A `DropdownMenu` row. Renders as a link when `href` is set. */
+export interface MenuItem<T extends string = string> extends Option<T> {
+    href?: string;
+    /** Trailing hint, e.g. a keyboard shortcut. */
+    hint?: string;
+    /** Leading visual. */
+    icon?: Snippet;
+    /** Draw a separator above this item. */
+    separatorBefore?: boolean;
+}
+/**
+ * Payload of Bits UI's `child` snippet: spread `props` onto your own element to take over
+ * rendering of a trigger without nesting an extra button inside it.
+ */
+export interface TriggerChildProps {
+    props: Record<string, unknown>;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Joins truthy class names. Falsy entries are dropped, so `condition && 'ldt-x'` is safe.
+ * Accepts the `class` prop of any component in this package.
+ */
+export declare function cx(...values: Array<string | false | null | undefined>): string;

package/dist/utils.js

@@ -0,0 +1,7 @@
+/**
+ * Joins truthy class names. Falsy entries are dropped, so `condition && 'ldt-x'` is safe.
+ * Accepts the `class` prop of any component in this package.
+ */
+export function cx(...values) {
+    return values.filter(Boolean).join(' ');
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@loidolt/theme-svelte",
+  "version": "0.2.0",
+  "description": "Accessible Svelte 5 components for Loidolt applications",
+  "license": "MIT",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "build": "svelte-package -i src/lib -o dist && cp src/styles.css dist/styles.css",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "test:a11y": "vitest run tests/a11y.test.ts",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@loidolt/theme-styles": "^0.2.0",
+    "@loidolt/theme-tokens": "^0.2.0",
+    "bits-ui": "^2.19.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.33.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.8",
+    "@types/node": "^24.3.0",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/svelte": "^5.2.8",
+    "@testing-library/user-event": "^14.6.1",
+    "jsdom": "^27.0.0",
+    "rimraf": "^6.0.1",
+    "svelte": "^5.56.10",
+    "svelte-check": "^4.3.2",
+    "typescript": "^6.0.3",
+    "vitest": "^4.0.0",
+    "vitest-axe": "^0.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/loidolt/loidolt-theme.git",
+    "directory": "packages/svelte"
+  }
+}