@dirstack/ui 1.0.0

package/dist/components/card.js

@@ -0,0 +1,67 @@
+import { cn, variants } from "../lib/variants.js";
+import { SectionHeader } from "./section-header.js";
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/card.tsx
+/**
+* The one raised surface in the app: a white panel on the canvas, hairline border, 12px radius
+* and a whisper of shadow, clipping whatever sits in its corners. Every card, list card and
+* stat strip is this recipe — change it here and it changes everywhere.
+*/
+const cardSurfaceClasses = "overflow-clip rounded-xl border bg-card shadow-xs";
+const cardVariants = variants({
+	base: [cardSurfaceClasses, "relative flex flex-col hover:[&[href]]:z-10 hover:[&[href]]:border-ring"],
+	variants: { 
+	/**
+	* Separate the children with hairlines, for a card whose body is a run of rows or panels.
+	*/
+divided: { true: "divide-y" } }
+});
+const cardPanelVariants = variants({
+	base: "border-t first:border-t-0",
+	variants: { size: {
+		md: "p-4 md:p-6",
+		lg: "p-6 md:p-8"
+	} },
+	defaultVariants: { size: "md" }
+});
+/**
+* The card heading: `SectionHeader` preset to the card scale (an `h4` title, tight spacing). Pass
+* `size="panel"` for the smaller dashboard-panel scale.
+*/
+function CardHeader(props) {
+	return /* @__PURE__ */ jsx(SectionHeader, {
+		size: "card",
+		...props
+	});
+}
+function Card({ render, className, divided, ...props }) {
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: {
+			className: cn(cardVariants({
+				divided,
+				className
+			})),
+			...props
+		}
+	});
+}
+function CardPanel({ className, render, size, ...props }) {
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: {
+			className: cn(cardPanelVariants({
+				size,
+				className
+			})),
+			...props
+		}
+	});
+}
+//#endregion
+export { Card, CardHeader, CardPanel, cardSurfaceClasses };
+
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../src/components/card.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\"\nimport type { ComponentProps } from \"react\"\nimport { SectionHeader } from \"~/components/section-header\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\n/**\n * The one raised surface in the app: a white panel on the canvas, hairline border, 12px radius\n * and a whisper of shadow, clipping whatever sits in its corners. Every card, list card and\n * stat strip is this recipe — change it here and it changes everywhere.\n */\nexport const cardSurfaceClasses = \"overflow-clip rounded-xl border bg-card shadow-xs\"\n\nconst cardVariants = variants({\n  base: [\n    cardSurfaceClasses,\n    \"relative flex flex-col hover:[&[href]]:z-10 hover:[&[href]]:border-ring\",\n  ],\n\n  variants: {\n    /**\n     * Separate the children with hairlines, for a card whose body is a run of rows or panels.\n     */\n    divided: {\n      true: \"divide-y\",\n    },\n  },\n})\n\nconst cardPanelVariants = variants({\n  base: \"border-t first:border-t-0\",\n\n  variants: {\n    size: {\n      md: \"p-4 md:p-6\",\n      lg: \"p-6 md:p-8\",\n    },\n  },\n\n  defaultVariants: {\n    size: \"md\",\n  },\n})\n\n/**\n * The card heading: `SectionHeader` preset to the card scale (an `h4` title, tight spacing). Pass\n * `size=\"panel\"` for the smaller dashboard-panel scale.\n */\nfunction CardHeader(props: ComponentProps<typeof SectionHeader>) {\n  return <SectionHeader size=\"card\" {...props} />\n}\n\nexport type CardProps = useRender.ComponentProps<\"div\"> & VariantProps<typeof cardVariants>\n\nfunction Card({ render, className, divided, ...props }: CardProps) {\n  return useRender({\n    render,\n    defaultTagName: \"div\",\n    props: { className: cn(cardVariants({ divided, className })), ...props },\n  })\n}\n\nexport type CardPanelProps = useRender.ComponentProps<\"div\"> &\n  VariantProps<typeof cardPanelVariants>\n\nfunction CardPanel({ className, render, size, ...props }: CardPanelProps) {\n  return useRender({\n    render,\n    defaultTagName: \"div\",\n    props: {\n      className: cn(cardPanelVariants({ size, className })),\n      ...props,\n    },\n  })\n}\n\nexport { Card, CardHeader, CardPanel }\n"],"mappings":";;;;;;;;;;AAUA,MAAa,qBAAqB;AAElC,MAAM,eAAe,SAAS;CAC5B,MAAM,CACJ,oBACA,yEACF;CAEA,UAAU;;;;AAIR,SAAS,EACP,MAAM,WACR,EACF;AACF,CAAC;AAED,MAAM,oBAAoB,SAAS;CACjC,MAAM;CAEN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CAEA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;;;;AAMD,SAAS,WAAW,OAA6C;CAC/D,OAAO,oBAAC,eAAD;EAAe,MAAK;EAAO,GAAI;CAAQ,CAAA;AAChD;AAIA,SAAS,KAAK,EAAE,QAAQ,WAAW,SAAS,GAAG,SAAoB;CACjE,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO;GAAE,WAAW,GAAG,aAAa;IAAE;IAAS;GAAU,CAAC,CAAC;GAAG,GAAG;EAAM;CACzE,CAAC;AACH;AAKA,SAAS,UAAU,EAAE,WAAW,QAAQ,MAAM,GAAG,SAAyB;CACxE,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO;GACL,WAAW,GAAG,kBAAkB;IAAE;IAAM;GAAU,CAAC,CAAC;GACpD,GAAG;EACL;CACF,CAAC;AACH"}

