@usefidel/design-system 0.22.0 → 0.23.1
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/fidel.manifest.json +2 -2
- package/dist/index.cjs +100 -85
- package/dist/index.css +83 -8
- package/dist/index.d.cts +23 -6
- package/dist/index.d.ts +23 -6
- package/dist/index.js +99 -85
- package/package.json +1 -1
package/dist/fidel.manifest.json
CHANGED
package/dist/index.cjs
CHANGED
|
@@ -53,6 +53,7 @@ __export(index_exports, {
|
|
|
53
53
|
StackedCardsIllustration: () => StackedCardsIllustration,
|
|
54
54
|
Stat: () => Stat,
|
|
55
55
|
StepList: () => StepList,
|
|
56
|
+
Swatch: () => Swatch,
|
|
56
57
|
TabNav: () => TabNav,
|
|
57
58
|
Table: () => Table,
|
|
58
59
|
Tag: () => Tag,
|
|
@@ -1403,9 +1404,22 @@ function Stat({ label, value, children, className, ...rest }) {
|
|
|
1403
1404
|
] });
|
|
1404
1405
|
}
|
|
1405
1406
|
|
|
1407
|
+
// src/components/Swatch/Swatch.tsx
|
|
1408
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1409
|
+
function Swatch({ color, name, value, children, className, ...rest }) {
|
|
1410
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: ["fds-swatch", className].filter(Boolean).join(" "), ...rest, children: [
|
|
1411
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fds-swatch__color", style: { "--fds-swatch-color": color }, "aria-hidden": "true" }),
|
|
1412
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fds-swatch__body", children: [
|
|
1413
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "fds-swatch__name", children: name }),
|
|
1414
|
+
value != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "fds-swatch__value", children: value }),
|
|
1415
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fds-swatch__detail", children })
|
|
1416
|
+
] })
|
|
1417
|
+
] });
|
|
1418
|
+
}
|
|
1419
|
+
|
|
1406
1420
|
// src/components/Checkbox/Checkbox.tsx
|
|
1407
1421
|
var import_react12 = require("react");
|
|
1408
|
-
var
|
|
1422
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1409
1423
|
var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, description, indeterminate = false, className, id, disabled, ...rest }, ref) {
|
|
1410
1424
|
const generatedId = (0, import_react12.useId)();
|
|
1411
1425
|
const inputId = id ?? generatedId;
|
|
@@ -1414,13 +1428,13 @@ var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, descri
|
|
|
1414
1428
|
(0, import_react12.useEffect)(() => {
|
|
1415
1429
|
if (inputRef.current) inputRef.current.indeterminate = indeterminate;
|
|
1416
1430
|
}, [indeterminate]);
|
|
1417
|
-
return /* @__PURE__ */ (0,
|
|
1431
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1418
1432
|
"div",
|
|
1419
1433
|
{
|
|
1420
1434
|
className: ["fds-checkbox", className].filter(Boolean).join(" "),
|
|
1421
1435
|
"data-disabled": disabled ? "" : void 0,
|
|
1422
1436
|
children: [
|
|
1423
|
-
/* @__PURE__ */ (0,
|
|
1437
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1424
1438
|
"input",
|
|
1425
1439
|
{
|
|
1426
1440
|
...rest,
|
|
@@ -1431,14 +1445,14 @@ var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, descri
|
|
|
1431
1445
|
className: "fds-checkbox__input"
|
|
1432
1446
|
}
|
|
1433
1447
|
),
|
|
1434
|
-
/* @__PURE__ */ (0,
|
|
1435
|
-
/* @__PURE__ */ (0,
|
|
1436
|
-
/* @__PURE__ */ (0,
|
|
1437
|
-
/* @__PURE__ */ (0,
|
|
1448
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { htmlFor: inputId, className: "fds-checkbox__control", children: [
|
|
1449
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "fds-checkbox__box", "aria-hidden": "true", children: [
|
|
1450
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { className: "fds-checkbox__tick", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
1451
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { className: "fds-checkbox__dash", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M3 6h6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) })
|
|
1438
1452
|
] }),
|
|
1439
|
-
(label != null || description != null) && /* @__PURE__ */ (0,
|
|
1440
|
-
label != null && /* @__PURE__ */ (0,
|
|
1441
|
-
description != null && /* @__PURE__ */ (0,
|
|
1453
|
+
(label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "fds-checkbox__text", children: [
|
|
1454
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-checkbox__label", children: label }),
|
|
1455
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-checkbox__description", children: description })
|
|
1442
1456
|
] })
|
|
1443
1457
|
] })
|
|
1444
1458
|
]
|
|
@@ -1448,17 +1462,17 @@ var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, descri
|
|
|
1448
1462
|
|
|
1449
1463
|
// src/components/Radio/Radio.tsx
|
|
1450
1464
|
var import_react13 = require("react");
|
|
1451
|
-
var
|
|
1465
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1452
1466
|
var Radio = (0, import_react13.forwardRef)(function Radio2({ label, description, className, id, disabled, ...rest }, ref) {
|
|
1453
1467
|
const generatedId = (0, import_react13.useId)();
|
|
1454
1468
|
const inputId = id ?? generatedId;
|
|
1455
|
-
return /* @__PURE__ */ (0,
|
|
1456
|
-
/* @__PURE__ */ (0,
|
|
1457
|
-
/* @__PURE__ */ (0,
|
|
1458
|
-
/* @__PURE__ */ (0,
|
|
1459
|
-
(label != null || description != null) && /* @__PURE__ */ (0,
|
|
1460
|
-
label != null && /* @__PURE__ */ (0,
|
|
1461
|
-
description != null && /* @__PURE__ */ (0,
|
|
1469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: ["fds-radio", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
|
|
1470
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("input", { ...rest, id: inputId, ref, type: "radio", disabled, className: "fds-radio__input" }),
|
|
1471
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { htmlFor: inputId, className: "fds-radio__control", children: [
|
|
1472
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-radio__circle", "aria-hidden": "true" }),
|
|
1473
|
+
(label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "fds-radio__text", children: [
|
|
1474
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-radio__label", children: label }),
|
|
1475
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-radio__description", children: description })
|
|
1462
1476
|
] })
|
|
1463
1477
|
] })
|
|
1464
1478
|
] });
|
|
@@ -1466,13 +1480,13 @@ var Radio = (0, import_react13.forwardRef)(function Radio2({ label, description,
|
|
|
1466
1480
|
|
|
1467
1481
|
// src/components/RadioCard/RadioCard.tsx
|
|
1468
1482
|
var import_react14 = require("react");
|
|
1469
|
-
var
|
|
1483
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1470
1484
|
var RadioCard = (0, import_react14.forwardRef)(function RadioCard2({ label, description, icon, meta, className, id, disabled, ...rest }, ref) {
|
|
1471
1485
|
const generatedId = (0, import_react14.useId)();
|
|
1472
1486
|
const inputId = id ?? generatedId;
|
|
1473
1487
|
const descriptionId = description != null ? `${inputId}-description` : void 0;
|
|
1474
|
-
return /* @__PURE__ */ (0,
|
|
1475
|
-
/* @__PURE__ */ (0,
|
|
1488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: ["fds-radio-card", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
|
|
1489
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1476
1490
|
"input",
|
|
1477
1491
|
{
|
|
1478
1492
|
...rest,
|
|
@@ -1484,21 +1498,21 @@ var RadioCard = (0, import_react14.forwardRef)(function RadioCard2({ label, desc
|
|
|
1484
1498
|
className: "fds-radio-card__input"
|
|
1485
1499
|
}
|
|
1486
1500
|
),
|
|
1487
|
-
/* @__PURE__ */ (0,
|
|
1488
|
-
icon != null && /* @__PURE__ */ (0,
|
|
1489
|
-
/* @__PURE__ */ (0,
|
|
1490
|
-
/* @__PURE__ */ (0,
|
|
1491
|
-
description != null && /* @__PURE__ */ (0,
|
|
1492
|
-
meta != null && /* @__PURE__ */ (0,
|
|
1501
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { htmlFor: inputId, className: "fds-radio-card__body", children: [
|
|
1502
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio-card__icon", "aria-hidden": "true", children: icon }),
|
|
1503
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "fds-radio-card__text", children: [
|
|
1504
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio-card__label", children: label }),
|
|
1505
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { id: descriptionId, className: "fds-radio-card__description", children: description }),
|
|
1506
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio-card__meta", children: meta })
|
|
1493
1507
|
] }),
|
|
1494
|
-
/* @__PURE__ */ (0,
|
|
1508
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio-card__circle", "aria-hidden": "true" })
|
|
1495
1509
|
] })
|
|
1496
1510
|
] });
|
|
1497
1511
|
});
|
|
1498
1512
|
|
|
1499
1513
|
// src/components/Accordion/Accordion.tsx
|
|
1500
1514
|
var import_react15 = require("react");
|
|
1501
|
-
var
|
|
1515
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1502
1516
|
function Accordion({
|
|
1503
1517
|
summary,
|
|
1504
1518
|
actions,
|
|
@@ -1517,15 +1531,15 @@ function Accordion({
|
|
|
1517
1531
|
if (openProp === void 0) setOpenState(next);
|
|
1518
1532
|
onOpenChange?.(next);
|
|
1519
1533
|
};
|
|
1520
|
-
return /* @__PURE__ */ (0,
|
|
1534
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1521
1535
|
"div",
|
|
1522
1536
|
{
|
|
1523
1537
|
className: ["fds-accordion", className].filter(Boolean).join(" "),
|
|
1524
1538
|
"data-open": open ? "" : void 0,
|
|
1525
1539
|
...rest,
|
|
1526
1540
|
children: [
|
|
1527
|
-
/* @__PURE__ */ (0,
|
|
1528
|
-
/* @__PURE__ */ (0,
|
|
1541
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "fds-accordion__header", children: [
|
|
1542
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1529
1543
|
"button",
|
|
1530
1544
|
{
|
|
1531
1545
|
type: "button",
|
|
@@ -1536,17 +1550,17 @@ function Accordion({
|
|
|
1536
1550
|
children: summary
|
|
1537
1551
|
}
|
|
1538
1552
|
),
|
|
1539
|
-
actions != null && /* @__PURE__ */ (0,
|
|
1540
|
-
/* @__PURE__ */ (0,
|
|
1553
|
+
actions != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "fds-accordion__actions", children: actions }),
|
|
1554
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fds-accordion__chevron", "aria-hidden": "true", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
|
|
1541
1555
|
] }),
|
|
1542
|
-
/* @__PURE__ */ (0,
|
|
1556
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: bodyId, className: "fds-accordion__body", hidden: !open, children })
|
|
1543
1557
|
]
|
|
1544
1558
|
}
|
|
1545
1559
|
);
|
|
1546
1560
|
}
|
|
1547
1561
|
|
|
1548
1562
|
// src/components/StepList/StepList.tsx
|
|
1549
|
-
var
|
|
1563
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1550
1564
|
var STATUS_TEXT = {
|
|
1551
1565
|
done: "Done",
|
|
1552
1566
|
active: "In progress",
|
|
@@ -1556,32 +1570,32 @@ var STATUS_TEXT = {
|
|
|
1556
1570
|
function StepIcon({ status }) {
|
|
1557
1571
|
const common = { viewBox: "0 0 24 24", width: 18, height: 18, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
|
|
1558
1572
|
if (status === "done") {
|
|
1559
|
-
return /* @__PURE__ */ (0,
|
|
1560
|
-
/* @__PURE__ */ (0,
|
|
1561
|
-
/* @__PURE__ */ (0,
|
|
1573
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("svg", { ...common, children: [
|
|
1574
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
|
|
1575
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M8 12.5l2.5 2.5 5-5.5" })
|
|
1562
1576
|
] });
|
|
1563
1577
|
}
|
|
1564
1578
|
if (status === "active") {
|
|
1565
|
-
return /* @__PURE__ */ (0,
|
|
1579
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { ...common, className: "fds-steps__spinner", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" }) });
|
|
1566
1580
|
}
|
|
1567
1581
|
if (status === "failed") {
|
|
1568
|
-
return /* @__PURE__ */ (0,
|
|
1569
|
-
/* @__PURE__ */ (0,
|
|
1570
|
-
/* @__PURE__ */ (0,
|
|
1582
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("svg", { ...common, children: [
|
|
1583
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
|
|
1584
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M12 7.5v5.5M12 16.5v.01" })
|
|
1571
1585
|
] });
|
|
1572
1586
|
}
|
|
1573
|
-
return /* @__PURE__ */ (0,
|
|
1587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { ...common, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "12", r: "9" }) });
|
|
1574
1588
|
}
|
|
1575
1589
|
function StepList({ steps, className, ...rest }) {
|
|
1576
|
-
return /* @__PURE__ */ (0,
|
|
1590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ol", { className: ["fds-steps", className].filter(Boolean).join(" "), ...rest, children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1577
1591
|
"li",
|
|
1578
1592
|
{
|
|
1579
1593
|
className: `fds-steps__step fds-steps__step--${step.status}`,
|
|
1580
1594
|
"aria-current": step.status === "active" ? "step" : void 0,
|
|
1581
1595
|
children: [
|
|
1582
|
-
/* @__PURE__ */ (0,
|
|
1583
|
-
/* @__PURE__ */ (0,
|
|
1584
|
-
/* @__PURE__ */ (0,
|
|
1596
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fds-steps__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StepIcon, { status: step.status }) }),
|
|
1597
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fds-steps__label", children: step.label }),
|
|
1598
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "fds-steps__sr", children: [
|
|
1585
1599
|
", ",
|
|
1586
1600
|
STATUS_TEXT[step.status]
|
|
1587
1601
|
] })
|
|
@@ -1593,7 +1607,7 @@ function StepList({ steps, className, ...rest }) {
|
|
|
1593
1607
|
|
|
1594
1608
|
// src/components/Input/Input.tsx
|
|
1595
1609
|
var import_react16 = require("react");
|
|
1596
|
-
var
|
|
1610
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1597
1611
|
var Input = (0, import_react16.forwardRef)(function Input2({ label, hint, error, leadingIcon, trailing, id, className, containerClassName, readOnly, disabled, ...rest }, ref) {
|
|
1598
1612
|
const genId = (0, import_react16.useId)();
|
|
1599
1613
|
const inputId = id ?? genId;
|
|
@@ -1604,11 +1618,11 @@ var Input = (0, import_react16.forwardRef)(function Input2({ label, hint, error,
|
|
|
1604
1618
|
error ? "fds-input__box--error" : "",
|
|
1605
1619
|
readOnly || disabled ? "fds-input__box--locked" : ""
|
|
1606
1620
|
].filter(Boolean).join(" ");
|
|
1607
|
-
return /* @__PURE__ */ (0,
|
|
1608
|
-
label != null && /* @__PURE__ */ (0,
|
|
1609
|
-
/* @__PURE__ */ (0,
|
|
1610
|
-
leadingIcon != null && /* @__PURE__ */ (0,
|
|
1611
|
-
/* @__PURE__ */ (0,
|
|
1621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: ["fds-input", containerClassName].filter(Boolean).join(" "), children: [
|
|
1622
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { htmlFor: inputId, className: "fds-input__label", children: label }),
|
|
1623
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: boxClasses, children: [
|
|
1624
|
+
leadingIcon != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fds-input__icon", "aria-hidden": "true", children: leadingIcon }),
|
|
1625
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1612
1626
|
"input",
|
|
1613
1627
|
{
|
|
1614
1628
|
ref,
|
|
@@ -1621,14 +1635,14 @@ var Input = (0, import_react16.forwardRef)(function Input2({ label, hint, error,
|
|
|
1621
1635
|
...rest
|
|
1622
1636
|
}
|
|
1623
1637
|
),
|
|
1624
|
-
trailing != null && /* @__PURE__ */ (0,
|
|
1638
|
+
trailing != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fds-input__trailing", children: trailing })
|
|
1625
1639
|
] }),
|
|
1626
|
-
message != null && /* @__PURE__ */ (0,
|
|
1640
|
+
message != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { id: msgId, className: error ? "fds-input__error" : "fds-input__hint", children: message })
|
|
1627
1641
|
] });
|
|
1628
1642
|
});
|
|
1629
1643
|
|
|
1630
1644
|
// src/components/IconButton/IconButton.tsx
|
|
1631
|
-
var
|
|
1645
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1632
1646
|
function IconButton({
|
|
1633
1647
|
icon,
|
|
1634
1648
|
variant = "outlined",
|
|
@@ -1638,12 +1652,12 @@ function IconButton({
|
|
|
1638
1652
|
...rest
|
|
1639
1653
|
}) {
|
|
1640
1654
|
const classes = ["fds-icon-button", `fds-icon-button--${variant}`, `fds-icon-button--${size}`, className].filter(Boolean).join(" ");
|
|
1641
|
-
return /* @__PURE__ */ (0,
|
|
1655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type, className: classes, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fds-icon-button__icon", "aria-hidden": "true", children: icon }) });
|
|
1642
1656
|
}
|
|
1643
1657
|
|
|
1644
1658
|
// src/components/Menu/Menu.tsx
|
|
1645
1659
|
var import_react17 = require("react");
|
|
1646
|
-
var
|
|
1660
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1647
1661
|
function Menu({ trigger, items, align = "end", className }) {
|
|
1648
1662
|
const listId = (0, import_react17.useId)();
|
|
1649
1663
|
const rootRef = (0, import_react17.useRef)(null);
|
|
@@ -1725,9 +1739,9 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1725
1739
|
}
|
|
1726
1740
|
}
|
|
1727
1741
|
});
|
|
1728
|
-
return /* @__PURE__ */ (0,
|
|
1742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ref: rootRef, className: ["fds-menu", className].filter(Boolean).join(" "), children: [
|
|
1729
1743
|
wired,
|
|
1730
|
-
open && /* @__PURE__ */ (0,
|
|
1744
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1731
1745
|
"div",
|
|
1732
1746
|
{
|
|
1733
1747
|
ref: listRef,
|
|
@@ -1737,7 +1751,7 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1737
1751
|
className: `fds-menu__list fds-menu__list--${align}`,
|
|
1738
1752
|
"aria-activedescendant": `${listId}-item-${active}`,
|
|
1739
1753
|
onKeyDown: onListKeyDown,
|
|
1740
|
-
children: items.map((it, i) => /* @__PURE__ */ (0,
|
|
1754
|
+
children: items.map((it, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
1741
1755
|
"div",
|
|
1742
1756
|
{
|
|
1743
1757
|
id: `${listId}-item-${i}`,
|
|
@@ -1753,7 +1767,7 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1753
1767
|
onMouseDown: (e) => e.preventDefault(),
|
|
1754
1768
|
onClick: () => choose(i),
|
|
1755
1769
|
children: [
|
|
1756
|
-
it.icon != null && /* @__PURE__ */ (0,
|
|
1770
|
+
it.icon != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fds-menu__icon", "aria-hidden": "true", children: it.icon }),
|
|
1757
1771
|
it.label
|
|
1758
1772
|
]
|
|
1759
1773
|
},
|
|
@@ -1765,10 +1779,10 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1765
1779
|
}
|
|
1766
1780
|
|
|
1767
1781
|
// src/components/Table/Table.tsx
|
|
1768
|
-
var
|
|
1782
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1769
1783
|
function Table({ columns, rows, rowKey, empty, className, "aria-label": ariaLabel, ...rest }) {
|
|
1770
|
-
return /* @__PURE__ */ (0,
|
|
1771
|
-
/* @__PURE__ */ (0,
|
|
1784
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: ["fds-table", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("table", { className: "fds-table__table", "aria-label": ariaLabel, children: [
|
|
1785
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1772
1786
|
"th",
|
|
1773
1787
|
{
|
|
1774
1788
|
scope: "col",
|
|
@@ -1778,17 +1792,17 @@ function Table({ columns, rows, rowKey, empty, className, "aria-label": ariaLabe
|
|
|
1778
1792
|
},
|
|
1779
1793
|
c.key
|
|
1780
1794
|
)) }) }),
|
|
1781
|
-
/* @__PURE__ */ (0,
|
|
1782
|
-
rows.map((row) => /* @__PURE__ */ (0,
|
|
1783
|
-
rows.length === 0 && empty != null && /* @__PURE__ */ (0,
|
|
1795
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("tbody", { children: [
|
|
1796
|
+
rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: c.align === "end" ? "fds-table__cell--end" : void 0, children: c.cell(row) }, c.key)) }, rowKey(row))),
|
|
1797
|
+
rows.length === 0 && empty != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { colSpan: columns.length, className: "fds-table__empty", children: empty }) })
|
|
1784
1798
|
] })
|
|
1785
1799
|
] }) });
|
|
1786
1800
|
}
|
|
1787
1801
|
|
|
1788
1802
|
// src/components/PricingCard/PricingCard.tsx
|
|
1789
|
-
var
|
|
1803
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1790
1804
|
function CheckIcon3() {
|
|
1791
|
-
return /* @__PURE__ */ (0,
|
|
1805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
1792
1806
|
}
|
|
1793
1807
|
function PricingCard({
|
|
1794
1808
|
eyebrow,
|
|
@@ -1806,25 +1820,25 @@ function PricingCard({
|
|
|
1806
1820
|
...rest
|
|
1807
1821
|
}) {
|
|
1808
1822
|
const classes = ["fds-pricing-card", highlighted ? "fds-pricing-card--highlighted" : "", className].filter(Boolean).join(" ");
|
|
1809
|
-
return /* @__PURE__ */ (0,
|
|
1810
|
-
/* @__PURE__ */ (0,
|
|
1811
|
-
eyebrow != null && /* @__PURE__ */ (0,
|
|
1812
|
-
/* @__PURE__ */ (0,
|
|
1823
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("article", { className: classes, ...rest, children: [
|
|
1824
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "fds-pricing-card__top", children: [
|
|
1825
|
+
eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fds-pricing-card__eyebrow", children: eyebrow }),
|
|
1826
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("h3", { className: "fds-pricing-card__title", children: [
|
|
1813
1827
|
title,
|
|
1814
1828
|
badge
|
|
1815
1829
|
] }),
|
|
1816
|
-
/* @__PURE__ */ (0,
|
|
1817
|
-
/* @__PURE__ */ (0,
|
|
1818
|
-
period != null && /* @__PURE__ */ (0,
|
|
1830
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "fds-pricing-card__price", children: [
|
|
1831
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fds-pricing-card__amount", children: price }),
|
|
1832
|
+
period != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fds-pricing-card__period", children: period })
|
|
1819
1833
|
] }),
|
|
1820
|
-
description != null && /* @__PURE__ */ (0,
|
|
1821
|
-
action != null && /* @__PURE__ */ (0,
|
|
1834
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "fds-pricing-card__description", children: description }),
|
|
1835
|
+
action != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "fds-pricing-card__action", children: action })
|
|
1822
1836
|
] }),
|
|
1823
|
-
features.length > 0 && /* @__PURE__ */ (0,
|
|
1824
|
-
/* @__PURE__ */ (0,
|
|
1825
|
-
featuresIntro != null && /* @__PURE__ */ (0,
|
|
1826
|
-
/* @__PURE__ */ (0,
|
|
1827
|
-
/* @__PURE__ */ (0,
|
|
1837
|
+
features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "fds-pricing-card__features", children: [
|
|
1838
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "fds-pricing-card__featuresTitle", children: featuresTitle }),
|
|
1839
|
+
featuresIntro != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "fds-pricing-card__intro", children: featuresIntro }),
|
|
1840
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "fds-pricing-card__list", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "fds-pricing-card__feature", children: [
|
|
1841
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fds-pricing-card__check", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CheckIcon3, {}) }),
|
|
1828
1842
|
f
|
|
1829
1843
|
] }, i)) })
|
|
1830
1844
|
] })
|
|
@@ -1865,6 +1879,7 @@ function PricingCard({
|
|
|
1865
1879
|
StackedCardsIllustration,
|
|
1866
1880
|
Stat,
|
|
1867
1881
|
StepList,
|
|
1882
|
+
Swatch,
|
|
1868
1883
|
TabNav,
|
|
1869
1884
|
Table,
|
|
1870
1885
|
Tag,
|
package/dist/index.css
CHANGED
|
@@ -2215,11 +2215,32 @@
|
|
|
2215
2215
|
}
|
|
2216
2216
|
@media (max-width: 480px) {
|
|
2217
2217
|
.fds-callout {
|
|
2218
|
-
|
|
2218
|
+
display: grid;
|
|
2219
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
2220
|
+
gap: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
2221
|
+
}
|
|
2222
|
+
.fds-callout:not(:has(> .fds-callout__icon)) {
|
|
2223
|
+
grid-template-columns: minmax(0, 1fr);
|
|
2224
|
+
}
|
|
2225
|
+
.fds-callout__icon {
|
|
2226
|
+
align-self: center;
|
|
2227
|
+
}
|
|
2228
|
+
.fds-callout__body {
|
|
2229
|
+
display: contents;
|
|
2230
|
+
}
|
|
2231
|
+
.fds-callout__text,
|
|
2232
|
+
.fds-callout__action {
|
|
2233
|
+
grid-column: 1 / -1;
|
|
2234
|
+
}
|
|
2235
|
+
.fds-callout__text {
|
|
2236
|
+
margin-top: 0;
|
|
2219
2237
|
}
|
|
2220
2238
|
.fds-callout__action {
|
|
2221
|
-
flex-
|
|
2222
|
-
|
|
2239
|
+
flex-wrap: wrap;
|
|
2240
|
+
}
|
|
2241
|
+
.fds-callout__action > * {
|
|
2242
|
+
flex: 1 1 auto;
|
|
2243
|
+
justify-content: center;
|
|
2223
2244
|
}
|
|
2224
2245
|
}
|
|
2225
2246
|
.fds-callout--neutral {
|
|
@@ -2356,6 +2377,54 @@
|
|
|
2356
2377
|
margin-top: var(--spacing-3, 12px);
|
|
2357
2378
|
}
|
|
2358
2379
|
|
|
2380
|
+
/* src/components/Swatch/swatch.css */
|
|
2381
|
+
.fds-swatch {
|
|
2382
|
+
box-sizing: border-box;
|
|
2383
|
+
display: flex;
|
|
2384
|
+
flex-direction: column;
|
|
2385
|
+
min-width: 0;
|
|
2386
|
+
border: 1px solid var(--color-border, #e5e5e5);
|
|
2387
|
+
border-radius: var(--radius-lg, 8px);
|
|
2388
|
+
background: var(--color-bg, #ffffff);
|
|
2389
|
+
overflow: hidden;
|
|
2390
|
+
font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
|
|
2391
|
+
}
|
|
2392
|
+
.fds-swatch__color {
|
|
2393
|
+
height: var(--spacing-12, 48px);
|
|
2394
|
+
background: var(--fds-swatch-color, transparent);
|
|
2395
|
+
box-shadow: inset 0 -1px 0 var(--color-black-alpha-8, rgba(0, 0, 0, 0.08));
|
|
2396
|
+
}
|
|
2397
|
+
.fds-swatch__body {
|
|
2398
|
+
display: flex;
|
|
2399
|
+
flex-direction: column;
|
|
2400
|
+
gap: var(--spacing-1, 4px);
|
|
2401
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px) var(--spacing-3, 12px);
|
|
2402
|
+
min-width: 0;
|
|
2403
|
+
}
|
|
2404
|
+
.fds-swatch__name {
|
|
2405
|
+
margin: 0;
|
|
2406
|
+
font-family: var(--font-mono, "JetBrains Mono", monospace);
|
|
2407
|
+
font-size: var(--font-size-text-xs, 12px);
|
|
2408
|
+
line-height: var(--line-height-text-xs, 18px);
|
|
2409
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
2410
|
+
color: var(--color-text, #171717);
|
|
2411
|
+
overflow-wrap: anywhere;
|
|
2412
|
+
}
|
|
2413
|
+
.fds-swatch__value {
|
|
2414
|
+
margin: 0;
|
|
2415
|
+
font-family: var(--font-mono, "JetBrains Mono", monospace);
|
|
2416
|
+
font-size: var(--font-size-text-2xs, 11px);
|
|
2417
|
+
line-height: var(--line-height-text-2xs, 16px);
|
|
2418
|
+
color: var(--color-text-tertiary, #737373);
|
|
2419
|
+
overflow-wrap: anywhere;
|
|
2420
|
+
}
|
|
2421
|
+
.fds-swatch__detail {
|
|
2422
|
+
display: flex;
|
|
2423
|
+
flex-wrap: wrap;
|
|
2424
|
+
gap: var(--spacing-1, 4px);
|
|
2425
|
+
margin-top: var(--spacing-1, 4px);
|
|
2426
|
+
}
|
|
2427
|
+
|
|
2359
2428
|
/* src/components/Checkbox/checkbox.css */
|
|
2360
2429
|
.fds-checkbox {
|
|
2361
2430
|
display: inline-flex;
|
|
@@ -2997,8 +3066,10 @@
|
|
|
2997
3066
|
|
|
2998
3067
|
/* src/components/Table/table.css */
|
|
2999
3068
|
.fds-table {
|
|
3069
|
+
box-sizing: border-box;
|
|
3000
3070
|
width: 100%;
|
|
3001
3071
|
overflow-x: auto;
|
|
3072
|
+
border: 1px solid var(--color-border, #e5e5e5);
|
|
3002
3073
|
border-radius: var(--radius-xl, 12px);
|
|
3003
3074
|
background: var(--color-surface-raised, #ffffff);
|
|
3004
3075
|
}
|
|
@@ -3013,20 +3084,24 @@
|
|
|
3013
3084
|
}
|
|
3014
3085
|
.fds-table__table th {
|
|
3015
3086
|
padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
|
|
3016
|
-
background: var(--color-surface, #
|
|
3087
|
+
background: var(--color-surface-subtle, #fafafa);
|
|
3088
|
+
border-bottom: 1px solid var(--color-border, #e5e5e5);
|
|
3017
3089
|
font-size: var(--font-size-text-2xs, 11px);
|
|
3018
|
-
|
|
3090
|
+
line-height: var(--line-height-text-2xs, 16px);
|
|
3091
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
3092
|
+
letter-spacing: 0.02em;
|
|
3093
|
+
text-transform: uppercase;
|
|
3019
3094
|
color: var(--color-text-secondary, #525252);
|
|
3020
3095
|
text-align: left;
|
|
3021
3096
|
white-space: nowrap;
|
|
3022
3097
|
}
|
|
3023
3098
|
.fds-table__table td {
|
|
3024
3099
|
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
|
|
3025
|
-
border-
|
|
3100
|
+
border-top: 1px solid var(--color-border-light, #f5f5f5);
|
|
3026
3101
|
vertical-align: middle;
|
|
3027
3102
|
}
|
|
3028
|
-
.fds-table__table tbody tr:
|
|
3029
|
-
border-
|
|
3103
|
+
.fds-table__table tbody tr:first-child td {
|
|
3104
|
+
border-top: 0;
|
|
3030
3105
|
}
|
|
3031
3106
|
.fds-table__table .fds-table__cell--end {
|
|
3032
3107
|
text-align: right;
|
package/dist/index.d.cts
CHANGED
|
@@ -666,6 +666,23 @@ interface StatProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
666
666
|
*/
|
|
667
667
|
declare function Stat({ label, value, children, className, ...rest }: StatProps): react.JSX.Element;
|
|
668
668
|
|
|
669
|
+
interface SwatchProps extends HTMLAttributes<HTMLDivElement> {
|
|
670
|
+
/** The colour to show, as any CSS colour. Pass a value you have already validated. */
|
|
671
|
+
color: string;
|
|
672
|
+
/** The token's name, e.g. "accent". Set in mono. */
|
|
673
|
+
name: ReactNode;
|
|
674
|
+
/** The value as written, e.g. "#ff6b00". Set in mono under the name. */
|
|
675
|
+
value?: ReactNode;
|
|
676
|
+
/** Detail under the value, e.g. a row of Tags. */
|
|
677
|
+
children?: ReactNode;
|
|
678
|
+
}
|
|
679
|
+
/**
|
|
680
|
+
* Fidel design-system Swatch: a colour block over a token's name and value.
|
|
681
|
+
* A hairline inside the block keeps white and near-background colours visible.
|
|
682
|
+
* Lay several out in a grid.
|
|
683
|
+
*/
|
|
684
|
+
declare function Swatch({ color, name, value, children, className, ...rest }: SwatchProps): react.JSX.Element;
|
|
685
|
+
|
|
669
686
|
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
|
|
670
687
|
/** Text beside the box. Without one, pass `aria-label`. */
|
|
671
688
|
label?: ReactNode;
|
|
@@ -841,11 +858,11 @@ interface TableProps<Row> extends Omit<HTMLAttributes<HTMLDivElement>, 'children
|
|
|
841
858
|
'aria-label': string;
|
|
842
859
|
}
|
|
843
860
|
/**
|
|
844
|
-
* Fidel design-system Table: a
|
|
845
|
-
* for records people scan by column, like
|
|
846
|
-
* the header and shows `empty` beneath it.
|
|
847
|
-
* screens instead of squashing columns.
|
|
848
|
-
*
|
|
861
|
+
* Fidel design-system Table: a bordered card with a light uppercase header
|
|
862
|
+
* row over hairline-divided rows, for records people scan by column, like
|
|
863
|
+
* payments. With no rows it keeps the header and shows `empty` beneath it.
|
|
864
|
+
* Scrolls sideways on narrow screens instead of squashing columns. Same look
|
|
865
|
+
* as the webapp's Projects table.
|
|
849
866
|
*/
|
|
850
867
|
declare function Table<Row>({ columns, rows, rowKey, empty, className, 'aria-label': ariaLabel, ...rest }: TableProps<Row>): react.JSX.Element;
|
|
851
868
|
|
|
@@ -878,4 +895,4 @@ interface PricingCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
|
878
895
|
*/
|
|
879
896
|
declare function PricingCard({ eyebrow, title, badge, price, period, description, action, featuresTitle, featuresIntro, features, highlighted, className, ...rest }: PricingCardProps): react.JSX.Element;
|
|
880
897
|
|
|
881
|
-
export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, Menu, type MenuItem, type MenuProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
|
|
898
|
+
export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, Menu, type MenuItem, type MenuProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, Swatch, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
|
package/dist/index.d.ts
CHANGED
|
@@ -666,6 +666,23 @@ interface StatProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
666
666
|
*/
|
|
667
667
|
declare function Stat({ label, value, children, className, ...rest }: StatProps): react.JSX.Element;
|
|
668
668
|
|
|
669
|
+
interface SwatchProps extends HTMLAttributes<HTMLDivElement> {
|
|
670
|
+
/** The colour to show, as any CSS colour. Pass a value you have already validated. */
|
|
671
|
+
color: string;
|
|
672
|
+
/** The token's name, e.g. "accent". Set in mono. */
|
|
673
|
+
name: ReactNode;
|
|
674
|
+
/** The value as written, e.g. "#ff6b00". Set in mono under the name. */
|
|
675
|
+
value?: ReactNode;
|
|
676
|
+
/** Detail under the value, e.g. a row of Tags. */
|
|
677
|
+
children?: ReactNode;
|
|
678
|
+
}
|
|
679
|
+
/**
|
|
680
|
+
* Fidel design-system Swatch: a colour block over a token's name and value.
|
|
681
|
+
* A hairline inside the block keeps white and near-background colours visible.
|
|
682
|
+
* Lay several out in a grid.
|
|
683
|
+
*/
|
|
684
|
+
declare function Swatch({ color, name, value, children, className, ...rest }: SwatchProps): react.JSX.Element;
|
|
685
|
+
|
|
669
686
|
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
|
|
670
687
|
/** Text beside the box. Without one, pass `aria-label`. */
|
|
671
688
|
label?: ReactNode;
|
|
@@ -841,11 +858,11 @@ interface TableProps<Row> extends Omit<HTMLAttributes<HTMLDivElement>, 'children
|
|
|
841
858
|
'aria-label': string;
|
|
842
859
|
}
|
|
843
860
|
/**
|
|
844
|
-
* Fidel design-system Table: a
|
|
845
|
-
* for records people scan by column, like
|
|
846
|
-
* the header and shows `empty` beneath it.
|
|
847
|
-
* screens instead of squashing columns.
|
|
848
|
-
*
|
|
861
|
+
* Fidel design-system Table: a bordered card with a light uppercase header
|
|
862
|
+
* row over hairline-divided rows, for records people scan by column, like
|
|
863
|
+
* payments. With no rows it keeps the header and shows `empty` beneath it.
|
|
864
|
+
* Scrolls sideways on narrow screens instead of squashing columns. Same look
|
|
865
|
+
* as the webapp's Projects table.
|
|
849
866
|
*/
|
|
850
867
|
declare function Table<Row>({ columns, rows, rowKey, empty, className, 'aria-label': ariaLabel, ...rest }: TableProps<Row>): react.JSX.Element;
|
|
851
868
|
|
|
@@ -878,4 +895,4 @@ interface PricingCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
|
878
895
|
*/
|
|
879
896
|
declare function PricingCard({ eyebrow, title, badge, price, period, description, action, featuresTitle, featuresIntro, features, highlighted, className, ...rest }: PricingCardProps): react.JSX.Element;
|
|
880
897
|
|
|
881
|
-
export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, Menu, type MenuItem, type MenuProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
|
|
898
|
+
export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, Menu, type MenuItem, type MenuProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, Swatch, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
|
package/dist/index.js
CHANGED
|
@@ -1348,6 +1348,19 @@ function Stat({ label, value, children, className, ...rest }) {
|
|
|
1348
1348
|
] });
|
|
1349
1349
|
}
|
|
1350
1350
|
|
|
1351
|
+
// src/components/Swatch/Swatch.tsx
|
|
1352
|
+
import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1353
|
+
function Swatch({ color, name, value, children, className, ...rest }) {
|
|
1354
|
+
return /* @__PURE__ */ jsxs21("div", { className: ["fds-swatch", className].filter(Boolean).join(" "), ...rest, children: [
|
|
1355
|
+
/* @__PURE__ */ jsx25("div", { className: "fds-swatch__color", style: { "--fds-swatch-color": color }, "aria-hidden": "true" }),
|
|
1356
|
+
/* @__PURE__ */ jsxs21("div", { className: "fds-swatch__body", children: [
|
|
1357
|
+
/* @__PURE__ */ jsx25("p", { className: "fds-swatch__name", children: name }),
|
|
1358
|
+
value != null && /* @__PURE__ */ jsx25("p", { className: "fds-swatch__value", children: value }),
|
|
1359
|
+
children != null && /* @__PURE__ */ jsx25("div", { className: "fds-swatch__detail", children })
|
|
1360
|
+
] })
|
|
1361
|
+
] });
|
|
1362
|
+
}
|
|
1363
|
+
|
|
1351
1364
|
// src/components/Checkbox/Checkbox.tsx
|
|
1352
1365
|
import {
|
|
1353
1366
|
forwardRef as forwardRef4,
|
|
@@ -1356,7 +1369,7 @@ import {
|
|
|
1356
1369
|
useImperativeHandle as useImperativeHandle2,
|
|
1357
1370
|
useRef as useRef6
|
|
1358
1371
|
} from "react";
|
|
1359
|
-
import { jsx as
|
|
1372
|
+
import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1360
1373
|
var Checkbox = forwardRef4(function Checkbox2({ label, description, indeterminate = false, className, id, disabled, ...rest }, ref) {
|
|
1361
1374
|
const generatedId = useId7();
|
|
1362
1375
|
const inputId = id ?? generatedId;
|
|
@@ -1365,13 +1378,13 @@ var Checkbox = forwardRef4(function Checkbox2({ label, description, indeterminat
|
|
|
1365
1378
|
useEffect5(() => {
|
|
1366
1379
|
if (inputRef.current) inputRef.current.indeterminate = indeterminate;
|
|
1367
1380
|
}, [indeterminate]);
|
|
1368
|
-
return /* @__PURE__ */
|
|
1381
|
+
return /* @__PURE__ */ jsxs22(
|
|
1369
1382
|
"div",
|
|
1370
1383
|
{
|
|
1371
1384
|
className: ["fds-checkbox", className].filter(Boolean).join(" "),
|
|
1372
1385
|
"data-disabled": disabled ? "" : void 0,
|
|
1373
1386
|
children: [
|
|
1374
|
-
/* @__PURE__ */
|
|
1387
|
+
/* @__PURE__ */ jsx26(
|
|
1375
1388
|
"input",
|
|
1376
1389
|
{
|
|
1377
1390
|
...rest,
|
|
@@ -1382,14 +1395,14 @@ var Checkbox = forwardRef4(function Checkbox2({ label, description, indeterminat
|
|
|
1382
1395
|
className: "fds-checkbox__input"
|
|
1383
1396
|
}
|
|
1384
1397
|
),
|
|
1385
|
-
/* @__PURE__ */
|
|
1386
|
-
/* @__PURE__ */
|
|
1387
|
-
/* @__PURE__ */
|
|
1388
|
-
/* @__PURE__ */
|
|
1398
|
+
/* @__PURE__ */ jsxs22("label", { htmlFor: inputId, className: "fds-checkbox__control", children: [
|
|
1399
|
+
/* @__PURE__ */ jsxs22("span", { className: "fds-checkbox__box", "aria-hidden": "true", children: [
|
|
1400
|
+
/* @__PURE__ */ jsx26("svg", { className: "fds-checkbox__tick", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx26("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
1401
|
+
/* @__PURE__ */ jsx26("svg", { className: "fds-checkbox__dash", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx26("path", { d: "M3 6h6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) })
|
|
1389
1402
|
] }),
|
|
1390
|
-
(label != null || description != null) && /* @__PURE__ */
|
|
1391
|
-
label != null && /* @__PURE__ */
|
|
1392
|
-
description != null && /* @__PURE__ */
|
|
1403
|
+
(label != null || description != null) && /* @__PURE__ */ jsxs22("span", { className: "fds-checkbox__text", children: [
|
|
1404
|
+
label != null && /* @__PURE__ */ jsx26("span", { className: "fds-checkbox__label", children: label }),
|
|
1405
|
+
description != null && /* @__PURE__ */ jsx26("span", { className: "fds-checkbox__description", children: description })
|
|
1393
1406
|
] })
|
|
1394
1407
|
] })
|
|
1395
1408
|
]
|
|
@@ -1399,17 +1412,17 @@ var Checkbox = forwardRef4(function Checkbox2({ label, description, indeterminat
|
|
|
1399
1412
|
|
|
1400
1413
|
// src/components/Radio/Radio.tsx
|
|
1401
1414
|
import { forwardRef as forwardRef5, useId as useId8 } from "react";
|
|
1402
|
-
import { jsx as
|
|
1415
|
+
import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1403
1416
|
var Radio = forwardRef5(function Radio2({ label, description, className, id, disabled, ...rest }, ref) {
|
|
1404
1417
|
const generatedId = useId8();
|
|
1405
1418
|
const inputId = id ?? generatedId;
|
|
1406
|
-
return /* @__PURE__ */
|
|
1407
|
-
/* @__PURE__ */
|
|
1408
|
-
/* @__PURE__ */
|
|
1409
|
-
/* @__PURE__ */
|
|
1410
|
-
(label != null || description != null) && /* @__PURE__ */
|
|
1411
|
-
label != null && /* @__PURE__ */
|
|
1412
|
-
description != null && /* @__PURE__ */
|
|
1419
|
+
return /* @__PURE__ */ jsxs23("div", { className: ["fds-radio", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
|
|
1420
|
+
/* @__PURE__ */ jsx27("input", { ...rest, id: inputId, ref, type: "radio", disabled, className: "fds-radio__input" }),
|
|
1421
|
+
/* @__PURE__ */ jsxs23("label", { htmlFor: inputId, className: "fds-radio__control", children: [
|
|
1422
|
+
/* @__PURE__ */ jsx27("span", { className: "fds-radio__circle", "aria-hidden": "true" }),
|
|
1423
|
+
(label != null || description != null) && /* @__PURE__ */ jsxs23("span", { className: "fds-radio__text", children: [
|
|
1424
|
+
label != null && /* @__PURE__ */ jsx27("span", { className: "fds-radio__label", children: label }),
|
|
1425
|
+
description != null && /* @__PURE__ */ jsx27("span", { className: "fds-radio__description", children: description })
|
|
1413
1426
|
] })
|
|
1414
1427
|
] })
|
|
1415
1428
|
] });
|
|
@@ -1417,13 +1430,13 @@ var Radio = forwardRef5(function Radio2({ label, description, className, id, dis
|
|
|
1417
1430
|
|
|
1418
1431
|
// src/components/RadioCard/RadioCard.tsx
|
|
1419
1432
|
import { forwardRef as forwardRef6, useId as useId9 } from "react";
|
|
1420
|
-
import { jsx as
|
|
1433
|
+
import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1421
1434
|
var RadioCard = forwardRef6(function RadioCard2({ label, description, icon, meta, className, id, disabled, ...rest }, ref) {
|
|
1422
1435
|
const generatedId = useId9();
|
|
1423
1436
|
const inputId = id ?? generatedId;
|
|
1424
1437
|
const descriptionId = description != null ? `${inputId}-description` : void 0;
|
|
1425
|
-
return /* @__PURE__ */
|
|
1426
|
-
/* @__PURE__ */
|
|
1438
|
+
return /* @__PURE__ */ jsxs24("div", { className: ["fds-radio-card", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
|
|
1439
|
+
/* @__PURE__ */ jsx28(
|
|
1427
1440
|
"input",
|
|
1428
1441
|
{
|
|
1429
1442
|
...rest,
|
|
@@ -1435,21 +1448,21 @@ var RadioCard = forwardRef6(function RadioCard2({ label, description, icon, meta
|
|
|
1435
1448
|
className: "fds-radio-card__input"
|
|
1436
1449
|
}
|
|
1437
1450
|
),
|
|
1438
|
-
/* @__PURE__ */
|
|
1439
|
-
icon != null && /* @__PURE__ */
|
|
1440
|
-
/* @__PURE__ */
|
|
1441
|
-
/* @__PURE__ */
|
|
1442
|
-
description != null && /* @__PURE__ */
|
|
1443
|
-
meta != null && /* @__PURE__ */
|
|
1451
|
+
/* @__PURE__ */ jsxs24("label", { htmlFor: inputId, className: "fds-radio-card__body", children: [
|
|
1452
|
+
icon != null && /* @__PURE__ */ jsx28("span", { className: "fds-radio-card__icon", "aria-hidden": "true", children: icon }),
|
|
1453
|
+
/* @__PURE__ */ jsxs24("span", { className: "fds-radio-card__text", children: [
|
|
1454
|
+
/* @__PURE__ */ jsx28("span", { className: "fds-radio-card__label", children: label }),
|
|
1455
|
+
description != null && /* @__PURE__ */ jsx28("span", { id: descriptionId, className: "fds-radio-card__description", children: description }),
|
|
1456
|
+
meta != null && /* @__PURE__ */ jsx28("span", { className: "fds-radio-card__meta", children: meta })
|
|
1444
1457
|
] }),
|
|
1445
|
-
/* @__PURE__ */
|
|
1458
|
+
/* @__PURE__ */ jsx28("span", { className: "fds-radio-card__circle", "aria-hidden": "true" })
|
|
1446
1459
|
] })
|
|
1447
1460
|
] });
|
|
1448
1461
|
});
|
|
1449
1462
|
|
|
1450
1463
|
// src/components/Accordion/Accordion.tsx
|
|
1451
1464
|
import { useId as useId10, useState as useState7 } from "react";
|
|
1452
|
-
import { jsx as
|
|
1465
|
+
import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
1453
1466
|
function Accordion({
|
|
1454
1467
|
summary,
|
|
1455
1468
|
actions,
|
|
@@ -1468,15 +1481,15 @@ function Accordion({
|
|
|
1468
1481
|
if (openProp === void 0) setOpenState(next);
|
|
1469
1482
|
onOpenChange?.(next);
|
|
1470
1483
|
};
|
|
1471
|
-
return /* @__PURE__ */
|
|
1484
|
+
return /* @__PURE__ */ jsxs25(
|
|
1472
1485
|
"div",
|
|
1473
1486
|
{
|
|
1474
1487
|
className: ["fds-accordion", className].filter(Boolean).join(" "),
|
|
1475
1488
|
"data-open": open ? "" : void 0,
|
|
1476
1489
|
...rest,
|
|
1477
1490
|
children: [
|
|
1478
|
-
/* @__PURE__ */
|
|
1479
|
-
/* @__PURE__ */
|
|
1491
|
+
/* @__PURE__ */ jsxs25("div", { className: "fds-accordion__header", children: [
|
|
1492
|
+
/* @__PURE__ */ jsx29(
|
|
1480
1493
|
"button",
|
|
1481
1494
|
{
|
|
1482
1495
|
type: "button",
|
|
@@ -1487,17 +1500,17 @@ function Accordion({
|
|
|
1487
1500
|
children: summary
|
|
1488
1501
|
}
|
|
1489
1502
|
),
|
|
1490
|
-
actions != null && /* @__PURE__ */
|
|
1491
|
-
/* @__PURE__ */
|
|
1503
|
+
actions != null && /* @__PURE__ */ jsx29("div", { className: "fds-accordion__actions", children: actions }),
|
|
1504
|
+
/* @__PURE__ */ jsx29("span", { className: "fds-accordion__chevron", "aria-hidden": "true", onClick: toggle, children: /* @__PURE__ */ jsx29("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx29("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
|
|
1492
1505
|
] }),
|
|
1493
|
-
/* @__PURE__ */
|
|
1506
|
+
/* @__PURE__ */ jsx29("div", { id: bodyId, className: "fds-accordion__body", hidden: !open, children })
|
|
1494
1507
|
]
|
|
1495
1508
|
}
|
|
1496
1509
|
);
|
|
1497
1510
|
}
|
|
1498
1511
|
|
|
1499
1512
|
// src/components/StepList/StepList.tsx
|
|
1500
|
-
import { jsx as
|
|
1513
|
+
import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
1501
1514
|
var STATUS_TEXT = {
|
|
1502
1515
|
done: "Done",
|
|
1503
1516
|
active: "In progress",
|
|
@@ -1507,32 +1520,32 @@ var STATUS_TEXT = {
|
|
|
1507
1520
|
function StepIcon({ status }) {
|
|
1508
1521
|
const common = { viewBox: "0 0 24 24", width: 18, height: 18, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
|
|
1509
1522
|
if (status === "done") {
|
|
1510
|
-
return /* @__PURE__ */
|
|
1511
|
-
/* @__PURE__ */
|
|
1512
|
-
/* @__PURE__ */
|
|
1523
|
+
return /* @__PURE__ */ jsxs26("svg", { ...common, children: [
|
|
1524
|
+
/* @__PURE__ */ jsx30("circle", { cx: "12", cy: "12", r: "9" }),
|
|
1525
|
+
/* @__PURE__ */ jsx30("path", { d: "M8 12.5l2.5 2.5 5-5.5" })
|
|
1513
1526
|
] });
|
|
1514
1527
|
}
|
|
1515
1528
|
if (status === "active") {
|
|
1516
|
-
return /* @__PURE__ */
|
|
1529
|
+
return /* @__PURE__ */ jsx30("svg", { ...common, className: "fds-steps__spinner", children: /* @__PURE__ */ jsx30("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" }) });
|
|
1517
1530
|
}
|
|
1518
1531
|
if (status === "failed") {
|
|
1519
|
-
return /* @__PURE__ */
|
|
1520
|
-
/* @__PURE__ */
|
|
1521
|
-
/* @__PURE__ */
|
|
1532
|
+
return /* @__PURE__ */ jsxs26("svg", { ...common, children: [
|
|
1533
|
+
/* @__PURE__ */ jsx30("circle", { cx: "12", cy: "12", r: "9" }),
|
|
1534
|
+
/* @__PURE__ */ jsx30("path", { d: "M12 7.5v5.5M12 16.5v.01" })
|
|
1522
1535
|
] });
|
|
1523
1536
|
}
|
|
1524
|
-
return /* @__PURE__ */
|
|
1537
|
+
return /* @__PURE__ */ jsx30("svg", { ...common, children: /* @__PURE__ */ jsx30("circle", { cx: "12", cy: "12", r: "9" }) });
|
|
1525
1538
|
}
|
|
1526
1539
|
function StepList({ steps, className, ...rest }) {
|
|
1527
|
-
return /* @__PURE__ */
|
|
1540
|
+
return /* @__PURE__ */ jsx30("ol", { className: ["fds-steps", className].filter(Boolean).join(" "), ...rest, children: steps.map((step) => /* @__PURE__ */ jsxs26(
|
|
1528
1541
|
"li",
|
|
1529
1542
|
{
|
|
1530
1543
|
className: `fds-steps__step fds-steps__step--${step.status}`,
|
|
1531
1544
|
"aria-current": step.status === "active" ? "step" : void 0,
|
|
1532
1545
|
children: [
|
|
1533
|
-
/* @__PURE__ */
|
|
1534
|
-
/* @__PURE__ */
|
|
1535
|
-
/* @__PURE__ */
|
|
1546
|
+
/* @__PURE__ */ jsx30("span", { className: "fds-steps__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx30(StepIcon, { status: step.status }) }),
|
|
1547
|
+
/* @__PURE__ */ jsx30("span", { className: "fds-steps__label", children: step.label }),
|
|
1548
|
+
/* @__PURE__ */ jsxs26("span", { className: "fds-steps__sr", children: [
|
|
1536
1549
|
", ",
|
|
1537
1550
|
STATUS_TEXT[step.status]
|
|
1538
1551
|
] })
|
|
@@ -1544,7 +1557,7 @@ function StepList({ steps, className, ...rest }) {
|
|
|
1544
1557
|
|
|
1545
1558
|
// src/components/Input/Input.tsx
|
|
1546
1559
|
import { forwardRef as forwardRef7, useId as useId11 } from "react";
|
|
1547
|
-
import { jsx as
|
|
1560
|
+
import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
1548
1561
|
var Input = forwardRef7(function Input2({ label, hint, error, leadingIcon, trailing, id, className, containerClassName, readOnly, disabled, ...rest }, ref) {
|
|
1549
1562
|
const genId = useId11();
|
|
1550
1563
|
const inputId = id ?? genId;
|
|
@@ -1555,11 +1568,11 @@ var Input = forwardRef7(function Input2({ label, hint, error, leadingIcon, trail
|
|
|
1555
1568
|
error ? "fds-input__box--error" : "",
|
|
1556
1569
|
readOnly || disabled ? "fds-input__box--locked" : ""
|
|
1557
1570
|
].filter(Boolean).join(" ");
|
|
1558
|
-
return /* @__PURE__ */
|
|
1559
|
-
label != null && /* @__PURE__ */
|
|
1560
|
-
/* @__PURE__ */
|
|
1561
|
-
leadingIcon != null && /* @__PURE__ */
|
|
1562
|
-
/* @__PURE__ */
|
|
1571
|
+
return /* @__PURE__ */ jsxs27("div", { className: ["fds-input", containerClassName].filter(Boolean).join(" "), children: [
|
|
1572
|
+
label != null && /* @__PURE__ */ jsx31("label", { htmlFor: inputId, className: "fds-input__label", children: label }),
|
|
1573
|
+
/* @__PURE__ */ jsxs27("div", { className: boxClasses, children: [
|
|
1574
|
+
leadingIcon != null && /* @__PURE__ */ jsx31("span", { className: "fds-input__icon", "aria-hidden": "true", children: leadingIcon }),
|
|
1575
|
+
/* @__PURE__ */ jsx31(
|
|
1563
1576
|
"input",
|
|
1564
1577
|
{
|
|
1565
1578
|
ref,
|
|
@@ -1572,14 +1585,14 @@ var Input = forwardRef7(function Input2({ label, hint, error, leadingIcon, trail
|
|
|
1572
1585
|
...rest
|
|
1573
1586
|
}
|
|
1574
1587
|
),
|
|
1575
|
-
trailing != null && /* @__PURE__ */
|
|
1588
|
+
trailing != null && /* @__PURE__ */ jsx31("span", { className: "fds-input__trailing", children: trailing })
|
|
1576
1589
|
] }),
|
|
1577
|
-
message != null && /* @__PURE__ */
|
|
1590
|
+
message != null && /* @__PURE__ */ jsx31("p", { id: msgId, className: error ? "fds-input__error" : "fds-input__hint", children: message })
|
|
1578
1591
|
] });
|
|
1579
1592
|
});
|
|
1580
1593
|
|
|
1581
1594
|
// src/components/IconButton/IconButton.tsx
|
|
1582
|
-
import { jsx as
|
|
1595
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
1583
1596
|
function IconButton({
|
|
1584
1597
|
icon,
|
|
1585
1598
|
variant = "outlined",
|
|
@@ -1589,7 +1602,7 @@ function IconButton({
|
|
|
1589
1602
|
...rest
|
|
1590
1603
|
}) {
|
|
1591
1604
|
const classes = ["fds-icon-button", `fds-icon-button--${variant}`, `fds-icon-button--${size}`, className].filter(Boolean).join(" ");
|
|
1592
|
-
return /* @__PURE__ */
|
|
1605
|
+
return /* @__PURE__ */ jsx32("button", { type, className: classes, ...rest, children: /* @__PURE__ */ jsx32("span", { className: "fds-icon-button__icon", "aria-hidden": "true", children: icon }) });
|
|
1593
1606
|
}
|
|
1594
1607
|
|
|
1595
1608
|
// src/components/Menu/Menu.tsx
|
|
@@ -1600,7 +1613,7 @@ import {
|
|
|
1600
1613
|
useRef as useRef7,
|
|
1601
1614
|
useState as useState8
|
|
1602
1615
|
} from "react";
|
|
1603
|
-
import { jsx as
|
|
1616
|
+
import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
1604
1617
|
function Menu({ trigger, items, align = "end", className }) {
|
|
1605
1618
|
const listId = useId12();
|
|
1606
1619
|
const rootRef = useRef7(null);
|
|
@@ -1682,9 +1695,9 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1682
1695
|
}
|
|
1683
1696
|
}
|
|
1684
1697
|
});
|
|
1685
|
-
return /* @__PURE__ */
|
|
1698
|
+
return /* @__PURE__ */ jsxs28("div", { ref: rootRef, className: ["fds-menu", className].filter(Boolean).join(" "), children: [
|
|
1686
1699
|
wired,
|
|
1687
|
-
open && /* @__PURE__ */
|
|
1700
|
+
open && /* @__PURE__ */ jsx33(
|
|
1688
1701
|
"div",
|
|
1689
1702
|
{
|
|
1690
1703
|
ref: listRef,
|
|
@@ -1694,7 +1707,7 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1694
1707
|
className: `fds-menu__list fds-menu__list--${align}`,
|
|
1695
1708
|
"aria-activedescendant": `${listId}-item-${active}`,
|
|
1696
1709
|
onKeyDown: onListKeyDown,
|
|
1697
|
-
children: items.map((it, i) => /* @__PURE__ */
|
|
1710
|
+
children: items.map((it, i) => /* @__PURE__ */ jsxs28(
|
|
1698
1711
|
"div",
|
|
1699
1712
|
{
|
|
1700
1713
|
id: `${listId}-item-${i}`,
|
|
@@ -1710,7 +1723,7 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1710
1723
|
onMouseDown: (e) => e.preventDefault(),
|
|
1711
1724
|
onClick: () => choose(i),
|
|
1712
1725
|
children: [
|
|
1713
|
-
it.icon != null && /* @__PURE__ */
|
|
1726
|
+
it.icon != null && /* @__PURE__ */ jsx33("span", { className: "fds-menu__icon", "aria-hidden": "true", children: it.icon }),
|
|
1714
1727
|
it.label
|
|
1715
1728
|
]
|
|
1716
1729
|
},
|
|
@@ -1722,10 +1735,10 @@ function Menu({ trigger, items, align = "end", className }) {
|
|
|
1722
1735
|
}
|
|
1723
1736
|
|
|
1724
1737
|
// src/components/Table/Table.tsx
|
|
1725
|
-
import { jsx as
|
|
1738
|
+
import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
1726
1739
|
function Table({ columns, rows, rowKey, empty, className, "aria-label": ariaLabel, ...rest }) {
|
|
1727
|
-
return /* @__PURE__ */
|
|
1728
|
-
/* @__PURE__ */
|
|
1740
|
+
return /* @__PURE__ */ jsx34("div", { className: ["fds-table", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ jsxs29("table", { className: "fds-table__table", "aria-label": ariaLabel, children: [
|
|
1741
|
+
/* @__PURE__ */ jsx34("thead", { children: /* @__PURE__ */ jsx34("tr", { children: columns.map((c) => /* @__PURE__ */ jsx34(
|
|
1729
1742
|
"th",
|
|
1730
1743
|
{
|
|
1731
1744
|
scope: "col",
|
|
@@ -1735,17 +1748,17 @@ function Table({ columns, rows, rowKey, empty, className, "aria-label": ariaLabe
|
|
|
1735
1748
|
},
|
|
1736
1749
|
c.key
|
|
1737
1750
|
)) }) }),
|
|
1738
|
-
/* @__PURE__ */
|
|
1739
|
-
rows.map((row) => /* @__PURE__ */
|
|
1740
|
-
rows.length === 0 && empty != null && /* @__PURE__ */
|
|
1751
|
+
/* @__PURE__ */ jsxs29("tbody", { children: [
|
|
1752
|
+
rows.map((row) => /* @__PURE__ */ jsx34("tr", { children: columns.map((c) => /* @__PURE__ */ jsx34("td", { className: c.align === "end" ? "fds-table__cell--end" : void 0, children: c.cell(row) }, c.key)) }, rowKey(row))),
|
|
1753
|
+
rows.length === 0 && empty != null && /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34("td", { colSpan: columns.length, className: "fds-table__empty", children: empty }) })
|
|
1741
1754
|
] })
|
|
1742
1755
|
] }) });
|
|
1743
1756
|
}
|
|
1744
1757
|
|
|
1745
1758
|
// src/components/PricingCard/PricingCard.tsx
|
|
1746
|
-
import { jsx as
|
|
1759
|
+
import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
1747
1760
|
function CheckIcon3() {
|
|
1748
|
-
return /* @__PURE__ */
|
|
1761
|
+
return /* @__PURE__ */ jsx35("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx35("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
1749
1762
|
}
|
|
1750
1763
|
function PricingCard({
|
|
1751
1764
|
eyebrow,
|
|
@@ -1763,25 +1776,25 @@ function PricingCard({
|
|
|
1763
1776
|
...rest
|
|
1764
1777
|
}) {
|
|
1765
1778
|
const classes = ["fds-pricing-card", highlighted ? "fds-pricing-card--highlighted" : "", className].filter(Boolean).join(" ");
|
|
1766
|
-
return /* @__PURE__ */
|
|
1767
|
-
/* @__PURE__ */
|
|
1768
|
-
eyebrow != null && /* @__PURE__ */
|
|
1769
|
-
/* @__PURE__ */
|
|
1779
|
+
return /* @__PURE__ */ jsxs30("article", { className: classes, ...rest, children: [
|
|
1780
|
+
/* @__PURE__ */ jsxs30("div", { className: "fds-pricing-card__top", children: [
|
|
1781
|
+
eyebrow != null && /* @__PURE__ */ jsx35("span", { className: "fds-pricing-card__eyebrow", children: eyebrow }),
|
|
1782
|
+
/* @__PURE__ */ jsxs30("h3", { className: "fds-pricing-card__title", children: [
|
|
1770
1783
|
title,
|
|
1771
1784
|
badge
|
|
1772
1785
|
] }),
|
|
1773
|
-
/* @__PURE__ */
|
|
1774
|
-
/* @__PURE__ */
|
|
1775
|
-
period != null && /* @__PURE__ */
|
|
1786
|
+
/* @__PURE__ */ jsxs30("p", { className: "fds-pricing-card__price", children: [
|
|
1787
|
+
/* @__PURE__ */ jsx35("span", { className: "fds-pricing-card__amount", children: price }),
|
|
1788
|
+
period != null && /* @__PURE__ */ jsx35("span", { className: "fds-pricing-card__period", children: period })
|
|
1776
1789
|
] }),
|
|
1777
|
-
description != null && /* @__PURE__ */
|
|
1778
|
-
action != null && /* @__PURE__ */
|
|
1790
|
+
description != null && /* @__PURE__ */ jsx35("p", { className: "fds-pricing-card__description", children: description }),
|
|
1791
|
+
action != null && /* @__PURE__ */ jsx35("div", { className: "fds-pricing-card__action", children: action })
|
|
1779
1792
|
] }),
|
|
1780
|
-
features.length > 0 && /* @__PURE__ */
|
|
1781
|
-
/* @__PURE__ */
|
|
1782
|
-
featuresIntro != null && /* @__PURE__ */
|
|
1783
|
-
/* @__PURE__ */
|
|
1784
|
-
/* @__PURE__ */
|
|
1793
|
+
features.length > 0 && /* @__PURE__ */ jsxs30("div", { className: "fds-pricing-card__features", children: [
|
|
1794
|
+
/* @__PURE__ */ jsx35("p", { className: "fds-pricing-card__featuresTitle", children: featuresTitle }),
|
|
1795
|
+
featuresIntro != null && /* @__PURE__ */ jsx35("p", { className: "fds-pricing-card__intro", children: featuresIntro }),
|
|
1796
|
+
/* @__PURE__ */ jsx35("ul", { className: "fds-pricing-card__list", children: features.map((f, i) => /* @__PURE__ */ jsxs30("li", { className: "fds-pricing-card__feature", children: [
|
|
1797
|
+
/* @__PURE__ */ jsx35("span", { className: "fds-pricing-card__check", children: /* @__PURE__ */ jsx35(CheckIcon3, {}) }),
|
|
1785
1798
|
f
|
|
1786
1799
|
] }, i)) })
|
|
1787
1800
|
] })
|
|
@@ -1821,6 +1834,7 @@ export {
|
|
|
1821
1834
|
StackedCardsIllustration,
|
|
1822
1835
|
Stat,
|
|
1823
1836
|
StepList,
|
|
1837
|
+
Swatch,
|
|
1824
1838
|
TabNav,
|
|
1825
1839
|
Table,
|
|
1826
1840
|
Tag,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@usefidel/design-system",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.23.1",
|
|
4
4
|
"description": "Fidel brand design tokens + React component library — DTCG token source of truth, generated per-surface CSS + Tailwind-v4 parser-compatibility output, and on-brand React components (Button, MismatchCard, DiffSection).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|