@hewnui/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,3 @@
+export declare function popoverClassName(className?: string | undefined): string;
+export declare const popoverTitleClass = "text-sm font-medium text-foreground";
+export declare const popoverBodyClass = "mt-1.5 text-sm text-muted-foreground";

package/dist/components/popover/popover.styles.js

@@ -0,0 +1,7 @@
+import { cn } from "../../utils/cn";
+import { popoverSurfaceClass } from "../../styles/overlays";
+export function popoverClassName(className) {
+    return cn(popoverSurfaceClass, "min-w-56 p-3", className);
+}
+export const popoverTitleClass = "text-sm font-medium text-foreground";
+export const popoverBodyClass = "mt-1.5 text-sm text-muted-foreground";

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { OverlayPlacement } from "../tooltip/tooltip.types";
+export type PopoverProps = {
+    children: ReactNode;
+    className?: string;
+    placement?: OverlayPlacement;
+    offset?: number;
+};
+export type PopoverTriggerProps = {
+    children: ReactNode;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+};

package/dist/components/popover/popover.types.js

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

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

@@ -0,0 +1,2 @@
+export { Progress } from "./progress";
+export type { ProgressSize, ProgressVariant } from "./progress";

package/dist/components/progress/index.js

@@ -0,0 +1 @@
+export { Progress } from "./progress";

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,12 @@
+export type ProgressVariant = "default" | "gradient" | "glass" | "success" | "danger";
+export type ProgressSize = "sm" | "md" | "lg";
+export declare function Progress({ className, label, value, minValue, maxValue, isIndeterminate, size, variant, }: {
+    className?: string | undefined;
+    label?: string;
+    value?: number;
+    minValue?: number;
+    maxValue?: number;
+    isIndeterminate?: boolean;
+    size?: ProgressSize;
+    variant?: ProgressVariant;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress/progress.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ProgressBar as AriaProgressBar, Label } from "react-aria-components";
+import { cn } from "../../utils/cn";
+const trackSizes = {
+    sm: "h-1.5",
+    md: "h-2.5",
+    lg: "h-4",
+};
+const fillVariants = {
+    default: "bg-accent shadow-[inset_0_1px_0_oklch(1_0_0/30%)]",
+    gradient: "bg-gradient-to-r from-accent to-[color-mix(in_oklch,var(--kp-accent)_75%,white)] shadow-[inset_0_1px_0_oklch(1_0_0/40%)]",
+    glass: "bg-accent backdrop-blur-sm shadow-[inset_0_1px_0_oklch(1_0_0/40%)]",
+    success: "bg-success shadow-[inset_0_1px_0_oklch(1_0_0/30%)]",
+    danger: "bg-danger shadow-[inset_0_1px_0_oklch(1_0_0/30%)]",
+};
+export function Progress({ className, label, value = 0, minValue = 0, maxValue = 100, isIndeterminate, size = "md", variant = "default", }) {
+    return (_jsx(AriaProgressBar, { className: cn("flex w-full max-w-sm flex-col gap-2 text-sm", className), value: value, minValue: minValue, maxValue: maxValue, ...(isIndeterminate !== undefined ? { isIndeterminate } : {}), children: ({ percentage = 0 }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [label ? _jsx(Label, { className: "font-medium", children: label }) : null, !isIndeterminate ? (_jsxs("span", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: [Math.round(percentage), "%"] })) : (_jsx("span", { className: "font-mono text-xs text-muted-foreground", children: "\u2026" }))] }), _jsx("div", { "data-kp-control": "progress-track", className: cn("relative overflow-hidden rounded-full border border-[color-mix(in_oklch,var(--kp-foreground)_12%,transparent)]", variant === "glass"
+                        ? "bg-[color-mix(in_oklch,var(--kp-surface)_45%,transparent)] backdrop-blur-md backdrop-saturate-150"
+                        : "bg-[color-mix(in_oklch,var(--kp-muted)_75%,transparent)] shadow-[inset_0_1px_1px_oklch(0_0_0/12%)]", trackSizes[size]), children: _jsx("div", { className: cn("h-full w-full origin-left rounded-full transition-transform duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", fillVariants[variant], isIndeterminate &&
+                            "absolute inset-y-0 !w-1/3 kp-progress-indeterminate motion-reduce:animate-pulse"), style: isIndeterminate
+                            ? undefined
+                            : {
+                                transform: `scaleX(${Math.max(0, Math.min(1, percentage / 100))})`,
+                            } }) })] })) }));
+}

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

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from "./radio-group";
+export type { RadioGroupProps, RadioProps } from "./radio-group.types";

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