package/dist/components/chart.d.ts

@@ -0,0 +1,32 @@
+import { ComponentProps, ComponentType, ReactNode } from "react";
+import { ResponsiveContainer, Tooltip, TooltipContentProps } from "recharts";
+//#region src/components/chart.d.ts
+export type ChartConfig = { [k in string]: {
+  label?: ReactNode;
+  icon?: ComponentType;
+} & ({
+  color?: string;
+  theme?: never;
+} | {
+  color?: never;
+  theme: {
+    light: string;
+    dark: string;
+  };
+}); };
+declare function ChartContainer({ id, className, children, config, ...props }: ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: ComponentProps<typeof ResponsiveContainer>["children"];
+}): import("react").JSX.Element;
+declare const ChartTooltip: typeof Tooltip;
+type ChartTooltipContentProps = Partial<TooltipContentProps> & ComponentProps<"div"> & {
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  indicator?: "line" | "dot" | "dashed";
+  nameKey?: string;
+  labelKey?: string;
+};
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }: ChartTooltipContentProps): import("react").JSX.Element | null;
+//#endregion
+export { ChartContainer, ChartTooltip, ChartTooltipContent };
+//# sourceMappingURL=chart.d.ts.map

package/dist/components/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","names":[],"sources":["../../src/components/chart.tsx"],"mappings":";;;YAQY,iBACT;EACC,QAAQ;EACR,OAAO;;EAEH;EAAgB;;EAChB;EAAe;IAAS;IAAe;;;iBAoBtC,iBACP,IACA,WACA,UACA,WACG,SACF;EACD,QAAQ;EACR,UAAU,sBAAsB;oBACjC,IAAA;cAmDK,qBAAY;KAGb,2BAA2B,QAAQ,uBACtC;EACE;EACA;EACA;EACA;EACA;;iBAGK,sBACP,QACA,SACA,WACA,WACA,WACA,eACA,OACA,gBACA,gBACA,WACA,OACA,SACA,YACC,2CAAwB,IAAA"}

package/dist/components/chart.js

