sh-ui-cli 0.22.2 → 0.23.0

package/templates/nextjs-standalone/src/shared/styles/tokens.css

@@ -0,0 +1,95 @@
+/* Generated by @sh-ui/tokens — do not edit directly */
+/* base=neutral radius=md mode=light-dark */
+
+/* sh-ui:theme-colors-start */
+:root {
+  --background: #FFFFFF;
+  --background-subtle: #FAFAFA;
+  --background-muted: #F5F5F5;
+  --background-inverse: #0A0A0A;
+  --foreground: #0A0A0A;
+  --foreground-muted: #525252;
+  --foreground-subtle: #A3A3A3;
+  --foreground-inverse: #FFFFFF;
+  --border: #E5E5E5;
+  --border-strong: #D4D4D4;
+  --primary: #171717;
+  --primary-foreground: #FAFAFA;
+  --primary-hover: #262626;
+  --danger: #DC2626;
+  --danger-foreground: #FFFFFF;
+}
+.dark {
+  --background: #0A0A0A;
+  --background-subtle: #171717;
+  --background-muted: #262626;
+  --background-inverse: #FFFFFF;
+  --foreground: #FAFAFA;
+  --foreground-muted: #A3A3A3;
+  --foreground-subtle: #737373;
+  --foreground-inverse: #0A0A0A;
+  --border: #262626;
+  --border-strong: #404040;
+  --primary: #FAFAFA;
+  --primary-foreground: #171717;
+  --primary-hover: #E5E5E5;
+  --danger: #DC2626;
+  --danger-foreground: #FFFFFF;
+}
+/* sh-ui:theme-colors-end */
+
+:root {
+  /* sh-ui:theme-radius-start */
+  --radius: 0.5rem;
+  /* sh-ui:theme-radius-end */
+  --space-0: 0px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 18px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+  --text-3xl: 30px;
+  --text-4xl: 36px;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --duration-fast: 120ms;
+  --duration-base: 160ms;
+  --duration-slow: 200ms;
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --control-sm: 32px;
+  --control-md: 40px;
+  --control-lg: 48px;
+  --border-width: 1px;
+  --border-width-strong: 2px;
+  --opacity-disabled: 0.5;
+  --z-base: 0;
+  --z-sticky: 100;
+  --z-dropdown: 200;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-popover: 500;
+  --z-toast: 600;
+  --z-tooltip: 700;
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1280px;
+}

package/templates/nextjs-standalone/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "moduleDetection": "force",
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "allowJs": true,
+    "jsx": "preserve",
+    "noEmit": true,
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "next.config.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/templates/nextjs-standalone/vitest.config.ts

@@ -0,0 +1,15 @@
+import path from 'node:path';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '.'),
+    },
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+  },
+});

package/templates/nextjs-standalone/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/templates/ui-app-template/eslint.config.js

@@ -0,0 +1,3 @@
+import { config } from "@workspace/eslint-config/react-internal"
+
+export default config

package/templates/ui-app-template/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@workspace/ui-app-name",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@base-ui-components/react": "latest",
+    "@workspace/ui-core": "workspace:*",
+    "lucide-react": "^0.575.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.56.4",
+    "sonner": "^2.0.7",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@workspace/eslint-config": "workspace:*",
+    "@workspace/typescript-config": "workspace:*",
+    "eslint": "^9.39.2",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./postcss.config": "./postcss.config.mjs",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
+  }
+}

package/templates/ui-app-template/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+    plugins: { "@tailwindcss/postcss": {} },
+};
+
+export default config;

package/templates/ui-app-template/sh-ui.config.json

@@ -0,0 +1,14 @@
+{
+  "platform": "react",
+  "style": "default",
+  "theme": {
+    "base": "neutral",
+    "radius": "md",
+    "mode": "light-dark"
+  },
+  "paths": {
+    "tokens": "src/styles/tokens.css",
+    "components": "src/components",
+    "utils": "src/lib/utils.ts"
+  }
+}

package/templates/ui-app-template/src/styles/globals.css

@@ -0,0 +1,37 @@
+@import 'tailwindcss';
+
+@source "../../../../../apps/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+@import './tokens.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-background-subtle: var(--background-subtle);
+  --color-background-muted: var(--background-muted);
+  --color-background-inverse: var(--background-inverse);
+  --color-foreground: var(--foreground);
+  --color-foreground-muted: var(--foreground-muted);
+  --color-foreground-subtle: var(--foreground-subtle);
+  --color-foreground-inverse: var(--foreground-inverse);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 2px);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  body {
+    background: var(--background);
+    color: var(--foreground);
+  }
+}

package/templates/ui-app-template/src/styles/tokens.css

@@ -0,0 +1,95 @@
+/* Generated by @sh-ui/tokens — do not edit directly */
+/* base=neutral radius=md mode=light-dark */
+
+/* sh-ui:theme-colors-start */
+:root {
+  --background: #FFFFFF;
+  --background-subtle: #FAFAFA;
+  --background-muted: #F5F5F5;
+  --background-inverse: #0A0A0A;
+  --foreground: #0A0A0A;
+  --foreground-muted: #525252;
+  --foreground-subtle: #A3A3A3;
+  --foreground-inverse: #FFFFFF;
+  --border: #E5E5E5;
+  --border-strong: #D4D4D4;
+  --primary: #171717;
+  --primary-foreground: #FAFAFA;
+  --primary-hover: #262626;
+  --danger: #DC2626;
+  --danger-foreground: #FFFFFF;
+}
+.dark {
+  --background: #0A0A0A;
+  --background-subtle: #171717;
+  --background-muted: #262626;
+  --background-inverse: #FFFFFF;
+  --foreground: #FAFAFA;
+  --foreground-muted: #A3A3A3;
+  --foreground-subtle: #737373;
+  --foreground-inverse: #0A0A0A;
+  --border: #262626;
+  --border-strong: #404040;
+  --primary: #FAFAFA;
+  --primary-foreground: #171717;
+  --primary-hover: #E5E5E5;
+  --danger: #DC2626;
+  --danger-foreground: #FFFFFF;
+}
+/* sh-ui:theme-colors-end */
+
+:root {
+  /* sh-ui:theme-radius-start */
+  --radius: 0.5rem;
+  /* sh-ui:theme-radius-end */
+  --space-0: 0px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 18px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+  --text-3xl: 30px;
+  --text-4xl: 36px;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --duration-fast: 120ms;
+  --duration-base: 160ms;
+  --duration-slow: 200ms;
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --control-sm: 32px;
+  --control-md: 40px;
+  --control-lg: 48px;
+  --border-width: 1px;
+  --border-width-strong: 2px;
+  --opacity-disabled: 0.5;
+  --z-base: 0;
+  --z-sticky: 100;
+  --z-dropdown: 200;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-popover: 500;
+  --z-toast: 600;
+  --z-tooltip: 700;
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1280px;
+}

package/templates/ui-app-template/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@workspace/typescript-config/react-library.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@workspace/ui-app-name/*": ["./src/*"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}