@hewnui/ui 0.1.0 → 0.1.1

package/dist/chart/axes.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatTick } from "./status";
+import { formatTick } from "./status.js";
 export function GridLines({ x, y, width, height, pad, }) {
     const yTicks = y.ticks?.(4) ?? [];
     return (_jsxs("g", { "aria-hidden": true, children: [yTicks.map((tick) => {

package/dist/chart/frame.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../utils/cn";
-import { Skeleton } from "../components/skeleton";
+import { cn } from "../utils/cn.js";
+import { Skeleton } from "../components/skeleton/index.js";
 export function ChartFrame({ className, width, height, summary, children, status = "ready", errorMessage = "Could not render chart.", 
 /** When true, SVG uses role=group so focusable point controls are not nested in role=img. */
 interactive = false, }) {

package/dist/chart/interaction.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { ChartDatum, ChartSeries } from "./types";
+import type { ChartDatum, ChartSeries } from "./types.js";
 export type ChartHover = {
     seriesId: string;
     label: string;

package/dist/chart/path.d.ts

@@ -1,4 +1,4 @@
-import type { ChartDatum } from "./types";
+import type { ChartDatum } from "./types.js";
 type XScale = {
     (value: number | string): number | undefined;
 };

package/dist/chart/scales.d.ts

@@ -1,4 +1,4 @@
-import type { ChartDatum, ChartSeries, ChartSize } from "./types";
+import type { ChartDatum, ChartSeries, ChartSize } from "./types.js";
 export declare function flattenSeries(series: ChartSeries[]): ChartDatum[];
 export declare function xDomain(data: ChartDatum[]): Array<number | string>;
 export declare function yDomain(data: ChartDatum[], includeZero?: boolean): [number, number];

package/dist/chart/scales.js

@@ -1,6 +1,6 @@
 import { extent, max, min } from "d3-array";
 import { scaleBand, scaleLinear, scalePoint } from "d3-scale";
-import { DEFAULT_PADDING } from "./types";
+import { DEFAULT_PADDING } from "./types.js";
 export function flattenSeries(series) {
     return series.flatMap((item) => item.data);
 }

package/dist/chart/status.d.ts

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

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
-import { ChartTooltip } from "../../chart/interaction";
-import type { ChartSeries, ChartStatus } from "../../chart/types";
+import { ChartTooltip } from "../../chart/interaction.js";
+import type { ChartSeries, ChartStatus } from "../../chart/types.js";
 export type AreaChartProps = {
     series: ChartSeries[];
     summary: string;

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

@@ -2,14 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { drawIn, fadeIn } from "@hewnui/motion";
 import { m } from "motion/react";
-import { AxisLabels, GridLines } from "../../chart/axes";
-import { seriesColor } from "../../chart/colors";
-import { ChartFrame } from "../../chart/frame";
-import { ChartInteractionProvider, ChartTooltip, useChartInteraction, } from "../../chart/interaction";
-import { areaPath, linePath } from "../../chart/path";
-import { createLinearScales, flattenSeries } from "../../chart/scales";
-import { resolveStatus } from "../../chart/status";
-import { useMotionMode } from "../../providers/motion-provider";
+import { AxisLabels, GridLines } from "../../chart/axes.js";
+import { seriesColor } from "../../chart/colors.js";
+import { ChartFrame } from "../../chart/frame.js";
+import { ChartInteractionProvider, ChartTooltip, useChartInteraction, } from "../../chart/interaction.js";
+import { areaPath, linePath } from "../../chart/path.js";
+import { createLinearScales, flattenSeries } from "../../chart/scales.js";
+import { resolveStatus } from "../../chart/status.js";
+import { useMotionMode } from "../../providers/motion-provider.js";
 function AreaChartRoot({ series, summary, className, width = 480, height = 240, status, children, }) {
     const resolved = resolveStatus(series, status);
     if (resolved !== "ready") {

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

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

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

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

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

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

package/dist/components/badge/badge.js

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

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

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

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

@@ -1,4 +1,4 @@
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils/cn.js";
 const colorStyles = {
     accent: {
         solid: "bg-accent text-accent-foreground",

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

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

package/dist/components/badge/index.js

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

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
-import { ChartTooltip } from "../../chart/interaction";
-import type { ChartSeries, ChartStatus } from "../../chart/types";
+import { ChartTooltip } from "../../chart/interaction.js";
+import type { ChartSeries, ChartStatus } from "../../chart/types.js";
 export type BarChartProps = {
     series: ChartSeries[];
     summary: string;

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

@@ -2,13 +2,13 @@
 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";
-import { seriesColor } from "../../chart/colors";
-import { ChartFrame } from "../../chart/frame";
-import { ChartInteractionProvider, ChartTooltip, useChartInteraction, } from "../../chart/interaction";
-import { createBandScales, flattenSeries } from "../../chart/scales";
-import { resolveStatus } from "../../chart/status";
-import { useMotionMode } from "../../providers/motion-provider";
+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") {

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

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

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

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

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

@@ -1,3 +1,3 @@
-import type { BreadcrumbItemProps, BreadcrumbsProps } from "./breadcrumbs.types";
+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

@@ -1,7 +1,7 @@
 "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";
+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 }));
 }

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

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

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

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

package/dist/components/breadcrumbs/index.js

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

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

@@ -1,2 +1,2 @@
-import type { ButtonProps } from "./button.types";
+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

@@ -1,9 +1,9 @@
 "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";
-import { Spinner } from "../spinner";
-import { buttonClassName, buttonControlAttr } from "./button.styles";
+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);

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

@@ -1,4 +1,4 @@
-import type { ButtonSize, ButtonVariant } from "./button.types";
+import type { ButtonSize, ButtonVariant } from "./button.types.js";
 export declare function buttonClassName({ className, isDisabled, isLoading, pressScale, size, variant, }: {
     className?: string | undefined;
     isDisabled?: boolean | undefined;

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

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

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

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

package/dist/components/button/index.js

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

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { CardProps } from "./card.types";
+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;

package/dist/components/card/card.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cardBodyClassName, cardClassName, cardFooterClassName, cardHeaderClassName, } from "./card.styles";
+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 }));
 }

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

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

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

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

package/dist/components/card/index.js

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

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

@@ -1,2 +1,2 @@
-import type { CheckboxProps } from "./checkbox.types";
+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

@@ -3,8 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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";
-import { checkboxBoxClass, checkboxClassName, checkboxMarkClass, } from "./checkbox.styles";
+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)

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

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

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

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

package/dist/components/checkbox/index.js

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

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

@@ -1,2 +1,2 @@
-import type { CheckboxGroupProps } from "./checkbox-group.types";
+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

@@ -1,8 +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";
-import { checkboxGroupClassName, checkboxGroupItemsClass, } from "./checkbox-group.styles";
+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.js

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

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

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

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

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

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

@@ -1,2 +1,2 @@
-import type { ColorPickerProps } from "./color-picker.types";
+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

@@ -1,9 +1,9 @@
 "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";
-import { ColorPickerPanel } from "./color-picker.panel";
-import { colorPickerClassName, colorPickerPopoverClass, colorPickerSwatchPreviewClass, colorPickerTriggerClass, defaultColorPresets, } from "./color-picker.styles";
+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 {

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

@@ -1,2 +1,2 @@
-import type { ColorPickerPanelProps } from "./color-picker.types";
+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

@@ -2,9 +2,9 @@
 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";
-import { hexToOklchDisplay } from "./color-picker.oklch";
-import { colorAreaClass, colorFieldClass, colorFieldInputClass, colorOklchReadoutClass, colorPickerPanelClass, colorSliderClass, colorSliderTrackClass, colorSwatchClass, colorSwatchItemClass, colorSwatchPickerClass, colorThumbClass, } from "./color-picker.styles";
+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);

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

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

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

@@ -1,4 +1,4 @@
-export { ColorPicker } from "./color-picker";
-export type { ColorPickerProps, ColorPickerVariant, } from "./color-picker.types";
-export { hexToOklchDisplay } from "./color-picker.oklch";
-export { defaultColorPresets } from "./color-picker.styles";
+export { ColorPicker } from "./color-picker.js";
+export type { ColorPickerProps, ColorPickerVariant, } from "./color-picker.types.js";
+export { hexToOklchDisplay } from "./color-picker.oklch.js";
+export { defaultColorPresets } from "./color-picker.styles.js";

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

@@ -1,3 +1,3 @@
-export { ColorPicker } from "./color-picker";
-export { hexToOklchDisplay } from "./color-picker.oklch";
-export { defaultColorPresets } from "./color-picker.styles";
+export { ColorPicker } from "./color-picker.js";
+export { hexToOklchDisplay } from "./color-picker.oklch.js";
+export { defaultColorPresets } from "./color-picker.styles.js";

package/dist/components/combobox/combobox.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, ComboBox as AriaComboBox, Input, Label, ListBox, ListBoxItem, Popover, } from "react-aria-components";
-import { fieldTriggerClass, menuItemClass, popoverSurfaceClass, } from "../../styles/overlays";
-import { cn } from "../../utils/cn";
+import { fieldTriggerClass, menuItemClass, popoverSurfaceClass, } from "../../styles/overlays.js";
+import { cn } from "../../utils/cn.js";
 export function Combobox({ children, className, label, placeholder = "Search…", ...props }) {
     return (_jsxs(AriaComboBox, { ...props, className: cn("flex w-full max-w-sm flex-col gap-1.5 text-sm", className), children: [label ? _jsx(Label, { className: "font-medium", children: label }) : null, _jsxs("div", { className: fieldTriggerClass, "data-kp-surface": true, children: [_jsx(Input, { placeholder: placeholder, className: "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground" }), _jsx(Button, { className: "min-h-10 min-w-10 text-muted-foreground outline-none data-[pressed]:scale-[0.96]", children: "\u25BE" })] }), _jsx(Popover, { className: cn(popoverSurfaceClass, "min-w-[var(--trigger-width)]"), "data-kp-surface": true, children: _jsx(ListBox, { className: "outline-none", children: children }) })] }));
 }

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

@@ -1 +1 @@
-export { Combobox, ComboboxItem } from "./combobox";
+export { Combobox, ComboboxItem } from "./combobox.js";

package/dist/components/combobox/index.js

@@ -1 +1 @@
-export { Combobox, ComboboxItem } from "./combobox";
+export { Combobox, ComboboxItem } from "./combobox.js";

package/dist/components/command-palette/command-palette-items.d.ts

@@ -1,4 +1,4 @@
-import type { CommandPaletteGroupProps, CommandPaletteItemProps, CommandPaletteRecentProps } from "./command-palette.types";
+import type { CommandPaletteGroupProps, CommandPaletteItemProps, CommandPaletteRecentProps } from "./command-palette.types.js";
 export declare function CommandPaletteGroup({ children, className, heading, id, }: CommandPaletteGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare function CommandPaletteRecent({ children, className, heading, }: CommandPaletteRecentProps): import("react/jsx-runtime").JSX.Element;
 export declare function CommandPaletteItem({ children, className, icon, id, isDisabled, onAction, shortcut, textValue, }: CommandPaletteItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/command-palette/command-palette-items.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Header, Keyboard, MenuItem as AriaMenuItem, MenuSection, Text, } from "react-aria-components";
-import { commandGroupClass, commandGroupHeadingClass, commandItemClass, commandItemIconClass, commandItemLabelClass, commandShortcutClass, } from "./command-palette.styles";
+import { commandGroupClass, commandGroupHeadingClass, commandItemClass, commandItemIconClass, commandItemLabelClass, commandShortcutClass, } from "./command-palette.styles.js";
 export function CommandPaletteGroup({ children, className, heading, id, }) {
     return (_jsxs(MenuSection, { className: commandGroupClass(className), ...(id !== undefined ? { id } : {}), children: [_jsx(Header, { className: commandGroupHeadingClass, children: heading }), children] }));
 }

package/dist/components/command-palette/command-palette.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
-import { CommandPaletteGroup, CommandPaletteItem, CommandPaletteRecent } from "./command-palette-items";
-import type { CommandPaletteInputProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteTriggerProps } from "./command-palette.types";
+import { CommandPaletteGroup, CommandPaletteItem, CommandPaletteRecent } from "./command-palette-items.js";
+import type { CommandPaletteInputProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteTriggerProps } from "./command-palette.types.js";
 export { CommandPaletteGroup, CommandPaletteItem, CommandPaletteRecent, };
 export declare function CommandPaletteTrigger(props: CommandPaletteTriggerProps): import("react/jsx-runtime").JSX.Element;
 export declare function CommandPalette({ children, className, "aria-label": ariaLabel, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/command-palette/command-palette.hotkey.d.ts

@@ -1,4 +1,4 @@
-import type { UseCommandPaletteHotkeyOptions } from "./command-palette.types";
+import type { UseCommandPaletteHotkeyOptions } from "./command-palette.types.js";
 /**
  * Optional global ⌘K / Ctrl+K listener for opening a command palette.
  * Platform-aware (meta on Apple, ctrl elsewhere). Skips composing IME events.

package/dist/components/command-palette/command-palette.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Autocomplete, Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Input, Menu, Modal, ModalOverlay, SearchField, useFilter, } from "react-aria-components";
-import { Spinner } from "../spinner";
-import { CommandPaletteGroup, CommandPaletteItem, CommandPaletteRecent, } from "./command-palette-items";
-import { commandEmptyClass, commandInputClass, commandInputWrapClass, commandListClass, commandLoadingClass, commandOverlayClass, commandPanelClass, } from "./command-palette.styles";
+import { Spinner } from "../spinner/index.js";
+import { CommandPaletteGroup, CommandPaletteItem, CommandPaletteRecent, } from "./command-palette-items.js";
+import { commandEmptyClass, commandInputClass, commandInputWrapClass, commandListClass, commandLoadingClass, commandOverlayClass, commandPanelClass, } from "./command-palette.styles.js";
 export { CommandPaletteGroup, CommandPaletteItem, CommandPaletteRecent, };
 export function CommandPaletteTrigger(props) {
     return _jsx(AriaDialogTrigger, { ...props });

package/dist/components/command-palette/command-palette.styles.js

@@ -1,5 +1,5 @@
-import { cn } from "../../utils/cn";
-import { menuItemClass } from "../../styles/overlays";
+import { cn } from "../../utils/cn.js";
+import { menuItemClass } from "../../styles/overlays.js";
 export const commandOverlayClass = cn("fixed inset-0 z-50 flex items-start justify-center", "bg-[color-mix(in_oklch,var(--kp-foreground)_28%,transparent)]", "px-4 pt-[min(20vh,8rem)]", "transition-[opacity] duration-[var(--kp-motion-duration)]", "ease-[cubic-bezier(0.2,0,0,1)]", "entering:opacity-100 exiting:opacity-0", "data-[entering]:opacity-100 data-[exiting]:opacity-0");
 export function commandPanelClass(className) {
     return cn("flex w-full max-w-lg flex-col overflow-hidden", "rounded-[var(--kp-radius-panel)] border bg-surface-raised", "shadow-[var(--kp-shadow-surface)] outline-none", "transition-[opacity,transform] duration-[var(--kp-motion-duration)]", "ease-[cubic-bezier(0.2,0,0,1)]", "data-[entering]:opacity-100 data-[entering]:translate-y-0", "data-[exiting]:opacity-0 data-[exiting]:-translate-y-1", "motion-reduce:transition-none motion-reduce:transform-none", className);

package/dist/components/command-palette/index.d.ts

@@ -1,4 +1,4 @@
-import { CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPaletteRecent, CommandPaletteTrigger } from "./command-palette";
+import { CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPaletteRecent, CommandPaletteTrigger } from "./command-palette.js";
 export declare const CommandPaletteRoot: typeof CommandPaletteTrigger & {
     Content: typeof CommandPalette;
     Input: typeof CommandPaletteInput;
@@ -10,5 +10,5 @@ export declare const CommandPaletteRoot: typeof CommandPaletteTrigger & {
     Loading: typeof CommandPaletteLoading;
 };
 export { CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPaletteRecent, CommandPaletteTrigger, };
-export { commandPaletteHotkeyLabel, useCommandPaletteHotkey, } from "./command-palette.hotkey";
-export type { CommandPaletteGroupProps, CommandPaletteInputProps, CommandPaletteItemProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteRecentProps, CommandPaletteTriggerProps, UseCommandPaletteHotkeyOptions, } from "./command-palette.types";
+export { commandPaletteHotkeyLabel, useCommandPaletteHotkey, } from "./command-palette.hotkey.js";
+export type { CommandPaletteGroupProps, CommandPaletteInputProps, CommandPaletteItemProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteRecentProps, CommandPaletteTriggerProps, UseCommandPaletteHotkeyOptions, } from "./command-palette.types.js";

package/dist/components/command-palette/index.js

@@ -1,4 +1,4 @@
-import { CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPaletteRecent, CommandPaletteTrigger, } from "./command-palette";
+import { CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPaletteRecent, CommandPaletteTrigger, } from "./command-palette.js";
 export const CommandPaletteRoot = Object.assign(CommandPaletteTrigger, {
     Content: CommandPalette,
     Input: CommandPaletteInput,
@@ -10,4 +10,4 @@ export const CommandPaletteRoot = Object.assign(CommandPaletteTrigger, {
     Loading: CommandPaletteLoading,
 });
 export { CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPaletteRecent, CommandPaletteTrigger, };
-export { commandPaletteHotkeyLabel, useCommandPaletteHotkey, } from "./command-palette.hotkey";
+export { commandPaletteHotkeyLabel, useCommandPaletteHotkey, } from "./command-palette.hotkey.js";

package/dist/components/data-table/data-table.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
 import { useState } from "react";
-import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, } from "../table";
+import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, } from "../table/index.js";
 export function DataTable({ "aria-label": ariaLabel, columns, data, getRowId, }) {
     const [sorting, setSorting] = useState([]);
     const table = useReactTable({

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

@@ -1 +1 @@
-export { DataTable } from "./data-table";
+export { DataTable } from "./data-table.js";

package/dist/components/data-table/index.js

@@ -1 +1 @@
-export { DataTable } from "./data-table";
+export { DataTable } from "./data-table.js";