tera-system-ui 0.0.91 → 0.1.0

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

@@ -1,5 +1,5 @@
 import { type PopoverResponsiveProps } from "./PopoverResponsive";
-declare const PopoverResponsive: import("svelte").Component<PopoverResponsiveProps & {
+type $$ComponentProps = PopoverResponsiveProps & {
     dialogPadding?: string;
     popoverPadding?: number;
     offset?: number;
@@ -7,5 +7,7 @@ declare const PopoverResponsive: import("svelte").Component<PopoverResponsivePro
     focusTriggerAfterClose?: boolean;
     flip?: boolean;
     triggerRef?: HTMLElement;
-}, {}, "open">;
+};
+declare const PopoverResponsive: import("svelte").Component<$$ComponentProps, {}, "open">;
+type PopoverResponsive = ReturnType<typeof PopoverResponsive>;
 export default PopoverResponsive;

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

@@ -1,4 +1,5 @@
 import './select.scss';
 import { type SelectProps } from "./Select";
 declare const Select: import("svelte").Component<SelectProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/components/select/select.scss

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

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

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

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

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

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

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

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

@@ -1,3 +1,5 @@
+@reference "../../themes/tera-ui-base.css";
+
 :root {
     --sidebar-width: 0;
     --sidebar-transition-duration: 0.2s;
@@ -14,7 +16,7 @@
     z-index: 50;
     width: var(--sidebar-width);
     overflow-x: hidden;
-    border-right: var(--sidebar-border-width) solid theme('colors.neutral.token.5');
+    border-right: var(--sidebar-border-width) solid var(--color-neutral-token-5);
     height: 100dvh;
     position: fixed;
     top: 0;
@@ -22,7 +24,7 @@
     bottom: 0;
 
     transition: width var(--sidebar-transition-duration);
-    background: theme('colors.neutral.token.1');
+    background: var(--color-neutral-token-1);
 
     ul {
         width: var(--sidebar-width);
@@ -76,14 +78,14 @@
             right: 0;
             left: var(--sidebar-width);
             z-index: 100;
-            @apply bg-neutral-token-12/30 backdrop-blur-sm;
-            //background: yellow;
+            background: --alpha(var(--color-neutral-token-12) / 30%);
+            backdrop-filter: blur(var(--blur-sm));
             opacity: 1;
         }
     }
 }
 
