tera-system-ui 0.0.1 → 0.0.3

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

@@ -0,0 +1,227 @@
+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

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

package/dist/components/dialog/Dialog.svelte

@@ -2,6 +2,7 @@
     import {type DialogProps, styles} from "./Dialog";
     import IconX from "../icons/IconX.svelte";
     import {Button} from "../button";
+    import './dialog.scss'
 
     let {
         children, open = $bindable(),
@@ -85,70 +86,3 @@
         {/if}
     </div>
 </dialog>
-
-
-<style>
-    .dialog-box {
-        max-height: min(calc(100svh - 3rem), 50rem);
-        overflow-y: auto;
-        overscroll-behavior: contain;
-        display: grid;
-        grid-template-rows: auto 1fr auto;
-        position: relative;
-        background-color: hsl(var(--tw---token-color-neutral-token-1));
-    }
-
-    dialog, dialog:modal {
-        max-width: calc(100vw - 1rem);
-        max-height: 100svh;
-    }
-
-    dialog {
-        --transition-duration: 0.2s;
-
-        transform: translateY(0px);
-
-        &, &::backdrop {
-            transition: display var(--transition-duration) allow-discrete, overlay var(--transition-duration) allow-discrete, opacity var(--transition-duration), transform var(--transition-duration) allow-discrete;
-            opacity: 0;
-
-        }
-
-        &[open] {
-            opacity: 1;
-            &::backdrop {
-                opacity: 1;
-            }
-        }
-
-        &:not([open]) {
-            opacity: 0;
-            transform: translateY(60px) scale(0.9); /* Reset to initial closed position */
-
-            &::backdrop {
-                opacity: 0; /* Fade-out backdrop */
-            }
-        }
-
-        @starting-style {
-            &[open] {
-                transform: translateY(-60px) scale(0.9);
-
-            }
-
-            &[open],
-            &[open]::backdrop {
-                opacity: 0;
-            }
-        }
-    }
-
-
-    dialog::backdrop {
-        background-color: hsl(var(--tw---token-color-neutral-token-13) / 0.2);
-        --tw-backdrop-blur: blur(0.2rem);
-        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-</style>

package/dist/components/dialog/Dialog.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type DialogProps } from "./Dialog";
+import './dialog.scss';
 declare const Dialog: import("svelte").Component<DialogProps & {
     id?: string;
     open?: boolean;

package/dist/components/dialog/dialog.scss

@@ -0,0 +1,58 @@
+.dialog-box {
+    max-height: min(calc(100svh - 3rem), 50rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    @apply bg-neutral-token-1 relative;
+}
+
+dialog, dialog:modal {
+    max-width: calc(100vw - 1rem);
+    max-height: 100svh;
+}
+
+dialog {
+    --transition-duration: 0.2s;
+
+    transform: translateY(0px);
+
+    &, &::backdrop {
+        transition: display var(--transition-duration) allow-discrete, overlay var(--transition-duration) allow-discrete, opacity var(--transition-duration), transform var(--transition-duration) allow-discrete,;
+        opacity: 0;
+
+    }
+
+    &[open] {
+        opacity: 1;
+        &::backdrop {
+            opacity: 1;
+        }
+    }
+
+    &:not([open]) {
+        opacity: 0;
+        transform: translateY(-40px) scale(1); /* Reset to initial closed position */
+
+        &::backdrop {
+            opacity: 0; /* Fade-out backdrop */
+        }
+    }
+
+    @starting-style {
+        &[open] {
+            transform: translateY(-40px) scale(1);
+
+        }
+
+        &[open],
+        &[open]::backdrop {
+            opacity: 0;
+        }
+    }
+}
+
+
+dialog::backdrop {
+    @apply backdrop-blur-[0.2rem] bg-neutral-token-13/20;
+}

package/dist/components/icons/IconArrowBigRightFilled.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconArrowBigRightFilled} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconArrowBigRightFilled class={styles({...props})}/>
+

package/dist/components/icons/IconArrowBigRightFilled.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconArrowBigRightFilled } from "@tabler/icons-svelte";
+declare const IconArrowBigRightFilled: import("svelte").Component<IconsProps, {}, "">;
+export default IconArrowBigRightFilled;

package/dist/components/icons/IconBookmarkPlus.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconBookmarkPlus} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconBookmarkPlus class={styles({...props})}/>
+

package/dist/components/icons/IconBookmarkPlus.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconBookmarkPlus } from "@tabler/icons-svelte";
+declare const IconBookmarkPlus: import("svelte").Component<IconsProps, {}, "">;
+export default IconBookmarkPlus;

package/dist/components/icons/IconChevronDown.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconChevronDown} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconChevronDown class={styles({...props})}/>
+

package/dist/components/icons/IconChevronDown.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconChevronDown } from "@tabler/icons-svelte";
+declare const IconChevronDown: import("svelte").Component<IconsProps, {}, "">;
+export default IconChevronDown;

package/dist/components/icons/IconCopy.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconCopy} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconCopy class={styles({...props})}/>
+