@@ -0,0 +1 @@
+export { Radio, RadioGroup } from "./radio-group";

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

@@ -0,0 +1,3 @@
+import type { RadioGroupProps, RadioProps } from "./radio-group.types";
+export declare function RadioGroup({ children, className, description, errorMessage, label, orientation, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function Radio({ children, className, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AnimatePresence, m } from "motion/react";
+import { FieldError, Label, Radio as AriaRadio, RadioGroup as AriaRadioGroup, Text, } from "react-aria-components";
+import { iconPop, iconState } from "@hewnui/motion";
+import { useMotionMode } from "../../providers/motion-provider";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, } from "../../styles/field";
+import { radioClassName, radioControlClass, radioDotClass, radioGroupClassName, radioGroupItemsClass, } from "./radio-group.styles";
+function RadioDot({ animate }) {
+    if (!animate) {
+        return _jsx("span", { className: radioDotClass });
+    }
+    return (_jsx(m.span, { className: radioDotClass, variants: iconState, initial: "hidden", animate: "visible", exit: "hidden", transition: iconPop }));
+}
+export function RadioGroup({ children, className, description, errorMessage, label, orientation = "vertical", ...props }) {
+    return (_jsxs(AriaRadioGroup, { ...props, orientation: orientation, className: radioGroupClassName(className), children: [label ? _jsx(Label, { className: fieldLabelClass, children: label }) : null, description ? (_jsx(Text, { slot: "description", className: fieldDescriptionClass, children: description })) : null, _jsx("div", { className: radioGroupItemsClass(orientation), children: children }), _jsx(FieldError, { className: fieldErrorClass, children: errorMessage })] }));
+}
+export function Radio({ children, className, ...props }) {
+    const { motionEnabled } = useMotionMode();
+    return (_jsx(AriaRadio, { ...props, className: radioClassName(className), children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: radioControlClass, "data-kp-control": "radio", children: _jsx(AnimatePresence, { initial: false, children: isSelected ? (_jsx(RadioDot, { animate: motionEnabled }, "dot")) : null }) }), children ? _jsx("span", { children: children }) : null] })) }));
+}

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

@@ -0,0 +1,5 @@
+export declare function radioGroupClassName(className?: string | undefined): string;
+export declare function radioGroupItemsClass(orientation?: "horizontal" | "vertical"): string;
+export declare function radioClassName(className?: string | undefined): string;
+export declare const radioControlClass: string;
+export declare const radioDotClass: string;

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

