tera-system-ui 0.0.2 → 0.0.5

package/dist/internal/helpers/is.d.ts

@@ -0,0 +1,4 @@
+export declare const isBrowser: boolean;
+export declare function isHTMLElement(element: unknown): element is HTMLElement;
+export declare function isHTMLInputElement(element: unknown): element is HTMLInputElement;
+export declare function isUndefined(value: unknown): value is undefined;

package/dist/internal/helpers/is.js

@@ -0,0 +1,10 @@
+export const isBrowser = typeof document !== 'undefined';
+export function isHTMLElement(element) {
+    return element instanceof HTMLElement;
+}
+export function isHTMLInputElement(element) {
+    return element instanceof HTMLInputElement;
+}
+export function isUndefined(value) {
+    return value === undefined;
+}

package/dist/internal/helpers/kbd.d.ts

@@ -0,0 +1,35 @@
+export declare const kbd: {
+    ALT: string;
+    ARROW_DOWN: string;
+    ARROW_LEFT: string;
+    ARROW_RIGHT: string;
+    ARROW_UP: string;
+    BACKSPACE: string;
+    CAPS_LOCK: string;
+    CONTROL: string;
+    DELETE: string;
+    END: string;
+    ENTER: string;
+    ESCAPE: string;
+    F1: string;
+    F10: string;
+    F11: string;
+    F12: string;
+    F2: string;
+    F3: string;
+    F4: string;
+    F5: string;
+    F6: string;
+    F7: string;
+    F8: string;
+    F9: string;
+    HOME: string;
+    META: string;
+    PAGE_DOWN: string;
+    PAGE_UP: string;
+    SHIFT: string;
+    SPACE: string;
+    TAB: string;
+    CTRL: string;
+    ASTERISK: string;
+};

package/dist/internal/helpers/kbd.js

@@ -0,0 +1,35 @@
+export const kbd = {
+    ALT: 'Alt',
+    ARROW_DOWN: 'ArrowDown',
+    ARROW_LEFT: 'ArrowLeft',
+    ARROW_RIGHT: 'ArrowRight',
+    ARROW_UP: 'ArrowUp',
+    BACKSPACE: 'Backspace',
+    CAPS_LOCK: 'CapsLock',
+    CONTROL: 'Control',
+    DELETE: 'Delete',
+    END: 'End',
+    ENTER: 'Enter',
+    ESCAPE: 'Escape',
+    F1: 'F1',
+    F10: 'F10',
+    F11: 'F11',
+    F12: 'F12',
+    F2: 'F2',
+    F3: 'F3',
+    F4: 'F4',
+    F5: 'F5',
+    F6: 'F6',
+    F7: 'F7',
+    F8: 'F8',
+    F9: 'F9',
+    HOME: 'Home',
+    META: 'Meta',
+    PAGE_DOWN: 'PageDown',
+    PAGE_UP: 'PageUp',
+    SHIFT: 'Shift',
+    SPACE: ' ',
+    TAB: 'Tab',
+    CTRL: 'Control',
+    ASTERISK: '*'
+};

package/dist/internal/helpers/object.d.ts

@@ -0,0 +1,2 @@
+export declare function omit<T extends Record<string, unknown>, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K>;
+export declare function removeUndefined<T extends object>(obj: T): T;

package/dist/internal/helpers/object.js

@@ -0,0 +1,19 @@
+export function omit(obj, ...keys) {
+    const result = {};
+    for (const key of Object.keys(obj)) {
+        if (!keys.includes(key)) {
+            result[key] = obj[key];
+        }
+    }
+    return result;
+}
+export function removeUndefined(obj) {
+    const result = {};
+    for (const key in obj) {
+        const value = obj[key];
+        if (value !== undefined) {
+            result[key] = value;
+        }
+    }
+    return result;
+}

package/dist/internal/helpers/sleep.d.ts

@@ -0,0 +1 @@
+export declare function sleep(ms: number): Promise<unknown>;

package/dist/internal/helpers/sleep.js

@@ -0,0 +1,3 @@
+export function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/dist/internal/helpers/store.d.ts

@@ -0,0 +1,29 @@
+import { type Writable, type Stores, type StoresValues, type Readable } from 'svelte/store';
+/**
+ * Given an object of properties, returns an object of writable stores
+ * with the same properties and values.
+ */
+export declare function toWritableStores<T extends Record<string, unknown>>(properties: T): {
+    [K in keyof T]: Writable<T[K]>;
+};
+/**
+ * A utility function that creates an effect from a set of stores and a function.
+ * The effect is automatically cleaned up when the component is destroyed.
+ *
+ * @template S - The type of the stores object
+ * @param stores - The stores object to derive from
+ * @param fn - The function to run when the stores change
+ * @returns A function that can be used to unsubscribe the effect
+ */
+export declare function effect<S extends Stores>(stores: S, fn: (values: StoresValues<S>) => (() => void) | void): () => void;
+/**
+ * A utility function that creates a derived store that automatically
+ * unsubscribes from its dependencies.
+ *
+ * @template S - The type of the stores object
+ * @template T - The type of the derived store
+ * @param stores - The stores object to derive from
+ * @param fn - The function to derive the store from
+ * @returns A derived store that automatically unsubscribes from its dependencies
+ */
+export declare function derivedWithUnsubscribe<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, onUnsubscribe: (cb: () => void) => void) => T): Readable<T>;

