tera-system-ui 0.0.23 → 0.0.25

package/dist/components/tabs/components/TabsItem.svelte

@@ -1,32 +1,32 @@
-<script lang="ts">
-    import {cn} from "../../../utils/utils";
-    import {getCtx} from "../Tabs";
-
-    let {
-        children,
-        class: className,
-        value,
-        ...props
-    } = $props();
-
-    let context = getCtx()
-
-</script>
-
-<div>
-    <button class={cn("tab-button font-semibold px-2.5 py-1.5 text-neutral-token-8 hover:text-primary-token-4")}
-            data-value={value}
-            data-state={value === context.state.currentTab ? 'active' : 'inactive'}
-            onclick={() => {
-            context.state.currentTab = value
-        }}
-    >
-        {@render children?.()}
-    </button>
-</div>
-
-<style>
+<script lang="ts">
+    import {cn} from "../../../utils/utils";
+    import {getCtx} from "../Tabs";
+
+    let {
+        children,
+        class: className,
+        value,
+        ...props
+    } = $props();
+
+    let context = getCtx()
+
+</script>
+
+<div>
+    <button class={cn("tab-button font-semibold px-2.5 py-1.5 text-neutral-token-8 hover:text-primary-token-4")}
+            data-value={value}
+            data-state={value === context.state.currentTab ? 'active' : 'inactive'}
+            onclick={() => {
+            context.state.currentTab = value
+        }}
+    >
+        {@render children?.()}
+    </button>
+</div>
+
+<style>
     button[data-state="active"] {
     color: hsl(var(--tw---token-color-primary-token-6))
-}
+}
 </style>

package/dist/components/tabs/components/TabsList.svelte

@@ -1,42 +1,42 @@
-<script lang="ts">
-    import {cn} from "../../../utils/utils";
-    import {getCtx} from "../Tabs";
-
-    let {
-        children,
-        class: className,
-        ...props
-    } = $props();
-
-    let tabIndicator = $state()
-    let tabsList = $state()
-
-    function updateIndicator(button) {
-        const rect = button.getBoundingClientRect();
-        const containerRect = tabsList.getBoundingClientRect();
-
-        const left = rect.left - containerRect.left;
-        const width = rect.width;
-
-        tabIndicator.style.left = `${left}px`;
-        tabIndicator.style.width = `${width}px`;
-    }
-
-
-    let context = getCtx()
-
-    $effect(() => {
-        let tabButton = tabsList?.querySelector(`button[data-value="${context.state.currentTab}"]`)
-        updateIndicator(tabButton);
-    })
-</script>
-
-<div bind:this={tabsList}
-     data-tabs-list
-     role="tablist"
-     data-orientation="horizontal"
-     class={cn("relative flex gap-2 items-end border-b border-neutral-token-5")}>
-
-    {@render children?.()}
-    <div bind:this={tabIndicator} class="absolute bottom-0 h-0.5 bg-primary-token-5 transition-all duration-300"></div>
+<script lang="ts">
+    import {cn} from "../../../utils/utils";
+    import {getCtx} from "../Tabs";
+
+    let {
+        children,
+        class: className,
+        ...props
+    } = $props();
+
+    let tabIndicator = $state()
+    let tabsList = $state()
+
+    function updateIndicator(button) {
+        const rect = button.getBoundingClientRect();
+        const containerRect = tabsList.getBoundingClientRect();
+
+        const left = rect.left - containerRect.left;
+        const width = rect.width;
+
+        tabIndicator.style.left = `${left}px`;
+        tabIndicator.style.width = `${width}px`;
+    }
+
+
+    let context = getCtx()
+
+    $effect(() => {
+        let tabButton = tabsList?.querySelector(`button[data-value="${context.state.currentTab}"]`)
+        updateIndicator(tabButton);
+    })
+</script>
+
+<div bind:this={tabsList}
+     data-tabs-list
+     role="tablist"
+     data-orientation="horizontal"
+     class={cn("relative flex gap-2 items-end border-b border-neutral-token-5")}>
+
+    {@render children?.()}
+    <div bind:this={tabIndicator} class="absolute bottom-0 h-0.5 bg-primary-token-5 transition-all duration-300"></div>
 </div>

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

