@hewnui/ui 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Himanshu Kumar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,70 @@
-# Temporary Holding Version
+# @hewnui/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Accessible React components built on React Aria, Tailwind v4 and Motion: 46 application UI components with six curated themes. Part of [Hewn](https://hewnui.dev).
+
+## Install
+
+```bash
+pnpm add @hewnui/ui react react-dom react-aria-components motion
+```
+
+| Peer | Range |
+|---|---|
+| react / react-dom | ^19.2.7 |
+| react-aria-components | ^1.19.0 |
+| motion | ^12.42.2 |
+
+Prefer to own the source?
+
+```bash
+npx hewnui@latest add button
+```
+
+## Setup (Tailwind v4)
+
+```css
+@import "tailwindcss";
+@import "@hewnui/themes/tokens.css";
+@import "@hewnui/themes/motion.css";
+@import "@hewnui/themes/radius.css";
+@import "@hewnui/themes/glass.css";
+@source "../node_modules/@hewnui/ui/dist/**/*.js";
+```
+
+Use `@tailwindcss/postcss`. The Tailwind v3 PostCSS plugin is not supported.
+
+## Usage
+
+```tsx
+import { Button, TextField } from "@hewnui/ui";
+
+<TextField
+  label="Workspace slug"
+  description="Lowercase letters, numbers, hyphens."
+  isInvalid={!valid}
+  errorMessage="That slug is taken."
+/>
+<Button onPress={save}>Save workspace</Button>
+```
+
+Subpath imports:
+
+```tsx
+import { DataTable } from "@hewnui/ui/data-table";
+```
+
+## Providers
+
+| Provider | Values |
+|---|---|
+| `ThemeProvider` (required) | `forest`, `tide`, `graphite`, `dune`, `clay`, `ember` |
+| `MaterialProvider` | `solid`, `glass` |
+| `RadiusProvider` | `sharp`, `soft`, `rounded`, `pill` |
+| `MotionProvider` | `full` (default), `reduced`, `off`. Legacy `"on"` maps to `"full"`. OS `prefers-reduced-motion` caps the effective mode at `reduced`. |
+| `ToastProvider` | — |
+
+Docs and live examples: https://hewnui.dev/docs/components
+
+## License
+
+MIT — see [LICENSE](./LICENSE).

package/dist/chart/axes.d.ts