package/dist/internal/helpers/store.js

@@ -0,0 +1,80 @@
+import { derived, writable } from 'svelte/store';
+import { onDestroy } from 'svelte';
+/**
+ * Given an object of properties, returns an object of writable stores
+ * with the same properties and values.
+ */
+export function toWritableStores(properties) {
+    const result = {};
+    Object.keys(properties).forEach((key) => {
+        const propertyKey = key;
+        const value = properties[propertyKey];
+        result[propertyKey] = writable(value);
+    });
+    return result;
+}
+/**
+ * A utility function that creates an effect from a set of stores and a function.
+ * The effect is automatically cleaned up when the component is destroyed.
+ *
+ * @template S - The type of the stores object
+ * @param stores - The stores object to derive from
+ * @param fn - The function to run when the stores change
+ * @returns A function that can be used to unsubscribe the effect
+ */
+export function effect(stores, fn) {
+    // Create a derived store that contains the stores object and an onUnsubscribe function
+    const unsub = derivedWithUnsubscribe(stores, (stores, onUnsubscribe) => {
+        return {
+            stores,
+            onUnsubscribe
+        };
+    }).subscribe(({ stores, onUnsubscribe }) => {
+        const returned = fn(stores);
+        // If the function returns a cleanup function, call it when the effect is unsubscribed
+        if (returned) {
+            onUnsubscribe(returned);
+        }
+    });
+    // Automatically unsubscribe the effect when the component is destroyed
+    onDestroy(unsub);
+    return unsub;
+}
+/**
+ * A utility function that creates a derived store that automatically
+ * unsubscribes from its dependencies.
+ *
+ * @template S - The type of the stores object
+ * @template T - The type of the derived store
+ * @param stores - The stores object to derive from
+ * @param fn - The function to derive the store from
+ * @returns A derived store that automatically unsubscribes from its dependencies
+ */
+export function derivedWithUnsubscribe(stores, fn) {
+    let unsubscribers = [];
+    const onUnsubscribe = (cb) => {
+        unsubscribers.push(cb);
+    };
+    const unsubscribe = () => {
+        // Call all of the unsubscribe functions from the previous run of the function
+        unsubscribers.forEach((fn) => fn());
+        // Clear the list of unsubscribe functions
+        unsubscribers = [];
+    };
+    const derivedStore = derived(stores, ($storeValues) => {
+        unsubscribe();
+        return fn($storeValues, onUnsubscribe);
+    });
+    onDestroy(unsubscribe);
+    const subscribe = (...args) => {
+        const unsub = derivedStore.subscribe(...args);
+        return () => {
+            unsub();
+            unsubscribe();
+        };
+    };
+    return {
+        ...derivedStore,
+        subscribe
+    };
+}

package/dist/internal/helpers/style.d.ts

@@ -0,0 +1,12 @@
+export declare function styleToString(style: Record<string, number | string | undefined>): string;
+export declare const srOnlyStyles: {
+    position: string;
+    width: string;
+    height: string;
+    padding: string;
+    margin: string;
+    overflow: string;
+    clip: string;
+    whiteSpace: string;
+    borderWidth: string;
+};

package/dist/internal/helpers/style.js

@@ -0,0 +1,18 @@
+export function styleToString(style) {
+    return Object.keys(style).reduce((str, key) => {
+        if (style[key] === undefined)
+            return str;
+        return str + `${key}:${style[key]};`;
+    }, '');
+}
+export const srOnlyStyles = {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    padding: '0',
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    borderWidth: '0'
+};

package/dist/internal/index.d.ts

@@ -0,0 +1,3 @@
+export * from './command-score.js';
+export * from './helpers/index.js';
+export * from './types.js';

package/dist/internal/index.js

@@ -0,0 +1,3 @@
+export * from './command-score.js';
+export * from './helpers/index.js';
+export * from './types.js';

