@eduardoalvarez/arrecife 0.7.0 → 0.9.0

package/dist/chart/index.d.cts

@@ -22,9 +22,15 @@ import { Legend, Tooltip } from 'recharts';
  *   3. The tooltip appears where it will stay: `isAnimationActive` is off
  *      everywhere, because the system does not animate position.
  *
- * The data pieces — `BarChart`, `Line`, `XAxis` — are NOT re-exported. They are
- * Recharts' API, the project already knows it, and wrapping them would be a
- * layer of names to keep in sync with the library's version.
+ * Recharts' data pieces — `Area`, `Line`, `XAxis` — are still NOT re-exported.
+ * They are Recharts' API, the project already knows it, and wrapping them would
+ * be a layer of names to keep in sync with the library's version.
+ *
+ * What IS published, since this version, are three CHART TYPES on top of that
+ * chassis: `AreaChart`, `BarChart` and `LineChart`. They are not wrappers over
+ * Recharts' components of the same name — they take `data`, `series` and `xKey`
+ * and draw the whole thing. See `docs/decisions/0.8.md` § 43 for why the names
+ * collide on purpose.
  */
 /**
  * The color of series `index`, as a custom property.
@@ -123,5 +129,131 @@ type ChartLegendContentProps = {
 };
 /** The legend, with the tooltip's same square swatch and the `label` scale. */
 declare function ChartLegendContent({ payload, className }: ChartLegendContentProps): react.JSX.Element | null;
