@eduardoalvarez/arrecife 0.9.0 → 0.11.0

package/dist/chart/index.d.cts

@@ -187,6 +187,22 @@ type SeriesChartProps = Omit<ChartContainerProps, 'children'> & {
      * «$1200» in the tooltip, and the axis is the one you read while comparing.
      */
     yTickFormatter?: ((value: unknown) => string) | undefined;
+    /**
+     * The top of the value axis, when the scale has one that the data does not
+     * reach — 100 for a percentage.
+     *
+     * Without it the axis ends at the largest datum, and on a chart of «% visto»
+     * a course watched to 40 % draws as a full bar when it is the highest on the
+     * list. On `BarChart orientation="horizontal"` nothing gives that away: the
+     * value axis is hidden by design, so the chart says something false and
+     * looks exactly like one that does not.
+     *
+     * The bottom is always zero. A bar that does not start at zero is a
+     * different lie, and this prop is not a way into it. It is a floor for the
+     * top and not a clip either: a datum above it extends the axis instead of
+     * running off the edge. See `docs/decisions/0.11.md` § 58.
+     */
+    valueMax?: number | undefined;
     /**
      * Shows the legend. It defaults to «only when there is more than one series»:
      * a legend naming the one line already named by the chart's own heading is a
@@ -217,7 +233,7 @@ type AreaChartProps = SeriesChartProps & {
     /** Adds the series up instead of overlaying them. */
     stacked?: boolean | undefined;
 };
-declare function AreaChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, stacked, ...container }: AreaChartProps): react.JSX.Element;
+declare function AreaChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, valueMax, legend, stacked, ...container }: AreaChartProps): react.JSX.Element;
 /**
  * Bars, upright or lying down.
  *
@@ -241,7 +257,7 @@ type BarChartProps = SeriesChartProps & {
     /** Stacks the series instead of putting them side by side. */
     stacked?: boolean | undefined;
 };
-declare function BarChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, orientation, stacked, ...container }: BarChartProps): react.JSX.Element;
+declare function BarChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, valueMax, legend, orientation, stacked, ...container }: BarChartProps): react.JSX.Element;
 /**
  * Lines, for comparing series against each other.
  *
@@ -254,6 +270,6 @@ declare function BarChart({ data, series, xKey, formatter, xTickFormatter, yTick
  * where it means «this one».
  */
 type LineChartProps = SeriesChartProps;
-declare function LineChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, ...container }: LineChartProps): react.JSX.Element;
+declare function LineChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, valueMax, legend, ...container }: LineChartProps): react.JSX.Element;
 
 export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, ChartContainer, type ChartContainerProps, type ChartDatum, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartPayloadItem, type ChartSeries, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, LineChart, type LineChartProps, SERIES_COLORS, type SeriesChartProps, seriesColor };

package/dist/chart/index.d.ts

@@ -187,6 +187,22 @@ type SeriesChartProps = Omit<ChartContainerProps, 'children'> & {
      * «$1200» in the tooltip, and the axis is the one you read while comparing.
      */
     yTickFormatter?: ((value: unknown) => string) | undefined;
+    /**
+     * The top of the value axis, when the scale has one that the data does not
+     * reach — 100 for a percentage.
+     *
+     * Without it the axis ends at the largest datum, and on a chart of «% visto»
+     * a course watched to 40 % draws as a full bar when it is the highest on the
+     * list. On `BarChart orientation="horizontal"` nothing gives that away: the
+     * value axis is hidden by design, so the chart says something false and
+     * looks exactly like one that does not.
+     *
+     * The bottom is always zero. A bar that does not start at zero is a
+     * different lie, and this prop is not a way into it. It is a floor for the
+     * top and not a clip either: a datum above it extends the axis instead of
+     * running off the edge. See `docs/decisions/0.11.md` § 58.
+     */
+    valueMax?: number | undefined;
     /**
      * Shows the legend. It defaults to «only when there is more than one series»:
      * a legend naming the one line already named by the chart's own heading is a
@@ -217,7 +233,7 @@ type AreaChartProps = SeriesChartProps & {
     /** Adds the series up instead of overlaying them. */
     stacked?: boolean | undefined;
 };
-declare function AreaChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, stacked, ...container }: AreaChartProps): react.JSX.Element;
+declare function AreaChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, valueMax, legend, stacked, ...container }: AreaChartProps): react.JSX.Element;
 /**
  * Bars, upright or lying down.
  *
@@ -241,7 +257,7 @@ type BarChartProps = SeriesChartProps & {
     /** Stacks the series instead of putting them side by side. */
     stacked?: boolean | undefined;
 };
