@cystackapp/ui 1.4.0

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,8 @@
+import { clsx as o } from "../node_modules/clsx/dist/clsx.js";
+import { twMerge as t } from "../node_modules/tailwind-merge/dist/bundle-mjs.js";
+function n(...r) {
+  return t(o(...r));
+}
+export {
+  n as cn
+};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@cystackapp/ui",
+  "version": "1.4.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./theme.css": "./theme.css"
+  },
+  "files": [
+    "dist",
+    "theme.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit --pretty",
+    "storybook": "storybook dev -p 6007",
+    "test": "vitest run --passWithNoTests && playwright test -c playwright-ct.config.ts",
+    "test:component": "playwright test -c playwright-ct.config.ts",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "i18n": "node ../../scripts/generate-i18n.mjs",
+    "i18n:check": "node ../../scripts/check-i18n-keys.mjs"
+  },
+  "peerDependencies": {
+    "@untitled-ui/icons-react": "^0.1.4",
+    "i18next": "23.7.7",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-i18next": "^15.0.0",
+    "react-router-dom": "^6.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@platform-dash/eslint-config": "*",
+    "eslint": "^10.0.3",
+    "@playwright/experimental-ct-react": "^1.59.1",
+    "@storybook/addon-essentials": "^8.6.18",
+    "@storybook/react": "^8.6.18",
+    "@storybook/react-vite": "^8.6.18",
+    "@storybook/test": "^8.6.18",
+    "@tailwindcss/vite": "~4.1",
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.2.14",
+    "@vitejs/plugin-react": "^5",
+    "picocolors": "^1.1.1",
+    "storybook": "^8.6.18",
+    "tailwindcss": "~4.1",
+    "typescript": "~5.9",
+    "vite": "^6",
+    "vite-plugin-dts": "^4",
+    "vite-plugin-svgr": "^4",
+    "vitest": "^4.1.0"
+  }
+}

package/theme.css

