@ariaui/radius 0.1.1 → 0.1.3

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/index.cjs DELETED
@@ -1,395 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __defProps = Object.defineProperties;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
- var __getOwnPropNames = Object.getOwnPropertyNames;
7
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
- var __hasOwnProp = Object.prototype.hasOwnProperty;
9
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
10
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
11
- var __spreadValues = (a, b) => {
12
- for (var prop in b || (b = {}))
13
- if (__hasOwnProp.call(b, prop))
14
- __defNormalProp(a, prop, b[prop]);
15
- if (__getOwnPropSymbols)
16
- for (var prop of __getOwnPropSymbols(b)) {
17
- if (__propIsEnum.call(b, prop))
18
- __defNormalProp(a, prop, b[prop]);
19
- }
20
- return a;
21
- };
22
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
23
- var __export = (target, all) => {
24
- for (var name in all)
25
- __defProp(target, name, { get: all[name], enumerable: true });
26
- };
27
- var __copyProps = (to, from, except, desc) => {
28
- if (from && typeof from === "object" || typeof from === "function") {
29
- for (let key of __getOwnPropNames(from))
30
- if (!__hasOwnProp.call(to, key) && key !== except)
31
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
32
- }
33
- return to;
34
- };
35
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
36
-
37
- // index.ts
38
- var index_exports = {};
39
- __export(index_exports, {
40
- BREAKPOINTS: () => BREAKPOINTS,
41
- clampScale: () => clampScale,
42
- createLinearScale: () => createLinearScale,
43
- createScale: () => createScale,
44
- innerCorners: () => innerCorners,
45
- innerRadius: () => innerRadius,
46
- mobileRadius: () => mobileRadius,
47
- nestingPair: () => nestingPair,
48
- parseCorners: () => parseCorners,
49
- parseRadius: () => parseRadius,
50
- requiredGap: () => requiredGap,
51
- responsiveRadius: () => responsiveRadius,
52
- roundCorners: () => roundCorners,
53
- scaleBy: () => scaleBy,
54
- setBottom: () => setBottom,
55
- setCorner: () => setCorner,
56
- setLeft: () => setLeft,
57
- setRight: () => setRight,
58
- setTop: () => setTop,
59
- sortedBreakpoints: () => sortedBreakpoints,
60
- sortedLevels: () => sortedLevels,
61
- stepRadius: () => stepRadius,
62
- toCSS: () => toCSS,
63
- toCSSDeclaration: () => toCSSDeclaration,
64
- toCSSProperties: () => toCSSProperties,
65
- toCSSShorthand: () => toCSSShorthand,
66
- toCSSVar: () => toCSSVar,
67
- toPx: () => toPx2,
68
- toRem: () => toRem,
69
- toTailwindClass: () => toTailwindClass,
70
- toTailwindCorners: () => toTailwindCorners,
71
- uniformCorners: () => uniformCorners
72
- });
73
- module.exports = __toCommonJS(index_exports);
74
-
75
- // src/parse.ts
76
- function parseRadius(input) {
77
- if (typeof input === "number") {
78
- return { value: input, unit: "px", original: `${input}px` };
79
- }
80
- const trimmed = input.trim();
81
- if (trimmed.endsWith("rem")) {
82
- const value2 = parseFloat(trimmed);
83
- if (Number.isNaN(value2)) throw new Error(`Invalid radius value: "${input}"`);
84
- return { value: value2, unit: "rem", original: trimmed };
85
- }
86
- if (trimmed.endsWith("%")) {
87
- const value2 = parseFloat(trimmed);
88
- if (Number.isNaN(value2)) throw new Error(`Invalid radius value: "${input}"`);
89
- return { value: value2, unit: "%", original: trimmed };
90
- }
91
- const value = parseFloat(trimmed);
92
- if (Number.isNaN(value)) throw new Error(`Invalid radius value: "${input}"`);
93
- return { value, unit: "px", original: trimmed.endsWith("px") ? trimmed : `${value}px` };
94
- }
95
- function parseCorners(input) {
96
- const parts = input.trim().split(/\s+/);
97
- if (parts.length === 1) {
98
- const v = parseRadius(parts[0]);
99
- return { topLeft: v, topRight: v, bottomRight: v, bottomLeft: v };
100
- }
101
- if (parts.length === 2) {
102
- const tlbr = parseRadius(parts[0]);
103
- const trbl = parseRadius(parts[1]);
104
- return { topLeft: tlbr, topRight: trbl, bottomRight: tlbr, bottomLeft: trbl };
105
- }
106
- if (parts.length === 3) {
107
- const tl = parseRadius(parts[0]);
108
- const trbl = parseRadius(parts[1]);
109
- const br = parseRadius(parts[2]);
110
- return { topLeft: tl, topRight: trbl, bottomRight: br, bottomLeft: trbl };
111
- }
112
- if (parts.length >= 4) {
113
- return {
114
- topLeft: parseRadius(parts[0]),
115
- topRight: parseRadius(parts[1]),
116
- bottomRight: parseRadius(parts[2]),
117
- bottomLeft: parseRadius(parts[3])
118
- };
119
- }
120
- throw new Error(`Invalid border-radius shorthand: "${input}"`);
121
- }
122
-
123
- // src/scale.ts
124
- function createLinearScale(base = 0, step = 4, count = 6) {
125
- const result = {};
126
- for (let i = 0; i < count; i++) {
127
- const value = base + step * i;
128
- result[String(i)] = parseRadius(value);
129
- }
130
- return result;
131
- }
132
- function createScale(values) {
133
- const result = {};
134
- for (const [name, value] of Object.entries(values)) {
135
- result[name] = parseRadius(value);
136
- }
137
- return result;
138
- }
139
- function scaleBy(scale, factor) {
140
- const result = {};
141
- for (const [name, rv] of Object.entries(scale)) {
142
- const newValue = round(rv.value * factor);
143
- result[name] = {
144
- value: newValue,
145
- unit: rv.unit,
146
- original: `${newValue}${rv.unit}`
147
- };
148
- }
149
- return result;
150
- }
151
- function clampScale(scale, min, max) {
152
- const result = {};
153
- for (const [name, rv] of Object.entries(scale)) {
154
- const clamped = Math.max(min, Math.min(max, rv.value));
155
- result[name] = {
156
- value: clamped,
157
- unit: rv.unit,
158
- original: `${clamped}${rv.unit}`
159
- };
160
- }
161
- return result;
162
- }
163
- function sortedLevels(scale) {
164
- return Object.keys(scale).sort((a, b) => {
165
- return toPx(scale[a]) - toPx(scale[b]);
166
- });
167
- }
168
- function stepRadius(scale, current, direction) {
169
- const ordered = sortedLevels(scale);
170
- const idx = ordered.indexOf(current);
171
- if (idx === -1) return current;
172
- const next = direction === "up" ? idx + 1 : idx - 1;
173
- const clamped = Math.max(0, Math.min(ordered.length - 1, next));
174
- return ordered[clamped];
175
- }
176
- function round(value) {
177
- return Math.round(value * 1e3) / 1e3;
178
- }
179
- function toPx(rv) {
180
- if (rv.unit === "rem") return rv.value * 16;
181
- return rv.value;
182
- }
183
-
184
- // src/corners.ts
185
- function toRadiusValue(input) {
186
- if (typeof input === "object" && "value" in input) return input;
187
- return parseRadius(input);
188
- }
189
- var ZERO = { value: 0, unit: "px", original: "0px" };
190
- function uniformCorners(radius) {
191
- const v = toRadiusValue(radius);
192
- return { topLeft: v, topRight: v, bottomRight: v, bottomLeft: v };
193
- }
194
- function setCorner(corners, corner, value) {
195
- return __spreadProps(__spreadValues({}, corners), { [corner]: toRadiusValue(value) });
196
- }
197
- function setTop(corners, value) {
198
- const v = toRadiusValue(value);
199
- return __spreadProps(__spreadValues({}, corners), { topLeft: v, topRight: v });
200
- }
201
- function setBottom(corners, value) {
202
- const v = toRadiusValue(value);
203
- return __spreadProps(__spreadValues({}, corners), { bottomLeft: v, bottomRight: v });
204
- }
205
- function setLeft(corners, value) {
206
- const v = toRadiusValue(value);
207
- return __spreadProps(__spreadValues({}, corners), { topLeft: v, bottomLeft: v });
208
- }
209
- function setRight(corners, value) {
210
- const v = toRadiusValue(value);
211
- return __spreadProps(__spreadValues({}, corners), { topRight: v, bottomRight: v });
212
- }
213
- function roundCorners(radius, ...corners) {
214
- const v = toRadiusValue(radius);
215
- return {
216
- topLeft: corners.includes("topLeft") ? v : ZERO,
217
- topRight: corners.includes("topRight") ? v : ZERO,
218
- bottomRight: corners.includes("bottomRight") ? v : ZERO,
219
- bottomLeft: corners.includes("bottomLeft") ? v : ZERO
220
- };
221
- }
222
-
223
- // src/nesting.ts
224
- function toRadiusValue2(input) {
225
- if (typeof input === "object" && "value" in input) return input;
226
- return parseRadius(input);
227
- }
228
- function innerRadius(outer, gap) {
229
- const o = toRadiusValue2(outer);
230
- const inner = Math.max(0, o.value - gap);
231
- return {
232
- value: inner,
233
- unit: o.unit,
234
- original: `${inner}${o.unit}`
235
- };
236
- }
237
- function innerCorners(outer, gap) {
238
- return {
239
- topLeft: innerRadius(outer.topLeft, gap),
240
- topRight: innerRadius(outer.topRight, gap),
241
- bottomRight: innerRadius(outer.bottomRight, gap),
242
- bottomLeft: innerRadius(outer.bottomLeft, gap)
243
- };
244
- }
245
- function requiredGap(outer, inner) {
246
- const o = toRadiusValue2(outer);
247
- const i = toRadiusValue2(inner);
248
- return Math.max(0, o.value - i.value);
249
- }
250
- function nestingPair(outerRadius, gap) {
251
- const outer = parseRadius(outerRadius);
252
- const inner = innerRadius(outer, gap);
253
- return { outer, inner };
254
- }
255
-
256
- // src/responsive.ts
257
- var BREAKPOINTS = {
258
- sm: 640,
259
- md: 768,
260
- lg: 1024,
261
- xl: 1280,
262
- "2xl": 1536
263
- };
264
- function responsiveRadius(config, breakpoints = BREAKPOINTS) {
265
- const defaultEntry = config["default"];
266
- if (defaultEntry === void 0) {
267
- throw new Error('responsiveRadius: "default" entry is required');
268
- }
269
- const defaultValue = parseRadius(defaultEntry);
270
- const bps = {};
271
- for (const [key, value] of Object.entries(config)) {
272
- if (key === "default") continue;
273
- if (!(key in breakpoints)) {
274
- throw new Error(
275
- `responsiveRadius: unknown breakpoint "${key}". Available: ${Object.keys(breakpoints).join(", ")}`
276
- );
277
- }
278
- bps[key] = parseRadius(value);
279
- }
280
- return { default: defaultValue, breakpoints: bps };
281
- }
282
- function mobileRadius(value, factor = 0.75) {
283
- const scaled = Math.max(0, Math.round(value.value * factor));
284
- return {
285
- value: scaled,
286
- unit: value.unit,
287
- original: `${scaled}${value.unit}`
288
- };
289
- }
290
- function sortedBreakpoints(responsive, breakpoints = BREAKPOINTS) {
291
- return Object.entries(responsive.breakpoints).map(
292
- ([name, value]) => {
293
- var _a;
294
- return [name, (_a = breakpoints[name]) != null ? _a : 0, value];
295
- }
296
- ).sort((a, b) => a[1] - b[1]);
297
- }
298
-
299
- // src/format.ts
300
- function round2(value, decimals = 4) {
301
- const f = Math.pow(10, decimals);
302
- return Math.round(value * f) / f;
303
- }
304
- function toCSS(value) {
305
- return `${value.value}${value.unit}`;
306
- }
307
- function toRem(value, base = 16) {
308
- if (value.unit === "rem") return `${value.value}rem`;
309
- if (value.unit === "%") return value.original;
310
- const rem = round2(value.value / base);
311
- return `${rem}rem`;
312
- }
313
- function toPx2(value, base = 16) {
314
- if (value.unit === "px") return `${value.value}px`;
315
- if (value.unit === "%") return value.original;
316
- const px = round2(value.value * base);
317
- return `${px}px`;
318
- }
319
- function toCSSShorthand(corners) {
320
- const tl = toCSS(corners.topLeft);
321
- const tr = toCSS(corners.topRight);
322
- const br = toCSS(corners.bottomRight);
323
- const bl = toCSS(corners.bottomLeft);
324
- if (tl === tr && tr === br && br === bl) return tl;
325
- if (tl === br && tr === bl) return `${tl} ${tr}`;
326
- if (tr === bl) return `${tl} ${tr} ${br}`;
327
- return `${tl} ${tr} ${br} ${bl}`;
328
- }
329
- function toCSSProperties(corners) {
330
- return {
331
- borderTopLeftRadius: toCSS(corners.topLeft),
332
- borderTopRightRadius: toCSS(corners.topRight),
333
- borderBottomRightRadius: toCSS(corners.bottomRight),
334
- borderBottomLeftRadius: toCSS(corners.bottomLeft)
335
- };
336
- }
337
- function toCSSDeclaration(corners) {
338
- return `border-radius: ${toCSSShorthand(corners)};`;
339
- }
340
- function toTailwindClass(value) {
341
- return `rounded-[${toCSS(value)}]`;
342
- }
343
- function toTailwindCorners(corners) {
344
- const tl = toCSS(corners.topLeft);
345
- const tr = toCSS(corners.topRight);
346
- const br = toCSS(corners.bottomRight);
347
- const bl = toCSS(corners.bottomLeft);
348
- if (tl === tr && tr === br && br === bl) {
349
- return `rounded-[${tl}]`;
350
- }
351
- return [
352
- `rounded-tl-[${tl}]`,
353
- `rounded-tr-[${tr}]`,
354
- `rounded-br-[${br}]`,
355
- `rounded-bl-[${bl}]`
356
- ].join(" ");
357
- }
358
- function toCSSVar(level) {
359
- return `var(--radius-${level})`;
360
- }
361
- // Annotate the CommonJS export names for ESM import in node:
362
- 0 && (module.exports = {
363
- BREAKPOINTS,
364
- clampScale,
365
- createLinearScale,
366
- createScale,
367
- innerCorners,
368
- innerRadius,
369
- mobileRadius,
370
- nestingPair,
371
- parseCorners,
372
- parseRadius,
373
- requiredGap,
374
- responsiveRadius,
375
- roundCorners,
376
- scaleBy,
377
- setBottom,
378
- setCorner,
379
- setLeft,
380
- setRight,
381
- setTop,
382
- sortedBreakpoints,
383
- sortedLevels,
384
- stepRadius,
385
- toCSS,
386
- toCSSDeclaration,
387
- toCSSProperties,
388
- toCSSShorthand,
389
- toCSSVar,
390
- toPx,
391
- toRem,
392
- toTailwindClass,
393
- toTailwindCorners,
394
- uniformCorners
395
- });
package/dist/index.d.cts DELETED
@@ -1,305 +0,0 @@
1
- /**
2
- * A single radius value.
3
- *
4
- * The original unit is preserved; conversion to other units is on-demand
5
- * via the format module.
6
- */
7
- interface RadiusValue {
8
- /** Numeric value in the original unit */
9
- readonly value: number;
10
- /** CSS unit */
11
- readonly unit: "px" | "rem" | "%";
12
- /** Original authored string, e.g. `"8px"`, `"0.5rem"` */
13
- readonly original: string;
14
- }
15
- /**
16
- * Per-corner radii (CSS `border-radius` longhand).
17
- */
18
- interface CornerRadii {
19
- readonly topLeft: RadiusValue;
20
- readonly topRight: RadiusValue;
21
- readonly bottomRight: RadiusValue;
22
- readonly bottomLeft: RadiusValue;
23
- }
24
- /** Corner position names. */
25
- type Corner = "topLeft" | "topRight" | "bottomRight" | "bottomLeft";
26
- /**
27
- * Named radius scale levels matching `@ariaui/tokens`.
28
- */
29
- type RadiusLevel = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full";
30
- /** A radius scale: level name → value mapping. */
31
- type RadiusScale = Record<string, RadiusValue>;
32
- /** Breakpoint name → pixel value. */
33
- type Breakpoints = Record<string, number>;
34
- /** Responsive radius: default + optional breakpoint overrides. */
35
- interface ResponsiveRadius {
36
- readonly default: RadiusValue;
37
- readonly breakpoints: Record<string, RadiusValue>;
38
- }
39
-
40
- /**
41
- * Parse a single CSS radius value string into a `RadiusValue`.
42
- *
43
- * Accepts `px`, `rem`, and `%` units. Plain numbers are treated as `px`.
44
- *
45
- * @example
46
- * parseRadius("8px") → { value: 8, unit: "px", original: "8px" }
47
- * parseRadius("0.5rem") → { value: 0.5, unit: "rem", original: "0.5rem" }
48
- * parseRadius(8) → { value: 8, unit: "px", original: "8px" }
49
- */
50
- declare function parseRadius(input: string | number): RadiusValue;
51
- /**
52
- * Parse a CSS `border-radius` shorthand into per-corner `CornerRadii`.
53
- *
54
- * Follows CSS shorthand rules:
55
- * - 1 value: all corners
56
- * - 2 values: top-left/bottom-right, top-right/bottom-left
57
- * - 3 values: top-left, top-right/bottom-left, bottom-right
58
- * - 4 values: top-left, top-right, bottom-right, bottom-left
59
- *
60
- * Does **not** support the `x / y` elliptical radius syntax.
61
- *
62
- * @example
63
- * parseCorners("8px") → all corners 8px
64
- * parseCorners("8px 4px") → TL/BR=8, TR/BL=4
65
- * parseCorners("8px 4px 2px 0px") → TL=8, TR=4, BR=2, BL=0
66
- */
67
- declare function parseCorners(input: string): CornerRadii;
68
-
69
- /**
70
- * Create a linear radius scale.
71
- *
72
- * Generates `count` steps starting from `base`, incrementing by `step`.
73
- * Steps are named `"0"`, `"1"`, `"2"`, etc.
74
- *
75
- * @example
76
- * createLinearScale(0, 4, 6)
77
- * // → { "0": 0px, "1": 4px, "2": 8px, "3": 12px, "4": 16px, "5": 20px }
78
- */
79
- declare function createLinearScale(base?: number, step?: number, count?: number): RadiusScale;
80
- /**
81
- * Create a radius scale from explicit named values.
82
- *
83
- * @example
84
- * createScale({ none: 0, sm: 4, md: 8, lg: 12, full: "9999px" })
85
- */
86
- declare function createScale(values: Record<string, number | string>): RadiusScale;
87
- /**
88
- * Scale all values in a radius scale by a factor.
89
- *
90
- * @example
91
- * scaleBy(scale, 1.5) // 50% larger radii
92
- */
93
- declare function scaleBy(scale: RadiusScale, factor: number): RadiusScale;
94
- /**
95
- * Clamp all values in a scale to a [min, max] range.
96
- *
97
- * Values are clamped in their original unit.
98
- */
99
- declare function clampScale(scale: RadiusScale, min: number, max: number): RadiusScale;
100
- /**
101
- * Get level names sorted by value (ascending).
102
- */
103
- declare function sortedLevels(scale: RadiusScale): string[];
104
- /**
105
- * Step to the next or previous level in a scale.
106
- *
107
- * Levels are ordered by value. Returns the current level if at a boundary.
108
- */
109
- declare function stepRadius(scale: RadiusScale, current: string, direction: "up" | "down"): string;
110
-
111
- /**
112
- * Create uniform corners (all four corners the same).
113
- *
114
- * @example
115
- * uniformCorners("8px")
116
- * uniformCorners(8)
117
- * uniformCorners({ value: 8, unit: "px", original: "8px" })
118
- */
119
- declare function uniformCorners(radius: RadiusValue | string | number): CornerRadii;
120
- /**
121
- * Set a single corner, returning new CornerRadii.
122
- *
123
- * @example
124
- * setCorner(corners, "topLeft", "12px")
125
- */
126
- declare function setCorner(corners: CornerRadii, corner: Corner, value: RadiusValue | string | number): CornerRadii;
127
- /**
128
- * Set both top corners.
129
- */
130
- declare function setTop(corners: CornerRadii, value: RadiusValue | string | number): CornerRadii;
131
- /**
132
- * Set both bottom corners.
133
- */
134
- declare function setBottom(corners: CornerRadii, value: RadiusValue | string | number): CornerRadii;
135
- /**
136
- * Set both left corners.
137
- */
138
- declare function setLeft(corners: CornerRadii, value: RadiusValue | string | number): CornerRadii;
139
- /**
140
- * Set both right corners.
141
- */
142
- declare function setRight(corners: CornerRadii, value: RadiusValue | string | number): CornerRadii;
143
- /**
144
- * Round only the specified corners; all others are set to 0.
145
- *
146
- * @example
147
- * roundCorners("12px", "topLeft", "topRight")
148
- * // → TL=12px, TR=12px, BR=0px, BL=0px
149
- */
150
- declare function roundCorners(radius: RadiusValue | string | number, ...corners: Corner[]): CornerRadii;
151
-
152
- /**
153
- * Calculate the inner radius for a nested element.
154
- *
155
- * When a rounded parent has padding/gap, the child needs a smaller radius
156
- * to visually match the parent's curve: `inner = outer - gap`.
157
- *
158
- * Result is clamped to ≥ 0 (except for `9999px` pill shapes, where
159
- * the subtraction still yields a huge value = still pill).
160
- *
161
- * @param outer - Outer (parent) radius
162
- * @param gap - Gap between parent and child edges (in the same unit as outer)
163
- *
164
- * @example
165
- * innerRadius("12px", 4) → { value: 8, unit: "px", original: "8px" }
166
- * innerRadius("9999px", 8) → { value: 9991, unit: "px", original: "9991px" }
167
- * innerRadius("4px", 8) → { value: 0, unit: "px", original: "0px" }
168
- */
169
- declare function innerRadius(outer: RadiusValue | string | number, gap: number): RadiusValue;
170
- /**
171
- * Calculate inner corners from outer corners and a uniform gap.
172
- *
173
- * Each corner's radius is reduced by `gap`, clamped to ≥ 0.
174
- *
175
- * @example
176
- * innerCorners(outerCorners, 8)
177
- */
178
- declare function innerCorners(outer: CornerRadii, gap: number): CornerRadii;
179
- /**
180
- * Calculate the gap needed to achieve a desired inner radius.
181
- *
182
- * `gap = outer.value - inner.value` (clamped to ≥ 0).
183
- */
184
- declare function requiredGap(outer: RadiusValue | string | number, inner: RadiusValue | string | number): number;
185
- /**
186
- * Suggest matching radii for a parent-child nesting pair.
187
- *
188
- * @param outerRadius - Desired outer radius in px
189
- * @param gap - Padding/gap between parent and child
190
- *
191
- * @returns `{ outer, inner }` — both as `RadiusValue`
192
- *
193
- * @example
194
- * nestingPair(12, 8) → { outer: 12px, inner: 4px }
195
- * nestingPair(6, 8) → { outer: 6px, inner: 0px }
196
- */
197
- declare function nestingPair(outerRadius: number, gap: number): {
198
- outer: RadiusValue;
199
- inner: RadiusValue;
200
- };
201
-
202
- /**
203
- * Default breakpoints matching Tailwind CSS v4 defaults.
204
- */
205
- declare const BREAKPOINTS: Breakpoints;
206
- /**
207
- * Create a responsive radius from a config map.
208
- *
209
- * The `"default"` key is required; other keys must match breakpoint names.
210
- *
211
- * @example
212
- * responsiveRadius({ default: "4px", md: "8px", lg: "12px" })
213
- * responsiveRadius({ default: 4, md: 8, lg: 12 })
214
- */
215
- declare function responsiveRadius(config: Record<string, string | number>, breakpoints?: Breakpoints): ResponsiveRadius;
216
- /**
217
- * Scale down a radius for mobile viewports.
218
- *
219
- * @param value - Original radius
220
- * @param factor - Scale factor (default 0.75)
221
- *
222
- * @example
223
- * mobileRadius(parseRadius("12px")) → { value: 9, ... }
224
- * mobileRadius(parseRadius("12px"), 0.5) → { value: 6, ... }
225
- */
226
- declare function mobileRadius(value: RadiusValue, factor?: number): RadiusValue;
227
- /**
228
- * Get the sorted breakpoint entries from a `ResponsiveRadius`,
229
- * ordered by viewport width (ascending).
230
- */
231
- declare function sortedBreakpoints(responsive: ResponsiveRadius, breakpoints?: Breakpoints): Array<[string, number, RadiusValue]>;
232
-
233
- /**
234
- * Format a `RadiusValue` as a CSS value string in its original unit.
235
- *
236
- * @example
237
- * toCSS(parseRadius("8px")) → "8px"
238
- * toCSS(parseRadius("0.5rem")) → "0.5rem"
239
- */
240
- declare function toCSS(value: RadiusValue): string;
241
- /**
242
- * Convert a `RadiusValue` to rem.
243
- *
244
- * @param base - Root font size in px (default 16)
245
- *
246
- * @example
247
- * toRem(parseRadius("8px")) → "0.5rem"
248
- * toRem(parseRadius("0.5rem")) → "0.5rem"
249
- * toRem(parseRadius("24px"), 16) → "1.5rem"
250
- */
251
- declare function toRem(value: RadiusValue, base?: number): string;
252
- /**
253
- * Convert a `RadiusValue` to px.
254
- *
255
- * @param base - Root font size in px (default 16, used for rem → px)
256
- */
257
- declare function toPx(value: RadiusValue, base?: number): string;
258
- /**
259
- * Format `CornerRadii` as a CSS `border-radius` shorthand.
260
- *
261
- * Uses the most compact shorthand form possible.
262
- *
263
- * @example
264
- * toCSSShorthand(uniformCorners(8)) → "8px"
265
- * toCSSShorthand(corners) → "8px 4px 2px 0px"
266
- */
267
- declare function toCSSShorthand(corners: CornerRadii): string;
268
- /**
269
- * Format `CornerRadii` as React `CSSProperties`.
270
- *
271
- * @example
272
- * toCSSProperties(corners)
273
- * // → { borderTopLeftRadius: "8px", borderTopRightRadius: "4px", ... }
274
- */
275
- declare function toCSSProperties(corners: CornerRadii): Record<string, string>;
276
- /**
277
- * Format `CornerRadii` as a CSS declaration block.
278
- *
279
- * Uses shorthand when possible.
280
- */
281
- declare function toCSSDeclaration(corners: CornerRadii): string;
282
- /**
283
- * Format a `RadiusValue` as a Tailwind CSS `rounded-[...]` class.
284
- *
285
- * @example
286
- * toTailwindClass(parseRadius("8px")) → "rounded-[8px]"
287
- */
288
- declare function toTailwindClass(value: RadiusValue): string;
289
- /**
290
- * Format `CornerRadii` as Tailwind per-corner classes.
291
- *
292
- * @example
293
- * toTailwindCorners(corners)
294
- * // → "rounded-tl-[8px] rounded-tr-[4px] rounded-br-[2px] rounded-bl-[0px]"
295
- */
296
- declare function toTailwindCorners(corners: CornerRadii): string;
297
- /**
298
- * Generate a CSS `var()` reference for a token radius level.
299
- *
300
- * @example
301
- * toCSSVar("md") → "var(--radius-md)"
302
- */
303
- declare function toCSSVar(level: string): string;
304
-
305
- export { BREAKPOINTS, type Breakpoints, type Corner, type CornerRadii, type RadiusLevel, type RadiusScale, type RadiusValue, type ResponsiveRadius, clampScale, createLinearScale, createScale, innerCorners, innerRadius, mobileRadius, nestingPair, parseCorners, parseRadius, requiredGap, responsiveRadius, roundCorners, scaleBy, setBottom, setCorner, setLeft, setRight, setTop, sortedBreakpoints, sortedLevels, stepRadius, toCSS, toCSSDeclaration, toCSSProperties, toCSSShorthand, toCSSVar, toPx, toRem, toTailwindClass, toTailwindCorners, uniformCorners };