tera-system-ui 0.1.75 → 0.2.1

package/dist/components/side-navigation/SideNavigationGroup.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">import { slide } from "svelte/transition";
-import { IconChevronDown } from "../icons";
-import SideNavItem from "./SideNavigationItem.svelte";
-let { group, expanded = false, onToggle, isSelected, } = $props();
-</script>
-
-<li class="side-nav_group">
-    <button
-            type="button"
-            class="side-nav_item side-nav_group-header"
-            aria-expanded={expanded}
-            onclick={onToggle}
-    >
-        <span class="side-nav_group-divider" aria-hidden="true"></span>
-        <div class="sm-hidden z-10 truncate side-nav_group-title">
-            {group.title}
-        </div>
-        <div class="sm-hidden z-10 side-nav_group-chevron" data-expanded={expanded}>
-            <IconChevronDown/>
-        </div>
-    </button>
-
-    {#if expanded}
-        <ul class="side-nav_group-items" transition:slide={{duration: 200}}>
-            {#each group.items as item (item.href)}
-                <SideNavItem
-                        href={item.href}
-                        class={`side-nav_group-item ${isSelected(item) ? 'selected' : ''}`}
-                >
-                    {#snippet icon()}
-                        {#if item.icon}
-                            <item.icon/>
-                        {/if}
-                    {/snippet}
-                    {item.title}
-                </SideNavItem>
-            {/each}
-        </ul>
-    {/if}
-</li>

package/dist/components/side-navigation/SideNavigationGroup.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { SideNavigationGroup, SideNavigationItem } from "./SideNavigation";
-type $$ComponentProps = {
-    group: SideNavigationGroup;
-    expanded?: boolean;
-    onToggle: () => void;
-    isSelected: (item: SideNavigationItem) => boolean;
-};
-declare const SideNavigationGroup: import("svelte").Component<$$ComponentProps, {}, "">;
-type SideNavigationGroup = ReturnType<typeof SideNavigationGroup>;
-export default SideNavigationGroup;

package/dist/components/side-navigation/SideNavigationItem.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">"use strict";
-const { class: className, href, children, icon } = $props();
-</script>
-
-<li class="{className + ' side-nav_item'}">
-    <a href="{href || '#'}" class="" data-no-translate data-sveltekit-reload>
-        <div class="min-w-icon-sm z-10">
-            {@render icon?.()}
-        </div>
-        <div class="sm-hidden z-10 truncate">
-            {@render children?.()}
-        </div>
-    </a>
-</li>
-
-<style>
-
-</style>

package/dist/components/side-navigation/SideNavigationItem.svelte.d.ts

@@ -1,8 +0,0 @@
-declare const SideNavigationItem: import("svelte").Component<{
-    class: any;
-    href: any;
-    children: any;
-    icon: any;
-}, {}, "">;
-type SideNavigationItem = ReturnType<typeof SideNavigationItem>;
-export default SideNavigationItem;

package/dist/components/side-navigation/SideNavigationLayout.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">import { SideNavigation } from "./";
-import './sidenav.scss';
-let { children, language, items, bottomChildren } = $props();
-</script>
-
-<main
-        id="side-nav_main-layout"
-        class="side-nav_main-layout relative"
-        data-side-nav-state="compact"
->
-    <SideNavigation language={language} items={items} bottomChildren={bottomChildren}/>
-    <div class="side-nav-backdrop">
-
-    </div>
-    <section class="side-nav_main-content">
-        {@render children?.()}
-    </section>
-</main>
-

package/dist/components/side-navigation/SideNavigationLayout.svelte.d.ts

@@ -1,9 +0,0 @@
-import './sidenav.scss';
-declare const SideNavigationLayout: import("svelte").Component<{
-    children: any;
-    language: any;
-    items: any;
-    bottomChildren: any;
-}, {}, "">;
-type SideNavigationLayout = ReturnType<typeof SideNavigationLayout>;
-export default SideNavigationLayout;

package/dist/components/side-navigation/index.d.ts

@@ -1,5 +0,0 @@
-export { default as SideNavigation } from './SideNavigation.svelte';
-export { default as SideNavigationLayout } from './SideNavigationLayout.svelte';
-export { default as SideNavigationGroup } from './SideNavigationGroup.svelte';
-export { toggleSideNavigation, isSideNavigationGroup } from './SideNavigation';
-export type { SideNavigationItem, SideNavigationGroup as SideNavigationGroupItem, SideNavigationEntry, SideNavigationProps } from "./SideNavigation";

package/dist/components/side-navigation/index.js

@@ -1,4 +0,0 @@
-export { default as SideNavigation } from './SideNavigation.svelte';
-export { default as SideNavigationLayout } from './SideNavigationLayout.svelte';
-export { default as SideNavigationGroup } from './SideNavigationGroup.svelte';
-export { toggleSideNavigation, isSideNavigationGroup } from './SideNavigation';

package/dist/components/side-navigation/sidenav.scss

@@ -1,226 +0,0 @@
-@reference "tailwindcss/theme";
-
-:root {
-    --sidebar-width: 0;
-    --sidebar-transition-duration: 0.2s;
-    --sidebar-main-margin-left: 0;
-    --sidebar-border-width: 0;
-}
-
-.side-nav_main-layout {
-    transition: padding-left var(--sidebar-transition-duration);
-}
-
-.side-nav_main-side-bar {
-    container-type: inline-size;
-    z-index: 50;
-    width: var(--sidebar-width);
-    overflow-x: hidden;
-    border-right: var(--sidebar-border-width) solid var(--color-neutral-token-5);
-    height: 100dvh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-
-    transition: width var(--sidebar-transition-duration);
-    background: var(--color-neutral-token-1);
-
-    ul {
-        width: var(--sidebar-width);
-        transition: width var(--sidebar-transition-duration);
-    }
-}
-
-
-.sm-hidden {
-    opacity: 0;
-    transition: opacity var(--sidebar-transition-duration);
-}
-
-@container (min-width: 3rem) {
-    .sm-hidden {
-        opacity: 1;
-    }
-}
-
-.side-nav_main-content {
-    margin-left: var(--sidebar-main-margin-left);
-    transition: margin-left var(--sidebar-transition-duration);
-}
-
-.side-nav-backdrop {
-    //display: none;
-    z-index: -1;
-    position: fixed;
-    opacity: 0;
-    left: 0;
-    transition: opacity var(--sidebar-transition-duration),
-    left var(--sidebar-transition-duration);
-
-}
-
-.side-nav_main-layout {
-    &[data-side-nav-state="expand"], &[data-side-nav-temporary-expand="true"] {
-        --sidebar-width: 16.5rem;
-        --sidebar-border-width: 1px;
-
-        .header-brand-logo {
-            display: none;
-        }
-    }
-
-    &[data-side-nav-state="expand"] {
-        .side-nav-backdrop {
-            display: block;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            left: var(--sidebar-width);
-            z-index: 100;
-            background: --alpha(var(--color-neutral-token-12) / 30%);
-            backdrop-filter: blur(var(--blur-sm));
-            opacity: 1;
-        }
-    }
-}
-
-@media (min-width: 48rem) {
-    :root {
-        --sidebar-main-margin-left: 3rem;
-        --sidebar-border-width: 1px;
-        --sidebar-width: 3rem;
-    }
-}
-
-@media (min-width: 80rem) {
-    :root {
-        --sidebar-main-margin-left: var(--sidebar-width);
-        --sidebar-width: 16.5rem;
-    }
-    .header-brand-logo {
-        display: none;
-    }
-    .side-nav_main-layout {
-        &[data-side-nav-state="compact"] {
-            --sidebar-main-margin-left: 3rem;
-            --sidebar-width: 3rem;
-
-            .header-brand-logo {
-                display: block;
-            }
-        }
-
-        &[data-side-nav-temporary-expand="true"] {
-            --sidebar-width: 16.5rem;
-
-        }
-    }
-}
-
-
-.side-nav_item {
-    color: var(--color-neutral-token-13);
-    position: relative;
-    transition: background-color 150ms var(--ease-ui);
-
-    a {
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-        width: 100%;
-        position: relative;
-        white-space: nowrap;
-        padding: --spacing(3);
-        font-weight: var(--font-weight-semibold);
-    }
-
-    svg {
-        &.icon {
-            min-width: 24px;
-        }
-    }
-
-    /* Active item: 3px left accent bar */
-    &.selected {
-        a {
-            color: var(--color-text-primary);
-        }
-
-        &::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0.25rem;
-            bottom: 0.25rem;
-            width: 3px;
-            background: var(--color-interactive);
-            border-radius: 0 2px 2px 0;
-        }
-    }
-
-    &:hover {
-        background-color: var(--color-surface-hover);
-    }
-}
-
-.side-nav_group {
-    .side-nav_group-header {
-        position: relative;
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-        width: 100%;
-        /* Fixed compact height: keeps child items from shifting up/down when the
-           panel collapses/expands, and tightens the gap between groups in the rail. */
-        height: 2rem;
-        white-space: nowrap;
-        padding-block: 0;
-        padding-inline: --spacing(3);
-        font-weight: var(--font-weight-normal);
-        color: var(--color-text-secondary);
-        cursor: pointer;
-        background: transparent;
-        border: none;
-        text-align: start;
-
-        &:hover {
-            background-color: var(--color-surface-hover);
-        }
-    }
-
-    /* In the compact (icon-only) panel the title + chevron fade out and this line
-       fades in — so a group header reads as a thin divider between item clusters.
-       It is the exact inverse of `.sm-hidden`, sharing the same container-query
-       threshold so the two always cross-fade. */
-    .side-nav_group-divider {
-        position: absolute;
-        left: --spacing(2);
-        right: --spacing(2);
-        top: 50%;
-        transform: translateY(-50%);
-        height: 1px;
-        background: var(--color-border-default);
-        opacity: 1;
-        transition: opacity var(--sidebar-transition-duration);
-        pointer-events: none;
-
-        @container (min-width: 3rem) {
-            opacity: 0;
-        }
-    }
-
-    .side-nav_group-title {
-        flex: 1;
-    }
-
-    .side-nav_group-chevron {
-        display: flex;
-        align-items: center;
-        transition: rotate var(--sidebar-transition-duration) var(--ease-ui);
-
-        &[data-expanded="true"] {
-            rotate: 180deg;
-        }
-    }
-}

package/dist/components/slider/Slider.d.ts

@@ -1,28 +0,0 @@
-export interface SliderProps {
-    /** Additional CSS classes for the root element. */
-    class?: string;
-    /** Minimum value of the slider range. */
-    min?: number;
-    /** Maximum value of the slider range. */
-    max?: number;
-    /** Step interval between selectable values. */
-    step?: number;
-    /** Current value. Bindable. */
-    value?: number;
-    /** Prevents all interaction and dims the control. */
-    disabled?: boolean;
-    /**
-     * Layout orientation of the slider track and thumb.
-     * When 'vertical', the parent must have an explicit height.
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /** Fires continuously as the thumb moves during drag. */
-    onchange?: (value: number) => void;
-    /**
-     * Fires once when the user finishes dragging and releases the thumb.
-     * Prefer this over `onchange` when the handler triggers expensive work.
-     */
-    onValueCommit?: (value: number) => void;
-    /** Bindable reference to the root span element. */
-    ref?: HTMLElement | null;
-}

package/dist/components/slider/Slider.js

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

package/dist/components/star-rating/StarRating.d.ts

@@ -1,31 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-export declare const styles: import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, "", {
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, "", unknown, unknown, undefined>>;
-type StarRatingVariants = VariantProps<typeof styles>;
-export interface StarRatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, StarRatingVariants {
-    children?: Snippet;
-    class?: string;
-    value?: number;
-    onchange?: (value: number) => void;
-    ref?: HTMLDivElement | null;
-}
-export {};

package/dist/components/star-rating/StarRating.js

@@ -1,15 +0,0 @@
-import { tv } from "tailwind-variants";
-export const styles = tv({
-    base: '',
-    variants: {
-        size: {
-            sm: 'size-6 p-1',
-            md: 'size-8 p-1',
-            lg: 'size-10 p-1'
-        }
-    },
-    compoundVariants: [],
-    defaultVariants: {
-        size: 'md'
-    },
-});

package/dist/components/switch/Switch.d.ts

@@ -1,27 +0,0 @@
-/**
- * @component Switch - Toggle switch for boolean on/off state.
- * Built on BitsUI Switch primitive with form integration support.
- */
-import { type VariantProps } from "tailwind-variants";
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
-type SwitchVariants = VariantProps<typeof styles>;
-export interface SwitchProps extends SwitchVariants {
-    /** Additional CSS classes for the root element. */
-    class?: string;
-    /** Whether the switch is on. Bindable. */
-    checked?: boolean;
-    /** Prevents all interaction and dims the control. */
-    disabled?: boolean;
-    /** Whether the switch is required for form submission. */
-    required?: boolean;
-    /** Name attribute used when submitting within a form. */
-    name?: string;
-    /** Value sent with the form when the switch is checked. */
-    value?: string;
-    /** Called when the checked state changes. */
-    onCheckedChange?: (checked: boolean) => void;
-    /** Bindable reference to the root button element. */
-    ref?: HTMLButtonElement | null;
-    [key: string]: unknown;
-}
-export {};

package/dist/components/switch/Switch.js

@@ -1,11 +0,0 @@
-/**
- * @component Switch - Toggle switch for boolean on/off state.
- * Built on BitsUI Switch primitive with form integration support.
- */
-import { tv } from "tailwind-variants";
-export const styles = tv({
-    base: '',
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {},
-});

package/dist/components/tera-ui-context/TeraUiContext.d.ts

@@ -1,11 +0,0 @@
-import type { AvailableLanguageTag } from "../../i18n/language";
-import type { Snippet } from "svelte";
-export interface TeraUiContextProps {
-    children?: Snippet;
-    class?: string;
-    basePath?: string;
-    supportLanguages?: AvailableLanguageTag[];
-    language?: AvailableLanguageTag;
-    sideNavHref?: string;
-    apiUrl?: string;
-}

package/dist/components/tera-ui-context/TeraUiContext.js

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

package/dist/components/tera-ui-context/TeraUiContext.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">import { untrack } from 'svelte';
-import {} from "./TeraUiContext";
-import { setGlobalContext } from "./global-context";
-let { children, supportLanguages = ['en'], language = 'en', ...props } = $props();
-// setContext must be called once during init — untrack signals this is intentional
-setGlobalContext(untrack(() => ({
-    supportLanguages,
-    language,
-    ...props
-})));
-</script>
-
-{@render children()}

package/dist/components/tera-ui-context/TeraUiContext.svelte.d.ts

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

package/dist/components/tera-ui-context/global-context-store.d.ts

@@ -1,3 +0,0 @@
-import { type Writable } from 'svelte/store';
-import type { TeraUiContext } from "./TeraUiContext";
-export declare const globalContextStore: Writable<TeraUiContext>;

package/dist/components/tera-ui-context/global-context-store.js

@@ -1,2 +0,0 @@
-import { writable } from 'svelte/store';
-export const globalContextStore = writable();

package/dist/components/tera-ui-context/global-context.d.ts

@@ -1,3 +0,0 @@
-import type { TeraUiContext } from "./TeraUiContext";
-export declare function setGlobalContext(data: TeraUiContext): void;
-export declare function getGlobalContext(): TeraUiContext;

package/dist/components/tera-ui-context/global-context.js

@@ -1,24 +0,0 @@
-import { getContext, setContext } from "svelte";
-import { globalContextStore } from "./global-context-store";
-import { get } from "svelte/store";
-export function setGlobalContext(data) {
-    if (data.isAstroEnv) {
-        globalContextStore.set(data);
-    }
-    else {
-        setContext('globalContext', data);
-    }
-    // console.log('tera-system-ui', 'set global context', data);
-}
-export function getGlobalContext() {
-    let context = getContext('globalContext') || get(globalContextStore);
-    // console.log('tera-system-ui', 'getGlobalContext', context);
-    if (!context) {
-        // console.error('tera-system-ui', 'Not set global context yet!', 'Using default context data')
-        return {
-            language: 'en',
-            supportLanguages: ['en']
-        };
-    }
-    return context;
-}

package/dist/components/tera-ui-context/index.d.ts

@@ -1,2 +0,0 @@
-export { default as TeraUiContext } from './TeraUiContext.svelte';
-export type { TeraUiContextProps } from './TeraUiContext';

package/dist/components/tera-ui-context/index.js

@@ -1 +0,0 @@
-export { default as TeraUiContext } from './TeraUiContext.svelte';

package/dist/components/text-area/TextArea.d.ts

@@ -1,87 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-import type { Snippet } from "svelte";
-import type { HTMLTextareaAttributes } from "svelte/elements";
-export declare const styles: import("tailwind-variants").TVReturnType<{
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    allowClear: {
-        true: string;
-    };
-    status: {
-        error: string;
-        warning: string;
-    };
-}, undefined, "w-full inline-flex items-start rounded-md outline-none font-normal text-text-primary placeholder:text-text-tertiary resize-y transition-[border-color,box-shadow,background-color,height] ease-ui duration-150", {
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    allowClear: {
-        true: string;
-    };
-    status: {
-        error: string;
-        warning: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    allowClear: {
-        true: string;
-    };
-    status: {
-        error: string;
-        warning: string;
-    };
-}, undefined, "w-full inline-flex items-start rounded-md outline-none font-normal text-text-primary placeholder:text-text-tertiary resize-y transition-[border-color,box-shadow,background-color,height] ease-ui duration-150", unknown, unknown, undefined>>;
-type TextAreaVariants = VariantProps<typeof styles>;
-export type AutoSizeConfig = boolean | {
-    minRows?: number;
-    maxRows?: number;
-};
-export interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'disabled' | 'rows' | 'prefix'>, TextAreaVariants {
-    children?: Snippet;
-    class?: string;
-    value?: string;
-    ref?: HTMLTextAreaElement | null;
-    autoSize?: AutoSizeConfig;
-    rows?: number;
-    allowClear?: boolean;
-    showCount?: boolean;
-    maxLength?: number;
-}
-export {};