@@ -0,0 +1,121 @@
+"use client";
+import { cn } from "../lib/variants.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useMemo } from "react";
+import { ResponsiveContainer, Tooltip } from "recharts";
+//#region src/components/chart.tsx
+const ChartContext = createContext(null);
+function useChart() {
+	const context = useContext(ChartContext);
+	if (!context) throw new Error("useChart must be used within a <ChartContainer />");
+	return context;
+}
+function ChartContainer({ id, className, children, config, ...props }) {
+	const uniqueId = useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value: { config },
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-chart": chartId,
+			className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none [&_[class*='recharts-zIndex-layer']]:outline-none", className),
+			...props,
+			children: [/* @__PURE__ */ jsx(ChartStyle, {
+				id: chartId,
+				config
+			}), /* @__PURE__ */ jsx(ResponsiveContainer, { children })]
+		})
+	});
+}
+/**
+* Publishes each series color as a `--color-<key>` custom property on the chart. One block, no
+* theme selectors: a `theme` entry becomes a `light-dark()` pair, resolved by `color-scheme`.
+*/
+function ChartStyle({ id, config }) {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+	if (!colorConfig.length) return null;
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `[data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+		return `  --color-${key}: ${itemConfig.theme ? `light-dark(${itemConfig.theme.light}, ${itemConfig.theme.dark})` : itemConfig.color};`;
+	}).join("\n")}
+}` } });
+}
+const ChartTooltip = Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+	const { config } = useChart();
+	const tooltipLabel = useMemo(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+		const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+		if (labelFormatter) return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	if (!active || !payload?.length) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-md border bg-popover px-2.5 py-1.5 text-popover-foreground text-xs shadow-md", className),
+		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1.5",
+			children: payload.map((item, index) => {
+				const key = `${nameKey || item.name || item.dataKey || "value"}`;
+				const itemConfig = getPayloadConfigFromPayload(config, item, key);
+				const indicatorColor = color || item.payload.fill || item.color;
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
+						className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+							"h-2.5 w-2.5": indicator === "dot",
+							"w-1": indicator === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+							"my-0.5": nestLabel && indicator === "dashed"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor
+						}
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("flex flex-1 justify-between gap-4 leading-none", nestLabel ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "grid gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: itemConfig?.label || item.name
+							})]
+						}), item.value != null && /* @__PURE__ */ jsx("span", {
+							className: "font-display font-medium tabular-nums",
+							children: item.value.toLocaleString()
+						})]
+					})] })
+				}, `${item.dataKey ?? item.name ?? index}`);
+			})
+		})]
+	});
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configLabelKey = key;
+	if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
+	else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
+	return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+//#endregion
+export { ChartContainer, ChartTooltip, ChartTooltipContent };
+
+//# sourceMappingURL=chart.js.map

package/dist/components/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":[],"sources":["../../src/components/chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ComponentProps, ComponentType, CSSProperties, ReactNode } from \"react\"\nimport { createContext, useContext, useId, useMemo } from \"react\"\nimport { ResponsiveContainer, Tooltip } from \"recharts\"\nimport type { TooltipContentProps } from \"recharts\"\nimport { cn } from \"~/lib/variants\"\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: ReactNode\n    icon?: ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: { light: string; dark: string } }\n  )\n}\n\ninterface ChartContextProps {\n  config: ChartConfig\n}\n\nconst ChartContext = createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: ComponentProps<typeof ResponsiveContainer>[\"children\"]\n}) {\n  const uniqueId = useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none [&_[class*='recharts-zIndex-layer']]:outline-none\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <ResponsiveContainer>{children}</ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\n/**\n * Publishes each series color as a `--color-<key>` custom property on the chart. One block, no\n * theme selectors: a `theme` entry becomes a `light-dark()` pair, resolved by `color-scheme`.\n */\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: `[data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color = itemConfig.theme\n      ? `light-dark(${itemConfig.theme.light}, ${itemConfig.theme.dark})`\n      : itemConfig.color\n\n    return `  --color-${key}: ${color};`\n  })\n  .join(\"\\n\")}\n}`,\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = Tooltip\n\n// recharts injects the payload props at render time, so they are optional to the caller.\ntype ChartTooltipContentProps = Partial<TooltipContentProps> &\n  ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: ChartTooltipContentProps) {\n  const { config } = useChart()\n\n  const tooltipLabel = useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>{labelFormatter(value, payload)}</div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-md border bg-popover px-2.5 py-1.5 text-popover-foreground text-xs shadow-md\",\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n          const indicatorColor = color || item.payload.fill || item.color\n\n          return (\n            <div\n              key={`${item.dataKey ?? item.name ?? index}`}\n              className={cn(\n                \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                indicator === \"dot\" && \"items-center\",\n              )}\n            >\n              {formatter && item?.value !== undefined && item.name ? (\n                formatter(item.value, item.name, item, index, item.payload)\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn(\n                          \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                          {\n                            \"h-2.5 w-2.5\": indicator === \"dot\",\n                            \"w-1\": indicator === \"line\",\n                            \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                              indicator === \"dashed\",\n                            \"my-0.5\": nestLabel && indicator === \"dashed\",\n                          },\n                        )}\n                        style={\n                          {\n                            \"--color-bg\": indicatorColor,\n                            \"--color-border\": indicatorColor,\n                          } as CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn(\n                      \"flex flex-1 justify-between gap-4 leading-none\",\n                      nestLabel ? \"items-end\" : \"items-center\",\n                    )}\n                  >\n                    <div className=\"grid gap-1.5\">\n                      {nestLabel ? tooltipLabel : null}\n                      <span className=\"text-muted-foreground\">\n                        {itemConfig?.label || item.name}\n                      </span>\n                    </div>\n                    {item.value != null && (\n                      <span className=\"font-display font-medium tabular-nums\">\n                        {item.value.toLocaleString()}\n                      </span>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload && typeof payload.payload === \"object\" && payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === \"string\") {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]\n}\n\nexport { ChartContainer, ChartTooltip, ChartTooltipContent }\n"],"mappings":"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"}

