@tosui/react 0.1.0 → 0.1.2

package/dist/styles/styles.css

@@ -0,0 +1,353 @@
+:root {
+  /* === LIGHT MODE === */
+
+  /* Surface & Text Colors */
+  --t-light-foreground: #000000;
+  --t-light-foreground-muted: #374151;
+  --t-light-foreground-subtle: #6b7280;
+  --t-light-foreground-inverted: #ffffff;
+  --t-light-foreground-inverted-muted: #d1d5db;
+  --t-light-foreground-inverted-subtle: #9ca3af;
+  --t-light-border: #d1d5db;
+  --t-light-border-muted: #e5e7eb;
+  --t-light-background: #ffffff;
+  --t-light-surface: #f9fafb;
+
+  /* Brand Colors - Primary */
+  --t-light-primary-default: #2563eb;
+  --t-light-primary-emphasis: #1d4ed8;
+  --t-light-primary-subtle: #dbeafe;
+
+  /* Brand Colors - Accent */
+  --t-light-accent-default: #7c3aed;
+  --t-light-accent-emphasis: #6d28d9;
+  --t-light-accent-subtle: #ede9fe;
+
+  /* Semantic/Feedback - Success */
+  --t-light-success-default: #16a34a;
+  --t-light-success-emphasis: #15803d;
+  --t-light-success-subtle: #dcfce7;
+
+  /* Semantic/Feedback - Warning */
+  --t-light-warning-default: #f59e0b;
+  --t-light-warning-emphasis: #d97706;
+  --t-light-warning-subtle: #fef3c7;
+
+  /* Semantic/Feedback - Error */
+  --t-light-error-default: #dc2626;
+  --t-light-error-emphasis: #b91c1c;
+  --t-light-error-subtle: #fee2e2;
+
+  /* Semantic/Feedback - Info */
+  --t-light-info-default: #0891b2;
+  --t-light-info-emphasis: #0e7490;
+  --t-light-info-subtle: #cffafe;
+
+  /* Shadows */
+  --t-light-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --t-light-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --t-light-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+  /* Skeleton Shimmer */
+  --t-light-skeleton-shimmer: rgba(0, 0, 0, 0.06);
+
+  /* === DARK MODE === */
+
+  /* Surface & Text Colors */
+  --t-dark-foreground: #ffffff;
+  --t-dark-foreground-muted: #d1d5db;
+  --t-dark-foreground-subtle: #6b7280;
+  --t-dark-foreground-inverted: #000000;
+  --t-dark-foreground-inverted-muted: #374151;
+  --t-dark-foreground-inverted-subtle: #6b7280;
+  --t-dark-border: #262626;
+  --t-dark-border-muted: #1a1a1a;
+  --t-dark-background: #0e0e0e;
+  --t-dark-surface: #141414;
+
+  /* Brand Colors - Primary */
+  --t-dark-primary-default: #4588e8;
+  --t-dark-primary-emphasis: #3270d0;
+  --t-dark-primary-subtle: #172554;
+
+  /* Brand Colors - Accent */
+  --t-dark-accent-default: #a78bfa;
+  --t-dark-accent-emphasis: #8b5cf6;
+  --t-dark-accent-subtle: #4c1d95;
+
+  /* Semantic/Feedback - Success */
+  --t-dark-success-default: #4ade80;
+  --t-dark-success-emphasis: #22c55e;
+  --t-dark-success-subtle: #14532d;
+
+  /* Semantic/Feedback - Warning */
+  --t-dark-warning-default: #fbbf24;
+  --t-dark-warning-emphasis: #f59e0b;
+  --t-dark-warning-subtle: #78350f;
+
+  /* Semantic/Feedback - Error */
+  --t-dark-error-default: #f87171;
+  --t-dark-error-emphasis: #ef4444;
+  --t-dark-error-subtle: #7f1d1d;
+
+  /* Semantic/Feedback - Info */
+  --t-dark-info-default: #22d3ee;
+  --t-dark-info-emphasis: #06b6d4;
+  --t-dark-info-subtle: #164e63;
+
+  /* Shadows */
+  --t-dark-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.1);
+  --t-dark-shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.15),
+    0 4px 6px rgba(0, 0, 0, 0.3);
+  --t-dark-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.2),
+    0 10px 15px rgba(0, 0, 0, 0.4);
+
+  /* Skeleton Shimmer */
+  --t-dark-skeleton-shimmer: rgba(255, 255, 255, 0.12);
+}
+
+/**
+ * Tosui Base Styles
+ *
+ * Import this file to enable Tosui design token CSS variables.
+ * Components use CSS Modules for scoped styling and consistent resets.
+ */
+
+/* === BASE RESET === */
+
+body {
+  margin: 0;
+}
+
+/* === DESIGN TOKENS === */
+
+:root {
+  /* Surface & Text Colors (Light Mode) */
+  --t-color-foreground: var(--t-light-foreground);
+  --t-color-foreground-muted: var(--t-light-foreground-muted);
+  --t-color-foreground-subtle: var(--t-light-foreground-subtle);
+  --t-color-foreground-inverted: var(--t-light-foreground-inverted);
+  --t-color-foreground-inverted-muted: var(--t-light-foreground-inverted-muted);
+  --t-color-foreground-inverted-subtle: var(
+    --t-light-foreground-inverted-subtle
+  );
+  --t-color-border: var(--t-light-border);
+  --t-color-border-muted: var(--t-light-border-muted);
+  --t-color-background: var(--t-light-background);
+  --t-color-surface: var(--t-light-surface);
+
+  /* Brand Colors - Primary */
+  --t-color-primary-default: var(--t-light-primary-default);
+  --t-color-primary-emphasis: var(--t-light-primary-emphasis);
+  --t-color-primary-subtle: var(--t-light-primary-subtle);
+
+  /* Brand Colors - Accent */
+  --t-color-accent-default: var(--t-light-accent-default);
+  --t-color-accent-emphasis: var(--t-light-accent-emphasis);
+  --t-color-accent-subtle: var(--t-light-accent-subtle);
+
+  /* Semantic/Feedback - Success */
+  --t-color-success-default: var(--t-light-success-default);
+  --t-color-success-emphasis: var(--t-light-success-emphasis);
+  --t-color-success-subtle: var(--t-light-success-subtle);
+
+  /* Semantic/Feedback - Warning */
+  --t-color-warning-default: var(--t-light-warning-default);
+  --t-color-warning-emphasis: var(--t-light-warning-emphasis);
+  --t-color-warning-subtle: var(--t-light-warning-subtle);
+
+  /* Semantic/Feedback - Error */
+  --t-color-error-default: var(--t-light-error-default);
+  --t-color-error-emphasis: var(--t-light-error-emphasis);
+  --t-color-error-subtle: var(--t-light-error-subtle);
+
+  /* Semantic/Feedback - Info */
+  --t-color-info-default: var(--t-light-info-default);
+  --t-color-info-emphasis: var(--t-light-info-emphasis);
+  --t-color-info-subtle: var(--t-light-info-subtle);
+
+  /* Spacing (customizable base unit, multipliers 0-32) */
+  --t-spacing-unit: 4px;
+
+  /* Font Sizes */
+  --t-font-size-xs: 12px;
+  --t-font-size-sm: 14px;
+  --t-font-size-md: 16px;
+  --t-font-size-lg: 18px;
+  --t-font-size-xl: 20px;
+  --t-font-size-2xl: 24px;
+  --t-font-size-3xl: 30px;
+  --t-font-size-4xl: 36px;
+  --t-font-size-5xl: 48px;
+
+  /* Font Weights */
+  --t-font-weight-normal: 400;
+  --t-font-weight-medium: 500;
+  --t-font-weight-semibold: 600;
+  --t-font-weight-bold: 700;
+
+  /* Line Heights */
+  --t-line-height-tight: 1.25;
+  --t-line-height-normal: 1.5;
+  --t-line-height-relaxed: 1.75;
+
+  /* Font Families */
+  --t-font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  --t-font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  --t-font-family-mono: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+
+  /* Border Radius */
+  --t-radius-none: 0px;
+  --t-radius-sm: 4px;
+  --t-radius-md: 8px;
+  --t-radius-lg: 12px;
+  --t-radius-full: 9999px;
+
+  /* Border Width */
+  --t-border-width-none: 0px;
+  --t-border-width-thin: 1px;
+  --t-border-width-medium: 2px;
+  --t-border-width-thick: 4px;
+
+  /* Shadows */
+  --t-shadow-none: none;
+  --t-shadow-sm: var(--t-light-shadow-sm);
+  --t-shadow-md: var(--t-light-shadow-md);
+  --t-shadow-lg: var(--t-light-shadow-lg);
+
+  /* Skeleton */
+  --t-skeleton-shimmer: var(--t-light-skeleton-shimmer);
+
+  /* Transitions */
+  --t-transition-fast: 150ms;
+  --t-transition-normal: 250ms;
+  --t-transition-slow: 350ms;
+  --t-transition-easing: ease-in-out;
+
+  /* Breakpoints (for reference - use in media queries) */
+  --t-breakpoint-xs: 639px;
+  --t-breakpoint-sm: 767px;
+  --t-breakpoint-md: 1023px;
+  --t-breakpoint-lg: 1279px;
+  --t-breakpoint-xl: 1535px;
+}
+
+/* === DARK MODE === */
+
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme="light"]),
+  html[data-theme="auto"] {
+    /* Surface & Text Colors (Light Mode) */
+    --t-color-foreground: var(--t-dark-foreground);
+    --t-color-foreground-muted: var(--t-dark-foreground-muted);
+    --t-color-foreground-subtle: var(--t-dark-foreground-subtle);
+    --t-color-foreground-inverted: var(--t-dark-foreground-inverted);
+    --t-color-foreground-inverted-muted: var(
+      --t-dark-foreground-inverted-muted
+    );
+    --t-color-foreground-inverted-subtle: var(
+      --t-dark-foreground-inverted-subtle
+    );
+    --t-color-border: var(--t-dark-border);
+    --t-color-border-muted: var(--t-dark-border-muted);
+    --t-color-background: var(--t-dark-background);
+    --t-color-surface: var(--t-dark-surface);
+
+    /* Brand Colors - Primary */
+    --t-color-primary-default: var(--t-dark-primary-default);
+    --t-color-primary-emphasis: var(--t-dark-primary-emphasis);
+    --t-color-primary-subtle: var(--t-dark-primary-subtle);
+
+    /* Brand Colors - Accent */
+    --t-color-accent-default: var(--t-dark-accent-default);
+    --t-color-accent-emphasis: var(--t-dark-accent-emphasis);
+    --t-color-accent-subtle: var(--t-dark-accent-subtle);
+
+    /* Semantic/Feedback - Success */
+    --t-color-success-default: var(--t-dark-success-default);
+    --t-color-success-emphasis: var(--t-dark-success-emphasis);
+    --t-color-success-subtle: var(--t-dark-success-subtle);
+
+    /* Semantic/Feedback - Warning */
+    --t-color-warning-default: var(--t-dark-warning-default);
+    --t-color-warning-emphasis: var(--t-dark-warning-emphasis);
+    --t-color-warning-subtle: var(--t-dark-warning-subtle);
+
+    /* Semantic/Feedback - Error */
+    --t-color-error-default: var(--t-dark-error-default);
+    --t-color-error-emphasis: var(--t-dark-error-emphasis);
+    --t-color-error-subtle: var(--t-dark-error-subtle);
+
+    /* Semantic/Feedback - Info */
+    --t-color-info-default: var(--t-dark-info-default);
+    --t-color-info-emphasis: var(--t-dark-info-emphasis);
+    --t-color-info-subtle: var(--t-dark-info-subtle);
+
+    /* Shadows */
+    --t-shadow-sm: var(--t-dark-shadow-sm);
+    --t-shadow-md: var(--t-dark-shadow-md);
+    --t-shadow-lg: var(--t-dark-shadow-lg);
+
+    /* Skeleton */
+    --t-skeleton-shimmer: var(--t-dark-skeleton-shimmer);
+  }
+}
+
+:root[data-theme="dark"] {
+  /* Surface & Text Colors (Light Mode) */
+  --t-color-foreground: var(--t-dark-foreground);
+  --t-color-foreground-muted: var(--t-dark-foreground-muted);
+  --t-color-foreground-subtle: var(--t-dark-foreground-subtle);
+  --t-color-foreground-inverted: var(--t-dark-foreground-inverted);
+  --t-color-foreground-inverted-muted: var(--t-dark-foreground-inverted-muted);
+  --t-color-foreground-inverted-subtle: var(
+    --t-dark-foreground-inverted-subtle
+  );
+  --t-color-border: var(--t-dark-border);
+  --t-color-border-muted: var(--t-dark-border-muted);
+  --t-color-background: var(--t-dark-background);
+  --t-color-surface: var(--t-dark-surface);
+
+  /* Brand Colors - Primary */
+  --t-color-primary-default: var(--t-dark-primary-default);
+  --t-color-primary-emphasis: var(--t-dark-primary-emphasis);
+  --t-color-primary-subtle: var(--t-dark-primary-subtle);
+
+  /* Brand Colors - Accent */
+  --t-color-accent-default: var(--t-dark-accent-default);
+  --t-color-accent-emphasis: var(--t-dark-accent-emphasis);
+  --t-color-accent-subtle: var(--t-dark-accent-subtle);
+
+  /* Semantic/Feedback - Success */
+  --t-color-success-default: var(--t-dark-success-default);
+  --t-color-success-emphasis: var(--t-dark-success-emphasis);
+  --t-color-success-subtle: var(--t-dark-success-subtle);
+
+  /* Semantic/Feedback - Warning */
+  --t-color-warning-default: var(--t-dark-warning-default);
+  --t-color-warning-emphasis: var(--t-dark-warning-emphasis);
+  --t-color-warning-subtle: var(--t-dark-warning-subtle);
+
+  /* Semantic/Feedback - Error */
+  --t-color-error-default: var(--t-dark-error-default);
+  --t-color-error-emphasis: var(--t-dark-error-emphasis);
+  --t-color-error-subtle: var(--t-dark-error-subtle);
+
+  /* Semantic/Feedback - Info */
+  --t-color-info-default: var(--t-dark-info-default);
+  --t-color-info-emphasis: var(--t-dark-info-emphasis);
+  --t-color-info-subtle: var(--t-dark-info-subtle);
+
+  /* Shadows */
+  --t-shadow-sm: var(--t-dark-shadow-sm);
+  --t-shadow-md: var(--t-dark-shadow-md);
+  --t-shadow-lg: var(--t-dark-shadow-lg);
+
+  /* Skeleton */
+  --t-skeleton-shimmer: var(--t-dark-skeleton-shimmer);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tosui/react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A themable, orderly, simple UI component library for React",
   "type": "module",
   "main": "./dist/index.js",
@@ -30,9 +30,11 @@
     "dist"
   ],
   "dependencies": {
-    "clsx": "^2.1.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "clsx": "^2.1.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
@@ -45,9 +47,11 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "postcss": "^8.5.6",
+    "rollup-preserve-directives": "^1.1.3",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
+    "vite-plugin-bundle-css": "^0.1.1",
     "vite-plugin-dts": "^4.5.4"
   },
   "scripts": {