tera-system-ui 0.0.20 → 0.0.21

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

@@ -1,18 +1,18 @@
-<script lang="ts">
-    const {class: className, href, children, icon} = $props()
-</script>
-
-<li class="{className + ' side-nav_item'}">
-    <a href="{href || '#'}" class="">
-        <div class="min-w-icon-sm z-10">
-            {@render icon?.()}
-        </div>
-        <div class="sm-hidden z-10 truncate">
-            {@render children?.()}
-        </div>
-    </a>
-</li>
-
-<style>
-
+<script lang="ts">
+    const {class: className, href, children, icon} = $props()
+</script>
+
+<li class="{className + ' side-nav_item'}">
+    <a href="{href || '#'}" class="">
+        <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/SideNavigationLayout.svelte

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

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

@@ -1,149 +1,149 @@
-: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 theme('colors.neutral.token.5');
-  height: 100dvh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-
-  transition: width var(--sidebar-transition-duration);
-  background: theme('colors.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_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;
-    }
-  }
-}
-
-@media (min-width: theme('screens.md')) {
-  :root {
-    --sidebar-main-margin-left: 3rem;
-    --sidebar-border-width: 1px;
-    --sidebar-width: 3rem;
-  }
-}
-
-@media (min-width: theme('screens.xl')) {
-  :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: theme('colors.neutral.token.13');
-
-  a {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    width: 100%;
-    position: relative;
-    white-space: nowrap;
-    @apply px-3 py-3 font-semibold;
-  }
-
-  svg {
-    &.icon {
-      min-width: 24px;
-    }
-  }
-
-  &.selected a {
-    //background-color: theme('colors.neutral.token.11');
-    color: theme('colors.neutral.token.1');
-    //@apply rounded-full;
-  }
-
-  &.selected {
-    a::after {
-      content: '';
-      position: absolute;
-      inset-inline: 0.25rem;
-      inset-block: 0.2rem;
-      background: theme('colors.neutral.token.11');
-      border-radius: theme('borderRadius.DEFAULT');
-      z-index: 0;
-    }
-  }
-
-  //&.selected {
-  //  a::after {
-  //    content: '';
-  //    position: absolute;
-  //    left: 0;
-  //    top: 0;
-  //    bottom: 0;
-  //    width: 4px;
-  //    height: 100%;
-  //    background: theme('colors.primary.token.4');
-  //    border-radius: 4px 0 0 4px;
-  //  }
-  //}
-
-  &:hover {
-    background-color: theme('colors.neutral.token.3');
-  }
-}
+: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 theme('colors.neutral.token.5');
+  height: 100dvh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+
+  transition: width var(--sidebar-transition-duration);
+  background: theme('colors.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_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;
+    }
+  }
+}
+
+@media (min-width: theme('screens.md')) {
+  :root {
+    --sidebar-main-margin-left: 3rem;
+    --sidebar-border-width: 1px;
+    --sidebar-width: 3rem;
+  }
+}
+
+@media (min-width: theme('screens.xl')) {
+  :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: theme('colors.neutral.token.13');
+
+  a {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    width: 100%;
+    position: relative;
+    white-space: nowrap;
+    @apply px-3 py-3 font-semibold;
+  }
+
+  svg {
+    &.icon {
+      min-width: 24px;
+    }
+  }
+
+  &.selected a {
+    //background-color: theme('colors.neutral.token.11');
+    color: theme('colors.neutral.token.1');
+    //@apply rounded-full;
+  }
+
+  &.selected {
+    a::after {
+      content: '';
+      position: absolute;
+      inset-inline: 0.25rem;
+      inset-block: 0.2rem;
+      background: theme('colors.neutral.token.11');
+      border-radius: theme('borderRadius.DEFAULT');
+      z-index: 0;
+    }
+  }
+
+  //&.selected {
+  //  a::after {
+  //    content: '';
+  //    position: absolute;
+  //    left: 0;
+  //    top: 0;
+  //    bottom: 0;
+  //    width: 4px;
+  //    height: 100%;
+  //    background: theme('colors.primary.token.4');
+  //    border-radius: 4px 0 0 4px;
+  //  }
+  //}
+
+  &:hover {
+    background-color: theme('colors.neutral.token.3');
+  }
+}

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.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()}

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;
+}