@hewnui/ui 0.1.0 → 0.1.1

package/dist/components/pagination/pagination.js

@@ -2,9 +2,9 @@
 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";
+import { cn } from "../../utils/cn.js";
+import { paginationEllipsisClass, paginationItemClass, paginationListClass, paginationRootClass, } from "./pagination.styles.js";
+import { getPaginationItems } from "./pagination.utils.js";
 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"

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

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

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

@@ -1,4 +1,4 @@
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils/cn.js";
 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)]",

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

@@ -1,4 +1,4 @@
-import type { PaginationItem } from "./pagination.types";
+import type { PaginationItem } from "./pagination.types.js";
 /**
  * Build a compact page list with ellipsis gaps, matching common sibling /
  * boundary pagination patterns (1-indexed pages).

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

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

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

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

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

@@ -1,2 +1,2 @@
-import type { PasswordFieldProps } from "./password-field.types";
+import type { PasswordFieldProps } from "./password-field.types.js";
 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

@@ -2,9 +2,9 @@
 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";
+import { cn } from "../../utils/cn.js";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldRootClass, fieldSurfaceProps, } from "../../styles/field.js";
+import { passwordGroupClassName, passwordInputClass, passwordToggleClass, } from "./password-field.styles.js";
 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" })] }));

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

@@ -1,4 +1,4 @@
-import { type FieldSize, type FieldVariant } from "../../styles/field";
+import { type FieldSize, type FieldVariant } from "../../styles/field.js";
 export declare function passwordGroupClassName({ className, size, variant, }?: {
     className?: string | undefined;
     size?: FieldSize | undefined;

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

@@ -1,5 +1,5 @@
-import { cn } from "../../utils/cn";
-import { inputSurfaceClassName, } from "../../styles/field";
+import { cn } from "../../utils/cn.js";
+import { inputSurfaceClassName, } from "../../styles/field.js";
 export function passwordGroupClassName({ className, size = "md", variant = "outline", } = {}) {
     return cn(inputSurfaceClassName({ size, variant }), "flex items-center gap-1", className);
 }

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

@@ -1,6 +1,6 @@
 import type { TextFieldProps as AriaTextFieldProps } from "react-aria-components";
 import type { ReactNode } from "react";
-import type { FieldSize, FieldVariant } from "../../styles/field";
+import type { FieldSize, FieldVariant } from "../../styles/field.js";
 export type PasswordFieldVariant = FieldVariant;
 export type PasswordFieldSize = FieldSize;
 export type PasswordFieldProps = Omit<AriaTextFieldProps, "className" | "children" | "type"> & {

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

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

package/dist/components/popover/index.js

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

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { PopoverProps, PopoverTriggerProps } from "./popover.types";
+import type { PopoverProps, PopoverTriggerProps } from "./popover.types.js";
 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 }: {

package/dist/components/popover/popover.js

@@ -1,7 +1,7 @@
 "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";
+import { popoverBodyClass, popoverClassName, popoverTitleClass, } from "./popover.styles.js";
 export function PopoverTrigger(props) {
     return _jsx(DialogTrigger, { ...props });
 }

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

@@ -1,5 +1,5 @@
-import { cn } from "../../utils/cn";
-import { popoverSurfaceClass } from "../../styles/overlays";
+import { cn } from "../../utils/cn.js";
+import { popoverSurfaceClass } from "../../styles/overlays.js";
 export function popoverClassName(className) {
     return cn(popoverSurfaceClass, "min-w-56 p-3", className);
 }

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { OverlayPlacement } from "../tooltip/tooltip.types";
+import type { OverlayPlacement } from "../tooltip/tooltip.types.js";
 export type PopoverProps = {
     children: ReactNode;
     className?: string;

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

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

package/dist/components/progress/index.js

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

package/dist/components/progress/progress.js

@@ -1,7 +1,7 @@
 "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";
+import { cn } from "../../utils/cn.js";
 const trackSizes = {
     sm: "h-1.5",
     md: "h-2.5",

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

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

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

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

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

@@ -1,3 +1,3 @@
-import type { RadioGroupProps, RadioProps } from "./radio-group.types";
+import type { RadioGroupProps, RadioProps } from "./radio-group.types.js";
 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

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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";
+import { useMotionMode } from "../../providers/motion-provider.js";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, } from "../../styles/field.js";
+import { radioClassName, radioControlClass, radioDotClass, radioGroupClassName, radioGroupItemsClass, } from "./radio-group.styles.js";
 function RadioDot({ animate }) {
     if (!animate) {
         return _jsx("span", { className: radioDotClass });

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

@@ -1,4 +1,4 @@
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils/cn.js";
 export function radioGroupClassName(className) {
     return cn("flex w-full max-w-sm flex-col gap-2.5 text-sm text-foreground", className);
 }

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

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

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

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

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

@@ -1,2 +1,2 @@
-import type { SearchFieldProps } from "./search-field.types";
+import type { SearchFieldProps } from "./search-field.types.js";
 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

@@ -1,9 +1,9 @@
 "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";
+import { cn } from "../../utils/cn.js";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldRootClass, fieldSurfaceProps, } from "../../styles/field.js";
+import { searchClearClass, searchGroupClassName, searchInputClass, } from "./search-field.styles.js";
 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" })] }));
 }

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

@@ -1,4 +1,4 @@
-import { type FieldSize, type FieldVariant } from "../../styles/field";
+import { type FieldSize, type FieldVariant } from "../../styles/field.js";
 export declare function searchGroupClassName({ className, size, variant, }?: {
     className?: string | undefined;
     size?: FieldSize | undefined;

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

@@ -1,5 +1,5 @@
-import { cn } from "../../utils/cn";
-import { inputSurfaceClassName, } from "../../styles/field";
+import { cn } from "../../utils/cn.js";
+import { inputSurfaceClassName, } from "../../styles/field.js";
 export function searchGroupClassName({ className, size = "md", variant = "outline", } = {}) {
     return cn(inputSurfaceClassName({ size, variant }), "flex items-center gap-1.5", className);
 }

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

@@ -1,6 +1,6 @@
 import type { SearchFieldProps as AriaSearchFieldProps } from "react-aria-components";
 import type { ReactNode } from "react";
-import type { FieldSize, FieldVariant } from "../../styles/field";
+import type { FieldSize, FieldVariant } from "../../styles/field.js";
 export type SearchFieldVariant = FieldVariant;
 export type SearchFieldSize = FieldSize;
 export type SearchFieldProps = Omit<AriaSearchFieldProps, "className" | "children"> & {

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

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

package/dist/components/select/index.js

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

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { type SelectProps as AriaSelectProps } from "react-aria-components";
-import { type SelectVariant } from "./select.styles";
+import { type SelectVariant } from "./select.styles.js";
 type SelectProps = Omit<AriaSelectProps<object>, "children" | "className"> & {
     children: ReactNode;
     className?: string | undefined;

package/dist/components/select/select.js

@@ -1,8 +1,8 @@
 "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";
+import { selectItemClass, selectPopoverClass, selectTriggerClass, selectValueClass, } from "./select.styles.js";
+import { fieldSurfaceProps } from "../../styles/field.js";
 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 }) })] }));
 }

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

@@ -1,4 +1,4 @@
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils/cn.js";
 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"),

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

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

package/dist/components/skeleton/index.js

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

package/dist/components/skeleton/skeleton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils/cn.js";
 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

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

package/dist/components/slider/index.js

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

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

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

package/dist/components/slider/slider.js

@@ -1,8 +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";
+import { fieldDescriptionClass, fieldLabelClass, } from "../../styles/field.js";
+import { sliderClassName, sliderFillClass, sliderHeaderClass, sliderOutputClass, sliderThumbClass, sliderTrackClass, } from "./slider.styles.js";
 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.js

@@ -1,4 +1,4 @@
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils/cn.js";
 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);
 }

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

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

package/dist/components/sparkline/index.js

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

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

@@ -1,4 +1,4 @@
-import type { ChartDatum, ChartStatus } from "../../chart/types";
+import type { ChartDatum, ChartStatus } from "../../chart/types.js";
 export type SparklineProps = {
     data: ChartDatum[] | number[];
     className?: string;

package/dist/components/sparkline/sparkline.js

@@ -2,12 +2,12 @@
 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";
+import { useMotionMode } from "../../providers/motion-provider.js";
+import { seriesColor } from "../../chart/colors.js";
+import { ChartFrame } from "../../chart/frame.js";
+import { linePath } from "../../chart/path.js";
+import { createLinearScales, flattenSeries } from "../../chart/scales.js";
+import { resolveStatus } from "../../chart/status.js";
 function toPoints(data) {
     if (data.length === 0)
         return [];

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

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

package/dist/components/spinner/index.js

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

package/dist/components/spinner/spinner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils/cn.js";
 /** 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

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

package/dist/components/stepper/index.js

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

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { StepperOrientation, StepperStepProps, StepStatus } from "./stepper.types";
+import type { StepperOrientation, StepperStepProps, StepStatus } from "./stepper.types.js";
 export type StepperContextValue = {
     orientation: StepperOrientation;
     currentIndex?: number | undefined;

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

@@ -1,6 +1,6 @@
 "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";
+import { stepperButtonClass, stepperButtonVerticalClass, stepperConnectorClass, stepperDescriptionClass, stepperIndicatorClass, stepperItemClass, stepperOptionalClass, stepperTitleClass, } from "./stepper.styles.js";
 export function resolveStatus(explicit, index, currentIndex, isOptional) {
     if (explicit)
         return explicit;

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

@@ -1,4 +1,4 @@
-import { StepperStep } from "./stepper-step";
-import type { StepperProps } from "./stepper.types";
+import { StepperStep } from "./stepper-step.js";
+import type { StepperProps } from "./stepper.types.js";
 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

@@ -1,8 +1,8 @@
 "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";
+import { stepperListClass } from "./stepper.styles.js";
+import { StepperStep, StepperStepView, } from "./stepper-step.js";
 export { StepperStep };
 export function Stepper({ "aria-label": ariaLabel = "Progress", allowGoBack, children, className, currentIndex, onStepChange, orientation = "horizontal", }) {
     const canGoBack = allowGoBack ?? Boolean(onStepChange);

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

@@ -1,4 +1,4 @@
-import type { StepperOrientation, StepStatus } from "./stepper.types";
+import type { StepperOrientation, StepStatus } from "./stepper.types.js";
 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;

package/dist/components/stepper/stepper.styles.js

@@ -1,4 +1,4 @@
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils/cn.js";
 export function stepperListClass(orientation, className) {
     return cn("m-0 flex list-none p-0", orientation === "horizontal"
         ? "flex-row flex-wrap items-start gap-0"

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

@@ -1,4 +1,4 @@
-import type { UseStepperOptions, UseStepperResult } from "./stepper.types";
+import type { UseStepperOptions, UseStepperResult } from "./stepper.types.js";
 /**
  * Small wizard helper for pairing step content with {@link Stepper}.
  * Supports controlled and uncontrolled indices.

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

@@ -1,2 +1,2 @@
-export { Switch } from "./switch";
-export type { SwitchProps } from "./switch.types";
+export { Switch } from "./switch.js";
+export type { SwitchProps } from "./switch.types.js";

package/dist/components/switch/index.js

@@ -1 +1 @@
-export { Switch } from "./switch";
+export { Switch } from "./switch.js";

package/dist/components/switch/switch.d.ts

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

package/dist/components/switch/switch.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Switch as AriaSwitch } from "react-aria-components";
-import { switchClassName, switchThumbClass, switchTrackClass, } from "./switch.styles";
+import { switchClassName, switchThumbClass, switchTrackClass, } from "./switch.styles.js";
 export function Switch({ children, className, ...props }) {
     return (_jsxs(AriaSwitch, { ...props, className: switchClassName(className), children: [_jsx("span", { className: switchTrackClass, "data-kp-control": "switch", children: _jsx("span", { className: switchThumbClass, "data-kp-control": "switch-thumb" }) }), children ? _jsx("span", { children: children }) : null] }));
 }

package/dist/components/switch/switch.styles.js

@@ -1,4 +1,4 @@
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils/cn.js";
 export function switchClassName(className) {
     return cn("group inline-flex min-h-10 items-center gap-3 text-sm text-foreground outline-none", "disabled:cursor-not-allowed disabled:opacity-45", className);
 }

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

@@ -1,4 +1,4 @@
-import { Table, TableBody, TableCell, TableColumn, TableEmpty, TableHeader, TableLoading, TableRow } from "./table";
+import { Table, TableBody, TableCell, TableColumn, TableEmpty, TableHeader, TableLoading, TableRow } from "./table.js";
 export declare const TableRoot: typeof Table & {
     Header: typeof TableHeader;
     Column: typeof TableColumn;

package/dist/components/table/index.js

@@ -1,4 +1,4 @@
-import { Table, TableBody, TableCell, TableColumn, TableEmpty, TableHeader, TableLoading, TableRow, } from "./table";
+import { Table, TableBody, TableCell, TableColumn, TableEmpty, TableHeader, TableLoading, TableRow, } from "./table.js";
 export const TableRoot = Object.assign(Table, {
     Header: TableHeader,
     Column: TableColumn,

package/dist/components/table/table-sort-glyph.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils/cn.js";
 export function SortGlyph({ direction, }) {
     return (_jsx("svg", { "aria-hidden": true, viewBox: "0 0 12 12", fill: "none", className: cn("size-3 shrink-0 transition-[opacity,transform] duration-[var(--kp-motion-duration)]", direction ? "opacity-90" : "opacity-35", direction === "descending" && "rotate-180"), children: _jsx("path", { d: "M6 2.5v7M6 2.5 3.25 5.25M6 2.5l2.75 2.75", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }

package/dist/components/table/table.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Cell as AriaCell, Column as AriaColumn, Row as AriaRow, Table as AriaTable, TableBody as AriaTableBody, TableHeader as AriaTableHeader, } from "react-aria-components";
-import { cn } from "../../utils/cn";
-import { Spinner } from "../spinner";
-import { SortGlyph } from "./table-sort-glyph";
-import { tableCellClass, tableColumnClass, tableEmptyClass, tableHeaderClass, tableLoadingClass, tableRootClass, tableRowClass, tableShellClass, } from "./table.styles";
+import { cn } from "../../utils/cn.js";
+import { Spinner } from "../spinner/index.js";
+import { SortGlyph } from "./table-sort-glyph.js";
+import { tableCellClass, tableColumnClass, tableEmptyClass, tableHeaderClass, tableLoadingClass, tableRootClass, tableRowClass, tableShellClass, } from "./table.styles.js";
 export function Table({ children, className, ...props }) {
     return (_jsx("div", { "data-kp-surface": true, className: tableShellClass(), children: _jsx(AriaTable, { ...props, className: tableRootClass(className), children: children }) }));
 }

package/dist/components/table/table.styles.js

@@ -1,4 +1,4 @@
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils/cn.js";
 export function tableShellClass(className) {
     return cn("overflow-x-auto rounded-[var(--kp-radius-panel)] border", "border-[color-mix(in_oklch,var(--kp-foreground)_12%,transparent)]", "shadow-[var(--kp-shadow-surface)]", className);
 }

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

@@ -1,4 +1,4 @@
-import { Tab, TabList, TabPanel, Tabs } from "./tabs";
+import { Tab, TabList, TabPanel, Tabs } from "./tabs.js";
 export declare const TabsRoot: typeof Tabs & {
     List: typeof TabList;
     Tab: typeof Tab;

package/dist/components/tabs/index.js

@@ -1,4 +1,4 @@
-import { Tab, TabList, TabPanel, Tabs } from "./tabs";
+import { Tab, TabList, TabPanel, Tabs } from "./tabs.js";
 export const TabsRoot = Object.assign(Tabs, {
     List: TabList,
     Tab,