@shapesos/clay 0.15.0 → 0.17.0

package/README.md

@@ -61,6 +61,20 @@ typographyMixin(typographyTypes.GEIST_BODY_XS_MEDIUM);
 // => CSS string ready to use in template literals
 ```
 
+### Tailwind typography utilities
+
+When consuming `dist/blocks.css` (the Tailwind layer), every entry in `typographyStyles` is also exposed as a `text-*` utility — one class sets font-size + line-height + font-weight + letter-spacing. The name is the token in kebab-case (`GEIST_BODY_XS_MEDIUM` → `text-geist-body-xs-medium`). Pair with `font-sans` (Geist) or `font-serif` (Crimson Pro); for italic Crimson types add the `italic` utility (Tailwind's font-size utilities don't carry `font-style`).
+
+| Token family | Example utility | Use for |
+| --- | --- | --- |
+| `GEIST_DISPLAY_*` | `text-geist-display-l-bold` | Hero / page titles |
+| `GEIST_HEADING_*` | `text-geist-heading-s-bold` | Section headings |
+| `GEIST_BODY_*` | `text-geist-body-m-regular`, `text-geist-body-xs-medium` | Body copy, labels |
+| `GEIST_LABEL_*` | `text-geist-label-caption-regular` | Captions, metadata |
+| `CRIMSON_PRO_*` | `text-crimson-pro-display-xl-regular-italic` (+ `font-serif italic`) | Editorial / decorative |
+
+The full list is the keys of `typographyStyles` in `src/tokens/typography.ts`; the utilities are generated by `scripts/generate-theme-tokens.ts` into `src/styles/_theme-tokens.css`.
+
 ---
 
 ## Chat

package/dist/artifacts.cjs

@@ -981,6 +981,11 @@ var CHART_PALETTE = [
 ];
 var OTHERS_SLICE_COLOR = colors["brown-60"];
 var DEFAULT_OTHERS_CATEGORY_LABELS = ["others", "other"];
+var NONE_CATEGORY_VALUES = ["", "(none)", "none", "null", "undefined", "n/a", "-"];
+function isNoneCategory(value) {
+  if (value === null || value === void 0) return true;
+  return NONE_CATEGORY_VALUES.includes(String(value).trim().toLowerCase());
+}
 function isOthersCategory(value, labels) {
   if (value === null || value === void 0) return false;
   if (labels.length === 0) return false;
@@ -1036,6 +1041,13 @@ function truncateLabel(value, maxChars) {
   if (s.length <= maxChars) return s;
   return s.slice(0, Math.max(1, maxChars - 1)).trimEnd() + "\u2026";
 }
+var compactNumberFormat = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
+function compactNumberTickFormatter(value) {
+  if (value === null || value === void 0) return "";
+  const n = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(n)) return String(value);
+  return compactNumberFormat.format(n);
+}
 function evenlyDistributedVisibleIndices(n, target) {
   if (n <= target) {
     return new Set(Array.from({ length: n }, (_, i) => i));
@@ -1089,7 +1101,6 @@ function BarChart({
   showGrid = true,
   showXAxis = true,
   showYAxis = true,
-  showValueLabels,
   xAxisInterval = 0,
   xAxisAngle,
   xAxisTickFormatter
@@ -1100,7 +1111,6 @@ function BarChart({
     [data, seriesKeys]
   );
   const resolvedShowLegend = showLegend ?? series.length > 1;
-  const resolvedShowValueLabels = showValueLabels ?? (!stacked && series.length === 1);
   const resolvedAngle = xAxisAngle ?? (coercedData.length >= 8 ? -30 : 0);
   const resolvedTickFormatter = (0, import_react9.useMemo)(
     () => xAxisTickFormatter ?? defaultBarTickFormatter(coercedData.length),
@@ -1123,7 +1133,7 @@ function BarChart({
         tickFormatter: resolvedTickFormatter
       }
     ) : null,
-    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts2.YAxis, { ...CHART_AXIS_PROPS, width: 40 }) : null,
+    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts2.YAxis, { ...CHART_AXIS_PROPS, width: 40, tickFormatter: compactNumberTickFormatter }) : null,
     showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts2.Tooltip, { cursor: { fill: BAR_TOOLTIP_CURSOR_FILL }, content: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartTooltipContent, {}) }) : null,
     resolvedShowLegend ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts2.Legend,
@@ -1142,8 +1152,7 @@ function BarChart({
         name: s.label,
         fill: colorForSeriesIndex(i, palette),
         stackId: stacked ? "default" : s.key,
-        radius: barRadius(stacked, i, series.length),
-        children: resolvedShowValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts2.LabelList, { dataKey: s.key, position: "top", style: CHART_VALUE_LABEL_STYLE }) : null
+        radius: barRadius(stacked, i, series.length)
       },
       s.key
     ))
@@ -1262,7 +1271,7 @@ function LineChart({
         tickFormatter: resolvedTickFormatter
       }
     ) : null,
-    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_recharts3.YAxis, { ...CHART_AXIS_PROPS, width: 40 }) : null,
+    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_recharts3.YAxis, { ...CHART_AXIS_PROPS, width: 40, tickFormatter: compactNumberTickFormatter }) : null,
     showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChartTooltipContent, {}) }) : null,
     resolvedShowLegend ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_recharts3.Legend,
@@ -1320,6 +1329,42 @@ var LineChartVariantService = {
 // src/components/chart/pie-chart/pie-chart.tsx
 var import_react11 = require("react");
 var import_recharts4 = require("recharts");
+
+// src/components/chart/pie-chart/utils.ts
+function mergedOthersLabel(leftoverRows, categoryKey, othersCategoryLabels) {
+  const explicit = leftoverRows.find((row) => isOthersCategory(row[categoryKey], othersCategoryLabels));
+  if (explicit) return String(explicit[categoryKey]);
+  const fallback = othersCategoryLabels[0] ?? "Other";
+  return fallback.charAt(0).toUpperCase() + fallback.slice(1);
+}
+function buildPieSlices(data, categoryKey, valueKey, othersCategoryLabels, palette) {
+  const namedRows = [];
+  const namedColors = [];
+  const leftoverRows = [];
+  for (const row of data) {
+    const isLeftover = othersCategoryLabels.length > 0 && (isNoneCategory(row[categoryKey]) || isOthersCategory(row[categoryKey], othersCategoryLabels));
+    if (isLeftover) {
+      leftoverRows.push(row);
+    } else {
+      namedRows.push(row);
+      namedColors.push(colorForSeriesIndex(namedRows.length - 1, palette));
+    }
+  }
+  if (leftoverRows.length === 0) {
+    return { orderedData: namedRows, sliceColors: namedColors };
+  }
+  const total = leftoverRows.reduce((sum, row) => sum + (Number(row[valueKey]) || 0), 0);
+  const mergedRow = {
+    [categoryKey]: mergedOthersLabel(leftoverRows, categoryKey, othersCategoryLabels),
+    [valueKey]: total
+  };
+  return {
+    orderedData: [...namedRows, mergedRow],
+    sliceColors: [...namedColors, OTHERS_SLICE_COLOR]
+  };
+}
+
+// src/components/chart/pie-chart/pie-chart.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function PieChart({
   data,
@@ -1338,23 +1383,7 @@ function PieChart({
 }) {
   const { orderedData, sliceColors } = (0, import_react11.useMemo)(() => {
     const coerced = coerceNumericColumns(data, [valueKey]);
-    const namedRows = [];
-    const namedColors = [];
-    const othersRows = [];
-    const othersColors = [];
-    for (const row of coerced) {
-      if (isOthersCategory(row[categoryKey], othersCategoryLabels)) {
-        othersRows.push(row);
-        othersColors.push(OTHERS_SLICE_COLOR);
-      } else {
-        namedRows.push(row);
-        namedColors.push(colorForSeriesIndex(namedRows.length - 1, palette));
-      }
-    }
-    return {
-      orderedData: [...namedRows, ...othersRows],
-      sliceColors: [...namedColors, ...othersColors]
-    };
+    return buildPieSlices(coerced, categoryKey, valueKey, othersCategoryLabels, palette);
   }, [data, valueKey, categoryKey, othersCategoryLabels, palette]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_recharts4.PieChart, { margin: PIE_CHART_MARGIN, children: [
     showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_recharts4.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartTooltipContent, {}) }) : null,