pentatrion-design 0.1.1 → 0.1.3

package/components/autocomplete/Autocomplete.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from "react";
-import type { OptionLike, Option } from "../select";
-import { AutocompleteOptionProps } from "./AutocompleteOption";
+import type { OptionLike, Option } from "../select/index.js";
+import { AutocompleteOptionProps } from "./AutocompleteOption.js";
 import { Placement } from "@floating-ui/react";
-import { ThemeColor } from "../../types";
+import { ThemeColor } from "../../types.js";
 export interface AutocompleteProps<O extends OptionLike = Option> {
     className?: string;
+    autoFocus?: boolean;
     icon?: boolean | ReactNode;
     color?: ThemeColor;
     /**

package/components/autocomplete/Autocomplete.js

@@ -1,17 +1,17 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState, forwardRef, } from "react";
-import { AutocompleteOption } from "./AutocompleteOption";
+import { AutocompleteOption } from "./AutocompleteOption.js";
 import { FloatingFocusManager, FloatingList, FloatingPortal, autoUpdate, flip, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, } from "@floating-ui/react";
-import { AutocompleteContext } from "./useAutocompleteContext";
+import { AutocompleteContext } from "./useAutocompleteContext.js";
 import clsx from "clsx";
-import { useEventCallback } from "../../hooks";
-import { getOptionLabel, getOptionValue } from "./util";
-import { Button } from "../button";
-import { Dialog } from "../dialog";
-import { Loader } from "../loader";
-import { inputConfig } from "../input/Input";
-export const Autocomplete = forwardRef(function Autocomplete({ className, icon = true, color = "yellow", noSearchSuffix, suffix, placement = "bottom", placeholder = "Search...", selection = null, onChangeSelection, autocompleteOptionComponent, loading = false, clearSearchButton = false, searchValue, onChangeSearchValue, options, selectOnFocus = true, readOnly = false, }, inputRef) {
+import { useEventCallback } from "../../hooks/index.js";
+import { getOptionLabel, getOptionValue } from "./util.js";
+import { Button } from "../button/index.js";
+import { Dialog } from "../dialog/index.js";
+import { Loader } from "../loader/index.js";
+import { inputConfig } from "../input/Input.js";
+export const Autocomplete = forwardRef(function Autocomplete({ className, autoFocus = false, icon = true, color = "yellow", noSearchSuffix, suffix, placement = "bottom", placeholder = "Search...", selection = null, onChangeSelection, autocompleteOptionComponent, loading = false, clearSearchButton = false, searchValue, onChangeSearchValue, options, selectOnFocus = true, readOnly = false, }, inputRef) {
     const [isOpen, setIsOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(null);
     const onChangeSearchValueStable = useEventCallback(onChangeSearchValue);
@@ -95,7 +95,7 @@ export const Autocomplete = forwardRef(function Autocomplete({ className, icon =
         handleSelect,
     }), [activeIndex, selection, getItemProps, handleSelect]);
     const showClearSearchButton = clearSearchButton && (searchValue.trim() !== "" || selection !== null);
-    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: clsx(inputConfig.container, readOnly && "readonly"), ref: refs.setReference, "data-color": color, children: [icon !== false && (_jsxs("div", { className: "relative flex-center", children: [loading && _jsx(Loader, { size: "medium", color: "gray", className: "absolute left-0 top-0" }), icon === true ? (_jsx("span", { className: "h-8 w-8 flex-center", children: _jsx("i", { className: "fe-search" }) })) : (icon)] })), _jsx("input", { spellCheck: "false", className: clsx(inputConfig.input, icon === false && "pl-4"), ref: inputRef, type: "search", readOnly: readOnly, value: searchValue, placeholder: placeholder, "aria-autocomplete": "list", ...getReferenceProps({
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: clsx(inputConfig.container, readOnly && "readonly"), ref: refs.setReference, "data-color": color, children: [icon !== false && (_jsxs("div", { className: "relative flex-center", children: [loading && _jsx(Loader, { size: "medium", color: "gray", className: "absolute left-0 top-0" }), icon === true ? (_jsx("span", { className: "h-8 w-8 flex-center", children: _jsx("i", { className: "fe-search" }) })) : (icon)] })), _jsx("input", { autoFocus: autoFocus, spellCheck: "false", className: clsx(inputConfig.input, icon === false && "pl-4"), ref: inputRef, type: "search", readOnly: readOnly, value: searchValue, placeholder: placeholder, "aria-autocomplete": "list", ...getReferenceProps({
                             onClick() {
                                 if (selectOnFocus) {
                                     // it's better to listen onClick instead of onFocus. the event is triggered later and there

package/components/autocomplete/AutocompleteOption.d.ts

@@ -1,3 +1,3 @@
-import { OptionLike } from "../select";
+import { OptionLike } from "../select/index.js";
 export type AutocompleteOptionProps<O extends OptionLike> = O;
 export declare const AutocompleteOption: import("react").MemoExoticComponent<(<O extends OptionLike>(props: AutocompleteOptionProps<O>) => import("react/jsx-runtime").JSX.Element)>;

package/components/autocomplete/AutocompleteOption.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useId } from "react";
 import { useListItem } from "@floating-ui/react";
-import { useAutocomplete } from "./useAutocompleteContext";
+import { useAutocomplete } from "./useAutocompleteContext.js";
 import clsx from "clsx";
-import { getOptionLabel, getOptionValue } from "./util";
+import { getOptionLabel, getOptionValue } from "./util.js";
 export const AutocompleteOption = memo(function AutocompleteOption(props) {
     const label = getOptionLabel(props);
     const id = useId();

package/components/autocomplete/LazyAutocomplete.d.ts

@@ -1,6 +1,6 @@
-import { AutocompleteProps } from "./Autocomplete";
-import { OptionLike, Option } from "../select";
-interface Props<O extends OptionLike = Option> extends Pick<AutocompleteProps<O>, "className" | "icon" | "color" | "suffix" | "noSearchSuffix" | "placement" | "placeholder" | "selection" | "onChangeSelection" | "autocompleteOptionComponent" | "loading" | "clearSearchButton" | "readOnly"> {
+import { AutocompleteProps } from "./Autocomplete.js";
+import { OptionLike, Option } from "../select/index.js";
+interface Props<O extends OptionLike = Option> extends Pick<AutocompleteProps<O>, "autoFocus" | "className" | "icon" | "color" | "suffix" | "noSearchSuffix" | "placement" | "placeholder" | "selection" | "onChangeSelection" | "autocompleteOptionComponent" | "loading" | "clearSearchButton" | "readOnly"> {
     onChangeSearchValueCallback: (searchValue: string) => Promise<O[]>;
     debounce?: number;
 }

package/components/autocomplete/LazyAutocomplete.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Autocomplete } from "./Autocomplete";
-import { getOptionLabel } from "./util";
-import { useStateDebounce, useEventCallback } from "../../hooks";
+import { Autocomplete } from "./Autocomplete.js";
+import { getOptionLabel } from "./util.js";
+import { useStateDebounce, useEventCallback } from "../../hooks/index.js";
 export function LazyAutocomplete({ onChangeSearchValueCallback, debounce = 5000, selection = null, onChangeSelection, ...rest }) {
     const onChangeSelectionStable = useEventCallback(onChangeSelection);
     const onChangeSearchValueCallbackStable = useEventCallback(onChangeSearchValueCallback);

package/components/autocomplete/SimpleAutocomplete.d.ts

@@ -1,6 +1,6 @@
-import { AutocompleteProps } from "./Autocomplete";
-import { Option, OptionLike } from "../select";
-interface Props<O extends OptionLike = Option> extends Pick<AutocompleteProps<O>, "className" | "icon" | "color" | "suffix" | "noSearchSuffix" | "placement" | "placeholder" | "selection" | "onChangeSelection" | "autocompleteOptionComponent" | "options" | "selection" | "readOnly"> {
+import { AutocompleteProps } from "./Autocomplete.js";
+import { Option, OptionLike } from "../select/index.js";
+interface Props<O extends OptionLike = Option> extends Pick<AutocompleteProps<O>, "autoFocus" | "className" | "icon" | "color" | "suffix" | "noSearchSuffix" | "placement" | "placeholder" | "selection" | "onChangeSelection" | "autocompleteOptionComponent" | "options" | "selection" | "readOnly"> {
 }
 export declare function SimpleAutocomplete<O extends OptionLike = Option>({ options, selection, onChangeSelection, ...rest }: Props<O>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/autocomplete/SimpleAutocomplete.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
-import { Autocomplete } from "./Autocomplete";
-import { useEventCallback } from "../../hooks";
-import { getOptionLabel } from "./util";
+import { Autocomplete } from "./Autocomplete.js";
+import { useEventCallback } from "../../hooks/index.js";
+import { getOptionLabel } from "./util.js";
 export function SimpleAutocomplete({ options, selection = null, onChangeSelection, ...rest }) {
     const onChangeSelectionStable = useEventCallback(onChangeSelection);
     const [searchValue, setSearchValue] = useState(selection ? getOptionLabel(selection) : "");

package/components/autocomplete/_fixtures.d.ts

@@ -1,3 +1,3 @@
-import { Option } from "../select";
+import { Option } from "../select/index.js";
 export declare const options: Option[];
 export declare const handleChangeSearchValue: (searchValue: string) => Promise<Option[]>;

package/components/autocomplete/index.d.ts

@@ -1,6 +1,6 @@
-export { Autocomplete, type AutocompleteProps } from "./Autocomplete";
-export { SimpleAutocomplete } from "./SimpleAutocomplete";
-export { AutocompleteOption } from "./AutocompleteOption";
-export { LazyAutocomplete } from "./LazyAutocomplete";
-export { useAutocomplete } from "./useAutocompleteContext";
-export { getOptionValue, getOptionLabel } from "./util";
+export { Autocomplete, type AutocompleteProps } from "./Autocomplete.js";
+export { SimpleAutocomplete } from "./SimpleAutocomplete.js";
+export { AutocompleteOption } from "./AutocompleteOption.js";
+export { LazyAutocomplete } from "./LazyAutocomplete.js";
+export { useAutocomplete } from "./useAutocompleteContext.js";
+export { getOptionValue, getOptionLabel } from "./util.js";

package/components/autocomplete/index.js

@@ -1,6 +1,6 @@
-export { Autocomplete } from "./Autocomplete";
-export { SimpleAutocomplete } from "./SimpleAutocomplete";
-export { AutocompleteOption } from "./AutocompleteOption";
-export { LazyAutocomplete } from "./LazyAutocomplete";
-export { useAutocomplete } from "./useAutocompleteContext";
-export { getOptionValue, getOptionLabel } from "./util";
+export { Autocomplete } from "./Autocomplete.js";
+export { SimpleAutocomplete } from "./SimpleAutocomplete.js";
+export { AutocompleteOption } from "./AutocompleteOption.js";
+export { LazyAutocomplete } from "./LazyAutocomplete.js";
+export { useAutocomplete } from "./useAutocompleteContext.js";
+export { getOptionValue, getOptionLabel } from "./util.js";

package/components/autocomplete/useAutocompleteContext.d.ts

@@ -1,5 +1,5 @@
 import { useInteractions } from "@floating-ui/react";
-import { OptionLike } from "../select";
+import { OptionLike } from "../select/index.js";
 interface AutocompleteContext {
     activeIndex: number | null;
     selection: OptionLike | null;

package/components/autocomplete/util.d.ts

@@ -1,3 +1,3 @@
-import { OptionLike } from "../select";
+import { OptionLike } from "../select/index.js";
 export declare function getOptionLabel(option: OptionLike): string;
 export declare function getOptionValue(option: OptionLike): string | number;

package/components/badge/Badge.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { ThemeColor } from "../../types";
+import { ThemeColor } from "../../types.js";
 interface Props {
     children: ReactNode;
     className?: string;

package/components/badge/Badge.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { buttonVariants } from "../button/Button";
-import { Href } from "../href";
-import { Tooltip } from "../tooltip/Tooltip";
-import { TooltipContent } from "../tooltip/TooltipContent";
-import { TooltipTrigger } from "../tooltip/TooltipTrigger";
+import { buttonVariants } from "../button/Button.js";
+import { Href } from "../href/index.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { TooltipContent } from "../tooltip/TooltipContent.js";
+import { TooltipTrigger } from "../tooltip/TooltipTrigger.js";
 export function Badge({ children, className, onRemove, onClick, tooltip, url, color = "yellow", }) {
     const badge = (_jsxs("span", { className: clsx("ll-badge", "inline-flex w-fit items-stretch overflow-hidden rounded-full text-xs shadow", buttonVariants.variant.contained(color), 
         // badgeVariants.color[color],

package/components/badge/index.d.ts

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

package/components/badge/index.js

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

package/components/button/Button.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from "react";
-import { ThemeColor } from "../../types";
+import { ThemeColor } from "../../types.js";
 export interface ButtonProps extends ComponentPropsWithRef<"button"> {
     withRipple?: boolean;
     variant?: "contained" | "light" | "outlined" | "text" | "ghost";

package/components/button/Button.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef } from "react";
 import clsx from "clsx";
-import { Loader } from "../loader";
-import { useRipple } from "../../hooks";
+import { Loader } from "../loader/index.js";
+import { useRipple } from "../../hooks/index.js";
 export const buttonVariants = {
     size(icon, size) {
         if (size === "custom") {

package/components/button/Button.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cleanup, fireEvent, render } from "@testing-library/react";
 import { describe, it, expect, vi, afterEach } from "vitest";
-import { Button } from "./Button";
+import { Button } from "./Button.js";
 afterEach(cleanup);
 describe("<Button />", () => {
     it("forwards className", () => {

package/components/button/LinkButton.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from "react";
-import { ThemeColor } from "../../types";
+import { ThemeColor } from "../../types.js";
 export interface LinkButtonProps extends ComponentPropsWithRef<"a"> {
     href: string;
     withRipple?: boolean;

package/components/button/LinkButton.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef } from "react";
 import clsx from "clsx";
-import { useRipple } from "../../hooks/useRipple";
-import { buttonVariants } from "./Button";
+import { useRipple } from "../../hooks/useRipple.js";
+import { buttonVariants } from "./Button.js";
 export const LinkButton = forwardRef(function LinkButton({ withRipple = true, variant = "contained", color = "yellow", size = "medium", focusable = true, fullWidth, className, children, selected = false, icon = false, href, ...props }, ref) {
     const anchorRef = useRef(null);
     useImperativeHandle(ref, () => anchorRef.current);

package/components/button/index.d.ts

@@ -1,3 +1,3 @@
-export { Button, type ButtonProps, buttonVariants } from "./Button";
-export { ButtonGroup } from "./ButtonGroup";
-export { LinkButton } from "./LinkButton";
+export { Button, type ButtonProps, buttonVariants } from "./Button.js";
+export { ButtonGroup } from "./ButtonGroup.js";
+export { LinkButton } from "./LinkButton.js";

package/components/button/index.js

@@ -1,3 +1,3 @@
-export { Button, buttonVariants } from "./Button";
-export { ButtonGroup } from "./ButtonGroup";
-export { LinkButton } from "./LinkButton";
+export { Button, buttonVariants } from "./Button.js";
+export { ButtonGroup } from "./ButtonGroup.js";
+export { LinkButton } from "./LinkButton.js";

package/components/card/index.d.ts

@@ -1 +1 @@
-export { cardConfig } from "./config";
+export { cardConfig } from "./config.js";

package/components/card/index.js

@@ -1 +1 @@
-export { cardConfig } from "./config";
+export { cardConfig } from "./config.js";

package/components/code/index.d.ts

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

package/components/code/index.js

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

package/components/context-menu/ContextMenu.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useEffect, useRef, useState, } from "react";
 import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, shift, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTypeahead, } from "@floating-ui/react";
-import { Dialog } from "../dialog/Dialog";
-import { useEventCallback, useRefDebounce } from "../../hooks";
+import { Dialog } from "../dialog/Dialog.js";
+import { useEventCallback, useRefDebounce } from "../../hooks/index.js";
 export function ContextMenu({ targetRef, children, style, eventName = "contextmenu" }) {
     const [activeIndex, setActiveIndex] = useState(null);
     const [isOpen, setIsOpen] = useState(false);

package/components/context-menu/index.d.ts

@@ -1,2 +1,2 @@
-export { ContextMenu } from "./ContextMenu";
-export { ContextMenuItem, type ContextMenuItemMouseEvent } from "./ContextMenuItem";
+export { ContextMenu } from "./ContextMenu.js";
+export { ContextMenuItem, type ContextMenuItemMouseEvent } from "./ContextMenuItem.js";

package/components/context-menu/index.js

@@ -1,2 +1,2 @@
-export { ContextMenu } from "./ContextMenu";
-export { ContextMenuItem } from "./ContextMenuItem";
+export { ContextMenu } from "./ContextMenu.js";
+export { ContextMenuItem } from "./ContextMenuItem.js";

package/components/dialog/Dialog.d.ts

@@ -1,6 +1,6 @@
 import { Placement } from "@floating-ui/react";
 import { ComponentProps, ReactNode } from "react";
-import type { ThemeColor } from "../../types";
+import type { ThemeColor } from "../../types.js";
 interface Props extends ComponentProps<"div"> {
     color?: ThemeColor;
     placement?: Placement;

package/components/dialog/index.d.ts

@@ -1 +1 @@
-export { Dialog, dialogVariants } from "./Dialog";
+export { Dialog, dialogVariants } from "./Dialog.js";

package/components/dialog/index.js

@@ -1 +1 @@
-export { Dialog, dialogVariants } from "./Dialog";
+export { Dialog, dialogVariants } from "./Dialog.js";

package/components/dropdown-menu/DropdownMenu.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { DropdownMenuOptions } from "./interface";
+import { DropdownMenuOptions } from "./interface.js";
 interface Props extends DropdownMenuOptions {
     children: ReactNode;
 }

package/components/dropdown-menu/DropdownMenu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DropdownMenuContext } from "./useDropdownMenuContext";
-import { useDropdownMenu } from "./useDropdownMenu";
+import { DropdownMenuContext } from "./useDropdownMenuContext.js";
+import { useDropdownMenu } from "./useDropdownMenu.js";
 export function DropdownMenu({ children, ...options }) {
     const popover = useDropdownMenu(options);
     return _jsx(DropdownMenuContext.Provider, { value: popover, children: children });

package/components/dropdown-menu/DropdownMenuContent.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useDropdownMenuContext } from "./useDropdownMenuContext";
+import { useDropdownMenuContext } from "./useDropdownMenuContext.js";
 import { FloatingFocusManager, FloatingList, FloatingPortal, useMergeRefs, } from "@floating-ui/react";
 import clsx from "clsx";
-import { Dialog } from "../dialog";
+import { Dialog } from "../dialog/index.js";
 export const DropdownMenuContent = forwardRef(({ style, children, ...props }, propRef) => {
     const context = useDropdownMenuContext();
     const floatingContext = context.context;

package/components/dropdown-menu/DropdownMenuItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useListItem } from "@floating-ui/react";
 import clsx from "clsx";
-import { useDropdownMenuContext } from "./useDropdownMenuContext";
+import { useDropdownMenuContext } from "./useDropdownMenuContext.js";
 export function DropdownMenuItem({ children, onClick, ...rest }) {
     const { activeIndex, getItemProps, handleSelect } = useDropdownMenuContext();
     const { ref, index } = useListItem({ label: children?.toString() });

package/components/dropdown-menu/DropdownMenuTrigger.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cloneElement, forwardRef, isValidElement } from "react";
-import { useDropdownMenuContext } from "./useDropdownMenuContext";
+import { useDropdownMenuContext } from "./useDropdownMenuContext.js";
 import { useMergeRefs } from "@floating-ui/react";
-import { Button } from "../button";
+import { Button } from "../button/index.js";
 export const DropdownMenuTrigger = forwardRef(({ children, asChild = false, ...props }, propRef) => {
     const context = useDropdownMenuContext();
     const childrenRef = children.ref;

package/components/dropdown-menu/index.d.ts

@@ -1,7 +1,7 @@
-export { DropdownMenu } from "./DropdownMenu";
-export { DropdownMenuContent } from "./DropdownMenuContent";
-export { DropdownMenuTrigger } from "./DropdownMenuTrigger";
-export { useDropdownMenu } from "./useDropdownMenu";
-export { useDropdownMenuContext, DropdownMenuContext } from "./useDropdownMenuContext";
-export { DropdownMenuItem } from "./DropdownMenuItem";
-export type * from "./interface";
+export { DropdownMenu } from "./DropdownMenu.js";
+export { DropdownMenuContent } from "./DropdownMenuContent.js";
+export { DropdownMenuTrigger } from "./DropdownMenuTrigger.js";
+export { useDropdownMenu } from "./useDropdownMenu.js";
+export { useDropdownMenuContext, DropdownMenuContext } from "./useDropdownMenuContext.js";
+export { DropdownMenuItem } from "./DropdownMenuItem.js";
+export type * from "./interface.js";

package/components/dropdown-menu/index.js

@@ -1,6 +1,6 @@
-export { DropdownMenu } from "./DropdownMenu";
-export { DropdownMenuContent } from "./DropdownMenuContent";
-export { DropdownMenuTrigger } from "./DropdownMenuTrigger";
-export { useDropdownMenu } from "./useDropdownMenu";
-export { useDropdownMenuContext, DropdownMenuContext } from "./useDropdownMenuContext";
-export { DropdownMenuItem } from "./DropdownMenuItem";
+export { DropdownMenu } from "./DropdownMenu.js";
+export { DropdownMenuContent } from "./DropdownMenuContent.js";
+export { DropdownMenuTrigger } from "./DropdownMenuTrigger.js";
+export { useDropdownMenu } from "./useDropdownMenu.js";
+export { useDropdownMenuContext, DropdownMenuContext } from "./useDropdownMenuContext.js";
+export { DropdownMenuItem } from "./DropdownMenuItem.js";

package/components/dropdown-menu/interface.d.ts

@@ -1,5 +1,5 @@
 import { Placement } from "@floating-ui/react";
-import { ThemeColor } from "../../types";
+import { ThemeColor } from "../../types.js";
 export interface DropdownMenuOptions {
     initialOpen?: boolean;
     placement?: Placement;

package/components/dropdown-menu/useDropdownMenu.d.ts

@@ -1,8 +1,8 @@
-import type { DropdownMenuOptions } from "./interface";
+import type { DropdownMenuOptions } from "./interface.js";
 export declare function useDropdownMenu({ initialOpen, placement, open: controlledOpen, onOpen: setControlledOpen, color, modal, }: DropdownMenuOptions): {
     elementsRef: import("react").MutableRefObject<(HTMLElement | null)[]>;
     labelsRef: import("react").MutableRefObject<(string | null)[]>;
-    color: import("../..").ThemeColor | "default";
+    color: import("../../index.js").ThemeColor | "default";
     modal: boolean;
     activeIndex: number | null;
     handleSelect: () => void;

package/components/dropdown-menu/useDropdownMenuContext.d.ts

@@ -1,10 +1,10 @@
-import { useDropdownMenu } from "./useDropdownMenu";
+import { useDropdownMenu } from "./useDropdownMenu.js";
 type ContextType = ReturnType<typeof useDropdownMenu> | null;
 export declare const DropdownMenuContext: import("react").Context<ContextType>;
 export declare function useDropdownMenuContext(): {
     elementsRef: import("react").MutableRefObject<(HTMLElement | null)[]>;
     labelsRef: import("react").MutableRefObject<(string | null)[]>;
-    color: import("../..").ThemeColor | "default";
+    color: import("../../index.js").ThemeColor | "default";
     modal: boolean;
     activeIndex: number | null;
     handleSelect: () => void;

package/components/dropdown-menu-nested/DropdownMenuNested.d.ts

@@ -1,4 +1,4 @@
-import { Button, type ButtonProps } from "../button/Button";
+import { Button, type ButtonProps } from "../button/Button.js";
 export interface Props extends ButtonProps {
     label: string;
     triggerComponent: typeof Button;

package/components/dropdown-menu-nested/DropdownMenuNested.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { MenuItemWithChildren } from "./MenuItemWithChildren";
+import { MenuItemWithChildren } from "./MenuItemWithChildren.js";
 import { FloatingTree } from "@floating-ui/react";
 export const DropdownMenuNested = forwardRef((props, ref) => {
     return (_jsx(FloatingTree, { children: _jsx(MenuItemWithChildren, { ...props, ref: ref }) }));

package/components/dropdown-menu-nested/MenuItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFloatingTree, useListItem, useMergeRefs } from "@floating-ui/react";
 import { forwardRef, useContext } from "react";
-import { MenuContext } from "./MenuContext";
+import { MenuContext } from "./MenuContext.js";
 export const MenuItem = forwardRef(({ label, disabled, ...props }, forwardedRef) => {
     const menu = useContext(MenuContext);
     const item = useListItem({ label: disabled ? null : label });

package/components/dropdown-menu-nested/MenuItemWithChildren.d.ts

@@ -1,4 +1,4 @@
-import { Button, type ButtonProps } from "../button/Button";
+import { Button, type ButtonProps } from "../button/Button.js";
 export interface Props extends ButtonProps {
     label?: string;
     triggerComponent?: typeof Button;

package/components/dropdown-menu-nested/MenuItemWithChildren.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, autoUpdate, flip, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
 import { forwardRef, useContext, useEffect, useRef, useState } from "react";
-import { MenuContext } from "./MenuContext";
+import { MenuContext } from "./MenuContext.js";
 import clsx from "clsx";
-import { Button } from "../button/Button";
-import { Dialog } from "../dialog/Dialog";
+import { Button } from "../button/Button.js";
+import { Dialog } from "../dialog/Dialog.js";
 export const MenuItemWithChildren = forwardRef(({ children, label, triggerComponent: TriggerComponent = Button, ...props }, forwardedRef) => {
     const [isOpen, setIsOpen] = useState(false);
     const [hasFocusInside, setHasFocusInside] = useState(false);

package/components/dropdown-menu-nested/index.d.ts

@@ -1,3 +1,3 @@
-export { DropdownMenuNested } from "./DropdownMenuNested";
-export { MenuItem } from "./MenuItem";
-export { MenuItemWithChildren } from "./MenuItemWithChildren";
+export { DropdownMenuNested } from "./DropdownMenuNested.js";
+export { MenuItem } from "./MenuItem.js";
+export { MenuItemWithChildren } from "./MenuItemWithChildren.js";

package/components/dropdown-menu-nested/index.js

@@ -1,3 +1,3 @@
-export { DropdownMenuNested } from "./DropdownMenuNested";
-export { MenuItem } from "./MenuItem";
-export { MenuItemWithChildren } from "./MenuItemWithChildren";
+export { DropdownMenuNested } from "./DropdownMenuNested.js";
+export { MenuItem } from "./MenuItem.js";
+export { MenuItemWithChildren } from "./MenuItemWithChildren.js";

package/components/flash/Flash.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { ThemeColor } from "../../types";
+import { ThemeColor } from "../../types.js";
 interface Props {
     color?: ThemeColor;
     children?: ReactNode;

package/components/flash/Flash.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { colorVariants } from "../../lib/tailwindVariants";
+import { colorVariants } from "../../lib/tailwindVariants.js";
 export function Flash({ color = "yellow", children, className }) {
     return (_jsx("div", { className: clsx("border-l-4 bg-gray-0 p-2 shadow dark:shadow-dark [&_p]:m-0", colorVariants[color].border, className), children: children }));
 }

package/components/flash/index.d.ts

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

package/components/flash/index.js

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

package/components/highlight/index.d.ts

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

package/components/highlight/index.js

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

package/components/href/index.d.ts

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

package/components/href/index.js

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

package/components/input/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from "react";
-import { type ThemeColor } from "../../types";
+import { type ThemeColor } from "../../types.js";
 export interface CheckboxProps extends ComponentPropsWithRef<"input"> {
     indeterminate?: boolean;
     disabled?: boolean;

package/components/input/Checkbox.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
-import { useCombinedRefs } from "../../hooks";
+import { useCombinedRefs } from "../../hooks/index.js";
 import clsx from "clsx";
 export const Checkbox = forwardRef(function Checkbox({ color = "yellow", indeterminate, disabled = false, checked, className, children, ...rest }, ref) {
     const inputRef = useRef(null);

package/components/input/Color.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import type { ThemeColor } from "../../types";
+import type { ThemeColor } from "../../types.js";
 export interface ColorProps extends ComponentProps<"button"> {
     withRipple?: boolean;
     value?: string;