-@media (min-width: theme('screens.md')) {
+@media (min-width: theme(--breakpoint-md)) {
     :root {
         --sidebar-main-margin-left: 3rem;
         --sidebar-border-width: 1px;
@@ -91,7 +93,7 @@
     }
 }
 
-@media (min-width: theme('screens.xl')) {
+@media (min-width: theme(--breakpoint-xl)) {
     :root {
         --sidebar-main-margin-left: var(--sidebar-width);
         --sidebar-width: 16.5rem;
@@ -118,7 +120,7 @@
 
 
 .side-nav_item {
-    color: theme('colors.neutral.token.13');
+    color: var(--color-neutral-token-13);
 
     a {
         display: flex;
@@ -127,7 +129,8 @@
         width: 100%;
         position: relative;
         white-space: nowrap;
-        @apply px-3 py-3 font-semibold;
+        padding: --spacing(3);
+        font-weight: var(--font-weight-semibold);
     }
 
     svg {
@@ -137,7 +140,7 @@
     }
 
     &.selected a {
-        color: theme('colors.neutral.token.1');
+        color: var(--color-neutral-token-1);
     }
 
     &.selected {
@@ -146,13 +149,13 @@
             position: absolute;
             inset-inline: 0.25rem;
             inset-block: 0.2rem;
-            background: theme('colors.neutral.token.11');
-            border-radius: theme('borderRadius.DEFAULT');
+            background: var(--color-neutral-token-11);
+            border-radius: var(--radius-sm);
             z-index: 0;
         }
     }
 
     &:hover {
-        background-color: theme('colors.neutral.token.3');
+        background-color: var(--color-neutral-token-3);
     }
 }

package/dist/components/slider/Slider.svelte

@@ -177,56 +177,5 @@
     <!--    {/if}-->
 </div>
 
-<style>.slider-handle {
-  transition: all 0.2s ease-in-out, left 0s;
-}
-.slider-handle:global([data-state="dragging"]), .slider-handle:hover, .slider-handle:focus, .slider-handle:active, .slider-handle:focus-visible {
-  --tw-scale-x: 1.25;
-  --tw-scale-y: 1.25;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  --tw-border-opacity: 1;
-  border-color: hsl(var(--tw---token-color-primary-token-7) / var(--tw-border-opacity, 1)) ;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0.35rem + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: hsl(var(--tw---token-color-primary-token-2) / var(--tw-ring-opacity, 1)) ;
-}
-
-[data-slider-tooltip] {
-  position: absolute;
-  left: 50%;
-  z-index: 10;
-  width: -moz-fit-content;
-  width: fit-content;
-  border-radius: var(--border-radius-base);
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--tw---token-color-neutral-token-12) / var(--tw-bg-opacity, 1)) ;
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  --tw-text-opacity: 1;
-  color: hsl(var(--tw---token-color-neutral-token-1) / var(--tw-text-opacity, 1)) ;
-  transition: all 0.2s ease-in-out, left 0s;
-  opacity: 0;
-  transform: translateY(-3rem) translateX(-50%) scale(0.9);
-}
-[data-slider-tooltip]:after {
-  content: "";
-  position: absolute;
-  bottom: -0.15rem;
-  left: 50%;
-  width: 0.75rem;
-  height: 0.75rem;
-  --tw-translate-x: -50%;
-  --tw-rotate: 45deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  border-radius: 0.125rem;
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--tw---token-color-neutral-token-12) / var(--tw-bg-opacity, 1)) ;
-}
-[data-slider-tooltip]:global(.show) {
-  opacity: 1;
-  transform: translateY(-3.5rem) translateX(-50%) scale(1);
-}</style>
+<style>/*! tailwindcss v4.0.4 | MIT License | https://tailwindcss.com */
+.slider-handle{transition:all .2s ease-in-out,left}:is(.slider-handle:global([data-state="dragging"]),.slider-handle:hover,.slider-handle:focus,.slider-handle:active,.slider-handle:focus-visible){box-shadow:0 0 0 .35rem var(--color-primary-token-2);transform:scale(1.25)}[data-slider-tooltip]{border-radius:var(--radius-sm);width:fit-content;padding:calc(var(--spacing)*1.5)calc(var(--spacing)*1);background-color:var(--color-neutral-token-12);color:var(--color-neutral-token-1);z-index:10;opacity:0;transition:all .2s ease-in-out,left;position:absolute;left:50%;transform:translateY(-3rem)translate(-50%)scale(.9)}[data-slider-tooltip]:after{content:"";border-radius:var(--radius-sm);background-color:var(--color-neutral-token-12);width:calc(var(--spacing)*3);height:calc(var(--spacing)*3);position:absolute;bottom:-.15rem;left:50%;transform:translate(-50%)rotate(45deg)}[data-slider-tooltip]:global(.show){opacity:1;transform:translateY(-3.5rem)translate(-50%)scale(1)}</style>

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

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

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