+/**
+ * One series: which key of the datum it reads, what it is called, and — only if
+ * you insist — what color it is.
+ *
+ * `color` is there for the case the palette cannot serve: a status series where
+ * «pagado» has to be `success` and not «the first of the four». Leaving it out
+ * is the normal case and the right one — `seriesColor(i)` follows the mode, and
+ * a hard-coded hex does not. See the note on `seriesColor` above.
+ */
+type ChartSeries = {
+    /** The key this series reads in each datum. */
+    key: string;
+    /** What the legend and the tooltip call it. User-facing, so Spanish. */
+    label: string;
+    /** Overrides the palette. Defaults to `seriesColor(index)`. */
+    color?: string | undefined;
+};
+/** A row of the chart: the category key plus one value per series. */
+type ChartDatum = Record<string, unknown>;
+/**
+ * What all three types take, and it is deliberately short: `data`, `series` and
+ * `xKey`, plus the container's own `label`.
+ *
+ * Everything that is NOT here is the part that was being copied — the gradient,
+ * the grid with no vertical lines, the axes with no line and no tick, the
+ * tooltip with no cursor. `cursos` wrote all of it four times, once per chart,
+ * and the fourth one would have had a different `strokeWidth` from the first.
+ * The drawing is the system's; the data is the project's.
+ */
+type SeriesChartProps = Omit<ChartContainerProps, 'children'> & {
+    data: readonly ChartDatum[];
+    series: readonly ChartSeries[];
+    /** The key on the category axis: the day, the month, the course. */
+    xKey: string;
+    /** Formats the value in the tooltip. The library imposes no locale. */
+    formatter?: ((value: unknown) => ReactNode) | undefined;
+    /**
+     * Formats the TICK on the category axis. Returns a string, because an axis
+     * tick is an SVG `<text>` and not a place a node can go.
+     *
+     * It is separate from `formatter` because the two answer different questions.
+     * The tooltip has room for «15 de julio de 2026»; a tick on a 30-day series
+     * has room for «07-15», and without this the axis prints the raw key —
+     * `2026-07-15` repeated thirty times, overlapping into a grey band.
+     *
+     * The library imposes no format: a date key can be a day, a month or a course
+     * name, and only the project knows which. See `docs/decisions/0.9.md` § 50.
+     */
+    xTickFormatter?: ((value: unknown) => string) | undefined;
+    /**
+     * Formats the tick on the VALUE axis — the currency symbol, the thousands
+     * separator, the percent sign.
+     *
+     * Same reason as `xTickFormatter` and the same shape. `formatter` reaches the
+     * tooltip only, so without this a revenue chart reads «1200» on the axis and
+     * «$1200» in the tooltip, and the axis is the one you read while comparing.
+     */
+    yTickFormatter?: ((value: unknown) => string) | 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
+     * row of pixels that says nothing.
+     */
+    legend?: boolean | undefined;
+};
+/**
+ * A series over time, with the fill fading out underneath it.
+ *
+ * The gradient is the whole reason this is a component and not three lines at
+ * the call site: it needs a `<linearGradient>` with an id, the id has to be
+ * unique on the page, and the two projects that wrote it by hand both hardcoded
+ * one — a second chart on the same screen would have taken the first one's fill.
+ * `useId` settles it.
+ *
+ * 0.5 down to 0.05 is the ramp `cursos` arrived at, and `type="natural"` is its
+ * curve: a monotone spline reads as a measurement and a straight segment reads
+ * as a schedule. The stroke is 2, which is the one weight in the system that is
+ * neither a hairline nor a border.
+ *
+ * With more than one series the areas OVERLAP rather than stack, because a
+ * stacked area answers «how much in total» and this library has no way to know
+ * that is the question. When it is, pass `stacked`. When you want to compare
+ * rather than add up, the answer is `LineChart`.
+ */
+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;
+/**
+ * Bars, upright or lying down.
+ *
+ * `orientation` is named for what you SEE and not for what Recharts calls it,
+ * and the two are opposites: Recharts' `layout="vertical"` draws horizontal
+ * bars. That inversion is a coin flip every time somebody writes it, so it is
+ * settled here once — `vertical` means the bars grow upwards.
+ *
+ * `horizontal` is the shape for a ranking, which is what `cursos` uses it for:
+ * course names on the left, one bar each. It reserves 130px for the category
+ * axis and hides the value axis, because a ranking is read by comparing lengths
+ * and not by reading a number off a scale — the number is in the tooltip.
+ *
+ * The corner radius is `radius.chip`, the system's smallest. A bar is a chip
+ * lying down, and picking a number that is not a token is how a fifth radius
+ * gets into the system without anybody deciding it should.
+ */
+type BarChartProps = SeriesChartProps & {
+    /** `vertical` grows the bars upwards, which is the default. `horizontal` is a ranking. */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /** 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;
+/**
+ * Lines, for comparing series against each other.
+ *
+ * It is the type that does NOT add anything up, which is the whole reason it
+ * exists next to `AreaChart`: four filled areas on top of each other are a
+ * total, and four lines are four things you can tell apart.
+ *
+ * No dots at rest. A point per datum on a 90-day series is a dotted line, and
+ * the value is in the tooltip; the dot comes back on hover because that is
+ * where it means «this one».
+ */
+type LineChartProps = SeriesChartProps;
+declare function LineChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, ...container }: LineChartProps): react.JSX.Element;
 
-export { ChartContainer, type ChartContainerProps, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartPayloadItem, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, SERIES_COLORS, seriesColor };
+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

@@ -22,9 +22,15 @@ import { Legend, Tooltip } from 'recharts';
  *   3. The tooltip appears where it will stay: `isAnimationActive` is off
  *      everywhere, because the system does not animate position.
  *
