@hewnui/ui 0.0.0-stage → 0.1.1

package/dist/components/bar-chart/bar-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 BarChartProps = {
+    series: ChartSeries[];
+    summary: string;
+    className?: string;
+    width?: number;
+    height?: number;
+    status?: ChartStatus;
+    children?: ReactNode;
+};
+declare function BarChartRoot({ series, summary, className, width, height, status, children, }: BarChartProps): import("react/jsx-runtime").JSX.Element;
+export declare const BarChart: typeof BarChartRoot & {
+    Tooltip: typeof ChartTooltip;
+};
+export {};

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

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { springs } 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 { createBandScales, flattenSeries } from "../../chart/scales.js";
+import { resolveStatus } from "../../chart/status.js";
+import { useMotionMode } from "../../providers/motion-provider.js";
+function BarChartRoot({ 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(BarChartSvg, { series: series, summary: summary, className: className, width: width, height: height }), children] }) }));
+}
+function BarChartSvg({ series, summary, className, width, height, }) {
+    const { motionEnabled } = useMotionMode();
+    const { setHover } = useChartInteraction();
+    const flat = flattenSeries(series);
+    const { x, y, pad, categories } = createBandScales(flat, { width, height });
+    const baseline = y(0) ?? height - pad.bottom;
+    const groupCount = Math.max(1, series.length);
+    const band = x.bandwidth();
+    const barW = band / groupCount;
+    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, xIsBand: true }), series.map((item, seriesIndex) => {
+                const color = seriesColor(seriesIndex, item.color);
+                return (_jsx("g", { children: item.data.map((point) => {
+                        const category = String(point.x);
+                        if (!categories.includes(category))
+                            return null;
+                        const px = (x(category) ?? 0) + barW * seriesIndex;
+                        const py = y(point.y) ?? baseline;
+                        const barH = Math.max(0, baseline - py);
+                        const barProps = {
+                            x: px,
+                            y: py,
+                            width: Math.max(1, barW - 2),
+                            height: barH,
+                            rx: 4,
+                            fill: color,
+                            tabIndex: 0,
+                            role: "button",
+                            "aria-label": `${item.label}: ${category}, ${point.y}`,
+                            className: "cursor-pointer outline-none focus-visible:stroke-ring",
+                            onFocus: () => setHover({
+                                seriesId: item.id,
+                                label: item.label,
+                                point,
+                                color,
+                                px: px + barW / 2,
+                                py,
+                            }),
+                            onBlur: () => setHover(null),
+                            onMouseEnter: () => setHover({
+                                seriesId: item.id,
+                                label: item.label,
+                                point,
+                                color,
+                                px: px + barW / 2,
+                                py,
+                            }),
+                            onMouseLeave: () => setHover(null),
+                        };
+                        return motionEnabled ? (_jsx(m.rect, { ...barProps, initial: { opacity: 0.4 }, animate: { opacity: 1 }, transition: springs.snappy }, `${item.id}-${category}`)) : (_jsx("rect", { ...barProps }, `${item.id}-${category}`));
+                    }) }, item.id));
+            })] }));
+}
+export const BarChart = Object.assign(BarChartRoot, {
+    Tooltip: ChartTooltip,
+});

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

