tera-system-ui 0.1.20 → 0.1.32

package/dist/components/popover/Popover.svelte

@@ -1,158 +1,158 @@
-<script lang="ts">
-    import {type PopoverProps} from "./Popover";
-    import {arrow, autoUpdate, computePosition, flip, offset, shift, size} from "@floating-ui/dom";
-    import {cn} from "../../utils/utils";
-
-    import {clickOutside} from "../../actions/clickOutside"
-    import {onDestroy, onMount} from "svelte";
-    import {circInOut} from "svelte/easing";
-
-    let {
-        children,
-        triggerRef,
-        class: className,
-        open = $bindable(),
-        offset: offsetAmount = 3,
-        padding: paddingAmount = 12,
-        focusTriggerAfterClose = true,
-        flip: enableFlip = false,
-        autoTrigger = true,
-        ...props
-    }: PopoverProps = $props();
-
-    let hasOpenedYet = $state(false)
-
-    function togglePopover() {
-        open = !open;
-    }
-
-
-    function handleClickOutside(e) {
-        open = false
-    }
-
-    let popover = $state();
-    let arrowElement = $state();
-
-
-    function updatePosition() {
-        computePosition(triggerRef, popover, {
-            placement: 'bottom',
-            middleware: [
-                offset(offsetAmount),
-                size({
-                    apply({rects, elements}) {
-                        Object.assign(elements.floating.style, {
-                            minWidth: `${rects.reference.width}px`,
-                            maxWidth: `${window.innerWidth - 16}px`,
-                        });
-                    },
-                }),
-                enableFlip ? flip() : undefined,
-                shift({padding: paddingAmount}),
-                arrow({element: arrowElement}),
-            ],
-        }).then(({x, y, placement, middlewareData}) => {
-            Object.assign(popover.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-            });
-            //
-            // // Accessing the data
-            // const {x: arrowX, y: arrowY} = middlewareData.arrow;
-            //
-            // const staticSide = {
-            //     top: 'bottom',
-            //     right: 'left',
-            //     bottom: 'top',
-            //     left: 'right',
-            // }[placement.split('-')[0]];
-            //
-            // Object.assign(arrowElement.style, {
-            //     left: arrowX != null ? `${arrowX}px` : '',
-            //     top: arrowY != null ? `${arrowY}px` : '',
-            //     right: '',
-            //     bottom: '',
-            //     [staticSide]: '-4px',
-            // });
-        });
-    }
-
-    onMount(() => {
-        if (autoTrigger)
-            triggerRef?.addEventListener("click", togglePopover);
-
-    })
-
-    onDestroy(() => {
-        if (autoTrigger)
-            triggerRef?.removeEventListener("click", togglePopover);
-
-    })
-
-    $effect(() => {
-        let cleanup: any
-
-        if (open) {
-            hasOpenedYet = true
-            updatePosition()
-
-            // Start auto updates.
-            cleanup = autoUpdate(
-                triggerRef,
-                popover,
-                updatePosition,
-            );
-        } else {
-            cleanup?.()
-            if (focusTriggerAfterClose && hasOpenedYet) {
-                try {
-                    triggerRef.focus()
-                } catch (e) {
-                    console.warn('Trigger element focus after close Popover error', e)
-                }
-            }
-        }
-
-        return () => {
-            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>-->
-        {@render children?.()}
-    </div>
-{/if}
-
-
+<script lang="ts">
+    import {type PopoverProps} from "./Popover";
+    import {arrow, autoUpdate, computePosition, flip, offset, shift, size} from "@floating-ui/dom";
+    import {cn} from "../../utils/utils";
+
+    import {clickOutside} from "../../actions/clickOutside"
+    import {onDestroy, onMount} from "svelte";
+    import {circInOut} from "svelte/easing";
+
+    let {
+        children,
+        triggerRef,
+        class: className,
+        open = $bindable(),
+        offset: offsetAmount = 3,
+        padding: paddingAmount = 12,
+        focusTriggerAfterClose = true,
+        flip: enableFlip = false,
+        autoTrigger = true,
+        ...props
+    }: PopoverProps = $props();
+
+    let hasOpenedYet = $state(false)
+
+    function togglePopover() {
+        open = !open;
+    }
+
+
+    function handleClickOutside(e) {
+        open = false
+    }
+
+    let popover = $state();
+    let arrowElement = $state();
+
+
+    function updatePosition() {
+        computePosition(triggerRef, popover, {
+            placement: 'bottom',
+            middleware: [
+                offset(offsetAmount),
+                size({
+                    apply({rects, elements}) {
+                        Object.assign(elements.floating.style, {
+                            minWidth: `${rects.reference.width}px`,
+                            maxWidth: `${window.innerWidth - 16}px`,
+                        });
+                    },
+                }),
+                enableFlip ? flip() : undefined,
+                shift({padding: paddingAmount}),
+                arrow({element: arrowElement}),
+            ],
+        }).then(({x, y, placement, middlewareData}) => {
+            Object.assign(popover.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            //
+            // // Accessing the data
+            // const {x: arrowX, y: arrowY} = middlewareData.arrow;
+            //
+            // const staticSide = {
+            //     top: 'bottom',
+            //     right: 'left',
+            //     bottom: 'top',
+            //     left: 'right',
+            // }[placement.split('-')[0]];
+            //
+            // Object.assign(arrowElement.style, {
+            //     left: arrowX != null ? `${arrowX}px` : '',
+            //     top: arrowY != null ? `${arrowY}px` : '',
+            //     right: '',
+            //     bottom: '',
+            //     [staticSide]: '-4px',
+            // });
+        });
+    }
+
+    onMount(() => {
+        if (autoTrigger)
+            triggerRef?.addEventListener("click", togglePopover);
+
+    })
+
+    onDestroy(() => {
+        if (autoTrigger)
+            triggerRef?.removeEventListener("click", togglePopover);
+
+    })
+
+    $effect(() => {
+        let cleanup: any
+
+        if (open) {
+            hasOpenedYet = true
+            updatePosition()
+
+            // Start auto updates.
+            cleanup = autoUpdate(
+                triggerRef,
+                popover,
+                updatePosition,
+            );
+        } else {
+            cleanup?.()
+            if (focusTriggerAfterClose && hasOpenedYet) {
+                try {
+                    triggerRef.focus()
+                } catch (e) {
+                    console.warn('Trigger element focus after close Popover error', e)
+                }
+            }
+        }
+
+        return () => {
+            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>-->
+        {@render children?.()}
+    </div>
+{/if}
+
+

package/dist/components/popover-responsive/PopoverResponsive.d.ts

@@ -1,5 +1,5 @@
 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>>;
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type PopoverResponsiveVariants = VariantProps<typeof styles>;
 export interface PopoverResponsiveProps extends PopoverResponsiveVariants {
     children?: any;

package/dist/components/popover-responsive/PopoverResponsive.svelte

@@ -1,87 +1,87 @@
-<script lang="ts">
-    import {type PopoverResponsiveProps} from "./PopoverResponsive";
-    import {Dialog} from "../dialog";
-    import {Popover} from "../popover";
-    import {onMount} from "svelte";
-    import {getScreenWidth, SCREEN_BREAK_POINTS} from "../side-navigation/SideNavigation";
-
-    let {
-        children,
-        triggerRef,
-        class: className,
-        open = $bindable(),
-        offset = 3,
-        popoverPadding = 12,
-        focusTriggerAfterClose = true,
-        flip = false,
-        ...props
-    }: PopoverResponsiveProps & {
-        dialogPadding?: string,
-        popoverPadding?: number,
-        offset?: number,
-        open?: boolean,
-        focusTriggerAfterClose?: boolean,
-        flip?: boolean,
-        triggerRef?: HTMLElement,
-    } = $props();
-
-    let openPopover = $state(false)
-    let openDialog = $state(false)
-
-    $effect(() => {
-        open = openPopover || openDialog
-    })
-
-    $effect(() => {
-        toggleOpen(open)
-    })
-
-    function toggleOpen(open?: boolean) {
-        if (getScreenWidth() >= SCREEN_BREAK_POINTS.sm) {
-            if (open === undefined) {
-                openPopover = !(openDialog || openPopover)
-            } else {
-                openPopover = open
-            }
-            openDialog = false
-        } else {
-            if (open === undefined) {
-                openDialog = !(openDialog || openPopover)
-            } else {
-                openDialog = open
-            }
-            openPopover = false
-        }
-    }
-
-    onMount(() => {
-        triggerRef?.addEventListener('click', (e) => {
-            e.stopPropagation()
-            toggleOpen()
-        })
-    })
-</script>
-
-
-<Popover bind:open={openPopover}
-         triggerRef={triggerRef}
-         autoTrigger={false}
-         padding={popoverPadding}
-         focusTriggerAfterClose={focusTriggerAfterClose}
-         offset={offset}
-         flip={flip}
-         class={className}
-         {...props}
->
-    {@render children?.()}
-</Popover>
-
-<Dialog bind:open={openDialog}
-        position="top"
-        padding="none"
-        class={className}
-        triggerRef={triggerRef}
-        focusTriggerAfterClose={focusTriggerAfterClose}
->
-    {@render children?.()}
+<script lang="ts">
+    import {type PopoverResponsiveProps} from "./PopoverResponsive";
+    import {Dialog} from "../dialog";
+    import {Popover} from "../popover";
+    import {onMount} from "svelte";
+    import {getScreenWidth, SCREEN_BREAK_POINTS} from "../side-navigation/SideNavigation";
+
+    let {
+        children,
+        triggerRef,
+        class: className,
+        open = $bindable(),
+        offset = 3,
+        popoverPadding = 12,
+        focusTriggerAfterClose = true,
+        flip = false,
+        ...props
+    }: PopoverResponsiveProps & {
+        dialogPadding?: string,
+        popoverPadding?: number,
+        offset?: number,
+        open?: boolean,
+        focusTriggerAfterClose?: boolean,
+        flip?: boolean,
+        triggerRef?: HTMLElement,
+    } = $props();
+
+    let openPopover = $state(false)
+    let openDialog = $state(false)
+
+    $effect(() => {
+        open = openPopover || openDialog
+    })
+
+    $effect(() => {
+        toggleOpen(open)
+    })
+
+    function toggleOpen(open?: boolean) {
+        if (getScreenWidth() >= SCREEN_BREAK_POINTS.sm) {
+            if (open === undefined) {
+                openPopover = !(openDialog || openPopover)
+            } else {
+                openPopover = open
+            }
+            openDialog = false
+        } else {
+            if (open === undefined) {
+                openDialog = !(openDialog || openPopover)
+            } else {
+                openDialog = open
+            }
+            openPopover = false
+        }
+    }
+
+    onMount(() => {
+        triggerRef?.addEventListener('click', (e) => {
+            e.stopPropagation()
+            toggleOpen()
+        })
+    })
+</script>
+
+
+<Popover bind:open={openPopover}
+         triggerRef={triggerRef}
+         autoTrigger={false}
+         padding={popoverPadding}
+         focusTriggerAfterClose={focusTriggerAfterClose}
+         offset={offset}
+         flip={flip}
+         class={className}
+         {...props}
+>
+    {@render children?.()}
+</Popover>
+
+<Dialog bind:open={openDialog}
+        position="top"
+        padding="none"
+        class={className}
+        triggerRef={triggerRef}
+        focusTriggerAfterClose={focusTriggerAfterClose}
+>
+    {@render children?.()}
 </Dialog>

package/dist/components/select/Select.d.ts

@@ -14,37 +14,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react ring-primary-token-5/50", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, {
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}>, {
+}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react ring-primary-token-5/50", {
     variant: {
         outlined: string;
         filled: string;
@@ -74,37 +44,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react ring-primary-token-5/50", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, {
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react ring-primary-token-5/50", unknown, unknown, undefined>>;
 type SelectVariants = VariantProps<typeof styles>;
 export interface SelectProps extends SelectVariants {
     children?: any;

package/dist/components/select/Select.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-    import './select.scss'
-
-    import {type SelectProps, styles} from "./Select";
-
-    let {children, variant, disabled, size, class: className, value = $bindable(), ...props}: SelectProps = $props();
-
-</script>
-
-<select {...props}
-        bind:value
-        class={"tera-select pr-3" + styles({ variant, disabled , size, className: className})}
->
-    {@render children?.()}
+<script lang="ts">
+    import './select.scss'
+
+    import {type SelectProps, styles} from "./Select";
+
+    let {children, variant, disabled, size, class: className, value = $bindable(), ...props}: SelectProps = $props();
+
+</script>
+
+<select {...props}
+        bind:value
+        class={"tera-select pr-3" + styles({ variant, disabled , size, className: className})}
+>
+    {@render children?.()}
 </select>

package/dist/components/select/select.scss

@@ -1,6 +1,6 @@
-.tera-select {
-    option {
-        background: var(--color-neutral-token-2);
-        color: var(--color-neutral-token-13);
-    }
+.tera-select {
+    option {
+        background: var(--color-neutral-token-2);
+        color: var(--color-neutral-token-13);
+    }
 }

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

@@ -1,5 +1,5 @@
 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>>;
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type SideNavigationVariants = VariantProps<typeof styles>;
 export type SideNavigationItem = {
     href: string;