package/dist/components/copy-button.d.ts

@@ -0,0 +1,22 @@
+import { Button } from "./button.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/copy-button.d.ts
+type CopyButtonProps = Omit<ComponentProps<typeof Button>, "prefix" | "onClick" | "children"> & {
+  value: string;
+  /**
+   * Visible label. Left out, the button is icon-only with a tooltip.
+   */
+  label?: ReactNode;
+  /**
+   * What the label reads while the copied state is showing.
+   */
+  copiedLabel?: ReactNode;
+  tooltip?: ReactNode;
+};
+/**
+ * Copies `value` to the clipboard and swaps its icon to a check for a couple of seconds. Owns the
+ * tooltip so the copied state survives the tooltip closing on click.
+ */
+export declare function CopyButton({ value, label, copiedLabel, tooltip, ...props }: CopyButtonProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=copy-button.d.ts.map

package/dist/components/copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.d.ts","names":[],"sources":["../../src/components/copy-button.tsx"],"mappings":";;;KAyCK,kBAAkB,KAAK,sBAAsB;EAChD;;;;EAIA,QAAQ;;;;EAIR,cAAc;EACd,UAAU;;;;;;wBAOI,aACd,OACA,OACA,aACA,YACG,SACF,kCAAe,IAAA"}

package/dist/components/copy-button.js

@@ -0,0 +1,50 @@
+import { CheckIcon, CopyIcon } from "../lib/icons.js";
+import { Button } from "./button.js";
+import { Tooltip } from "./tooltip.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/copy-button.tsx
+/**
+* Copies text to the clipboard and flips `copied` to `true` for `timeout` ms, then back.
+* A tiny local stand-in for `@mantine/hooks`' `useClipboard`, so the package carries no
+* extra hook dependency.
+*/
+function useClipboard({ timeout = 2e3 } = {}) {
+	const [copied, setCopied] = useState(false);
+	const timer = useRef(void 0);
+	const copy = useCallback((value) => {
+		clearTimeout(timer.current);
+		navigator.clipboard.writeText(value).then(() => {
+			setCopied(true);
+			timer.current = setTimeout(() => setCopied(false), timeout);
+		}, () => setCopied(false));
+	}, [timeout]);
+	useEffect(() => () => clearTimeout(timer.current), []);
+	return {
+		copied,
+		copy
+	};
+}
+/**
+* Copies `value` to the clipboard and swaps its icon to a check for a couple of seconds. Owns the
+* tooltip so the copied state survives the tooltip closing on click.
+*/
+function CopyButton({ value, label, copiedLabel = "Copied", tooltip = label ? void 0 : "Copy to clipboard", ...props }) {
+	const clipboard = useClipboard({ timeout: 2e3 });
+	return /* @__PURE__ */ jsx(Tooltip, {
+		tooltip: tooltip && (clipboard.copied ? copiedLabel : tooltip),
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			size: "sm",
+			"aria-label": label ? void 0 : "Copy to clipboard",
+			prefix: clipboard.copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-success" }) : /* @__PURE__ */ jsx(CopyIcon, {}),
+			onClick: () => clipboard.copy(value),
+			...props,
+			children: label && (clipboard.copied ? copiedLabel : label)
+		})
+	});
+}
+//#endregion
+export { CopyButton };
+
+//# sourceMappingURL=copy-button.js.map