package/dist/components/icons/IconCopy.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconCopy } from "@tabler/icons-svelte";
+declare const IconCopy: import("svelte").Component<IconsProps, {}, "">;
+export default IconCopy;

package/dist/components/icons/IconCopyCheckFilled.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconCopyCheckFilled} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconCopyCheckFilled class={styles({...props})}/>
+

package/dist/components/icons/IconCopyCheckFilled.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconCopyCheckFilled } from "@tabler/icons-svelte";
+declare const IconCopyCheckFilled: import("svelte").Component<IconsProps, {}, "">;
+export default IconCopyCheckFilled;

package/dist/components/icons/IconLoader2.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconLoader2} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconLoader2 class={styles({...props})}/>
+

package/dist/components/icons/IconLoader2.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconLoader2 } from "@tabler/icons-svelte";
+declare const IconLoader2: import("svelte").Component<IconsProps, {}, "">;
+export default IconLoader2;

package/dist/components/icons/IconPointFilled.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconPointFilled} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconPointFilled class={styles({...props})}/>
+

package/dist/components/icons/IconPointFilled.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconPointFilled } from "@tabler/icons-svelte";
+declare const IconPointFilled: import("svelte").Component<IconsProps, {}, "">;
+export default IconPointFilled;

package/dist/components/icons/IconSearch.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconSearch} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconSearch class={styles({...props})}/>
+

package/dist/components/icons/IconSearch.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconSearch } from "@tabler/icons-svelte";
+declare const IconSearch: import("svelte").Component<IconsProps, {}, "">;
+export default IconSearch;

package/dist/components/icons/IconSwitchHorizontal.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconSwitchHorizontal} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconSwitchHorizontal class={styles({...props})}/>
+

package/dist/components/icons/IconSwitchHorizontal.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconSwitchHorizontal } from "@tabler/icons-svelte";
+declare const IconSwitchHorizontal: import("svelte").Component<IconsProps, {}, "">;
+export default IconSwitchHorizontal;

package/dist/components/icons/IconSwitchVertical.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconSwitchVertical} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconSwitchVertical class={styles({...props})}/>
+

package/dist/components/icons/IconSwitchVertical.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconSwitchVertical } from "@tabler/icons-svelte";
+declare const IconSwitchVertical: import("svelte").Component<IconsProps, {}, "">;
+export default IconSwitchVertical;

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

@@ -1,2 +1,19 @@
+export { default as IconArrowBigRightFilled } from './IconArrowBigRightFilled.svelte';
+export { default as IconBook } from './IconBook.svelte';
+export { default as IconBookmarkPlus } from './IconBookmarkPlus.svelte';
+export { default as IconCalculator } from './IconCalculator.svelte';
+export { default as IconCheck } from './IconCheck.svelte';
+export { default as IconChevronDown } from './IconChevronDown.svelte';
+export { default as IconCopy } from './IconCopy.svelte';
+export { default as IconCopyCheckFilled } from './IconCopyCheckFilled.svelte';
 export { default as IconHamburger } from './IconHamburger.svelte';
 export { default as IconLanguage } from './IconLanguage.svelte';
+export { default as IconLoader2 } from './IconLoader2.svelte';
+export { default as IconMoon } from './IconMoon.svelte';
+export { default as IconPointFilled } from './IconPointFilled.svelte';
+export { default as IconSearch } from './IconSearch.svelte';
+export { default as IconSun } from './IconSun.svelte';
+export { default as IconSwitchHorizontal } from './IconSwitchHorizontal.svelte';
+export { default as IconSwitchVertical } from './IconSwitchVertical.svelte';
+export { default as IconTransform } from './IconTransform.svelte';
+export { default as IconX } from './IconX.svelte';

package/dist/components/icons/index.js

@@ -1,2 +1,19 @@
+export { default as IconArrowBigRightFilled } from './IconArrowBigRightFilled.svelte';
+export { default as IconBook } from './IconBook.svelte';
+export { default as IconBookmarkPlus } from './IconBookmarkPlus.svelte';
+export { default as IconCalculator } from './IconCalculator.svelte';
+export { default as IconCheck } from './IconCheck.svelte';
+export { default as IconChevronDown } from './IconChevronDown.svelte';
+export { default as IconCopy } from './IconCopy.svelte';
+export { default as IconCopyCheckFilled } from './IconCopyCheckFilled.svelte';
 export { default as IconHamburger } from './IconHamburger.svelte';
 export { default as IconLanguage } from './IconLanguage.svelte';
+export { default as IconLoader2 } from './IconLoader2.svelte';
+export { default as IconMoon } from './IconMoon.svelte';
+export { default as IconPointFilled } from './IconPointFilled.svelte';
+export { default as IconSearch } from './IconSearch.svelte';
+export { default as IconSun } from './IconSun.svelte';
+export { default as IconSwitchHorizontal } from './IconSwitchHorizontal.svelte';
+export { default as IconSwitchVertical } from './IconSwitchVertical.svelte';
+export { default as IconTransform } from './IconTransform.svelte';
+export { default as IconX } from './IconX.svelte';