sheer-ui 0.4.2 → 0.5.0

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

@@ -0,0 +1,96 @@
+import { SvelteMap } from 'svelte/reactivity';
+import type { TabsActivationMode } from './types.js';
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, RefOpts } from '../../internal/types.js';
+import type { Orientation } from '../../internal/index.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
+interface TabsRootStateOpts extends RefOpts {
+    readonly orientation: Orientation;
+    readonly loop: boolean;
+    readonly activationMode: TabsActivationMode;
+    readonly disabled: boolean;
+    value: string;
+}
+export declare class TabsRootState {
+    static create(opts: TabsRootStateOpts): TabsRootState;
+    readonly opts: TabsRootStateOpts;
+    readonly attachment: RefAttachment;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    triggerIds: string[];
+    readonly valueToTriggerId: SvelteMap<string, string>;
+    readonly valueToContentId: SvelteMap<string, string>;
+    constructor(opts: TabsRootStateOpts);
+    registerTrigger(id: string, value: string): () => void;
+    registerContent(id: string, value: string): () => void;
+    readonly props: {
+        readonly id: string;
+        readonly 'data-orientation': Orientation;
+    };
+}
+interface TabsListStateOpts extends RefOpts {
+}
+export declare class TabsListState {
+    static create(opts: TabsListStateOpts): TabsListState;
+    readonly opts: TabsListStateOpts;
+    readonly root: TabsRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: TabsListStateOpts, root: TabsRootState);
+    readonly props: {
+        readonly id: string;
+        readonly role: "tablist";
+        readonly 'aria-orientation': Orientation;
+        readonly 'data-orientation': Orientation;
+        readonly 'data-disabled': "" | undefined;
+    };
+}
+interface TabsTriggerStateOpts extends RefOpts {
+    readonly value: string;
+    readonly disabled: boolean;
+}
+export declare class TabsTriggerState {
+    #private;
+    static create(opts: TabsTriggerStateOpts): TabsTriggerState;
+    readonly opts: TabsTriggerStateOpts;
+    readonly root: TabsRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: TabsTriggerStateOpts, root: TabsRootState);
+    onfocus(_: BitsFocusEvent): void;
+    onclick(_: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly role: "tab";
+        readonly 'data-state': "active" | "inactive";
+        readonly 'data-value': string;
+        readonly 'data-orientation': Orientation;
+        readonly 'data-disabled': "" | undefined;
+        readonly 'aria-selected': "true" | "false";
+        readonly 'aria-controls': string | undefined;
+        readonly disabled: true | undefined;
+        readonly tabindex: 0 | -1;
+        readonly onclick: (_: BitsMouseEvent) => void;
+        readonly onfocus: (_: BitsFocusEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+interface TabsContentStateOpts extends RefOpts {
+    readonly value: string;
+}
+export declare class TabsContentState {
+    #private;
+    static create(opts: TabsContentStateOpts): TabsContentState;
+    readonly opts: TabsContentStateOpts;
+    readonly root: TabsRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: TabsContentStateOpts, root: TabsRootState);
+    readonly props: {
+        readonly id: string;
+        readonly role: "tabpanel";
+        readonly hidden: true | undefined;
+        readonly tabindex: 0;
+        readonly 'data-value': string;
+        readonly 'data-state': "active" | "inactive";
+        readonly 'aria-labelledby': string | undefined;
+        readonly 'data-orientation': Orientation;
+    };
+}
+export {};

package/dist/components/tabs/tabs.svelte.js

@@ -0,0 +1,183 @@
+import { createContext, untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+import { attachRef } from '../../internal/tools/index.js';
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
+import { kbd } from '../../internal/kbd.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
+const tabsAttrs = createBitsAttrs({
+    component: 'tabs',
+    parts: ['root', 'list', 'trigger', 'content'],
+});
+const [getTabsRoot, setTabsRoot] = createContext();
+export class TabsRootState {
+    static create(opts) {
+        return setTabsRoot(new TabsRootState(opts));
+    }
+    opts;
+    attachment;
+    rovingFocusGroup;
+    triggerIds = $state([]);
+    // holds the trigger ID for each value to associate it with the content
+    valueToTriggerId = new SvelteMap();
+    // holds the content ID for each value to associate it with the trigger
+    valueToContentId = new SvelteMap();
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef((v) => (opts.ref = v));
+        this.rovingFocusGroup = new RovingFocusGroup({
+            candidateAttr: tabsAttrs.trigger,
+            rootNode: () => opts.ref,
+            loop: () => opts.loop,
+            orientation: () => opts.orientation,
+        });
+    }
+    registerTrigger(id, value) {
+        this.triggerIds.push(id);
+        this.valueToTriggerId.set(value, id);
+        // returns the deregister function
+        return () => {
+            this.triggerIds = this.triggerIds.filter((triggerId) => triggerId !== id);
+            this.valueToTriggerId.delete(value);
+        };
+    }
+    registerContent(id, value) {
+        this.valueToContentId.set(value, id);
+        // returns the deregister function
+        return () => {
+            this.valueToContentId.delete(value);
+        };
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        'data-orientation': this.opts.orientation,
+        [tabsAttrs.root]: '',
+        ...this.attachment,
+    }));
+}
+export class TabsListState {
+    static create(opts) {
+        return new TabsListState(opts, getTabsRoot());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef((v) => (opts.ref = v));
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        role: 'tablist',
+        'aria-orientation': this.root.opts.orientation,
+        'data-orientation': this.root.opts.orientation,
+        [tabsAttrs.list]: '',
+        'data-disabled': boolToEmptyStrOrUndef(this.root.opts.disabled),
+        ...this.attachment,
+    }));
+}
+export class TabsTriggerState {
+    static create(opts) {
+        return new TabsTriggerState(opts, getTabsRoot());
+    }
+    opts;
+    root;
+    attachment;
+    #isActive = $derived.by(() => this.root.opts.value === this.opts.value);
+    #tabIndex = $derived.by(() => (this.#isActive || !this.root.opts.value ? 0 : -1));
+    #isDisabled = $derived.by(() => this.opts.disabled || this.root.opts.disabled);
+    #ariaControls = $derived.by(() => this.root.valueToContentId.get(this.opts.value));
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef((v) => (opts.ref = v));
+        $effect(() => {
+            const id = this.opts.id;
+            const value = this.opts.value;
+            return untrack(() => {
+                return this.root.registerTrigger(id, value);
+            });
+        });
+        this.onfocus = this.onfocus.bind(this);
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    #activate() {
+        if (this.root.opts.value === this.opts.value)
+            return;
+        this.root.opts.value = this.opts.value;
+    }
+    onfocus(_) {
+        if (this.root.opts.activationMode !== 'automatic' || this.#isDisabled)
+            return;
+        this.#activate();
+    }
+    onclick(_) {
+        if (this.#isDisabled)
+            return;
+        this.#activate();
+    }
+    onkeydown(e) {
+        if (this.#isDisabled)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.#activate();
+            return;
+        }
+        this.root.rovingFocusGroup.handleKeydown(this.opts.ref, e);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        role: 'tab',
+        'data-state': getTabDataState(this.#isActive),
+        'data-value': this.opts.value,
+        'data-orientation': this.root.opts.orientation,
+        'data-disabled': boolToEmptyStrOrUndef(this.#isDisabled),
+        'aria-selected': boolToStr(this.#isActive),
+        'aria-controls': this.#ariaControls,
+        [tabsAttrs.trigger]: '',
+        disabled: boolToTrueOrUndef(this.#isDisabled),
+        tabindex: this.#tabIndex,
+        //
+        onclick: this.onclick,
+        onfocus: this.onfocus,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+export class TabsContentState {
+    static create(opts) {
+        return new TabsContentState(opts, getTabsRoot());
+    }
+    opts;
+    root;
+    attachment;
+    #isActive = $derived.by(() => this.root.opts.value === this.opts.value);
+    #ariaLabelledBy = $derived.by(() => this.root.valueToTriggerId.get(this.opts.value));
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef((v) => (opts.ref = v));
+        $effect(() => {
+            const id = this.opts.id;
+            const value = this.opts.value;
+            return untrack(() => {
+                return this.root.registerContent(id, value);
+            });
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        role: 'tabpanel',
+        hidden: boolToTrueOrUndef(!this.#isActive),
+        tabindex: 0,
+        'data-value': this.opts.value,
+        'data-state': getTabDataState(this.#isActive),
+        'aria-labelledby': this.#ariaLabelledBy,
+        'data-orientation': this.root.opts.orientation,
+        [tabsAttrs.content]: '',
+        ...this.attachment,
+    }));
+}
+const getTabDataState = (condition) => condition ? 'active' : 'inactive';

package/dist/components/tabs/types.d.ts

@@ -0,0 +1,64 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { Orientation } from "../../internal/index.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../internal/attribute-types.js";
+export type TabsActivationMode = "manual" | "automatic";
+export type TabsRootPropsWithoutHTML = WithChild<{
+    /**
+     * The value of the selected tab.
+     */
+    value?: string;
+    /**
+     * A callback function called when the selected tab changes.
+     */
+    onValueChange?: OnChangeFn<string>;
+    /**
+     * The orientation of the tabs.
+     *
+     * @defaultValue "horizontal"
+     */
+    orientation?: Orientation;
+    /**
+     * Whether to loop through the tabs when reaching the end
+     * when using the keyboard.
+     *
+     * @defaultValue false
+     */
+    loop?: boolean;
+    /**
+     * How the tabs should be activated. If set to `'automatic'`, the tabs
+     * will be activated when the trigger is focused. If set to `'manual'`,
+     * the tabs will be activated when the trigger is pressed.
+     *
+     * @defaultValue "automatic"
+     */
+    activationMode?: TabsActivationMode;
+    /**
+     * Whether the tabs are disabled or not.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+}>;
+export type TabsRootProps = TabsRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TabsRootPropsWithoutHTML>;
+export type TabsListPropsWithoutHTML = WithChild;
+export type TabsListProps = TabsListPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TabsListPropsWithoutHTML>;
+export type TabsTriggerPropsWithoutHTML = WithChild<{
+    /**
+     * The value of the tab associated with this trigger.
+     */
+    value: string;
+    /**
+     * Whether the trigger is disabled or not.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean | null | undefined;
+}>;
+export type TabsTriggerProps = TabsTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, TabsTriggerPropsWithoutHTML>;
+export type TabsContentPropsWithoutHTML = WithChild<{
+    /**
+     * The value of the tab associated with this content.
+     */
+    value: string;
+}>;
+export type TabsContentProps = TabsContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TabsContentPropsWithoutHTML>;

package/dist/components/tabs/types.js

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

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

@@ -0,0 +1,2 @@
+import Root from './textarea.svelte';
+export { Root, Root as Textarea, };

package/dist/components/textarea/index.js

@@ -0,0 +1,4 @@
+import Root from './textarea.svelte';
+export { Root, 
+//
+Root as Textarea, };

package/dist/components/textarea/textarea.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from '../../internal/utils.js';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/theme-toggle/index.d.ts

@@ -0,0 +1,4 @@
+import ThemeToggle from './theme-toggle.svelte';
+export { ThemeToggle };
+export { initTheme, getTheme, ThemeState } from './theme.svelte.js';
+export type { Mode } from './theme.svelte.js';

package/dist/components/theme-toggle/index.js

@@ -0,0 +1,3 @@
+import ThemeToggle from './theme-toggle.svelte';
+export { ThemeToggle };
+export { initTheme, getTheme, ThemeState } from './theme.svelte.js';

package/dist/components/theme-toggle/theme-toggle.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonVariant } from '../button';
+type $$ComponentProps = {
+    variant?: ButtonVariant;
+};
+declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/theme-toggle/theme.svelte.d.ts

@@ -0,0 +1,18 @@
+export type Mode = 'light' | 'dark';
+export declare class ThemeState {
+    #private;
+    /** Explicit choice, or `null` to follow the OS ("system"). A "system" token is never stored. */
+    pref: Mode | null;
+    constructor();
+    /**
+     * The resolved mode actually shown: `'light' | 'dark'`, or `undefined` during SSR.
+     * Follows the OS when `pref` is `null`.
+     */
+    get current(): Mode | undefined;
+    toggle(): void;
+}
+declare const getTheme: () => ThemeState;
+/** Create and provide the theme. Call once in a root layout's `<script>`. */
+export declare const initTheme: () => ThemeState;
+/** Read the theme provided by `initTheme()`. Call during init of any descendant. */
+export { getTheme };

package/dist/components/theme-toggle/theme.svelte.js

@@ -0,0 +1,70 @@
+// Light/dark/system theme. Replaces the vendored mode-watcher engine.
+//
+// `ThemeState` holds the reactive preference (`pref`: `'light' | 'dark'`, or `null` to
+// follow the OS) and the resolved mode shown (`current`). "System" is the absence of a
+// stored value — it is never persisted, just resolved from the OS at read time.
+// It is created once per app via `initTheme()` in a root layout and
+// shared through context with `getTheme()` — so its constructor runs in a component
+// context, where the apply/persist/sync `$effect`s are legal (no `$effect.root`) and
+// are torn down with the layout. Pre-paint application that prevents FOUC lives in
+// each app's `app.html` <head>. The `.dark` class drives `color-scheme` via CSS; the
+// inline `style.colorScheme` only keeps that override consistent with the FOUC script
+// (inline beats the CSS rule).
+import { MediaQuery } from 'svelte/reactivity';
+import { on } from 'svelte/events';
+import { createContext } from 'svelte';
+import { BROWSER } from 'esm-env';
+const KEY = 'mode';
+const isMode = (value) => value === 'light' || value === 'dark';
+function readStored() {
+    if (!BROWSER)
+        return null;
+    const saved = localStorage.getItem(KEY);
+    return isMode(saved) ? saved : null;
+}
+export class ThemeState {
+    /** Explicit choice, or `null` to follow the OS ("system"). A "system" token is never stored. */
+    pref = $state(readStored());
+    // matchMedia touches `window`, so only construct in the browser.
+    #system = BROWSER ? new MediaQuery('prefers-color-scheme: dark') : null;
+    constructor() {
+        if (!BROWSER)
+            return;
+        // Apply the resolved mode to <html>; first paint is handled by app.html.
+        $effect(() => {
+            const dark = this.current === 'dark';
+            const el = document.documentElement;
+            el.classList.toggle('dark', dark);
+            el.style.colorScheme = dark ? 'dark' : 'light';
+        });
+        // Persist an explicit choice; following the OS is the absence of a stored value.
+        $effect(() => {
+            if (this.pref)
+                localStorage.setItem(KEY, this.pref);
+            else
+                localStorage.removeItem(KEY);
+        });
+        // Adopt changes from other tabs (a new choice, or cleared back to "system").
+        $effect(() => on(window, 'storage', (e) => {
+            if (e.key === KEY)
+                this.pref = isMode(e.newValue) ? e.newValue : null;
+        }));
+    }
+    /**
+     * The resolved mode actually shown: `'light' | 'dark'`, or `undefined` during SSR.
+     * Follows the OS when `pref` is `null`.
+     */
+    get current() {
+        if (!BROWSER)
+            return undefined;
+        return this.pref ?? (this.#system.current ? 'dark' : 'light');
+    }
+    toggle() {
+        this.pref = this.current === 'dark' ? 'light' : 'dark';
+    }
+}
+const [getTheme, setTheme] = createContext();
+/** Create and provide the theme. Call once in a root layout's `<script>`. */
+export const initTheme = () => setTheme(new ThemeState());
+/** Read the theme provided by `initTheme()`. Call during init of any descendant. */
+export { getTheme };

package/dist/components/time-field/components/time-field-hidden-input.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TimeFieldHiddenInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TimeFieldHiddenInput = InstanceType<typeof TimeFieldHiddenInput>;
+export default TimeFieldHiddenInput;

package/dist/components/time-field/components/time-field-input.svelte.d.ts

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

package/dist/components/time-field/components/time-field-label.svelte.d.ts

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

package/dist/components/time-field/components/time-field-segment.svelte.d.ts

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

package/dist/components/time-field/components/time-field.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { TimeValue } from '../../../internal/date-time/types.js';
+import type { Time } from '@internationalized/date';
+import type { TimeFieldRootProps } from '../types.js';
+declare function $$render<T extends TimeValue = Time>(): {
+    props: TimeFieldRootProps<T>;
+    exports: {};
+    bindings: "placeholder" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends TimeValue = Time> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "placeholder" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends TimeValue = Time>(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 TimeValue = Time>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TimeField: $$IsomorphicComponent;
+type TimeField<T extends TimeValue = Time> = InstanceType<typeof TimeField<T>>;
+export default TimeField;

package/dist/components/time-field/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from './components/time-field.svelte';
+export { default as Input } from './components/time-field-input.svelte';
+export { default as Label } from './components/time-field-label.svelte';
+export { default as Segment } from './components/time-field-segment.svelte';
+export type { TimeFieldRootProps as RootProps, TimeFieldInputProps as InputProps, TimeFieldLabelProps as LabelProps, TimeFieldSegmentProps as SegmentProps, } from './types.js';

package/dist/components/time-field/index.js

@@ -0,0 +1,4 @@
+export { default as Root } from './components/time-field.svelte';
+export { default as Input } from './components/time-field-input.svelte';
+export { default as Label } from './components/time-field-label.svelte';
+export { default as Segment } from './components/time-field-segment.svelte';