package/dist/components/copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.js","names":[],"sources":["../../src/components/copy-button.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\"\nimport { Button } from \"~/components/button\"\nimport { Tooltip } from \"~/components/tooltip\"\nimport { CheckIcon, CopyIcon } from \"~/lib/icons\"\n\n/**\n * Copies text to the clipboard and flips `copied` to `true` for `timeout` ms, then back.\n * A tiny local stand-in for `@mantine/hooks`' `useClipboard`, so the package carries no\n * extra hook dependency.\n */\nfunction useClipboard({ timeout = 2000 }: { timeout?: number } = {}) {\n  const [copied, setCopied] = useState(false)\n  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)\n\n  const copy = useCallback(\n    (value: string) => {\n      clearTimeout(timer.current)\n\n      navigator.clipboard.writeText(value).then(\n        () => {\n          setCopied(true)\n          timer.current = setTimeout(() => setCopied(false), timeout)\n        },\n        () => setCopied(false),\n      )\n    },\n    [timeout],\n  )\n\n  useEffect(() => () => clearTimeout(timer.current), [])\n\n  return { copied, copy }\n}\n\ntype CopyButtonProps = Omit<ComponentProps<typeof Button>, \"prefix\" | \"onClick\" | \"children\"> & {\n  value: string\n  /**\n   * Visible label. Left out, the button is icon-only with a tooltip.\n   */\n  label?: ReactNode\n  /**\n   * What the label reads while the copied state is showing.\n   */\n  copiedLabel?: ReactNode\n  tooltip?: ReactNode\n}\n\n/**\n * Copies `value` to the clipboard and swaps its icon to a check for a couple of seconds. Owns the\n * tooltip so the copied state survives the tooltip closing on click.\n */\nexport function CopyButton({\n  value,\n  label,\n  copiedLabel = \"Copied\",\n  tooltip = label ? undefined : \"Copy to clipboard\",\n  ...props\n}: CopyButtonProps) {\n  const clipboard = useClipboard({ timeout: 2000 })\n\n  return (\n    <Tooltip tooltip={tooltip && (clipboard.copied ? copiedLabel : tooltip)}>\n      <Button\n        type=\"button\"\n        size=\"sm\"\n        aria-label={label ? undefined : \"Copy to clipboard\"}\n        prefix={clipboard.copied ? <CheckIcon className=\"text-success\" /> : <CopyIcon />}\n        onClick={() => clipboard.copy(value)}\n        {...props}\n      >\n        {label && (clipboard.copied ? copiedLabel : label)}\n      </Button>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAiBA,SAAS,aAAa,EAAE,UAAU,QAA+B,CAAC,GAAG;CACnE,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,QAAQ,OAAsC,KAAA,CAAS;CAE7D,MAAM,OAAO,aACV,UAAkB;EACjB,aAAa,MAAM,OAAO;EAE1B,UAAU,UAAU,UAAU,KAAK,CAAC,CAAC,WAC7B;GACJ,UAAU,IAAI;GACd,MAAM,UAAU,iBAAiB,UAAU,KAAK,GAAG,OAAO;EAC5D,SACM,UAAU,KAAK,CACvB;CACF,GACA,CAAC,OAAO,CACV;CAEA,sBAAsB,aAAa,MAAM,OAAO,GAAG,CAAC,CAAC;CAErD,OAAO;EAAE;EAAQ;CAAK;AACxB;;;;;AAmBA,SAAgB,WAAW,EACzB,OACA,OACA,cAAc,UACd,UAAU,QAAQ,KAAA,IAAY,qBAC9B,GAAG,SACe;CAClB,MAAM,YAAY,aAAa,EAAE,SAAS,IAAK,CAAC;CAEhD,OACE,oBAAC,SAAD;EAAS,SAAS,YAAY,UAAU,SAAS,cAAc;EAC7D,UAAA,oBAAC,QAAD;GACE,MAAK;GACL,MAAK;GACL,cAAY,QAAQ,KAAA,IAAY;GAChC,QAAQ,UAAU,SAAS,oBAAC,WAAD,EAAW,WAAU,eAAgB,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;GAC/E,eAAe,UAAU,KAAK,KAAK;GACnC,GAAI;GAEH,UAAA,UAAU,UAAU,SAAS,cAAc;EACtC,CAAA;CACD,CAAA;AAEb"}

package/dist/components/copy-input.d.ts

