@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/styles/themes/dbc/light.css

@@ -1,43 +1,163 @@
-:root {
-  --color-primary: #0c3ee3;
-  --color-primary-hover: #0932b6;
-  --color-secondary: #6b7280;
-  --color-secondary-hover: #4b5563;
-  --color-accent: #ec4899;
-  --color-accent-hover: #be185d;
-
-  --color-highlight: #3b6ff5;
-  --color-hover: var(--opac-bg-light);
-
-  --color-bg-selected: #e8edfd;
-  --color-bg-selected-hover: #dce5fc;
-  --color-border-selected: var(--color-primary);
-
-  --color-background: #ffffff;
-  --color-surface: #ffffff;
-  --color-surface-hover: var(--opac-bg-light);
-  --color-surface-pressed: var(--opac-bg-default);
-  --color-surface-selected: var(--color-bg-selected);
-
-  /* Text */
-  --color-text: #1a1a1a;
-  --color-text-secondary: #374151;
-  --color-text-muted: #5f6368;
-  --color-text-inverse: #ffffff;
-  --color-text-on-primary: var(--color-text-inverse);
-  --color-text-on-secondary: var(--color-text-inverse);
-  --color-text-on-highlight: var(--color-text-inverse);
-
-  /* Links */
-  --color-link: #0c3ee3;
-  --color-link-hover: #0932b6;
-  --color-link-visited: #5b3ee3;
-
-  /* Borders */
-  --color-border: rgba(0, 0, 0, 0.12);
+html[data-theme='light'] {
+  /* ==========================================================================
+   * PRIMITIVES (DBC)
+   * ======================================================================= */
+
+  /* Brand blues */
+  --dbc-blue-500: #0c3ee3;
+  --dbc-blue-600: #0932b6;
+  --dbc-blue-400: #3b6ff5;
+  --dbc-blue-300: #7ea5ff; /* used for focus ring */
+  --dbc-blue-100: #e8edfd;
+  --dbc-blue-150: #dce5fc;
+
+  /* Neutrals */
+  --dbc-neutral-900: #1a1a1a;
+  --dbc-neutral-700: #374151;
+  --dbc-neutral-600: #5f6368;
+  --dbc-neutral-200: #e5e7eb;
+  --dbc-neutral-100: #f3f4f6;
+
+  /* Accents */
+  --dbc-pink-500: #ec4899;
+  --dbc-pink-600: #be185d;
+
+  --dbc-gray-500: #6b7280;
+  --dbc-gray-600: #4b5563;
+
+  /* Status colors */
+  --dbc-green-500: #10b981;
+  --dbc-green-100: #e6f9f3;
+  --dbc-green-700: #065f46;
+  --dbc-green-300: #34d399;
+
+  --dbc-amber-700: #b45309;
+  --dbc-amber-100: #fff7ed;
+  --dbc-amber-800: #92400e;
+  --dbc-amber-400: #f59e0b;
+
+  --dbc-red-600: #dc2626;
+  --dbc-red-100: #fef2f2;
+  --dbc-red-800: #991b1b;
+  --dbc-red-300: #f87171;
+
+  --dbc-info-500: #0ea5e9;
+  --dbc-info-100: #e0f2fe;
+  --dbc-info-700: #075985;
+  --dbc-info-300: #38bdf8;
+
+  /* ==========================================================================
+   * SEMANTIC COLORS (HUE-AGNOSTIC – COMPONENTS USE THESE)
+   * ======================================================================= */
+
+  /* === Brand & accents === */
+  --color-brand: var(--dbc-blue-500);
+  --color-brand-hover: var(--dbc-blue-600);
+  --color-brand-strong: var(--dbc-blue-600); /* same as hover for this theme */
+
+  /* === Backgrounds & surfaces === */
+  --color-bg-page: #ffffff;
+  --color-bg-surface: #ffffff;
+  --color-bg-surface-subtle: rgba(0, 0, 0, 0.02);
+  --color-bg-surface-strong: #f9fafb;
+
+  --color-bg-contextual: #f4f2ee;
+  --color-bg-contextual-subtle: #faf8f5;
+
+  /* Interaction backgrounds */
+  --color-bg-hover-subtle: var(--opac-bg-light);
+  --color-bg-pressed-subtle: var(--opac-bg-default);
+
+  /* Selected */
+  --color-bg-selected: var(--dbc-blue-100);
+  --color-bg-selected-hover: var(--dbc-blue-150);
+
+  --color-neutral: var(--dbc-neutral-200);
+  --color-neutral-fg: #000000;
+  --color-neutral-strong: var(--dbc-neutral-600);
+  --color-neutral-strong-fg: #ffffff;
+  /* === Borders === */
+
+  --color-border-subtle: rgba(0, 0, 0, 0.12);
+  --color-border-default: rgba(0, 0, 0, 0.12);
   --color-border-strong: rgba(0, 0, 0, 0.24);
+  --color-border-selected: var(--color-brand);
+
+  /* Border widths */
   --border-width-thin: 1px;
-  --border-width-thick: 2px;
+  --border-width-medium: 2px;
+  --border-width-thick: 4px;
+
+  /* === Text / foreground === */
+
+  --color-fg-default: var(--dbc-neutral-900);
+  --color-fg-muted: var(--dbc-neutral-700);
+  --color-fg-subtle: var(--dbc-neutral-600);
+
+  --color-fg-on-strong: #ffffff;
+  --color-fg-on-brand: #ffffff;
+
+  /* === Links === */
+
+  --color-link: var(--dbc-blue-500);
+  --color-link-hover: var(--dbc-blue-600);
+  --color-link-visited: #5b3ee3;
+
+  /* === Status / severity === */
+
+  --color-status-success: var(--dbc-green-500);
+  --color-status-success-bg: var(--dbc-green-100);
+  --color-status-success-border: var(--dbc-green-300);
+  --color-status-success-fg: var(--dbc-green-700);
+
+  --color-status-warning: var(--dbc-amber-700);
+  --color-status-warning-bg: var(--dbc-amber-100);
+  --color-status-warning-border: var(--dbc-amber-400);
+  --color-status-warning-fg: var(--dbc-amber-800);
+
+  --color-status-error: var(--dbc-red-600);
+  --color-status-error-bg: var(--dbc-red-100);
+  --color-status-error-border: var(--dbc-red-300);
+  --color-status-error-fg: var(--dbc-red-800);
+
+  --color-status-info: var(--dbc-info-500);
+  --color-status-info-bg: var(--dbc-info-100);
+  --color-status-info-border: var(--dbc-info-300);
+  --color-status-info-fg: var(--dbc-info-700);
+
+  /* === Disabled === */
+
+  --color-disabled-bg: var(--dbc-neutral-100);
+  --color-disabled-fg: #9ca3af;
+  --color-disabled-border: var(--dbc-neutral-200);
+
+  /* === Focus === */
+
+  --color-focus-ring: var(--dbc-blue-300);
+  --focus-ring: 0 0 0 3px rgba(12, 62, 227, 0.25);
+
+  /* ==========================================================================
+   * OPTIONAL COMPONENT-LEVEL TOKENS
+   * ======================================================================= */
+
+  /* Cards */
+  --card-bg-default: var(--color-bg-surface);
+  --card-bg-subtle: var(--color-bg-surface-subtle);
+  --card-bg-strong: var(--color-bg-surface-strong);
+
+  --card-fg-default: var(--color-fg-default);
+  --card-fg-on-strong: var(--color-fg-on-strong);
+  --card-fg-on-accent-1: var(--color-fg-on-accent-1);
+  --card-fg-on-accent-2: var(--color-fg-on-accent-2);
+
+  /* Buttons */
+  --button-bg-primary: var(--color-brand);
+  --button-bg-primary-hover: var(--color-brand-hover);
+  --button-fg-primary: var(--color-fg-on-brand);
+
+  /* ==========================================================================
+   * NON-COLOR SYSTEM TOKENS
+   * ======================================================================= */
 
   /* Opacities (light) */
   --opac-bg-light: rgba(0, 0, 0, 0.025);
@@ -48,38 +168,7 @@
   --opac-bg-default-invert: rgba(255, 255, 255, 0.05);
   --opac-bg-dark-invert: rgba(255, 255, 255, 0.1);
 
-  /* Semantic (Status) */
-  --color-success: #166534;
-  --color-warning: #a05a00;
-  --color-error: #b91c1c;
-  --color-info: #075985;
-
-  --color-bg-success: #ecfdf5;
-  --color-bg-warning: #fff3d1;
-  --color-bg-error: #fef2f2;
-  --color-bg-info: #e0f2fe;
-
-  --color-text-success: #166534;
-  --color-text-warning: #a05a00;
-  --color-text-error: #b91c1c;
-  --color-text-info: #075985;
-
-  --color-border-success: #16a34a;
-  --color-border-warning: #d97706;
-  --color-border-error: #ef4444;
-  --color-border-info: #0284c7;
-
-  /* Disabled */
-  --color-disabled-bg: #f3f4f6;
-  --color-disabled-text: #9ca3af;
-  --color-disabled-border: #e5e7eb;
-
-  /* Focus */
-  --focus-ring-color: #7ea5ff; /* tuned for light backgrounds */
-  --focus-ring: 0 0 0 3px rgba(12, 62, 227, 0.25);
-
   /* ===== Spacing & Layout ===== */
-  /* 4px base scale */
   --spacing-2xs: 2px;
   --spacing-xxs: 4px;
   --spacing-xs: 8px;
@@ -91,7 +180,6 @@
   --spacing-3xl: 64px;
   --spacing-4xl: 96px;
 
-  /* Gutters */
   --gutter-sm: 12px;
   --gutter-md: 16px;
   --gutter-lg: 24px;
@@ -110,14 +198,18 @@
   --container-xl: 1280px;
 
   /* ===== Sizing ===== */
-  --icon-size: 20px;
+  --icon-size-sm: 16px;
+  --icon-size-md: 20px;
+  --icon-size-lg: 24px;
+
   --component-size-xs: 20px;
   --component-size-sm: 30px;
-  --component-size-md: 40px;
-  --component-size-lg: 48px;
-  --component-size-xl: 64px;
+  --component-size-md: 36px;
+  --component-size-lg: 44px;
+  --component-size-xl: 435px;
+  --sidebar-width: 200px;
 
-  /* Control paddings (horizontal/vertical) */
+  /* Control paddings */
   --control-padding-x: 12px;
   --control-padding-y: 8px;
 
@@ -131,15 +223,17 @@
   --border-radius-lg: 0.5rem;
   --border-radius-xl: 0.75rem;
 
-  /* Density presets (add/subtract from heights/paddings) */
+  /* Density */
   --density-compact: -2px;
   --density-comfortable: 0px;
   --density-spacious: 4px;
 
-  /* ===== Typography ===== */
+  /* Typography */
+  --text-max-width: 65ch;
   --font-family:
     Roboto, Inter, ui-sans-serif, system-ui, 'Segoe UI', 'Helvetica Neue', Arial,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+
   --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
 
   --font-size-xs: 12px;
@@ -149,11 +243,10 @@
   --font-size-xl: 24px;
   --font-size-2xl: 30px;
 
-  /* Fluid helpers (optional) */
   --font-size-fluid-sm: clamp(14px, 1.2vw, 16px);
   --font-size-fluid-lg: clamp(18px, 1.6vw, 22px);
 
-  --font-weight-regular: 400;
+  --font-weight-default: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
@@ -171,7 +264,7 @@
   --breadcrumb-transform: none;
   --tab-label-transform: none;
 
-  /* ===== Motion ===== */
+  /* Motion */
   --transition-fast: 150ms;
   --transition-normal: 250ms;
   --transition-slow: 400ms;
@@ -181,18 +274,19 @@
   --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
   --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
 
-  /* ===== Elevation & Overlay ===== */
+  /* Elevation & Overlay */
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
 
   --overlay-scrim: rgba(0, 0, 0, 0.5);
   --backdrop-blur: 8px;
 
-  /* ===== Layers ===== */
+  /* Layers */
   --z-base: 0;
+  --z-backdrop: 1245;
   --z-dropdown: 1000;
   --z-sticky: 1100;
   --z-banner: 1150;
@@ -202,7 +296,7 @@
   --z-tooltip: 1400;
   --z-toast: 1500;
 
-  /* ===== Data Visualization (optional but handy for tags/charts) ===== */
+  /* Data viz */
   --viz-cat-1: #2563eb;
   --viz-cat-2: #16a34a;
   --viz-cat-3: #f59e0b;
@@ -214,17 +308,17 @@
   --viz-seq-mid: #60a5fa;
   --viz-seq-end: #1d4ed8;
 
-  /* ===== Components: Skeletons & Loaders ===== */
+  /* Skeletons & loaders */
   --skeleton-base: #e5e7eb;
   --skeleton-pulse: #f3f4f6;
   --spinner-size: 16px;
   --spinner-stroke: 2px;
 
-  /* ===== Directionality / Logical Spacing ===== */
-  --space-inline-sm: 8px; /* use with margin-inline, padding-inline, etc. */
+  /* Logical spacing */
+  --space-inline-sm: 8px;
 }
 
-/* ===== Accessibility: Reduced Motion (light only) ===== */
+/* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root {
     --transition-fast: 1ms;
@@ -237,9 +331,10 @@
   }
 }
 
-/* ===== Optional: High-Contrast Variant (still light) ===== */
+/* High-contrast variant */
 :root[data-contrast='high'] {
-  --color-border: #4b5563;
+  --color-border-subtle: #4b5563;
+  --color-border-default: #374151;
   --color-border-strong: #111827;
   --focus-ring: 0 0 0 3px #111827;
 }

package/dist/styles/themes/forfatterweb/light.css

@@ -63,7 +63,7 @@
   --border-radius-round: 50%;
 
   /* Typography */
-  --font-family: Roboto, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-family: Roboto, -apple-system, 'Segoe UI', Roboto, sans-serif;
   --font-family-mono: ui-monospace, SFMono-Regular, monospace;
 
   --font-size-xs: 0.75rem;

package/dist/styles/themes/types.js

@@ -1 +1 @@
-
+export {};

package/dist/types/a11y-props.types.d.ts

@@ -1,8 +1,8 @@
 export type A11yProps = {
-    "aria-label"?: string;
-    "aria-describedby"?: string;
-    "aria-controls"?: string;
-    "aria-current"?: "page" | "step" | "location" | "date" | "time" | "true" | "false";
-    "aria-hidden"?: boolean;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-controls'?: string;
+    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
+    'aria-hidden'?: boolean;
     title?: string;
 };

package/dist/types/a11y-props.types.js

@@ -1 +1 @@
-
+export {};

package/dist/types/sizes.types.d.ts

@@ -1,2 +1,2 @@
-export type Size = "sm" | "md" | "lg" | "xl";
-export type SizeVariable = "var(--component-size-sm)" | "var(--component-size-md)" | "var(--component-size-lg)" | "var(--component-size-xl)";
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SizeVariable = 'var(--component-size-xs)' | 'var(--component-size-sm)' | 'var(--component-size-md)' | 'var(--component-size-lg)' | 'var(--component-size-xl)';

package/dist/types/sizes.types.js

@@ -1 +1 @@
-
+export {};

package/dist/utils/arrays/nested-filtering.js

@@ -1,38 +1,48 @@
-const normalize = (s) => s.normalize("NFKC").toLowerCase().trim();
+const normalize = (s) => s.normalize('NFKC').toLowerCase().trim();
 const toTerms = (q) => (Array.isArray(q) ? q : q.split(/\s+/)).map(normalize).filter(Boolean);
-const valueToSearchable = (value) => typeof value === "string" ? value : Array.isArray(value) || typeof value === "object" ? JSON.stringify(value) : value == null ? "" : String(value);
+const valueToSearchable = (value) => typeof value === 'string'
+    ? value
+    : Array.isArray(value) || typeof value === 'object'
+        ? JSON.stringify(value)
+        : value == null
+            ? ''
+            : String(value);
 const itemMatches = (item, keys, terms, mode) => {
-  if (terms.length === 0) return true;
-  const haystack = keys.map((k) => valueToSearchable(item[k])).join(" ").toString();
-  const h = normalize(haystack);
-  const hit = (t) => h.includes(t);
-  return mode === "AND" ? terms.every(hit) : terms.some(hit);
+    if (terms.length === 0)
+        return true;
+    const haystack = keys
+        .map(k => valueToSearchable(item[k]))
+        .join(' ')
+        .toString();
+    const h = normalize(haystack);
+    const hit = (t) => h.includes(t);
+    return mode === 'AND' ? terms.every(hit) : terms.some(hit);
 };
-function nestedFiltering(items, opts) {
-  const { keys, query, includeParents = true, childrenKey, mode = "AND" } = opts;
-  const ck = childrenKey != null ? childrenKey : "children";
-  const terms = toTerms(query);
-  const searchNested = (list) => {
-    const out = [];
-    for (const item of list) {
-      const children = item[ck] || [];
-      const filteredChildren = searchNested(children);
-      const matchedSelf = itemMatches(item, keys, terms, mode);
-      if (matchedSelf) {
-        const clone = { ...item, [ck]: filteredChildren };
-        out.push(clone);
-      } else if (filteredChildren.length) {
-        if (includeParents) {
-          const clone = { ...item, [ck]: filteredChildren };
-          out.push(clone);
-        } else {
-          out.push(...filteredChildren);
+export function nestedFiltering(items, opts) {
+    const { keys, query, includeParents = true, childrenKey, mode = 'AND' } = opts;
+    const ck = (childrenKey !== null && childrenKey !== void 0 ? childrenKey : 'children');
+    const terms = toTerms(query);
+    const searchNested = (list) => {
+        const out = [];
+        for (const item of list) {
+            const children = item[ck] || [];
+            const filteredChildren = searchNested(children);
+            const matchedSelf = itemMatches(item, keys, terms, mode);
+            if (matchedSelf) {
+                const clone = { ...item, [ck]: filteredChildren };
+                out.push(clone);
+            }
+            else if (filteredChildren.length) {
+                if (includeParents) {
+                    const clone = { ...item, [ck]: filteredChildren };
+                    out.push(clone);
+                }
+                else {
+                    out.push(...filteredChildren);
+                }
+            }
         }
-      }
-    }
-    return out;
-  };
-  return searchNested(items);
+        return out;
+    };
+    return searchNested(items);
 }
-
-export { nestedFiltering };

package/dist/utils/date/formatDate.js

@@ -1,17 +1,26 @@
-function formatDate(date, options = {}) {
-  const d = date instanceof Date ? date : new Date(date);
-  if (isNaN(d.getTime())) return "";
-  const pad = (n) => n.toString().padStart(2, "0");
-  const day = pad(d.getDate());
-  const month = pad(d.getMonth() + 1);
-  const year = d.getFullYear();
-  const base = `${day}/${month}/${year}`;
-  if (!options.showTime) return base;
-  const hours = pad(d.getHours());
-  const minutes = pad(d.getMinutes());
-  if (!options.showSeconds) return `${base} ${hours}:${minutes}`;
-  const seconds = pad(d.getSeconds());
-  return `${base} ${hours}:${minutes}:${seconds}`;
+/**
+ * Formats a Date as "dd:mm:yyyy" or "dd:mm:yyyy hh:mm:ss".
+ * All parts are zero-padded numbers.
+ *
+ * @param date - The Date or date-parsable value to format
+ * @param options.showSeconds - If true, append time "hh:mm:ss"
+ * @returns A formatted string
+ */
+export function formatDate(date, options = {}) {
+    const d = date instanceof Date ? date : new Date(date);
+    if (isNaN(d.getTime()))
+        return '';
+    const pad = (n) => n.toString().padStart(2, '0');
+    const day = pad(d.getDate());
+    const month = pad(d.getMonth() + 1);
+    const year = d.getFullYear();
+    const base = `${day}/${month}/${year}`;
+    if (!options.showTime)
+        return base;
+    const hours = pad(d.getHours());
+    const minutes = pad(d.getMinutes());
+    if (!options.showSeconds)
+        return `${base} ${hours}:${minutes}`;
+    const seconds = pad(d.getSeconds());
+    return `${base} ${hours}:${minutes}:${seconds}`;
 }
-
-export { formatDate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -42,19 +42,19 @@
     "README.md"
   ],
   "scripts": {
-    "build:js": "tsup",
-    "build:types": "tsc -p tsconfig.build.json",
-    "build": "npm run build:js && npm run build:types",
-    "dev": "tsup --watch",
-    "test": "vitest",
+    "clean": "rimraf dist",
+    "build": "npm run clean && npm run build:code && npm run postbuild",
+    "build:code": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "test": "jest",
+    "format": "prettier . --write",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings=0",
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run build && npm run typecheck",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
     "pack-it": "npm run build && npm pack",
     "postbuild": "cpy \"src/**/*.css\" dist --parents && cpy \"src/styles/styles.css\" dist && cpy \"src/styles/fonts/**/*\" dist/styles/fonts",
     "yalc:publish": "npm run build && yalc publish --push",
@@ -62,10 +62,10 @@
     "yalc:watch": "chokidar 'src/**/*' -c 'npm run yalc:push'"
   },
   "peerDependencies": {
-    "@tanstack/react-table": "^8.20.0",
-    "lucide-react": "^0.542.0",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "@tanstack/react-table": "^8.21.3",
+    "lucide-react": "^0.543.0",
+    "react": "^19.2.0 || ^19.0.0",
+    "react-dom": "^19.2.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-table": {
@@ -74,32 +74,47 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.6",
+    "@mdx-js/react": "^3.1.1",
     "@storybook/addon-a11y": "^9.1.3",
-    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.17",
     "@storybook/addon-viewport": "^9.0.8",
     "@storybook/react-vite": "^9.1.3",
+    "@swc/core": "^1.15.11",
+    "@swc/jest": "^0.2.39",
     "@tanstack/react-table": "^8.20.0",
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^30.0.0",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "@types/testing-library__jest-dom": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^8.41.0",
     "@typescript-eslint/parser": "^8.41.0",
+    "@vitejs/plugin-react": "^5.1.3",
     "cpy-cli": "^6.0.0",
     "esbuild-css-modules-plugin": "^3.1.5",
     "esbuild-plugin-css-modules": "^0.3.0",
     "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^17.3.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "jsdom": "^26.1.0",
     "prettier": "^3.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "rimraf": "^6.1.2",
     "storybook": "^9.1.3",
+    "tsc-alias": "^1.8.16",
     "tsup": "^8.5.0",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "vite": "^6.3.5",
+    "vite-tsconfig-paths": "^6.0.5",
     "vitest": "^3.2.4"
   },
   "engines": {