tera-system-ui 0.0.12 → 0.0.13

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

@@ -1,149 +1,149 @@
-:root {
-  --sidebar-width: 0;
-  --sidebar-transition-duration: 0.2s;
-  --sidebar-main-margin-left: 0;
-  --sidebar-border-width: 0;
-}
-
-.side-nav_main-layout {
-  transition: padding-left var(--sidebar-transition-duration);
-}
-
-.side-nav_main-side-bar {
-  container-type: inline-size;
-  z-index: 50;
-  width: var(--sidebar-width);
-  overflow-x: hidden;
-  border-right: var(--sidebar-border-width) solid theme('colors.neutral.token.5');
-  height: 100dvh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-
-  transition: width var(--sidebar-transition-duration);
-  background: theme('colors.neutral.token.1');
-
-  ul {
-    width: var(--sidebar-width);
-    transition: width var(--sidebar-transition-duration);
-  }
-
-}
-
-
-.sm-hidden {
-  opacity: 0;
-  transition: opacity var(--sidebar-transition-duration);
-}
-
-@container (min-width: 3rem) {
-  .sm-hidden {
-    opacity: 1;
-  }
-}
-
-.side-nav_main-content {
-  margin-left: var(--sidebar-main-margin-left);
-  transition: margin-left var(--sidebar-transition-duration);
-}
-
-
-.side-nav_main-layout {
-  &[data-side-nav-state="expand"], &[data-side-nav-temporary-expand="true"] {
-    --sidebar-width: 16.5rem;
-    --sidebar-border-width: 1px;
-    .header-brand-logo {
-      display: none;
-    }
-  }
-}
-
-@media (min-width: theme('screens.md')) {
-  :root {
-    --sidebar-main-margin-left: 3rem;
-    --sidebar-border-width: 1px;
-    --sidebar-width: 3rem;
-  }
-}
-
-@media (min-width: theme('screens.xl')) {
-  :root {
-    --sidebar-main-margin-left: var(--sidebar-width);
-    --sidebar-width: 16.5rem;
-  }
-  .header-brand-logo {
-    display: none;
-  }
-  .side-nav_main-layout {
-    &[data-side-nav-state="compact"] {
-      --sidebar-main-margin-left: 3rem;
-      --sidebar-width: 3rem;
-      .header-brand-logo {
-        display: block;
-      }
-    }
-
-    &[data-side-nav-temporary-expand="true"] {
-      --sidebar-width: 16.5rem;
-
-    }
-  }
-}
-
-
-.side-nav_item {
-  color: theme('colors.neutral.token.13');
-
-  a {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    width: 100%;
-    position: relative;
-    white-space: nowrap;
-    @apply px-3 py-3 font-semibold;
-  }
-
-  svg {
-    &.icon {
-      min-width: 24px;
-    }
-  }
-
-  &.selected a {
-    //background-color: theme('colors.neutral.token.11');
-    color: theme('colors.neutral.token.1');
-    //@apply rounded-full;
-  }
-
-  &.selected {
-    a::after {
-      content: '';
-      position: absolute;
-      inset-inline: 0.25rem;
-      inset-block: 0.2rem;
-      background: theme('colors.neutral.token.11');
-      border-radius: theme('borderRadius.DEFAULT');
-      z-index: 0;
-    }
-  }
-
-  //&.selected {
-  //  a::after {
-  //    content: '';
-  //    position: absolute;
-  //    left: 0;
-  //    top: 0;
-  //    bottom: 0;
-  //    width: 4px;
-  //    height: 100%;
-  //    background: theme('colors.primary.token.4');
-  //    border-radius: 4px 0 0 4px;
-  //  }
-  //}
-
-  &:hover {
-    background-color: theme('colors.neutral.token.3');
-  }
-}
+:root {
+  --sidebar-width: 0;
+  --sidebar-transition-duration: 0.2s;
+  --sidebar-main-margin-left: 0;
+  --sidebar-border-width: 0;
+}
+
+.side-nav_main-layout {
+  transition: padding-left var(--sidebar-transition-duration);
+}
+
+.side-nav_main-side-bar {
+  container-type: inline-size;
+  z-index: 50;
+  width: var(--sidebar-width);
+  overflow-x: hidden;
+  border-right: var(--sidebar-border-width) solid theme('colors.neutral.token.5');
+  height: 100dvh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+
+  transition: width var(--sidebar-transition-duration);
+  background: theme('colors.neutral.token.1');
+
+  ul {
+    width: var(--sidebar-width);
+    transition: width var(--sidebar-transition-duration);
+  }
+
+}
+
+
+.sm-hidden {
+  opacity: 0;
+  transition: opacity var(--sidebar-transition-duration);
+}
+
+@container (min-width: 3rem) {
+  .sm-hidden {
+    opacity: 1;
+  }
+}
+
+.side-nav_main-content {
+  margin-left: var(--sidebar-main-margin-left);
+  transition: margin-left var(--sidebar-transition-duration);
+}
+
+
+.side-nav_main-layout {
+  &[data-side-nav-state="expand"], &[data-side-nav-temporary-expand="true"] {
+    --sidebar-width: 16.5rem;
+    --sidebar-border-width: 1px;
+    .header-brand-logo {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: theme('screens.md')) {
+  :root {
+    --sidebar-main-margin-left: 3rem;
+    --sidebar-border-width: 1px;
+    --sidebar-width: 3rem;
+  }
+}
+
+@media (min-width: theme('screens.xl')) {
+  :root {
+    --sidebar-main-margin-left: var(--sidebar-width);
+    --sidebar-width: 16.5rem;
+  }
+  .header-brand-logo {
+    display: none;
+  }
+  .side-nav_main-layout {
+    &[data-side-nav-state="compact"] {
+      --sidebar-main-margin-left: 3rem;
+      --sidebar-width: 3rem;
+      .header-brand-logo {
+        display: block;
+      }
+    }
+
+    &[data-side-nav-temporary-expand="true"] {
+      --sidebar-width: 16.5rem;
+
+    }
+  }
+}
+
+
+.side-nav_item {
+  color: theme('colors.neutral.token.13');
+
+  a {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    width: 100%;
+    position: relative;
+    white-space: nowrap;
+    @apply px-3 py-3 font-semibold;
+  }
+
+  svg {
+    &.icon {
+      min-width: 24px;
+    }
+  }
+
+  &.selected a {
+    //background-color: theme('colors.neutral.token.11');
+    color: theme('colors.neutral.token.1');
+    //@apply rounded-full;
+  }
+
+  &.selected {
+    a::after {
+      content: '';
+      position: absolute;
+      inset-inline: 0.25rem;
+      inset-block: 0.2rem;
+      background: theme('colors.neutral.token.11');
+      border-radius: theme('borderRadius.DEFAULT');
+      z-index: 0;
+    }
+  }
+
+  //&.selected {
+  //  a::after {
+  //    content: '';
+  //    position: absolute;
+  //    left: 0;
+  //    top: 0;
+  //    bottom: 0;
+  //    width: 4px;
+  //    height: 100%;
+  //    background: theme('colors.primary.token.4');
+  //    border-radius: 4px 0 0 4px;
+  //  }
+  //}
+
+  &:hover {
+    background-color: theme('colors.neutral.token.3');
+  }
+}

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

@@ -1,28 +1,28 @@
-<script lang="ts">
-    import {type TeraUiContextProps} from "./TeraUiContext";
-    import {setGlobalContext} from "./global-context";
-    import {setLanguageTag} from "../../paraglide/runtime";
-    import * as m from '../../paraglide/messages.js'
-
-
-    let {
-        children,
-        supportLanguages = ['en'],
-        language = 'en',
-        ...props
-    }: TeraUiContextProps = $props();
-
-
-    setGlobalContext({
-        supportLanguages,
-        language,
-        ...props
-    })
-
-    setLanguageTag(language)
-    console.log('setLanguageTag', language)
-    console.log('test translate', m.text_select_language())
-
-</script>
-
-{@render children()}
+<script lang="ts">
+    import {type TeraUiContextProps} from "./TeraUiContext";
+    import {setGlobalContext} from "./global-context";
+    import {setLanguageTag} from "../../paraglide/runtime";
+    import * as m from '../../paraglide/messages.js'
+
+
+    let {
+        children,
+        supportLanguages = ['en'],
+        language = 'en',
+        ...props
+    }: TeraUiContextProps = $props();
+
+
+    setGlobalContext({
+        supportLanguages,
+        language,
+        ...props
+    })
+
+    setLanguageTag(language)
+    console.log('setLanguageTag', language)
+    console.log('test translate', m.text_select_language())
+
+</script>
+
+{@render children()}

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,6 +1,6 @@
 {
   "name": "tera-system-ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",

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!`);