@sesamehr/react-design-system 2.0.0-beta.1 → 2.0.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sesamehr/react-design-system",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.11",
   "description": "Sesame HR React design system — components and design tokens",
   "license": "MIT",
   "type": "module",
@@ -56,12 +56,14 @@
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
+    "@sesame/orxata-icons": "1.6.0",
     "@tailwindcss/vite": "^4.1.13",
     "@tanstack/react-table": "^8.21.2",
+    "@tanstack/react-virtual": "^3.14.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "lucide-react": "^0.511.0",
+    "react-day-picker": "^10.0.1",
     "react-resizable-panels": "^2.1.9",
     "react-transition-group": "^4.4.5",
     "tailwind-merge": "^3.3.0",

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

@@ -114,8 +114,8 @@
   --accent: var(--color-slate-100);
   --accent-foreground: var(--color-indigo-950);
 
-  --destructive: var(--color-red-600);
-  --destructive-foreground: var(--color-white);
+  --error: var(--color-red-600);
+  --error-foreground: var(--color-white);
 
   --warning: var(--color-amber-500);
   --warning-foreground: var(--color-white);
@@ -163,8 +163,8 @@
   --accent: var(--color-slate-700);
   --accent-foreground: var(--color-white);
 
-  --destructive: var(--color-red-400);
-  --destructive-foreground: var(--color-white);
+  --error: var(--color-red-400);
+  --error-foreground: var(--color-white);
 
   --warning: var(--color-amber-500);
   --warning-foreground: var(--color-white);
@@ -242,8 +242,8 @@
   --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-error: var(--error);
+  --color-error-foreground: var(--error-foreground);
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
   --color-border: var(--border);

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

@@ -69,13 +69,18 @@
   --accent: var(--color-zinc-100);
   --accent-foreground: var(--color-zinc-900);
 
-  --destructive: var(--color-red-500);
-  --destructive-foreground: var(--color-white);
 
   --success: var(--color-green-500);
   --success-foreground: var(--color-white);
   --warning: var(--color-amber-500);
   --warning-foreground: var(--color-white);
+  /* The one semantic name for this red. Figma's Primitive collection calls it
+     `error`, so the code does too. There used to be a `--destructive` beside it
+     holding the identical value — two names for one colour, which means two
+     places to re-point it and a coin flip every time a component reaches for
+     red. The *component* variant stays `destructive` (Button, Badge and
+     StatusBadge), which is also what Figma names that style: the action is
+     destructive, the colour is error. */
   --error: var(--color-red-500);
   --error-foreground: var(--color-white);
   --info: var(--color-blue-500);
@@ -184,8 +189,6 @@
   --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-error: var(--error);

package/dist/Data/Table/TableAvatar/TableAvatar.d.ts

@@ -1,14 +0,0 @@
-export interface TableAvatarProps extends React.ComponentPropsWithoutRef<'div'> {
-    /** Image source URL */
-    src?: string;
-    /** Fallback initials (max 2 characters) */
-    initials?: string;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Full name to display */
-    name: string;
-    /** Subtitle (department, role, etc.) */
-    subtitle?: string;
-    dataTestid: string;
-}
-export declare const TableAvatar: import('react').ForwardRefExoticComponent<TableAvatarProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Display/Tag/Tag.d.ts

@@ -1,19 +0,0 @@
-export interface TagProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
-    /**
-     * Whether it is picked.
-     *
-     * Tags get used the way tabs are — press one and it stays down — so this is
-     * a state the caller owns and tells us about, not something the browser
-     * knows. It is also what `aria-pressed` reports.
-     */
-    active?: boolean;
-    /**
-     * Whether it is being dragged.
-     *
-     * The only other state with nothing in CSS to hang it on.
-     */
-    dragged?: boolean;
-    dataTestid: string;
-}
-/** Tag — mirrors `@sesame/orxata-core` Tag. */
-export declare const Tag: import('react').ForwardRefExoticComponent<TagProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Display/Tag/index.d.ts

@@ -1,2 +0,0 @@
-export { Tag } from './Tag.tsx';
-export type { TagProps } from './Tag.tsx';