@@ -54,18 +54,18 @@
         class="star-rating-container inline-flex items-center">
     {#each Array(5) as _, index (index)}
         <button role="radio"
-             tabindex="0"
-             aria-checked={(hoverRating || value) > index}
-             aria-posinset={index + 1}
-             aria-setsize="5"
-             data-rating-icon
-             data-hovering={hoverRating === (index + 1)}
-             aria-label=""
-             onpointerenter={(e) => setHover(index + 1, e)}
-             onpointerleave={resetHover}
-             ontouchendcapture={resetHover}
-             onclick={(e) => setRating(index + 1, e)}
-             class={styles({size})}>
+                tabindex="0"
+                aria-checked={(hoverRating || value) > index}
+                aria-posinset={index + 1}
+                aria-setsize="5"
+                data-rating-icon
+                data-hovering={hoverRating === (index + 1)}
+                aria-label=""
+                onpointerenter={(e) => setHover(index + 1, e)}
+                onpointerleave={resetHover}
+                ontouchendcapture={resetHover}
+                onclick={(e) => setRating(index + 1, e)}
+                class={styles({size})}>
             <svg
                     viewBox="64 64 896 896" focusable="true" data-icon="star" width="1em" height="1em"
                     fill="currentColor"
@@ -79,22 +79,18 @@
 
 
 <style>[data-rating-icon] {
-    fill: hsl(var(--tw---token-color-neutral-token-5) / 1) ;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 350ms
+  fill: var(--color-neutral-token-5);
+  transition: all var(--duration-element-react);
 }
 [data-rating-icon]:first-child {
-    padding-left: 0px
+  padding-left: 0;
 }
 [data-rating-icon]:last-child {
-    padding-right: 0px
+  padding-right: 0;
 }
 [data-rating-icon][aria-checked=true] {
-    fill: #facc15
+  fill: var(--color-yellow-400);
 }
 [data-rating-icon][data-hovering=true] {
-    --tw-scale-x: 1.1;
-    --tw-scale-y: 1.1;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+  transform: scale(1.1);
 }</style>

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

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

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

@@ -1,3 +1,4 @@
 import { Switch as SwitchPrimitive } from "bits-ui";
 declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/tabs/components/Tabs.svelte.d.ts

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

package/dist/components/tabs/components/TabsContent.svelte

@@ -26,11 +26,11 @@
 
 <style>
     [data-state="active"] {
-    display: block
-}
+        display: block;
+    }
     [data-state="inactive"] {
-    display: none
-}
+        display: none;
+    }
 
 </style>
 

package/dist/components/tabs/components/TabsContent.svelte.d.ts

@@ -1,6 +1,7 @@
 declare const TabsContent: import("svelte").Component<{
-    children: unknown;
-    class: unknown;
-    value: unknown;
-} & Record<string, unknown>, {}, "">;
+    children: any;
+    class: any;
+    value: any;
+} & Record<string, any>, {}, "">;
+type TabsContent = ReturnType<typeof TabsContent>;
 export default TabsContent;

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

@@ -27,7 +27,6 @@
 
 <style>
     button[data-state="active"] {
-    --tw-text-opacity: 1;
-    color: hsl(var(--tw---token-color-primary-token-5) / var(--tw-text-opacity, 1)) 
-}
+        color: var(--color-primary-token-7);
+    }
 </style>

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

@@ -1,6 +1,7 @@
 declare const TabsItem: import("svelte").Component<{
-    children: unknown;
-    class: unknown;
-    value: unknown;
-} & Record<string, unknown>, {}, "">;
+    children: any;
+    class: any;
+    value: any;
+} & Record<string, any>, {}, "">;
+type TabsItem = ReturnType<typeof TabsItem>;
 export default TabsItem;

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

@@ -1,5 +1,6 @@
 declare const TabsList: import("svelte").Component<{
-    children: unknown;
-    class: unknown;
-} & Record<string, unknown>, {}, "">;
+    children: any;
+    class: any;
+} & Record<string, any>, {}, "">;
+type TabsList = ReturnType<typeof TabsList>;
 export default TabsList;

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

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

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

@@ -1,3 +1,4 @@
 import { type TextAreaProps } from "./TextArea";
 declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value" | "ref">;
+type TextArea = ReturnType<typeof TextArea>;
 export default TextArea;

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

@@ -35,7 +35,7 @@
             class="!min-w-[14rem]"
     >
         <DropdownMenuHeader>
-            <div class="grid grid-cols-[auto,1fr] gap-2 overflow-hidden break-all items-center">
+            <div class="grid grid-cols-[auto_1fr] gap-2 overflow-hidden break-all items-center">
                 <Avatar border={false}
                         size="lg"
                         userUid={user.userUid}

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

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