-declare function BarChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, orientation, stacked, ...container }: BarChartProps): react.JSX.Element;
+declare function BarChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, valueMax, legend, orientation, stacked, ...container }: BarChartProps): react.JSX.Element;
 /**
  * Lines, for comparing series against each other.
  *
@@ -254,6 +270,6 @@ declare function BarChart({ data, series, xKey, formatter, xTickFormatter, yTick
  * where it means «this one».
  */
 type LineChartProps = SeriesChartProps;
-declare function LineChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, ...container }: LineChartProps): react.JSX.Element;
+declare function LineChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, valueMax, legend, ...container }: LineChartProps): react.JSX.Element;
 
 export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, ChartContainer, type ChartContainerProps, type ChartDatum, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartPayloadItem, type ChartSeries, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, LineChart, type LineChartProps, SERIES_COLORS, type SeriesChartProps, seriesColor };

package/dist/chart/index.js

@@ -3,7 +3,6 @@ import { Text } from '../chunk-TRPBID2W.js';
 import '../chunk-ODBFN44D.js';
 import { cn } from '../chunk-FAAGZG7A.js';
 import { radius } from '../chunk-FGFNK72B.js';
-import '../chunk-MLKGABMK.js';
 import { useId } from 'react';
 import { ResponsiveContainer, Tooltip, Legend, AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Area, BarChart as BarChart$1, Bar, LineChart as LineChart$1, Line } from 'recharts';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -107,6 +106,7 @@ var color = (series, index) => series.color ?? seriesColor(index);
 var MARGIN = { left: 0, right: 12, top: 8, bottom: 0 };
 var AXIS = { tickLine: false, axisLine: false };
 var tickOf = (format) => format ? { tickFormatter: format } : {};
+var domainOf = (max) => max === void 0 ? {} : { domain: [0, max] };
 var legendOf = (series, legend) => legend ?? series.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }, "legend") : null;
 var tooltipOf = (formatter) => /* @__PURE__ */ jsx(
   ChartTooltip,
@@ -123,6 +123,7 @@ function AreaChart({
   formatter,
   xTickFormatter,
   yTickFormatter,
+  valueMax,
   legend,
   stacked = false,
   ...container
@@ -135,7 +136,7 @@ function AreaChart({
     ] }, s.key)) }),
     /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
     /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8, ...tickOf(xTickFormatter) }),
-    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }),
+    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter), ...domainOf(valueMax) }),
     tooltipOf(formatter),
     legendOf(series, legend),
     series.map((s, i) => /* @__PURE__ */ jsx(
@@ -161,6 +162,7 @@ function BarChart({
   formatter,
   xTickFormatter,
   yTickFormatter,
+  valueMax,
   legend,
   orientation = "vertical",
   stacked = false,
@@ -187,7 +189,16 @@ function BarChart({
             },
             "category"
           ),
-          /* @__PURE__ */ jsx(XAxis, { type: "number", hide: true, ...tickOf(yTickFormatter) }, "value")
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              type: "number",
+              hide: true,
+              ...tickOf(yTickFormatter),
+              ...domainOf(valueMax)
+            },
+            "value"
+          )
         ] : [
           /* @__PURE__ */ jsx(
             XAxis,
@@ -199,7 +210,16 @@ function BarChart({
             },
             "category"
           ),
-          /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }, "value")
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              ...AXIS,
+              width: 40,
+              ...tickOf(yTickFormatter),
+              ...domainOf(valueMax)
+            },
+            "value"
+          )
         ],
         tooltipOf(formatter),
         legendOf(series, legend),
