tera-system-ui 0.0.21 → 0.0.23

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,82 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}, undefined, "relative rounded-full object-cover bg-primary-token-1 select-none grid place-content-center leading-none font-bold overflow-clip hover:brightness-90", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}, undefined, "relative rounded-full object-cover bg-primary-token-1 select-none grid place-content-center leading-none font-bold overflow-clip hover:brightness-90", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;
+type AvatarVariants = VariantProps<typeof styles>;
+export interface AvatarProps extends AvatarVariants {
+    children?: any;
+    class?: string;
+    alt?: string;
+    src?: string;
+    ref?: any;
+    userUid?: string;
+}
+export {};

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,35 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: 'relative rounded-full object-cover bg-primary-token-1 select-none grid place-content-center leading-none font-bold overflow-clip hover:brightness-90',
+    variants: {
+        size: {
+            sm: 'size-8 text-xs',
+            md: 'size-10 text-sm',
+            lg: 'size-12 font-bold',
+            xl: 'size-16 text-xl font-bold',
+        },
+        border: {
+            true: 'border-[4px] border-primary-token-6'
+        }
+    },
+    compoundVariants: [
+        {
+            size: 'sm',
+            border: true,
+            class: 'border-[2px]'
+        },
+        {
+            size: ['md', 'lg'],
+            border: true,
+            class: 'border-[3px]'
+        },
+        {
+            size: ['xl'],
+            border: true,
+            class: 'border-[4px]'
+        }
+    ],
+    defaultVariants: {
+        size: 'md',
+    },
+});

package/dist/components/avatar/Avatar.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import {type AvatarProps, styles} from "./Avatar";
+    import {getUserAvatarUrl} from "../../internal/service/user.service";
+    import {cn} from "../../utils/utils";
+
+    let {
+        children,
+        alt = 'Avatar',
+        size = 'md',
+        src,
+        class: className,
+        border = true,
+        ref = $bindable(),
+        userUid,
+        ...props
+    }: AvatarProps = $props();
+
+    let isError = $state()
+
+    function handleErrorImage() {
+        isError = true
+    }
+
+    let imgUrl = src ? src : userUid ? getUserAvatarUrl(userUid) : undefined
+</script>
+
+<div bind:this={ref}
+     class={styles({ size, className, border })} {...props}>
+    {#if imgUrl && !isError}
+        <img src={imgUrl} alt={alt} onerror={handleErrorImage} class="w-full h-full object-cover"/>
+    {:else}
+        <span class="leading-none">
+            {@render children?.()}
+        </span>
+    {/if}
+    <div class={
+        cn("absolute inset-[0px] border-[2px] border-neutral-token-2 rounded-full", {
+            'border-[3px]' : size === 'lg' || size === 'xl',
+        })
+    }>
+
+    </div>
+</div>

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type AvatarProps } from "./Avatar";
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "ref">;
+export default Avatar;

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

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

package/dist/components/avatar/index.js

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

package/dist/components/dialog/Dialog.astro

@@ -11,6 +11,7 @@ const {
     class: className,
     position = 'center',
     padding,
+    containerClass,
     focusTriggerAfterClose,
     ...props
 }: DialogPropsAstro = Astro.props
@@ -44,7 +45,7 @@ const hasFooterSlot = !!Astro.slots["footer"];
             </form>
     }
 