- * The data pieces — `BarChart`, `Line`, `XAxis` — are NOT re-exported. They are
- * Recharts' API, the project already knows it, and wrapping them would be a
- * layer of names to keep in sync with the library's version.
+ * Recharts' data pieces — `Area`, `Line`, `XAxis` — are still NOT re-exported.
+ * They are Recharts' API, the project already knows it, and wrapping them would
+ * be a layer of names to keep in sync with the library's version.
+ *
+ * What IS published, since this version, are three CHART TYPES on top of that
+ * chassis: `AreaChart`, `BarChart` and `LineChart`. They are not wrappers over
+ * Recharts' components of the same name — they take `data`, `series` and `xKey`
+ * and draw the whole thing. See `docs/decisions/0.8.md` § 43 for why the names
+ * collide on purpose.
  */
 /**
  * The color of series `index`, as a custom property.
@@ -123,5 +129,131 @@ type ChartLegendContentProps = {
 };
 /** The legend, with the tooltip's same square swatch and the `label` scale. */
 declare function ChartLegendContent({ payload, className }: ChartLegendContentProps): react.JSX.Element | null;
+/**
+ * One series: which key of the datum it reads, what it is called, and — only if
+ * you insist — what color it is.
+ *
+ * `color` is there for the case the palette cannot serve: a status series where
+ * «pagado» has to be `success` and not «the first of the four». Leaving it out
+ * is the normal case and the right one — `seriesColor(i)` follows the mode, and
+ * a hard-coded hex does not. See the note on `seriesColor` above.
+ */
+type ChartSeries = {
+    /** The key this series reads in each datum. */
+    key: string;
+    /** What the legend and the tooltip call it. User-facing, so Spanish. */
+    label: string;
+    /** Overrides the palette. Defaults to `seriesColor(index)`. */
+    color?: string | undefined;
+};
+/** A row of the chart: the category key plus one value per series. */
+type ChartDatum = Record<string, unknown>;
+/**
+ * What all three types take, and it is deliberately short: `data`, `series` and
+ * `xKey`, plus the container's own `label`.
+ *
+ * Everything that is NOT here is the part that was being copied — the gradient,
+ * the grid with no vertical lines, the axes with no line and no tick, the
+ * tooltip with no cursor. `cursos` wrote all of it four times, once per chart,
+ * and the fourth one would have had a different `strokeWidth` from the first.
+ * The drawing is the system's; the data is the project's.
+ */
+type SeriesChartProps = Omit<ChartContainerProps, 'children'> & {
+    data: readonly ChartDatum[];
+    series: readonly ChartSeries[];
+    /** The key on the category axis: the day, the month, the course. */
+    xKey: string;
+    /** Formats the value in the tooltip. The library imposes no locale. */
+    formatter?: ((value: unknown) => ReactNode) | undefined;
+    /**
+     * Formats the TICK on the category axis. Returns a string, because an axis
+     * tick is an SVG `<text>` and not a place a node can go.
+     *
+     * It is separate from `formatter` because the two answer different questions.
+     * The tooltip has room for «15 de julio de 2026»; a tick on a 30-day series
+     * has room for «07-15», and without this the axis prints the raw key —
+     * `2026-07-15` repeated thirty times, overlapping into a grey band.
+     *
+     * The library imposes no format: a date key can be a day, a month or a course
+     * name, and only the project knows which. See `docs/decisions/0.9.md` § 50.
+     */
+    xTickFormatter?: ((value: unknown) => string) | undefined;
+    /**
+     * Formats the tick on the VALUE axis — the currency symbol, the thousands
+     * separator, the percent sign.
+     *
+     * Same reason as `xTickFormatter` and the same shape. `formatter` reaches the
+     * tooltip only, so without this a revenue chart reads «1200» on the axis and
+     * «$1200» in the tooltip, and the axis is the one you read while comparing.
+     */
+    yTickFormatter?: ((value: unknown) => string) | 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
+     * row of pixels that says nothing.
+     */
+    legend?: boolean | undefined;
+};
+/**
+ * A series over time, with the fill fading out underneath it.
+ *
+ * The gradient is the whole reason this is a component and not three lines at
+ * the call site: it needs a `<linearGradient>` with an id, the id has to be
+ * unique on the page, and the two projects that wrote it by hand both hardcoded
+ * one — a second chart on the same screen would have taken the first one's fill.
+ * `useId` settles it.
+ *
+ * 0.5 down to 0.05 is the ramp `cursos` arrived at, and `type="natural"` is its
+ * curve: a monotone spline reads as a measurement and a straight segment reads
+ * as a schedule. The stroke is 2, which is the one weight in the system that is
+ * neither a hairline nor a border.
+ *
+ * With more than one series the areas OVERLAP rather than stack, because a
+ * stacked area answers «how much in total» and this library has no way to know
+ * that is the question. When it is, pass `stacked`. When you want to compare
+ * rather than add up, the answer is `LineChart`.
+ */
+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;
+/**
+ * Bars, upright or lying down.
+ *
+ * `orientation` is named for what you SEE and not for what Recharts calls it,
+ * and the two are opposites: Recharts' `layout="vertical"` draws horizontal
+ * bars. That inversion is a coin flip every time somebody writes it, so it is
+ * settled here once — `vertical` means the bars grow upwards.
+ *
+ * `horizontal` is the shape for a ranking, which is what `cursos` uses it for:
+ * course names on the left, one bar each. It reserves 130px for the category
+ * axis and hides the value axis, because a ranking is read by comparing lengths
+ * and not by reading a number off a scale — the number is in the tooltip.
+ *
+ * The corner radius is `radius.chip`, the system's smallest. A bar is a chip
+ * lying down, and picking a number that is not a token is how a fifth radius
+ * gets into the system without anybody deciding it should.
+ */
+type BarChartProps = SeriesChartProps & {
+    /** `vertical` grows the bars upwards, which is the default. `horizontal` is a ranking. */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /** 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;
+/**
+ * Lines, for comparing series against each other.
+ *
+ * It is the type that does NOT add anything up, which is the whole reason it
+ * exists next to `AreaChart`: four filled areas on top of each other are a
+ * total, and four lines are four things you can tell apart.
+ *
+ * No dots at rest. A point per datum on a 90-day series is a dotted line, and
+ * the value is in the tooltip; the dot comes back on hover because that is
+ * where it means «this one».
+ */
+type LineChartProps = SeriesChartProps;
+declare function LineChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, ...container }: LineChartProps): react.JSX.Element;
 
