tera-system-ui 0.1.20 → 0.1.30

package/dist/components/button/Button.d.ts

@@ -19,47 +19,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     dangerous: {
         true: string;
     };
-}, undefined, "relative font-medium overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon duration-element-react select-none focus-visible:ring-2 outline-none", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        primary: string;
-        secondary: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    disabled: {
-        true: string;
-    };
-    icon: {
-        true: string;
-    };
-    dangerous: {
-        true: string;
-    };
-}, {
-    variant: {
-        primary: string;
-        secondary: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    disabled: {
-        true: string;
-    };
-    icon: {
-        true: string;
-    };
-    dangerous: {
-        true: string;
-    };
-}>, {
+}, undefined, "relative font-medium overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon duration-element-react select-none focus-visible:ring-2 outline-none", {
     variant: {
         primary: string;
         secondary: string;
@@ -99,47 +59,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     dangerous: {
         true: string;
     };
-}, undefined, "relative font-medium overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon duration-element-react select-none focus-visible:ring-2 outline-none", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        primary: string;
-        secondary: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    disabled: {
-        true: string;
-    };
-    icon: {
-        true: string;
-    };
-    dangerous: {
-        true: string;
-    };
-}, {
-    variant: {
-        primary: string;
-        secondary: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    disabled: {
-        true: string;
-    };
-    icon: {
-        true: string;
-    };
-    dangerous: {
-        true: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, "relative font-medium overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon duration-element-react select-none focus-visible:ring-2 outline-none", unknown, unknown, undefined>>;
 type ButtonVariants = VariantProps<typeof styles>;
 export interface ButtonProps extends ButtonVariants {
     children: any;

package/dist/components/button/Button.svelte

@@ -1,49 +1,49 @@
-<script lang="ts">
-    import {type ButtonProps, styles} from "./Button";
-
-    let {
-        children, disabled, variant = 'primary', icon, size, dangerous, class: className,
-        ref = $bindable(),
-        ...props
-    }: ButtonProps & {ref: HTMLButtonElement}  = $props();
-
-    $effect(() => {
-        ref.addEventListener('click', function (e) {
-            const ripple = document.createElement('span');
-            const size = Math.max(ref.clientWidth, ref.clientHeight);
-            const rect = ref.getBoundingClientRect();
-            const x = e.clientX - rect.left - size / 2;
-            const y = e.clientY - rect.top - size / 2;
-
-            ripple.style.width = ripple.style.height = `${size}px`;
-            ripple.style.left = `${x}px`;
-            ripple.style.top = `${y}px`;
-
-            // Set ripple color based on data attribute
-            let rippleColor = 'bg-neutral-token-8/30';
-            if (variant === 'primary') {
-                rippleColor = 'bg-neutral-3/30';
-            }
-            ripple.style.backgroundColor = rippleColor
-
-
-            ripple.classList.add('ripple');
-            ripple.classList.add(rippleColor);
-            ref.appendChild(ripple);
-
-            // Remove the ripple after animation completes
-            ripple.addEventListener('animationend', () => {
-                ripple.remove();
-            });
-        });
-    })
-</script>
-
-<button
-        bind:this={ref}
-        class={styles({ disabled, variant, icon, size, dangerous, className })}
-        {...props}
-        disabled={disabled}
->
-    {@render children?.()}
-</button>
+<script lang="ts">
+    import {type ButtonProps, styles} from "./Button";
+
+    let {
+        children, disabled, variant = 'primary', icon, size, dangerous, class: className,
+        ref = $bindable(),
+        ...props
+    }: ButtonProps & {ref: HTMLButtonElement}  = $props();
+
+    $effect(() => {
+        ref.addEventListener('click', function (e) {
+            const ripple = document.createElement('span');
+            const size = Math.max(ref.clientWidth, ref.clientHeight);
+            const rect = ref.getBoundingClientRect();
+            const x = e.clientX - rect.left - size / 2;
+            const y = e.clientY - rect.top - size / 2;
+
+            ripple.style.width = ripple.style.height = `${size}px`;
+            ripple.style.left = `${x}px`;
+            ripple.style.top = `${y}px`;
+
+            // Set ripple color based on data attribute
+            let rippleColor = 'bg-neutral-token-8/30';
+            if (variant === 'primary') {
+                rippleColor = 'bg-neutral-3/30';
+            }
+            ripple.style.backgroundColor = rippleColor
+
+
+            ripple.classList.add('ripple');
+            ripple.classList.add(rippleColor);
+            ref.appendChild(ripple);
+
+            // Remove the ripple after animation completes
+            ripple.addEventListener('animationend', () => {
+                ripple.remove();
+            });
+        });
+    })
+</script>
+
+<button
+        bind:this={ref}
+        class={styles({ disabled, variant, icon, size, dangerous, className })}
+        {...props}
+        disabled={disabled}
+>
+    {@render children?.()}
+</button>

package/dist/components/checkbox/Checkbox.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 CheckboxVariants = VariantProps<typeof styles>;
 export interface CheckboxProps extends CheckboxVariants {
     children?: any;

package/dist/components/checkbox/Checkbox.svelte

@@ -1,35 +1,35 @@
-<script lang="ts">
-    import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-    import { cn } from "../../utils";
-    import IconCheck from "@tabler/icons-svelte/icons/check"
-    import IconMinus from "@tabler/icons-svelte/icons/minus"
-
-    let {
-        ref = $bindable(null),
-        checked = $bindable(false),
-        indeterminate = $bindable(false),
-        class: className,
-        ...restProps
-    }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
-</script>
-
-<CheckboxPrimitive.Root
-        bind:ref
-        class={cn(
-		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
-		className
-	)}
-        bind:checked
-        bind:indeterminate
-        {...restProps}
->
-    {#snippet children({ checked, indeterminate })}
-        <div class="flex size-4 items-center justify-center">
-            {#if indeterminate}
-                <IconMinus class="size-3.5 text-neutral-1" stroke={3}/>
-            {:else}
-                <IconCheck class={cn("size-3.5 text-neutral-1", !checked && "text-transparent")} stroke={3}/>
-            {/if}
-        </div>
-    {/snippet}
+<script lang="ts">
+    import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+    import { cn } from "../../utils";
+    import IconCheck from "@tabler/icons-svelte/icons/check"
+    import IconMinus from "@tabler/icons-svelte/icons/minus"
+
+    let {
+        ref = $bindable(null),
+        checked = $bindable(false),
+        indeterminate = $bindable(false),
+        class: className,
+        ...restProps
+    }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+        bind:ref
+        class={cn(
+		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		className
+	)}
+        bind:checked
+        bind:indeterminate
+        {...restProps}
+>
+    {#snippet children({ checked, indeterminate })}
+        <div class="flex size-4 items-center justify-center">
+            {#if indeterminate}
+                <IconMinus class="size-3.5 text-neutral-1" stroke={3}/>
+            {:else}
+                <IconCheck class={cn("size-3.5 text-neutral-1", !checked && "text-transparent")} stroke={3}/>
+            {/if}
+        </div>
+    {/snippet}
 </CheckboxPrimitive.Root>

package/dist/components/combobox/Combobox.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 ComboboxVariants = VariantProps<typeof styles>;
 export interface ComboboxProps extends ComboboxVariants {
     children?: any;

package/dist/components/combobox/Combobox.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-    import {type ComboboxProps, styles} from "./Combobox";
-    import {Popover} from "../popover";
-
-    let {children, ...props}: ComboboxProps = $props();
-
-</script>
-
+<script lang="ts">
+    import {type ComboboxProps, styles} from "./Combobox";
+    import {Popover} from "../popover";
+
+    let {children, ...props}: ComboboxProps = $props();
+
+</script>
+

package/dist/components/command/command.scss

@@ -1,89 +1,89 @@
-@reference "tailwindcss/theme";
-
-[data-cmdk-root] {
-	transition: transform 100ms ease;
-	max-width: var(--spacing-screen-md);
-	width: 100%;
-	overflow: hidden;
-}
-
-[data-cmdk-item] {
-	content-visibility: auto;
-
-	cursor: pointer;
-	border-radius: var(--radius-sm);
-	display: flex;
-	align-items: center;
-	gap: --spacing(2);
-	padding-inline: --spacing(2);
-	padding-block: --spacing(2.5);
-	color: var(--color-neutral-token-10);
-	user-select: none;
-	will-change: background, color;
-	transition: all 150ms ease;
-	transition-property: none;
-
-	&[data-selected='true'] {
-		background: var(--color-neutral-token-4);
-		color: var(--color-neutral-token-13);
-	}
-
-	&[data-disabled='true'] {
-		color: var(--color-neutral-token-7);
-		cursor: not-allowed;
-	}
-
-	&:active {
-		transition-property: background;
-		background: var(--color-neutral-token-5);
-	}
-
-	//& + [data-cmdk-item] {
-	//	margin-top: 4px;
-	//}
-
-	svg {
-		width: 18px;
-		height: 18px;
-	}
-}
-
-[data-cmdk-list] {
-	height: min(330px, calc(var(--cmdk-list-height)));
-	max-height: 400px;
-	overflow: auto;
-	overscroll-behavior: contain;
-	transition: 100ms ease;
-	transition-property: height;
-	margin-block: --spacing(2);
-	padding-inline: --spacing(2);
-}
-
-[data-cmdk-separator] {
-	height: 1px;
-	width: 100%;
-	margin: 4px 0;
-	background: var(--color-neutral-token-5);
-}
-
-*:not([hidden]) + [data-cmdk-group] {
-	margin-top: --spacing(2);
-}
-
-[data-cmdk-group-heading] {
-	user-select: none;
-	font-size: var(--text-xs);
-	color: var(--color-neutral-token-9);
-	display: flex;
-	padding-block: --spacing(1);
-	padding-inline: --spacing(2);
-}
-
-[data-cmdk-empty] {
-	display: grid;
-	place-content: center;
-	font-size: var(--text-sm);
-	color: var(--color-neutral-token-8);
-	height: --spacing(12);
-	white-space: pre-wrap;
+@reference "tailwindcss/theme";
+
+[data-cmdk-root] {
+	transition: transform 100ms ease;
+	max-width: var(--spacing-screen-md);
+	width: 100%;
+	overflow: hidden;
+}
+
+[data-cmdk-item] {
+	content-visibility: auto;
+
+	cursor: pointer;
+	border-radius: var(--radius-sm);
+	display: flex;
+	align-items: center;
+	gap: --spacing(2);
+	padding-inline: --spacing(2);
+	padding-block: --spacing(2.5);
+	color: var(--color-neutral-token-10);
+	user-select: none;
+	will-change: background, color;
+	transition: all 150ms ease;
+	transition-property: none;
+
+	&[data-selected='true'] {
+		background: var(--color-neutral-token-4);
+		color: var(--color-neutral-token-13);
+	}
+
+	&[data-disabled='true'] {
+		color: var(--color-neutral-token-7);
+		cursor: not-allowed;
+	}
+
+	&:active {
+		transition-property: background;
+		background: var(--color-neutral-token-5);
+	}
+
+	//& + [data-cmdk-item] {
+	//	margin-top: 4px;
+	//}
+
+	svg {
+		width: 18px;
+		height: 18px;
+	}
+}
+
+[data-cmdk-list] {
+	height: min(330px, calc(var(--cmdk-list-height)));
+	max-height: 400px;
+	overflow: auto;
+	overscroll-behavior: contain;
+	transition: 100ms ease;
+	transition-property: height;
+	margin-block: --spacing(2);
+	padding-inline: --spacing(2);
+}
+
+[data-cmdk-separator] {
+	height: 1px;
+	width: 100%;
+	margin: 4px 0;
+	background: var(--color-neutral-token-5);
+}
+
+*:not([hidden]) + [data-cmdk-group] {
+	margin-top: --spacing(2);
+}
+
+[data-cmdk-group-heading] {
+	user-select: none;
+	font-size: var(--text-xs);
+	color: var(--color-neutral-token-9);
+	display: flex;
+	padding-block: --spacing(1);
+	padding-inline: --spacing(2);
+}
+
+[data-cmdk-empty] {
+	display: grid;
+	place-content: center;
+	font-size: var(--text-sm);
+	color: var(--color-neutral-token-8);
+	height: --spacing(12);
+	white-space: pre-wrap;
 }