@@ -1,28 +1,28 @@
-<script lang="ts">
-    import {type TeraUiContextProps} from "./TeraUiContext";
-    import {setGlobalContext} from "./global-context";
-    import {setLanguageTag} from "../../paraglide/runtime";
-    import * as m from '../../paraglide/messages.js'
-
-
-    let {
-        children,
-        supportLanguages = ['en'],
-        language = 'en',
-        ...props
-    }: TeraUiContextProps = $props();
-
-
-    setGlobalContext({
-        supportLanguages,
-        language,
-        ...props
-    })
-
-    setLanguageTag(language)
-    console.log('setLanguageTag', language)
-    console.log('test translate', m.text_select_language())
-
-</script>
-
-{@render children()}
+<script lang="ts">
+    import {type TeraUiContextProps} from "./TeraUiContext";
+    import {setGlobalContext} from "./global-context";
+    import {setLanguageTag} from "../../paraglide/runtime";
+    import * as m from '../../paraglide/messages'
+
+
+    let {
+        children,
+        supportLanguages = ['en'],
+        language = 'en',
+        ...props
+    }: TeraUiContextProps = $props();
+
+
+    setGlobalContext({
+        supportLanguages,
+        language,
+        ...props
+    })
+
+    setLanguageTag(language)
+    console.log('setLanguageTag', language)
+    console.log('test translate', m.text_select_language())
+
+</script>
+
+{@render children()}

package/dist/components/text-area/TextArea.svelte

