clio-design-system 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +153 -120
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +118 -85
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1524,22 +1524,55 @@ function CardHeader({
|
|
|
1524
1524
|
] });
|
|
1525
1525
|
}
|
|
1526
1526
|
|
|
1527
|
-
// src/
|
|
1527
|
+
// src/internal/MathText.tsx
|
|
1528
|
+
var import_react9 = require("react");
|
|
1529
|
+
var import_katex = __toESM(require("katex"), 1);
|
|
1528
1530
|
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1531
|
+
function katexHtml(tex, displayMode) {
|
|
1532
|
+
return import_katex.default.renderToString(tex, { displayMode, throwOnError: false });
|
|
1533
|
+
}
|
|
1534
|
+
var SEGMENT = /(\$\$[\s\S]+?\$\$|\$[^$\n]+?\$)/g;
|
|
1535
|
+
function MathText({ text }) {
|
|
1536
|
+
const parts = text.split(SEGMENT);
|
|
1537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: parts.map((part, i) => {
|
|
1538
|
+
if (part.length >= 4 && part.startsWith("$$") && part.endsWith("$$")) {
|
|
1539
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1540
|
+
"span",
|
|
1541
|
+
{
|
|
1542
|
+
dangerouslySetInnerHTML: { __html: katexHtml(part.slice(2, -2), true) }
|
|
1543
|
+
},
|
|
1544
|
+
i
|
|
1545
|
+
);
|
|
1546
|
+
}
|
|
1547
|
+
if (part.length >= 2 && part.startsWith("$") && part.endsWith("$")) {
|
|
1548
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1549
|
+
"span",
|
|
1550
|
+
{
|
|
1551
|
+
dangerouslySetInnerHTML: { __html: katexHtml(part.slice(1, -1), false) }
|
|
1552
|
+
},
|
|
1553
|
+
i
|
|
1554
|
+
);
|
|
1555
|
+
}
|
|
1556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react9.Fragment, { children: part }, i);
|
|
1557
|
+
}) });
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
// src/components/TextBlock/TextBlock.tsx
|
|
1561
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1529
1562
|
function TextBlock({ text, style, ...rest }) {
|
|
1530
|
-
return /* @__PURE__ */ (0,
|
|
1563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { ...rest, style: { margin: "18px 0", color: "var(--color-text-body)", textWrap: "pretty", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MathText, { text }) });
|
|
1531
1564
|
}
|
|
1532
1565
|
|
|
1533
1566
|
// src/components/EquationBlock/EquationBlock.tsx
|
|
1534
|
-
var
|
|
1535
|
-
var
|
|
1536
|
-
var
|
|
1567
|
+
var import_react10 = require("react");
|
|
1568
|
+
var import_katex2 = __toESM(require("katex"), 1);
|
|
1569
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1537
1570
|
function EquationBlock({ tex, style, ...rest }) {
|
|
1538
|
-
const html = (0,
|
|
1539
|
-
() =>
|
|
1571
|
+
const html = (0, import_react10.useMemo)(
|
|
1572
|
+
() => import_katex2.default.renderToString(tex, { displayMode: true, throwOnError: false }),
|
|
1540
1573
|
[tex]
|
|
1541
1574
|
);
|
|
1542
|
-
return /* @__PURE__ */ (0,
|
|
1575
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1543
1576
|
"div",
|
|
1544
1577
|
{
|
|
1545
1578
|
...rest,
|
|
@@ -1550,9 +1583,9 @@ function EquationBlock({ tex, style, ...rest }) {
|
|
|
1550
1583
|
}
|
|
1551
1584
|
|
|
1552
1585
|
// src/components/IntuitionCallout/IntuitionCallout.tsx
|
|
1553
|
-
var
|
|
1586
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1554
1587
|
function IntuitionCallout({ text, label = "INTUITION", style, ...rest }) {
|
|
1555
|
-
return /* @__PURE__ */ (0,
|
|
1588
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1556
1589
|
"div",
|
|
1557
1590
|
{
|
|
1558
1591
|
...rest,
|
|
@@ -1567,20 +1600,20 @@ function IntuitionCallout({ text, label = "INTUITION", style, ...rest }) {
|
|
|
1567
1600
|
...style
|
|
1568
1601
|
},
|
|
1569
1602
|
children: [
|
|
1570
|
-
/* @__PURE__ */ (0,
|
|
1571
|
-
text
|
|
1603
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { display: "block", fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "0.12em", color: "var(--color-warning)", marginBottom: 6 }, children: label }),
|
|
1604
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MathText, { text })
|
|
1572
1605
|
]
|
|
1573
1606
|
}
|
|
1574
1607
|
);
|
|
1575
1608
|
}
|
|
1576
1609
|
|
|
1577
1610
|
// src/components/WalkthroughCard/WalkthroughCard.tsx
|
|
1578
|
-
var
|
|
1611
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1579
1612
|
function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...rest }) {
|
|
1580
1613
|
const visible = steps.slice(0, currentStep + 1);
|
|
1581
1614
|
const atStart = currentStep === 0;
|
|
1582
1615
|
const atEnd = currentStep === steps.length - 1;
|
|
1583
|
-
return /* @__PURE__ */ (0,
|
|
1616
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1584
1617
|
"div",
|
|
1585
1618
|
{
|
|
1586
1619
|
...rest,
|
|
@@ -1593,19 +1626,19 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1593
1626
|
...style
|
|
1594
1627
|
},
|
|
1595
1628
|
children: [
|
|
1596
|
-
/* @__PURE__ */ (0,
|
|
1597
|
-
/* @__PURE__ */ (0,
|
|
1598
|
-
/* @__PURE__ */ (0,
|
|
1599
|
-
/* @__PURE__ */ (0,
|
|
1629
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 12 }, children: [
|
|
1630
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10 }, children: [
|
|
1631
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "WALKTHROUGH" }),
|
|
1632
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title })
|
|
1600
1633
|
] }),
|
|
1601
|
-
/* @__PURE__ */ (0,
|
|
1634
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-text-faint)", whiteSpace: "nowrap" }, children: [
|
|
1602
1635
|
"STEP ",
|
|
1603
1636
|
currentStep + 1,
|
|
1604
1637
|
" OF ",
|
|
1605
1638
|
steps.length
|
|
1606
1639
|
] })
|
|
1607
1640
|
] }),
|
|
1608
|
-
/* @__PURE__ */ (0,
|
|
1641
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { "aria-live": "polite", children: visible.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1609
1642
|
"div",
|
|
1610
1643
|
{
|
|
1611
1644
|
style: {
|
|
@@ -1617,7 +1650,7 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1617
1650
|
opacity: i === currentStep ? 1 : 0.65
|
|
1618
1651
|
},
|
|
1619
1652
|
children: [
|
|
1620
|
-
/* @__PURE__ */ (0,
|
|
1653
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1621
1654
|
"span",
|
|
1622
1655
|
{
|
|
1623
1656
|
style: {
|
|
@@ -1636,16 +1669,16 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1636
1669
|
children: i + 1
|
|
1637
1670
|
}
|
|
1638
1671
|
),
|
|
1639
|
-
/* @__PURE__ */ (0,
|
|
1640
|
-
/* @__PURE__ */ (0,
|
|
1641
|
-
/* @__PURE__ */ (0,
|
|
1672
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { minWidth: 0 }, children: [
|
|
1673
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { textAlign: "center", fontSize: 15, color: "var(--color-text-primary)" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MathText, { text: `$$${s.tex}$$` }) }),
|
|
1674
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { fontSize: "var(--font-size-base)", color: "var(--color-text-muted)", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MathText, { text: s.note }) })
|
|
1642
1675
|
] })
|
|
1643
1676
|
]
|
|
1644
1677
|
},
|
|
1645
1678
|
i
|
|
1646
1679
|
)) }),
|
|
1647
|
-
/* @__PURE__ */ (0,
|
|
1648
|
-
/* @__PURE__ */ (0,
|
|
1680
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 12 }, children: [
|
|
1681
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1649
1682
|
"button",
|
|
1650
1683
|
{
|
|
1651
1684
|
type: "button",
|
|
@@ -1664,7 +1697,7 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1664
1697
|
children: "\u2039 Back"
|
|
1665
1698
|
}
|
|
1666
1699
|
),
|
|
1667
|
-
/* @__PURE__ */ (0,
|
|
1700
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1668
1701
|
"button",
|
|
1669
1702
|
{
|
|
1670
1703
|
type: "button",
|
|
@@ -1690,15 +1723,15 @@ function WalkthroughCard({ title, steps, currentStep, onPrev, onNext, style, ...
|
|
|
1690
1723
|
}
|
|
1691
1724
|
|
|
1692
1725
|
// src/components/CodeCard/CodeCard.tsx
|
|
1693
|
-
var
|
|
1726
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1694
1727
|
function CodeCard({ title, lang, code, copyLabel = "Copy", onCopy, style, ...rest }) {
|
|
1695
|
-
return /* @__PURE__ */ (0,
|
|
1696
|
-
/* @__PURE__ */ (0,
|
|
1697
|
-
/* @__PURE__ */ (0,
|
|
1698
|
-
/* @__PURE__ */ (0,
|
|
1699
|
-
/* @__PURE__ */ (0,
|
|
1700
|
-
/* @__PURE__ */ (0,
|
|
1701
|
-
/* @__PURE__ */ (0,
|
|
1728
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ...rest, style: { background: "var(--color-surface-code)", borderRadius: "var(--radius-card)", margin: "24px 0", overflow: "hidden", ...style }, children: [
|
|
1729
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, padding: "12px 18px", minWidth: 0 }, children: [
|
|
1730
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-code-green)", whiteSpace: "nowrap", flexShrink: 0 }, children: "CODE" }),
|
|
1731
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "#EDEBE3", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title }),
|
|
1732
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-ink-500)", whiteSpace: "nowrap", flexShrink: 0 }, children: lang }),
|
|
1733
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { flex: 1, minWidth: 4 } }),
|
|
1734
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1702
1735
|
"button",
|
|
1703
1736
|
{
|
|
1704
1737
|
type: "button",
|
|
@@ -1708,12 +1741,12 @@ function CodeCard({ title, lang, code, copyLabel = "Copy", onCopy, style, ...res
|
|
|
1708
1741
|
}
|
|
1709
1742
|
)
|
|
1710
1743
|
] }),
|
|
1711
|
-
/* @__PURE__ */ (0,
|
|
1744
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("pre", { style: { margin: 0, padding: "4px 20px 18px", overflowX: "auto", fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-base)", lineHeight: "var(--line-height-relaxed)", color: "var(--color-text-on-code)", whiteSpace: "pre-wrap" }, children: code })
|
|
1712
1745
|
] });
|
|
1713
1746
|
}
|
|
1714
1747
|
|
|
1715
1748
|
// src/components/TableCard/TableCard.tsx
|
|
1716
|
-
var
|
|
1749
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1717
1750
|
var srOnly = {
|
|
1718
1751
|
position: "absolute",
|
|
1719
1752
|
width: 1,
|
|
@@ -1726,18 +1759,18 @@ var srOnly = {
|
|
|
1726
1759
|
border: 0
|
|
1727
1760
|
};
|
|
1728
1761
|
function TableCard({ title, header, rows, style, ...rest }) {
|
|
1729
|
-
return /* @__PURE__ */ (0,
|
|
1762
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1730
1763
|
"div",
|
|
1731
1764
|
{
|
|
1732
1765
|
...rest,
|
|
1733
1766
|
style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: "16px 20px 18px", ...style },
|
|
1734
1767
|
children: [
|
|
1735
|
-
/* @__PURE__ */ (0,
|
|
1736
|
-
/* @__PURE__ */ (0,
|
|
1737
|
-
/* @__PURE__ */ (0,
|
|
1768
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }, children: [
|
|
1769
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "COMPARE" }),
|
|
1770
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title })
|
|
1738
1771
|
] }),
|
|
1739
|
-
/* @__PURE__ */ (0,
|
|
1740
|
-
/* @__PURE__ */ (0,
|
|
1772
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "var(--font-size-base)" }, children: [
|
|
1773
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tr", { children: header.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1741
1774
|
"th",
|
|
1742
1775
|
{
|
|
1743
1776
|
scope: "col",
|
|
@@ -1750,11 +1783,11 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1750
1783
|
fontSize: i === 0 ? "var(--font-size-sm)" : "inherit",
|
|
1751
1784
|
borderBottom: "1px solid var(--border-subtle)"
|
|
1752
1785
|
},
|
|
1753
|
-
children: h
|
|
1786
|
+
children: h ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MathText, { text: h }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { style: srOnly, children: "Row label" })
|
|
1754
1787
|
},
|
|
1755
1788
|
i
|
|
1756
1789
|
)) }) }),
|
|
1757
|
-
/* @__PURE__ */ (0,
|
|
1790
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tbody", { children: rows.map((r, ri) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tr", { children: r.map((c, ci) => {
|
|
1758
1791
|
const cellStyle = {
|
|
1759
1792
|
padding: "8px 10px",
|
|
1760
1793
|
color: ci === 0 ? "var(--color-text-muted)" : "var(--color-text-secondary)",
|
|
@@ -1762,7 +1795,7 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1762
1795
|
fontSize: ci === 0 ? "var(--font-size-sm)" : "inherit",
|
|
1763
1796
|
borderBottom: ri === rows.length - 1 ? "none" : "1px solid var(--border-subtle)"
|
|
1764
1797
|
};
|
|
1765
|
-
return ci === 0 ? /* @__PURE__ */ (0,
|
|
1798
|
+
return ci === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("th", { scope: "row", style: { ...cellStyle, textAlign: "left", fontWeight: 400 }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MathText, { text: c }) }, ci) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("td", { style: cellStyle, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MathText, { text: c }) }, ci);
|
|
1766
1799
|
}) }, ri)) })
|
|
1767
1800
|
] })
|
|
1768
1801
|
]
|
|
@@ -1771,11 +1804,11 @@ function TableCard({ title, header, rows, style, ...rest }) {
|
|
|
1771
1804
|
}
|
|
1772
1805
|
|
|
1773
1806
|
// src/components/QuizCard/QuizCard.tsx
|
|
1774
|
-
var
|
|
1775
|
-
var
|
|
1807
|
+
var import_react11 = require("react");
|
|
1808
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1776
1809
|
function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFlashLabel, onAddFlash, style, ...rest }) {
|
|
1777
|
-
const answerId = (0,
|
|
1778
|
-
return /* @__PURE__ */ (0,
|
|
1810
|
+
const answerId = (0, import_react11.useId)();
|
|
1811
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1779
1812
|
"div",
|
|
1780
1813
|
{
|
|
1781
1814
|
...rest,
|
|
@@ -1788,12 +1821,12 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1788
1821
|
...style
|
|
1789
1822
|
},
|
|
1790
1823
|
children: [
|
|
1791
|
-
/* @__PURE__ */ (0,
|
|
1792
|
-
/* @__PURE__ */ (0,
|
|
1793
|
-
/* @__PURE__ */ (0,
|
|
1824
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: [
|
|
1825
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "CHECKPOINT" }),
|
|
1826
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap" }, children: "Still with it?" })
|
|
1794
1827
|
] }),
|
|
1795
|
-
/* @__PURE__ */ (0,
|
|
1796
|
-
/* @__PURE__ */ (0,
|
|
1828
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { style: { margin: "0 0 10px", fontSize: "var(--font-size-lg)", color: "var(--color-text-body)" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MathText, { text: question }) }),
|
|
1829
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1797
1830
|
"button",
|
|
1798
1831
|
{
|
|
1799
1832
|
type: "button",
|
|
@@ -1804,7 +1837,7 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1804
1837
|
children: quizLabel
|
|
1805
1838
|
}
|
|
1806
1839
|
),
|
|
1807
|
-
/* @__PURE__ */ (0,
|
|
1840
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1808
1841
|
"button",
|
|
1809
1842
|
{
|
|
1810
1843
|
type: "button",
|
|
@@ -1813,7 +1846,7 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1813
1846
|
children: addFlashLabel
|
|
1814
1847
|
}
|
|
1815
1848
|
),
|
|
1816
|
-
answerOpen && /* @__PURE__ */ (0,
|
|
1849
|
+
answerOpen && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1817
1850
|
"div",
|
|
1818
1851
|
{
|
|
1819
1852
|
id: answerId,
|
|
@@ -1826,7 +1859,7 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1826
1859
|
fontSize: "var(--font-size-base)",
|
|
1827
1860
|
color: "var(--color-text-secondary)"
|
|
1828
1861
|
},
|
|
1829
|
-
children: answer
|
|
1862
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MathText, { text: answer })
|
|
1830
1863
|
}
|
|
1831
1864
|
)
|
|
1832
1865
|
]
|
|
@@ -1835,27 +1868,27 @@ function QuizCard({ question, answerOpen, answer, quizLabel, onToggleQuiz, addFl
|
|
|
1835
1868
|
}
|
|
1836
1869
|
|
|
1837
1870
|
// src/components/ImageCard/ImageCard.tsx
|
|
1838
|
-
var
|
|
1871
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1839
1872
|
function ImageCard({ label = "UPLOAD", title, slotId, placeholder, height = 230, caption, style, ...rest }) {
|
|
1840
|
-
return /* @__PURE__ */ (0,
|
|
1841
|
-
/* @__PURE__ */ (0,
|
|
1842
|
-
/* @__PURE__ */ (0,
|
|
1843
|
-
/* @__PURE__ */ (0,
|
|
1873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ...rest, style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: "16px 20px 20px", ...style }, children: [
|
|
1874
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }, children: [
|
|
1875
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: label }),
|
|
1876
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { style: { fontSize: "var(--font-size-base)", fontWeight: 600, color: "var(--color-text-primary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }, children: title })
|
|
1844
1877
|
] }),
|
|
1845
|
-
/* @__PURE__ */ (0,
|
|
1846
|
-
caption && /* @__PURE__ */ (0,
|
|
1878
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("image-slot", { id: slotId, shape: "rounded", radius: "10", placeholder, style: { width: "100%", height, display: "block" } }),
|
|
1879
|
+
caption && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: { marginTop: 8, fontSize: "var(--font-size-md)", color: "var(--color-text-muted)", textAlign: "center" }, children: caption })
|
|
1847
1880
|
] });
|
|
1848
1881
|
}
|
|
1849
1882
|
|
|
1850
1883
|
// src/components/RelatedCard/RelatedCard.tsx
|
|
1851
|
-
var
|
|
1852
|
-
var
|
|
1884
|
+
var import_react12 = require("react");
|
|
1885
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1853
1886
|
function RelatedCard({ items, style, ...rest }) {
|
|
1854
|
-
return /* @__PURE__ */ (0,
|
|
1855
|
-
/* @__PURE__ */ (0,
|
|
1856
|
-
/* @__PURE__ */ (0,
|
|
1887
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...rest, style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: 16, ...style }, children: [
|
|
1888
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "RELATED" }) }),
|
|
1889
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }, children: items.map((it, i) => {
|
|
1857
1890
|
const Element = it.as ?? (it.href ? "a" : "button");
|
|
1858
|
-
return /* @__PURE__ */ (0,
|
|
1891
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { children: (0, import_react12.createElement)(
|
|
1859
1892
|
Element,
|
|
1860
1893
|
{
|
|
1861
1894
|
type: Element === "button" ? "button" : void 0,
|
|
@@ -1878,35 +1911,35 @@ function RelatedCard({ items, style, ...rest }) {
|
|
|
1878
1911
|
textDecoration: "none"
|
|
1879
1912
|
}
|
|
1880
1913
|
},
|
|
1881
|
-
/* @__PURE__ */ (0,
|
|
1882
|
-
/* @__PURE__ */ (0,
|
|
1883
|
-
/* @__PURE__ */ (0,
|
|
1914
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "aria-hidden": "true", style: { width: 6, height: 6, borderRadius: "50%", background: it.color, flexShrink: 0 } }),
|
|
1915
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: { flex: 1 }, children: it.label }),
|
|
1916
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "aria-hidden": "true", style: { color: "var(--color-ink-300)" }, children: "\u203A" })
|
|
1884
1917
|
) }, i);
|
|
1885
1918
|
}) })
|
|
1886
1919
|
] });
|
|
1887
1920
|
}
|
|
1888
1921
|
|
|
1889
1922
|
// src/components/ReferencesCard/ReferencesCard.tsx
|
|
1890
|
-
var
|
|
1923
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1891
1924
|
function ReferencesCard({ items, style, ...rest }) {
|
|
1892
|
-
return /* @__PURE__ */ (0,
|
|
1893
|
-
/* @__PURE__ */ (0,
|
|
1894
|
-
/* @__PURE__ */ (0,
|
|
1895
|
-
/* @__PURE__ */ (0,
|
|
1896
|
-
/* @__PURE__ */ (0,
|
|
1925
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...rest, style: { background: "var(--color-surface)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-card)", margin: "24px 0", padding: 16, ...style }, children: [
|
|
1926
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wide)", color: "var(--color-accent)" }, children: "REFERENCES" }) }),
|
|
1927
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }, children: items.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { style: { display: "flex", alignItems: "baseline", gap: 8, fontSize: "var(--font-size-base)" }, children: [
|
|
1928
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { "aria-hidden": "true", style: { color: "var(--color-ink-300)" }, children: "\u203A" }),
|
|
1929
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { style: { color: "var(--color-text-secondary)" }, children: t })
|
|
1897
1930
|
] }, i)) })
|
|
1898
1931
|
] });
|
|
1899
1932
|
}
|
|
1900
1933
|
|
|
1901
1934
|
// src/components/AnnotationPanel/AnnotationPanel.tsx
|
|
1902
|
-
var
|
|
1903
|
-
var
|
|
1935
|
+
var import_react13 = require("react");
|
|
1936
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1904
1937
|
function AnnotationPanel({ open, value, onChange, placeholder = "Jot your own take here\u2026", ...rest }) {
|
|
1905
|
-
const labelId = (0,
|
|
1938
|
+
const labelId = (0, import_react13.useId)();
|
|
1906
1939
|
if (!open) return null;
|
|
1907
|
-
return /* @__PURE__ */ (0,
|
|
1908
|
-
/* @__PURE__ */ (0,
|
|
1909
|
-
/* @__PURE__ */ (0,
|
|
1940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { marginTop: 10, background: "var(--color-annotation-fill)", borderLeft: "3px solid var(--color-annotation-border)", borderRadius: "0 8px 8px 0", padding: "10px 14px" }, children: [
|
|
1941
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { id: labelId, style: { fontFamily: "var(--font-family-mono)", fontSize: "9.5px", letterSpacing: "0.14em", color: "var(--color-annotation-label)", marginBottom: 5 }, children: "MY NOTE" }),
|
|
1942
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1910
1943
|
"textarea",
|
|
1911
1944
|
{
|
|
1912
1945
|
"aria-labelledby": labelId,
|
|
@@ -1922,7 +1955,7 @@ function AnnotationPanel({ open, value, onChange, placeholder = "Jot your own ta
|
|
|
1922
1955
|
}
|
|
1923
1956
|
|
|
1924
1957
|
// src/components/AnnotationToggle/AnnotationToggle.tsx
|
|
1925
|
-
var
|
|
1958
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1926
1959
|
function AnnotationToggle({
|
|
1927
1960
|
hasText = false,
|
|
1928
1961
|
open = false,
|
|
@@ -1936,7 +1969,7 @@ function AnnotationToggle({
|
|
|
1936
1969
|
}) {
|
|
1937
1970
|
const { active, interactionHandlers } = useHover({ onMouseEnter, onMouseLeave, onFocus, onBlur });
|
|
1938
1971
|
const visible = hot || open || hasText || active;
|
|
1939
|
-
return /* @__PURE__ */ (0,
|
|
1972
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1940
1973
|
"button",
|
|
1941
1974
|
{
|
|
1942
1975
|
type: "button",
|
|
@@ -1961,7 +1994,7 @@ function AnnotationToggle({
|
|
|
1961
1994
|
}
|
|
1962
1995
|
|
|
1963
1996
|
// src/components/McqOption/McqOption.tsx
|
|
1964
|
-
var
|
|
1997
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1965
1998
|
var STATE_TEXT = { correct: "Correct", wrong: "Incorrect" };
|
|
1966
1999
|
function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
1967
2000
|
let border = "var(--border-medium)";
|
|
@@ -1980,7 +2013,7 @@ function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
|
1980
2013
|
color = "var(--color-danger)";
|
|
1981
2014
|
mark = "\u2715";
|
|
1982
2015
|
}
|
|
1983
|
-
return /* @__PURE__ */ (0,
|
|
2016
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
1984
2017
|
"button",
|
|
1985
2018
|
{
|
|
1986
2019
|
type: "button",
|
|
@@ -2004,10 +2037,10 @@ function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
|
2004
2037
|
boxSizing: "border-box"
|
|
2005
2038
|
},
|
|
2006
2039
|
children: [
|
|
2007
|
-
/* @__PURE__ */ (0,
|
|
2008
|
-
mark && /* @__PURE__ */ (0,
|
|
2009
|
-
/* @__PURE__ */ (0,
|
|
2010
|
-
/* @__PURE__ */ (0,
|
|
2040
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { flex: 1, minWidth: 0, textWrap: "pretty" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MathText, { text: label }) }),
|
|
2041
|
+
mark && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { style: { fontWeight: 700, flexShrink: 0 }, children: [
|
|
2042
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": "true", children: mark }),
|
|
2043
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
2011
2044
|
"span",
|
|
2012
2045
|
{
|
|
2013
2046
|
style: {
|
|
@@ -2036,12 +2069,12 @@ function McqOption({ label, state = "default", onClick, ...rest }) {
|
|
|
2036
2069
|
}
|
|
2037
2070
|
|
|
2038
2071
|
// src/components/FillBlankInput/FillBlankInput.tsx
|
|
2039
|
-
var
|
|
2072
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2040
2073
|
function FillBlankInput({ value, onChange, checked = false, correct = false, onCheck, resultLabel, style, ...rest }) {
|
|
2041
2074
|
const borderColor = checked ? correct ? "var(--color-success-border)" : "var(--color-danger-border)" : "var(--border-medium)";
|
|
2042
|
-
return /* @__PURE__ */ (0,
|
|
2043
|
-
/* @__PURE__ */ (0,
|
|
2044
|
-
/* @__PURE__ */ (0,
|
|
2075
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ...rest, style, children: [
|
|
2076
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children: [
|
|
2077
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2045
2078
|
TextInput,
|
|
2046
2079
|
{
|
|
2047
2080
|
value,
|
|
@@ -2052,7 +2085,7 @@ function FillBlankInput({ value, onChange, checked = false, correct = false, onC
|
|
|
2052
2085
|
style: { flex: 1, border: `1px solid ${borderColor}`, background: "var(--color-background)", fontSize: "var(--font-size-lg)" }
|
|
2053
2086
|
}
|
|
2054
2087
|
),
|
|
2055
|
-
!checked && /* @__PURE__ */ (0,
|
|
2088
|
+
!checked && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2056
2089
|
"button",
|
|
2057
2090
|
{
|
|
2058
2091
|
type: "button",
|
|
@@ -2062,32 +2095,32 @@ function FillBlankInput({ value, onChange, checked = false, correct = false, onC
|
|
|
2062
2095
|
}
|
|
2063
2096
|
)
|
|
2064
2097
|
] }),
|
|
2065
|
-
checked && /* @__PURE__ */ (0,
|
|
2098
|
+
checked && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { "aria-live": "polite", style: { marginTop: 12, padding: "13px 16px", borderRadius: "var(--radius-lg)", background: "var(--color-surface-sunken)", border: "1px solid var(--border-subtle)" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "0.1em", color: correct ? "var(--color-success)" : "var(--color-danger)" }, children: resultLabel }) })
|
|
2066
2099
|
] });
|
|
2067
2100
|
}
|
|
2068
2101
|
|
|
2069
2102
|
// src/components/ScenarioBox/ScenarioBox.tsx
|
|
2070
|
-
var
|
|
2103
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2071
2104
|
function ScenarioBox({ text, style, ...rest }) {
|
|
2072
|
-
return /* @__PURE__ */ (0,
|
|
2105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
2073
2106
|
"div",
|
|
2074
2107
|
{
|
|
2075
2108
|
...rest,
|
|
2076
2109
|
style: { margin: "2px 0 12px", padding: "12px 14px", borderRadius: "var(--radius-lg)", background: "var(--color-warning-tint)", border: "1px solid var(--color-warning-border)", ...style },
|
|
2077
2110
|
children: [
|
|
2078
|
-
/* @__PURE__ */ (0,
|
|
2079
|
-
/* @__PURE__ */ (0,
|
|
2111
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: { display: "block", fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "0.12em", color: "var(--color-warning)", marginBottom: 5 }, children: "SCENARIO" }),
|
|
2112
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { style: { margin: 0, fontSize: "var(--font-size-base)", color: "var(--color-ink-700)", textWrap: "pretty" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MathText, { text }) })
|
|
2080
2113
|
]
|
|
2081
2114
|
}
|
|
2082
2115
|
);
|
|
2083
2116
|
}
|
|
2084
2117
|
|
|
2085
2118
|
// src/components/Flashcard/Flashcard.tsx
|
|
2086
|
-
var
|
|
2119
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2087
2120
|
function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
|
|
2088
|
-
return /* @__PURE__ */ (0,
|
|
2089
|
-
/* @__PURE__ */ (0,
|
|
2090
|
-
/* @__PURE__ */ (0,
|
|
2121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
2122
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { textAlign: "right", marginBottom: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { fontFamily: "var(--font-family-mono)", fontSize: "9.5px", letterSpacing: "0.1em", color: "var(--color-ink-300)" }, children: boxLabel }) }),
|
|
2123
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2091
2124
|
"button",
|
|
2092
2125
|
{
|
|
2093
2126
|
type: "button",
|
|
@@ -2107,13 +2140,13 @@ function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
|
|
|
2107
2140
|
boxShadow: "var(--shadow-sm)",
|
|
2108
2141
|
boxSizing: "border-box"
|
|
2109
2142
|
},
|
|
2110
|
-
children: /* @__PURE__ */ (0,
|
|
2111
|
-
/* @__PURE__ */ (0,
|
|
2112
|
-
/* @__PURE__ */ (0,
|
|
2113
|
-
/* @__PURE__ */ (0,
|
|
2114
|
-
] }) : /* @__PURE__ */ (0,
|
|
2115
|
-
/* @__PURE__ */ (0,
|
|
2116
|
-
/* @__PURE__ */ (0,
|
|
2143
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { "aria-live": "polite", children: !flipped ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
2144
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wider)", color: "var(--color-text-faint)", marginBottom: 18 }, children: "PROMPT" }),
|
|
2145
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { fontSize: "var(--font-size-2xl)", fontWeight: 600, color: "var(--color-text-primary)", marginBottom: 14, textWrap: "pretty" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MathText, { text: front }) }),
|
|
2146
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-sm)", color: "var(--color-ink-300)", marginTop: 26 }, children: "tap to reveal" })
|
|
2147
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
2148
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { fontFamily: "var(--font-family-mono)", fontSize: "var(--font-size-xs)", letterSpacing: "var(--letter-spacing-mono-wider)", color: "var(--color-accent)", marginBottom: 18 }, children: "ANSWER" }),
|
|
2149
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { fontSize: "var(--font-size-lg)", color: "var(--color-text-tertiary)", textWrap: "pretty" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MathText, { text: back }) })
|
|
2117
2150
|
] }) })
|
|
2118
2151
|
}
|
|
2119
2152
|
)
|
|
@@ -2121,7 +2154,7 @@ function Flashcard({ flipped, front, back, boxLabel, onFlip, ...rest }) {
|
|
|
2121
2154
|
}
|
|
2122
2155
|
|
|
2123
2156
|
// src/components/RateButtons/RateButtons.tsx
|
|
2124
|
-
var
|
|
2157
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2125
2158
|
var buttonStyle = (border, bg, color) => ({
|
|
2126
2159
|
border: `1px solid ${border}`,
|
|
2127
2160
|
background: bg,
|
|
@@ -2133,10 +2166,10 @@ var buttonStyle = (border, bg, color) => ({
|
|
|
2133
2166
|
fontWeight: 600
|
|
2134
2167
|
});
|
|
2135
2168
|
function RateButtons({ enabled = false, onAgain, onGood, onEasy, style, ...rest }) {
|
|
2136
|
-
return /* @__PURE__ */ (0,
|
|
2137
|
-
/* @__PURE__ */ (0,
|
|
2138
|
-
/* @__PURE__ */ (0,
|
|
2139
|
-
/* @__PURE__ */ (0,
|
|
2169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { role: "group", "aria-label": "Rate your recall", ...rest, style: { display: "flex", gap: 10, justifyContent: "center", marginTop: 18, opacity: enabled ? 1 : 0.25, ...style }, children: [
|
|
2170
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: onAgain, disabled: !enabled, style: buttonStyle("var(--color-danger-border)", "var(--color-danger-tint)", "var(--color-danger)"), children: "Again" }),
|
|
2171
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: onGood, disabled: !enabled, style: buttonStyle("var(--color-warning-border)", "var(--color-warning-tint)", "var(--color-warning)"), children: "Good" }),
|
|
2172
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: onEasy, disabled: !enabled, style: buttonStyle("var(--color-success-border)", "var(--color-success-tint)", "var(--color-success)"), children: "Easy" })
|
|
2140
2173
|
] });
|
|
2141
2174
|
}
|
|
2142
2175
|
// Annotate the CommonJS export names for ESM import in node:
|