baseline-kit 3.0.2 → 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.
Files changed (123) hide show
  1. package/README.md +70 -48
  2. package/dist/README.md +70 -48
  3. package/dist/baseline-kit.css +3 -21
  4. package/dist/core/src/config/defaults.d.ts +2 -0
  5. package/dist/core/src/config/index.d.ts +3 -0
  6. package/dist/core/src/config/merge.d.ts +21 -0
  7. package/dist/core/src/config/schema.d.ts +33 -0
  8. package/dist/core/src/descriptors/baseline.d.ts +26 -0
  9. package/dist/core/src/descriptors/box.d.ts +20 -0
  10. package/dist/core/src/descriptors/guide.d.ts +44 -0
  11. package/dist/core/src/descriptors/index.d.ts +5 -0
  12. package/dist/core/src/descriptors/padder.d.ts +19 -0
  13. package/dist/core/src/descriptors/spacer.d.ts +24 -0
  14. package/dist/core/src/index.d.ts +10 -0
  15. package/dist/core/src/types.d.ts +62 -0
  16. package/dist/core/src/utils/convert.d.ts +10 -0
  17. package/dist/core/src/utils/grid.d.ts +18 -0
  18. package/dist/{utils → core/src/utils}/index.d.ts +2 -9
  19. package/dist/core/src/utils/math.d.ts +9 -0
  20. package/dist/core/src/utils/merge.d.ts +28 -0
  21. package/dist/core/src/utils/normalize.d.ts +13 -0
  22. package/dist/core/src/utils/padding.d.ts +2 -0
  23. package/dist/core/src/utils/parse.d.ts +5 -0
  24. package/dist/core/src/utils/snapping.d.ts +2 -0
  25. package/dist/core/src/validation/guide.d.ts +3 -0
  26. package/dist/core/src/validation/index.d.ts +1 -0
  27. package/dist/core.cjs +1 -0
  28. package/dist/core.d.ts +344 -0
  29. package/dist/core.mjs +2 -0
  30. package/dist/dom/src/index.d.ts +11 -0
  31. package/dist/dom/src/measure.d.ts +18 -0
  32. package/dist/dom/src/observers.d.ts +5 -0
  33. package/dist/{utils → dom/src}/ssr.d.ts +0 -6
  34. package/dist/dom/src/timing.d.ts +2 -0
  35. package/dist/dom/src/viewport.d.ts +7 -0
  36. package/dist/dom/src/virtual.d.ts +23 -0
  37. package/dist/guide.cjs +2 -0
  38. package/dist/guide.cjs.map +1 -0
  39. package/dist/guide.css +2 -0
  40. package/dist/guide.d.ts +146 -0
  41. package/dist/guide.mjs +589 -0
  42. package/dist/guide.mjs.map +1 -0
  43. package/dist/index.cjs +2 -2
  44. package/dist/index.cjs.map +1 -1
  45. package/dist/index.d.ts +197 -30
  46. package/dist/index.mjs +614 -1747
  47. package/dist/index.mjs.map +1 -1
  48. package/dist/react/src/components/Baseline/Baseline.d.ts +13 -0
  49. package/dist/react/src/components/Baseline/index.d.ts +1 -0
  50. package/dist/react/src/components/Box/Box.d.ts +26 -0
  51. package/dist/react/src/components/Box/index.d.ts +1 -0
  52. package/dist/react/src/components/Config/Config.d.ts +20 -0
  53. package/dist/react/src/components/Config/index.d.ts +2 -0
  54. package/dist/react/src/components/Guide/Guide.d.ts +16 -0
  55. package/dist/react/src/components/Guide/index.d.ts +1 -0
  56. package/dist/react/src/components/Padder/Padder.d.ts +20 -0
  57. package/dist/react/src/components/Padder/index.d.ts +1 -0
  58. package/dist/react/src/components/Spacer/Spacer.d.ts +14 -0
  59. package/dist/react/src/components/Spacer/index.d.ts +1 -0
  60. package/dist/{components → react/src/components}/index.d.ts +1 -5
  61. package/dist/react/src/components/types.d.ts +29 -0
  62. package/dist/react/src/guide.d.ts +10 -0
  63. package/dist/{hooks → react/src/hooks}/index.d.ts +2 -3
  64. package/dist/react/src/hooks/useBaseline.d.ts +26 -0
  65. package/dist/react/src/hooks/useConfig.d.ts +9 -0
  66. package/dist/react/src/hooks/useDebug.d.ts +6 -0
  67. package/dist/react/src/hooks/useGuide.d.ts +7 -0
  68. package/dist/{hooks → react/src/hooks}/useIsClient.d.ts +0 -2
  69. package/dist/react/src/hooks/useMeasure.d.ts +10 -0
  70. package/dist/react/src/hooks/useVirtual.d.ts +14 -0
  71. package/dist/react/src/index.d.ts +21 -0
  72. package/dist/react/src/utils/index.d.ts +9 -0
  73. package/dist/react/src/utils/merge.d.ts +10 -0
  74. package/dist/react/src/utils/ssr.d.ts +1 -0
  75. package/dist/reset.css +43 -0
  76. package/dist/src-CMjyHjX5.cjs +2 -0
  77. package/dist/src-CMjyHjX5.cjs.map +1 -0
  78. package/dist/src-QHaSfgVe.js +619 -0
  79. package/dist/src-QHaSfgVe.js.map +1 -0
  80. package/dist/styles.css +1 -1
  81. package/dist/theme/dark.css +0 -8
  82. package/dist/theme/default.css +0 -9
  83. package/dist/theme/tokens.css +1 -10
  84. package/dist/theme.css +0 -18
  85. package/package.json +82 -42
  86. package/dist/components/Baseline/Baseline.d.ts +0 -48
  87. package/dist/components/Baseline/index.d.ts +0 -6
  88. package/dist/components/Box/Box.d.ts +0 -73
  89. package/dist/components/Box/index.d.ts +0 -6
  90. package/dist/components/Config/Config.d.ts +0 -179
  91. package/dist/components/Config/defaults.d.ts +0 -25
  92. package/dist/components/Config/index.d.ts +0 -11
  93. package/dist/components/Guide/Guide.d.ts +0 -70
  94. package/dist/components/Guide/index.d.ts +0 -6
  95. package/dist/components/Guide/types.d.ts +0 -144
  96. package/dist/components/Guide/validation.d.ts +0 -82
  97. package/dist/components/Layout/Layout.d.ts +0 -73
  98. package/dist/components/Layout/index.d.ts +0 -10
  99. package/dist/components/Padder/Padder.d.ts +0 -67
  100. package/dist/components/Padder/index.d.ts +0 -10
  101. package/dist/components/Spacer/Spacer.d.ts +0 -48
  102. package/dist/components/Spacer/index.d.ts +0 -10
  103. package/dist/components/Stack/Stack.d.ts +0 -84
  104. package/dist/components/Stack/index.d.ts +0 -10
  105. package/dist/components/styles/index.d.ts +0 -11
  106. package/dist/components/types.d.ts +0 -102
  107. package/dist/hooks/useBaseline.d.ts +0 -55
  108. package/dist/hooks/useConfig.d.ts +0 -41
  109. package/dist/hooks/useDebug.d.ts +0 -49
  110. package/dist/hooks/useGuide.d.ts +0 -61
  111. package/dist/hooks/useMeasure.d.ts +0 -35
  112. package/dist/hooks/useVirtual.d.ts +0 -60
  113. package/dist/styles.d.ts +0 -6
  114. package/dist/theme.d.ts +0 -6
  115. package/dist/utils/convert.d.ts +0 -24
  116. package/dist/utils/grid.d.ts +0 -22
  117. package/dist/utils/math.d.ts +0 -48
  118. package/dist/utils/merge.d.ts +0 -117
  119. package/dist/utils/normalize.d.ts +0 -30
  120. package/dist/utils/padding.d.ts +0 -11
  121. package/dist/utils/parse.d.ts +0 -18
  122. package/dist/utils/snapping.d.ts +0 -28
  123. package/dist/utils/timing.d.ts +0 -45
@@ -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];
@@ -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;
@@ -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;
@@ -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;
@@ -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;