@campfire-interactive/ui 0.10.0 → 0.10.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/index.d.ts +7 -1
- package/dist/index.js +2 -2
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1523,7 +1523,13 @@ interface StatTileProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'
|
|
|
1523
1523
|
*/
|
|
1524
1524
|
declare function StatTile({ label, value, hint, tone, quiet, aside, footer, onClick, className, ...rest }: StatTileProps): react.JSX.Element;
|
|
1525
1525
|
interface StatGridProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1526
|
-
/**
|
|
1526
|
+
/**
|
|
1527
|
+
* Narrowest a tile gets before the row wraps. Default `8rem`: five tiles fit
|
|
1528
|
+
* one row in a ~750px content column (a 1024px window beside the side nav).
|
|
1529
|
+
* 11rem wrapped them 4 + 1 on pm's Portfolio, which reads as a mistake.
|
|
1530
|
+
* Tracks are auto-fit, so a short row stretches across rather than leaving
|
|
1531
|
+
* empty columns beside it.
|
|
1532
|
+
*/
|
|
1527
1533
|
minTileWidth?: string;
|
|
1528
1534
|
}
|
|
1529
1535
|
/** A row of `StatTile`s that wraps by width, not by breakpoint. */
|
package/dist/index.js
CHANGED
|
@@ -2105,7 +2105,7 @@ function BootScreen({
|
|
|
2105
2105
|
}
|
|
2106
2106
|
|
|
2107
2107
|
// 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-
|
|
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-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
2109
|
|
|
2110
2110
|
// src/StatTile.tsx
|
|
2111
2111
|
import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
@@ -2144,7 +2144,7 @@ function StatTile({
|
|
|
2144
2144
|
}
|
|
2145
2145
|
return /* @__PURE__ */ jsx26("div", { className: cn("cfi-ui", "cfi-ui-stat", className), ...rest, children: body });
|
|
2146
2146
|
}
|
|
2147
|
-
function StatGrid({ minTileWidth = "
|
|
2147
|
+
function StatGrid({ minTileWidth = "8rem", className, style, ...rest }) {
|
|
2148
2148
|
return /* @__PURE__ */ jsx26(
|
|
2149
2149
|
"div",
|
|
2150
2150
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@campfire-interactive/ui",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.1",
|
|
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",
|