tera-system-ui 0.0.15 → 0.0.17

package/dist/paraglide/runtime.js

@@ -0,0 +1,141 @@
+/* eslint-disable */
+/** @type {((tag: AvailableLanguageTag) => void) | undefined} */
+let _onSetLanguageTag
+
+/**
+ * The project's source language tag.
+ *
+ * @example
+ *   if (newlySelectedLanguageTag === sourceLanguageTag){
+ *     // do nothing as the source language tag is the default language
+ *     return
+ *   }
+ */
+export const sourceLanguageTag = "en"
+
+/**
+ * The project's available language tags.
+ *
+ * @example
+ *   if (availableLanguageTags.includes(userSelectedLanguageTag) === false){
+ *     throw new Error("Language tag not available")
+ *   }
+ */
+export const availableLanguageTags = /** @type {const} */ (["de","en","es","fr","pt","vi","ru","it"])
+
+/**
+ * Get the current language tag.
+ *
+ * @example
+ *   if (languageTag() === "de"){
+ *     console.log("Germany 🇩🇪")
+ *   } else if (languageTag() === "nl"){
+ *     console.log("Netherlands 🇳🇱")
+ *   }
+ *
+ * @type {() => AvailableLanguageTag}
+ */
+export let languageTag = () => sourceLanguageTag
+
+/**
+ * Set the language tag.
+ *
+ * @example
+ *
+ *   // changing to language
+ *   setLanguageTag("en")
+ *
+ *   // passing a getter function also works.
+ *   //
+ *   // a getter function is useful for resolving a language tag
+ *   // on the server where every request has a different language tag
+ *   setLanguageTag(() => {
+ *     return request.languageTag
+ *   })
+ *
+ * @param {AvailableLanguageTag | (() => AvailableLanguageTag)} tag
+ */
+export const setLanguageTag = (tag) => {
+    if (typeof tag === "function") {
+        languageTag = enforceLanguageTag(tag)
+    } else {
+        languageTag = enforceLanguageTag(() => tag)
+    }
+    // call the callback function if it has been defined
+    if (_onSetLanguageTag !== undefined) {
+        _onSetLanguageTag(languageTag())
+    }
+}
+
+/**
+ * Wraps an untrusted function and enforces that it returns a language tag.
+ * @param {() => AvailableLanguageTag} unsafeLanguageTag
+ * @returns {() => AvailableLanguageTag}
+ */
+function enforceLanguageTag(unsafeLanguageTag) {
+    return () => {
+        const tag = unsafeLanguageTag()
+        if(!isAvailableLanguageTag(tag)) {
+            throw new Error(`languageTag() didn't return a valid language tag. Check your setLanguageTag call`)
+        }
+        return tag
+    }
+}
+
+/**
+ * Set the `onSetLanguageTag()` callback function.
+ *
+ * The function can be used to trigger client-side side-effects such as
+ * making a new request to the server with the updated language tag,
+ * or re-rendering the UI on the client (SPA apps).
+ *
+ * - Don't use this function on the server (!).
+ *   Triggering a side-effect is only useful on the client because a server-side
+ *   environment doesn't need to re-render the UI.
+ *
+ * - The `onSetLanguageTag()` callback can only be defined once to avoid unexpected behavior.
+ *
+ * @example
+ *   // if you use inlang paraglide on the server, make sure
+ *   // to not call `onSetLanguageTag()` on the server
+ *   if (isServer === false) {
+ *     onSetLanguageTag((tag) => {
+ *       // (for example) make a new request to the
+ *       // server with the updated language tag
+ *       window.location.href = `/${tag}/${window.location.pathname}`
+ *     })
+ *   }
+ *
+ * @param {(languageTag: AvailableLanguageTag) => void} fn
+ */
+export const onSetLanguageTag = (fn) => {
+    _onSetLanguageTag = fn
+}
+
+/**
+ * Check if something is an available language tag.
+ *
+ * @example
+ * 	if (isAvailableLanguageTag(params.locale)) {
+ * 		setLanguageTag(params.locale)
+ * 	} else {
+ * 		setLanguageTag("en")
+ * 	}
+ *
+ * @param {any} thing
+ * @returns {thing is AvailableLanguageTag}
+ */
+export function isAvailableLanguageTag(thing) {
+    return availableLanguageTags.includes(thing)
+}
+
+// ------ TYPES ------
+
+/**
+ * A language tag that is available in the project.
+ *
+ * @example
+ *   setLanguageTag(request.languageTag as AvailableLanguageTag)
+ *
+ * @typedef {typeof availableLanguageTags[number]} AvailableLanguageTag
+ */

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