@@ -0,0 +1,31 @@
+type AxisScale = {
+    ticks?: (count?: number) => number[];
+    domain: () => Array<number | string>;
+    bandwidth?: () => number;
+    (value: number | string): number | undefined;
+};
+export declare function GridLines({ x, y, width, height, pad, }: {
+    x: AxisScale;
+    y: AxisScale;
+    width: number;
+    height: number;
+    pad: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AxisLabels({ x, y, height, pad, xIsBand, }: {
+    x: AxisScale;
+    y: AxisScale;
+    height: number;
+    pad: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    xIsBand?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/chart/axes.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatTick } from "./status.js";
+export function GridLines({ x, y, width, height, pad, }) {
+    const yTicks = y.ticks?.(4) ?? [];
+    return (_jsxs("g", { "aria-hidden": true, children: [yTicks.map((tick) => {
+                const py = y(tick) ?? 0;
+                return (_jsx("line", { x1: pad.left, x2: width - pad.right, y1: py, y2: py, stroke: "var(--kp-border)", strokeWidth: 1 }, `y-${tick}`));
+            }), _jsx("line", { x1: pad.left, x2: pad.left, y1: pad.top, y2: height - pad.bottom, stroke: "var(--kp-border)", strokeWidth: 1 }), _jsx("line", { x1: pad.left, x2: width - pad.right, y1: height - pad.bottom, y2: height - pad.bottom, stroke: "var(--kp-border)", strokeWidth: 1 })] }));
+}
+export function AxisLabels({ x, y, height, pad, xIsBand, }) {
+    const yTicks = y.ticks?.(4) ?? [];
+    const xDomain = x.domain();
+    const xLabels = xIsBand || xDomain.length <= 8
+        ? xDomain
+        : [xDomain[0], xDomain[Math.floor(xDomain.length / 2)], xDomain.at(-1)].filter((v) => v !== undefined);
+    return (_jsxs("g", { "aria-hidden": true, className: "tabular-nums", children: [yTicks.map((tick) => (_jsx("text", { x: pad.left - 8, y: (y(tick) ?? 0) + 4, textAnchor: "end", className: "fill-muted-foreground", style: { fontSize: 10, fontFamily: "var(--kp-font-mono)" }, children: formatTick(tick) }, `yl-${tick}`))), xLabels.map((label) => {
+                const px = (x(label) ?? 0) + (x.bandwidth?.() ?? 0) / 2;
+                return (_jsx("text", { x: px, y: height - pad.bottom + 16, textAnchor: "middle", className: "fill-muted-foreground", style: { fontSize: 10, fontFamily: "var(--kp-font-mono)" }, children: formatTick(label) }, `xl-${String(label)}`));
+            })] }));
+}

package/dist/chart/colors.d.ts

@@ -0,0 +1 @@
+export declare function seriesColor(index: number, override?: string): string;

package/dist/chart/colors.js

@@ -0,0 +1,13 @@
+/** Theme-token-driven series colors — accent first, then semantic hues. */
+const SERIES_COLORS = [
+    "var(--kp-accent)",
+    "var(--kp-danger)",
+    "color-mix(in oklch, var(--kp-accent) 55%, var(--kp-foreground))",
+    "color-mix(in oklch, var(--kp-muted-foreground) 70%, var(--kp-accent))",
+    "color-mix(in oklch, var(--kp-accent) 35%, var(--kp-border))",
+];
+export function seriesColor(index, override) {
+    if (override)
+        return override;
+    return SERIES_COLORS[index % SERIES_COLORS.length];
+}

package/dist/chart/frame.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export declare function ChartFrame({ className, width, height, summary, children, status, errorMessage, 
+/** When true, SVG uses role=group so focusable point controls are not nested in role=img. */
+interactive, }: {
+    className?: string | undefined;
+    width: number;
+    height: number;
+    summary: string;
+    children?: ReactNode;
+    status?: "ready" | "loading" | "empty" | "error";
+    errorMessage?: string;
+    interactive?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/chart/frame.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.js";
+import { Skeleton } from "../components/skeleton/index.js";
+export function ChartFrame({ className, width, height, summary, children, status = "ready", errorMessage = "Could not render chart.", 
+/** When true, SVG uses role=group so focusable point controls are not nested in role=img. */
+interactive = false, }) {
+    if (status === "loading") {
+        return (_jsx("div", { className: cn("w-full", className), style: { width, height }, role: "status", "aria-label": "Loading chart", children: _jsx(Skeleton, { className: "h-full w-full rounded-[var(--kp-radius-md)]" }) }));
+    }
+    if (status === "empty") {
+        return (_jsx("div", { className: cn("flex items-center justify-center rounded-[var(--kp-radius-md)] border border-dashed border-border bg-muted/30 text-sm text-muted-foreground", className), style: { width, height }, role: "status", children: "No data to display" }));
+    }
+    if (status === "error") {
+        return (_jsx("div", { className: cn("flex items-center justify-center rounded-[var(--kp-radius-md)] border border-danger/40 bg-danger/5 text-sm text-danger", className), style: { width, height }, role: "alert", children: errorMessage }));
+    }
+    return (_jsxs("figure", { className: cn("m-0 w-full", className), style: { maxWidth: width }, children: [_jsx("svg", { role: interactive ? "group" : "img", "aria-label": summary, width: width, height: height, viewBox: `0 0 ${width} ${height}`, className: "overflow-visible", children: children }), _jsx("figcaption", { className: "sr-only", children: summary })] }));
+}

package/dist/chart/interaction.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import type { ChartDatum, ChartSeries } from "./types.js";
+export type ChartHover = {
+    seriesId: string;
+    label: string;
+    point: ChartDatum;
+    color: string;
+    px: number;
+    py: number;
+} | null;
+type ChartInteractionValue = {
+    hover: ChartHover;
+    setHover: (next: ChartHover) => void;
+    series: ChartSeries[];
+};
+export declare function ChartInteractionProvider({ series, children, }: {
+    series: ChartSeries[];
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useChartInteraction(): ChartInteractionValue;
+export declare function ChartTooltip(): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/chart/interaction.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState, } from "react";
+const ChartInteractionContext = createContext(null);
+export function ChartInteractionProvider({ series, children, }) {
+    const [hover, setHover] = useState(null);
+    const value = useMemo(() => ({ hover, setHover, series }), [hover, series]);
+    return (_jsx(ChartInteractionContext.Provider, { value: value, children: children }));
+}
+export function useChartInteraction() {
+    const ctx = useContext(ChartInteractionContext);
+    if (!ctx) {
+        throw new Error("Chart.Tooltip must be used within a chart root");
+    }
+    return ctx;
+}
+export function ChartTooltip() {
+    const { hover } = useChartInteraction();
+    if (!hover)
+        return null;
+    return (_jsxs("div", { className: "pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-[calc(100%+8px)] rounded-[var(--kp-radius-sm)] border border-border bg-surface-raised px-2 py-1 text-xs shadow-[0_8px_24px_color-mix(in_oklch,var(--kp-foreground)_12%,transparent)]", style: { left: hover.px, top: hover.py }, role: "tooltip", children: [_jsx("p", { className: "font-medium text-foreground", children: hover.label }), _jsxs("p", { className: "font-mono tabular-nums text-muted-foreground", children: [String(hover.point.x), " \u00B7 ", hover.point.y] })] }));
+}

package/dist/chart/path.d.ts

@@ -0,0 +1,10 @@
+import type { ChartDatum } from "./types.js";
+type XScale = {
+    (value: number | string): number | undefined;
+};
+type YScale = {
+    (value: number): number | undefined;
+};
+export declare function linePath(data: ChartDatum[], x: XScale, y: YScale, xIsNumeric: boolean): string;
+export declare function areaPath(data: ChartDatum[], x: XScale, y: YScale, xIsNumeric: boolean, y0: number): string;
+export {};

package/dist/chart/path.js

@@ -0,0 +1,24 @@
+import { area as d3Area, line as d3Line, curveMonotoneX } from "d3-shape";
+export function linePath(data, x, y, xIsNumeric) {
+    const generator = d3Line()
+        .x((d) => {
+        const raw = xIsNumeric ? d.x : String(d.x);
+        return x(raw) ?? 0;
+    })
+        .y((d) => y(d.y) ?? 0)
+        .curve(curveMonotoneX)
+        .defined((d) => Number.isFinite(d.y));
+    return generator(data) ?? "";
+}
+export function areaPath(data, x, y, xIsNumeric, y0) {
+    const generator = d3Area()
+        .x((d) => {
+        const raw = xIsNumeric ? d.x : String(d.x);
+        return x(raw) ?? 0;
+    })
+        .y0(y0)
+        .y1((d) => y(d.y) ?? y0)
+        .curve(curveMonotoneX)
+        .defined((d) => Number.isFinite(d.y));
+    return generator(data) ?? "";
+}

package/dist/chart/scales.d.ts

@@ -0,0 +1,34 @@
+import type { ChartDatum, ChartSeries, ChartSize } from "./types.js";
+export declare function flattenSeries(series: ChartSeries[]): ChartDatum[];
+export declare function xDomain(data: ChartDatum[]): Array<number | string>;
+export declare function yDomain(data: ChartDatum[], includeZero?: boolean): [number, number];
+export declare function createLinearScales(data: ChartDatum[], size: ChartSize, opts?: {
+    includeZero?: boolean;
+}): {
+    x: import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScalePoint<string>;
+    y: import("d3-scale").ScaleLinear<number, number, never>;
+    pad: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    innerW: number;
+    innerH: number;
+    xIsNumeric: boolean;
+};
+export declare function createBandScales(data: ChartDatum[], size: ChartSize, opts?: {
+    includeZero?: boolean;
+}): {
+    x: import("d3-scale").ScaleBand<string>;
+    y: import("d3-scale").ScaleLinear<number, number, never>;
+    pad: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    innerW: number;
+    innerH: number;
+    categories: string[];
+};

package/dist/chart/scales.js

@@ -0,0 +1,66 @@
+import { extent, max, min } from "d3-array";
+import { scaleBand, scaleLinear, scalePoint } from "d3-scale";
+import { DEFAULT_PADDING } from "./types.js";
+export function flattenSeries(series) {
+    return series.flatMap((item) => item.data);
+}
+export function xDomain(data) {
+    const values = data.map((d) => d.x);
+    const allNumeric = values.every((v) => typeof v === "number");
+    if (allNumeric) {
+        const [lo, hi] = extent(values);
+        return [lo, hi];
+    }
+    return [...new Set(values.map(String))];
+}
+export function yDomain(data, includeZero = false) {
+    const ys = data.map((d) => d.y);
+    let lo = min(ys) ?? 0;
+    let hi = max(ys) ?? 1;
+    if (includeZero) {
+        lo = Math.min(0, lo);
+        hi = Math.max(0, hi);
+    }
+    if (lo === hi) {
+        lo -= 1;
+        hi += 1;
+    }
+    return [lo, hi];
+}
+export function createLinearScales(data, size, opts) {
+    const pad = { ...DEFAULT_PADDING, ...size.padding };
+    const innerW = Math.max(1, size.width - pad.left - pad.right);
+    const innerH = Math.max(1, size.height - pad.top - pad.bottom);
+    const xd = xDomain(data);
+    const yd = yDomain(data, opts?.includeZero);
+    const xIsNumeric = xd.length === 2 && typeof xd[0] === "number";
+    const x = xIsNumeric
+        ? scaleLinear()
+            .domain(xd)
+            .range([pad.left, pad.left + innerW])
+        : scalePoint()
+            .domain(xd.map(String))
+            .range([pad.left, pad.left + innerW])
+            .padding(0.2);
+    const y = scaleLinear()
+        .domain(yd)
+        .nice()
+        .range([pad.top + innerH, pad.top]);
+    return { x, y, pad, innerW, innerH, xIsNumeric };
+}
+export function createBandScales(data, size, opts) {
+    const pad = { ...DEFAULT_PADDING, ...size.padding };
+    const innerW = Math.max(1, size.width - pad.left - pad.right);
+    const innerH = Math.max(1, size.height - pad.top - pad.bottom);
+    const categories = [...new Set(data.map((d) => String(d.x)))];
+    const yd = yDomain(data, opts?.includeZero ?? true);
+    const x = scaleBand()
+        .domain(categories)
+        .range([pad.left, pad.left + innerW])
+        .padding(0.24);
+    const y = scaleLinear()
+        .domain(yd)
+        .nice()
+        .range([pad.top + innerH, pad.top]);
+    return { x, y, pad, innerW, innerH, categories };
+}

package/dist/chart/status.d.ts

@@ -0,0 +1,3 @@
+import type { ChartDatum, ChartSeries, ChartStatus } from "./types.js";
+export declare function resolveStatus(series: ChartSeries[] | ChartDatum[], status?: ChartStatus): ChartStatus;
+export declare function formatTick(value: number | string): string;

package/dist/chart/status.js

@@ -0,0 +1,15 @@
+export function resolveStatus(series, status) {
+    if (status)
+        return status;
+    const points = Array.isArray(series) && series.length > 0 && "data" in series[0]
+        ? series.flatMap((s) => s.data)
+        : series;
+    return points.length === 0 ? "empty" : "ready";
+}
+export function formatTick(value) {
+    if (typeof value === "string")
+        return value;
+    if (Number.isInteger(value))
+        return String(value);
+    return value.toFixed(1);
+}

package/dist/chart/types.d.ts

@@ -0,0 +1,34 @@
+export type ChartDatum = {
+    x: number | string;
+    y: number;
+};
+export type ChartSeries = {
+    id: string;
+    label: string;
+    data: ChartDatum[];
+    /** Optional CSS color; defaults to accent ramp. */
+    color?: string;
+};
+export type ChartStatus = "ready" | "loading" | "empty" | "error";
+export type DonutSlice = {
+    id: string;
+    label: string;
+    value: number;
+    color?: string;
+};
+export type ChartSize = {
+    width: number;
+    height: number;
+    padding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+};
+export declare const DEFAULT_PADDING: {
+    readonly top: 12;
+    readonly right: 12;
+    readonly bottom: 28;
+    readonly left: 36;
+};

package/dist/chart/types.js

@@ -0,0 +1,6 @@
+export const DEFAULT_PADDING = {
+    top: 12,
+    right: 12,
+    bottom: 28,
+    left: 36,
+};

package/dist/components/area-chart/area-chart.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { ChartTooltip } from "../../chart/interaction.js";
+import type { ChartSeries, ChartStatus } from "../../chart/types.js";
+export type AreaChartProps = {
+    series: ChartSeries[];
+    summary: string;
+    className?: string;
+    width?: number;
+    height?: number;
+    status?: ChartStatus;
+    children?: ReactNode;
+};
+declare function AreaChartRoot({ series, summary, className, width, height, status, children, }: AreaChartProps): import("react/jsx-runtime").JSX.Element;
+export declare const AreaChart: typeof AreaChartRoot & {
+    Tooltip: typeof ChartTooltip;
+};
+export {};

package/dist/components/area-chart/area-chart.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { drawIn, fadeIn } from "@hewnui/motion";
+import { m } from "motion/react";
+import { AxisLabels, GridLines } from "../../chart/axes.js";
+import { seriesColor } from "../../chart/colors.js";
+import { ChartFrame } from "../../chart/frame.js";
+import { ChartInteractionProvider, ChartTooltip, useChartInteraction, } from "../../chart/interaction.js";
+import { areaPath, linePath } from "../../chart/path.js";
+import { createLinearScales, flattenSeries } from "../../chart/scales.js";
+import { resolveStatus } from "../../chart/status.js";
+import { useMotionMode } from "../../providers/motion-provider.js";
+function AreaChartRoot({ series, summary, className, width = 480, height = 240, status, children, }) {
+    const resolved = resolveStatus(series, status);
+    if (resolved !== "ready") {
+        return (_jsx(ChartFrame, { className: className, width: width, height: height, summary: summary, status: resolved }));
+    }
+    return (_jsx(ChartInteractionProvider, { series: series, children: _jsxs("div", { className: "relative", style: { maxWidth: width }, children: [_jsx(AreaChartSvg, { series: series, summary: summary, className: className, width: width, height: height }), children] }) }));
+}
+function AreaChartSvg({ series, summary, className, width, height, }) {
+    const { motionEnabled } = useMotionMode();
+    const { setHover } = useChartInteraction();
+    const flat = flattenSeries(series);
+    const { x, y, pad, xIsNumeric } = createLinearScales(flat, { width, height }, { includeZero: true });
+    const baseline = y(0) ?? height - pad.bottom;
+    return (_jsxs(ChartFrame, { className: className, width: width, height: height, summary: summary, interactive: true, children: [_jsx(GridLines, { x: x, y: y, width: width, height: height, pad: pad }), _jsx(AxisLabels, { x: x, y: y, height: height, pad: pad }), series.map((item, index) => {
+                const color = seriesColor(index, item.color);
+                const fill = areaPath(item.data, x, y, xIsNumeric, baseline);
+                const stroke = linePath(item.data, x, y, xIsNumeric);
+                return (_jsxs("g", { children: [motionEnabled ? (_jsx(m.path, { d: fill, fill: color, fillOpacity: 0.18, stroke: "none", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: fadeIn })) : (_jsx("path", { d: fill, fill: color, fillOpacity: 0.18, stroke: "none" })), motionEnabled ? (_jsx(m.path, { d: stroke, fill: "none", stroke: color, strokeWidth: 2, initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: drawIn })) : (_jsx("path", { d: stroke, fill: "none", stroke: color, strokeWidth: 2 })), item.data.map((point) => {
+                            const raw = xIsNumeric ? point.x : String(point.x);
+                            const px = x(raw) ?? 0;
+                            const py = y(point.y) ?? 0;
+                            return (_jsx("circle", { cx: px, cy: py, r: 4, fill: color, className: "cursor-pointer opacity-0 transition-opacity duration-[var(--kp-motion-duration-fast)] hover:opacity-100 focus-visible:opacity-100", tabIndex: 0, role: "button", "aria-label": `${item.label}: ${String(point.x)}, ${point.y}`, onFocus: () => setHover({
+                                    seriesId: item.id,
+                                    label: item.label,
+                                    point,
+                                    color,
+                                    px,
+                                    py,
+                                }), onBlur: () => setHover(null), onMouseEnter: () => setHover({
+                                    seriesId: item.id,
+                                    label: item.label,
+                                    point,
+                                    color,
+                                    px,
+                                    py,
+                                }), onMouseLeave: () => setHover(null) }, `${item.id}-${String(point.x)}`));
+                        })] }, item.id));
+            })] }));
+}
+export const AreaChart = Object.assign(AreaChartRoot, {
+    Tooltip: ChartTooltip,
+});

package/dist/components/area-chart/index.d.ts

@@ -0,0 +1 @@
+export { AreaChart, type AreaChartProps } from "./area-chart.js";

package/dist/components/area-chart/index.js

@@ -0,0 +1 @@
+export { AreaChart } from "./area-chart.js";

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,2 @@
+import type { BadgeProps } from "./badge.types.js";
+export declare function Badge({ children, className, color, size, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/badge.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { badgeClassName, dotClassName } from "./badge.styles.js";
+export function Badge({ children, className, color = "accent", size = "md", variant = "soft", ...props }) {
+    return (_jsxs("span", { className: badgeClassName({ className, color, size, variant }), ...props, children: [variant === "dot" ? (_jsx("span", { "aria-hidden": true, className: dotClassName(color) })) : null, children] }));
+}

package/dist/components/badge/badge.styles.d.ts

@@ -0,0 +1,8 @@
+import type { BadgeColor, BadgeSize, BadgeVariant } from "./badge.types.js";
+export declare function badgeClassName({ className, color, size, variant, }: {
+    className?: string | undefined;
+    color?: BadgeColor | undefined;
+    size?: BadgeSize | undefined;
+    variant?: BadgeVariant | undefined;
+}): string;
+export declare function dotClassName(color?: BadgeColor): string;

package/dist/components/badge/badge.styles.js

@@ -0,0 +1,57 @@
+import { cn } from "../../utils/cn.js";
+const colorStyles = {
+    accent: {
+        solid: "bg-accent text-accent-foreground",
+        soft: "bg-[color-mix(in_oklch,var(--kp-accent)_16%,transparent)] text-accent font-semibold",
+        outline: "border-[color-mix(in_oklch,var(--kp-accent)_40%,transparent)] text-accent",
+        dotBg: "bg-accent",
+    },
+    muted: {
+        solid: "bg-muted text-foreground",
+        soft: "bg-[color-mix(in_oklch,var(--kp-foreground)_10%,transparent)] text-foreground",
+        outline: "border-[color-mix(in_oklch,var(--kp-foreground)_20%,transparent)] text-foreground",
+        dotBg: "bg-foreground",
+    },
+    danger: {
+        solid: "bg-danger text-danger-foreground",
+        // Soft fills are pale — mix toward black so label text clears WCAG AA.
+        soft: "bg-danger-subtle text-[color-mix(in_oklch,var(--kp-danger)_58%,black)] font-semibold",
+        outline: "border-danger-border text-[color-mix(in_oklch,var(--kp-danger)_58%,black)]",
+        dotBg: "bg-danger",
+    },
+    success: {
+        solid: "bg-success text-success-foreground",
+        soft: "bg-success-subtle text-[color-mix(in_oklch,var(--kp-success)_58%,black)] font-semibold",
+        outline: "border-success-border text-[color-mix(in_oklch,var(--kp-success)_58%,black)]",
+        dotBg: "bg-success",
+    },
+    warning: {
+        solid: "bg-warning text-warning-foreground",
+        soft: "bg-warning-subtle text-warning-foreground font-semibold",
+        outline: "border-warning-border text-warning-foreground",
+        dotBg: "bg-warning",
+    },
+};
+const sizes = {
+    sm: "px-2 py-0.5 text-xs rounded-full gap-1 min-h-5",
+    md: "px-2.5 py-0.5 text-xs font-medium rounded-full gap-1.5 min-h-6",
+    lg: "px-3 py-1 text-sm font-medium rounded-full gap-2 min-h-7",
+};
+export function badgeClassName({ className, color = "accent", size = "md", variant = "soft", }) {
+    const palette = colorStyles[color];
+    let variantStyle = palette.soft;
+    if (variant === "solid")
+        variantStyle = palette.solid;
+    if (variant === "outline")
+        variantStyle = `border ${palette.outline} bg-transparent`;
+    if (variant === "glass") {
+        variantStyle = cn("border border-[color-mix(in_oklch,var(--kp-foreground)_14%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_50%,transparent)] text-foreground", "backdrop-blur-md backdrop-saturate-150", "shadow-[inset_0_1px_0_oklch(1_0_0/25%)]");
+    }
+    if (variant === "dot") {
+        variantStyle = `bg-[color-mix(in_oklch,var(--kp-foreground)_8%,transparent)] text-foreground`;
+    }
+    return cn("inline-flex items-center justify-center font-medium tracking-tight", "transition-colors duration-[var(--kp-motion-duration)]", sizes[size], variantStyle, className);
+}
+export function dotClassName(color = "accent") {
+    return cn("h-1.5 w-1.5 rounded-full", colorStyles[color].dotBg);
+}

package/dist/components/badge/badge.types.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type BadgeVariant = "solid" | "soft" | "outline" | "glass" | "dot";
+export type BadgeColor = "accent" | "muted" | "danger" | "success" | "warning";
+export type BadgeSize = "sm" | "md" | "lg";
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+    children?: ReactNode;
+    variant?: BadgeVariant;
+    color?: BadgeColor;
+    size?: BadgeSize;
+    className?: string;
+};

package/dist/components/badge/badge.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/badge/index.d.ts

@@ -0,0 +1,3 @@
+export { Badge } from "./badge.js";
+export { badgeClassName, dotClassName } from "./badge.styles.js";
+export type { BadgeColor, BadgeProps, BadgeSize, BadgeVariant, } from "./badge.types.js";

package/dist/components/badge/index.js

@@ -0,0 +1,2 @@
+export { Badge } from "./badge.js";
+export { badgeClassName, dotClassName } from "./badge.styles.js";