baseline-kit 2.0.0 → 2.1.0

package/dist/styles.css

@@ -1 +1 @@
-.spacer_Wdw6F{position:relative;width:var(--bk-spacer-width);height:var(--bk-spacer-height);flex-shrink:0}.line_lUa33:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bk-spacer-color-line);z-index:calc(var(--bk-z-index-outline))}.flat_zXVQF{background-color:var(--bk-spacer-color-flat)}.padder_HhtrA{position:relative;display:flex;flex-direction:column;width:var(--bk-padder-width, fit-content);height:var(--bk-padder-height, fit-content)}.visible_PJmPU:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bk-padder-color);pointer-events:none;z-index:var(--bk-z-index-outline)}.layout_Re9ui{position:relative;box-sizing:border-box;width:var(--bk-layout-width, fit-content);height:var(--bk-layout-height, fit-content)}.visible_plo0X:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bk-layout-color-line);pointer-events:none;z-index:var(--bk-z-index-overlay)}.box_LHy8B{position:relative;width:var(--bk-box-width, fit-content);height:var(--bk-box-height, fit-content)}.visible_VOFS8:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bk-box-color-line);pointer-events:none;z-index:var(--bk-z-index-outline)}.stack_sXiLu{position:relative;width:var(--bk-stack-width, 100%);height:var(--bk-stack-height, fit-content)}.visible_0IBG0:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bk-stack-color-line);pointer-events:none;z-index:var(--bk-z-index-overlay)}.guide_gY3kY{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:var(--bk-guide-padding-block) var(--bk-guide-padding-inline)}.line_xcGxq{left:-.5px}.columns_eQm6d{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;gap:var(--bk-guide-gap);grid-template-columns:var(--bk-guide-template);justify-content:var(--bk-guide-justify);width:var(--bk-width-full);height:var(--bk-height-full)}.column_mYoBn{min-width:0;width:var(--bk-width-full);height:var(--bk-height-full)}.column_mYoBn[data-variant=line]{width:1px;background-color:var(--bk-guide-color-line)}.column_mYoBn[data-variant=pattern]{background-color:var(--bk-guide-color-pattern)}.column_mYoBn[data-variant=auto]{background-color:var(--bk-guide-color-auto)}.column_mYoBn[data-variant=fixed]{background-color:var(--bk-guide-color-fixed)}.baseline_CUi4a{position:absolute;right:0;left:0;pointer-events:none;top:0;bottom:0}
+.spr_zbcF6{position:relative;width:var(--bksw);height:var(--bksh);flex-shrink:0}.line_qHW69:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkscl);z-index:calc(var(--bkzi))}.flat_gqixr{background-color:var(--bkscf)}.pad_w2-sL{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;width:var(--bkpw, auto);height:var(--bkph, auto)}.lay_Ew8za .line_ESlzk:after,.stk_7SJoE .line_ESlzk:after{border:none}.v_lhGBy:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkpc, var(--bk-padder-color-theme));pointer-events:none;z-index:var(--bkzi)}.lay_5cMu5{display:grid;position:relative;box-sizing:border-box;width:var(--bklw, auto);height:var(--bklh, auto);grid-template-columns:var(--bklgtc, repeat(auto-fit, minmax(100px, 1fr)));grid-template-rows:var(--bklgtr, auto);gap:var(--bklg);column-gap:var(--bklcg);row-gap:var(--bklrg);justify-items:var(--bklji);align-items:var(--bklai);justify-content:var(--bkljc);align-content:var(--bklac)}.lay_5cMu5 .line_j2f8-:after,.stk_3Spwo .line_j2f8-:after{border:none}.v_dprVE:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bklcl);pointer-events:none;z-index:var(--bkzio)}.box_rDCRX{position:relative;width:var(--bkxw);height:var(--bkxh)}.v_0MMHD:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkxcl);pointer-events:none;z-index:var(--bkzi)}.stk_l-58l{display:flex;position:relative;width:var(--bkkw, auto);height:var(--bkkh, auto)}.lay_zNlaC .line_THMgb:after,.stk_l-58l .line_THMgb:after{border:none}.v_-k3qw:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkkcl);pointer-events:none;z-index:var(--bkzio)}.gde_-Naxo{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:var(--bkgpb) var(--bkgpi)}.line_-VS-e{left:-.5px}.cols_8lD6D{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;gap:var(--bkgg);grid-template-columns:var(--bkgt);justify-content:var(--bkgj);width:var(--bkwf);height:var(--bkhf)}.col_rlbsL{min-width:0;width:var(--bkwf);height:var(--bkhf)}.col_rlbsL[data-variant=line]{width:1px;background-color:var(--bkgcl)}.col_rlbsL[data-variant=pattern]{background-color:var(--bkgcp)}.col_rlbsL[data-variant=auto]{background-color:var(--bkgca)}.col_rlbsL[data-variant=fixed]{background-color:var(--bkgcf)}.bas_e-SXr{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;width:var(--bkbw);height:var(--bkbh);overflow:hidden}.row_q-FZb{left:0;right:0;position:absolute;top:var(--bkrt);height:var(--bkrh);background-color:var(--bkbcl)}