@@ -0,0 +1,14 @@
+import { cn } from "../../utils/cn";
+export function radioGroupClassName(className) {
+    return cn("flex w-full max-w-sm flex-col gap-2.5 text-sm text-foreground", className);
+}
+export function radioGroupItemsClass(orientation = "vertical") {
+    return cn("flex", orientation === "horizontal"
+        ? "flex-row flex-wrap gap-x-1 gap-y-1"
+        : "flex-col gap-1");
+}
+export function radioClassName(className) {
+    return cn("group flex min-h-11 items-center gap-3 rounded-[var(--kp-radius-md)] px-2.5 py-1.5", "text-sm text-foreground outline-none", "transition-[background-color,transform,color]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "hover:bg-[color-mix(in_oklch,var(--kp-muted)_52%,transparent)]", "data-[selected]:bg-[color-mix(in_oklch,var(--kp-accent)_10%,transparent)]", "data-[selected]:font-medium", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring/45", "data-[focus-visible]:ring-offset-2 data-[focus-visible]:ring-offset-background", "data-[pressed]:scale-[0.98]", "disabled:cursor-not-allowed disabled:opacity-45", className);
+}
+export const radioControlClass = cn("relative flex size-5 shrink-0 items-center justify-center", "rounded-full border", "border-[color-mix(in_oklch,var(--kp-foreground)_36%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_82%,var(--kp-foreground)_8%)]", "shadow-[inset_0_1px_0_oklch(1_0_0/45%),inset_0_0_0_1px_oklch(1_0_0/4%)]", "transition-[background-color,border-color,box-shadow,transform]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "group-hover:border-[color-mix(in_oklch,var(--kp-foreground)_48%,transparent)]", "group-data-[selected]:border-accent group-data-[selected]:bg-accent", "group-data-[selected]:shadow-[inset_0_1px_0_oklch(1_0_0/38%)]", "group-data-[pressed]:scale-[0.96]");
+export const radioDotClass = cn("size-2 rounded-full", "bg-[color-mix(in_oklch,var(--kp-accent-foreground)_94%,white)]", "shadow-[inset_0_1px_0_oklch(1_0_0/35%),0_1px_1px_oklch(0_0_0/18%)]");

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

@@ -0,0 +1,14 @@
+import type { RadioGroupProps as AriaRadioGroupProps, RadioProps as AriaRadioProps } from "react-aria-components";
+import type { ReactNode } from "react";
+export type RadioGroupProps = Omit<AriaRadioGroupProps, "className" | "children"> & {
+    children: ReactNode;
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    className?: string;
+    orientation?: "horizontal" | "vertical";
+};
+export type RadioProps = Omit<AriaRadioProps, "className" | "children"> & {
+    children?: ReactNode;
+    className?: string;
+};

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

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

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

@@ -0,0 +1,2 @@
+export { SearchField } from "./search-field";
+export type { SearchFieldProps, SearchFieldSize, SearchFieldVariant, } from "./search-field.types";

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

@@ -0,0 +1 @@
+export { SearchField } from "./search-field";

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

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

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, FieldError, Group, Input, Label, SearchField as AriaSearchField, Text, } from "react-aria-components";
+import { cn } from "../../utils/cn";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldRootClass, fieldSurfaceProps, } from "../../styles/field";
+import { searchClearClass, searchGroupClassName, searchInputClass, } from "./search-field.styles";
+function SearchIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 16 16", className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true, children: [_jsx("circle", { cx: "7", cy: "7", r: "4.25", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M10.2 10.2 13.5 13.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+}
+function ClearIcon() {
+    return (_jsx("svg", { viewBox: "0 0 12 12", className: "size-3.5", "aria-hidden": true, children: _jsx("path", { d: "M2.5 2.5 9.5 9.5M9.5 2.5 2.5 9.5", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }));
+}
+export function SearchField({ className, description, errorMessage, inputClassName: inputClass, label, placeholder = "Search", size = "md", variant = "outline", ...props }) {
+    return (_jsxs(AriaSearchField, { ...props, className: cn(fieldRootClass, className), children: [label ? _jsx(Label, { className: fieldLabelClass, children: label }) : null, _jsxs(Group, { ...fieldSurfaceProps(variant), className: searchGroupClassName({ size, variant }), children: [_jsx(SearchIcon, {}), _jsx(Input, { className: cn(searchInputClass, inputClass), ...(placeholder !== undefined ? { placeholder } : {}) }), _jsx(Button, { slot: "clear", className: searchClearClass, "aria-label": "Clear search", children: _jsx(ClearIcon, {}) })] }), description ? (_jsx(Text, { slot: "description", className: fieldDescriptionClass, children: description })) : null, _jsx(FieldError, { className: fieldErrorClass, children: errorMessage })] }));
+}

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

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

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

@@ -0,0 +1,7 @@
+import { cn } from "../../utils/cn";
+import { inputSurfaceClassName, } from "../../styles/field";
+export function searchGroupClassName({ className, size = "md", variant = "outline", } = {}) {
+    return cn(inputSurfaceClassName({ size, variant }), "flex items-center gap-1.5", className);
+}
+export const searchInputClass = "min-w-0 flex-1 bg-transparent p-0 text-foreground outline-none placeholder:text-muted-foreground";
+export const searchClearClass = 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,opacity]", "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/search-field/search-field.types.d.ts

@@ -0,0 +1,15 @@
+import type { SearchFieldProps as AriaSearchFieldProps } from "react-aria-components";
+import type { ReactNode } from "react";
+import type { FieldSize, FieldVariant } from "../../styles/field";
+export type SearchFieldVariant = FieldVariant;
+export type SearchFieldSize = FieldSize;
+export type SearchFieldProps = Omit<AriaSearchFieldProps, "className" | "children"> & {
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    placeholder?: string;
+    className?: string;
+    inputClassName?: string;
+    variant?: SearchFieldVariant;
+    size?: SearchFieldSize;
+};

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

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

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

@@ -0,0 +1,5 @@
+import { Select, SelectItem } from "./select";
+export declare const SelectRoot: typeof Select & {
+    Item: typeof SelectItem;
+};
+export { Select, SelectItem };

package/dist/components/select/index.js

@@ -0,0 +1,5 @@
+import { Select, SelectItem } from "./select";
+export const SelectRoot = Object.assign(Select, {
+    Item: SelectItem,
+});
+export { Select, SelectItem };

package/dist/components/select/select.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type SelectProps as AriaSelectProps } from "react-aria-components";
+import { type SelectVariant } from "./select.styles";
+type SelectProps = Omit<AriaSelectProps<object>, "children" | "className"> & {
+    children: ReactNode;
+    className?: string | undefined;
+    label?: ReactNode;
+    variant?: SelectVariant;
+};
+export declare function Select({ children, className, label, placeholder, variant, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectItem({ children, id, textValue, }: {
+    children: ReactNode;
+    id: string;
+    textValue?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/select/select.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Label, ListBox, ListBoxItem, Popover, Select as AriaSelect, SelectValue, } from "react-aria-components";
+import { selectItemClass, selectPopoverClass, selectTriggerClass, selectValueClass, } from "./select.styles";
+import { fieldSurfaceProps } from "../../styles/field";
+export function Select({ children, className, label, placeholder = "Select an option", variant = "outline", ...props }) {
+    return (_jsxs(AriaSelect, { ...props, placeholder: placeholder, className: "flex w-full max-w-sm flex-col gap-1.5 text-sm", children: [label ? _jsx(Label, { className: "font-medium", children: label }) : null, _jsxs(Button, { className: selectTriggerClass(className, variant), ...fieldSurfaceProps(variant), children: [_jsx(SelectValue, { className: selectValueClass }), _jsx("span", { "aria-hidden": true, className: "text-muted-foreground", children: "\u25BE" })] }), _jsx(Popover, { className: selectPopoverClass, "data-kp-surface": true, children: _jsx(ListBox, { className: "outline-none", children: children }) })] }));
+}
+export function SelectItem({ children, id, textValue, }) {
+    return (_jsx(ListBoxItem, { id: id, className: selectItemClass, ...(textValue !== undefined ? { textValue } : {}), children: children }));
+}

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

@@ -0,0 +1,5 @@
+export type SelectVariant = "outline" | "filled" | "flushed" | "glass";
+export declare function selectTriggerClass(className?: string, variant?: SelectVariant): string;
+export declare const selectValueClass = "truncate text-foreground";
+export declare const selectPopoverClass: string;
+export declare const selectItemClass: string;

package/dist/components/select/select.styles.js

@@ -0,0 +1,13 @@
+import { cn } from "../../utils/cn";
+const triggerVariants = {
+    outline: cn("rounded-[var(--kp-radius-md)] border px-3", "border-[color-mix(in_oklch,var(--kp-foreground)_16%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_88%,var(--kp-foreground)_4%)]", "shadow-[var(--kp-shadow-surface),inset_0_1px_0_oklch(1_0_0/35%)]", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring"),
+    filled: cn("rounded-[var(--kp-radius-md)] border border-transparent px-3", "bg-[color-mix(in_oklch,var(--kp-muted)_72%,transparent)]", "shadow-[inset_0_1px_0_oklch(1_0_0/18%)]", "hover:bg-[color-mix(in_oklch,var(--kp-muted)_88%,transparent)]", "data-[focus-visible]:border-ring data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring/30"),
+    flushed: cn("rounded-none border-0 border-b-2 border-solid bg-transparent px-0", "border-b-[color-mix(in_oklch,var(--kp-foreground)_32%,transparent)]", "shadow-none", "data-[focus-visible]:border-b-ring data-[focus-visible]:ring-0", "data-[focus-visible]:shadow-[0_1px_0_0_color-mix(in_oklch,var(--kp-ring)_55%,transparent)]"),
+    glass: cn("rounded-[var(--kp-radius-md)] border px-3", "border-[color-mix(in_oklch,var(--kp-foreground)_14%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_42%,transparent)]", "backdrop-blur-md backdrop-saturate-150", "shadow-[inset_0_1px_0_oklch(1_0_0/42%),inset_0_0_0_1px_oklch(1_0_0/8%),0_8px_24px_-14px_oklch(0_0_0/28%)]", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring"),
+};
+export function selectTriggerClass(className, variant = "outline") {
+    return cn("inline-flex min-h-11 min-w-52 items-center justify-between gap-3 text-sm outline-none", "transition-[transform,background-color,border-color,box-shadow]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "data-[pressed]:scale-[0.96] data-[disabled]:opacity-45", triggerVariants[variant], className);
+}
+export const selectValueClass = "truncate text-foreground";
+export const selectPopoverClass = cn("min-w-[var(--trigger-width)] overflow-auto rounded-[var(--kp-radius-panel)]", "border bg-surface-raised p-1 shadow-[var(--kp-shadow-surface)] outline-none");
+export const selectItemClass = cn("flex cursor-default items-center rounded-[var(--kp-radius-sm)]", "px-3 py-2 text-sm outline-none", "data-[focused]:bg-muted data-[selected]:font-medium");

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

@@ -0,0 +1 @@
+export { Skeleton } from "./skeleton";

package/dist/components/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from "./skeleton";

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,3 @@
+export declare function Skeleton({ className, }: {
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn";
+export function Skeleton({ className, }) {
+    return (_jsx("div", { "aria-hidden": true, "data-kp-control": "skeleton", className: cn("animate-pulse rounded-[var(--kp-radius-md)]", "bg-[color-mix(in_oklch,var(--kp-muted)_88%,var(--kp-foreground)_6%)]", "shadow-[inset_0_1px_0_oklch(1_0_0/35%)]", className ?? "h-4 w-full") }));
+}

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

@@ -0,0 +1,2 @@
+export { Slider } from "./slider";
+export type { SliderProps } from "./slider.types";

package/dist/components/slider/index.js

@@ -0,0 +1 @@
+export { Slider } from "./slider";

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,2 @@
+import type { SliderProps } from "./slider.types";
+export declare function Slider({ className, description, label, showOutput, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/slider.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Label, Slider as AriaSlider, SliderOutput, SliderThumb, SliderTrack, Text, } from "react-aria-components";
+import { fieldDescriptionClass, fieldLabelClass, } from "../../styles/field";
+import { sliderClassName, sliderFillClass, sliderHeaderClass, sliderOutputClass, sliderThumbClass, sliderTrackClass, } from "./slider.styles";
+export function Slider({ className, description, label, showOutput = true, ...props }) {
+    return (_jsxs(AriaSlider, { ...props, className: sliderClassName(className), children: [_jsxs("div", { className: sliderHeaderClass, children: [label ? _jsx(Label, { className: fieldLabelClass, children: label }) : null, showOutput ? (_jsx(SliderOutput, { className: sliderOutputClass })) : null] }), _jsx(SliderTrack, { className: sliderTrackClass, children: ({ state }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: sliderFillClass, style: { width: `${state.getThumbPercent(0) * 100}%` } }), _jsx(SliderThumb, { className: sliderThumbClass, index: 0 })] })) }), description ? (_jsx(Text, { slot: "description", className: fieldDescriptionClass, children: description })) : null] }));
+}

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

@@ -0,0 +1,6 @@
+export declare function sliderClassName(className?: string | undefined): string;
+export declare const sliderHeaderClass = "flex items-baseline justify-between gap-3";
+export declare const sliderOutputClass = "font-mono text-xs tabular-nums text-muted-foreground";
+export declare const sliderTrackClass: string;
+export declare const sliderFillClass: string;
+export declare const sliderThumbClass: string;

package/dist/components/slider/slider.styles.js

@@ -0,0 +1,9 @@
+import { cn } from "../../utils/cn";
+export function sliderClassName(className) {
+    return cn("flex w-full max-w-sm flex-col gap-2 text-sm text-foreground", "disabled:cursor-not-allowed disabled:opacity-45", className);
+}
+export const sliderHeaderClass = "flex items-baseline justify-between gap-3";
+export const sliderOutputClass = "font-mono text-xs tabular-nums text-muted-foreground";
+export const sliderTrackClass = cn("relative h-10 w-full", "before:absolute before:top-1/2 before:h-1.5 before:w-full before:-translate-y-1/2", "before:rounded-full before:bg-[color-mix(in_oklch,var(--kp-muted)_85%,var(--kp-foreground)_8%)]", "before:shadow-[inset_0_1px_0_oklch(0_0_0/8%)]");
+export const sliderFillClass = cn("absolute top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-accent", "shadow-[inset_0_1px_0_oklch(1_0_0/25%)]");
+export const sliderThumbClass = cn("top-1/2 size-5 -translate-y-1/2 rounded-full border", "border-[color-mix(in_oklch,var(--kp-foreground)_18%,transparent)]", "bg-surface shadow-[var(--kp-shadow-surface),inset_0_1px_0_oklch(1_0_0/55%)]", "outline-none transition-[box-shadow,transform]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "dragging:scale-[0.96] data-[dragging]:scale-[0.96]", "focus-visible:ring-2 focus-visible:ring-ring/40");

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

@@ -0,0 +1,8 @@
+import type { SliderProps as AriaSliderProps } from "react-aria-components";
+import type { ReactNode } from "react";
+export type SliderProps = Omit<AriaSliderProps, "className" | "children"> & {
+    label?: ReactNode;
+    description?: ReactNode;
+    className?: string;
+    showOutput?: boolean;
+};

package/dist/components/slider/slider.types.js

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

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

@@ -0,0 +1 @@
+export { Sparkline, type SparklineProps } from "./sparkline";

package/dist/components/sparkline/index.js

@@ -0,0 +1 @@
+export { Sparkline } from "./sparkline";

package/dist/components/sparkline/sparkline.d.ts

@@ -0,0 +1,11 @@
+import type { ChartDatum, ChartStatus } from "../../chart/types";
+export type SparklineProps = {
+    data: ChartDatum[] | number[];
+    className?: string;
+    width?: number;
+    height?: number;
+    summary: string;
+    status?: ChartStatus;
+    color?: string;
+};
+export declare function Sparkline({ data, className, width, height, summary, status, color, }: SparklineProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/sparkline/sparkline.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { drawIn } from "@hewnui/motion";
+import { m } from "motion/react";
+import { useMotionMode } from "../../providers/motion-provider";
+import { seriesColor } from "../../chart/colors";
+import { ChartFrame } from "../../chart/frame";
+import { linePath } from "../../chart/path";
+import { createLinearScales, flattenSeries } from "../../chart/scales";
+import { resolveStatus } from "../../chart/status";
+function toPoints(data) {
+    if (data.length === 0)
+        return [];
+    if (typeof data[0] === "number") {
+        return data.map((y, x) => ({ x, y }));
+    }
+    return data;
+}
+export function Sparkline({ data, className, width = 160, height = 40, summary, status, color, }) {
+    const { motionEnabled } = useMotionMode();
+    const points = toPoints(data);
+    const resolved = resolveStatus(points, status);
+    const stroke = seriesColor(0, color);
+    if (resolved !== "ready") {
+        return (_jsx(ChartFrame, { className: className, width: width, height: height, summary: summary, status: resolved }));
+    }
+    const { x, y, xIsNumeric } = createLinearScales(points, {
+        width,
+        height,
+        padding: { top: 4, right: 4, bottom: 4, left: 4 },
+    });
+    const d = linePath(points, x, y, xIsNumeric);
+    return (_jsx(ChartFrame, { className: className, width: width, height: height, summary: summary, children: motionEnabled ? (_jsx(m.path, { d: d, fill: "none", stroke: stroke, strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", initial: { pathLength: 0, opacity: 0.4 }, animate: { pathLength: 1, opacity: 1 }, transition: drawIn })) : (_jsx("path", { d: d, fill: "none", stroke: stroke, strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round" })) }));
+}

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

@@ -0,0 +1 @@
+export { Spinner } from "./spinner";

package/dist/components/spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from "./spinner";

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,4 @@
+/** CSS-driven spinner — animation lives in theme tokens, not Tailwind arbitrary values. */
+export declare function Spinner({ className, }: {
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/spinner/spinner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn";
+/** CSS-driven spinner — animation lives in theme tokens, not Tailwind arbitrary values. */
+export function Spinner({ className, }) {
+    return _jsx("span", { "aria-hidden": true, className: cn("kp-spinner", className) });
+}

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

@@ -0,0 +1,3 @@
+export { Stepper, StepperStep } from "./stepper";
+export { useStepper } from "./use-stepper";
+export type { StepperOrientation, StepperProps, StepperStepProps, StepStatus, UseStepperOptions, UseStepperResult, } from "./stepper.types";

package/dist/components/stepper/index.js

@@ -0,0 +1,2 @@
+export { Stepper, StepperStep } from "./stepper";
+export { useStepper } from "./use-stepper";

package/dist/components/stepper/stepper-step.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import type { StepperOrientation, StepperStepProps, StepStatus } from "./stepper.types";
+export type StepperContextValue = {
+    orientation: StepperOrientation;
+    currentIndex?: number | undefined;
+    onStepChange?: ((index: number) => void) | undefined;
+    allowGoBack: boolean;
+};
+export declare function resolveStatus(explicit: StepStatus | undefined, index: number, currentIndex: number | undefined, isOptional: boolean | undefined): StepStatus;
+export declare function StepperStepView({ children, className, ctx, description, index, isClickable, isLast, isOptional, onPress, status: statusProp, }: StepperStepProps & {
+    isLast: boolean;
+    ctx: StepperContextValue;
+}): import("react/jsx-runtime").JSX.Element;
+/** Public step marker — collected by {@link Stepper}. */
+export declare function StepperStep(_props: StepperStepProps): ReactNode;

package/dist/components/stepper/stepper-step.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { stepperButtonClass, stepperButtonVerticalClass, stepperConnectorClass, stepperDescriptionClass, stepperIndicatorClass, stepperItemClass, stepperOptionalClass, stepperTitleClass, } from "./stepper.styles";
+export function resolveStatus(explicit, index, currentIndex, isOptional) {
+    if (explicit)
+        return explicit;
+    if (currentIndex === undefined) {
+        return isOptional ? "optional" : "upcoming";
+    }
+    if (index < currentIndex)
+        return "complete";
+    if (index === currentIndex)
+        return "current";
+    return isOptional ? "optional" : "upcoming";
+}
+function CheckGlyph() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", className: "size-4", "aria-hidden": true, children: _jsx("path", { d: "M3.5 8.5 6.5 11.5 12.5 4.5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function AlertGlyph() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", className: "size-4", "aria-hidden": true, children: _jsx("path", { d: "M8 3.5v6M8 12.2h.01", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) }));
+}
+export function StepperStepView({ children, className, ctx, description, index = 0, isClickable, isLast, isOptional, onPress, status: statusProp, }) {
+    const { allowGoBack, currentIndex, onStepChange, orientation } = ctx;
+    const status = resolveStatus(statusProp, index, currentIndex, isOptional);
+    const clickable = isClickable ??
+        Boolean(onPress ||
+            (allowGoBack &&
+                onStepChange &&
+                (status === "complete" || status === "error")));
+    function activate() {
+        if (!clickable)
+            return;
+        onPress?.();
+        onStepChange?.(index);
+    }
+    const indicator = status === "complete" ? (_jsx(CheckGlyph, {})) : status === "error" ? (_jsx(AlertGlyph, {})) : (_jsx("span", { className: "tabular-nums", children: index + 1 }));
+    const frameClass = orientation === "vertical"
+        ? stepperButtonVerticalClass(clickable)
+        : stepperButtonClass(clickable);
+    const body = (_jsxs(_Fragment, { children: [_jsx("span", { className: stepperIndicatorClass(status), "aria-hidden": true, children: indicator }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: stepperTitleClass, children: children }), isOptional || status === "optional" ? (_jsx("span", { className: stepperOptionalClass, children: "Optional" })) : null, description ? (_jsx("span", { className: stepperDescriptionClass, children: description })) : null] })] }));
+    return (_jsxs("li", { className: stepperItemClass(orientation, className), "aria-current": status === "current" ? "step" : undefined, "data-status": status, children: [!isLast ? (_jsx("span", { "aria-hidden": true, className: stepperConnectorClass(orientation, status === "complete") })) : null, clickable ? (_jsx("button", { type: "button", className: frameClass, onClick: activate, children: body })) : (_jsx("div", { className: frameClass, children: body }))] }));
+}
+/** Public step marker — collected by {@link Stepper}. */
+export function StepperStep(_props) {
+    return null;
+}

package/dist/components/stepper/stepper.d.ts

@@ -0,0 +1,4 @@
+import { StepperStep } from "./stepper-step";
+import type { StepperProps } from "./stepper.types";
+export { StepperStep };
+export declare function Stepper({ "aria-label": ariaLabel, allowGoBack, children, className, currentIndex, onStepChange, orientation, }: StepperProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/stepper/stepper.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement, useMemo, } from "react";
+import { stepperListClass } from "./stepper.styles";
+import { StepperStep, StepperStepView, } from "./stepper-step";
+export { StepperStep };
+export function Stepper({ "aria-label": ariaLabel = "Progress", allowGoBack, children, className, currentIndex, onStepChange, orientation = "horizontal", }) {
+    const canGoBack = allowGoBack ?? Boolean(onStepChange);
+    const ctx = useMemo(() => ({
+        orientation,
+        allowGoBack: canGoBack,
+        ...(currentIndex !== undefined ? { currentIndex } : {}),
+        ...(onStepChange !== undefined ? { onStepChange } : {}),
+    }), [canGoBack, currentIndex, onStepChange, orientation]);
+    const steps = Children.toArray(children).filter(isValidElement);
+    return (_jsx("nav", { "aria-label": ariaLabel, "data-kp-control": "stepper", children: _jsx("ol", { className: stepperListClass(orientation, className), children: steps.map((step, i) => (_jsx(StepperStepView, { ...step.props, ctx: ctx, index: step.props.index ?? i, isLast: i === steps.length - 1 }, step.key ?? step.props.index ?? i))) }) }));
+}

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

@@ -0,0 +1,10 @@
+import type { StepperOrientation, StepStatus } from "./stepper.types";
+export declare function stepperListClass(orientation: StepperOrientation, className?: string | undefined): string;
+export declare function stepperItemClass(orientation: StepperOrientation, className?: string | undefined): string;
+export declare function stepperConnectorClass(orientation: StepperOrientation, complete: boolean): string;
+export declare function stepperIndicatorClass(status: StepStatus): string;
+export declare function stepperButtonClass(clickable: boolean): string;
+export declare function stepperButtonVerticalClass(clickable: boolean): string;
+export declare const stepperTitleClass = "text-sm font-medium tracking-tight text-balance text-foreground";
+export declare const stepperDescriptionClass = "mt-0.5 text-xs leading-relaxed text-pretty text-muted-foreground";
+export declare const stepperOptionalClass = "mt-0.5 font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground";