@campfire-interactive/ui 0.10.0 → 0.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +16 -3
- package/dist/index.js +8 -6
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1126,7 +1126,13 @@ interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
|
1126
1126
|
/** Adds hover feedback. Set it when the row itself navigates or opens something. */
|
|
1127
1127
|
interactive?: boolean;
|
|
1128
1128
|
}
|
|
1129
|
-
|
|
1129
|
+
/**
|
|
1130
|
+
* Forwards its ref. Under React 18 a plain function component drops a ref
|
|
1131
|
+
* outright, and rows are what callers hold one to: a drag handle's connect
|
|
1132
|
+
* function, scroll-into-view on the selected row. omsf had both, and every
|
|
1133
|
+
* one of them would have received null.
|
|
1134
|
+
*/
|
|
1135
|
+
declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
|
|
1130
1136
|
type SortDirection = 'asc' | 'desc';
|
|
1131
1137
|
interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
|
|
1132
1138
|
/** Right-aligns and tabular-aligns the column. Use for every numeric column. */
|
|
@@ -1167,7 +1173,8 @@ interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
|
|
|
1167
1173
|
*/
|
|
1168
1174
|
mono?: boolean;
|
|
1169
1175
|
}
|
|
1170
|
-
|
|
1176
|
+
/** Forwards its ref, for the same reason as TableRow. */
|
|
1177
|
+
declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
|
|
1171
1178
|
interface TableEmptyProps {
|
|
1172
1179
|
/** Must match the table's column count, or the message will not span the width. */
|
|
1173
1180
|
colSpan: number;
|
|
@@ -1523,7 +1530,13 @@ interface StatTileProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'
|
|
|
1523
1530
|
*/
|
|
1524
1531
|
declare function StatTile({ label, value, hint, tone, quiet, aside, footer, onClick, className, ...rest }: StatTileProps): react.JSX.Element;
|
|
1525
1532
|
interface StatGridProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1526
|
-
/**
|
|
1533
|
+
/**
|
|
1534
|
+
* Narrowest a tile gets before the row wraps. Default `8rem`: five tiles fit
|
|
1535
|
+
* one row in a ~750px content column (a 1024px window beside the side nav).
|
|
1536
|
+
* 11rem wrapped them 4 + 1 on pm's Portfolio, which reads as a mistake.
|
|
1537
|
+
* Tracks are auto-fit, so a short row stretches across rather than leaving
|
|
1538
|
+
* empty columns beside it.
|
|
1539
|
+
*/
|
|
1527
1540
|
minTileWidth?: string;
|
|
1528
1541
|
}
|
|
1529
1542
|
/** A row of `StatTile`s that wraps by width, not by breakpoint. */
|
package/dist/index.js
CHANGED
|
@@ -1686,10 +1686,11 @@ function TableFooter({ className, ...rest }) {
|
|
|
1686
1686
|
return /* @__PURE__ */ jsx21("tfoot", { className: cn("cfi-ui-table__foot", className), ...rest });
|
|
1687
1687
|
}
|
|
1688
1688
|
var TableFoot = TableFooter;
|
|
1689
|
-
|
|
1689
|
+
var TableRow = forwardRef14(function TableRow2({ selected, interactive, className, ...rest }, ref) {
|
|
1690
1690
|
return /* @__PURE__ */ jsx21(
|
|
1691
1691
|
"tr",
|
|
1692
1692
|
{
|
|
1693
|
+
ref,
|
|
1693
1694
|
"data-selected": selected || void 0,
|
|
1694
1695
|
"data-interactive": interactive || void 0,
|
|
1695
1696
|
"aria-selected": selected || void 0,
|
|
@@ -1697,7 +1698,7 @@ function TableRow({ selected, interactive, className, ...rest }) {
|
|
|
1697
1698
|
...rest
|
|
1698
1699
|
}
|
|
1699
1700
|
);
|
|
1700
|
-
}
|
|
1701
|
+
});
|
|
1701
1702
|
function TableHead({
|
|
1702
1703
|
numeric,
|
|
1703
1704
|
sortable,
|
|
@@ -1726,10 +1727,11 @@ function TableHead({
|
|
|
1726
1727
|
}
|
|
1727
1728
|
);
|
|
1728
1729
|
}
|
|
1729
|
-
|
|
1730
|
+
var TableCell = forwardRef14(function TableCell2({ numeric, truncate, mono, className, ...rest }, ref) {
|
|
1730
1731
|
return /* @__PURE__ */ jsx21(
|
|
1731
1732
|
"td",
|
|
1732
1733
|
{
|
|
1734
|
+
ref,
|
|
1733
1735
|
"data-numeric": numeric || void 0,
|
|
1734
1736
|
"data-truncate": truncate || void 0,
|
|
1735
1737
|
"data-mono": mono || void 0,
|
|
@@ -1737,7 +1739,7 @@ function TableCell({ numeric, truncate, mono, className, ...rest }) {
|
|
|
1737
1739
|
...rest
|
|
1738
1740
|
}
|
|
1739
1741
|
);
|
|
1740
|
-
}
|
|
1742
|
+
});
|
|
1741
1743
|
function TableEmpty({ colSpan, children }) {
|
|
1742
1744
|
return /* @__PURE__ */ jsx21("tr", { className: "cfi-ui-table__row", children: /* @__PURE__ */ jsx21("td", { colSpan, className: "cfi-ui-table__empty", children }) });
|
|
1743
1745
|
}
|
|
@@ -2105,7 +2107,7 @@ function BootScreen({
|
|
|
2105
2107
|
}
|
|
2106
2108
|
|
|
2107
2109
|
// src/StatTile.css
|
|
2108
|
-
styleInject("@layer components {\n :where(.cfi-ui-stat) {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-ui-space-3xs);\n min-width: 0;\n padding: 0.75rem var(--cfi-ui-space-md);\n background: var(--cfi-ui-surface);\n border: 1px solid var(--cfi-ui-border);\n border-radius: var(--cfi-ui-radius-
|
|
2110
|
+
styleInject("@layer components {\n :where(.cfi-ui-stat) {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-ui-space-3xs);\n min-width: 0;\n padding: 0.75rem var(--cfi-ui-space-md);\n background: var(--cfi-ui-surface);\n border: 1px solid var(--cfi-ui-border);\n border-radius: var(--cfi-ui-radius-xl);\n font-family: var(--cfi-ui-font);\n color: var(--cfi-ui-content);\n text-align: start;\n }\n .cfi-ui-stat--action {\n cursor: pointer;\n font: inherit;\n transition: background-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-stat--action:hover {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-stat--action:focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n }\n .cfi-ui-stat__top {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-stat__label {\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-stat__aside {\n flex: none;\n }\n .cfi-ui-stat__value {\n font-size: var(--cfi-ui-text-xl);\n font-weight: var(--cfi-ui-weight-semibold);\n line-height: var(--cfi-ui-leading-tight);\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-stat__value[data-tone=success] {\n color: var(--cfi-ui-success-text);\n }\n .cfi-ui-stat__value[data-tone=warning] {\n color: var(--cfi-ui-warning-text);\n }\n .cfi-ui-stat__value[data-tone=error] {\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-stat__value[data-quiet] {\n font-weight: var(--cfi-ui-weight-normal);\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-stat__hint {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-stat__footer {\n margin-top: var(--cfi-ui-space-3xs);\n font-size: var(--cfi-ui-text-sm);\n }\n :where(.cfi-ui-stat-grid) {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(var(--cfi-ui-stat-min, 8rem), 1fr));\n gap: var(--cfi-ui-space-sm);\n }\n}\n");
|
|
2109
2111
|
|
|
2110
2112
|
// src/StatTile.tsx
|
|
2111
2113
|
import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
@@ -2144,7 +2146,7 @@ function StatTile({
|
|
|
2144
2146
|
}
|
|
2145
2147
|
return /* @__PURE__ */ jsx26("div", { className: cn("cfi-ui", "cfi-ui-stat", className), ...rest, children: body });
|
|
2146
2148
|
}
|
|
2147
|
-
function StatGrid({ minTileWidth = "
|
|
2149
|
+
function StatGrid({ minTileWidth = "8rem", className, style, ...rest }) {
|
|
2148
2150
|
return /* @__PURE__ */ jsx26(
|
|
2149
2151
|
"div",
|
|
2150
2152
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@campfire-interactive/ui",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.2",
|
|
4
4
|
"description": "Shared UI primitives for the Campfire Suite — Radix behavior, plain CSS styled entirely from the design tokens, no Tailwind required",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|