tera-system-ui 0.0.2 → 0.0.3

package/dist/actions/clickOutside.d.ts

@@ -0,0 +1,6 @@
+/** Dispatch event on click outside of node */
+export declare function clickOutside(node: any, data?: {
+    exceptElement?: any;
+}): {
+    destroy(): void;
+};

package/dist/{components/side-navigation → actions}/clickOutside.js

@@ -1,7 +1,8 @@
 /** Dispatch event on click outside of node */
-export function clickOutside(node) {
+export function clickOutside(node, data) {
     const handleClick = (event) => {
-        if (node && !node.contains(event.target) && !event.defaultPrevented) {
+        if (node && !node.contains(event.target) && !event.defaultPrevented
+            && (!(data?.exceptElement) || !data.exceptElement.contains(event.target))) {
             node.dispatchEvent(new CustomEvent('click_outside', node));
         }
     };

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

@@ -19,7 +19,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     dangerous: {
         true: string;
     };
-}, undefined, "relative overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon transition-all duration-element-react focus:ring-2 select-none", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "relative overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon transition-all duration-element-react select-none focus-visible:ring-2 outline-none", import("tailwind-variants/dist/config").TVConfig<{
     variant: {
         primary: string;
         secondary: string;
@@ -99,7 +99,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     dangerous: {
         true: string;
     };
-}, undefined, "relative overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon transition-all duration-element-react focus:ring-2 select-none", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "relative overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon transition-all duration-element-react select-none focus-visible:ring-2 outline-none", import("tailwind-variants/dist/config").TVConfig<{
     variant: {
         primary: string;
         secondary: string;

package/dist/components/button/Button.js

@@ -1,11 +1,11 @@
 import { tv } from "tailwind-variants";
 export const styles = tv({
-    base: 'relative overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon transition-all duration-element-react focus:ring-2 select-none',
+    base: 'relative overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon transition-all duration-element-react select-none focus-visible:ring-2 outline-none',
     variants: {
         variant: {
-            primary: 'bg-primary-600 text-neutral-1 border border-primary-600 hover:bg-primary-700 focus:ring-primary-400 [&:after]:bg-black',
-            secondary: 'bg-neutral-token-1 text-neutral-token-13 border-neutral-token-7 border hover:bg-neutral-token-3 focus:ring-neutral-token-6',
-            ghost: 'text-neutral-token-13 hover:bg-neutral-token-3 focus:ring-neutral-token-6',
+            primary: 'bg-primary-600 text-neutral-1 border border-primary-600 hover:bg-primary-700 focus:ring-primary-token-9 [&:after]:bg-black',
+            secondary: 'bg-neutral-token-1 text-neutral-token-13 border-neutral-token-7 border hover:bg-neutral-token-3 focus:ring-neutral-token-7',
+            ghost: 'text-neutral-token-13 hover:bg-neutral-token-3 focus:ring-neutral-token-7',
         },
         size: {
             sm: 'h-6 px-2 gap-1 text-sm [&>svg]:size-icon-xs',
@@ -20,7 +20,7 @@ export const styles = tv({
         },
         dangerous: {
             true: ''
-        },
+        }
     },
     compoundVariants: [
         {

package/dist/components/button/Button.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
     import {type ButtonProps, styles} from "./Button";
 
-    let {children, disabled, variant = 'primary', icon, size, dangerous, class: className, ...props}: ButtonProps = $props();
-
-    let button: HTMLButtonElement
+    let {
+        children, disabled, variant = 'primary', icon, size, dangerous, class: className,
+        ref = $bindable(),
+        ...props
+    }: ButtonProps & {ref: HTMLButtonElement}  = $props();
 
     $effect(() => {
-        button.addEventListener('click', function (e) {
+        ref.addEventListener('click', function (e) {
             const ripple = document.createElement('span');
-            const size = Math.max(button.clientWidth, button.clientHeight);
-            const rect = button.getBoundingClientRect();
+            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;
 
@@ -27,7 +29,7 @@
 
             ripple.classList.add('ripple');
             ripple.classList.add(rippleColor);
-            button.appendChild(ripple);
+            ref.appendChild(ripple);
 
             // Remove the ripple after animation completes
             ripple.addEventListener('animationend', () => {
@@ -38,7 +40,7 @@
 </script>
 
 <button
-        bind:this={button}
+        bind:this={ref}
         class={styles({ disabled, variant, icon, size, dangerous, className })}
         {...props}
         disabled={disabled}

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

@@ -1,3 +1,5 @@
 import { type ButtonProps } from "./Button";
-declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+declare const Button: import("svelte").Component<ButtonProps & {
+    ref: HTMLButtonElement;
+}, {}, "ref">;
 export default Button;

package/dist/components/combobox/Combobox.d.ts

@@ -0,0 +1,8 @@
+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>>;
+type ComboboxVariants = VariantProps<typeof styles>;
+export interface ComboboxProps extends ComboboxVariants {
+    children?: any;
+    class?: string;
+}
+export {};

package/dist/components/combobox/Combobox.js

@@ -0,0 +1,7 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: '',
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {},
+});

package/dist/components/combobox/Combobox.svelte

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

package/dist/components/combobox/Combobox.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type ComboboxProps } from "./Combobox";
+declare const Combobox: import("svelte").Component<ComboboxProps, {}, "">;
+export default Combobox;

package/dist/components/combobox/index.d.ts

@@ -0,0 +1 @@
+export { default as Combobox } from './Combobox.svelte';

package/dist/components/combobox/index.js

@@ -0,0 +1 @@
+export { default as Combobox } from './Combobox.svelte';

package/dist/components/command/command.d.ts

@@ -0,0 +1,33 @@
+import type { CommandProps, Context, Group, State, StateStore } from './types.js';
+import './command.scss';
+export declare const LIST_SELECTOR = "[data-cmdk-list-sizer]";
+export declare const GROUP_SELECTOR = "[data-cmdk-group]";
+export declare const GROUP_ITEMS_SELECTOR = "[data-cmdk-group-items]";
+export declare const GROUP_HEADING_SELECTOR = "[data-cmdk-group-heading]";
+export declare const ITEM_SELECTOR = "[data-cmdk-item]";
+export declare const VALID_ITEM_SELECTOR = "[data-cmdk-item]:not([aria-disabled=\"true\"])";
+export declare const VALUE_ATTR = "data-value";
+export declare const defaultFilter: (value: string, search: string) => number;
+export declare function getCtx(): Context;
+export declare function getState(): StateStore;
+export declare function createGroup(alwaysRender: boolean | undefined): {
+    id: string;
+};
+export declare function getGroup(): Group | undefined;
+export declare function createState(initialValues?: Partial<State>): import("svelte/store").Writable<State>;
+export declare function createCommand(props: CommandProps): {
+    state: {
+        subscribe: (this: void, run: import("svelte/store").Subscriber<State>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+        update: (this: void, updater: import("svelte/store").Updater<State>) => void;
+        set: (this: void, value: State) => void;
+        updateState: <K extends keyof State>(key: K, value: State[K], preventScroll?: boolean) => void;
+    };
+    handleRootKeydown: (e: KeyboardEvent) => void;
+    commandEl: import("svelte/store").Writable<HTMLDivElement | null>;
+    ids: {
+        input: string;
+        label: string;
+        root: string;
+        list: string;
+    };
+};