package/dist/theme.css

@@ -0,0 +1,140 @@
+/**
+ * Baseline Kit Theme System
+ *
+ * Organization:
+ * 1. Color Palette (HSL values)
+ * 2. Component Theme Colors
+ * 3. Dark Mode Overrides
+ */
+
+:root {
+   /* ───────────────────────────────────────────────────────
+      Color Palette - Light Theme
+      - Primary: More muted/dimmed colors
+      - Secondary: Brighter, more vibrant colors
+   ─────────────────────────────────────────────────────── */
+
+   /* Neutral Colors */
+   --bk-color-black-primary: 0, 0%, 10%; /* #1A1A1A */
+   --bk-color-black-secondary: 0, 10%, 30%; /* #544545 */
+   --bk-color-white-primary: 0, 100%, 90%; /* #FFCCCC */
+   --bk-color-white-secondary: 0, 0%, 90%; /* #E6E6E6 */
+
+   /* Brand Colors */
+   --bk-color-pink-primary: 300, 60%, 40%; /* #A329A3 */
+   --bk-color-pink-secondary: 260, 100%, 70%; /* #9966FF */
+   --bk-color-purple-primary: 270, 60%, 40%; /* #6629A3 */
+   --bk-color-purple-secondary: 230, 100%, 70%; /* #6680FF */
+   --bk-color-blue-primary: 240, 60%, 40%; /* #2929A3 */
+   --bk-color-blue-secondary: 200, 100%, 70%; /* #66CCFF */
+
+   /* Supporting Colors */
+   --bk-color-cyan-primary: 200, 60%, 40%; /* #297AA3 */
+   --bk-color-cyan-secondary: 160, 100%, 70%; /* #66FFCC */
+   --bk-color-green-primary: 160, 60%, 40%; /* #29A37A */
+   --bk-color-green-secondary: 110, 100%, 70%; /* #80FF66 */
+   --bk-color-yellow-primary: 30, 60%, 40%; /* #A36629 */
+   --bk-color-yellow-secondary: 70, 100%, 70%; /* #A36629 */
+   --bk-color-orange-primary: 10, 60%, 40%; /* #A33D29 */
+   --bk-color-orange-secondary: 30, 100%, 70%; /* #FFB266 */
+   --bk-color-red-primary: 330, 60%, 40%; /* #A32966 */
+   --bk-color-red-secondary: 0, 100%, 70%; /* #FF6666 */
+
+   /* ───────────────────────────────────────────────────────
+      Component Theme Colors - Light
+      Using consistent alpha values:
+      - Line: 0.6 (borders)
+      - Flat: 0.2 (backgrounds)
+      - text: 0.9-1.0 (indicators)
+   ─────────────────────────────────────────────────────── */
+
+   /* Guide Component Theme */
+   --bk-guide-color-line-theme: hsla(var(--bk-color-blue-primary), 0.15);
+   --bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), 0.2);
+   --bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), 0.15);
+   --bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), 0.15);
+
+   /* Baseline Component Theme */
+   --bk-baseline-color-line-theme: hsla(var(--bk-color-blue-primary), 0.15);
+   --bk-baseline-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.2);
+
+   /* Spacer Component Theme */
+   --bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), 0.6);
+   --bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.2);
+   --bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1);
+
+   /* Box Component Theme */
+   --bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), 0.6);
+   --bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), 0.2);
+   --bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), 0.9);
+
+   /* Stack Component Theme */
+   --bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+   --bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.2);
+   --bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+
+   /* Layout Component Theme */
+   --bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+   --bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.2);
+   --bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+
+   /* Padder Component Theme */
+   --bk-padder-color-theme: hsla(var(--bk-color-purple-primary), 0.6);
+}
+
+/* ───────────────────────────────────────────────────────
+   Dark Theme
+   - Inverts Primary/Secondary relationships
+   - Adjusts alpha values for better contrast
+─────────────────────────────────────────────────────── */
+
+@media (prefers-color-scheme: dark) {
+   :root {
+      /* Neutral Colors - Dark */
+      --bk-color-black-primary: 0, 10%, 30%; /* #544545 */
+      --bk-color-black-secondary: 0, 0%, 10%; /* #1A1A1A */
+      --bk-color-white-primary: 0, 0%, 90%; /* #E6E6E6 */
+      --bk-color-white-secondary: 0, 100%, 90%; /* #FFCCCC */
+
+      /* Brand Colors - Dark */
+      --bk-color-pink-primary: 260, 100%, 70%; /* #9966FF */
+      --bk-color-pink-secondary: 300, 60%, 40%; /* #A329A3 */
+      --bk-color-purple-primary: 230, 100%, 70%; /* #6680FF */
+      --bk-color-purple-secondary: 270, 60%, 40%; /* #6629A3 */
+      --bk-color-blue-primary: 200, 100%, 70%; /* #66CCFF */
+      --bk-color-blue-secondary: 240, 60%, 40%; /* #2929A3 */
+
+      /* Supporting Colors - Dark */
+      --bk-color-cyan-primary: 160, 100%, 70%; /* #66FFCC */
+      --bk-color-cyan-secondary: 200, 60%, 40%; /* #297AA3 */
+      --bk-color-green-primary: 110, 100%, 70%; /* #80FF66 */
+      --bk-color-green-secondary: 160, 60%, 40%; /* #29A37A */
+      --bk-color-yellow-primary: 70, 100%, 70%; /* #A36629 */
+      --bk-color-yellow-secondary: 30, 60%, 40%; /* #A36629 */
+      --bk-color-orange-primary: 30, 100%, 70%; /* #FFB266 */
+      --bk-color-orange-secondary: 10, 60%, 40%; /* #A33D29 */
+      --bk-color-red-primary: 0, 100%, 70%; /* #FF6666 */
+      --bk-color-red-secondary: 330, 60%, 40%; /* #A32966 */
+
+      /* Component Theme Overrides - Dark */
+      --bk-baseline-color-line-theme: hsla(var(--bk-color-white-primary), 0.1);
+      --bk-baseline-color-flat-theme: hsla(var(--bk-color-white-secondary), 0.2);
+
+      --bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), 0.6);
+      --bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), 0.3);
+      --bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), 0.9);
+
+      --bk-guide-color-line-theme: hsla(var(--bk-color-white-primary), 0.1);
+      --bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), 0.25);
+      --bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), 0.2);
+      --bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), 0.2);
+
+      --bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+      --bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.3);
+      --bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+
+      --bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+      --bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.3);
+      --bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+   }
+}