-export { ChartContainer, type ChartContainerProps, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartPayloadItem, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, SERIES_COLORS, seriesColor };
+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

@@ -1,10 +1,11 @@
 'use client';
-import { Text } from '../chunk-WGNIRIN7.js';
+import { Text } from '../chunk-TRPBID2W.js';
 import '../chunk-ODBFN44D.js';
-import { cn } from '../chunk-2WPWEIMD.js';
-import '../chunk-OMKSESQB.js';
+import { cn } from '../chunk-FAAGZG7A.js';
+import { radius } from '../chunk-FGFNK72B.js';
 import '../chunk-MLKGABMK.js';
-import { ResponsiveContainer, Tooltip, Legend } from 'recharts';
+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';
 
 function seriesColor(index) {
@@ -101,5 +102,154 @@ function ChartLegendContent({ payload, className }) {
     /* @__PURE__ */ jsx(Text, { as: "span", variant: "label", tone: "secondary", className: "font-normal", children: item.value })
   ] }, `${String(item.dataKey ?? item.value ?? i)}`)) });
 }
+var rows = (data) => data;
+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 legendOf = (series, legend) => legend ?? series.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }, "legend") : null;
+var tooltipOf = (formatter) => /* @__PURE__ */ jsx(
+  ChartTooltip,
+  {
+    cursor: false,
+    content: /* @__PURE__ */ jsx(ChartTooltipContent, { formatter: formatter ? (value) => formatter(value) : void 0 })
+  },
+  "tooltip"
+);
+function AreaChart({
+  data,
+  series,
+  xKey,
+  formatter,
+  xTickFormatter,
+  yTickFormatter,
+  legend,
+  stacked = false,
+  ...container
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxs(AreaChart$1, { data: rows(data), margin: MARGIN, children: [
+    /* @__PURE__ */ jsx("defs", { children: series.map((s, i) => /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-${s.key}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: color(s, i), stopOpacity: 0.5 }),
+      /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: color(s, i), stopOpacity: 0.05 })
+    ] }, 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) }),
+    tooltipOf(formatter),
+    legendOf(series, legend),
+    series.map((s, i) => /* @__PURE__ */ jsx(
+      Area,
+      {
+        dataKey: s.key,
+        name: s.label,
+        type: "natural",
+        stroke: color(s, i),
+        strokeWidth: 2,
+        fill: `url(#${id}-${s.key})`,
+        isAnimationActive: false,
+        ...stacked ? { stackId: "stack" } : {}
+      },
+      s.key
+    ))
+  ] }) });
+}
+function BarChart({
+  data,
+  series,
+  xKey,
+  formatter,
+  xTickFormatter,
+  yTickFormatter,
+  legend,
+  orientation = "vertical",
+  stacked = false,
+  ...container
+}) {
+  const lying = orientation === "horizontal";
+  return /* @__PURE__ */ jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxs(
+    BarChart$1,
+    {
+      data: rows(data),
+      margin: MARGIN,
+      ...lying ? { layout: "vertical" } : {},
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { vertical: lying, horizontal: !lying }),
+        lying ? [
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              dataKey: xKey,
+              type: "category",
+              ...AXIS,
+              width: 130,
+              ...tickOf(xTickFormatter)
+            },
+            "category"
+          ),
+          /* @__PURE__ */ jsx(XAxis, { type: "number", hide: true, ...tickOf(yTickFormatter) }, "value")
+        ] : [
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: xKey,
+              ...AXIS,
+              tickMargin: 8,
+              ...tickOf(xTickFormatter)
+            },
+            "category"
+          ),
+          /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }, "value")
+        ],
+        tooltipOf(formatter),
+        legendOf(series, legend),
+        series.map((s, i) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: s.key,
+            name: s.label,
+            fill: color(s, i),
+            radius: lying ? [0, radius.chip, radius.chip, 0] : [radius.chip, radius.chip, 0, 0],
+            isAnimationActive: false,
+            ...stacked ? { stackId: "stack" } : {}
+          },
+          s.key
+        ))
+      ]
+    }
+  ) });
+}
+function LineChart({
+  data,
+  series,
+  xKey,
+  formatter,
+  xTickFormatter,
+  yTickFormatter,
+  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) }),
+    tooltipOf(formatter),
+    legendOf(series, legend),
+    series.map((s, i) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        dataKey: s.key,
+        name: s.label,
+        type: "natural",
+        stroke: color(s, i),
+        strokeWidth: 2,
+        dot: false,
+        activeDot: { r: 4 },
+        isAnimationActive: false
+      },
+      s.key
+    ))
+  ] }) });
+}
 