package/package.json

@@ -1,94 +1,95 @@
-{
-  "name": "tera-system-ui",
-  "version": "0.0.15",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "npm run package",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "lang-compile": "paraglide-js compile --project ./project.inlang --outdir ./src/lib/paraglide"
-  },
-  "bin": {
-    "ui": "./scripts/add-component-template.js",
-    "gen": "./scripts/generate-ts-index.js"
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./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": "^3.2.1",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-svelte-csf": "^5.0.0-next.8",
-    "@storybook/addon-themes": "^8.3.6",
-    "@storybook/addon-viewport": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/svelte": "^8.3.6",
-    "@storybook/sveltekit": "^8.3.6",
-    "@storybook/test": "^8.3.6",
-    "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.7.3",
-    "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "npx": "^10.2.2",
-    "publint": "^0.2.12",
-    "sass-embedded": "^1.80.5",
-    "storybook": "^8.3.6",
-    "svelte": "^5.1.6",
-    "svelte-check": "^4.0.5",
-    "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10"
-  },
-  "dependencies": {
-    "@floating-ui/dom": "^1.6.12",
-    "@inlang/paraglide-sveltekit": "0.11.5",
-    "@tabler/icons-svelte": "^3.21.0",
-    "clsx": "^2.1.1",
-    "autoprefixer": "^10.4.20",
-    "@inlang/paraglide-js": "1.11.3",
-    "tailwind-variants": "^0.2.1"
-  }
-}
+{
+  "name": "tera-system-ui",
+  "version": "0.0.17",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "customPrepublish": "node ./scripts/prepublish.js",
+    "prepublishOnly": "npm run customPrepublish && npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lang-compile": "paraglide-js compile --project ./project.inlang --outdir ./src/lib/paraglide"
+  },
+  "bin": {
+    "ui": "./scripts/add-component-template.js",
+    "gen": "./scripts/generate-ts-index.js"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./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": "^3.2.1",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.8",
+    "@storybook/addon-themes": "^8.3.6",
+    "@storybook/addon-viewport": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/svelte": "^8.3.6",
+    "@storybook/sveltekit": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.7.3",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "npx": "^10.2.2",
+    "publint": "^0.2.12",
+    "sass-embedded": "^1.80.5",
+    "storybook": "^8.3.6",
+    "svelte": "^5.1.6",
+    "svelte-check": "^4.0.5",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.12",
+    "@inlang/paraglide-sveltekit": "0.11.5",
+    "@tabler/icons-svelte": "^3.21.0",
+    "clsx": "^2.1.1",
+    "autoprefixer": "^10.4.20",
+    "@inlang/paraglide-js": "1.11.3",
+    "tailwind-variants": "^0.2.1"
+  }
+}

package/scripts/add-component-template.js

@@ -1,121 +1,121 @@
 #!/usr/bin/env node
