tera-system-ui 0.0.1 → 0.0.3

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

@@ -0,0 +1,174 @@
+@import "scrollbar.scss";
+
+
+:root {
+    --border-radius-base: 0.25rem;
+    --border-radius-container: 0.5rem;
+    --tw---alias-color-primary-50: 215 90 96;
+    --tw---alias-color-primary-100: 217 91 87;
+    --tw---alias-color-primary-200: 217 91 82;
+    --tw---alias-color-primary-300: 217 91 73;
+    --tw---alias-color-primary-400: 217 91 68;
+    --tw---alias-color-primary-500: 217 91 60;
+    --tw---alias-color-primary-600: 217 73 55;
+    --tw---alias-color-primary-700: 217 61 43;
+    --tw---alias-color-primary-800: 217 62 33;
+    --tw---alias-color-primary-900: 217 61 25;
+    --tw---alias-color-error-50: 0 81 96;
+    --tw---alias-color-error-100: 0 84 88;
+    --tw---alias-color-error-200: 0 85 82;
+    --tw---alias-color-error-300: 0 84 73;
+    --tw---alias-color-error-400: 0 84 68;
+    --tw---alias-color-error-500: 0 84 60;
+    --tw---alias-color-error-600: 0 67 55;
+    --tw---alias-color-error-700: 0 56 43;
+    --tw---alias-color-error-800: 0 56 33;
+    --tw---alias-color-error-900: 0 55 25;
+    --tw---alias-color-success-50: 143 57 95;
+    --tw---alias-color-success-100: 142 59 83;
+    --tw---alias-color-success-200: 142 58 75;
+    --tw---alias-color-success-300: 142 58 63;
+    --tw---alias-color-success-400: 142 59 56;
+    --tw---alias-color-success-500: 142 71 45;
+    --tw---alias-color-success-600: 142 70 41;
+    --tw---alias-color-success-700: 142 71 32;
+    --tw---alias-color-success-800: 142 70 25;
+    --tw---alias-color-success-900: 142 71 19;
+    --tw---alias-color-neutral-1: 0 0 100;
+    --tw---alias-color-neutral-2: 0 0 99;
+    --tw---alias-color-neutral-3: 0 0 96;
+    --tw---alias-color-neutral-4: 0 0 94;
+    --tw---alias-color-neutral-5: 0 0 85;
+    --tw---alias-color-neutral-6: 0 0 75;
+    --tw---alias-color-neutral-7: 0 0 55;
+    --tw---alias-color-neutral-8: 0 0 35;
+    --tw---alias-color-neutral-9: 0 0 27;
+    --tw---alias-color-neutral-10: 0 0 15;
+    --tw---alias-color-neutral-11: 0 0 12;
+    --tw---alias-color-neutral-12: 0 0 8;
+    --tw---alias-color-neutral-13: 0 0 0;
+    --tw---alias-color-warning-50: 25 92 95;
+    --tw---alias-color-warning-100: 25 95 85;
+    --tw---alias-color-warning-200: 25 95 78;
+    --tw---alias-color-warning-300: 24 95 69;
+    --tw---alias-color-warning-400: 25 95 63;
+    --tw---alias-color-warning-500: 25 95 53;
+    --tw---alias-color-warning-600: 25 84 48;
+    --tw---alias-color-warning-700: 25 83 38;
+    --tw---alias-color-warning-800: 24 84 29;
+    --tw---alias-color-warning-900: 24 84 22;
+    --tw---alias-color-information-50: 215 90 96;
+    --tw---alias-color-information-100: 217 91 87;
+    --tw---alias-color-information-200: 217 91 82;
+    --tw---alias-color-information-300: 217 91 73;
+    --tw---alias-color-information-400: 217 91 68;
+    --tw---alias-color-information-500: 217 91 60;
+    --tw---alias-color-information-600: 217 73 55;
+    --tw---alias-color-information-700: 217 61 43;
+    --tw---alias-color-information-800: 217 62 33;
+    --tw---alias-color-information-900: 217 61 25;
+    --tw---alias-color-secondary-50: 330 80 96;
+    --tw---alias-color-secondary-100: 331 81 88;
+    --tw---alias-color-secondary-200: 330 81 82;
+    --tw---alias-color-secondary-300: 330 81 73;
+    --tw---alias-color-secondary-400: 331 81 68;
+    --tw---alias-color-secondary-500: 330 81 60;
+    --tw---alias-color-secondary-600: 331 65 55;
+    --tw---alias-color-secondary-700: 330 53 43;
+    --tw---alias-color-secondary-800: 331 53 33;
+    --tw---alias-color-secondary-900: 330 53 25;
+    --tw---alias-color-brand-500: 212 100 47;
+    --tw---token-color-brand-token-5: 212 100 47;
+    --tw---token-color-neutral-token-1: 0 0 100;
+    --tw---token-color-neutral-token-2: 0 0 99;
+    --tw---token-color-neutral-token-3: 0 0 96;
+    --tw---token-color-neutral-token-4: 0 0 94;
+    --tw---token-color-neutral-token-5: 0 0 85;
+    --tw---token-color-neutral-token-6: 0 0 75;
+    --tw---token-color-neutral-token-7: 0 0 55;
+    --tw---token-color-neutral-token-8: 0 0 35;
+    --tw---token-color-neutral-token-9: 0 0 27;
+    --tw---token-color-neutral-token-10: 0 0 15;
+    --tw---token-color-neutral-token-11: 0 0 12;
+    --tw---token-color-neutral-token-12: 0 0 8;
+    --tw---token-color-neutral-token-13: 0 0 0;
+    --tw---token-color-primary-token-1: 215 90 96;
+    --tw---token-color-primary-token-2: 217 91 87;
+    --tw---token-color-primary-token-3: 217 91 82;
+    --tw---token-color-primary-token-4: 217 91 73;
+    --tw---token-color-primary-token-5: 217 91 68;
+    --tw---token-color-primary-token-6: 217 91 60;
+    --tw---token-color-primary-token-7: 217 73 55;
+    --tw---token-color-primary-token-8: 217 61 43;
+    --tw---token-color-primary-token-9: 217 62 33;
+    --tw---token-color-primary-token-10: 217 61 25;
+}
+
+
+
+:root.dark {
+    --tw---token-color-brand-token-5: 212 100 47;
+    --tw---token-color-neutral-token-1: 0 0 0;
+    --tw---token-color-neutral-token-2: 0 0 8;
+    --tw---token-color-neutral-token-3: 0 0 12;
+    --tw---token-color-neutral-token-4: 0 0 15;
+    --tw---token-color-neutral-token-5: 0 0 27;
+    --tw---token-color-neutral-token-6: 0 0 35;
+    --tw---token-color-neutral-token-7: 0 0 55;
+    --tw---token-color-neutral-token-8: 0 0 75;
+    --tw---token-color-neutral-token-9: 0 0 85;
+    --tw---token-color-neutral-token-10: 0 0 94;
+    --tw---token-color-neutral-token-11: 0 0 96;
+    --tw---token-color-neutral-token-12: 0 0 99;
+    --tw---token-color-neutral-token-13: 0 0 100;
+    --tw---token-color-primary-token-1: 217 61 25;
+    --tw---token-color-primary-token-2: 217 62 33;
+    --tw---token-color-primary-token-3: 217 61 43;
+    --tw---token-color-primary-token-4: 217 73 55;
+    --tw---token-color-primary-token-5: 217 91 60;
+    --tw---token-color-primary-token-6: 217 91 68;
+    --tw---token-color-primary-token-7: 217 91 73;
+    --tw---token-color-primary-token-8: 217 91 82;
+    --tw---token-color-primary-token-9: 217 91 87;
+    --tw---token-color-primary-token-10: 215 90 96;
+}
+
+
+
+/* Base responsive variable */
+:root {
+    --header-height: 3rem;
+}
+
+@media (min-width: theme(screens.md)) {
+    :root {
+        --header-height: 3.5rem;
+    }
+}
+
+@media (min-width: theme(screens.lg)) {
+    :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/dist/themes/tw-preset.cjs

@@ -0,0 +1,151 @@
+module.exports = {
+    theme: {
+        extend: {
+            colors: {
+                primary: {
+                    50: 'hsl(var(--tw---alias-color-primary-50))',
+                    100: 'hsl(var(--tw---alias-color-primary-100))',
+                    200: 'hsl(var(--tw---alias-color-primary-200))',
+                    300: 'hsl(var(--tw---alias-color-primary-300))',
+                    400: 'hsl(var(--tw---alias-color-primary-400))',
+                    500: 'hsl(var(--tw---alias-color-primary-500))',
+                    600: 'hsl(var(--tw---alias-color-primary-600))',
+                    700: 'hsl(var(--tw---alias-color-primary-700))',
+                    800: 'hsl(var(--tw---alias-color-primary-800))',
+                    900: 'hsl(var(--tw---alias-color-primary-900))',
+                    token: {
+                        1: 'hsl(var(--tw---token-color-primary-token-1))',
+                        2: 'hsl(var(--tw---token-color-primary-token-2))',
+                        3: 'hsl(var(--tw---token-color-primary-token-3))',
+                        4: 'hsl(var(--tw---token-color-primary-token-4))',
+                        5: 'hsl(var(--tw---token-color-primary-token-5))',
+                        6: 'hsl(var(--tw---token-color-primary-token-6))',
+                        7: 'hsl(var(--tw---token-color-primary-token-7))',
+                        8: 'hsl(var(--tw---token-color-primary-token-8))',
+                        9: 'hsl(var(--tw---token-color-primary-token-9))',
+                        10: 'hsl(var(--tw---token-color-primary-token-10))'
+                    }
+                },
+                error: {
+                    50: 'hsl(var(--tw---alias-color-error-50))',
+                    100: 'hsl(var(--tw---alias-color-error-100))',
+                    200: 'hsl(var(--tw---alias-color-error-200))',
+                    300: 'hsl(var(--tw---alias-color-error-300))',
+                    400: 'hsl(var(--tw---alias-color-error-400))',
+                    500: 'hsl(var(--tw---alias-color-error-500))',
+                    600: 'hsl(var(--tw---alias-color-error-600))',
+                    700: 'hsl(var(--tw---alias-color-error-700))',
+                    800: 'hsl(var(--tw---alias-color-error-800))',
+                    900: 'hsl(var(--tw---alias-color-error-900))'
+                },
+                success: {
+                    50: 'hsl(var(--tw---alias-color-success-50))',
+                    100: 'hsl(var(--tw---alias-color-success-100))',
+                    200: 'hsl(var(--tw---alias-color-success-200))',
+                    300: 'hsl(var(--tw---alias-color-success-300))',
+                    400: 'hsl(var(--tw---alias-color-success-400))',
+                    500: 'hsl(var(--tw---alias-color-success-500))',
+                    600: 'hsl(var(--tw---alias-color-success-600))',
+                    700: 'hsl(var(--tw---alias-color-success-700))',
+                    800: 'hsl(var(--tw---alias-color-success-800))',
+                    900: 'hsl(var(--tw---alias-color-success-900))'
+                },
+                neutral: {
+                    1: 'hsl(var(--tw---alias-color-neutral-1))',
+                    2: 'hsl(var(--tw---alias-color-neutral-2))',
+                    3: 'hsl(var(--tw---alias-color-neutral-3))',
+                    4: 'hsl(var(--tw---alias-color-neutral-4))',
+                    5: 'hsl(var(--tw---alias-color-neutral-5))',
+                    6: 'hsl(var(--tw---alias-color-neutral-6))',
+                    7: 'hsl(var(--tw---alias-color-neutral-7))',
+                    8: 'hsl(var(--tw---alias-color-neutral-8))',
+                    9: 'hsl(var(--tw---alias-color-neutral-9))',
+                    10: 'hsl(var(--tw---alias-color-neutral-10))',
+                    11: 'hsl(var(--tw---alias-color-neutral-11))',
+                    12: 'hsl(var(--tw---alias-color-neutral-12))',
+                    13: 'hsl(var(--tw---alias-color-neutral-13))',
+                    token: {
+                        1: 'hsl(var(--tw---token-color-neutral-token-1))',
+                        2: 'hsl(var(--tw---token-color-neutral-token-2))',
+                        3: 'hsl(var(--tw---token-color-neutral-token-3))',
+                        4: 'hsl(var(--tw---token-color-neutral-token-4))',
+                        5: 'hsl(var(--tw---token-color-neutral-token-5))',
+                        6: 'hsl(var(--tw---token-color-neutral-token-6))',
+                        7: 'hsl(var(--tw---token-color-neutral-token-7))',
+                        8: 'hsl(var(--tw---token-color-neutral-token-8))',
+                        9: 'hsl(var(--tw---token-color-neutral-token-9))',
+                        10: 'hsl(var(--tw---token-color-neutral-token-10))',
+                        11: 'hsl(var(--tw---token-color-neutral-token-11))',
+                        12: 'hsl(var(--tw---token-color-neutral-token-12))',
+                        13: 'hsl(var(--tw---token-color-neutral-token-13))'
+                    }
+                },
+                warning: {
+                    50: 'hsl(var(--tw---alias-color-warning-50))',
+                    100: 'hsl(var(--tw---alias-color-warning-100))',
+                    200: 'hsl(var(--tw---alias-color-warning-200))',
+                    300: 'hsl(var(--tw---alias-color-warning-300))',
+                    400: 'hsl(var(--tw---alias-color-warning-400))',
+                    500: 'hsl(var(--tw---alias-color-warning-500))',
+                    600: 'hsl(var(--tw---alias-color-warning-600))',
+                    700: 'hsl(var(--tw---alias-color-warning-700))',
+                    800: 'hsl(var(--tw---alias-color-warning-800))',
+                    900: 'hsl(var(--tw---alias-color-warning-900))'
+                },
+                information: {
+                    50: 'hsl(var(--tw---alias-color-information-50))',
+                    100: 'hsl(var(--tw---alias-color-information-100))',
+                    200: 'hsl(var(--tw---alias-color-information-200))',
+                    300: 'hsl(var(--tw---alias-color-information-300))',
+                    400: 'hsl(var(--tw---alias-color-information-400))',
+                    500: 'hsl(var(--tw---alias-color-information-500))',
+                    600: 'hsl(var(--tw---alias-color-information-600))',
+                    700: 'hsl(var(--tw---alias-color-information-700))',
+                    800: 'hsl(var(--tw---alias-color-information-800))',
+                    900: 'hsl(var(--tw---alias-color-information-900))'
+                },
+                secondary: {
+                    50: 'hsl(var(--tw---alias-color-secondary-50))',
+                    100: 'hsl(var(--tw---alias-color-secondary-100))',
+                    200: 'hsl(var(--tw---alias-color-secondary-200))',
+                    300: 'hsl(var(--tw---alias-color-secondary-300))',
+                    400: 'hsl(var(--tw---alias-color-secondary-400))',
+                    500: 'hsl(var(--tw---alias-color-secondary-500))',
+                    600: 'hsl(var(--tw---alias-color-secondary-600))',
+                    700: 'hsl(var(--tw---alias-color-secondary-700))',
+                    800: 'hsl(var(--tw---alias-color-secondary-800))',
+                    900: 'hsl(var(--tw---alias-color-secondary-900))'
+                },
+                brand: {
+                    500: 'hsl(var(--tw---alias-color-brand-500))',
+                    token: {
+                        5: 'hsl(var(--tw---token-color-brand-token-5))'
+                    }
+                }
+            },
+            spacing: {
+                "icon-xs": '1.25rem',
+                "icon-sm": '1.5rem',
+                "icon-md": '1.75rem',
+                "icon-lg": '2rem',
+                "icon-xl": '2.25rem',
+                "icon-2xl": '2.5rem',
+                "header-height": 'var(--header-height)'
+            },
+            borderWidth: {
+                base: '1px',
+                large: '2px'
+            },
+            stroke: {
+                icon: '1.5rem'
+            },
+            borderRadius: {
+                DEFAULT: 'var(--border-radius-base)',
+                container: 'var(--border-radius-container)'
+            },
+            transitionDuration: {
+                "element-react": '350ms'
+            }
+        }
+    }
+};

package/dist/themes/tw-preset.d.cts

@@ -0,0 +1,149 @@
+export namespace theme {
+    namespace extend {
+        namespace colors {
+            let primary: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+                token: {
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                    5: string;
+                    6: string;
+                    7: string;
+                    8: string;
+                    9: string;
+                    10: string;
+                };
+            };
+            let error: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            let success: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            let neutral: {
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                9: string;
+                10: string;
+                11: string;
+                12: string;
+                13: string;
+                token: {
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                    5: string;
+                    6: string;
+                    7: string;
+                    8: string;
+                    9: string;
+                    10: string;
+                    11: string;
+                    12: string;
+                    13: string;
+                };
+            };
+            let warning: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            let information: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            let secondary: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            let brand: {
+                500: string;
+                token: {
+                    5: string;
+                };
+            };
+        }
+        let spacing: {
+            "icon-xs": string;
+            "icon-sm": string;
+            "icon-md": string;
+            "icon-lg": string;
+            "icon-xl": string;
+            "icon-2xl": string;
+            "header-height": string;
+        };
+        namespace borderWidth {
+            let base: string;
+            let large: string;
+        }
+        namespace stroke {
+            let icon: string;
+        }
+        namespace borderRadius {
+            let DEFAULT: string;
+            let container: string;
+        }
+        let transitionDuration: {
+            "element-react": string;
+        };
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tera-system-ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "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",
@@ -29,14 +30,33 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    }
+      "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": "^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",
@@ -48,24 +68,26 @@
     "@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"
   }
 }