@hewnui/ui 0.0.0-stage → 0.1.0

package/dist/components/input-otp/input-otp.styles.js

@@ -0,0 +1,11 @@
+import { cn } from "../../utils/cn";
+import { inputSurfaceClassName, } from "../../styles/field";
+export function inputOtpRootClass(className) {
+    return cn("flex w-full max-w-sm flex-col gap-1.5 text-sm text-foreground", className);
+}
+export const inputOtpSlotsClass = "flex flex-row flex-nowrap items-center gap-2";
+export function inputOtpSlotClassName({ className, size = "md", variant = "outline", } = {}) {
+    // inputSurfaceClassName includes w-full; cn does not conflict-merge, so pin
+    // slot size with max/basis so digits stay in a horizontal OTP row.
+    return cn(inputSurfaceClassName({ size, variant }), "max-w-11 w-11 min-w-11 shrink-0 grow-0 basis-11 px-0 text-center font-mono text-base tabular-nums", size === "sm" && "max-w-9 w-9 min-w-9 basis-9", size === "lg" && "max-w-12 w-12 min-w-12 basis-12", className);
+}

package/dist/components/input-otp/input-otp.types.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { FieldSize, FieldVariant } from "../../styles/field";
+export type InputOtpVariant = FieldVariant;
+export type InputOtpSize = FieldSize;
+export type InputOtpProps = {
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    className?: string;
+    length?: number;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+    name?: string;
+    autoFocus?: boolean;
+    variant?: InputOtpVariant;
+    size?: InputOtpSize;
+    "aria-label"?: string;
+};

package/dist/components/input-otp/input-otp.types.js

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

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

@@ -0,0 +1 @@
+export { LineChart, type LineChartProps } from "./line-chart";

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

