tera-system-ui 0.1.34 → 0.1.40

package/dist/components/command/components/CommandGroup.svelte

@@ -1,110 +0,0 @@
-<script lang="ts">
-    import {generateId} from '../../../internal/index.js';
-    import {derived} from 'svelte/store';
-    import {createGroup, getCtx, getState, VALUE_ATTR} from '../command.js';
-    import type {GroupProps} from '../types.js';
-    import {onMount} from 'svelte';
-
-    type $$Props = GroupProps;
-
-    let {
-        children,
-        heading,
-        value = '',
-        alwaysRender = false,
-        ...restProps
-    }: $$Props = $props()
-
-    const {id} = createGroup(alwaysRender);
-
-    const context = getCtx();
-    const commandState = getState();
-    const headingId = generateId();
-
-    const render = derived(commandState, ($state) => {
-        if (alwaysRender) return true;
-        if (context.filter() === false) return true;
-        if (!$commandState.search) return true;
-        return $commandState.filtered.groups.has(id);
-    });
-
-
-    onMount(() => {
-        const unsubGroup = context.group(id);
-        return unsubGroup;
-    });
-
-
-    function containerAction(node: HTMLElement) {
-
-        if (value) {
-            context.value(id, value);
-            node.setAttribute(VALUE_ATTR, value);
-            return;
-        }
-
-        if (heading) {
-            value = heading.trim().toLowerCase();
-        } else if (node.textContent) {
-            value = node.textContent.trim().toLowerCase();
-        }
-
-        context.value(id, value);
-        node.setAttribute(VALUE_ATTR, value);
-    }
-
-    let containerAttrs = $state()
-
-    $effect(() => {
-        containerAttrs = {
-            'data-cmdk-group': '',
-            role: 'presentation',
-            hidden: $render ? undefined : true,
-            'data-value': value
-        }
-    })
-
-
-    const headingAttrs = {
-        'data-cmdk-group-heading': '',
-        'aria-hidden': true,
-        id: headingId
-    };
-
-    let groupAttrs = $state()
-    $effect(() => {
-        groupAttrs = {
-            'data-cmdk-group-items': '',
-            role: 'group',
-            'aria-labelledby': heading ? headingId : undefined
-        };
-    })
-
-    let container = $state()
-    $effect(() => {
-        container = {
-            action: containerAction,
-            attrs: containerAttrs
-        };
-    })
-
-
-    let group = $state()
-    $effect(() => {
-        group = {
-            attrs: groupAttrs
-        };
-    })
-</script>
-
-<div use:containerAction {...containerAttrs} {...restProps}>
-    {#if heading}
-        <div {...headingAttrs}>
-            {heading}
-        </div>
-    {/if}
-    <div {...groupAttrs}>
-        <!--        <slot {container} {group} heading={{ attrs: headingAttrs }}/>-->
-        {@render children?.()}
-    </div>
-</div>

package/dist/components/command/components/CommandGroup.svelte.d.ts

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

package/dist/components/command/components/CommandInput.svelte

@@ -1,92 +0,0 @@
-<script lang="ts">
-    import {derived, get} from 'svelte/store';
-    import {getCtx, getState, ITEM_SELECTOR, VALUE_ATTR} from '../command.js';
-    import {isBrowser} from '../../../internal/index';
-    import type {InputEvents, InputProps} from '../types.js';
-    import {sleep} from '../../../internal/helpers/sleep.js';
-    import {styles} from "../../input/Input";
-    import {IconSearch} from "../../icons";
-
-    type $$Props = InputProps;
-    type $$Events = InputEvents;
-
-    const {ids, commandEl} = getCtx();
-    const commandState = getState();
-
-    const valueStore = derived(commandState, ($commandState) => $commandState.value);
-
-    let {
-        autofocus = undefined,
-        value = $bindable(),
-        el,
-        class: className,
-        ...restProps
-    }: $$Props & {
-        el?: HTMLElement,
-    } = $props()
-
-
-    const selectedItemId = derived([valueStore, commandEl], ([$value, $commandEl]) => {
-        if (!isBrowser) return undefined;
-        const item = $commandEl?.querySelector(`${ITEM_SELECTOR}[${VALUE_ATTR}="${$value}"]`);
-        return item?.getAttribute('id');
-    });
-
-    function handleValueUpdate(v: string) {
-        commandState.updateState('search', v);
-    }
-
-    function action(node: HTMLInputElement) {
-        if (autofocus) {
-            sleep(200).then(() => {
-                node.focus()
-            });
-        }
-    }
-
-    let attrs = $state<Record<string, unknown>>()
-
-    $effect(() => {
-        attrs = {
-            type: 'text',
-            'data-cmdk-input': '',
-            autocomplete: 'off',
-            autocorrect: 'off',
-            spellcheck: false,
-            'aria-autocomplete': 'list',
-            role: 'combobox',
-            'aria-expanded': true,
-            'aria-controls': ids.list,
-            'aria-labelledby': ids.label,
-            'aria-activedescendant': $selectedItemId ?? undefined,
-            id: ids.input
-        };
-    })
-
-    $effect(() => {
-        return () => {
-            value = ''
-        }
-    })
-</script>
-
-<div class="relative">
-    <input
-            class={styles({
-            variant: 'borderless',
-            size: 'lg',
-            class: className + ' pl-9 border-b border-b-neutral-token-5 rounded-none text-sm',
-        })}
-            bind:this={el}
-            {...attrs}
-            bind:value={value}
-            use:action
-            {...restProps}
-            onkeydown={() => {}}
-            oninput={() => {handleValueUpdate(value)}}
-            onfocus={() => {}}
-            onblur={() => {}}
-            onchange={() => {}}
-    />
-    <IconSearch class="absolute top-1/2 left-2 -translate-y-1/2 size-icon-xs opacity-60"/>
-</div>

package/dist/components/command/components/CommandInput.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { InputProps } from '../types.js';
-type $$Props = InputProps;
-type $$ComponentProps = $$Props & {
-    el?: HTMLElement;
-};
-declare const CommandInput: import("svelte").Component<$$ComponentProps, {}, "value">;
-type CommandInput = ReturnType<typeof CommandInput>;
-export default CommandInput;

package/dist/components/command/components/CommandItem.svelte

@@ -1,110 +0,0 @@
-<script lang="ts">
-    import {addEventListener, executeCallbacks, generateId, isUndefined} from '../../../internal/index.js';
-    import {getCtx, getGroup, getState, VALUE_ATTR} from '../command.js';
-    import type {ItemProps} from '../types.js';
-    import {derived} from 'svelte/store';
-    import {onMount} from "svelte";
-
-    type $$Props = ItemProps
-    let {
-        children,
-        childrenWithProps,
-        id = generateId(),
-        alwaysRender = false,
-        onSelect,
-        value = '',
-        disabled = false,
-        ...restProps
-    }: $$Props = $props()
-
-    const groupContext = getGroup();
-    const context = getCtx();
-    const commandState = getState();
-
-    const trueAlwaysRender = alwaysRender ?? groupContext?.alwaysRender;
-
-    const render = derived(commandState, ($state) => {
-        if (trueAlwaysRender || context.filter() === false || !$commandState.search) return true;
-        const currentScore = $commandState.filtered.items.get(id);
-        if (isUndefined(currentScore)) return false;
-        return currentScore > 0;
-    });
-
-    const selected = derived(commandState, ($state) => $commandState.value === value);
-
-    let isFirstRender = $state(true);
-
-
-    let attrs = derived(selected, ($selected) => (
-        {
-            'aria-disabled': disabled ? true : undefined,
-            'data-disabled': disabled ? true : undefined,
-            'aria-selected': $selected ? true : undefined,
-            'data-selected': $selected ? true : undefined,
-            'data-cmdk-item': '',
-            'data-value': value,
-            role: 'option',
-            id
-        }
-    ));
-
-    onMount(() => {
-        isFirstRender = false;
-    })
-
-
-    onMount(() => {
-        let unsub
-        unsub = context.item(id, groupContext?.id);
-        return unsub;
-    })
-
-
-    function action(node: HTMLElement) {
-        if (!value && node.textContent) {
-            value = node.textContent.trim().toLowerCase();
-        }
-        context.value(id, value);
-        node.setAttribute(VALUE_ATTR, value);
-
-        const unsubEvents = executeCallbacks(
-            addEventListener(node, 'pointerenter', () => {
-                if (disabled) return;
-                select();
-            }),
-            addEventListener(node, 'click', () => {
-                if (disabled) return;
-                handleItemClick();
-            })
-        );
-
-        return {
-            destroy() {
-                unsubEvents();
-            }
-        };
-    }
-
-    function handleItemClick() {
-        select();
-        onSelect?.(value);
-    }
-
-    function select() {
-        commandState.updateState('value', value, true);
-    }
-
-</script>
-
-{#if $render || isFirstRender}
-    <div {...$attrs} use:action {...restProps}>
-        <!--{@render childrenWithProps?.(-->
-        <!--    {-->
-        <!--        attrs: attrs,-->
-        <!--        action: action-->
-        <!--    }-->
-        <!--)-->
-        <!--}-->
-        {@render children?.()}
-    </div>
-{/if}

package/dist/components/command/components/CommandItem.svelte.d.ts

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

package/dist/components/command/components/CommandList.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-    import {isHTMLElement} from '../../../internal/index.js';
-    import {getCtx, getState} from '../command.js';
-    import type {ListProps} from '../types.js';
-
-    const {ids} = getCtx();
-    const commandState = getState();
-
-    type $$Props = ListProps;
-
-    let {children, el, ...restProps} = $props()
-
-    function sizerAction(node: HTMLElement) {
-        let animationFrame: number;
-        const listEl = node.closest('[data-cmdk-list]');
-        if (!isHTMLElement(listEl)) {
-            return;
-        }
-
-        const observer = new ResizeObserver(() => {
-            animationFrame = requestAnimationFrame(() => {
-                const height = node.offsetHeight;
-                listEl.style.setProperty('--cmdk-list-height', height.toFixed(1) + 'px');
-            });
-        });
-
-        observer.observe(node);
-        return {
-            destroy() {
-                cancelAnimationFrame(animationFrame);
-                observer.unobserve(node);
-            }
-        };
-    }
-
-    const listAttrs = {
-        'data-cmdk-list': '',
-        role: 'listbox',
-        'aria-label': 'Suggestions',
-        id: ids.list,
-        'aria-labelledby': ids.input
-    };
-
-    const sizerAttrs = {
-        'data-cmdk-list-sizer': ''
-    };
-
-</script>
-
-<div {...listAttrs} bind:this={el} {...restProps}>
-    <div {...sizerAttrs} use:sizerAction>
-        {#key $commandState.search === ''}
-            {@render children()}
-        {/key}
-    </div>
-</div>

package/dist/components/command/components/CommandList.svelte.d.ts

@@ -1,6 +0,0 @@
-declare const CommandList: import("svelte").Component<{
-    children: any;
-    el: any;
-} & Record<string, any>, {}, "">;
-type CommandList = ReturnType<typeof CommandList>;
-export default CommandList;

package/dist/components/command/components/CommandLoading.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import type { LoadingProps } from '../types.js';
-	import type {Snippet} from "svelte";
-
-	type $$Props = LoadingProps;
-
-	let {childrenWithProps, progress, ...restProps} : $$Props & {
-		childrenWithProps: Snippet<[any]>
-	} = $props()
-
-	let attrs = $state<any>()
-
-	$effect(() => {
-		attrs = {
-			'data-cmdk-loading': '',
-			role: 'progressbar',
-			'aria-valuenow': progress,
-			'aria-valuemin': 0,
-			'aria-valuemax': 100,
-			'aria-label': 'Loading...'
-		};
-	})
-</script>
-
-<div {...attrs} {...restProps}>
-	<div aria-hidden>
-		{@render childrenWithProps(attrs)}
-	</div>
-</div>

package/dist/components/command/components/CommandLoading.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { LoadingProps } from '../types.js';
-import type { Snippet } from "svelte";
-type $$Props = LoadingProps;
-type $$ComponentProps = $$Props & {
-    childrenWithProps: Snippet<[any]>;
-};
-declare const CommandLoading: import("svelte").Component<$$ComponentProps, {}, "">;
-type CommandLoading = ReturnType<typeof CommandLoading>;
-export default CommandLoading;

package/dist/components/command/components/CommandSeparator.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { derived } from 'svelte/store';
-	import { getState } from '../command.js';
-	import type { SeparatorProps } from '../types.js';
-
-	type $$Props = SeparatorProps;
-
-	let {alwaysRender,...restProps} :$$Props= $props()
-
-	const commandState = getState();
-	const render = derived(commandState, ($state) => !$commandState.search);
-
-	const attrs = {
-		'data-cmdk-separator': '',
-		role: 'separator'
-	};
-</script>
-
-{#if $render || alwaysRender}
-	<div {...attrs} {...restProps}></div>
-{/if}

package/dist/components/command/components/CommandSeparator.svelte.d.ts

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

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

@@ -1,227 +0,0 @@
-import type { Expand, HTMLDivAttributes } from '../../internal/index.js';
-import type { HTMLInputAttributes } from 'svelte/elements';
-import type { Writable } from 'svelte/store';
-import type { Snippet } from "svelte";
-export type LoadingProps = {
-    /** Estimated loading progress */
-    progress?: number;
-    /**
-     * Whether to delegate rendering to a custom element.
-     *
-     * The contents within the `Loading` component should be marked
-     * as `aria-hidden` to prevent screen readers from reading the
-     * contents while loading.
-     */
-    asChild?: boolean;
-} & HTMLDivAttributes;
-export type EmptyProps = {
-    /**
-     * Whether to delegate rendering to a custom element.
-     *
-     * Only receives `attrs`, no `action`.
-     */
-    asChild?: boolean;
-} & HTMLDivAttributes;
-export type SeparatorProps = {
-    /**
-     * Whether this separator is always rendered, regardless
-     * of the filter.
-     */
-    alwaysRender?: boolean;
-    /**
-     * Whether to delegate rendering to a custom element.
-     */
-    asChild?: boolean;
-} & HTMLDivAttributes;
-type BaseCommandProps = {
-    /**
-     * Controlled state store for the command menu.
-     * Initialize state using the `createState` function.
-     */
-    state?: Writable<State>;
-    /**
-     * An accessible label for the command menu.
-     * Not visible & only used for screen readers.
-     */
-    label?: string;
-    /**
-     * Optionally set to `false` to turn off the automatic filtering
-     * and sorting. If `false`, you must conditionally render valid
-     * items yourself.
-     */
-    shouldFilter?: boolean;
-    /**
-     * A custom filter function for whether each command item should
-     * match the query. It should return a number between `0` and `1`,
-     * with `1` being a perfect match, and `0` being no match, resulting
-     * in the item being hidden entirely.
-     *
-     * By default, it will use the `command-score` package to score.
-     */
-    filter?: (value: string, search: string) => number;
-    /**
-     * Optionally provide or bind to the selected command menu item.
-     */
-    value?: string;
-    /**
-     * A function that is called when the selected command menu item
-     * changes. It receives the new value as an argument.
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * Optionally set to `true` to enable looping through the items
-     * when the user reaches the end of the list using the keyboard.
-     */
-    loop?: boolean;
-    childrenWithProps?: Snippet<[any]>;
-};
-export type CommandProps = Expand<BaseCommandProps & {
-    /**
-     * Optionally provide custom ids for the command menu
-     * elements. These ids should be unique and are only
-     * necessary in very specific cases. Use with caution.
-     */
-    ids?: Partial<CommandIds>;
-}> & HTMLDivAttributes & {
-    onKeydown?: (e: KeyboardEvent) => void;
-    onRequestCloseCommand?: () => void;
-    asChild?: boolean;
-};
-export type ListProps = {
-    /**
-     * The list element
-     */
-    el?: HTMLElement;
-    /**
-     * Whether to delegate rendering to a custom element.
-     *
-     * Provides 2 slot props: `container` & `list`.
-     * Container only has an `attrs` property, while `list` has
-     * `attrs` & `action` to be applied to the respective elements.
-     *
-     * The `list` wraps the `sizer`, and the `sizer` wraps the `items`, and
-     * is responsible for measuring the height of the items and setting the
-     * CSS variable to the height of the items.
-     */
-    asChild?: boolean;
-} & HTMLDivAttributes;
-export type InputProps = {
-    /**
-     * The input element
-     */
-    el?: HTMLInputElement;
-    /**
-     * Whether to delegate rendering to a custom element.
-     */
-    asChild?: boolean;
-} & HTMLInputAttributes;
-export type GroupProps = {
-    /**
-     * Optional heading to render for the group
-     */
-    heading?: string;
-    /**
-     * If heading isn't provided, you must provide a unique
-     * value for the group.
-     */
-    value?: string;
-    /**
-     * Whether or not this group is always rendered,
-     * regardless of filtering.
-     */
-    alwaysRender?: boolean;
-    /**
-     * Whether to delegate rendering to custom elements.
-     *
-     * Provides 3 slot props: `container`, `heading`, and `group`.
-     * Container has `attrs` & `action`, while `heading` & `group`
-     * only have `attrs` to be applied to the respective elements.
-     */
-    asChild?: boolean;
-} & HTMLDivAttributes;
-export type ItemProps = {
-    /**
-     * Whether this item is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * A function called when this item is selected, either
-     * via click or keyboard selection.
-     */
-    onSelect?: (value: string) => void;
-    /**
-     * A unique value for this item.
-     * If not provided, it will be inferred from the rendered
-     * `textContent`. If your `textContent` is dynamic, you must
-     * provide a stable unique `value`.
-     */
-    value?: string;
-    /**
-     * Whether or not this item is always rendered,
-     * regardless of filtering.
-     */
-    alwaysRender?: boolean;
-    /**
-     * Whether to delegate rendering to a custom element.
-     * Will pass the `attrs` & `action` to be applied to the custom element.
-     */
-    asChild?: boolean;
-    /**
-     * Optionally override the default `id` generated for this item.
-     * NOTE: This must be unique across all items and is only necessary
-     * in very specific cases.
-     */
-    id?: string;
-    childrenWithProps?: Snippet<[{
-        action: (node: HTMLElement) => {
-            destroy(): void;
-        };
-        attrs: any;
-    }]>;
-} & HTMLDivAttributes;
-export type InputEvents = {
-    keydown: KeyboardEvent;
-    blur: FocusEvent;
-    input: Event;
-    focus: FocusEvent;
-    change: Event;
-};
-export type CommandOptionStores = {
-    [K in keyof Omit<Required<BaseCommandProps>, 'value'>]: Writable<CommandProps[K]>;
-};
-export type State = {
-    /** The value of the search query */
-    search: string;
-    /** The value of the selected command menu item */
-    value: string;
-    /** The filtered items */
-    filtered: {
-        /** The count of all visible items. */
-        count: number;
-        /** Map from visible item id to its search store. */
-        items: Map<string, number>;
-        /** Set of groups with at least one visible item. */
-        groups: Set<string>;
-    };
-};
-export type CommandIds = Record<'root' | 'label' | 'input' | 'list', string>;
-export type Context = {
-    value: (id: string, value: string) => void;
-    item: (id: string, groupId: string | undefined) => () => void;
-    group: (id: string) => () => void;
-    filter: () => boolean;
-    label: string;
-    commandEl: Writable<HTMLElement | null>;
-    ids: CommandIds;
-    updateState: UpdateState;
-};
-type UpdateState = <K extends keyof State>(key: K, value: State[K], preventScroll?: boolean) => void;
-export type ConextStore = Writable<Context>;
-export type StateStore = Writable<State> & {
-    updateState: UpdateState;
-};
-export type Group = {
-    id: string;
-    alwaysRender: boolean;
-};
-export {};

package/dist/components/command/types.js

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