package/dist/internal/types.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TransitionConfig } from 'svelte/transition';
+export type Expand<T> = T extends object ? T extends infer O ? {
+    [K in keyof O]: O[K];
+} : never : T;
+export type ValueOf<T> = T[keyof T];
+export type HTMLDivAttributes = HTMLAttributes<HTMLDivElement>;
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export type RenameProperties<T, NewNames extends Partial<Record<keyof T, string>>> = Expand<{
+    [K in keyof T as K extends keyof NewNames ? NewNames[K] extends PropertyKey ? NewNames[K] : K : K]: T[K];
+}>;
+export type PrefixKeys<T, Prefix extends string> = Expand<{
+    [K in keyof T as `${Prefix}${Capitalize<string & K>}`]: T[K];
+}>;
+export type Transition = (node: Element, params?: any) => TransitionConfig;
+export type Arrayable<T> = T | T[];

package/dist/internal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/themes/scrollbar.scss

@@ -0,0 +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;
+}

package/dist/themes/tera-ui-base.css

@@ -1,3 +1,6 @@
+@import "scrollbar.scss";
+
+
 :root {
     --border-radius-base: 0.25rem;
     --border-radius-container: 0.5rem;
@@ -147,3 +150,25 @@
     :root {
     }
 }
+
+
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple-animation 1s ease-out;
+    pointer-events: none;
+}
+
+@keyframes ripple-animation {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
+
+body {
+    background: theme(colors.neutral.token.1);
+    color: theme(colors.neutral.token.13);
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tera-system-ui",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -13,7 +13,8 @@
     "build-storybook": "storybook build"
   },
   "bin": {
-    "npm publisui": "./scripts/add-component-template.js"
+    "ui": "./scripts/add-component-template.js",
+    "gen": "./scripts/generate-ts-index.js"
   },
   "files": [
     "dist",
@@ -32,13 +33,30 @@
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./themes/tw-preset": "./dist/themes/tw-preset.cjs"
+    "./i18n": {
+      "types": "./dist/i18n/index.d.ts",
+      "svelte": "./dist/i18n/index.js",
+      "default": "./dist/i18n/index.js"
+    },
+    "./icons": {
+      "types": "./dist/components/icons/index.d.ts",
+      "svelte": "./dist/components/icons/index.js",
+      "default": "./dist/components/icons/index.js"
+    },
+    "./command": {
+      "types": "./dist/components/command/index.d.ts",
+      "svelte": "./dist/components/command/index.js",
+      "default": "./dist/components/command/index.js"
+    },
+    "./themes/tw-preset": "./dist/themes/tw-preset.cjs",
+    "./themes/tera-ui-base": "./dist/themes/tera-ui-base.css"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
+    "@chromatic-com/storybook": "^3.2.1",
+    "@inlang/paraglide-js": "1.11.3",
     "@storybook/addon-essentials": "^8.3.6",
     "@storybook/addon-interactions": "^8.3.6",
     "@storybook/addon-links": "^8.3.6",
@@ -50,24 +68,27 @@
     "@storybook/svelte": "^8.3.6",
     "@storybook/sveltekit": "^8.3.6",
     "@storybook/test": "^8.3.6",
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.7.3",
+    "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tabler/icons-svelte": "^3.21.0",
     "autoprefixer": "^10.4.20",
-    "publint": "^0.2.0",
-    "sass-embedded": "^1.80.4",
+    "clsx": "^2.1.1",
+    "npx": "^10.2.2",
+    "publint": "^0.2.12",
+    "sass-embedded": "^1.80.5",
     "storybook": "^8.3.6",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
-    "tailwindcss": "^3.4.9",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.11",
-    "npx": "^10.2.2"
+    "svelte": "^5.1.6",
+    "svelte-check": "^4.0.5",
+    "tailwind-variants": "^0.2.1",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
   },
   "dependencies": {
-    "@tabler/icons-svelte": "^3.20.0",
-    "tailwind-variants": "^0.2.1",
-    "clsx": "^2.1.1"
+    "@floating-ui/dom": "^1.6.12",
+    "@inlang/paraglide-sveltekit": "0.11.5",
+    "@tabler/icons-svelte": "^3.21.0"
   }
 }

package/scripts/generate-ts-index.js