@@ -0,0 +1 @@
+export { LineChart } from "./line-chart";

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

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

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

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { drawIn } from "@hewnui/motion";
+import { m } from "motion/react";
+import { AxisLabels, GridLines } from "../../chart/axes";
+import { seriesColor } from "../../chart/colors";
+import { ChartFrame } from "../../chart/frame";
+import { ChartInteractionProvider, ChartTooltip, useChartInteraction, } from "../../chart/interaction";
+import { linePath } from "../../chart/path";
+import { createLinearScales, flattenSeries } from "../../chart/scales";
+import { resolveStatus } from "../../chart/status";
+import { useMotionMode } from "../../providers/motion-provider";
+function LineChartRoot({ 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(LineChartSvg, { series: series, summary: summary, className: className, width: width, height: height }), children] }) }));
+}
+function LineChartSvg({ series, summary, className, width, height, }) {
+    const { motionEnabled } = useMotionMode();
+    const { setHover } = useChartInteraction();
+    const flat = flattenSeries(series);
+    const scales = createLinearScales(flat, { width, height });
+    const { x, y, pad, xIsNumeric } = scales;
+    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 d = linePath(item.data, x, y, xIsNumeric);
+                return (_jsxs("g", { children: [motionEnabled ? (_jsx(m.path, { d: d, fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: drawIn })) : (_jsx("path", { d: d, fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), 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 LineChart = Object.assign(LineChartRoot, {
+    Tooltip: ChartTooltip,
+});

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

@@ -0,0 +1,2 @@
+export { Link } from "./link";
+export type { LinkProps, LinkVariant } from "./link.types";

package/dist/components/link/index.js

@@ -0,0 +1 @@
+export { Link } from "./link";

package/dist/components/link/link.d.ts

@@ -0,0 +1,2 @@
+import type { LinkProps } from "./link.types";
+export declare function Link({ children, className, variant, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/link/link.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link as AriaLink } from "react-aria-components";
+import { linkClassName } from "./link.styles";
+export function Link({ children, className, variant = "accent", ...props }) {
+    return (_jsx(AriaLink, { ...props, className: linkClassName({ className, variant }), children: children }));
+}

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

@@ -0,0 +1,5 @@
+import type { LinkVariant } from "./link.types";
+export declare function linkClassName({ className, variant, }?: {
+    className?: string | undefined;
+    variant?: LinkVariant | undefined;
+}): string;

package/dist/components/link/link.styles.js

@@ -0,0 +1,9 @@
+import { cn } from "../../utils/cn";
+const variants = {
+    accent: "text-accent hover:brightness-[1.08]",
+    muted: "text-muted-foreground hover:text-foreground",
+    underline: "text-foreground underline decoration-[color-mix(in_oklch,var(--kp-foreground)_28%,transparent)] underline-offset-4 hover:decoration-foreground",
+};
+export function linkClassName({ className, variant = "accent", } = {}) {
+    return cn("inline-flex min-h-10 items-center rounded-[calc(var(--kp-radius-sm)-0.05rem)]", "outline-none transition-[color,transform,text-decoration-color,filter]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "pressed:scale-[0.96] data-[pressed]:scale-[0.96]", "focus-visible:ring-2 focus-visible:ring-ring/40", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45", variants[variant], className);
+}

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

@@ -0,0 +1,8 @@
+import type { LinkProps as AriaLinkProps } from "react-aria-components";
+import type { ReactNode } from "react";
+export type LinkVariant = "accent" | "muted" | "underline";
+export type LinkProps = Omit<AriaLinkProps, "className" | "children"> & {
+    children?: ReactNode;
+    className?: string;
+    variant?: LinkVariant;
+};

package/dist/components/link/link.types.js

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

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

@@ -0,0 +1,8 @@
+import { Menu, MenuButton, MenuItem, MenuSeparator, MenuTrigger } from "./menu";
+export declare const MenuRoot: typeof MenuTrigger & {
+    Button: typeof MenuButton;
+    Content: typeof Menu;
+    Item: typeof MenuItem;
+    Separator: typeof MenuSeparator;
+};
+export { Menu, MenuButton, MenuItem, MenuSeparator, MenuTrigger };

package/dist/components/menu/index.js

@@ -0,0 +1,8 @@
+import { Menu, MenuButton, MenuItem, MenuSeparator, MenuTrigger, } from "./menu";
+export const MenuRoot = Object.assign(MenuTrigger, {
+    Button: MenuButton,
+    Content: Menu,
+    Item: MenuItem,
+    Separator: MenuSeparator,
+});
+export { Menu, MenuButton, MenuItem, MenuSeparator, MenuTrigger };

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export declare function MenuTrigger({ children, ...props }: {
+    children: ReactNode;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenuButton({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Menu({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenuItem({ children, id, isDisabled, onAction, }: {
+    children: ReactNode;
+    id?: string;
+    isDisabled?: boolean;
+    onAction?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenuSeparator(): import("react/jsx-runtime").JSX.Element;

package/dist/components/menu/menu.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Menu as AriaMenu, MenuItem as AriaMenuItem, MenuTrigger as AriaMenuTrigger, Popover, Separator, } from "react-aria-components";
+import { menuItemClass, popoverSurfaceClass } from "../../styles/overlays";
+import { buttonClassName } from "../button/button.styles";
+import { useMotionMode } from "../../providers/motion-provider";
+export function MenuTrigger({ children, ...props }) {
+    return _jsx(AriaMenuTrigger, { ...props, children: children });
+}
+export function MenuButton({ children }) {
+    const { motionEnabled } = useMotionMode();
+    return (_jsx(Button, { className: buttonClassName({
+            pressScale: motionEnabled,
+            variant: "secondary",
+            size: "md",
+        }), children: children }));
+}
+export function Menu({ children }) {
+    return (_jsx(Popover, { className: popoverSurfaceClass, "data-kp-surface": true, children: _jsx(AriaMenu, { className: "min-w-44 outline-none", children: children }) }));
+}
+export function MenuItem({ children, id, isDisabled, onAction, }) {
+    return (_jsx(AriaMenuItem, { className: menuItemClass, ...(id !== undefined ? { id } : {}), ...(isDisabled !== undefined ? { isDisabled } : {}), ...(onAction !== undefined ? { onAction } : {}), children: children }));
+}
+export function MenuSeparator() {
+    return _jsx(Separator, { className: "my-1 border-t" });
+}

package/dist/components/number-field/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberField } from "./number-field";
+export type { NumberFieldProps, NumberFieldSize, NumberFieldVariant, } from "./number-field.types";

package/dist/components/number-field/index.js

@@ -0,0 +1 @@
+export { NumberField } from "./number-field";

package/dist/components/number-field/number-field.d.ts

@@ -0,0 +1,2 @@
+import type { NumberFieldProps } from "./number-field.types";
+export declare function NumberField({ className, description, errorMessage, inputClassName: inputClass, label, size, variant, ...props }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/number-field/number-field.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, FieldError, Group, Input, Label, NumberField as AriaNumberField, Text, } from "react-aria-components";
+import { cn } from "../../utils/cn";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldRootClass, fieldSurfaceProps, } from "../../styles/field";
+import { numberGroupClassName, numberInputClass, numberStepperClass, } from "./number-field.styles";
+function StepIcon({ direction }) {
+    return (_jsx("svg", { viewBox: "0 0 12 12", className: "size-3.5", "aria-hidden": true, children: _jsx("path", { d: direction === "up"
+                ? "M2.5 7.5 6 4l3.5 3.5"
+                : "M2.5 4.5 6 8l3.5-3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+export function NumberField({ className, description, errorMessage, inputClassName: inputClass, label, size = "md", variant = "outline", ...props }) {
+    return (_jsxs(AriaNumberField, { ...props, className: cn(fieldRootClass, className), children: [label ? _jsx(Label, { className: fieldLabelClass, children: label }) : null, _jsxs(Group, { ...fieldSurfaceProps(variant), className: numberGroupClassName({ size, variant }), children: [_jsx(Button, { slot: "decrement", className: numberStepperClass, children: _jsx(StepIcon, { direction: "down" }) }), _jsx(Input, { className: cn(numberInputClass, "text-center", inputClass) }), _jsx(Button, { slot: "increment", className: numberStepperClass, children: _jsx(StepIcon, { direction: "up" }) })] }), description ? (_jsx(Text, { slot: "description", className: fieldDescriptionClass, children: description })) : null, _jsx(FieldError, { className: fieldErrorClass, children: errorMessage })] }));
+}

package/dist/components/number-field/number-field.styles.d.ts

@@ -0,0 +1,8 @@
+import { type FieldSize, type FieldVariant } from "../../styles/field";
+export declare function numberGroupClassName({ className, size, variant, }?: {
+    className?: string | undefined;
+    size?: FieldSize | undefined;
+    variant?: FieldVariant | undefined;
+}): string;
+export declare const numberInputClass = "min-w-0 flex-1 bg-transparent px-3 py-0 text-foreground outline-none tabular-nums placeholder:text-muted-foreground";
+export declare const numberStepperClass: string;

package/dist/components/number-field/number-field.styles.js

@@ -0,0 +1,7 @@
+import { cn } from "../../utils/cn";
+import { inputSurfaceClassName, } from "../../styles/field";
+export function numberGroupClassName({ className, size = "md", variant = "outline", } = {}) {
+    return cn(inputSurfaceClassName({ size, variant }), "flex items-stretch gap-0 p-0 tabular-nums", variant !== "flushed" && "overflow-hidden", className);
+}
+export const numberInputClass = "min-w-0 flex-1 bg-transparent px-3 py-0 text-foreground outline-none tabular-nums placeholder:text-muted-foreground";
+export const numberStepperClass = cn("inline-flex size-10 shrink-0 items-center justify-center self-center", "text-muted-foreground outline-none", "transition-[background-color,color,transform]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "hover:bg-muted/70 hover:text-foreground", "pressed:scale-[0.96] data-[pressed]:scale-[0.96]", "disabled:cursor-not-allowed disabled:opacity-45");

package/dist/components/number-field/number-field.types.d.ts

@@ -0,0 +1,14 @@
+import type { NumberFieldProps as AriaNumberFieldProps } from "react-aria-components";
+import type { ReactNode } from "react";
+import type { FieldSize, FieldVariant } from "../../styles/field";
+export type NumberFieldVariant = FieldVariant;
+export type NumberFieldSize = FieldSize;
+export type NumberFieldProps = Omit<AriaNumberFieldProps, "className" | "children"> & {
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    className?: string;
+    inputClassName?: string;
+    variant?: NumberFieldVariant;
+    size?: NumberFieldSize;
+};

package/dist/components/number-field/number-field.types.js

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

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

@@ -0,0 +1,3 @@
+export { Pagination } from "./pagination";
+export type { PaginationItem, PaginationProps, PaginationSize, } from "./pagination.types";
+export { getPaginationItems } from "./pagination.utils";

package/dist/components/pagination/index.js

@@ -0,0 +1,2 @@
+export { Pagination } from "./pagination";
+export { getPaginationItems } from "./pagination.utils";

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,2 @@
+import type { PaginationProps } from "./pagination.types";
+export declare function Pagination({ "aria-label": ariaLabel, boundaryCount, className, defaultPage, getHref, isDisabled, nextLabel, onPageChange, page, previousLabel, siblingCount, size, total, }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/pagination.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Link } from "react-aria-components";
+import { cn } from "../../utils/cn";
+import { paginationEllipsisClass, paginationItemClass, paginationListClass, paginationRootClass, } from "./pagination.styles";
+import { getPaginationItems } from "./pagination.utils";
+function Chevron({ direction }) {
+    return (_jsx("svg", { viewBox: "0 0 16 16", className: "size-4", "aria-hidden": true, children: _jsx("path", { d: direction === "prev"
+                ? "M9.75 4.5 6.25 8l3.5 3.5"
+                : "M6.25 4.5 9.75 8l-3.5 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+export function Pagination({ "aria-label": ariaLabel = "Pagination", boundaryCount = 1, className, defaultPage = 1, getHref, isDisabled, nextLabel = "Next", onPageChange, page, previousLabel = "Previous", siblingCount = 1, size = "md", total, }) {
+    const controlled = page !== undefined;
+    const [uncontrolled, setUncontrolled] = useState(defaultPage);
+    const safeTotal = Math.max(1, Math.floor(total));
+    const current = Math.min(Math.max(1, Math.floor(controlled ? page : uncontrolled)), safeTotal);
+    const items = getPaginationItems(current, safeTotal, siblingCount, boundaryCount);
+    function goTo(next) {
+        const clamped = Math.min(Math.max(1, next), safeTotal);
+        if (clamped === current)
+            return;
+        if (!controlled)
+            setUncontrolled(clamped);
+        onPageChange?.(clamped);
+    }
+    function renderControl(target, { children, isCurrent = false, isNav = false, label, }) {
+        const itemClass = paginationItemClass(size, { isCurrent, isNav });
+        const disabled = Boolean(isDisabled) || (isNav && (target < 1 || target > safeTotal));
+        const currentProps = isCurrent ? { "aria-current": "page" } : {};
+        if (getHref && !disabled) {
+            return (_jsx(Link, { href: getHref(target), className: itemClass, "aria-label": label, onPress: () => goTo(target), ...currentProps, children: children }));
+        }
+        return (_jsx(Button, { className: itemClass, "aria-label": label, isDisabled: disabled, onPress: () => goTo(target), ...currentProps, children: children }));
+    }
+    return (_jsxs("nav", { "aria-label": ariaLabel, className: paginationRootClass(className), "data-kp-pagination": "", children: [_jsxs("ul", { className: paginationListClass(), children: [_jsx("li", { children: renderControl(current - 1, {
+                            label: "Go to previous page",
+                            isNav: true,
+                            children: (_jsxs(_Fragment, { children: [_jsx(Chevron, { direction: "prev" }), _jsx("span", { children: previousLabel })] })),
+                        }) }), items.map((item) => item.type === "ellipsis" ? (_jsx("li", { "aria-hidden": true, children: _jsx("span", { className: paginationEllipsisClass(size), children: "\u2026" }) }, item.key)) : (_jsx("li", { children: renderControl(item.page, {
+                            label: `Go to page ${item.page}`,
+                            isCurrent: item.page === current,
+                            children: item.page,
+                        }) }, item.page))), _jsx("li", { children: renderControl(current + 1, {
+                            label: "Go to next page",
+                            isNav: true,
+                            children: (_jsxs(_Fragment, { children: [_jsx("span", { children: nextLabel }), _jsx(Chevron, { direction: "next" })] })),
+                        }) })] }), _jsxs("p", { className: cn("m-0 font-mono text-xs tabular-nums text-muted-foreground"), children: ["Page ", current, " of ", safeTotal] })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { PaginationSize } from "./pagination.types";
+export declare function paginationRootClass(className?: string): string;
+export declare function paginationListClass(): string;
+export declare function paginationItemClass(size?: PaginationSize, { isCurrent, isNav, }?: {
+    isCurrent?: boolean;
+    isNav?: boolean;
+}): string;
+export declare function paginationEllipsisClass(size?: PaginationSize): string;

package/dist/components/pagination/pagination.styles.js

@@ -0,0 +1,19 @@
+import { cn } from "../../utils/cn";
+const sizes = {
+    sm: "min-h-10 min-w-10 px-2.5 text-xs rounded-[var(--kp-radius-sm)]",
+    md: "min-h-11 min-w-11 px-3 text-sm rounded-[var(--kp-radius-md)]",
+    lg: "min-h-12 min-w-12 px-3.5 text-base rounded-[var(--kp-radius-md)]",
+};
+export function paginationRootClass(className) {
+    return cn("inline-flex max-w-full flex-col gap-2", className);
+}
+export function paginationListClass() {
+    return "flex flex-wrap items-center gap-1.5 m-0 list-none p-0";
+}
+export function paginationItemClass(size = "md", { isCurrent = false, isNav = false, } = {}) {
+    return cn("inline-flex items-center justify-center font-medium tabular-nums outline-none", "border border-[color-mix(in_oklch,var(--kp-foreground)_14%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_90%,var(--kp-foreground)_3%)] text-foreground", "shadow-[var(--kp-shadow-surface),inset_0_1px_0_oklch(1_0_0/35%)]", "transition-[transform,background-color,border-color,color,box-shadow]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "hover:bg-muted data-[pressed]:scale-[0.96] pressed:scale-[0.96]", "focus-visible:ring-2 focus-visible:ring-ring/40", "data-[disabled]:pointer-events-none data-[disabled]:opacity-45", "disabled:pointer-events-none disabled:opacity-45", sizes[size], isNav && "gap-1.5 px-3", isCurrent &&
+        cn("border-transparent bg-accent text-accent-foreground", "shadow-[0_1px_2px_oklch(0_0_0/14%),inset_0_1px_0_oklch(1_0_0/28%)]", "hover:brightness-[1.05]"));
+}
+export function paginationEllipsisClass(size = "md") {
+    return cn("inline-flex items-center justify-center text-muted-foreground", "font-mono tabular-nums", sizes[size]);
+}

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

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+export type PaginationSize = "sm" | "md" | "lg";
+export type PaginationProps = {
+    /** Total number of pages (minimum 1). */
+    total: number;
+    /** Controlled current page (1-indexed). */
+    page?: number;
+    /** Uncontrolled initial page (1-indexed). */
+    defaultPage?: number;
+    /** Called when the current page changes. */
+    onPageChange?: (page: number) => void;
+    /** Pages shown on each side of the current page. */
+    siblingCount?: number;
+    /** Always-visible pages at the start and end. */
+    boundaryCount?: number;
+    size?: PaginationSize;
+    className?: string;
+    /** Accessible name for the nav landmark. */
+    "aria-label"?: string;
+    /**
+     * When provided, page controls render as links using this href builder
+     * instead of buttons (useful for SEO-friendly listing pages).
+     */
+    getHref?: (page: number) => string;
+    previousLabel?: ReactNode;
+    nextLabel?: ReactNode;
+    isDisabled?: boolean;
+};
+export type PaginationItem = {
+    type: "page";
+    page: number;
+} | {
+    type: "ellipsis";
+    key: string;
+};

package/dist/components/pagination/pagination.types.js

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

package/dist/components/pagination/pagination.utils.d.ts

@@ -0,0 +1,6 @@
+import type { PaginationItem } from "./pagination.types";
+/**
+ * Build a compact page list with ellipsis gaps, matching common sibling /
+ * boundary pagination patterns (1-indexed pages).
+ */
+export declare function getPaginationItems(page: number, total: number, siblingCount?: number, boundaryCount?: number): PaginationItem[];

package/dist/components/pagination/pagination.utils.js

@@ -0,0 +1,51 @@
+function range(start, end) {
+    const out = [];
+    for (let page = start; page <= end; page += 1)
+        out.push(page);
+    return out;
+}
+/**
+ * Build a compact page list with ellipsis gaps, matching common sibling /
+ * boundary pagination patterns (1-indexed pages).
+ */
+export function getPaginationItems(page, total, siblingCount = 1, boundaryCount = 1) {
+    const safeTotal = Math.max(1, Math.floor(total));
+    const safePage = Math.min(Math.max(1, Math.floor(page)), safeTotal);
+    const siblings = Math.max(0, Math.floor(siblingCount));
+    const boundaries = Math.max(1, Math.floor(boundaryCount));
+    const startPages = range(1, Math.min(boundaries, safeTotal));
+    const endPages = range(Math.max(safeTotal - boundaries + 1, boundaries + 1), safeTotal);
+    const siblingsStart = Math.max(Math.min(safePage - siblings, safeTotal - boundaries - siblings * 2 - 1), boundaries + 2);
+    const siblingsEnd = Math.min(Math.max(safePage + siblings, boundaries + siblings * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : safeTotal - 1);
+    const items = startPages.map((value) => ({
+        type: "page",
+        page: value,
+    }));
+    if (siblingsStart > boundaries + 2) {
+        items.push({ type: "ellipsis", key: "start-ellipsis" });
+    }
+    else if (boundaries + 1 < safeTotal - boundaries) {
+        items.push({ type: "page", page: boundaries + 1 });
+    }
+    items.push(...range(siblingsStart, siblingsEnd).map((value) => ({
+        type: "page",
+        page: value,
+    })));
+    if (siblingsEnd < safeTotal - boundaries - 1) {
+        items.push({ type: "ellipsis", key: "end-ellipsis" });
+    }
+    else if (safeTotal - boundaries > boundaries) {
+        items.push({ type: "page", page: safeTotal - boundaries });
+    }
+    items.push(...endPages.map((value) => ({ type: "page", page: value })));
+    // De-dupe pages that can overlap on small totals.
+    const seen = new Set();
+    return items.filter((item) => {
+        if (item.type === "ellipsis")
+            return true;
+        if (seen.has(item.page))
+            return false;
+        seen.add(item.page);
+        return true;
+    });
+}

package/dist/components/password-field/index.d.ts

@@ -0,0 +1,2 @@
+export { PasswordField } from "./password-field";
+export type { PasswordFieldProps, PasswordFieldSize, PasswordFieldVariant, } from "./password-field.types";

package/dist/components/password-field/index.js

@@ -0,0 +1 @@
+export { PasswordField } from "./password-field";

package/dist/components/password-field/password-field.d.ts

@@ -0,0 +1,2 @@
+import type { PasswordFieldProps } from "./password-field.types";
+export declare function PasswordField({ className, defaultVisible, description, errorMessage, inputClassName: inputClass, label, placeholder, size, variant, ...props }: PasswordFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/password-field/password-field.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, FieldError, Group, Input, Label, Text, TextField as AriaTextField, } from "react-aria-components";
+import { cn } from "../../utils/cn";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldRootClass, fieldSurfaceProps, } from "../../styles/field";
+import { passwordGroupClassName, passwordInputClass, passwordToggleClass, } from "./password-field.styles";
+function EyeIcon({ open }) {
+    if (open) {
+        return (_jsxs("svg", { viewBox: "0 0 16 16", className: "size-4", "aria-hidden": true, children: [_jsx("path", { d: "M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8s-2.5 4.5-6.5 4.5S1.5 8 1.5 8Z", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }), _jsx("circle", { cx: "8", cy: "8", r: "2", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }), _jsx("path", { d: "M2 2.5 14 13.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" })] }));
+    }
+    return (_jsxs("svg", { viewBox: "0 0 16 16", className: "size-4", "aria-hidden": true, children: [_jsx("path", { d: "M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8s-2.5 4.5-6.5 4.5S1.5 8 1.5 8Z", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }), _jsx("circle", { cx: "8", cy: "8", r: "2", fill: "none", stroke: "currentColor", strokeWidth: "1.4" })] }));
+}
+export function PasswordField({ className, defaultVisible = false, description, errorMessage, inputClassName: inputClass, label, placeholder, size = "md", variant = "outline", ...props }) {
+    const [visible, setVisible] = useState(defaultVisible);
+    return (_jsxs(AriaTextField, { ...props, className: cn(fieldRootClass, className), children: [label ? _jsx(Label, { className: fieldLabelClass, children: label }) : null, _jsxs(Group, { ...fieldSurfaceProps(variant), className: passwordGroupClassName({ size, variant }), children: [_jsx(Input, { type: visible ? "text" : "password", autoComplete: "current-password", className: cn(passwordInputClass, inputClass), ...(placeholder !== undefined ? { placeholder } : {}) }), _jsx(Button, { type: "button", className: passwordToggleClass, "aria-label": visible ? "Hide password" : "Show password", onPress: () => setVisible((value) => !value), children: _jsx(EyeIcon, { open: visible }) })] }), description ? (_jsx(Text, { slot: "description", className: fieldDescriptionClass, children: description })) : null, _jsx(FieldError, { className: fieldErrorClass, children: errorMessage })] }));
+}

package/dist/components/password-field/password-field.styles.d.ts

@@ -0,0 +1,8 @@
+import { type FieldSize, type FieldVariant } from "../../styles/field";
+export declare function passwordGroupClassName({ className, size, variant, }?: {
+    className?: string | undefined;
+    size?: FieldSize | undefined;
+    variant?: FieldVariant | undefined;
+}): string;
+export declare const passwordInputClass = "min-w-0 flex-1 bg-transparent p-0 text-foreground outline-none placeholder:text-muted-foreground";
+export declare const passwordToggleClass: string;

package/dist/components/password-field/password-field.styles.js

@@ -0,0 +1,7 @@
+import { cn } from "../../utils/cn";
+import { inputSurfaceClassName, } from "../../styles/field";
+export function passwordGroupClassName({ className, size = "md", variant = "outline", } = {}) {
+    return cn(inputSurfaceClassName({ size, variant }), "flex items-center gap-1", className);
+}
+export const passwordInputClass = "min-w-0 flex-1 bg-transparent p-0 text-foreground outline-none placeholder:text-muted-foreground";
+export const passwordToggleClass = cn("inline-flex size-10 shrink-0 items-center justify-center rounded-[calc(var(--kp-radius-sm)-0.05rem)]", "text-muted-foreground outline-none", "transition-[background-color,color,transform]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "hover:bg-muted/70 hover:text-foreground", "pressed:scale-[0.96] data-[pressed]:scale-[0.96]");

package/dist/components/password-field/password-field.types.d.ts

@@ -0,0 +1,16 @@
+import type { TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+import type { ReactNode } from "react";
+import type { FieldSize, FieldVariant } from "../../styles/field";
+export type PasswordFieldVariant = FieldVariant;
+export type PasswordFieldSize = FieldSize;
+export type PasswordFieldProps = Omit<AriaTextFieldProps, "className" | "children" | "type"> & {
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    placeholder?: string;
+    className?: string;
+    inputClassName?: string;
+    variant?: PasswordFieldVariant;
+    size?: PasswordFieldSize;
+    defaultVisible?: boolean;
+};

package/dist/components/password-field/password-field.types.js

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

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

@@ -0,0 +1,2 @@
+export { Popover, PopoverBody, PopoverTitle, PopoverTrigger, } from "./popover";
+export type { PopoverProps, PopoverTriggerProps } from "./popover.types";

package/dist/components/popover/index.js

@@ -0,0 +1 @@
+export { Popover, PopoverBody, PopoverTitle, PopoverTrigger, } from "./popover";

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { PopoverProps, PopoverTriggerProps } from "./popover.types";
+export declare function PopoverTrigger(props: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ children, className, offset, placement, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverTitle({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PopoverBody({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/popover.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog, DialogTrigger, Heading, Popover as AriaPopover, } from "react-aria-components";
+import { popoverBodyClass, popoverClassName, popoverTitleClass, } from "./popover.styles";
+export function PopoverTrigger(props) {
+    return _jsx(DialogTrigger, { ...props });
+}
+export function Popover({ children, className, offset = 8, placement = "bottom start", }) {
+    return (_jsx(AriaPopover, { placement: placement, offset: offset, className: popoverClassName(className), "data-kp-surface": true, children: _jsx(Dialog, { className: "outline-none", children: children }) }));
+}
+export function PopoverTitle({ children }) {
+    return (_jsx(Heading, { slot: "title", className: popoverTitleClass, children: children }));
+}
+export function PopoverBody({ children }) {
+    return _jsx("div", { className: popoverBodyClass, children: children });
+}