@@ -0,0 +1,13 @@
+import { Input } from "./input.js";
+import { ComponentProps } from "react";
+//#region src/components/copy-input.d.ts
+type CopyInputProps = Omit<ComponentProps<typeof Input>, "value" | "readOnly"> & {
+  value: string;
+};
+/**
+ * Read-only input with a copy-to-clipboard button pinned to its right edge. Props go to the
+ * input itself so `ref`, `aria-label` and font classes land on the field.
+ */
+export declare function CopyInput({ value, className, ...props }: CopyInputProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=copy-input.d.ts.map

package/dist/components/copy-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-input.d.ts","names":[],"sources":["../../src/components/copy-input.tsx"],"mappings":";;;KAKK,iBAAiB,KAAK,sBAAsB;EAC/C;;;;;;wBAOc,YAAY,OAAO,cAAc,SAAS,iCAAc,IAAA"}

package/dist/components/copy-input.js

@@ -0,0 +1,28 @@
+import { cn } from "../lib/variants.js";
+import { CopyButton } from "./copy-button.js";
+import { Input } from "./input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/copy-input.tsx
+/**
+* Read-only input with a copy-to-clipboard button pinned to its right edge. Props go to the
+* input itself so `ref`, `aria-label` and font classes land on the field.
+*/
+function CopyInput({ value, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full",
+		children: [/* @__PURE__ */ jsx(Input, {
+			readOnly: true,
+			value,
+			className: cn("pr-10", className),
+			...props
+		}), /* @__PURE__ */ jsx(CopyButton, {
+			value,
+			variant: "ghost",
+			className: "absolute top-1/2 right-1 -translate-y-1/2"
+		})]
+	});
+}
+//#endregion
+export { CopyInput };
+
+//# sourceMappingURL=copy-input.js.map

package/dist/components/copy-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-input.js","names":[],"sources":["../../src/components/copy-input.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\"\nimport { CopyButton } from \"~/components/copy-button\"\nimport { Input } from \"~/components/input\"\nimport { cn } from \"~/lib/variants\"\n\ntype CopyInputProps = Omit<ComponentProps<typeof Input>, \"value\" | \"readOnly\"> & {\n  value: string\n}\n\n/**\n * Read-only input with a copy-to-clipboard button pinned to its right edge. Props go to the\n * input itself so `ref`, `aria-label` and font classes land on the field.\n */\nexport function CopyInput({ value, className, ...props }: CopyInputProps) {\n  return (\n    <div className=\"relative w-full\">\n      <Input readOnly value={value} className={cn(\"pr-10\", className)} {...props} />\n\n      <CopyButton\n        value={value}\n        variant=\"ghost\"\n        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n      />\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAaA,SAAgB,UAAU,EAAE,OAAO,WAAW,GAAG,SAAyB;CACxE,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,OAAD;GAAO,UAAA;GAAgB;GAAO,WAAW,GAAG,SAAS,SAAS;GAAG,GAAI;EAAQ,CAAA,GAE7E,oBAAC,YAAD;GACS;GACP,SAAQ;GACR,WAAU;EACX,CAAA,CACE;;AAET"}

package/dist/components/detail-row.d.ts