-
-import fs from "fs";
-
-import path from "path";
-// Get the component name from the command line arguments
-const componentName = process.argv[3];
-const command = process.argv[2];
-
-if (!componentName) {
-    console.error("Please provide a component name: `npx tera-ui add component-name`");
-    process.exit(1);
-}
-
-if (command !== 'add') {
-    console.error(`Please provide a correct command: current command ${command}`);
-    process.exit(1);
-}
-
-
-const PASCAL_CASE = 'PASCAL_CASE';
-const KEBAB_CASE = 'KEBAB_CASE';
-
-
-function convertCase(text, convertTo) {
-    const isPascalCase = /^[A-Z][a-z0-9]+([A-Z][a-z0-9]*)*$/.test(text);
-    const isKebabCase = /^[a-z]+(-[a-z0-9]+)*$/.test(text);
-
-    if ((convertTo === PASCAL_CASE && isPascalCase) ||
-        (convertTo === KEBAB_CASE && isKebabCase)) {
-        return text;
-    }
-
-    if (convertTo === PASCAL_CASE) {
-        return text
-            .toLowerCase()
-            .replace(/(?:^|[-_])(.)/g, (_, char) => char.toUpperCase());
-    } else if (convertTo === KEBAB_CASE) {
-        return text
-            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-            .toLowerCase();
-    } else {
-        throw new Error("Invalid 'convertTo' parameter. Use 'PASCAL_CASE' or 'KEBAB_CASE'.");
-    }
-}
-
-
-function readFileContent(path) {
-    try {
-        const data = fs.readFileSync(path, 'utf8');
-        return data;
-    } catch (error) {
-        console.error("Error reading file:", error.message);
-        return null;
-    }
-}
-
-
-const componentTemplateFolder = path.join(process.cwd(), 'scripts/file-template/component');
-
-function getComponentSvelte(componentName) {
-    let template = readFileContent(componentTemplateFolder + '/Component.svelte')
-    let componentNameCase = convertCase(componentName, PASCAL_CASE);
-    return template.replaceAll('ComponentProps', componentNameCase + 'Props')
-        .replaceAll('"./Component"', `"./${componentNameCase}"`);
-}
-
-function getComponentTS(componentName) {
-    let template = readFileContent(componentTemplateFolder + '/Component.ts')
-    let componentNameCase = convertCase(componentName, PASCAL_CASE);
-    return template.replaceAll('Component', componentNameCase);
-}
-
-function getIndexTS(componentName) {
-    let template = readFileContent(componentTemplateFolder + '/index.ts')
-    let componentNameCase = convertCase(componentName, PASCAL_CASE);
-    return template.replaceAll('Component', componentNameCase);
-}
-
-
-function getComponentStoriesSvelte(componentName) {
-    let template = readFileContent(componentTemplateFolder + '/Component.stories.svelte')
-    let componentNameCase = convertCase(componentName, PASCAL_CASE);
-    return template.replaceAll('ComponentName', componentNameCase)
-        .replaceAll('component-path', convertCase(componentName, KEBAB_CASE));
-}
-
-
-// Define the component folder and files
-const componentDir = path.join(process.cwd(), 'src', 'lib', 'components', convertCase(componentName, KEBAB_CASE));
-const componentStoriesDir = path.join(process.cwd(), 'src', 'stories', convertCase(componentName, KEBAB_CASE));
-
-
-const files = {
-    [`${convertCase(componentName, PASCAL_CASE)}.svelte`]: getComponentSvelte(componentName),
-    [`${convertCase(componentName, PASCAL_CASE)}.ts`]: getComponentTS(componentName),
-    [`index.ts`]: getIndexTS(componentName),
-    [`${convertCase(componentName, PASCAL_CASE)}.stories.svelte`]: getComponentStoriesSvelte(componentName),
-};
-
-
-// Create the folder and files with template content
-if (!fs.existsSync(componentDir)) {
-    fs.mkdirSync(componentDir);
-}
-
-if (!fs.existsSync(componentStoriesDir)) {
-    fs.mkdirSync(componentStoriesDir);
-}
-
-
-for (const [filename, content] of Object.entries(files)) {
-    const filePath = filename.includes('.stories.')
-        ? path.join(componentStoriesDir, filename)
-        : path.join(componentDir, filename);
-
-
-    fs.writeFileSync(filePath, content, 'utf8');
-}
-
-console.log(`Component ${componentName} created successfully with 3 template files!`);
+
+import fs from "fs";
+
+import path from "path";
+// Get the component name from the command line arguments
+const componentName = process.argv[3];
+const command = process.argv[2];
+
+if (!componentName) {
+    console.error("Please provide a component name: `npx tera-ui add component-name`");
+    process.exit(1);
+}
+
+if (command !== 'add') {
+    console.error(`Please provide a correct command: current command ${command}`);
+    process.exit(1);
+}
+
+
+const PASCAL_CASE = 'PASCAL_CASE';
+const KEBAB_CASE = 'KEBAB_CASE';
+
+
+function convertCase(text, convertTo) {
+    const isPascalCase = /^[A-Z][a-z0-9]+([A-Z][a-z0-9]*)*$/.test(text);
+    const isKebabCase = /^[a-z]+(-[a-z0-9]+)*$/.test(text);
+
+    if ((convertTo === PASCAL_CASE && isPascalCase) ||
+        (convertTo === KEBAB_CASE && isKebabCase)) {
+        return text;
+    }
+
+    if (convertTo === PASCAL_CASE) {
+        return text
+            .toLowerCase()
+            .replace(/(?:^|[-_])(.)/g, (_, char) => char.toUpperCase());
+    } else if (convertTo === KEBAB_CASE) {
+        return text
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            .toLowerCase();
+    } else {
+        throw new Error("Invalid 'convertTo' parameter. Use 'PASCAL_CASE' or 'KEBAB_CASE'.");
+    }
+}
+
+
+function readFileContent(path) {
+    try {
+        const data = fs.readFileSync(path, 'utf8');
+        return data;
+    } catch (error) {
+        console.error("Error reading file:", error.message);
+        return null;
+    }
+}
+
+
+const componentTemplateFolder = path.join(process.cwd(), 'scripts/file-template/component');
+
+function getComponentSvelte(componentName) {
+    let template = readFileContent(componentTemplateFolder + '/Component.svelte')
+    let componentNameCase = convertCase(componentName, PASCAL_CASE);
+    return template.replaceAll('ComponentProps', componentNameCase + 'Props')
+        .replaceAll('"./Component"', `"./${componentNameCase}"`);
+}
+
+function getComponentTS(componentName) {
+    let template = readFileContent(componentTemplateFolder + '/Component.ts')
+    let componentNameCase = convertCase(componentName, PASCAL_CASE);
+    return template.replaceAll('Component', componentNameCase);
+}
+
+function getIndexTS(componentName) {
+    let template = readFileContent(componentTemplateFolder + '/index.ts')
+    let componentNameCase = convertCase(componentName, PASCAL_CASE);
+    return template.replaceAll('Component', componentNameCase);
+}
+
+
+function getComponentStoriesSvelte(componentName) {
+    let template = readFileContent(componentTemplateFolder + '/Component.stories.svelte')
+    let componentNameCase = convertCase(componentName, PASCAL_CASE);
+    return template.replaceAll('ComponentName', componentNameCase)
+        .replaceAll('component-path', convertCase(componentName, KEBAB_CASE));
+}
+
+
+// Define the component folder and files
+const componentDir = path.join(process.cwd(), 'src', 'lib', 'components', convertCase(componentName, KEBAB_CASE));
+const componentStoriesDir = path.join(process.cwd(), 'src', 'stories', convertCase(componentName, KEBAB_CASE));
+
+
+const files = {
+    [`${convertCase(componentName, PASCAL_CASE)}.svelte`]: getComponentSvelte(componentName),
+    [`${convertCase(componentName, PASCAL_CASE)}.ts`]: getComponentTS(componentName),
+    [`index.ts`]: getIndexTS(componentName),
+    [`${convertCase(componentName, PASCAL_CASE)}.stories.svelte`]: getComponentStoriesSvelte(componentName),
+};
+
+
+// Create the folder and files with template content
+if (!fs.existsSync(componentDir)) {
+    fs.mkdirSync(componentDir);
+}
+
+if (!fs.existsSync(componentStoriesDir)) {
+    fs.mkdirSync(componentStoriesDir);
+}
+
+
+for (const [filename, content] of Object.entries(files)) {
+    const filePath = filename.includes('.stories.')
+        ? path.join(componentStoriesDir, filename)
+        : path.join(componentDir, filename);
+
+
+    fs.writeFileSync(filePath, content, 'utf8');
+}
+
+console.log(`Component ${componentName} created successfully with 3 template files!`);