@sesamehr/react-design-system 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sesamehr/react-design-system",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Sesame HR React design system — components and design tokens",
   "license": "MIT",
   "type": "module",

package/src/assets/styles/primitives-v3.css

@@ -16,12 +16,16 @@
    =========================================== */
 
 :root {
-  /* ===== RADIUS (custom scale, differs from Tailwind) ===== */
+  /* ===== RADIUS =====
+     Values come from the Figma collection "Primitive-radius", which matches the
+     Tailwind v4 scale. Do not swap these for shadcn's derived scale
+     (`--radius` +/- 4px, i.e. 6/8/10/14) — that is what used to be here, and it
+     silently shifted sm/md/lg/xl two pixels away from every design. */
   --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-sm: 0.25rem; /* 4px */
+  --radius-md: 0.375rem; /* 6px */
+  --radius-lg: 0.5rem; /* 8px */
+  --radius-xl: 0.75rem; /* 12px */
   --radius-2xl: 1rem; /* 16px */
   --radius-3xl: 1.5rem; /* 24px */
   --radius-4xl: 2rem; /* 32px */

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

@@ -92,6 +92,29 @@
   --chart-4: var(--color-brand-700);
   --chart-5: var(--color-brand-800);
 
+  /* Categorical palette. The slot number is the contract, not the hue behind
+     it: callers pick a category, so a hue can be re-pointed here without a
+     single call site changing meaning. Ordered as the Figma set is. */
+  --category-1: var(--brand); /* brand */
+  --category-2: var(--color-purple-500); /* purple */
+  --category-3: var(--color-amber-500); /* amber */
+  --category-4: var(--color-teal-500); /* teal */
+  --category-5: var(--color-orange-500); /* orange */
+  --category-6: var(--color-zinc-500); /* zinc */
+  --category-7: var(--color-red-500); /* red */
+  --category-8: var(--color-yellow-500); /* yellow */
+  --category-9: var(--color-lime-500); /* lime */
+  --category-10: var(--color-green-500); /* green */
+  --category-11: var(--color-emerald-500); /* emerald */
+  --category-12: var(--color-cyan-500); /* cyan */
+  --category-13: var(--color-sky-500); /* sky */
+  --category-14: var(--color-blue-500); /* blue */
+  --category-15: var(--color-indigo-500); /* indigo */
+  --category-16: var(--color-violet-500); /* violet */
+  --category-17: var(--color-fuchsia-500); /* fuchsia */
+  --category-18: var(--color-pink-500); /* pink */
+  --category-19: var(--color-rose-500); /* rose */
+
   --sidebar-background: var(--color-white);
   --sidebar-foreground: var(--color-zinc-900);
   --sidebar-primary: var(--color-brand-500);
@@ -173,6 +196,25 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+  --color-category-1: var(--category-1);
+  --color-category-2: var(--category-2);
+  --color-category-3: var(--category-3);
+  --color-category-4: var(--category-4);
+  --color-category-5: var(--category-5);
+  --color-category-6: var(--category-6);
+  --color-category-7: var(--category-7);
+  --color-category-8: var(--category-8);
+  --color-category-9: var(--category-9);
+  --color-category-10: var(--category-10);
+  --color-category-11: var(--category-11);
+  --color-category-12: var(--category-12);
+  --color-category-13: var(--category-13);
+  --color-category-14: var(--category-14);
+  --color-category-15: var(--category-15);
+  --color-category-16: var(--category-16);
+  --color-category-17: var(--category-17);
+  --color-category-18: var(--category-18);
+  --color-category-19: var(--category-19);
   --color-sidebar: var(--sidebar-background);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);

package/dist/Display/Avatar/Avatar.d.ts

@@ -1,24 +0,0 @@
-import { BulletVariants } from '../../Feedback/Bullet/index.ts';
-import { AvatarVariants } from './index.ts';
-export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
-    /** Image source URL */
-    src?: string;
-    /** Fallback initials (max 2 characters) */
-    initials?: string;
-    /** Avatar size */
-    size?: AvatarVariants['size'];
-    /** Disabled state - shows gray placeholder */
-    disabled?: boolean;
-    /** Status indicator color - automatically positions Bullet based on size */
-    status?: BulletVariants['color'];
-    /** Action slot (rendered top-right) */
-    action?: React.ReactNode;
-    /** Label slot (rendered bottom-center) */
-    label?: React.ReactNode;
-    dataTestid: string;
-}
-/**
- * Avatar — mirrors `@sesame/orxata-core` Avatar. SVG hexagon shape with hover
- * drop-shadow, clip-path image, foreignObject initials, and status Bullet.
- */
-export declare const Avatar: import('react').ForwardRefExoticComponent<AvatarProps & import('react').RefAttributes<HTMLSpanElement>>;