@@ -0,0 +1,358 @@
+@source "./src";
+
+@layer base {
+  button {
+    cursor: pointer;
+  }
+
+  button:disabled {
+    cursor: auto;
+  }
+}
+
+@theme {
+  --color-white: #ffffff;
+
+  /* Gray */
+  --color-gray-v2-25: #fdfdfd;
+  --color-gray-v2-50: #fafafa;
+  --color-gray-v2-100: #f5f5f5;
+  --color-gray-v2-200: #e9eaeb;
+  --color-gray-v2-300: #d5d7da;
+  --color-gray-v2-400: #a4a7ae;
+  --color-gray-v2-500: #717680;
+  --color-gray-v2-600: #535862;
+  --color-gray-v2-700: #414651;
+  --color-gray-v2-800: #252b37;
+  --color-gray-v2-900: #181d27;
+  --color-gray-v2-950: #0a0d12;
+  --color-gray-v2: #717680;
+
+  /* Brand */
+  --color-brand-v2-25: #f5f8ff;
+  --color-brand-v2-50: #eff4ff;
+  --color-brand-v2-100: #d1e0ff;
+  --color-brand-v2-200: #b2ccff;
+  --color-brand-v2-300: #84adff;
+  --color-brand-v2-400: #528bff;
+  --color-brand-v2-500: #2970ff;
+  --color-brand-v2-600: #155eef;
+  --color-brand-v2-700: #004eeb;
+  --color-brand-v2-800: #0040c1;
+  --color-brand-v2-900: #00359e;
+  --color-brand-v2-950: #002266;
+  --color-brand-v2: #2970ff;
+
+  /* Error */
+  --color-error-v2-25: #fffbfa;
+  --color-error-v2-50: #fef3f2;
+  --color-error-v2-100: #fee4e2;
+  --color-error-v2-200: #fecdca;
+  --color-error-v2-300: #fda29b;
+  --color-error-v2-400: #f97066;
+  --color-error-v2-500: #f04438;
+  --color-error-v2-600: #d92d20;
+  --color-error-v2-700: #b42318;
+  --color-error-v2-800: #912018;
+  --color-error-v2-900: #7a271a;
+  --color-error-v2-950: #55160c;
+  --color-error-v2: #f04438;
+
+  /* Warning */
+  --color-warning-v2-25: #fffcf5;
+  --color-warning-v2-50: #fffaeb;
+  --color-warning-v2-100: #fef0c7;
+  --color-warning-v2-200: #fedf89;
+  --color-warning-v2-300: #fec84b;
+  --color-warning-v2-400: #fdb022;
+  --color-warning-v2-500: #f79009;
+  --color-warning-v2-600: #dc6803;
+  --color-warning-v2-700: #b54708;
+  --color-warning-v2-800: #93370d;
+  --color-warning-v2-900: #7a2e0e;
+  --color-warning-v2-950: #4e1d09;
+  --color-warning-v2: #f79009;
+
+  /* Success */
+  --color-success-v2-25: #f6fef9;
+  --color-success-v2-50: #ecfdf3;
+  --color-success-v2-100: #dcfae6;
+  --color-success-v2-200: #a9efc5;
+  --color-success-v2-300: #75e0a7;
+  --color-success-v2-400: #47cd89;
+  --color-success-v2-500: #17b26a;
+  --color-success-v2-600: #079455;
+  --color-success-v2-700: #067647;
+  --color-success-v2-800: #085d3a;
+  --color-success-v2-900: #074d31;
+  --color-success-v2-950: #053321;
+  --color-success-v2: #17b26a;
+
+  /* Gray Blue */
+  --color-gray-blue-v2-25: #fcfcfd;
+  --color-gray-blue-v2-50: #f8f9fc;
+  --color-gray-blue-v2-100: #eaecf5;
+  --color-gray-blue-v2-200: #d5d9eb;
+  --color-gray-blue-v2-300: #b3b8db;
+  --color-gray-blue-v2-400: #717bbc;
+  --color-gray-blue-v2-500: #4e5ba6;
+  --color-gray-blue-v2-600: #3e4784;
+  --color-gray-blue-v2-700: #363f72;
+  --color-gray-blue-v2-800: #293056;
+  --color-gray-blue-v2-900: #101323;
+  --color-gray-blue-v2-950: #0d0f1c;
+  --color-gray-blue-v2: #4e5ba6;
+
+  /* Green Light */
+  --color-green-light-v2-25: #fafef5;
+  --color-green-light-v2-50: #f3fee7;
+  --color-green-light-v2-100: #e4fbcc;
+  --color-green-light-v2-200: #d0f8ab;
+  --color-green-light-v2-300: #a6ef67;
+  --color-green-light-v2-400: #85e13a;
+  --color-green-light-v2-500: #66c61c;
+  --color-green-light-v2-600: #4ca30d;
+  --color-green-light-v2-700: #3b7c0f;
+  --color-green-light-v2-800: #326212;
+  --color-green-light-v2-900: #2b5314;
+  --color-green-light-v2-950: #15290a;
+  --color-green-light-v2: #66c61c;
+
+  /* Green */
+  --color-green-v2-25: #f6fef9;
+  --color-green-v2-50: #edfcf2;
+  --color-green-v2-100: #d3f8df;
+  --color-green-v2-200: #aaf0c4;
+  --color-green-v2-300: #73e2a3;
+  --color-green-v2-400: #3ccb7f;
+  --color-green-v2-500: #16b364;
+  --color-green-v2-600: #099250;
+  --color-green-v2-700: #087443;
+  --color-green-v2-800: #095c37;
+  --color-green-v2-900: #084c2e;
+  --color-green-v2-950: #052e1c;
+  --color-green-v2: #16b364;
+
+  /* Teal */
+  --color-teal-v2-25: #f6fefc;
+  --color-teal-v2-50: #f0fdf9;
+  --color-teal-v2-100: #ccfbef;
+  --color-teal-v2-200: #99f6e0;
+  --color-teal-v2-300: #5fe9d0;
+  --color-teal-v2-400: #2ed3b7;
+  --color-teal-v2-500: #15b79e;
+  --color-teal-v2-600: #0e9384;
+  --color-teal-v2-700: #107569;
+  --color-teal-v2-800: #125d56;
+  --color-teal-v2-900: #134e48;
+  --color-teal-v2-950: #0a2926;
+  --color-teal-v2: #15b79e;
+
+  /* Blue Light */
+  --color-blue-light-v2-25: #f5fbff;
+  --color-blue-light-v2-50: #f0f9ff;
+  --color-blue-light-v2-100: #e0f2fe;
+  --color-blue-light-v2-200: #b9e6fe;
+  --color-blue-light-v2-300: #7cd4fd;
+  --color-blue-light-v2-400: #36bffa;
+  --color-blue-light-v2-500: #0ba5ec;
+  --color-blue-light-v2-600: #0086c9;
+  --color-blue-light-v2-700: #026aa2;
+  --color-blue-light-v2-800: #065986;
+  --color-blue-light-v2-900: #0b4a6f;
+  --color-blue-light-v2-950: #062c41;
+  --color-blue-light-v2: #0ba5ec;
+
+  /* Blue */
+  --color-blue-v2-25: #f5faff;
+  --color-blue-v2-50: #eff8ff;
+  --color-blue-v2-100: #d1e9ff;
+  --color-blue-v2-200: #b2ddff;
+  --color-blue-v2-300: #84caff;
+  --color-blue-v2-400: #53b1fd;
+  --color-blue-v2-500: #2e90fa;
+  --color-blue-v2-600: #1570ef;
+  --color-blue-v2-700: #175cd3;
+  --color-blue-v2-800: #1849a9;
+  --color-blue-v2-900: #194185;
+  --color-blue-v2-950: #102a56;
+  --color-blue-v2: #2e90fa;
+
+  /* Blue Dark */
+  --color-blue-dark-v2-25: #f5f8ff;
+  --color-blue-dark-v2-50: #eff4ff;
+  --color-blue-dark-v2-100: #d1e0ff;
+  --color-blue-dark-v2-200: #b2ccff;
+  --color-blue-dark-v2-300: #84adff;
+  --color-blue-dark-v2-400: #528bff;
+  --color-blue-dark-v2-500: #2970ff;
+  --color-blue-dark-v2-600: #155eef;
+  --color-blue-dark-v2-700: #004eeb;
+  --color-blue-dark-v2-800: #0040c1;
+  --color-blue-dark-v2-900: #00359e;
+  --color-blue-dark-v2-950: #002266;
+  --color-blue-dark-v2: #2970ff;
+
+  /* Indigo */
+  --color-indigo-v2-25: #f5f8ff;
+  --color-indigo-v2-50: #eef4ff;
+  --color-indigo-v2-100: #e0eaff;
+  --color-indigo-v2-200: #c7d7fe;
+  --color-indigo-v2-300: #a4bcfd;
+  --color-indigo-v2-400: #8098f9;
+  --color-indigo-v2-500: #6172f3;
+  --color-indigo-v2-600: #444ce7;
+  --color-indigo-v2-700: #3538cd;
+  --color-indigo-v2-800: #2d31a6;
+  --color-indigo-v2-900: #2d3282;
+  --color-indigo-v2-950: #1f235b;
+  --color-indigo-v2: #6172f3;
+
+  /* Purple */
+  --color-purple-v2-25: #fafaff;
+  --color-purple-v2-50: #f4f3ff;
+  --color-purple-v2-100: #ebe9fe;
+  --color-purple-v2-200: #d9d6fe;
+  --color-purple-v2-300: #bdb4fe;
+  --color-purple-v2-400: #9b8afb;
+  --color-purple-v2-500: #7a5af8;
+  --color-purple-v2-600: #6938ef;
+  --color-purple-v2-700: #5925dc;
+  --color-purple-v2-800: #4a1fb8;
+  --color-purple-v2-900: #3e1c96;
+  --color-purple-v2-950: #27115f;
+  --color-purple-v2: #7a5af8;
+
+  /* Pink */
+  --color-pink-v2-25: #fef6fb;
+  --color-pink-v2-50: #fdf2fa;
+  --color-pink-v2-100: #fce7f6;
+  --color-pink-v2-200: #fcceee;
+  --color-pink-v2-300: #faa7e0;
+  --color-pink-v2-400: #f670c7;
+  --color-pink-v2-500: #ee46bc;
+  --color-pink-v2-600: #dd2590;
+  --color-pink-v2-700: #c11574;
+  --color-pink-v2-800: #9e165f;
+  --color-pink-v2-900: #851651;
+  --color-pink-v2-950: #4e0d30;
+  --color-pink-v2: #ee46bc;
+
+  /* Rose */
+  --color-rose-v2-25: #fff5f6;
+  --color-rose-v2-50: #fff1f3;
+  --color-rose-v2-100: #ffe4e8;
+  --color-rose-v2-200: #fecdd6;
+  --color-rose-v2-300: #fea3b4;
+  --color-rose-v2-400: #fd6f8e;
+  --color-rose-v2-500: #f63d68;
+  --color-rose-v2-600: #e31b54;
+  --color-rose-v2-700: #c01048;
+  --color-rose-v2-800: #a11043;
+  --color-rose-v2-900: #89123e;
+  --color-rose-v2-950: #510b24;
+  --color-rose-v2: #f63d68;
+
+  /* Orange */
+  --color-orange-v2-25: #fefaf5;
+  --color-orange-v2-50: #fef6ee;
+  --color-orange-v2-100: #fdead7;
+  --color-orange-v2-200: #f9dbaf;
+  --color-orange-v2-300: #f7b27a;
+  --color-orange-v2-400: #f38744;
+  --color-orange-v2-500: #ef6820;
+  --color-orange-v2-600: #e04f16;
+  --color-orange-v2-700: #b93815;
+  --color-orange-v2-800: #932f19;
+  --color-orange-v2-900: #772917;
+  --color-orange-v2-950: #511c10;
+  --color-orange-v2: #ef6820;
+
+  /* Orange Dark */
+  --color-orange-dark-v2-25: #fff9f5;
+  --color-orange-dark-v2-50: #fff4ed;
+  --color-orange-dark-v2-100: #ffe6d5;
+  --color-orange-dark-v2-200: #ffd6ae;
+  --color-orange-dark-v2-300: #ff9c66;
+  --color-orange-dark-v2-400: #ff692e;
+  --color-orange-dark-v2-500: #ff4405;
+  --color-orange-dark-v2-600: #e62e05;
+  --color-orange-dark-v2-700: #bc1b06;
+  --color-orange-dark-v2-800: #97180c;
+  --color-orange-dark-v2-900: #771a0d;
+  --color-orange-dark-v2-950: #57130a;
+  --color-orange-dark-v2: #ff4405;
+
+  /* Yellow */
+  --color-yellow-v2-25: #fefdf0;
+  --color-yellow-v2-50: #fefbe8;
+  --color-yellow-v2-100: #fef7c3;
+  --color-yellow-v2-200: #feee95;
+  --color-yellow-v2-300: #fde272;
+  --color-yellow-v2-400: #fac515;
+  --color-yellow-v2-500: #eaaa08;
+  --color-yellow-v2-600: #ca8504;
+  --color-yellow-v2-700: #a15c07;
+  --color-yellow-v2-800: #854a0e;
+  --color-yellow-v2-900: #713b12;
+  --color-yellow-v2-950: #542c0d;
+  --color-yellow-v2: #eaaa08;
+
+  /* Typography */
+  --text-display-2xl: 4.5rem;
+  --text-display-2xl--line-height: 5.625rem;
+  --text-display-2xl--letter-spacing: -0.02em;
+  --text-display-xl: 3.75rem;
+  --text-display-xl--line-height: 4.5rem;
+  --text-display-xl--letter-spacing: -0.02em;
+  --text-display-lg: 3rem;
+  --text-display-lg--line-height: 3.75rem;
+  --text-display-lg--letter-spacing: -0.02em;
+  --text-display-md: 2.25rem;
+  --text-display-md--line-height: 2.75rem;
+  --text-display-md--letter-spacing: -0.02em;
+  --text-display-sm: 1.875rem;
+  --text-display-sm--line-height: 2.375rem;
+  --text-display-xs: 1.5rem;
+  --text-display-xs--line-height: 2rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.875rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-md: 1rem;
+  --text-md--line-height: 1.5rem;
+  --text-md-body: 1rem;
+  --text-md-body--line-height: 2rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1.125rem;
+
+  --font-mono: Courier New, source-code-pro, Menlo, Monaco, Consolas, monospace;
+
+  --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
+  --shadow-sm-01: 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
+  --shadow-sm-02: 0px 1px 3px rgba(10, 13, 18, 0.1);
+}
+
+@keyframes pseudo-rotate {
+  0% {
+    opacity: 1;
+  }
+
+  20% {
+    opacity: 0.9;
+  }
+
+  70% {
+    opacity: 0.1;
+  }
+
+  90% {
+    opacity: 0;
+  }
+}
+
+@utility animate-pseudo-rotate {
+  animation: pseudo-rotate 1s ease-in infinite;
+}