baseline-kit 3.0.1 → 5.0.0
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 +99 -63
- package/dist/README.md +99 -63
- package/dist/baseline-kit.css +3 -21
- package/dist/core/src/config/defaults.d.ts +2 -0
- package/dist/core/src/config/index.d.ts +3 -0
- package/dist/core/src/config/merge.d.ts +21 -0
- package/dist/core/src/config/schema.d.ts +33 -0
- package/dist/core/src/descriptors/baseline.d.ts +26 -0
- package/dist/core/src/descriptors/box.d.ts +20 -0
- package/dist/core/src/descriptors/guide.d.ts +44 -0
- package/dist/core/src/descriptors/index.d.ts +5 -0
- package/dist/core/src/descriptors/padder.d.ts +19 -0
- package/dist/core/src/descriptors/spacer.d.ts +24 -0
- package/dist/core/src/index.d.ts +10 -0
- package/dist/core/src/types.d.ts +62 -0
- package/dist/core/src/utils/convert.d.ts +10 -0
- package/dist/core/src/utils/grid.d.ts +18 -0
- package/dist/{utils → core/src/utils}/index.d.ts +2 -9
- package/dist/core/src/utils/math.d.ts +9 -0
- package/dist/core/src/utils/merge.d.ts +28 -0
- package/dist/core/src/utils/normalize.d.ts +13 -0
- package/dist/core/src/utils/padding.d.ts +2 -0
- package/dist/core/src/utils/parse.d.ts +5 -0
- package/dist/core/src/utils/snapping.d.ts +2 -0
- package/dist/core/src/validation/guide.d.ts +3 -0
- package/dist/core/src/validation/index.d.ts +1 -0
- package/dist/core.cjs +1 -0
- package/dist/core.d.ts +344 -0
- package/dist/core.mjs +2 -0
- package/dist/dom/src/index.d.ts +11 -0
- package/dist/dom/src/measure.d.ts +18 -0
- package/dist/dom/src/observers.d.ts +5 -0
- package/dist/{utils → dom/src}/ssr.d.ts +0 -6
- package/dist/dom/src/timing.d.ts +2 -0
- package/dist/dom/src/viewport.d.ts +7 -0
- package/dist/dom/src/virtual.d.ts +23 -0
- package/dist/guide.cjs +2 -0
- package/dist/guide.cjs.map +1 -0
- package/dist/guide.css +2 -0
- package/dist/guide.d.ts +146 -0
- package/dist/guide.mjs +589 -0
- package/dist/guide.mjs.map +1 -0
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +197 -30
- package/dist/index.mjs +614 -1747
- package/dist/index.mjs.map +1 -1
- package/dist/react/src/components/Baseline/Baseline.d.ts +13 -0
- package/dist/react/src/components/Baseline/index.d.ts +1 -0
- package/dist/react/src/components/Box/Box.d.ts +26 -0
- package/dist/react/src/components/Box/index.d.ts +1 -0
- package/dist/react/src/components/Config/Config.d.ts +20 -0
- package/dist/react/src/components/Config/index.d.ts +2 -0
- package/dist/react/src/components/Guide/Guide.d.ts +16 -0
- package/dist/react/src/components/Guide/index.d.ts +1 -0
- package/dist/react/src/components/Padder/Padder.d.ts +20 -0
- package/dist/react/src/components/Padder/index.d.ts +1 -0
- package/dist/react/src/components/Spacer/Spacer.d.ts +14 -0
- package/dist/react/src/components/Spacer/index.d.ts +1 -0
- package/dist/{components → react/src/components}/index.d.ts +1 -5
- package/dist/react/src/components/types.d.ts +29 -0
- package/dist/react/src/guide.d.ts +10 -0
- package/dist/{hooks → react/src/hooks}/index.d.ts +2 -3
- package/dist/react/src/hooks/useBaseline.d.ts +26 -0
- package/dist/react/src/hooks/useConfig.d.ts +9 -0
- package/dist/react/src/hooks/useDebug.d.ts +6 -0
- package/dist/react/src/hooks/useGuide.d.ts +7 -0
- package/dist/{hooks → react/src/hooks}/useIsClient.d.ts +0 -2
- package/dist/react/src/hooks/useMeasure.d.ts +10 -0
- package/dist/react/src/hooks/useVirtual.d.ts +14 -0
- package/dist/react/src/index.d.ts +21 -0
- package/dist/react/src/utils/index.d.ts +9 -0
- package/dist/react/src/utils/merge.d.ts +10 -0
- package/dist/react/src/utils/ssr.d.ts +1 -0
- package/dist/reset.css +43 -0
- package/dist/src-CMjyHjX5.cjs +2 -0
- package/dist/src-CMjyHjX5.cjs.map +1 -0
- package/dist/src-QHaSfgVe.js +619 -0
- package/dist/src-QHaSfgVe.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/theme/dark.css +0 -8
- package/dist/theme/default.css +0 -9
- package/dist/theme/tokens.css +1 -10
- package/dist/theme.css +0 -18
- package/package.json +82 -42
- package/dist/components/Baseline/Baseline.d.ts +0 -48
- package/dist/components/Baseline/index.d.ts +0 -6
- package/dist/components/Box/Box.d.ts +0 -73
- package/dist/components/Box/index.d.ts +0 -6
- package/dist/components/Config/Config.d.ts +0 -179
- package/dist/components/Config/defaults.d.ts +0 -25
- package/dist/components/Config/index.d.ts +0 -11
- package/dist/components/Guide/Guide.d.ts +0 -70
- package/dist/components/Guide/index.d.ts +0 -6
- package/dist/components/Guide/types.d.ts +0 -144
- package/dist/components/Guide/validation.d.ts +0 -82
- package/dist/components/Layout/Layout.d.ts +0 -73
- package/dist/components/Layout/index.d.ts +0 -10
- package/dist/components/Padder/Padder.d.ts +0 -67
- package/dist/components/Padder/index.d.ts +0 -10
- package/dist/components/Spacer/Spacer.d.ts +0 -48
- package/dist/components/Spacer/index.d.ts +0 -10
- package/dist/components/Stack/Stack.d.ts +0 -84
- package/dist/components/Stack/index.d.ts +0 -10
- package/dist/components/styles/index.d.ts +0 -11
- package/dist/components/types.d.ts +0 -102
- package/dist/hooks/useBaseline.d.ts +0 -55
- package/dist/hooks/useConfig.d.ts +0 -41
- package/dist/hooks/useDebug.d.ts +0 -49
- package/dist/hooks/useGuide.d.ts +0 -61
- package/dist/hooks/useMeasure.d.ts +0 -35
- package/dist/hooks/useVirtual.d.ts +0 -60
- package/dist/styles.d.ts +0 -6
- package/dist/theme.d.ts +0 -6
- package/dist/utils/convert.d.ts +0 -24
- package/dist/utils/grid.d.ts +0 -22
- package/dist/utils/math.d.ts +0 -48
- package/dist/utils/merge.d.ts +0 -117
- package/dist/utils/normalize.d.ts +0 -30
- package/dist/utils/padding.d.ts +0 -11
- package/dist/utils/parse.d.ts +0 -18
- package/dist/utils/snapping.d.ts +0 -28
- package/dist/utils/timing.d.ts +0 -45
package/dist/utils/merge.d.ts
DELETED
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Combines class names, filtering out falsy values.
|
|
4
|
-
*
|
|
5
|
-
* @remarks
|
|
6
|
-
* - Filters out false, null, undefined
|
|
7
|
-
* - Trims whitespace
|
|
8
|
-
* - Preserves order of classes
|
|
9
|
-
*
|
|
10
|
-
* @param classes - Array of potential class names
|
|
11
|
-
* @returns Combined class string
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* ```ts
|
|
15
|
-
* mergeClasses('btn', isActive && 'active', undefined)
|
|
16
|
-
* // => "btn active"
|
|
17
|
-
* ```
|
|
18
|
-
*/
|
|
19
|
-
export declare const mergeClasses: (...classes: Array<string | boolean | undefined | null>) => string;
|
|
20
|
-
/**
|
|
21
|
-
* Combines multiple style objects with type safety.
|
|
22
|
-
*
|
|
23
|
-
* @remarks
|
|
24
|
-
* - Preserves type information
|
|
25
|
-
* - Handles undefined values
|
|
26
|
-
* - Merges deeply nested styles
|
|
27
|
-
*
|
|
28
|
-
* @param styles - Array of style objects
|
|
29
|
-
* @returns Combined style object
|
|
30
|
-
*
|
|
31
|
-
* @example
|
|
32
|
-
* ```ts
|
|
33
|
-
* mergeStyles(
|
|
34
|
-
* { color: 'red' },
|
|
35
|
-
* isLarge && { fontSize: '2em' },
|
|
36
|
-
* customStyles
|
|
37
|
-
* )
|
|
38
|
-
* ```
|
|
39
|
-
*/
|
|
40
|
-
export declare const mergeStyles: <T extends React.CSSProperties>(...styles: Array<T | undefined>) => T;
|
|
41
|
-
/**
|
|
42
|
-
* Merges multiple React refs into a single callback ref.
|
|
43
|
-
*
|
|
44
|
-
* @remarks
|
|
45
|
-
* Handles:
|
|
46
|
-
* - Function refs
|
|
47
|
-
* - Object refs
|
|
48
|
-
* - Undefined/null refs
|
|
49
|
-
*
|
|
50
|
-
* @param refs - Array of refs to merge
|
|
51
|
-
* @returns Combined ref callback
|
|
52
|
-
*
|
|
53
|
-
* @example
|
|
54
|
-
* ```tsx
|
|
55
|
-
* const Component = React.forwardRef((props, ref) => {
|
|
56
|
-
* const localRef = useRef(null);
|
|
57
|
-
* const combinedRef = mergeRefs(ref, localRef);
|
|
58
|
-
*
|
|
59
|
-
* return <div ref={combinedRef} />;
|
|
60
|
-
* });
|
|
61
|
-
* ```
|
|
62
|
-
*/
|
|
63
|
-
export declare function mergeRefs<T>(...refs: Array<React.Ref<T> | null | undefined>): React.RefCallback<T>;
|
|
64
|
-
/**
|
|
65
|
-
* Parameters for creating a style override
|
|
66
|
-
*/
|
|
67
|
-
export type StyleOverrideParams = {
|
|
68
|
-
/** CSS variable key to potentially override */
|
|
69
|
-
key: string;
|
|
70
|
-
/** Value to use if override is needed */
|
|
71
|
-
value: string;
|
|
72
|
-
/** Default styles to compare against */
|
|
73
|
-
defaultStyles: Record<string, string>;
|
|
74
|
-
/** Special case dimensions that should be skipped for specific values */
|
|
75
|
-
skipDimensions?: {
|
|
76
|
-
/** Dimensions that should be skipped when they're set to "fit-content" */
|
|
77
|
-
fitContent?: string[];
|
|
78
|
-
/** Dimensions that should be skipped when they're set to "auto" */
|
|
79
|
-
auto?: string[];
|
|
80
|
-
/** Dimensions that should be skipped when they're set to % values (like "100%") */
|
|
81
|
-
fullSize?: string[];
|
|
82
|
-
};
|
|
83
|
-
};
|
|
84
|
-
/**
|
|
85
|
-
* Creates style overrides for CSS variables, conditionally based on comparison to defaults.
|
|
86
|
-
* Only applies overrides when the value differs from the default, optimizing style objects.
|
|
87
|
-
*
|
|
88
|
-
* @param params - Style override parameters or individual arguments
|
|
89
|
-
* @param value
|
|
90
|
-
* @param defaultStyles
|
|
91
|
-
* @returns Style object with override (if needed)
|
|
92
|
-
*
|
|
93
|
-
* @example
|
|
94
|
-
* ```ts
|
|
95
|
-
* // Object parameter style:
|
|
96
|
-
* createStyleOverride({
|
|
97
|
-
* key: '--color',
|
|
98
|
-
* value: 'red',
|
|
99
|
-
* defaultStyles: { '--color': 'blue' }
|
|
100
|
-
* })
|
|
101
|
-
* // => { '--color': 'red' }
|
|
102
|
-
*
|
|
103
|
-
* // With dimension skipping:
|
|
104
|
-
* createStyleOverride({
|
|
105
|
-
* key: '--width',
|
|
106
|
-
* value: 'fit-content',
|
|
107
|
-
* defaultStyles: { '--width': 'auto' },
|
|
108
|
-
* skipDimensions: { fitContent: ['--width', '--height'] }
|
|
109
|
-
* })
|
|
110
|
-
* // => {}
|
|
111
|
-
*
|
|
112
|
-
* // Legacy style with separate arguments:
|
|
113
|
-
* createStyleOverride('--color', 'red', { '--color': 'blue' })
|
|
114
|
-
* // => { '--color': 'red' }
|
|
115
|
-
* ```
|
|
116
|
-
*/
|
|
117
|
-
export declare function createStyleOverride(params: StyleOverrideParams | string, value?: string, defaultStyles?: Record<string, string>): Record<string, string | number>;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
export interface NormalizationOptions {
|
|
2
|
-
/** Base unit for normalization */
|
|
3
|
-
base?: number;
|
|
4
|
-
/** Whether to round to nearest base multiple */
|
|
5
|
-
round?: boolean;
|
|
6
|
-
/** Optional value clamping */
|
|
7
|
-
clamp?: {
|
|
8
|
-
min?: number;
|
|
9
|
-
max?: number;
|
|
10
|
-
};
|
|
11
|
-
/** Suppress warning messages */
|
|
12
|
-
suppressWarnings?: boolean;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* Normalizes CSS values to a consistent format based on base unit.
|
|
16
|
-
*
|
|
17
|
-
* @param value - Value to normalize
|
|
18
|
-
* @param options - Normalization configuration
|
|
19
|
-
* @returns Normalized numeric value
|
|
20
|
-
*/
|
|
21
|
-
export declare function normalizeValue(value: string | number | undefined, options?: NormalizationOptions): number;
|
|
22
|
-
/**
|
|
23
|
-
* Normalizes a pair of CSS values.
|
|
24
|
-
*
|
|
25
|
-
* @param values - Tuple of values to normalize
|
|
26
|
-
* @param defaults - Default values if input is undefined
|
|
27
|
-
* @param options - Normalization options
|
|
28
|
-
* @returns Tuple of normalized values
|
|
29
|
-
*/
|
|
30
|
-
export declare function normalizeValuePair(values: [string | number | undefined, string | number | undefined] | undefined, defaults: [number, number], options?: NormalizationOptions): [number, number];
|
package/dist/utils/padding.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Padding, SpacingProps } from '@components';
|
|
2
|
-
/**
|
|
3
|
-
* Extract numeric top, right, bottom, left (in px) from `padding` or `block/inline`.
|
|
4
|
-
* @param spacing - The props which may include padding, block, inline
|
|
5
|
-
* @returns { top, right, bottom, left } with 0 defaults
|
|
6
|
-
*
|
|
7
|
-
* Priority (if padding is defined, it overrides block/inline):
|
|
8
|
-
* - If `padding` is present, parse it fully (4 edges).
|
|
9
|
-
* - Otherwise, parse `block` for top/bottom and `inline` for left/right.
|
|
10
|
-
*/
|
|
11
|
-
export declare function parsePadding(spacing: SpacingProps): Padding;
|
package/dist/utils/parse.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Parses a CSS unit string into its numeric value and unit.
|
|
3
|
-
*
|
|
4
|
-
* @param value - CSS value string to parse
|
|
5
|
-
* @returns Object with value and unit, or null if parsing fails
|
|
6
|
-
*/
|
|
7
|
-
export declare function parseUnit(value: string): {
|
|
8
|
-
value: number;
|
|
9
|
-
unit: string;
|
|
10
|
-
} | null;
|
|
11
|
-
/**
|
|
12
|
-
* Formats a value as a valid CSS string.
|
|
13
|
-
*
|
|
14
|
-
* @param value - Value to format
|
|
15
|
-
* @param defaultValue - Optional default if value is undefined
|
|
16
|
-
* @returns Formatted CSS string
|
|
17
|
-
*/
|
|
18
|
-
export declare function formatValue(value: string | number | undefined, defaultValue?: number): string;
|
package/dist/utils/snapping.d.ts
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { SnappingMode, Padding, PaddingValue } from '@components';
|
|
2
|
-
/**
|
|
3
|
-
* Calculates spacing adjustments to maintain baseline grid alignment.
|
|
4
|
-
*
|
|
5
|
-
* @remarks
|
|
6
|
-
* Provides different snapping behaviors:
|
|
7
|
-
* - none: No adjustments
|
|
8
|
-
* - height: Adjusts bottom padding only
|
|
9
|
-
* - clamp: Adjusts both top and bottom padding
|
|
10
|
-
*
|
|
11
|
-
* @param height - Measured element height
|
|
12
|
-
* @param base - Grid base unit
|
|
13
|
-
* @param initial - Initial spacing values
|
|
14
|
-
* @param snapping - Snapping mode to apply
|
|
15
|
-
* @returns Adjusted spacing values
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* ```ts
|
|
19
|
-
* // Height snapping mode
|
|
20
|
-
* calculateSnappedSpacing(46, 8, { top: 10, bottom: 10 }, 'height')
|
|
21
|
-
* // => { top: 10, right: 0, bottom: 12, left: 0 }
|
|
22
|
-
*
|
|
23
|
-
* // Clamp mode
|
|
24
|
-
* calculateSnappedSpacing(45, 8, { top: 10, bottom: 6 }, 'clamp')
|
|
25
|
-
* // => { top: 2, right: 0, bottom: 1, left: 0 }
|
|
26
|
-
* ```
|
|
27
|
-
*/
|
|
28
|
-
export declare function calculateSnappedSpacing(height: number, base: number, initial: PaddingValue, snapping: SnappingMode): Padding;
|
package/dist/utils/timing.d.ts
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Creates a debounced version of a function.
|
|
3
|
-
*
|
|
4
|
-
* @remarks
|
|
5
|
-
* Useful for:
|
|
6
|
-
* - Handling rapid event sequences
|
|
7
|
-
* - Limiting API calls
|
|
8
|
-
* - Performance optimization
|
|
9
|
-
*
|
|
10
|
-
* @param fn - Function to debounce
|
|
11
|
-
* @param delay - Delay in milliseconds
|
|
12
|
-
* @returns Debounced function
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* ```ts
|
|
16
|
-
* const handleResize = debounce(() => {
|
|
17
|
-
* // Expensive calculation
|
|
18
|
-
* }, 100);
|
|
19
|
-
*
|
|
20
|
-
* window.addEventListener('resize', handleResize);
|
|
21
|
-
* ```
|
|
22
|
-
*/
|
|
23
|
-
export declare const debounce: <T extends (...args: unknown[]) => void>(fn: T, delay: number) => [T, () => void];
|
|
24
|
-
/**
|
|
25
|
-
* Creates a requestAnimationFrame-based throttled function.
|
|
26
|
-
*
|
|
27
|
-
* @remarks
|
|
28
|
-
* Optimizes performance by:
|
|
29
|
-
* - Limiting execution to animation frames
|
|
30
|
-
* - Preventing rapid-fire calls
|
|
31
|
-
* - Maintaining visual smoothness
|
|
32
|
-
*
|
|
33
|
-
* @param fn - Function to throttle
|
|
34
|
-
* @returns RAF-throttled function
|
|
35
|
-
*
|
|
36
|
-
* @example
|
|
37
|
-
* ```ts
|
|
38
|
-
* const updateScroll = rafThrottle(() => {
|
|
39
|
-
* // Update scroll position
|
|
40
|
-
* });
|
|
41
|
-
*
|
|
42
|
-
* document.addEventListener('scroll', updateScroll);
|
|
43
|
-
* ```
|
|
44
|
-
*/
|
|
45
|
-
export declare const rafThrottle: <T extends (...args: never[]) => void>(fn: T) => T;
|