@@ -1,89 +1,89 @@
-<script lang="ts">
-    import {type AutoSizeConfig, type TextAreaProps} from "./TextArea";
-    import {styles} from "./TextArea";
-    import {IconX} from "../icons";
-
-    let {
-        children,
-        class: className,
-        value = $bindable(),
-        ref = $bindable(),
-        size,
-        disabled,
-        variant = 'outlined',
-        autoSize,
-        onchange,
-        prefix,
-        rows,
-        allowClear,
-        ...props
-    }: TextAreaProps = $props();
-
-
-    function createAutoSizeTextarea(node: HTMLTextAreaElement, autoSize?: AutoSizeConfig) {
-        if (!autoSize) {
-            return
-        }
-        let minRows: number | null = null
-        let maxRows: number | null = null
-        if (autoSize === true) {
-            minRows = 1
-        } else {
-            minRows = Math.max(autoSize.minRows || 0, 1)
-            maxRows = autoSize.maxRows || null
-
-        }
-
-        const updateSize = () => {
-            node.style.height = 'auto';
-            const computedStyle = window.getComputedStyle(node);
-            const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
-            const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
-            const offset = borderTopWidth + borderBottomWidth;
-            const scrollHeight = node.scrollHeight + 4
-
-            const lineHeight = parseFloat(computedStyle.lineHeight);
-            const minHeight = minRows * lineHeight + offset;
-            const maxHeight = maxRows ? maxRows * lineHeight : null;
-
-            node.style.height = `${Math.max(minHeight, Math.min(scrollHeight, maxHeight ?? scrollHeight))}px`;
-        };
-
-        $effect(() => {
-            // setup goes here
-            value
-            updateSize();
-
-            return () => {
-                // teardown goes here
-            };
-        });
-    }
-
-    function clearText() {
-        value = ''
-    }
-
-</script>
-
-<div class="relative">
-    <textarea
-            use:createAutoSizeTextarea={autoSize}
-            onchange={onchange}
-            bind:this={ref}
-            style={autoSize ? "resize: none;" : ''}
-            class={styles({ variant, disabled , size, className, allowClear })}
-            {disabled}
-            rows={autoSize ? 1 : rows}
-            {...props}
-            bind:value
-    >
-    </textarea>
-
-    {#if allowClear && value}
-        <button onclick={clearText}
-                class="absolute top-2 right-2 bg-neutral-token-6 text-neutral-token-1 hover:bg-neutral-token-8 size-3 grid place-content-center rounded-full">
-            <IconX class="size-2.5"/>
-        </button>
-    {/if}
+<script lang="ts">
+    import {type AutoSizeConfig, type TextAreaProps} from "./TextArea";
+    import {styles} from "./TextArea";
+    import {IconX} from "../icons";
+
+    let {
+        children,
+        class: className,
+        value = $bindable(),
+        ref = $bindable(),
+        size,
+        disabled,
+        variant = 'outlined',
+        autoSize,
+        onchange,
+        prefix,
+        rows,
+        allowClear,
+        ...props
+    }: TextAreaProps = $props();
+
+
+    function createAutoSizeTextarea(node: HTMLTextAreaElement, autoSize?: AutoSizeConfig) {
+        if (!autoSize) {
+            return
+        }
+        let minRows: number | null = null
+        let maxRows: number | null = null
+        if (autoSize === true) {
+            minRows = 1
+        } else {
+            minRows = Math.max(autoSize.minRows || 0, 1)
+            maxRows = autoSize.maxRows || null
+
+        }
+
+        const updateSize = () => {
+            node.style.height = 'auto';
+            const computedStyle = window.getComputedStyle(node);
+            const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
+            const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
+            const offset = borderTopWidth + borderBottomWidth;
+            const scrollHeight = node.scrollHeight + 4
+
+            const lineHeight = parseFloat(computedStyle.lineHeight);
+            const minHeight = minRows * lineHeight + offset;
+            const maxHeight = maxRows ? maxRows * lineHeight : null;
+
+            node.style.height = `${Math.max(minHeight, Math.min(scrollHeight, maxHeight ?? scrollHeight))}px`;
+        };
+
+        $effect(() => {
+            // setup goes here
+            value
+            updateSize();
+
+            return () => {
+                // teardown goes here
+            };
+        });
+    }
+
+    function clearText() {
+        value = ''
+    }
+
+</script>
+
+<div class="relative">
+    <textarea
+            use:createAutoSizeTextarea={autoSize}
+            onchange={onchange}
+            bind:this={ref}
+            style={autoSize ? "resize: none;" : ''}
+            class={styles({ variant, disabled , size, className, allowClear })}
+            {disabled}
+            rows={autoSize ? 1 : rows}
+            {...props}
+            bind:value
+    >
+    </textarea>
+
+    {#if allowClear && value}
+        <button onclick={clearText}
+                class="absolute top-2 right-2 bg-neutral-token-6 text-neutral-token-1 hover:bg-neutral-token-8 size-3 grid place-content-center rounded-full">
+            <IconX class="size-2.5"/>
+        </button>
+    {/if}
 </div>

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.svelte

@@ -1,68 +1,68 @@
-<script lang="ts">
-    import {type UserAvatarWithMenuProps} from "./UserAvatarWithMenu";
-    import {Avatar} from "../avatar";
-    import {
-        DropdownMenu,
-        DropdownMenuGroup,
-        DropdownMenuHeader,
-        DropdownMenuItem,
-        DropdownMenuSeparator
-    } from "../dropdown-menu";
-    import {IconLogout, IconSettings} from "../icons";
-    import {extractShortUsernameFromEmail} from "../../internal/service/user.service";
-
-    let {children, user, onLogout,...props}: UserAvatarWithMenuProps = $props();
-
-    let shortUserName = extractShortUsernameFromEmail(user?.email)
-    let triggerRef = $state()
-    let open = $state(false)
-</script>
-
-
-{#if user}
-    <button class="rounded-full focus-visible:ring-0" bind:this={triggerRef}>
-        <Avatar
-            userUid={user.userUid}
-        >
-            {shortUserName}
-        </Avatar>
-    </button>
-
-    <DropdownMenu
-            bind:open
-            triggerRef={triggerRef}
-            class="!min-w-[14rem]"
-    >
-        <DropdownMenuHeader>
-            <div class="grid grid-cols-[auto,1fr] gap-2 overflow-hidden break-all items-center">
-                <Avatar border={false}
-                        size="lg"
-                        userUid={user.userUid}
-                >
-                    {shortUserName}
-                </Avatar>
-                {#if user.email}
-                    {user.email}
-                {/if}
-            </div>
-
-        </DropdownMenuHeader>
-        <DropdownMenuSeparator/>
-
-        <DropdownMenuGroup>
-            <DropdownMenuItem
-                href="/account-settings"
-            >
-                <IconSettings/>
-                Account Settings
-            </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator/>
-        <DropdownMenuGroup>
-            <DropdownMenuItem onclick={onLogout}>
-                <IconLogout/>
-                Logout
-            </DropdownMenuItem>
-        </DropdownMenuGroup>
-    </DropdownMenu>
+<script lang="ts">
+    import {type UserAvatarWithMenuProps} from "./UserAvatarWithMenu";
+    import {Avatar} from "../avatar";
+    import {
+        DropdownMenu,
+        DropdownMenuGroup,
+        DropdownMenuHeader,
+        DropdownMenuItem,
+        DropdownMenuSeparator
+    } from "../dropdown-menu";
+    import {IconLogout, IconSettings} from "../icons";
+    import {extractShortUsernameFromEmail} from "../../internal/service/user.service";
+
+    let {children, user, onLogout,...props}: UserAvatarWithMenuProps = $props();
+
+    let shortUserName = extractShortUsernameFromEmail(user?.email)
+    let triggerRef = $state()
+    let open = $state(false)
+</script>
+
+
+{#if user}
+    <button class="rounded-full focus-visible:ring-0" bind:this={triggerRef}>
+        <Avatar
+            userUid={user.userUid}
+        >
+            {shortUserName}
+        </Avatar>
+    </button>
+
+    <DropdownMenu
+            bind:open
+            triggerRef={triggerRef}
+            class="!min-w-[14rem]"
+    >
+        <DropdownMenuHeader>
+            <div class="grid grid-cols-[auto,1fr] gap-2 overflow-hidden break-all items-center">
+                <Avatar border={false}
+                        size="lg"
+                        userUid={user.userUid}
+                >
+                    {shortUserName}
+                </Avatar>
+                {#if user.email}
+                    {user.email}
+                {/if}
+            </div>
+
+        </DropdownMenuHeader>
+        <DropdownMenuSeparator/>
+
+        <DropdownMenuGroup>
+            <DropdownMenuItem
+                href="/account-settings"
+            >
+                <IconSettings/>
+                Account Settings
+            </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator/>
+        <DropdownMenuGroup>
+            <DropdownMenuItem onclick={onLogout}>
+                <IconLogout/>
+                Logout
+            </DropdownMenuItem>
+        </DropdownMenuGroup>
+    </DropdownMenu>
 {/if}

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { Popover } from './components/popover';
 export { PopoverResponsive } from './components/popover-responsive';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
 export { Slider } from './components/slider';
+export { StarRating } from './components/star-rating';
 export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs';
 export { TeraUiContext } from './components/tera-ui-context';
 export { TextArea } from './components/text-area';

package/dist/index.js

@@ -14,6 +14,7 @@ export { Popover } from './components/popover';
 export { PopoverResponsive } from './components/popover-responsive';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
 export { Slider } from './components/slider';
+export { StarRating } from './components/star-rating';
 export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs';
 export { TeraUiContext } from './components/tera-ui-context';
 export { TextArea } from './components/text-area';

package/dist/themes/scrollbar.scss

@@ -1,37 +1,37 @@
-/* Light mode scrollbar styles */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent; /* Transparent track */
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2); /* Light mode: dark thumb */
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.4); /* Darker thumb on hover */
-}
-
-/* Dark mode scrollbar styles */
-.dark ::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.2); /* Dark mode: light thumb */
-}
-
-.dark ::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.4); /* Lighter thumb on hover */
-}
-
-/* Firefox scrollbar styling */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-
-html.dark, .dark * {
-  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
-}
+/* Light mode scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent; /* Transparent track */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2); /* Light mode: dark thumb */
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.4); /* Darker thumb on hover */
+}
+
+/* Dark mode scrollbar styles */
+.dark ::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2); /* Dark mode: light thumb */
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.4); /* Lighter thumb on hover */
+}
+
+/* Firefox scrollbar styling */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+html.dark, .dark * {
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}