@sesamehr/react-design-system 0.1.0

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@sesamehr/react-design-system",
+  "version": "0.1.0",
+  "description": "Sesame HR React design system — components and design tokens",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/react-design-system.umd.cjs",
+  "module": "./dist/react-design-system.js",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/react-design-system.js",
+      "require": "./dist/react-design-system.umd.cjs"
+    },
+    "./style.css": "./dist/react-design-system.css",
+    "./assets/styles/mainTheme.css": "./src/assets/styles/mainTheme.css",
+    "./lib/utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src/assets/styles"
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-table": "^8.21.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^0.511.0",
+    "react-resizable-panels": "^2.1.9",
+    "react-transition-group": "^4.4.5",
+    "tailwind-merge": "^3.3.0",
+    "tw-animate-css": "^1.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0",
+    "tailwindcss": "^4.1.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/react-transition-group": "^4.4.12",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "happy-dom": "^20.5.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18",
+    "@orxata/config": "1.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b --noEmit && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "type-check": "tsc --noEmit"
+  }
+}

package/src/assets/styles/mainTheme.css

@@ -0,0 +1 @@
+@import './theme-v2.css';

package/src/assets/styles/primitives.css

@@ -0,0 +1,98 @@
+/* ===========================================
+   PRIMITIVES - Base values as CSS custom properties
+   These are defined in :root so they can be referenced
+   anywhere, including in @theme inline blocks.
+   =========================================== */
+
+:root {
+  /* ===== RADIUS (custom scale, differs from Tailwind) ===== */
+  --radius-xs: 0.125rem; /* 2px */
+  --radius-sm: 0.375rem; /* 6px */
+  --radius-md: 0.5rem; /* 8px */
+  --radius-lg: 0.625rem; /* 10px */
+  --radius-xl: 0.875rem; /* 14px */
+  --radius-2xl: 1rem; /* 16px */
+  --radius-3xl: 1.5rem; /* 24px */
+  --radius-4xl: 2rem; /* 32px */
+
+  /* Default radius for `rounded` class */
+  --radius-DEFAULT: var(--radius-md);
+
+  /* ===== FONTS (custom families) ===== */
+  --font-sans: 'Figtree', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, monospace;
+}
+
+@theme {
+  --color-white: #ffffff;
+  --color-white: oklch(1 0 0);
+
+  --color-slate-50: #f8fafc;
+  --color-slate-50: oklch(0.984 0.003 247.858);
+  --color-slate-100: #f1f5f9;
+  --color-slate-100: oklch(0.968 0.007 247.896);
+  --color-slate-200: #e2e8f0;
+  --color-slate-200: oklch(0.929 0.013 255.508);
+  --color-slate-300: #cbd5e1;
+  --color-slate-300: oklch(0.869 0.022 252.894);
+  --color-slate-400: #94a3b8;
+  --color-slate-400: oklch(0.704 0.04 256.788);
+  --color-slate-500: #64748b;
+  --color-slate-500: oklch(0.554 0.046 257.417);
+  --color-slate-600: #475569;
+  --color-slate-600: oklch(0.446 0.043 257.281);
+  --color-slate-700: #334155;
+  --color-slate-700: oklch(0.372 0.044 257.287);
+  --color-slate-800: #1e293b;
+  --color-slate-800: oklch(0.279 0.041 260.031);
+  --color-slate-900: #0f172a;
+  --color-slate-900: oklch(0.208 0.042 265.755);
+  --color-slate-950: #020617;
+  --color-slate-950: oklch(0.129 0.042 264.695);
+
+  --color-indigo-50: #eef2ff;
+  --color-indigo-50: oklch(0.962 0.018 272.314);
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-100: oklch(0.93 0.034 272.788);
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-300: oklch(0.757 0.105 274.039);
+  --color-indigo-400: #818cf8;
+  --color-indigo-400: oklch(0.673 0.182 276.935);
+  --color-indigo-500: #6366f1;
+  --color-indigo-500: oklch(0.585 0.233 264.052);
+  --color-indigo-600: #4f46e5;
+  --color-indigo-600: oklch(0.511 0.262 276.966);
+  --color-indigo-700: #4338ca;
+  --color-indigo-700: oklch(0.457 0.24 277.023);
+  --color-indigo-800: #3730a3;
+  --color-indigo-800: oklch(0.398 0.195 277.366);
+  --color-indigo-950: #1e1b4b;
+  --color-indigo-950: oklch(0.257 0.09 281.288);
+
+  --color-red-400: #f87171;
+  --color-red-400: oklch(0.704 0.191 22.216);
+  --color-red-600: #dc2626;
+  --color-red-600: oklch(0.577 0.245 27.325);
+
+  --color-green-100: #dcfce7;
+  --color-green-100: oklch(0.962 0.052 149.214);
+  --color-green-300: #86efac;
+  --color-green-300: oklch(0.871 0.15 154.449);
+  --color-green-500: #22c55e;
+  --color-green-500: oklch(0.723 0.219 149.579);
+  --color-green-600: #16a34a;
+  --color-green-600: oklch(0.627 0.194 149.214);
+
+  --color-amber-500: #f59e0b;
+  --color-amber-500: oklch(0.769 0.188 70.08);
+
+  --color-emerald-300: #6ee7b7;
+  --color-emerald-300: oklch(0.871 0.15 154.449);
+  --color-emerald-500: #10b981;
+  --color-emerald-500: oklch(0.72 0.13 152.85);
+  --color-emerald-900: #064e3b;
+  --color-emerald-900: oklch(0.32 0.04 152.85);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+}