-export { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, SERIES_COLORS, seriesColor };
+export { AreaChart, BarChart, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, LineChart, SERIES_COLORS, seriesColor };

package/dist/{chunk-TA7TLWW4.js → chunk-5A5GH2PF.js}

@@ -1,4 +1,4 @@
-import { naming, tagline, motion, shadow, series, syntax, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-OMKSESQB.js';
+import { naming, tagline, motion, shadow, series, syntax, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-FGFNK72B.js';
 
 // src/tokens/index.ts
 var tokens = {

package/dist/{chunk-727HCBD4.js → chunk-6IGD5REB.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-2WPWEIMD.js';
+import { cn } from './chunk-FAAGZG7A.js';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-2WPWEIMD.js → chunk-FAAGZG7A.js}

@@ -1,4 +1,4 @@
-import { spacing, control, radius, typeScale } from './chunk-OMKSESQB.js';
+import { spacing, control, radius, typeScale } from './chunk-FGFNK72B.js';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 

package/dist/{chunk-OMKSESQB.js → chunk-FGFNK72B.js}

@@ -144,7 +144,7 @@ var typeScale = {
    * (plankton 5.57:1 over abyss), which is the part that is not negotiable.
    *
    * At 13 the three badge families grew past the size of a small button and
-   * outweighed the title they accompany. See `docs/decisions.md`.
+   * outweighed the title they accompany. See `docs/decisions/`.
    */
   chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
   /**
@@ -198,7 +198,7 @@ var control = {
    * baseline; 28 would have been a fifth height that matches nothing.
    *
    * It does not replace `icon`. A page's primary action stays at 42; this is for
-   * a row of a table. See `docs/decisions.md` § 22.
+   * a row of a table. See `docs/decisions/0.6.md` § 22.
    */
   iconSm: 32
 };
@@ -221,7 +221,7 @@ var size = {
    * together eat the top of the content area. 56 is what `cursos` had arrived at
    * on its own, and it is the same reasoning as `control.iconSm`: the one admin
    * app of the five is denser than the four reading sites. See
-   * `docs/decisions.md` § 30.
+   * `docs/decisions/0.7.md` § 30.
    */
   navCompact: 56,
   /**

package/dist/chunk-HOADZ6GS.js

@@ -0,0 +1,72 @@
+import { gitHubGlyph, linkedInGlyph, xGlyph, instagramGlyph, discordGlyph, youTubeGlyph, rssGlyph, emailGlyph, newsletterGlyph, websiteGlyph, SOCIAL_STROKE_WIDTH, SOCIAL_VIEW_BOX } from './chunk-LXRGQKMG.js';
+import { __export } from './chunk-MLKGABMK.js';
+import { jsx } from 'react/jsx-runtime';
+
+// src/social/index.tsx
+var social_exports = {};
+__export(social_exports, {
+  Discord: () => Discord,
+  Email: () => Email,
+  GitHub: () => GitHub,
+  Instagram: () => Instagram,
+  LinkedIn: () => LinkedIn,
+  Newsletter: () => Newsletter,
+  Rss: () => Rss,
+  Website: () => Website,
+  X: () => X,
+  YouTube: () => YouTube
+});
+var SOLID = { fill: "currentColor", stroke: "none" };
+function drawShape(shape, index) {
+  if (shape.tag === "path") {
+    return /* @__PURE__ */ jsx("path", { d: shape.d, ...shape.solid ? SOLID : {} }, index);
+  }
+  if (shape.tag === "circle") {
+    return /* @__PURE__ */ jsx("circle", { cx: shape.cx, cy: shape.cy, r: shape.r, ...shape.solid ? SOLID : {} }, index);
+  }
+  return /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x: shape.x,
+      y: shape.y,
+      width: shape.width,
+      height: shape.height,
+      rx: shape.rx
+    },
+    index
+  );
+}
+function Glyph({ glyph, ...props }) {
+  const brand = glyph.kind === "brand";
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: SOCIAL_VIEW_BOX,
+      width: "1em",
+      height: "1em",
+      fill: brand ? "currentColor" : "none",
+      ...brand ? {} : {
+        stroke: "currentColor",
+        strokeWidth: SOCIAL_STROKE_WIDTH,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children: glyph.shapes.map(drawShape)
+    }
+  );
+}
+var GitHub = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: gitHubGlyph, ...props });
+var LinkedIn = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: linkedInGlyph, ...props });
+var X = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: xGlyph, ...props });
+var Instagram = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: instagramGlyph, ...props });
+var Discord = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: discordGlyph, ...props });
+var YouTube = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: youTubeGlyph, ...props });
+var Rss = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: rssGlyph, ...props });
+var Email = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: emailGlyph, ...props });
+var Newsletter = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: newsletterGlyph, ...props });
+var Website = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: websiteGlyph, ...props });
+
+export { Discord, Email, GitHub, Instagram, LinkedIn, Newsletter, Rss, Website, X, YouTube, social_exports };