package/dist/utils/convert.d.ts

@@ -1,8 +1,3 @@
-/**
- * @file convert.ts
- * @description Unit conversion and dimension calculation utilities
- * @module utils
- */
 export interface ConversionContext {
     /** Parent element dimension for relative units */
     parentSize?: number;

package/dist/utils/grid.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @file grid.ts
+ * @description Grid layout utilities
+ * @module utils
+ */
+import * as React from 'react';
+/**
+ * Creates grid span styles based on span props.
+ * Handles both combined span and individual col/row span values.
+ *
+ * @param span - Optional equal span for both rows and columns
+ * @param colSpan - Optional column span value
+ * @param rowSpan - Optional row span value
+ * @returns CSS properties object with grid span values
+ *
+ * @example
+ * ```ts
+ * createGridSpanStyles(2) // => { gridColumn: "span 2", gridRow: "span 2" }
+ * createGridSpanStyles(undefined, 3, 2) // => { gridColumn: "span 3", gridRow: "span 2" }
+ * ```
+ */
+export declare const createGridSpanStyles: (span?: number, colSpan?: number, rowSpan?: number) => React.CSSProperties;

package/dist/utils/index.d.ts

@@ -8,6 +8,8 @@ export * from './math';
 export * from './normalize';
 export * from './padding';
 export * from './snapping';
+export * from './grid';
 export * from './merge';
 export * from './parse';
 export * from './timing';
+export * from './ssr';

package/dist/utils/math.d.ts

@@ -1,8 +1,3 @@
-/**
- * @file math.ts
- * @description Mathematical calculation utilities
- * @module utils
- */
 /**
  * Calculates the modulo (remainder) of a CSS value when divided by a base unit.
  *
@@ -62,3 +57,29 @@ export declare function clamp(value: number, min: number, max: number): number;
  * ```
  */
 export declare function round(value: number, precision?: number): number;
+/** Parameters for row count calculation */
+type RowCountParams = {
+    /** Available height for the container */
+    height?: number;
+    /** Top padding/offset value */
+    top: number;
+    /** Bottom padding/offset value */
+    bottom: number;
+    /** Base unit for calculations */
+    base: number;
+};
+/**
+ * Calculates the number of rows that fit in the available space.
+ * Ensures at least one row is always returned.
+ *
+ * @param params - Parameters for calculation
+ * @returns Number of rows that fit in the space
+ *
+ * @example
+ * ```ts
+ * calculateRowCount({ height: 100, top: 10, bottom: 10, base: 8 }) // => 10
+ * calculateRowCount({ height: 20, top: 0, bottom: 0, base: 8 }) // => 2
+ * ```
+ */
+export declare function calculateRowCount(params: RowCountParams): number;
+export {};

package/dist/utils/merge.d.ts

@@ -1,8 +1,3 @@
-/**
- * @file merge.ts
- * @description Style and class merging utilities
- * @module utils
- */
 import * as React from 'react';
 /**
  * Combines class names, filtering out falsy values.
@@ -66,3 +61,57 @@ export declare const mergeStyles: <T extends React.CSSProperties>(...styles: Arr
  * ```
  */
 export declare function mergeRefs<T>(...refs: Array<React.Ref<T> | null | undefined>): React.RefCallback<T>;
+/**
+ * Parameters for creating a style override
+ */
+export type StyleOverrideParams = {
+    /** CSS variable key to potentially override */
+    key: string;
+    /** Value to use if override is needed */
+    value: string;
+    /** Default styles to compare against */
+    defaultStyles: Record<string, string>;
+    /** Special case dimensions that should be skipped for specific values */
+    skipDimensions?: {
+        /** Dimensions that should be skipped when they're set to "fit-content" */
+        fitContent?: string[];
+        /** Dimensions that should be skipped when they're set to "auto" */
+        auto?: string[];
+        /** Dimensions that should be skipped when they're set to % values (like "100%") */
+        fullSize?: string[];
+    };
+};
+/**
+ * Creates style overrides for CSS variables, conditionally based on comparison to defaults.
+ * Only applies overrides when the value differs from the default, optimizing style objects.
+ *
+ * @param params - Style override parameters or individual arguments
+ * @param value
+ * @param defaultStyles
+ * @returns Style object with override (if needed)
+ *
+ * @example
+ * ```ts
+ * // Object parameter style:
+ * createStyleOverride({
+ *   key: '--color',
+ *   value: 'red',
+ *   defaultStyles: { '--color': 'blue' }
+ * })
+ * // => { '--color': 'red' }
+ *
+ * // With dimension skipping:
+ * createStyleOverride({
+ *   key: '--width',
+ *   value: 'fit-content',
+ *   defaultStyles: { '--width': 'auto' },
+ *   skipDimensions: { fitContent: ['--width', '--height'] }
+ * })
+ * // => {}
+ *
+ * // Legacy style with separate arguments:
+ * createStyleOverride('--color', 'red', { '--color': 'blue' })
+ * // => { '--color': 'red' }
+ * ```
+ */
+export declare function createStyleOverride(params: StyleOverrideParams | string, value?: string, defaultStyles?: Record<string, string>): Record<string, string | number>;

package/dist/utils/parse.d.ts

@@ -1,8 +1,3 @@
-/**
- * @file parse.ts
- * @description CSS value parsing utilities
- * @module utils
- */
 /**
  * Parses a CSS unit string into its numeric value and unit.
  *

package/dist/utils/snapping.d.ts

@@ -1,8 +1,3 @@
-/**
- * @file snapping.ts
- * @description Baseline grid snapping utilities
- * @module utils
- */
 import { SnappingMode, Padding, PaddingValue } from '@components';
 /**
  * Calculates spacing adjustments to maintain baseline grid alignment.

package/dist/utils/ssr.d.ts

@@ -0,0 +1,33 @@
+/**
+ * SSR (Server-Side Rendering) utility functions for baseline-kit.
+ * These functions help ensure consistent rendering between server and client.
+ */
+/**
+ * Detects if code is running in a server-side environment
+ */
+export declare const isSSR: boolean;
+/**
+ * Default dimensions to use during server-side rendering
+ * These values provide stable rendering between server and client
+ * during the initial hydration phase.
+ */
+export declare const SSR_DIMENSIONS: {
+    width: number;
+    height: number;
+};
+/**
+ * Safe window-using function that works in both server and client
+ * @param clientFn Function that uses window/browser APIs
+ * @param fallback Fallback value to use in SSR environment
+ * @returns Result of clientFn in browser, fallback in SSR
+ */
+export declare function safeClientValue<T>(clientFn: () => T, fallback: T): T;
+/**
+ * Returns a stable value during SSR and initial render, then switches to
+ * the dynamic value after hydration
+ * @param isHydrated Boolean indicating if component is hydrated
+ * @param ssrValue Value to use during SSR/initial render
+ * @param dynamicValue Value to use after hydration
+ * @returns Appropriate value based on hydration state
+ */
+export declare function hydratedValue<T>(isHydrated: boolean, ssrValue: T, dynamicValue: T): T;

package/dist/utils/timing.d.ts

@@ -1,8 +1,3 @@
-/**
- * @file timing.ts
- * @description Performance optimization utilities
- * @module utils
- */
 /**
  * Creates a debounced version of a function.
  *
@@ -25,7 +20,7 @@
  * window.addEventListener('resize', handleResize);
  * ```
  */
-export declare const debounce: <T extends (...args: unknown[]) => void>(fn: T, delay: number) => T;
+export declare const debounce: <T extends (...args: unknown[]) => void>(fn: T, delay: number) => [T, () => void];
 /**
  * Creates a requestAnimationFrame-based throttled function.
  *
@@ -47,4 +42,4 @@ export declare const debounce: <T extends (...args: unknown[]) => void>(fn: T, d
  * document.addEventListener('scroll', updateScroll);
  * ```
  */
-export declare const rafThrottle: <T extends (...args: unknown[]) => void>(fn: T) => T;
+export declare const rafThrottle: <T extends (...args: never[]) => void>(fn: T) => T;

package/package.json

@@ -1,24 +1,22 @@
 {
   "scripts": {
-    "lint": "eslint src/lib --fix",
+    "build": "vite build && bun run build:type",
     "build:type": "tsc -p tsconfig.build.json",
-    "prepare": "bun run build && bun run build:type",
-    "version": "changeset version",
-    "test:coverage": "vitest run --coverage",
-    "release": "changeset publish",
-    "typecheck": "tsc --noEmit",
-    "test:ui": "vitest --ui",
+    "changeset": "changeset",
     "dev": "vite",
-    "test:ci": "vitest run",
-    "format": "prettier --write \"src/lib/**/*.{ts,tsx,css}\"",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "lint": "eslint src --fix",
+    "prepare": "bun run build && bun run build:type",
     "prepublishOnly": "bun run build && bun run build:type",
-    "changeset": "changeset",
+    "release": "changeset publish",
     "test": "vitest",
-    "build": "vite build"
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "version": "changeset version"
   },
   "peerDependencies": {
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "react": "^19",
+    "react-dom": "^19",
     "typescript": "^5.7.3"
   },
   "main": "dist/index.cjs",
@@ -48,16 +46,16 @@
     "url": "git+https://github.com/dnvt/baseline-kit.git"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.12",
+    "@changesets/cli": "^2.28.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
-    "@types/node": "^22.13.0",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-react-swc": "^3.7.2",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@types/node": "^22.13.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "@vitest/coverage-v8": "^2.1.9",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
     "eslint": "^8.57.1",
@@ -65,16 +63,16 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^4.6.2",
     "jsdom": "^25.0.1",
-    "prettier": "^3.4.2",
-    "rollup": "^4.34.0",
+    "prettier": "^3.5.2",
+    "rollup": "^4.34.8",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-visualizer": "^5.14.0",
-    "vite": "^6.1.0",
+    "vite": "^6.2.0",
     "vite-plugin-static-copy": "^2.2.0",
-    "vitest": "^2.1.8"
+    "vitest": "^3.0.7"
   },
   "name": "baseline-kit",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "homepage": "https://github.com/dnvt/baseline-kit#readme",
   "types": "dist/index.d.ts",
@@ -82,9 +80,22 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.mjs"
+    },
+    "./styles": {
+      "import": "./dist/styles.css",
+      "require": "./dist/styles.css",
+      "default": "./dist/styles.css"
+    },
+    "./theme": {
+      "import": "./dist/theme.css",
+      "require": "./dist/theme.css",
+      "default": "./dist/theme.css"
     },
-    "./styles.css": "./dist/styles.css"
+    "./dist/styles.css": "./dist/styles.css",
+    "./dist/theme.css": "./dist/theme.css",
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
@@ -93,7 +104,8 @@
   ],
   "style": "dist/styles.css",
   "sideEffects": [
-    "dist/styles.css"
+    "dist/styles.css",
+    "dist/theme.css"
   ],
   "bugs": {
     "url": "https://github.com/dnvt/baseline-kit/issues"
@@ -101,13 +113,12 @@
   "license": "MIT",
   "module": "dist/index.mjs",
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "access": "public"
   },
   "author": "Francois Denavaut",
   "description": "Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible spacing components, and theme-aware configuration—all optimized for performance and built with TypeScript.",
   "dependencies": {
     "esbuild": "^0.24.2",
-    "postcss-preset-env": "^10.1.3"
+    "postcss-preset-env": "^10.1.5"
   }
 }