@@ -226,13 +246,14 @@ function LineChart({
   formatter,
   xTickFormatter,
   yTickFormatter,
+  valueMax,
   legend,
   ...container
 }) {
   return /* @__PURE__ */ jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxs(LineChart$1, { data: rows(data), margin: MARGIN, children: [
     /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
     /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8, ...tickOf(xTickFormatter) }),
-    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }),
+    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter), ...domainOf(valueMax) }),
     tooltipOf(formatter),
     legendOf(series, legend),
     series.map((s, i) => /* @__PURE__ */ jsx(

package/dist/{chunk-MPZBF2TZ.js → chunk-RKGKO2TW.js}

@@ -1,7 +1,7 @@
-import { fins, ASSETS_PATH, poses, faces } from './chunk-CKRSQPTX.js';
 import { cn } from './chunk-FAAGZG7A.js';
+import { fins, ASSETS_PATH, poses, faces } from './chunk-CKRSQPTX.js';
 import { naming, tagline } from './chunk-FGFNK72B.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function Isotype({
   background = "dark",
@@ -10,18 +10,24 @@ function Isotype({
   className,
   ...props
 }) {
-  const file = background === "dark" ? fins.foam : fins.color;
-  return /* @__PURE__ */ jsx(
+  const fin = (file, mode) => /* @__PURE__ */ jsx(
     "img",
     {
       src: `${basePath}/${file}`,
       alt,
       width: 147,
       height: 111,
-      className: cn("h-8 w-auto select-none", className),
+      className: cn("h-8 w-auto select-none", className, mode),
       ...props
     }
   );
+  if (background === "auto") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      fin(fins.foam, "light:hidden"),
+      fin(fins.color, "not-light:hidden")
+    ] });
+  }
+  return fin(background === "dark" ? fins.foam : fins.color);
 }
 function Logo({
   background = "dark",

package/dist/chunk-ZSCSKCTY.js

@@ -0,0 +1,26 @@
+import { cn } from './chunk-FAAGZG7A.js';
+import { jsx } from 'react/jsx-runtime';
+
+var ICON_WEIGHT = "regular";
+var TONE_WEIGHT = {
+  action: ICON_WEIGHT,
+  current: "fill",
+  quiet: "light"
+};
+function Icon({ as: Glyph, tone = "action", label, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Glyph,
+    {
+      size: "1em",
+      weight: TONE_WEIGHT[tone],
+      "aria-hidden": label ? void 0 : true,
+      "aria-label": label,
+      role: label ? "img" : void 0,
+      focusable: "false",
+      className: cn("shrink-0", className),
+      ...props
+    }
+  );
+}
+
+export { ICON_WEIGHT, Icon, TONE_WEIGHT };

package/dist/form/index.js

@@ -4,7 +4,6 @@ import { Text } from '../chunk-TRPBID2W.js';
 import '../chunk-ODBFN44D.js';
 import { cn } from '../chunk-FAAGZG7A.js';
 import '../chunk-FGFNK72B.js';
-import '../chunk-MLKGABMK.js';
 import { createContext, useContext, useId } from 'react';
 import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
 import { Slot } from '@radix-ui/react-slot';

package/dist/icons/index.d.cts

@@ -2,14 +2,20 @@ import * as react from 'react';
 import { IconWeight, IconProps as IconProps$1, Icon as Icon$1 } from '@phosphor-icons/react';
 
 /**
- * The system adopts `@phosphor-icons/react`, and this is the whole of what
- * «adopts» means: an optional peer dependency, and one place that fixes what a
- * call site was getting wrong on its own.
+ * The system adopts `@phosphor-icons/react`, and since 0.10.0 «adopts» means
+ * ALL of it: a required peer dependency, one place that fixes what a call site
+ * was getting wrong on its own, and no second set anywhere in the library.
+ *
+ * It was optional for three releases, and what made it required is that the
+ * library stopped keeping a set of its own to fall back on. That is the trade
+ * and it is worth naming: the two consumers that draw no icons of their own now
+ * install Phosphor anyway, because the `Alert` and the `Select` they DO draw are
+ * drawn with it.
  *
  * WHY IT IS HERE AT ALL. The position used to be that the system has no icons.
- * That was right for what the library was — five reading sites, where
- * `lib/glyphs.tsx` covers everything a primitive needs — and it stopped being
- * right when an admin panel arrived. Measured across the four consumers, the one
+ * That was right for what the library was — five reading sites, where a
+ * hand-drawn `lib/glyphs.tsx` covered everything a primitive needed — and it
+ * stopped being right when an admin panel arrived. Measured across the four consumers, the one
  * admin app imports 89 distinct icons in 229 places and the other three import
  * 9, 0 and 0. Seventy-seven of the 89 are domain icons for a course admin —
  * `GraduationCap`, `TicketPercent`, `Webhook` — and no design system was ever
@@ -39,10 +45,13 @@ import { IconWeight, IconProps as IconProps$1, Icon as Icon$1 } from '@phosphor-
  * because Phosphor's other three — `thin`, `bold`, `duotone` — say nothing this
  * system means. See `TONE_WEIGHT` below and `docs/decisions/0.7.md` § 35.
  *
- * `lib/glyphs.tsx` is the outlier and it is NOT reconciled here: it draws at
- * 1.75 on a 16 grid, which is 0.109em — three quarters heavier than both the
- * document and this. Aligning it restyles every primitive in the library and is
- * its own change. See `docs/decisions/0.7.md` § 29.
+ * IT IS NOW THE ONLY LINE THE LIBRARY DRAWS, which is what 0.10.0 changed.
+ * `lib/glyphs.tsx` drew at 1.75 on a 16 grid — 0.109em, three quarters heavier
+ * than both the document and this — and `./social` drew ten brand marks in a
+ * third hand. 0.7.0 left both alone because reconciling them restyles every
+ * primitive in the library; that is exactly what 0.10.0 did, and both files are
+ * gone. There is one description of what a line looks like here, and it is
+ * Phosphor's. See `docs/decisions/0.10.md` § 51.
  *
  * IN NEXT, IMPORT FROM `@phosphor-icons/react/ssr` inside a Server Component.
  * Phosphor's default build reads `IconContext` through `useContext`, and a hook

package/dist/icons/index.d.ts

@@ -2,14 +2,20 @@ import * as react from 'react';
 import { IconWeight, IconProps as IconProps$1, Icon as Icon$1 } from '@phosphor-icons/react';
 
 /**
- * The system adopts `@phosphor-icons/react`, and this is the whole of what
- * «adopts» means: an optional peer dependency, and one place that fixes what a
- * call site was getting wrong on its own.
+ * The system adopts `@phosphor-icons/react`, and since 0.10.0 «adopts» means
+ * ALL of it: a required peer dependency, one place that fixes what a call site
+ * was getting wrong on its own, and no second set anywhere in the library.
+ *
+ * It was optional for three releases, and what made it required is that the
+ * library stopped keeping a set of its own to fall back on. That is the trade
+ * and it is worth naming: the two consumers that draw no icons of their own now
+ * install Phosphor anyway, because the `Alert` and the `Select` they DO draw are
+ * drawn with it.
  *
  * WHY IT IS HERE AT ALL. The position used to be that the system has no icons.
- * That was right for what the library was — five reading sites, where
- * `lib/glyphs.tsx` covers everything a primitive needs — and it stopped being
- * right when an admin panel arrived. Measured across the four consumers, the one
+ * That was right for what the library was — five reading sites, where a
+ * hand-drawn `lib/glyphs.tsx` covered everything a primitive needed — and it
+ * stopped being right when an admin panel arrived. Measured across the four consumers, the one
  * admin app imports 89 distinct icons in 229 places and the other three import
  * 9, 0 and 0. Seventy-seven of the 89 are domain icons for a course admin —
  * `GraduationCap`, `TicketPercent`, `Webhook` — and no design system was ever
@@ -39,10 +45,13 @@ import { IconWeight, IconProps as IconProps$1, Icon as Icon$1 } from '@phosphor-
  * because Phosphor's other three — `thin`, `bold`, `duotone` — say nothing this
  * system means. See `TONE_WEIGHT` below and `docs/decisions/0.7.md` § 35.
  *
- * `lib/glyphs.tsx` is the outlier and it is NOT reconciled here: it draws at
- * 1.75 on a 16 grid, which is 0.109em — three quarters heavier than both the
- * document and this. Aligning it restyles every primitive in the library and is
- * its own change. See `docs/decisions/0.7.md` § 29.
+ * IT IS NOW THE ONLY LINE THE LIBRARY DRAWS, which is what 0.10.0 changed.
+ * `lib/glyphs.tsx` drew at 1.75 on a 16 grid — 0.109em, three quarters heavier
+ * than both the document and this — and `./social` drew ten brand marks in a
+ * third hand. 0.7.0 left both alone because reconciling them restyles every
+ * primitive in the library; that is exactly what 0.10.0 did, and both files are
+ * gone. There is one description of what a line looks like here, and it is
+ * Phosphor's. See `docs/decisions/0.10.md` § 51.
  *
  * IN NEXT, IMPORT FROM `@phosphor-icons/react/ssr` inside a Server Component.
  * Phosphor's default build reads `IconContext` through `useContext`, and a hook

package/dist/icons/index.js

@@ -1,28 +1,3 @@
-import { cn } from '../chunk-FAAGZG7A.js';
+export { ICON_WEIGHT, Icon, TONE_WEIGHT } from '../chunk-ZSCSKCTY.js';
+import '../chunk-FAAGZG7A.js';
 import '../chunk-FGFNK72B.js';
-import '../chunk-MLKGABMK.js';
-import { jsx } from 'react/jsx-runtime';
-
-var ICON_WEIGHT = "regular";
-var TONE_WEIGHT = {
-  action: ICON_WEIGHT,
-  current: "fill",
-  quiet: "light"
-};
-function Icon({ as: Glyph, tone = "action", label, className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Glyph,
-    {
-      size: "1em",
-      weight: TONE_WEIGHT[tone],
-      "aria-hidden": label ? void 0 : true,
-      "aria-label": label,
-      role: label ? "img" : void 0,
-      focusable: "false",
-      className: cn("shrink-0", className),
-      ...props
-    }
-  );
-}
-
-export { ICON_WEIGHT, Icon, TONE_WEIGHT };