@ariaui/radius 0.1.1 → 0.1.2
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/package.json +1 -1
- package/dist/chunk-3Y6IG3UW.js +0 -341
- package/dist/index.cjs +0 -395
- package/dist/index.d.cts +0 -305
- package/dist/index.d.ts +0 -305
- package/dist/index.js +0 -68
- package/dist/tokens.cjs +0 -454
- package/dist/tokens.d.cts +0 -42
- package/dist/tokens.d.ts +0 -42
- package/dist/tokens.js +0 -122
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 };
|