@@ -0,0 +1,93 @@
+import { VariantProps } from "../lib/variants.js";
+import { useRender } from "@base-ui/react/use-render";
+import { ReactNode } from "react";
+//#region src/components/detail-row.d.ts
+declare const detailRowVariants: import("tailwind-variants").TVReturnType<{
+  density: {
+    form: {
+      root: string;
+      label: string;
+      value: string;
+    };
+    comfortable: {
+      root: string;
+      label: string;
+      value: string;
+    };
+    compact: {
+      root: string;
+      label: string;
+      value: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  value: string;
+}, undefined, {
+  density: {
+    form: {
+      root: string;
+      label: string;
+      value: string;
+    };
+    comfortable: {
+      root: string;
+      label: string;
+      value: string;
+    };
+    compact: {
+      root: string;
+      label: string;
+      value: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  value: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  density: {
+    form: {
+      root: string;
+      label: string;
+      value: string;
+    };
+    comfortable: {
+      root: string;
+      label: string;
+      value: string;
+    };
+    compact: {
+      root: string;
+      label: string;
+      value: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  value: string;
+}>>;
+type DetailRowProps = useRender.ComponentProps<"div"> & VariantProps<typeof detailRowVariants> & {
+  /**
+   * Row label. Pass a `FormLabel` when the row wraps a form field so the label
+   * keeps its `htmlFor` wiring.
+   */
+  label: ReactNode;
+  description?: ReactNode;
+  /**
+   * Extra classes for the value column, e.g. `sm:items-end` to keep a button
+   * at its intrinsic width instead of stretching.
+   */
+  valueClassName?: string;
+};
+/**
+ * One "label plus value" line, in the three densities the app uses: `form` for an editable
+ * settings row (label and description left, control right), `comfortable` for a detail card's
+ * `<dl>`, `compact` for a sidebar timeline. Rows sit in a `divide-y` parent, which draws the
+ * hairlines between them.
+ */
+export declare function DetailRow({ density, label, description, valueClassName, className, children, render, ...props }: DetailRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//# sourceMappingURL=detail-row.d.ts.map

package/dist/components/detail-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-row.d.ts","names":[],"sources":["../../src/components/detail-row.tsx"],"mappings":";;;;cAMM,+CAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgClB,iBAAiB,UAAU,wBAC9B,oBAAoB;;;;;EAKlB,OAAO;EACP,cAAc;;;;;EAKd;;;;;;;;wBASY,YACd,SACA,OACA,aACA,gBACA,WACA,UACA,WACG,SACF,iCAAc,+CAAA"}

package/dist/components/detail-row.js

@@ -0,0 +1,69 @@
+import { variants } from "../lib/variants.js";
+import { slot } from "../lib/slot.js";
+import "../lib/classes.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { isValidElement } from "react";
+//#region src/components/detail-row.tsx
+const detailRowVariants = variants({
+	slots: {
+		root: "",
+		label: "",
+		value: ""
+	},
+	variants: { density: {
+		form: {
+			root: "grid items-start gap-x-8 gap-y-3 py-5 sm:grid-cols-[minmax(0,1fr)_minmax(0,20rem)]",
+			label: "flex min-w-0 flex-col gap-1",
+			value: "flex w-full min-w-0 flex-col gap-2 sm:justify-self-end"
+		},
+		comfortable: {
+			root: "grid items-start gap-x-8 gap-y-1 py-3 sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)]",
+			label: "text-muted-foreground text-sm",
+			value: "min-w-0 text-sm"
+		},
+		compact: {
+			root: "flex items-baseline justify-between gap-4 py-2 first:pt-0 last:pb-0",
+			label: "text-muted-foreground",
+			value: "tabular-nums"
+		}
+	} },
+	defaultVariants: { density: "comfortable" }
+});
+/**
+* One "label plus value" line, in the three densities the app uses: `form` for an editable
+* settings row (label and description left, control right), `comfortable` for a detail card's
+* `<dl>`, `compact` for a sidebar timeline. Rows sit in a `divide-y` parent, which draws the
+* hairlines between them.
+*/
+function DetailRow({ density = "comfortable", label, description, valueClassName, className, children, render, ...props }) {
+	const styles = detailRowVariants({ density });
+	const isForm = density === "form";
+	const LabelTag = isForm ? "div" : "dt";
+	const ValueTag = isForm ? "div" : "dd";
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: {
+			className: styles.root({ className }),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(LabelTag, {
+				className: styles.label(),
+				children: [isForm ? /* @__PURE__ */ jsx("div", {
+					className: "font-medium text-sm",
+					children: label
+				}) : label, description && (isValidElement(description) ? slot(description, { className: "text-pretty text-muted-foreground text-sm" }) : /* @__PURE__ */ jsx("p", {
+					className: "text-pretty text-muted-foreground text-sm",
+					children: description
+				}))]
+			}), /* @__PURE__ */ jsx(ValueTag, {
+				className: styles.value({ className: valueClassName }),
+				children
+			})] }),
+			...props
+		}
+	});
+}
+//#endregion
+export { DetailRow };
+
+//# sourceMappingURL=detail-row.js.map

package/dist/components/detail-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-row.js","names":[],"sources":["../../src/components/detail-row.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\"\nimport { isValidElement, type ReactNode } from \"react\"\nimport { descriptionClasses } from \"~/lib/classes\"\nimport { slot } from \"~/lib/slot\"\nimport { variants, type VariantProps } from \"~/lib/variants\"\n\nconst detailRowVariants = variants({\n  slots: {\n    root: \"\",\n    label: \"\",\n    value: \"\",\n  },\n\n  variants: {\n    density: {\n      form: {\n        root: \"grid items-start gap-x-8 gap-y-3 py-5 sm:grid-cols-[minmax(0,1fr)_minmax(0,20rem)]\",\n        label: \"flex min-w-0 flex-col gap-1\",\n        value: \"flex w-full min-w-0 flex-col gap-2 sm:justify-self-end\",\n      },\n      comfortable: {\n        root: \"grid items-start gap-x-8 gap-y-1 py-3 sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)]\",\n        label: \"text-muted-foreground text-sm\",\n        value: \"min-w-0 text-sm\",\n      },\n      compact: {\n        root: \"flex items-baseline justify-between gap-4 py-2 first:pt-0 last:pb-0\",\n        label: \"text-muted-foreground\",\n        value: \"tabular-nums\",\n      },\n    },\n  },\n\n  defaultVariants: {\n    density: \"comfortable\",\n  },\n})\n\ntype DetailRowProps = useRender.ComponentProps<\"div\"> &\n  VariantProps<typeof detailRowVariants> & {\n    /**\n     * Row label. Pass a `FormLabel` when the row wraps a form field so the label\n     * keeps its `htmlFor` wiring.\n     */\n    label: ReactNode\n    description?: ReactNode\n    /**\n     * Extra classes for the value column, e.g. `sm:items-end` to keep a button\n     * at its intrinsic width instead of stretching.\n     */\n    valueClassName?: string\n  }\n\n/**\n * One \"label plus value\" line, in the three densities the app uses: `form` for an editable\n * settings row (label and description left, control right), `comfortable` for a detail card's\n * `<dl>`, `compact` for a sidebar timeline. Rows sit in a `divide-y` parent, which draws the\n * hairlines between them.\n */\nexport function DetailRow({\n  density = \"comfortable\",\n  label,\n  description,\n  valueClassName,\n  className,\n  children,\n  render,\n  ...props\n}: DetailRowProps) {\n  const styles = detailRowVariants({ density })\n  const isForm = density === \"form\"\n  const LabelTag = isForm ? \"div\" : \"dt\"\n  const ValueTag = isForm ? \"div\" : \"dd\"\n\n  return useRender({\n    render,\n    defaultTagName: \"div\",\n    props: {\n      className: styles.root({ className }),\n      children: (\n        <>\n          <LabelTag className={styles.label()}>\n            {isForm ? <div className=\"font-medium text-sm\">{label}</div> : label}\n\n            {description &&\n              (isValidElement(description) ? (\n                slot(description, { className: descriptionClasses })\n              ) : (\n                <p className={descriptionClasses}>{description}</p>\n              ))}\n          </LabelTag>\n\n          <ValueTag className={styles.value({ className: valueClassName })}>{children}</ValueTag>\n        </>\n      ),\n      ...props,\n    },\n  })\n}\n"],"mappings":";;;;;;;AAMA,MAAM,oBAAoB,SAAS;CACjC,OAAO;EACL,MAAM;EACN,OAAO;EACP,OAAO;CACT;CAEA,UAAU,EACR,SAAS;EACP,MAAM;GACJ,MAAM;GACN,OAAO;GACP,OAAO;EACT;EACA,aAAa;GACX,MAAM;GACN,OAAO;GACP,OAAO;EACT;EACA,SAAS;GACP,MAAM;GACN,OAAO;GACP,OAAO;EACT;CACF,EACF;CAEA,iBAAiB,EACf,SAAS,cACX;AACF,CAAC;;;;;;;AAuBD,SAAgB,UAAU,EACxB,UAAU,eACV,OACA,aACA,gBACA,WACA,UACA,QACA,GAAG,SACc;CACjB,MAAM,SAAS,kBAAkB,EAAE,QAAQ,CAAC;CAC5C,MAAM,SAAS,YAAY;CAC3B,MAAM,WAAW,SAAS,QAAQ;CAClC,MAAM,WAAW,SAAS,QAAQ;CAElC,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO;GACL,WAAW,OAAO,KAAK,EAAE,UAAU,CAAC;GACpC,UACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,UAAD;IAAU,WAAW,OAAO,MAAM;IAAlC,UAAA,CACG,SAAS,oBAAC,OAAD;KAAK,WAAU;KAAuB,UAAA;IAAW,CAAA,IAAI,OAE9D,gBACE,eAAe,WAAW,IACzB,KAAK,aAAa,EAAE,WAAA,4CAA8B,CAAC,IAEnD,oBAAC,KAAD;KAAG,WAAA;KAAgC,UAAA;IAAe,CAAA,EAE9C;GAEV,CAAA,GAAA,oBAAC,UAAD;IAAU,WAAW,OAAO,MAAM,EAAE,WAAW,eAAe,CAAC;IAAI;GAAmB,CAAA,CACtF,EAAA,CAAA;GAEJ,GAAG;EACL;CACF,CAAC;AACH"}