package/src/assets/styles/theme-v2.css

@@ -0,0 +1,298 @@
+@import './primitives.css';
+
+/**
+ * THEME V2
+ *
+ * Aligns with Figma: 3. Mode → 2. Theme → 1. TailwindCSS
+ *
+ * DS EXTENSIONS (pending design approval):
+ * - success, neutral-*, font-*, border-*, bg-*
+ *
+ * Dark mode: .dark class on <html>
+ */
+
+/* ===========================================
+   DS TOKENS (used by DS components)
+   =========================================== */
+
+:root {
+  /* Font */
+  --font-primary: var(--color-indigo-950);
+  --font-secondary: var(--color-slate-500);
+  --font-tertiary: var(--color-slate-400);
+  --font-error: var(--color-red-600);
+  --font-success: var(--color-green-600);
+  --font-warning: var(--color-amber-500);
+
+  /* Border */
+  --border-default: var(--color-slate-200);
+  --border-hover: var(--color-indigo-300);
+
+  /* Success */
+  --success: var(--color-green-600);
+  --success-foreground: var(--color-white);
+  --success-100: var(--color-green-100);
+  --success-300: var(--color-green-300);
+  --success-500: var(--color-green-500);
+
+  /* Background */
+  --bg-base: var(--color-white);
+  --bg-muted: var(--color-slate-50);
+  --bg-subtle: var(--color-slate-100);
+
+  /* Neutral (semantic alias) */
+  --neutral-1: var(--color-white);
+  --neutral-50: var(--color-slate-50);
+  --neutral-100: var(--color-slate-100);
+  --neutral-200: var(--color-slate-200);
+  --neutral-300: var(--color-slate-300);
+  --neutral-400: var(--color-slate-400);
+  --neutral-500: var(--color-slate-500);
+  --neutral-600: var(--color-slate-600);
+  --neutral-700: var(--color-slate-700);
+  --neutral-800: var(--color-slate-800);
+  --neutral-900: var(--color-slate-900);
+  --neutral-950: var(--color-slate-950);
+
+  /* ===== UNCERTAINTY ===== */
+  /* One-off tokens without semantic names in
+     Figma. Defined here to avoid hardcoding color values across the codebase.
+  */
+  --brand-accent-300: var(--color-emerald-300);
+  --brand-accent-500: var(--color-emerald-500);
+  --brand-accent-900: var(--color-emerald-900);
+  /* ======================== */
+}
+
+.dark {
+  /* Font */
+  --font-primary: var(--color-white);
+  --font-secondary: var(--color-slate-300);
+  --font-tertiary: var(--color-slate-400);
+  --font-error: var(--color-red-400);
+  --font-success: var(--color-green-600);
+  --font-warning: var(--color-amber-500);
+
+  /* Border */
+  --border-default: var(--color-slate-700);
+  --border-hover: var(--color-indigo-400);
+
+  /* Success */
+  --success: var(--color-green-500);
+  --success-foreground: var(--color-white);
+
+  /* Background */
+  --bg-base: var(--color-slate-950);
+  --bg-muted: var(--color-slate-900);
+  --bg-subtle: var(--color-slate-800);
+}
+
+/* ===========================================
+   SHADCN TOKENS (support for shadcn components)
+   =========================================== */
+
+/* Light mode (default) */
+:root {
+  --background: var(--color-white);
+  --foreground: var(--color-indigo-950);
+
+  --card: var(--color-white);
+  --card-foreground: var(--color-indigo-950);
+
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-indigo-950);
+
+  --primary: var(--color-indigo-500);
+  --primary-foreground: var(--color-white);
+
+  --secondary: var(--color-indigo-100);
+  --secondary-foreground: var(--color-indigo-950);
+
+  --muted: var(--color-slate-100);
+  --muted-foreground: var(--color-slate-500);
+
+  --accent: var(--color-slate-100);
+  --accent-foreground: var(--color-indigo-950);
+
+  --destructive: var(--color-red-600);
+  --destructive-foreground: var(--color-white);
+
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-white);
+
+  --border: var(--color-slate-200);
+  --input: var(--color-slate-200);
+  --ring: var(--color-indigo-500);
+
+  --chart-1: var(--color-indigo-400);
+  --chart-2: var(--color-indigo-500);
+  --chart-3: var(--color-indigo-600);
+  --chart-4: var(--color-indigo-700);
+  --chart-5: var(--color-indigo-800);
+
+  --sidebar-background: var(--color-white);
+  --sidebar-foreground: var(--color-indigo-950);
+  --sidebar-primary: var(--color-indigo-500);
+  --sidebar-primary-foreground: var(--color-white);
+  --sidebar-accent: var(--color-slate-100);
+  --sidebar-accent-foreground: var(--color-indigo-950);
+  --sidebar-border: var(--color-slate-200);
+  --sidebar-ring: var(--color-indigo-500);
+}
+
+/* Dark mode */
+.dark {
+  --background: var(--color-slate-950);
+  --foreground: var(--color-white);
+
+  --card: var(--color-slate-900);
+  --card-foreground: var(--color-white);
+
+  --popover: var(--color-slate-800);
+  --popover-foreground: var(--color-white);
+
+  --primary: var(--color-indigo-300);
+  --primary-foreground: var(--color-indigo-950);
+
+  --secondary: var(--color-indigo-800);
+  --secondary-foreground: var(--color-white);
+
+  --muted: var(--color-slate-700);
+  --muted-foreground: var(--color-slate-300);
+
+  --accent: var(--color-slate-700);
+  --accent-foreground: var(--color-white);
+
+  --destructive: var(--color-red-400);
+  --destructive-foreground: var(--color-white);
+
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-white);
+
+  --border: var(--color-slate-700);
+  --input: var(--color-slate-700);
+  --ring: var(--color-indigo-400);
+
+  --chart-1: var(--color-indigo-300);
+  --chart-2: var(--color-indigo-400);
+  --chart-3: var(--color-indigo-500);
+  --chart-4: var(--color-indigo-600);
+  --chart-5: var(--color-indigo-700);
+
+  --sidebar-background: var(--color-slate-950);
+  --sidebar-foreground: var(--color-white);
+  --sidebar-primary: var(--color-indigo-400);
+  --sidebar-primary-foreground: var(--color-indigo-950);
+  --sidebar-accent: var(--color-slate-800);
+  --sidebar-accent-foreground: var(--color-white);
+  --sidebar-border: var(--color-slate-700);
+  --sidebar-ring: var(--color-indigo-400);
+}
+
+/* Expose tokens to Tailwind */
+@theme inline {
+  /* DS tokens */
+  --color-font-primary: var(--font-primary);
+  --color-font-secondary: var(--font-secondary);
+  --color-font-tertiary: var(--font-tertiary);
+  --color-font-error: var(--font-error);
+  --color-font-success: var(--font-success);
+  --color-font-warning: var(--font-warning);
+  --color-border-default: var(--border-default);
+  --color-border-hover: var(--border-hover);
+  --color-bg-base: var(--bg-base);
+  --color-bg-muted: var(--bg-muted);
+  --color-bg-subtle: var(--bg-subtle);
+  --color-neutral-1: var(--neutral-1);
+  --color-neutral-50: var(--neutral-50);
+  --color-neutral-100: var(--neutral-100);
+  --color-neutral-200: var(--neutral-200);
+  --color-neutral-300: var(--neutral-300);
+  --color-neutral-400: var(--neutral-400);
+  --color-neutral-500: var(--neutral-500);
+  --color-neutral-600: var(--neutral-600);
+  --color-neutral-700: var(--neutral-700);
+  --color-neutral-800: var(--neutral-800);
+  --color-neutral-900: var(--neutral-900);
+  --color-neutral-950: var(--neutral-950);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-100: var(--success-100);
+  --color-success-300: var(--success-300);
+  --color-success-500: var(--success-500);
+
+  /* ===== UNCERTAINTY ===== */
+  --color-brand-accent-300: var(--brand-accent-300);
+  --color-brand-accent-500: var(--brand-accent-500);
+  --color-brand-accent-900: var(--brand-accent-900);
+  /* ======================== */
+
+  /* Shadcn tokens */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Radius - from primitives */
+  --radius-xs: var(--radius-xs);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
+  --radius-4xl: var(--radius-4xl);
+  --radius-DEFAULT: var(--radius-DEFAULT);
+
+  /* Font families - from primitives */
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--reka-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--reka-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}