@@ -0,0 +1 @@
+export { BarChart, type BarChartProps } from "./bar-chart.js";

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

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

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,3 @@
+import type { BreadcrumbItemProps, BreadcrumbsProps } from "./breadcrumbs.types.js";
+export declare function Breadcrumbs({ "aria-label": ariaLabel, children, className, ...props }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Breadcrumb({ children, className, href, id, isCurrent, }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumb as AriaBreadcrumb, Breadcrumbs as AriaBreadcrumbs, Link, } from "react-aria-components";
+import { breadcrumbCurrentClass, breadcrumbItemClassName, breadcrumbLinkClass, breadcrumbSeparatorClass, breadcrumbsClassName, } from "./breadcrumbs.styles.js";
+export function Breadcrumbs({ "aria-label": ariaLabel = "Breadcrumbs", children, className, ...props }) {
+    return (_jsx(AriaBreadcrumbs, { "aria-label": ariaLabel, className: breadcrumbsClassName(className), ...props, children: children }));
+}
+export function Breadcrumb({ children, className, href, id, isCurrent, }) {
+    return (_jsx(AriaBreadcrumb, { className: breadcrumbItemClassName(className), ...(id !== undefined ? { id } : {}), children: ({ isCurrent: current }) => {
+            const atCurrent = isCurrent ?? current;
+            return (_jsxs(_Fragment, { children: [atCurrent || !href ? (_jsx("span", { className: breadcrumbCurrentClass, "aria-current": atCurrent ? "page" : undefined, children: children })) : (_jsx(Link, { href: href, className: breadcrumbLinkClass, children: children })), !atCurrent ? (_jsx("span", { "aria-hidden": true, className: breadcrumbSeparatorClass, children: "/" })) : null] }));
+        } }));
+}

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

@@ -0,0 +1,5 @@
+export declare function breadcrumbsClassName(className?: string | undefined): string;
+export declare function breadcrumbItemClassName(className?: string | undefined): string;
+export declare const breadcrumbSeparatorClass = "text-muted-foreground/70 select-none";
+export declare const breadcrumbLinkClass: string;
+export declare const breadcrumbCurrentClass = "px-1.5 font-medium text-foreground";

package/dist/components/breadcrumbs/breadcrumbs.styles.js

@@ -0,0 +1,10 @@
+import { cn } from "../../utils/cn.js";
+export function breadcrumbsClassName(className) {
+    return cn("flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground", className);
+}
+export function breadcrumbItemClassName(className) {
+    return cn("inline-flex min-h-10 items-center gap-1.5", className);
+}
+export const breadcrumbSeparatorClass = "text-muted-foreground/70 select-none";
+export const breadcrumbLinkClass = cn("inline-flex min-h-10 items-center rounded-[calc(var(--kp-radius-sm)-0.05rem)] px-1.5", "text-muted-foreground outline-none transition-[color,transform,background-color]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "hover:bg-muted/60 hover:text-foreground", "pressed:scale-[0.96] data-[pressed]:scale-[0.96]", "focus-visible:ring-2 focus-visible:ring-ring/40", "data-[current]:pointer-events-none data-[current]:font-medium data-[current]:text-foreground", "data-[disabled]:opacity-45");
+export const breadcrumbCurrentClass = "px-1.5 font-medium text-foreground";

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { Key } from "react-aria-components";
+export type BreadcrumbsProps = {
+    children: ReactNode;
+    className?: string;
+    "aria-label"?: string;
+    isDisabled?: boolean;
+    onAction?: (key: Key) => void;
+};
+export type BreadcrumbItemProps = {
+    children: ReactNode;
+    className?: string;
+    id?: Key;
+    href?: string;
+    isCurrent?: boolean;
+};

package/dist/components/breadcrumbs/breadcrumbs.types.js

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

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

@@ -0,0 +1,2 @@
+export { Breadcrumb, Breadcrumbs } from "./breadcrumbs.js";
+export type { BreadcrumbItemProps, BreadcrumbsProps, } from "./breadcrumbs.types.js";

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1 @@
+export { Breadcrumb, Breadcrumbs } from "./breadcrumbs.js";

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

@@ -0,0 +1,2 @@
+import type { ButtonProps } from "./button.types.js";
+export declare function Button({ children, className, isDisabled, isLoading, size, variant, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button/button.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as AriaButton } from "react-aria-components";
+import { useMotionMode } from "../../providers/motion-provider.js";
+import { Spinner } from "../spinner/index.js";
+import { buttonClassName, buttonControlAttr } from "./button.styles.js";
+export function Button({ children, className, isDisabled, isLoading = false, size = "md", variant = "primary", ...props }) {
+    const { motionEnabled } = useMotionMode();
+    const disabled = Boolean(isDisabled || isLoading);
+    return (_jsxs(AriaButton, { ...props, "data-kp-control": buttonControlAttr(variant), isDisabled: disabled, "aria-busy": isLoading || undefined, className: buttonClassName({
+            className,
+            isDisabled: disabled,
+            isLoading,
+            pressScale: motionEnabled,
+            size,
+            variant,
+        }), children: [isLoading ? _jsx(Spinner, {}) : null, _jsx("span", { className: isLoading ? "opacity-90" : undefined, children: children })] }));
+}

package/dist/components/button/button.motion.d.ts

@@ -0,0 +1,23 @@
+export declare const buttonPressTransition: {
+    readonly type: "spring";
+    readonly stiffness: 420;
+    readonly damping: 30;
+    readonly mass: 0.7;
+};
+export declare const loadingIconVariants: {
+    hidden: {
+        opacity: number;
+        scale: number;
+        filter: string;
+    };
+    visible: {
+        opacity: number;
+        scale: number;
+        filter: string;
+    };
+};
+export declare const loadingIconTransition: {
+    type: "spring";
+    duration: 0.2;
+    bounce: number;
+};

package/dist/components/button/button.motion.js

@@ -0,0 +1,11 @@
+import { durations, springs } from "@hewnui/motion";
+export const buttonPressTransition = springs.snappy;
+export const loadingIconVariants = {
+    hidden: { opacity: 0, scale: 0.25, filter: "blur(4px)" },
+    visible: { opacity: 1, scale: 1, filter: "blur(0px)" },
+};
+export const loadingIconTransition = {
+    type: "spring",
+    duration: durations.base,
+    bounce: 0,
+};

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

@@ -0,0 +1,10 @@
+import type { ButtonSize, ButtonVariant } from "./button.types.js";
+export declare function buttonClassName({ className, isDisabled, isLoading, pressScale, size, variant, }: {
+    className?: string | undefined;
+    isDisabled?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    pressScale: boolean;
+    size?: ButtonSize | undefined;
+    variant?: ButtonVariant | undefined;
+}): string;
+export declare function buttonControlAttr(variant?: ButtonVariant): "button-glass" | "button-soft" | "button-outline" | "button-primary" | "button-secondary" | "button-ghost" | "button-glow" | "button-danger" | "button-danger-outline" | "button-danger-soft";

package/dist/components/button/button.styles.js

@@ -0,0 +1,24 @@
+import { cn } from "../../utils/cn.js";
+const variants = {
+    primary: cn("bg-accent text-accent-foreground", "shadow-[0_1px_2px_oklch(0_0_0/14%),0_8px_20px_-12px_color-mix(in_oklch,var(--kp-accent)_55%,transparent),inset_0_1px_0_oklch(1_0_0/28%)]", "hover:brightness-[1.05] hover:shadow-[0_1px_2px_oklch(0_0_0/16%),0_12px_28px_-14px_color-mix(in_oklch,var(--kp-accent)_62%,transparent),inset_0_1px_0_oklch(1_0_0/34%)]"),
+    secondary: cn("border border-[color-mix(in_oklch,var(--kp-foreground)_14%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_94%,var(--kp-foreground)_3%)] text-foreground", "shadow-[0_1px_2px_oklch(0_0_0/8%),inset_0_1px_0_oklch(1_0_0/55%)]", "hover:bg-muted hover:border-[color-mix(in_oklch,var(--kp-foreground)_20%,transparent)]"),
+    outline: cn("border border-[color-mix(in_oklch,var(--kp-foreground)_20%,transparent)]", "bg-transparent text-foreground", "hover:bg-[color-mix(in_oklch,var(--kp-foreground)_6%,transparent)] hover:border-[color-mix(in_oklch,var(--kp-foreground)_30%,transparent)]"),
+    ghost: cn("bg-transparent text-foreground", "hover:bg-[color-mix(in_oklch,var(--kp-muted)_80%,transparent)]", "hover:shadow-[inset_0_1px_0_oklch(1_0_0/35%)]"),
+    glass: cn("border border-[color-mix(in_oklch,var(--kp-foreground)_16%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_45%,transparent)] text-foreground", "backdrop-blur-md backdrop-saturate-150", "shadow-[inset_0_1px_0_oklch(1_0_0/30%),0_4px_16px_-4px_oklch(0_0_0/12%)]", "hover:bg-[color-mix(in_oklch,var(--kp-surface)_60%,transparent)] hover:border-[color-mix(in_oklch,var(--kp-foreground)_25%,transparent)]"),
+    soft: cn("bg-[color-mix(in_oklch,var(--kp-accent)_14%,transparent)] text-accent font-semibold", "hover:bg-[color-mix(in_oklch,var(--kp-accent)_22%,transparent)]"),
+    glow: cn("bg-accent text-accent-foreground font-semibold", "shadow-[0_0_20px_-3px_color-mix(in_oklch,var(--kp-accent)_65%,transparent),0_1px_2px_oklch(0_0_0/14%),inset_0_1px_0_oklch(1_0_0/28%)]", "hover:shadow-[0_0_28px_0px_color-mix(in_oklch,var(--kp-accent)_80%,transparent),0_1px_2px_oklch(0_0_0/16%),inset_0_1px_0_oklch(1_0_0/34%)] hover:brightness-[1.05]"),
+    danger: cn("bg-danger text-accent-foreground", "shadow-[0_1px_2px_oklch(0_0_0/14%),0_8px_20px_-12px_color-mix(in_oklch,var(--kp-danger)_50%,transparent),inset_0_1px_0_oklch(1_0_0/24%)]", "hover:brightness-[1.05]"),
+    "danger-outline": cn("border border-[color-mix(in_oklch,var(--kp-danger)_40%,transparent)]", "bg-transparent text-danger", "hover:bg-[color-mix(in_oklch,var(--kp-danger)_10%,transparent)] hover:border-danger"),
+    "danger-soft": cn("bg-[color-mix(in_oklch,var(--kp-danger)_14%,transparent)] text-danger font-semibold", "hover:bg-[color-mix(in_oklch,var(--kp-danger)_22%,transparent)]"),
+};
+const sizes = {
+    sm: "min-h-10 gap-1.5 rounded-[var(--kp-radius-sm)] px-3 text-sm",
+    md: "min-h-11 gap-2 rounded-[var(--kp-radius-md)] px-4 text-sm",
+    lg: "min-h-12 gap-2.5 rounded-[var(--kp-radius-md)] px-5 text-base",
+};
+export function buttonClassName({ className, isDisabled, isLoading, pressScale, size = "md", variant = "primary", }) {
+    return cn("relative inline-flex items-center justify-center font-medium outline-none", "transition-[transform,background-color,color,box-shadow,filter,opacity,border-color]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "focus-visible:ring-offset-background", "disabled:pointer-events-none disabled:opacity-45", pressScale && "active:scale-[0.96]", variants[variant], sizes[size], (isDisabled || isLoading) && "pointer-events-none", isLoading && "opacity-80", className);
+}
+export function buttonControlAttr(variant = "primary") {
+    return `button-${variant}`;
+}

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

@@ -0,0 +1,11 @@
+import type { ButtonProps as AriaButtonProps } from "react-aria-components";
+import type { ReactNode } from "react";
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "glass" | "soft" | "glow" | "danger" | "danger-outline" | "danger-soft";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonProps = Omit<AriaButtonProps, "className" | "children"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    className?: string;
+    children?: ReactNode;
+};

package/dist/components/button/button.types.js

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

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

@@ -0,0 +1,2 @@
+export { Button } from "./button.js";
+export type { ButtonProps, ButtonSize, ButtonVariant, } from "./button.types.js";

package/dist/components/button/index.js

@@ -0,0 +1 @@
+export { Button } from "./button.js";

package/dist/components/card/card.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { CardProps } from "./card.types.js";
+declare function CardRoot({ children, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardHeader({ children, className, }: {
+    children?: ReactNode;
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CardBody({ children, className, }: {
+    children?: ReactNode;
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CardFooter({ children, className, }: {
+    children?: ReactNode;
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Card: typeof CardRoot & {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+};
+export {};

package/dist/components/card/card.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cardBodyClassName, cardClassName, cardFooterClassName, cardHeaderClassName, } from "./card.styles.js";
+function CardRoot({ children, className, ...props }) {
+    return (_jsx("div", { "data-kp-surface": true, className: cardClassName(className), ...props, children: children }));
+}
+export function CardHeader({ children, className, }) {
+    return _jsx("div", { className: cardHeaderClassName(className), children: children });
+}
+export function CardBody({ children, className, }) {
+    return _jsx("div", { className: cardBodyClassName(className), children: children });
+}
+export function CardFooter({ children, className, }) {
+    return _jsx("div", { className: cardFooterClassName(className), children: children });
+}
+export const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Body: CardBody,
+    Footer: CardFooter,
+});

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

@@ -0,0 +1,4 @@
+export declare function cardClassName(className?: string): string;
+export declare function cardHeaderClassName(className?: string): string;
+export declare function cardBodyClassName(className?: string): string;
+export declare function cardFooterClassName(className?: string): string;

package/dist/components/card/card.styles.js

@@ -0,0 +1,13 @@
+import { cn } from "../../utils/cn.js";
+export function cardClassName(className) {
+    return cn("rounded-[var(--kp-radius-lg)] border border-border bg-surface text-foreground", "shadow-[var(--kp-shadow-surface)]", className);
+}
+export function cardHeaderClassName(className) {
+    return cn("flex flex-col gap-1 px-4 pb-0 pt-4", className);
+}
+export function cardBodyClassName(className) {
+    return cn("px-4 py-3 text-sm leading-relaxed text-pretty", className);
+}
+export function cardFooterClassName(className) {
+    return cn("flex flex-wrap items-center gap-2 border-t border-border/70 px-4 py-3", className);
+}

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

@@ -0,0 +1,4 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type CardProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+};

package/dist/components/card/card.types.js

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

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

@@ -0,0 +1,2 @@
+export { Card, CardBody, CardFooter, CardHeader, } from "./card.js";
+export type { CardProps } from "./card.types.js";

package/dist/components/card/index.js

@@ -0,0 +1 @@
+export { Card, CardBody, CardFooter, CardHeader, } from "./card.js";

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,2 @@
+import type { CheckboxProps } from "./checkbox.types.js";
+export declare function Checkbox({ children, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, m } from "motion/react";
+import { Checkbox as AriaCheckbox } from "react-aria-components";
+import { iconPop, iconState } from "@hewnui/motion";
+import { useMotionMode } from "../../providers/motion-provider.js";
+import { checkboxBoxClass, checkboxClassName, checkboxMarkClass, } from "./checkbox.styles.js";
+function CheckMark({ animate }) {
+    const mark = (_jsx("svg", { viewBox: "0 0 12 12", className: checkboxMarkClass, "aria-hidden": true, children: _jsx("path", { d: "M2.5 6.2 4.8 8.5 9.5 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    if (!animate)
+        return mark;
+    return (_jsx(m.span, { className: "flex", variants: iconState, initial: "hidden", animate: "visible", exit: "hidden", transition: iconPop, children: mark }));
+}
+export function Checkbox({ children, className, ...props }) {
+    const { motionEnabled } = useMotionMode();
+    return (_jsx(AriaCheckbox, { ...props, className: checkboxClassName(className), children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: checkboxBoxClass, "data-kp-control": "checkbox", children: _jsx(AnimatePresence, { initial: false, children: isSelected ? (_jsx(CheckMark, { animate: motionEnabled }, "check")) : null }) }), children ? _jsx("span", { children: children }) : null] })) }));
+}

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

@@ -0,0 +1,3 @@
+export declare function checkboxClassName(className?: string | undefined): string;
+export declare const checkboxBoxClass: string;
+export declare const checkboxMarkClass = "size-3 text-accent-foreground drop-shadow-[0_1px_0_oklch(0_0_0/20%)]";

package/dist/components/checkbox/checkbox.styles.js

@@ -0,0 +1,6 @@
+import { cn } from "../../utils/cn.js";
+export function checkboxClassName(className) {
+    return cn("group flex min-h-10 items-center gap-3 text-sm text-foreground outline-none", "disabled:cursor-not-allowed disabled:opacity-45", className);
+}
+export const checkboxBoxClass = cn("relative flex size-5 shrink-0 items-center justify-center", "rounded-[calc(var(--kp-radius-sm)-0.125rem)] border", "border-[color-mix(in_oklch,var(--kp-foreground)_22%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_88%,var(--kp-foreground)_4%)]", "shadow-[inset_0_1px_0_oklch(1_0_0/55%),0_1px_2px_oklch(0_0_0/8%)]", "transition-[background-color,border-color,box-shadow,transform]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "group-data-[selected]:border-accent group-data-[selected]:bg-accent", "group-data-[selected]:shadow-[inset_0_1px_0_oklch(1_0_0/30%),0_0_0_3px_color-mix(in_oklch,var(--kp-accent)_20%,transparent)]", "group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-ring", "group-data-[focus-visible]:ring-offset-2 group-data-[focus-visible]:ring-offset-background", "group-data-[pressed]:scale-[0.96]");
+export const checkboxMarkClass = "size-3 text-accent-foreground drop-shadow-[0_1px_0_oklch(0_0_0/20%)]";

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

@@ -0,0 +1,6 @@
+import type { CheckboxProps as AriaCheckboxProps } from "react-aria-components";
+import type { ReactNode } from "react";
+export type CheckboxProps = Omit<AriaCheckboxProps, "className" | "children"> & {
+    children?: ReactNode;
+    className?: string;
+};

package/dist/components/checkbox/checkbox.types.js

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

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

@@ -0,0 +1,2 @@
+export { Checkbox } from "./checkbox.js";
+export type { CheckboxProps } from "./checkbox.types.js";

package/dist/components/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from "./checkbox.js";

package/dist/components/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,2 @@
+import type { CheckboxGroupProps } from "./checkbox-group.types.js";
+export declare function CheckboxGroup({ children, className, description, errorMessage, label, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkbox-group/checkbox-group.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckboxGroup as AriaCheckboxGroup, FieldError, Label, Text, } from "react-aria-components";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, } from "../../styles/field.js";
+import { checkboxGroupClassName, checkboxGroupItemsClass, } from "./checkbox-group.styles.js";
+export function CheckboxGroup({ children, className, description, errorMessage, label, ...props }) {
+    return (_jsxs(AriaCheckboxGroup, { ...props, className: checkboxGroupClassName(className), children: [label ? _jsx(Label, { className: fieldLabelClass, children: label }) : null, _jsx("div", { className: checkboxGroupItemsClass, children: children }), description ? (_jsx(Text, { slot: "description", className: fieldDescriptionClass, children: description })) : null, _jsx(FieldError, { className: fieldErrorClass, children: errorMessage })] }));
+}

package/dist/components/checkbox-group/checkbox-group.styles.d.ts

@@ -0,0 +1,2 @@
+export declare function checkboxGroupClassName(className?: string | undefined): string;
+export declare const checkboxGroupItemsClass = "flex flex-col gap-1";

package/dist/components/checkbox-group/checkbox-group.styles.js

@@ -0,0 +1,5 @@
+import { cn } from "../../utils/cn.js";
+export function checkboxGroupClassName(className) {
+    return cn("flex w-full max-w-sm flex-col gap-2 text-sm text-foreground", className);
+}
+export const checkboxGroupItemsClass = "flex flex-col gap-1";

package/dist/components/checkbox-group/checkbox-group.types.d.ts

@@ -0,0 +1,9 @@
+import type { CheckboxGroupProps as AriaCheckboxGroupProps } from "react-aria-components";
+import type { ReactNode } from "react";
+export type CheckboxGroupProps = Omit<AriaCheckboxGroupProps, "className" | "children"> & {
+    children: ReactNode;
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    className?: string;
+};

package/dist/components/checkbox-group/checkbox-group.types.js

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

package/dist/components/checkbox-group/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckboxGroup } from "./checkbox-group.js";
+export type { CheckboxGroupProps } from "./checkbox-group.types.js";

package/dist/components/checkbox-group/index.js

@@ -0,0 +1 @@
+export { CheckboxGroup } from "./checkbox-group.js";

package/dist/components/color-picker/color-picker.d.ts

@@ -0,0 +1,2 @@
+import type { ColorPickerProps } from "./color-picker.types.js";
+export declare function ColorPicker({ className, defaultValue, description, errorMessage, isDisabled, isRequired, label, name, onChange, presets, showAlpha, showOklch, value, variant, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/color-picker/color-picker.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ColorPicker as AriaColorPicker, ColorSwatch, Dialog, DialogTrigger, Label, Popover, Text, parseColor, } from "react-aria-components";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, } from "../../styles/field.js";
+import { ColorPickerPanel } from "./color-picker.panel.js";
+import { colorPickerClassName, colorPickerPopoverClass, colorPickerSwatchPreviewClass, colorPickerTriggerClass, defaultColorPresets, } from "./color-picker.styles.js";
+function toHex(color) {
+    if (typeof color === "string") {
+        try {
+            return parseColor(color).toString("hex");
+        }
+        catch {
+            return color;
+        }
+    }
+    return color.toString("hex");
+}
+export function ColorPicker({ className, defaultValue = "#1a6b4a", description, errorMessage, isDisabled, isRequired, label, name, onChange, presets = defaultColorPresets, showAlpha = true, showOklch = true, value, variant = "popover", }) {
+    const handleChange = (color) => {
+        onChange?.(toHex(color));
+    };
+    const panel = (_jsx(ColorPickerPanel, { showAlpha: showAlpha, showOklch: showOklch, presets: presets, isDisabled: isDisabled }));
+    return (_jsx(AriaColorPicker, { ...(value !== undefined ? { value } : {}), ...(value === undefined ? { defaultValue } : {}), onChange: handleChange, children: ({ color }) => {
+            const hex = toHex(color);
+            return (_jsxs("div", { className: colorPickerClassName(className), children: [label ? _jsx(Label, { className: fieldLabelClass, children: label }) : null, variant === "inline" ? (panel) : (_jsxs(DialogTrigger, { children: [_jsxs(Button, { className: colorPickerTriggerClass, "data-kp-surface": true, ...(isDisabled ? { isDisabled: true } : {}), ...(isRequired ? { "aria-required": true } : {}), children: [_jsx(ColorSwatch, { className: colorPickerSwatchPreviewClass, color: color }), _jsx("span", { className: "font-mono text-sm tabular-nums", children: hex })] }), _jsx(Popover, { className: colorPickerPopoverClass, "data-kp-surface": true, children: _jsx(Dialog, { className: "outline-none", children: panel }) })] })), description ? (_jsx(Text, { slot: "description", className: fieldDescriptionClass, children: description })) : null, errorMessage ? (_jsx("p", { className: fieldErrorClass, role: "alert", children: errorMessage })) : null, name ? (_jsx("input", { type: "hidden", name: name, value: hex, readOnly: true, required: isRequired })) : null] }));
+        } }));
+}

package/dist/components/color-picker/color-picker.oklch.d.ts

@@ -0,0 +1,2 @@
+/** Display-only RGB → OKLCH. React Aria does not parse or edit OKLCH natively. */
+export declare function hexToOklchDisplay(hex: string): string | null;

package/dist/components/color-picker/color-picker.oklch.js

@@ -0,0 +1,54 @@
+/** Display-only RGB → OKLCH. React Aria does not parse or edit OKLCH natively. */
+function srgbToLinear(channel) {
+    const c = channel / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+function rgbToOklab(r, g, b) {
+    const lr = srgbToLinear(r);
+    const lg = srgbToLinear(g);
+    const lb = srgbToLinear(b);
+    const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+    const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+    const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
+    const l_ = Math.cbrt(l);
+    const m_ = Math.cbrt(m);
+    const s_ = Math.cbrt(s);
+    return [
+        0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+        1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+        0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,
+    ];
+}
+function parseHex(hex) {
+    const raw = hex.replace("#", "").trim();
+    const full = raw.length === 3
+        ? raw
+            .split("")
+            .map((c) => c + c)
+            .join("")
+        : raw.slice(0, 6);
+    if (!/^[0-9a-fA-F]{6}$/.test(full)) {
+        return null;
+    }
+    return [
+        Number.parseInt(full.slice(0, 2), 16),
+        Number.parseInt(full.slice(2, 4), 16),
+        Number.parseInt(full.slice(4, 6), 16),
+    ];
+}
+export function hexToOklchDisplay(hex) {
+    const rgb = parseHex(hex);
+    if (!rgb) {
+        return null;
+    }
+    const [L, a, b] = rgbToOklab(rgb[0], rgb[1], rgb[2]);
+    const C = Math.sqrt(a * a + b * b);
+    let H = (Math.atan2(b, a) * 180) / Math.PI;
+    if (H < 0) {
+        H += 360;
+    }
+    const l = (L * 100).toFixed(1);
+    const c = C.toFixed(3);
+    const h = H.toFixed(1);
+    return `oklch(${l}% ${c} ${h})`;
+}

package/dist/components/color-picker/color-picker.panel.d.ts

@@ -0,0 +1,2 @@
+import type { ColorPickerPanelProps } from "./color-picker.types.js";
+export declare function ColorPickerPanel({ showAlpha, showOklch, presets, isDisabled, }: ColorPickerPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/color-picker/color-picker.panel.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useId } from "react";
+import { ColorArea, ColorField, ColorPickerStateContext, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, ColorThumb, Input, Label, SliderTrack, } from "react-aria-components";
+import { fieldLabelClass } from "../../styles/field.js";
+import { hexToOklchDisplay } from "./color-picker.oklch.js";
+import { colorAreaClass, colorFieldClass, colorFieldInputClass, colorOklchReadoutClass, colorPickerPanelClass, colorSliderClass, colorSliderTrackClass, colorSwatchClass, colorSwatchItemClass, colorSwatchPickerClass, colorThumbClass, } from "./color-picker.styles.js";
+export function ColorPickerPanel({ showAlpha, showOklch, presets, isDisabled, }) {
+    const oklchId = useId();
+    const colorState = useContext(ColorPickerStateContext);
+    const hex = colorState?.color.toString("hex") ?? "#000000";
+    const oklch = showOklch ? hexToOklchDisplay(hex) : null;
+    const disabledProps = isDisabled ? { isDisabled: true } : {};
+    return (_jsxs("div", { className: colorPickerPanelClass, children: [_jsx(ColorArea, { "aria-label": "Saturation and brightness", colorSpace: "hsb", xChannel: "saturation", yChannel: "brightness", className: colorAreaClass, ...disabledProps, children: _jsx(ColorThumb, { className: colorThumbClass }) }), _jsxs(ColorSlider, { channel: "hue", colorSpace: "hsb", className: colorSliderClass, ...disabledProps, children: [_jsx(Label, { className: fieldLabelClass, children: "Hue" }), _jsx(SliderTrack, { className: colorSliderTrackClass, children: _jsx(ColorThumb, { className: colorThumbClass }) })] }), showAlpha ? (_jsxs(ColorSlider, { channel: "alpha", className: colorSliderClass, ...disabledProps, children: [_jsx(Label, { className: fieldLabelClass, children: "Alpha" }), _jsx(SliderTrack, { className: colorSliderTrackClass, children: _jsx(ColorThumb, { className: colorThumbClass }) })] })) : null, _jsxs(ColorField, { className: colorFieldClass, ...disabledProps, children: [_jsx(Label, { className: fieldLabelClass, children: "Hex" }), _jsx(Input, { className: colorFieldInputClass })] }), showOklch ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: fieldLabelClass, id: oklchId, children: "OKLCH" }), _jsx("output", { className: colorOklchReadoutClass, "aria-labelledby": oklchId, "aria-live": "polite", children: oklch ?? "—" })] })) : null, presets.length > 0 ? (_jsx(ColorSwatchPicker, { "aria-label": "Color presets", className: colorSwatchPickerClass, children: presets.map((color) => (_jsx(ColorSwatchPickerItem, { color: color, className: colorSwatchItemClass, children: _jsx(ColorSwatch, { className: colorSwatchClass }) }, color))) })) : null] }));
+}

package/dist/components/color-picker/color-picker.styles.d.ts

@@ -0,0 +1,16 @@
+export declare function colorPickerClassName(className?: string | undefined): string;
+export declare const colorPickerTriggerClass: string;
+export declare const colorPickerSwatchPreviewClass: string;
+export declare const colorPickerPopoverClass: string;
+export declare const colorPickerPanelClass = "flex w-[16.5rem] flex-col gap-3 outline-none";
+export declare const colorAreaClass: string;
+export declare const colorThumbClass: string;
+export declare const colorSliderClass = "flex flex-col gap-1.5";
+export declare const colorSliderTrackClass: string;
+export declare const colorFieldClass = "flex flex-col gap-1.5";
+export declare const colorFieldInputClass: string;
+export declare const colorSwatchPickerClass = "flex flex-wrap gap-2";
+export declare const colorSwatchItemClass: string;
+export declare const colorSwatchClass: string;
+export declare const colorOklchReadoutClass = "font-mono text-xs tabular-nums text-muted-foreground";
+export declare const defaultColorPresets: string[];