@@ -0,0 +1,137 @@
+import fs from "fs";
+
+import path from "path";
+
+
+/**
+ * Recursively finds all "index.ts" files in the given folder path.
+ * @param {string} folderPath - The root directory to start the search.
+ * @returns {Array} - List of objects containing `filePath` and `content` of each "index.ts" file.
+ */
+function findIndexFiles(folderPath) {
+    const result = [];
+
+    function searchFolder(currentPath) {
+        const filesAndDirs = fs.readdirSync(currentPath);
+
+        for (const item of filesAndDirs) {
+            const itemPath = path.join(currentPath, item);
+            const stats = fs.statSync(itemPath);
+
+            if (stats.isDirectory()) {
+                // Recursively search in subdirectories
+                searchFolder(itemPath);
+            } else if (item === "index.ts") {
+                // Read file content if the file is "index.ts"
+                const content = fs.readFileSync(itemPath, "utf-8");
+                result.push({filePath: itemPath, content});
+            }
+        }
+    }
+
+    searchFolder(folderPath);
+    return result;
+}
+
+
+/**
+ * Extracts export names from a given JavaScript file content.
+ * @param {string} filePath - The path to the JavaScript file.
+ * @returns {Array} - An array of export names.
+ */
+function extractExportNames(filePath) {
+    const fileContent = fs.readFileSync(filePath, "utf-8");
+    const exportNames = [];
+
+    // Regular expressions to match the export names
+    const defaultExportRegex = /export\s*{\s*default\s+as\s+(\w+)/g;
+    const namedExportRegex = /export\s*{(\w+)\s*}/g;
+
+    let match;
+
+    // Find all matches for `export { default as ... }`
+    while ((match = defaultExportRegex.exec(fileContent)) !== null) {
+        exportNames.push(match[1]);
+    }
+
+    // Find all matches for `export { namedExport }`
+    while ((match = namedExportRegex.exec(fileContent)) !== null) {
+        exportNames.push(match[1]);
+    }
+
+    return exportNames;
+}
+
+
+/**
+ * Recursively finds all files in a given folder path that match the name pattern.
+ * @param {string} folderPath - The root directory to start the search.
+ * @param {RegExp} namePattern - The regular expression pattern to match file names.
+ * @returns {Array} - List of file names that match the pattern.
+ */
+function findFilesByPattern(folderPath, namePattern) {
+    const result = [];
+
+    function searchFolder(currentPath) {
+        const filesAndDirs = fs.readdirSync(currentPath);
+
+        for (const item of filesAndDirs) {
+            const itemPath = path.join(currentPath, item);
+            const stats = fs.statSync(itemPath);
+
+            if (stats.isDirectory()) {
+                // Recursively search in subdirectories
+                searchFolder(itemPath);
+            } else if (namePattern.test(item)) {
+                // If the file name matches the pattern, add to result
+                result.push(item);
+            }
+        }
+    }
+
+    searchFolder(folderPath);
+    return result;
+}
+
+const GLOBAL_INDEX_PATH = "../src/lib/index.ts"
+const COMPONENTS_PATH = "../src/lib/components"
+const ICON_COMPONENTS_PATH = "../src/lib/components/icons"
+
+const iconComponentsFileList = findFilesByPattern(ICON_COMPONENTS_PATH, /^Icon\w*\.svelte$/);
+
+// generate icon index
+const importSvelteComponentTemplate = `export {default as Component} from './Component.svelte'`;
+const importComponentTemplate = `export {Component} from 'path'`;
+
+
+(() => {
+    let content = ''
+    iconComponentsFileList.forEach(file => {
+        let componentName = file.replace('.svelte', '')
+        content += importSvelteComponentTemplate.replaceAll('Component', componentName);
+        content += `\n`
+    })
+
+    fs.writeFileSync(ICON_COMPONENTS_PATH + '/index.ts', content, 'utf8');
+})();
+
+
+(() => {
+    const indexFileList = findIndexFiles(COMPONENTS_PATH);
+    let content = ''
+
+    indexFileList.forEach(file => {
+        let components = extractExportNames(file.filePath)
+        if (components.length === 0) return
+
+        let importFromPath = './components/' + file.filePath.split(`\\components\\`)[1].replace('\\index.ts', '');
+
+        content += importComponentTemplate.replace('path', importFromPath)
+            .replace('Component', components.join(', '));
+        content += '\n';
+    });
+
+    console.log(content)
+    fs.writeFileSync(GLOBAL_INDEX_PATH, content, 'utf8');
+
+})()

package/dist/components/input/input.d.ts

@@ -1,49 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-export declare const styles: import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, "border rounded focus:outline-none focus:ring-2 transition-shadow", import("tailwind-variants/dist/config").TVConfig<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, {
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}>, {
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, "border rounded focus:outline-none focus:ring-2 transition-shadow", import("tailwind-variants/dist/config").TVConfig<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, {
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
-type InputVariants = VariantProps<typeof styles>;
-export interface InputProps extends InputVariants {
-    children: any;
-}
-export {};

package/dist/components/input/input.js

@@ -1,14 +0,0 @@
-import { tv } from "tailwind-variants";
-export const styles = tv({
-    base: 'border rounded focus:outline-none focus:ring-2 transition-shadow', // Base styles
-    variants: {
-        size: {
-            sm: 'px-2 py-1 text-sm', // Small size styles
-            md: 'px-3 py-2 text-base', // Medium size styles
-            lg: 'px-4 py-3 text-lg', // Large size styles
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-    },
-});

package/dist/components/side-navigation/clickOutside.d.ts

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