@tempots/beatui 1.3.0 → 1.4.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/dist/beatui.css +34 -30
- package/dist/beatui.tailwind.css +34 -30
- package/dist/index.cjs.js +4 -4
- package/dist/index.es.js +5194 -5145
- package/dist/types/components/data/auto-color-badge.d.ts +60 -0
- package/dist/types/components/data/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { TNode, Value } from '@tempots/dom';
|
|
2
|
+
import { ControlSize } from '../theme';
|
|
3
|
+
import { RadiusName } from '../../tokens/radius';
|
|
4
|
+
/**
|
|
5
|
+
* HSL range constraint for a single component (hue, saturation, or lightness).
|
|
6
|
+
*/
|
|
7
|
+
export interface HSLRange {
|
|
8
|
+
/** Minimum value (inclusive). */
|
|
9
|
+
min: number;
|
|
10
|
+
/** Maximum value (inclusive). */
|
|
11
|
+
max: number;
|
|
12
|
+
}
|
|
13
|
+
/** Configuration options for the {@link AutoColorBadge} component. */
|
|
14
|
+
export interface AutoColorBadgeOptions {
|
|
15
|
+
/** Size of the badge affecting padding and font. @default 'md' */
|
|
16
|
+
size?: Value<ControlSize>;
|
|
17
|
+
/** Border radius of the badge. @default 'full' */
|
|
18
|
+
roundedness?: Value<RadiusName>;
|
|
19
|
+
/**
|
|
20
|
+
* Explicit text to use for color derivation instead of the DOM text content.
|
|
21
|
+
* When provided, the MutationObserver is skipped and color is derived from
|
|
22
|
+
* this value reactively. Useful when the displayed content differs from the
|
|
23
|
+
* desired color key (e.g. icons, abbreviations, translated labels).
|
|
24
|
+
*/
|
|
25
|
+
text?: Value<string>;
|
|
26
|
+
/** Hue range (0–360). @default { min: 0, max: 360 } */
|
|
27
|
+
hue?: Value<HSLRange>;
|
|
28
|
+
/** Saturation range (0–100). @default { min: 50, max: 80 } */
|
|
29
|
+
saturation?: Value<HSLRange>;
|
|
30
|
+
/** Lightness range (0–100). @default { min: 40, max: 65 } */
|
|
31
|
+
lightness?: Value<HSLRange>;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* A badge that automatically derives a stable background color from its text content.
|
|
35
|
+
*
|
|
36
|
+
* The text content is hashed to produce deterministic HSL values within configurable
|
|
37
|
+
* ranges. The text color is automatically set to black or white for maximum contrast.
|
|
38
|
+
*
|
|
39
|
+
* By default, a `MutationObserver` watches the DOM for content changes. When the
|
|
40
|
+
* `text` option is provided, the observer is skipped and the color is derived
|
|
41
|
+
* directly from the signal — useful when the displayed content differs from the
|
|
42
|
+
* desired color key.
|
|
43
|
+
*
|
|
44
|
+
* @param options - Configuration for size, roundedness, text override, and HSL ranges
|
|
45
|
+
* @param children - Content to display (text content is used for color derivation unless `text` is set)
|
|
46
|
+
* @returns A styled span element with auto-generated background color
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* ```typescript
|
|
50
|
+
* // Color derived from DOM text content
|
|
51
|
+
* AutoColorBadge({}, 'TypeScript')
|
|
52
|
+
* ```
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```typescript
|
|
56
|
+
* // Explicit text override — color from "admin" regardless of displayed content
|
|
57
|
+
* AutoColorBadge({ text: 'admin' }, Icon({ icon: 'lucide:shield' }), 'Admin')
|
|
58
|
+
* ```
|
|
59
|
+
*/
|
|
60
|
+
export declare function AutoColorBadge(options?: AutoColorBadgeOptions, ...children: TNode[]): TNode;
|