-    <div class={"dialog-box " + dialogContainer()}>
+    <div class={"dialog-box " + dialogContainer({className: containerClass})}>
         {hasHeaderSlot &&
                 <header class={headerStyle()}>
                     <slot name="header"/>

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

@@ -198,6 +198,7 @@ type DialogPropsCommon = {
     position?: 'top' | 'center';
     focusTriggerAfterClose?: boolean;
     padding?: 'none' | undefined;
+    containerClass?: string;
 };
 export type DialogProps = DialogVariants & DialogPropsCommon & {
     children?: any;
@@ -206,6 +207,7 @@ export type DialogProps = DialogVariants & DialogPropsCommon & {
     open?: boolean;
     staticRender?: boolean;
     triggerRef?: HTMLElement;
+    ref?: any;
 };
 export type DialogPropsAstro = DialogVariants & DialogPropsCommon & {};
 export {};

package/dist/components/dialog/Dialog.svelte

@@ -7,6 +7,7 @@
 
     let {
         children, open = $bindable(),
+        ref = $bindable(),
         closeOnClickOutside = true,
         closeButton = true,
         size = 'sm',
@@ -18,23 +19,22 @@
         staticRender = false,
         triggerRef,
         focusTriggerAfterClose,
+        containerClass,
         ...props
     }: DialogProps = $props();
 
-    let dialog;
-
     let hasOpened = $state(false);
 
     // Watch for prop changes to open/close the dialog
     $effect(() => {
         if (open) {
             stillAnimating = open
-            dialog?.showModal();
+            ref?.showModal();
 
             if (!hasOpened)
                 hasOpened = true
         } else {
-            dialog?.close()
+            ref?.close()
             sleep(200).then(() => {
                 stillAnimating = open
                 console.log('stillAnimating', stillAnimating)
@@ -48,8 +48,8 @@
 
     // Close dialog on clicking outside (optional)
     function handleClickOutside(e) {
-        if (closeOnClickOutside && e.target === dialog) {
-            dialog?.close();
+        if (closeOnClickOutside && e.target === ref) {
+            ref?.close();
         }
     }
 
@@ -72,7 +72,7 @@
 {#if staticRender || (!staticRender && (open || stillAnimating))}
     <dialog class={dialogStyle() + ` ${className}`}
             data-position={position}
-            bind:this={dialog}
+            bind:this={ref}
             onclose={handleClose}
             onmousedown={handleClickOutside}
             size={size}
@@ -90,7 +90,7 @@
             </form>
         {/if}
 
-        <div class={"dialog-box " + dialogContainer()}>
+        <div class={"dialog-box " + dialogContainer({className: containerClass})}>
             {#if header}
                 <header class={headerStyle()}>
                     {@render header?.()}

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

@@ -1,4 +1,4 @@
 import { type DialogProps } from "./Dialog";
 import './dialog.scss';
-declare const Dialog: import("svelte").Component<DialogProps, {}, "open">;
+declare const Dialog: import("svelte").Component<DialogProps, {}, "ref" | "open">;
 export default Dialog;

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -0,0 +1,22 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, unknown, unknown, undefined>>;
+type DropdownMenuVariants = VariantProps<typeof styles>;
+export interface DropdownMenuProps extends DropdownMenuVariants {
+    children?: any;
+    class?: string;
+    triggerRef: any;
+    open?: boolean;
+}
+export type DropdownMenuContext = {
+    setOpen: (open: boolean) => void;
+    getOpen: () => boolean;
+};
+export declare function getCtx(): DropdownMenuContext;
+export declare function setCtx(context: DropdownMenuContext): void;
+export type DropdownMenuItemProps = {
+    children?: any;
+    class?: string;
+    onclick?: (e: any) => void;
+    href?: string;
+};
+export {};

package/dist/components/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+import { getContext, setContext } from "svelte";
+export const styles = tv({
+    base: '',
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {},
+});
+const CONTEXT_NAME = 'DropdownMenu';
+export function getCtx() {
+    return getContext(CONTEXT_NAME);
+}
+export function setCtx(context) {
+    setContext(CONTEXT_NAME, context);
+}

package/dist/components/dropdown-menu/components/DropdownMenu.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import {type DropdownMenuProps, setCtx} from "../DropdownMenu";
+    import {Popover} from "../../popover";
+
+    let {
+        children,
+        open = $bindable(),
+        triggerRef,
+
+        ...props
+    }: DropdownMenuProps = $props();
+
+    function setOpen(o: boolean) {
+        open = o;
+    }
+
+    setCtx({
+        setOpen,
+        getOpen: () => !!open
+    })
+
+</script>
+
+<Popover
+        triggerRef={triggerRef}
+        offset={4}
+        bind:open
+        class=""
+        flip="true"
+        role="menu"
+        {...props}
+>
+    {@render children?.()}
+</Popover>

package/dist/components/dropdown-menu/components/DropdownMenu.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type DropdownMenuProps } from "../DropdownMenu";
+declare const DropdownMenu: import("svelte").Component<DropdownMenuProps, {}, "open">;
+export default DropdownMenu;

package/dist/components/dropdown-menu/components/DropdownMenuGroup.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import {cn} from "../../../utils/utils";
+
+    let {children, class: className, ...props} = $props()
+</script>
+
+<div class={cn('p-1', className)}
+     data-dropdown-menu-group
+     role="group"
+     {...props}>
+    {@render children?.()}
+</div>

package/dist/components/dropdown-menu/components/DropdownMenuGroup.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const DropdownMenuGroup: import("svelte").Component<{
+    children: unknown;
+    class: unknown;
+} & Record<string, unknown>, {}, "">;
+export default DropdownMenuGroup;

package/dist/components/dropdown-menu/components/DropdownMenuHeader.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import {cn} from "../../../utils/utils";
+
+    let {children, class: className, ...props} = $props()
+</script>
+
+<div class={cn('px-3 py-1.5 font-semibold', className)}
+     data-dropdown-menu-header
+     role="group"
+     {...props}>
+    {@render children?.()}
+</div>

package/dist/components/dropdown-menu/components/DropdownMenuHeader.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const DropdownMenuHeader: import("svelte").Component<{
+    children: unknown;
+    class: unknown;
+} & Record<string, unknown>, {}, "">;
+export default DropdownMenuHeader;

package/dist/components/dropdown-menu/components/DropdownMenuItem.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import {type DropdownMenuItemProps, getCtx} from "../DropdownMenu";
+    import {cn} from "../../../utils/utils";
+
+
+    let {children, class: className, onclick, href, ...props}: DropdownMenuItemProps = $props()
+    let context = getCtx()
+</script>
+
+{#snippet button()}
+    <button
+            onclick={(e) => {
+            onclick?.(e)
+            context?.setOpen(false)
+        }}
+            role="menuitem"
+            data-dropdown-menu-item
+            class={cn('flex w-full items-center gap-2 px-2 py-2 rounded hover:bg-neutral-token-4 transition-all', className)}
+            {...props}>
+        {@render children?.()}
+    </button>
+{/snippet}
+
+{#if href}
+    <a href={href}>
+        {@render button()}
+    </a>
+{:else }
+    {@render button()}
+{/if}

package/dist/components/dropdown-menu/components/DropdownMenuItem.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type DropdownMenuItemProps } from "../DropdownMenu";
+declare const DropdownMenuItem: import("svelte").Component<DropdownMenuItemProps, {}, "">;
+export default DropdownMenuItem;

package/dist/components/dropdown-menu/components/DropdownMenuSeparator.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import {cn} from "../../../utils/utils";
+
+    let {children, class: className, ...props} = $props()
+</script>
+
+<div class={cn('border-b w-full', className)}
+     data-dropdown-menu-separator
+     {...props}>
+
+</div>

package/dist/components/dropdown-menu/components/DropdownMenuSeparator.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const DropdownMenuSeparator: import("svelte").Component<{
+    children: unknown;
+    class: unknown;
+} & Record<string, unknown>, {}, "">;
+export default DropdownMenuSeparator;

package/dist/components/dropdown-menu/index.d.ts

@@ -0,0 +1,5 @@
+export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as DropdownMenuItem } from './components/DropdownMenuItem.svelte';
+export { default as DropdownMenuGroup } from './components/DropdownMenuGroup.svelte';
+export { default as DropdownMenuHeader } from './components/DropdownMenuHeader.svelte';
+export { default as DropdownMenuSeparator } from './components/DropdownMenuSeparator.svelte';

package/dist/components/dropdown-menu/index.js

@@ -0,0 +1,5 @@
+export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as DropdownMenuItem } from './components/DropdownMenuItem.svelte';
+export { default as DropdownMenuGroup } from './components/DropdownMenuGroup.svelte';
+export { default as DropdownMenuHeader } from './components/DropdownMenuHeader.svelte';
+export { default as DropdownMenuSeparator } from './components/DropdownMenuSeparator.svelte';

package/dist/components/icons/IconLogout.svelte

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

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

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

package/dist/components/icons/IconSettings.svelte

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

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

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

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

@@ -9,9 +9,11 @@ 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 IconLogout } from './IconLogout.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 IconSettings } from './IconSettings.svelte';
 export { default as IconSun } from './IconSun.svelte';
 export { default as IconSwitchHorizontal } from './IconSwitchHorizontal.svelte';
 export { default as IconSwitchVertical } from './IconSwitchVertical.svelte';

package/dist/components/icons/index.js

@@ -9,9 +9,11 @@ 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 IconLogout } from './IconLogout.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 IconSettings } from './IconSettings.svelte';
 export { default as IconSun } from './IconSun.svelte';
 export { default as IconSwitchHorizontal } from './IconSwitchHorizontal.svelte';
 export { default as IconSwitchVertical } from './IconSwitchVertical.svelte';

package/dist/components/popover/Popover.svelte

@@ -5,6 +5,7 @@
 
     import {clickOutside} from "../../actions/clickOutside"
     import {onDestroy, onMount} from "svelte";
+    import {circInOut} from "svelte/easing";
 
     let {
         children,
@@ -41,8 +42,10 @@
                 offset(offsetAmount),
                 size({
                     apply({rects, elements}) {
+                        console.log(elements.reference)
                         Object.assign(elements.floating.style, {
                             minWidth: `${rects.reference.width}px`,
+                            maxWidth: `${window.innerWidth - 16}px`,
                         });
                     },
                 }),
@@ -116,14 +119,36 @@
             cleanup?.()
         }
     })
+
+
+    function spin(node, {duration}) {
+        return {
+            duration,
+            css: (t) => {
+                const eased = circInOut(t);
+                return `
+                    transform-origin: 0% 0%;
+					transform: translateY(${eased * 10 - 10}px) scaleY(${eased * 0.05 + 0.95});
+					opacity: ${eased};
+				`
+
+            }
+        };
+    }
+
+
 </script>
 
 <!-- Popover Content -->
 {#if open}
     <div bind:this={popover}
+         data-open={open}
          class={cn("overflow-hidden absolute z-10 bg-neutral-token-1 shadow-2xl rounded-container border border-neutral-token-5", className)}
          use:clickOutside={{exceptElement: triggerRef}}
          onclick_outside={handleClickOutside}
+
+         in:spin={{ duration: 200 }}
+         out:spin={{ duration: 200 }}
          {...props}
     >
         <!--    <div bind:this={arrowElement} class="size-2 absolute rotate-45 bg-inherit"></div>-->
@@ -132,6 +157,3 @@
 {/if}
 
 
-<style>
-
-</style>

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

@@ -0,0 +1,9 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, unknown, unknown, undefined>>;
+type SliderVariants = VariantProps<typeof styles>;
+export interface SliderProps extends SliderVariants {
+    children?: any;
+    class?: string;
+}
+export type SliderContextProps = {};
+export {};

package/dist/components/slider/Slider.js

@@ -0,0 +1,7 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: '',
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {},
+});