baseline-kit 2.1.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +93 -17
- package/dist/README.md +93 -17
- package/dist/baseline-kit.css +151 -0
- package/dist/components/Baseline/Baseline.d.ts +0 -23
- package/dist/components/Box/Box.d.ts +14 -24
- package/dist/components/Config/Config.d.ts +25 -25
- package/dist/components/Config/defaults.d.ts +2 -2
- package/dist/components/Config/index.d.ts +1 -1
- package/dist/components/Guide/Guide.d.ts +2 -16
- package/dist/components/Guide/index.d.ts +0 -6
- package/dist/components/Guide/types.d.ts +1 -1
- package/dist/components/Layout/Layout.d.ts +0 -10
- package/dist/components/Padder/Padder.d.ts +8 -19
- package/dist/components/Spacer/Spacer.d.ts +0 -4
- package/dist/components/Stack/Stack.d.ts +2 -11
- package/dist/components/index.d.ts +4 -3
- package/dist/components/styles/index.d.ts +11 -0
- package/dist/components/types.d.ts +2 -2
- package/dist/hooks/useConfig.d.ts +3 -3
- package/dist/hooks/useIsClient.d.ts +6 -0
- package/dist/index.cjs +1 -31
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +25 -3
- package/dist/index.mjs +1454 -1848
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.d.ts +6 -0
- package/dist/theme/dark.css +67 -0
- package/dist/theme/default.css +82 -0
- package/dist/theme/tokens.css +82 -0
- package/dist/theme.css +116 -114
- package/dist/theme.d.ts +6 -0
- package/dist/utils/convert.d.ts +0 -17
- package/dist/utils/math.d.ts +0 -37
- package/dist/utils/normalize.d.ts +0 -35
- package/dist/utils/parse.d.ts +0 -29
- package/dist/utils/ssr.d.ts +0 -7
- package/package.json +51 -20
|
@@ -14,35 +14,9 @@ export interface NormalizationOptions {
|
|
|
14
14
|
/**
|
|
15
15
|
* Normalizes CSS values to a consistent format based on base unit.
|
|
16
16
|
*
|
|
17
|
-
* @remarks
|
|
18
|
-
* Handles:
|
|
19
|
-
* - CSS length values
|
|
20
|
-
* - Numeric values
|
|
21
|
-
* - Special values (auto)
|
|
22
|
-
* - Rounding to base unit
|
|
23
|
-
* - Value clamping
|
|
24
|
-
*
|
|
25
17
|
* @param value - Value to normalize
|
|
26
18
|
* @param options - Normalization configuration
|
|
27
19
|
* @returns Normalized numeric value
|
|
28
|
-
*
|
|
29
|
-
* @example
|
|
30
|
-
* ```ts
|
|
31
|
-
* // Base unit normalization
|
|
32
|
-
* normalizeValue(14, { base: 8 }) // => 16
|
|
33
|
-
*
|
|
34
|
-
* // With clamping
|
|
35
|
-
* normalizeValue(14, {
|
|
36
|
-
* base: 8,
|
|
37
|
-
* clamp: { min: 8, max: 24 }
|
|
38
|
-
* }) // => 16
|
|
39
|
-
*
|
|
40
|
-
* // Without rounding
|
|
41
|
-
* normalizeValue(14, {
|
|
42
|
-
* base: 8,
|
|
43
|
-
* round: false
|
|
44
|
-
* }) // => 14
|
|
45
|
-
* ```
|
|
46
20
|
*/
|
|
47
21
|
export declare function normalizeValue(value: string | number | undefined, options?: NormalizationOptions): number;
|
|
48
22
|
/**
|
|
@@ -52,14 +26,5 @@ export declare function normalizeValue(value: string | number | undefined, optio
|
|
|
52
26
|
* @param defaults - Default values if input is undefined
|
|
53
27
|
* @param options - Normalization options
|
|
54
28
|
* @returns Tuple of normalized values
|
|
55
|
-
*
|
|
56
|
-
* @example
|
|
57
|
-
* ```ts
|
|
58
|
-
* normalizeValuePair(
|
|
59
|
-
* ['14px', '20px'],
|
|
60
|
-
* [0, 0],
|
|
61
|
-
* { base: 8 }
|
|
62
|
-
* ) // => [16, 24]
|
|
63
|
-
* ```
|
|
64
29
|
*/
|
|
65
30
|
export declare function normalizeValuePair(values: [string | number | undefined, string | number | undefined] | undefined, defaults: [number, number], options?: NormalizationOptions): [number, number];
|
package/dist/utils/parse.d.ts
CHANGED
|
@@ -1,23 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Parses a CSS unit string into its numeric value and unit.
|
|
3
3
|
*
|
|
4
|
-
* @remarks
|
|
5
|
-
* Handles:
|
|
6
|
-
* - Integer and decimal values
|
|
7
|
-
* - All CSS units (px, em, rem, etc.)
|
|
8
|
-
* - Percentage values
|
|
9
|
-
* - Sign prefixes (+ and -)
|
|
10
|
-
*
|
|
11
4
|
* @param value - CSS value string to parse
|
|
12
5
|
* @returns Object with value and unit, or null if parsing fails
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* ```ts
|
|
16
|
-
* parseUnit('100px') // => { value: 100, unit: 'px' }
|
|
17
|
-
* parseUnit('1.5rem') // => { value: 1.5, unit: 'rem' }
|
|
18
|
-
* parseUnit('-20%') // => { value: -20, unit: '%' }
|
|
19
|
-
* parseUnit('invalid') // => null
|
|
20
|
-
* ```
|
|
21
6
|
*/
|
|
22
7
|
export declare function parseUnit(value: string): {
|
|
23
8
|
value: number;
|
|
@@ -26,22 +11,8 @@ export declare function parseUnit(value: string): {
|
|
|
26
11
|
/**
|
|
27
12
|
* Formats a value as a valid CSS string.
|
|
28
13
|
*
|
|
29
|
-
* @remarks
|
|
30
|
-
* Handles:
|
|
31
|
-
* - Numbers (adds px suffix)
|
|
32
|
-
* - Special values (auto, 100%, etc.)
|
|
33
|
-
* - Undefined values with defaults
|
|
34
|
-
*
|
|
35
14
|
* @param value - Value to format
|
|
36
15
|
* @param defaultValue - Optional default if value is undefined
|
|
37
16
|
* @returns Formatted CSS string
|
|
38
|
-
*
|
|
39
|
-
* @example
|
|
40
|
-
* ```ts
|
|
41
|
-
* formatValue(14) // => "14px"
|
|
42
|
-
* formatValue('auto') // => "auto"
|
|
43
|
-
* formatValue(undefined, 10) // => "10px"
|
|
44
|
-
* formatValue('1fr') // => "1fr"
|
|
45
|
-
* ```
|
|
46
17
|
*/
|
|
47
18
|
export declare function formatValue(value: string | number | undefined, defaultValue?: number): string;
|
package/dist/utils/ssr.d.ts
CHANGED
|
@@ -1,15 +1,9 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SSR (Server-Side Rendering) utility functions for baseline-kit.
|
|
3
|
-
* These functions help ensure consistent rendering between server and client.
|
|
4
|
-
*/
|
|
5
1
|
/**
|
|
6
2
|
* Detects if code is running in a server-side environment
|
|
7
3
|
*/
|
|
8
4
|
export declare const isSSR: boolean;
|
|
9
5
|
/**
|
|
10
6
|
* Default dimensions to use during server-side rendering
|
|
11
|
-
* These values provide stable rendering between server and client
|
|
12
|
-
* during the initial hydration phase.
|
|
13
7
|
*/
|
|
14
8
|
export declare const SSR_DIMENSIONS: {
|
|
15
9
|
width: number;
|
|
@@ -28,6 +22,5 @@ export declare function safeClientValue<T>(clientFn: () => T, fallback: T): T;
|
|
|
28
22
|
* @param isHydrated Boolean indicating if component is hydrated
|
|
29
23
|
* @param ssrValue Value to use during SSR/initial render
|
|
30
24
|
* @param dynamicValue Value to use after hydration
|
|
31
|
-
* @returns Appropriate value based on hydration state
|
|
32
25
|
*/
|
|
33
26
|
export declare function hydratedValue<T>(isHydrated: boolean, ssrValue: T, dynamicValue: T): T;
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"scripts": {
|
|
3
|
-
"build": "vite build && bun run build:type",
|
|
3
|
+
"build": "vite build && bun run build:type && bun run build:combine-css",
|
|
4
4
|
"build:type": "tsc -p tsconfig.build.json",
|
|
5
|
+
"build:combine-css": "node scripts/combine-css.js",
|
|
5
6
|
"changeset": "changeset",
|
|
6
7
|
"dev": "vite",
|
|
7
8
|
"format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
|
|
@@ -15,9 +16,9 @@
|
|
|
15
16
|
"version": "changeset version"
|
|
16
17
|
},
|
|
17
18
|
"peerDependencies": {
|
|
18
|
-
"react": "^19",
|
|
19
|
-
"react-dom": "^19",
|
|
20
|
-
"typescript": "^5.
|
|
19
|
+
"react": "^19.0.0",
|
|
20
|
+
"react-dom": "^19.0.0",
|
|
21
|
+
"typescript": "^5.8.2"
|
|
21
22
|
},
|
|
22
23
|
"main": "dist/index.cjs",
|
|
23
24
|
"engines": {
|
|
@@ -47,32 +48,34 @@
|
|
|
47
48
|
},
|
|
48
49
|
"devDependencies": {
|
|
49
50
|
"@changesets/cli": "^2.28.1",
|
|
51
|
+
"@eslint/js": "^9.21.0",
|
|
50
52
|
"@testing-library/jest-dom": "^6.6.3",
|
|
51
53
|
"@testing-library/react": "^16.2.0",
|
|
52
|
-
"@types/node": "^22.13.
|
|
54
|
+
"@types/node": "^22.13.9",
|
|
53
55
|
"@types/react": "^19.0.10",
|
|
54
56
|
"@types/react-dom": "^19.0.4",
|
|
55
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
56
|
-
"@typescript-eslint/parser": "^8.
|
|
57
|
+
"@typescript-eslint/eslint-plugin": "^8.26.0",
|
|
58
|
+
"@typescript-eslint/parser": "^8.26.0",
|
|
57
59
|
"@vitejs/plugin-react-swc": "^3.8.0",
|
|
58
|
-
"@vitest/coverage-v8": "^
|
|
60
|
+
"@vitest/coverage-v8": "^3.0.8",
|
|
59
61
|
"autoprefixer": "^10.4.20",
|
|
60
62
|
"cssnano": "^7.0.6",
|
|
61
|
-
"eslint": "^
|
|
62
|
-
"eslint-config-prettier": "^
|
|
63
|
+
"eslint": "^9.0.0",
|
|
64
|
+
"eslint-config-prettier": "^10.1.1",
|
|
65
|
+
"eslint-plugin-prettier": "^5.2.3",
|
|
63
66
|
"eslint-plugin-react": "^7.37.4",
|
|
64
|
-
"eslint-plugin-react-hooks": "^
|
|
65
|
-
"jsdom": "^
|
|
66
|
-
"prettier": "^3.5.
|
|
67
|
-
"rollup": "^4.34.
|
|
67
|
+
"eslint-plugin-react-hooks": "^5.2.0",
|
|
68
|
+
"jsdom": "^26.0.0",
|
|
69
|
+
"prettier": "^3.5.3",
|
|
70
|
+
"rollup": "^4.34.9",
|
|
68
71
|
"rollup-plugin-dts": "^6.1.1",
|
|
69
72
|
"rollup-plugin-visualizer": "^5.14.0",
|
|
70
|
-
"vite": "
|
|
71
|
-
"vite-plugin-static-copy": "^2.
|
|
72
|
-
"vitest": "
|
|
73
|
+
"vite": "6.2.1",
|
|
74
|
+
"vite-plugin-static-copy": "^2.3.0",
|
|
75
|
+
"vitest": "3.0.8"
|
|
73
76
|
},
|
|
74
77
|
"name": "baseline-kit",
|
|
75
|
-
"version": "
|
|
78
|
+
"version": "3.0.1",
|
|
76
79
|
"type": "module",
|
|
77
80
|
"homepage": "https://github.com/dnvt/baseline-kit#readme",
|
|
78
81
|
"types": "dist/index.d.ts",
|
|
@@ -93,8 +96,32 @@
|
|
|
93
96
|
"require": "./dist/theme.css",
|
|
94
97
|
"default": "./dist/theme.css"
|
|
95
98
|
},
|
|
99
|
+
"./theme/default": {
|
|
100
|
+
"import": "./dist/theme/default.css",
|
|
101
|
+
"require": "./dist/theme/default.css",
|
|
102
|
+
"default": "./dist/theme/default.css"
|
|
103
|
+
},
|
|
104
|
+
"./theme/dark": {
|
|
105
|
+
"import": "./dist/theme/dark.css",
|
|
106
|
+
"require": "./dist/theme/dark.css",
|
|
107
|
+
"default": "./dist/theme/dark.css"
|
|
108
|
+
},
|
|
109
|
+
"./theme/tokens": {
|
|
110
|
+
"import": "./dist/theme/tokens.css",
|
|
111
|
+
"require": "./dist/theme/tokens.css",
|
|
112
|
+
"default": "./dist/theme/tokens.css"
|
|
113
|
+
},
|
|
114
|
+
"./full": {
|
|
115
|
+
"import": "./dist/baseline-kit.css",
|
|
116
|
+
"require": "./dist/baseline-kit.css",
|
|
117
|
+
"default": "./dist/baseline-kit.css"
|
|
118
|
+
},
|
|
96
119
|
"./dist/styles.css": "./dist/styles.css",
|
|
97
120
|
"./dist/theme.css": "./dist/theme.css",
|
|
121
|
+
"./dist/theme/default.css": "./dist/theme/default.css",
|
|
122
|
+
"./dist/theme/dark.css": "./dist/theme/dark.css",
|
|
123
|
+
"./dist/theme/tokens.css": "./dist/theme/tokens.css",
|
|
124
|
+
"./dist/baseline-kit.css": "./dist/baseline-kit.css",
|
|
98
125
|
"./package.json": "./package.json"
|
|
99
126
|
},
|
|
100
127
|
"files": [
|
|
@@ -105,7 +132,11 @@
|
|
|
105
132
|
"style": "dist/styles.css",
|
|
106
133
|
"sideEffects": [
|
|
107
134
|
"dist/styles.css",
|
|
108
|
-
"dist/theme.css"
|
|
135
|
+
"dist/theme.css",
|
|
136
|
+
"dist/theme/default.css",
|
|
137
|
+
"dist/theme/dark.css",
|
|
138
|
+
"dist/theme/tokens.css",
|
|
139
|
+
"dist/baseline-kit.css"
|
|
109
140
|
],
|
|
110
141
|
"bugs": {
|
|
111
142
|
"url": "https://github.com/dnvt/baseline-kit/issues"
|
|
@@ -118,7 +149,7 @@
|
|
|
118
149
|
"author": "Francois Denavaut",
|
|
119
150
|
"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.",
|
|
120
151
|
"dependencies": {
|
|
121
|
-
"esbuild": "^0.
|
|
152
|
+
"esbuild": "^0.25.0",
|
|
122
153
|
"postcss-preset-env": "^10.1.5"
|
|
123
154
|
}
|
|
124
155
|
}
|