pentatrion-design 0.0.13 → 0.0.15

package/README.md

@@ -1,4 +1,4 @@
-# [Pentatrion Design System](https://storybook.lonlat.pentatrion.com)
+# [Pentatrion Design System](https://design.pentatrion.com)
 
 <a href="https://design.pentatrion.com">
 <img src="https://raw.githubusercontent.com/lhapaipai/pentatrion-design/main/screenshot.png" alt="Pentatrion design system" />

package/components/autocomplete/Autocomplete.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import type { OptionLike, Option } from "../select";
 import { AutocompleteOptionProps } from "./AutocompleteOption";
 import { Placement } from "@floating-ui/react";
-import { ThemeColor } from "../../types.d";
+import { ThemeColor } from "../../types";
 export interface AutocompleteProps<O extends OptionLike = Option> {
     className?: string;
     icon?: boolean | ReactNode;
@@ -39,6 +39,6 @@ export interface AutocompleteProps<O extends OptionLike = Option> {
     loading?: boolean;
     clearSearchButton?: boolean;
     selectOnFocus?: boolean;
+    readOnly?: boolean;
 }
-declare const _default: <O extends OptionLike = Option>(props: AutocompleteProps<O> & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
-export default _default;
+export declare const Autocomplete: <O extends OptionLike = Option>(props: AutocompleteProps<O> & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;

package/components/autocomplete/Autocomplete.js

@@ -1,7 +1,7 @@
 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";
 import { FloatingFocusManager, FloatingList, FloatingPortal, autoUpdate, flip, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, } from "@floating-ui/react";
 import { AutocompleteContext } from "./useAutocompleteContext";
 import clsx from "clsx";
@@ -11,7 +11,7 @@ import { Button } from "../button";
 import { Dialog } from "../dialog";
 import { Loader } from "../loader";
 import { inputConfig } from "../input/Input";
-function Autocomplete({ className, icon = true, color = "yellow", selectionSuffix, noSearchSuffix, placement = "bottom", placeholder = "Search...", selection = null, onChangeSelection, autocompleteOptionComponent, loading = false, clearSearchButton = false, searchValue, onChangeSearchValue, options, selectOnFocus = true, }, inputRef) {
+export const Autocomplete = forwardRef(function Autocomplete({ className, icon = true, color = "yellow", selectionSuffix, noSearchSuffix, 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);
@@ -94,9 +94,10 @@ function Autocomplete({ className, icon = true, color = "yellow", selectionSuffi
         getItemProps,
         handleSelect,
     }), [activeIndex, selection, getItemProps, handleSelect]);
-    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: clsx(inputConfig.container), 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", value: searchValue, placeholder: placeholder, "aria-autocomplete": "list", ...getReferenceProps({
+    const showClearSearchButton = !readOnly && 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({
                             onFocus() {
-                                if (selectOnFocus) {
+                                if (selectOnFocus && !readOnly) {
                                     document.activeElement?.select();
                                 }
                             },
@@ -120,7 +121,7 @@ function Autocomplete({ className, icon = true, color = "yellow", selectionSuffi
                                     handleSelect(activeIndex);
                                 }
                             },
-                        }) }), _jsxs("div", { className: "relative flex-center", children: [selection && selectionSuffix, clearSearchButton && (searchValue.trim() !== "" || selection !== null) && (_jsx(Button, { withRipple: false, icon: true, color: "gray", variant: "text", onClick: () => {
+                        }) }), _jsxs("div", { className: "relative flex-center", children: [selection && selectionSuffix, showClearSearchButton && (_jsx(Button, { withRipple: false, icon: true, color: "gray", variant: "text", onClick: () => {
                                     setIsOpen(false);
                                     onChangeSelectionStable(null);
                                     setActiveIndex(null);
@@ -128,5 +129,4 @@ function Autocomplete({ className, icon = true, color = "yellow", selectionSuffi
                                 }, children: _jsx("i", { className: "fe-cancel" }) })), icon === false && loading && _jsx(Loader, { size: "medium", color: "gray" }), !selection && searchValue === "" && noSearchSuffix] })] }), _jsx(FloatingPortal, { children: _jsx(AutocompleteContext.Provider, { value: autocompleteContext, children: isOpen && (_jsx(FloatingFocusManager, { disabled: selectOnFocus, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsx("div", { className: "z-dialog outline-none", ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: _jsx(Dialog, { placement: context.placement, className: "overflow-auto motion-safe:animate-fade-in-list", children: _jsx(FloatingList, { elementsRef: listRef, children: options.map((option) => {
                                         return _createElement(OptionComponent, { ...option, key: getOptionValue(option) });
                                     }) }) }) }) })) }) })] }));
-}
-export default forwardRef(Autocomplete);
+});

package/components/autocomplete/AutocompleteOption.d.ts

@@ -1,5 +1,3 @@
 import { OptionLike } from "../select";
 export type AutocompleteOptionProps<O extends OptionLike> = O;
-declare function AutocompleteOption<O extends OptionLike>(props: AutocompleteOptionProps<O>): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof AutocompleteOption>;
-export default _default;
+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,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useId } from "react";
 import { useListItem } from "@floating-ui/react";
-import { useAutocomplete } from ".";
+import { useAutocomplete } from "./useAutocompleteContext";
 import clsx from "clsx";
 import { getOptionLabel, getOptionValue } from "./util";
-function AutocompleteOption(props) {
+export const AutocompleteOption = memo(function AutocompleteOption(props) {
     const label = getOptionLabel(props);
     const id = useId();
     const { activeIndex, selection, getItemProps, handleSelect } = useAutocomplete();
@@ -14,5 +14,4 @@ function AutocompleteOption(props) {
     return (_jsx("div", { className: clsx("option", isSelected ? "bg-gray-2" : isActive && "bg-gray-1"), ref: ref, role: "option", id: id, "aria-selected": isActive, ...getItemProps({
             onClick: () => handleSelect(index),
         }), children: label }));
-}
-export default memo(AutocompleteOption);
+});

package/components/autocomplete/LazyAutocomplete.d.ts

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

package/components/autocomplete/LazyAutocomplete.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Autocomplete } from ".";
+import { Autocomplete } from "./Autocomplete";
 import { getOptionLabel } from "./util";
 import { useStateDebounce, useEventCallback } from "../../hooks";
 export function LazyAutocomplete({ onChangeSearchValueCallback, debounce = 5000, selection = null, onChangeSelection, ...rest }) {
     const onChangeSelectionStable = useEventCallback(onChangeSelection);
     const onChangeSearchValueCallbackStable = useEventCallback(onChangeSearchValueCallback);
     const [searchValue, searchValueDebounced, setSearchValue] = useStateDebounce(selection ? getOptionLabel(selection) : "", debounce);
-    // console.log(searchValue, searchValueDebounced);
     const searchValueRef = useRef(searchValue);
     searchValueRef.current = searchValue;
     const inputRef = useRef(null);

package/components/autocomplete/SimpleAutocomplete.d.ts

@@ -1,6 +1,6 @@
-import { AutocompleteProps } from ".";
+import { AutocompleteProps } from "./Autocomplete";
 import { Option, OptionLike } from "../select";
-interface Props<O extends OptionLike = Option> extends Pick<AutocompleteProps<O>, "className" | "icon" | "color" | "placement" | "placeholder" | "selection" | "onChangeSelection" | "autocompleteOptionComponent" | "options" | "selection"> {
+interface Props<O extends OptionLike = Option> extends Pick<AutocompleteProps<O>, "className" | "icon" | "color" | "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,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
-import { Autocomplete } from ".";
+import { Autocomplete } from "./Autocomplete";
 import { useEventCallback } from "../../hooks";
 import { getOptionLabel } from "./util";
 export function SimpleAutocomplete({ options, selection = null, onChangeSelection, ...rest }) {

package/components/autocomplete/_fixtures.d.ts

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

package/components/autocomplete/_fixtures.js

@@ -1,3 +1,4 @@
+import Fuse from "fuse.js";
 export const options = [
     { value: "abbeville", label: "Abbeville" },
     { value: "agde", label: "Agde" },
@@ -23,3 +24,23 @@ export const options = [
     { value: "avoriaz", label: "Avoriaz" },
     { value: "avray", label: "Avray" },
 ];
+async function mockServerRequest(searchValue) {
+    await new Promise((resolve) => {
+        setTimeout(resolve, Math.random() * 1000);
+    });
+    const res = await fetch(`/town-74.json`);
+    const towns = (await res.json());
+    const fuse = new Fuse(towns, {
+        minMatchCharLength: 2,
+        keys: ["nom_commune"],
+    });
+    const results = fuse.search(searchValue);
+    return results.map(({ item }) => ({
+        label: item.context,
+        value: item.insee,
+    }));
+}
+export const handleChangeSearchValue = async (searchValue) => {
+    const results = await mockServerRequest(searchValue);
+    return results;
+};

package/components/autocomplete/index.d.ts

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

package/components/autocomplete/index.js

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

package/components/badge/Badge.d.ts

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

package/components/badge/Badge.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { buttonVariants } from "../button";
+import { buttonVariants } from "../button/Button";
 import { Href } from "../href";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
+import { Tooltip } from "../tooltip/Tooltip";
+import { TooltipContent } from "../tooltip/TooltipContent";
+import { TooltipTrigger } from "../tooltip/TooltipTrigger";
 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/button/Button.d.ts

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

package/components/button/Button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef, } from "react";
+import { forwardRef, useImperativeHandle, useRef } from "react";
 import clsx from "clsx";
 import { Loader } from "../loader";
 import { useRipple } from "../../hooks";

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 ".";
+import { Button } from "./Button";
 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.d";
+import { ThemeColor } from "../../types";
 export interface LinkButtonProps extends ComponentPropsWithRef<"a"> {
     href: string;
     withRipple?: boolean;

package/components/button/LinkButton.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef, } from "react";
+import { forwardRef, useImperativeHandle, useRef } from "react";
 import clsx from "clsx";
-import { useRipple } from "../../hooks";
+import { useRipple } from "../../hooks/useRipple";
 import { buttonVariants } from "./Button";
 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);

package/components/context-menu/ContextMenu.js

@@ -1,7 +1,7 @@
 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";
+import { Dialog } from "../dialog/Dialog";
 import { useEventCallback, useRefDebounce } from "../../hooks";
 export function ContextMenu({ targetRef, children, style, eventName = "contextmenu" }) {
     const [activeIndex, setActiveIndex] = useState(null);

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.d";
+import type { ThemeColor } from "../../types";
 interface Props extends ComponentProps<"div"> {
     color?: ThemeColor;
     placement?: Placement;

package/components/dialog/Dialog.js

@@ -16,5 +16,5 @@ export const dialogVariants = {
     },
 };
 export function Dialog({ placement, color, children, className, ...rest }) {
-    return (_jsx("div", { className: clsx("rounded-2xl relative shadow dark:shadow-dark", dialogVariants.color(color), className), "data-placement": placement, "data-color": color, ...rest, children: children }));
+    return (_jsx("div", { className: clsx("relative rounded-2xl shadow dark:shadow-dark", dialogVariants.color(color), className), "data-placement": placement, "data-color": color, ...rest, children: children }));
 }

package/components/dropdown-menu/DropdownMenu.js

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

package/components/dropdown-menu/DropdownMenuContent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useDropdownMenuContext } from ".";
+import { useDropdownMenuContext } from "./useDropdownMenuContext";
 import { FloatingFocusManager, FloatingList, FloatingPortal, useMergeRefs, } from "@floating-ui/react";
 import clsx from "clsx";
 import { Dialog } from "../dialog";

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 ".";
+import { useDropdownMenuContext } from "./useDropdownMenuContext";
 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,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cloneElement, forwardRef, isValidElement } from "react";
-import { useDropdownMenuContext } from ".";
+import { useDropdownMenuContext } from "./useDropdownMenuContext";
 import { useMergeRefs } from "@floating-ui/react";
 import { Button } from "../button";
 export const DropdownMenuTrigger = forwardRef(({ children, asChild = false, ...props }, propRef) => {

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

@@ -0,0 +1,10 @@
+import { Placement } from "@floating-ui/react";
+import { ThemeColor } from "../../types";
+export interface DropdownMenuOptions {
+    initialOpen?: boolean;
+    placement?: Placement;
+    open?: boolean;
+    onOpen?: (open: boolean) => void;
+    color?: ThemeColor | "default";
+    modal?: boolean;
+}

package/components/dropdown-menu/interface.js

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

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

@@ -2,7 +2,7 @@ import type { DropdownMenuOptions } from "./interface";
 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("./interface").ThemeColor | "default";
+    color: import("../..").ThemeColor | "default";
     modal: boolean;
     activeIndex: number | null;
     handleSelect: () => void;

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

@@ -1,10 +1,10 @@
-import { useDropdownMenu } from ".";
+import { useDropdownMenu } from "./useDropdownMenu";
 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("../..").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";
+import { Button, type ButtonProps } from "../button/Button";
 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 ".";
+import { MenuItemWithChildren } from "./MenuItemWithChildren";
 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/MenuItemWithChildren.d.ts

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

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

@@ -3,8 +3,8 @@ import { FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, autoU
 import { forwardRef, useContext, useEffect, useRef, useState } from "react";
 import { MenuContext } from "./MenuContext";
 import clsx from "clsx";
-import { Button } from "../button";
-import { Dialog } from "../dialog";
+import { Button } from "../button/Button";
+import { Dialog } from "../dialog/Dialog";
 export const MenuItemWithChildren = forwardRef(({ children, label, triggerComponent: TriggerComponent = Button, ...props }, forwardedRef) => {
     const [isOpen, setIsOpen] = useState(false);
     const [hasFocusInside, setHasFocusInside] = useState(false);

package/components/flash/Flash.d.ts

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

package/components/href/Href.d.ts

@@ -1,7 +1,6 @@
 import { ComponentPropsWithRef, ReactNode } from "react";
-interface Props extends ComponentPropsWithRef<"a"> {
+export interface Props extends ComponentPropsWithRef<"a"> {
     children: ReactNode;
     ghost?: boolean;
 }
 export declare const Href: (props: Props & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
-export {};

package/components/input/Checkbox.d.ts

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

package/components/input/Color.d.ts

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

package/components/input/Color.js

@@ -7,5 +7,5 @@ export const Color = forwardRef(({ value, withRipple = true, color = "yellow", l
     const buttonRef = useRef(null);
     useImperativeHandle(ref, () => buttonRef.current);
     const ripples = useRipple(buttonRef);
-    return (_jsxs("button", { ref: buttonRef, "data-color": color, className: "p8n-input-text relative flex h-8 overflow-clip rounded-2xl p-1 outline-offset-[-1px]", ...rest, children: [withRipple && ripples, _jsx("span", { className: clsx("flex items-center justify-center rounded-2xl px-2", valueToShow === null && "min-w-12", className), style: { backgroundColor: value }, children: valueToShow })] }));
+    return (_jsxs("button", { ref: buttonRef, "data-color": color, className: "p8n-input-text relative flex h-8 overflow-clip rounded-2xl p-1 outline-offset-[-1px]", ...rest, children: [withRipple && ripples, _jsx("span", { className: clsx("flex h-full items-center justify-center rounded-2xl px-2", valueToShow === null && "min-w-12", className), style: { backgroundColor: value }, children: valueToShow })] }));
 });

package/components/input/Input.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef, ReactNode } from "react";
-import type { ThemeColor } from "../../types.d";
+import type { ThemeColor } from "../../types";
 export interface InputProps extends Omit<ComponentPropsWithRef<"input">, "prefix"> {
     variant?: "normal" | "ghost";
     disabled?: boolean;

package/components/input/Input.js

@@ -5,12 +5,12 @@ export const inputConfig = {
     container: "p8n-input-text rounded-2xl outline-offset-[-1px] flex ",
     input: "h-8 flex-1 appearance-none outline-none filter-none min-w-0 bg-transparent",
 };
-export const Input = forwardRef(({ variant = "normal", color = "yellow", disabled = false, prefix, suffix, className, ...rest }, ref) => {
-    return (_jsxs("div", { "data-color": color, "data-variant": variant, className: clsx(inputConfig.container, disabled && "disabled", className), children: [prefix && (_jsx("div", { className: clsx([
-                    "flex-center relative",
+export const Input = forwardRef(({ variant = "normal", color = "yellow", disabled = false, prefix, suffix, className, readOnly, ...rest }, ref) => {
+    return (_jsxs("div", { "data-color": color, "data-variant": variant, className: clsx(inputConfig.container, disabled && "disabled", readOnly && "readonly", className), children: [prefix && (_jsx("div", { className: clsx([
+                    "relative flex-center",
                     typeof prefix === "string" && "mx-2 select-none text-gray-6",
-                ]), children: prefix })), _jsx("input", { ref: ref, className: clsx(inputConfig.input, !prefix && "pl-4", !suffix && "pr-4"), ...rest, disabled: disabled }), suffix && (_jsx("div", { className: clsx([
-                    "flex-center relative",
+                ]), children: prefix })), _jsx("input", { ref: ref, className: clsx(inputConfig.input, !prefix && "pl-4", !suffix && "pr-4"), disabled: disabled, readOnly: readOnly, ...rest }), suffix && (_jsx("div", { className: clsx([
+                    "relative flex-center",
                     typeof suffix === "string" && "mx-2 select-none text-gray-6",
                 ]), children: suffix }))] }));
 });

package/components/input/Input.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { describe, it, expect } from "vitest";
 import { render } from "@testing-library/react";
-import { Input } from ".";
+import { Input } from "./Input";
 describe("Input component", () => {
     it("forward className to <input> element", () => {
         const { container } = render(_jsx(Input, { className: "custom" }));

package/components/input/RadioGroup.d.ts

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

package/components/input/RadioGroup.js

@@ -5,7 +5,7 @@ import clsx from "clsx";
 export const Radio = forwardRef(({ disabled = false, color = "yellow", checked, children, name, className, ...rest }, ref) => {
     const inputRef = useRef(null);
     const combinedRef = useCombinedRefs(inputRef, ref);
-    return (_jsxs("label", { className: clsx("flex items-center cursor-pointer", disabled && "disabled"), children: [_jsx("input", { "data-color": color, ref: combinedRef, disabled: disabled, type: "radio", className: clsx("p8n-input-radio", "appearance-none p-0 inline-block bg-origin-border select-none shrink-0 cursor-pointer h-5 w-5 bg-gray-0 my-0 mr-1 rounded-full", className), checked: checked, name: name, ...rest }), children] }));
+    return (_jsxs("label", { className: clsx("flex cursor-pointer items-center", disabled && "disabled"), children: [_jsx("input", { "data-color": color, ref: combinedRef, disabled: disabled, type: "radio", className: clsx("p8n-input-radio", "my-0 mr-1 inline-block h-5 w-5 shrink-0 cursor-pointer select-none appearance-none rounded-full bg-gray-0 bg-origin-border p-0", className), checked: checked, name: name, ...rest }), children] }));
 });
 const placementVariants = {
     inline: "flex gap-2",

package/components/input/Range.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from "react";
-import { ThemeColor } from "../../types.d";
+import { ThemeColor } from "../../types";
 export interface RangeProps extends Omit<ComponentPropsWithRef<"input">, "value" | "min" | "max" | "step"> {
     value: number;
     min?: number;

package/components/input/Toggle.d.ts

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

package/components/input-field/InputField.d.ts

@@ -8,6 +8,6 @@ interface InputFieldOwnProps {
     warning?: ReactNode | boolean;
 }
 declare const defaultElement: (props: import("../input/Input").InputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
-type Props<E extends ElementType> = PolymorphicPropsWithRef<InputFieldOwnProps, E>;
+export type Props<E extends ElementType> = PolymorphicPropsWithRef<InputFieldOwnProps, E>;
 export declare const InputField: <E extends ElementType = typeof defaultElement>(props: Props<E>) => ReactNode;
 export {};

package/components/input-field/InputField.js

@@ -6,7 +6,7 @@ const InputFieldBase = ({ label, hint, help, error, warning, as, ...rest }, ref)
     const id = useId();
     const Element = as || defaultElement;
     const labelElement = label && _jsx("span", { className: "font-bold", children: label });
-    const hintElement = hint && (_jsx("span", { className: "ml-auto text-sm text-gray-6", children: hint }));
+    const hintElement = hint && _jsx("span", { className: "ml-auto text-sm text-gray-6", children: hint });
     const errorElement = error && typeof error !== "boolean" && (_jsxs("span", { className: "font-medium text-red-4 dark:text-red-2", children: [_jsx("i", { className: "fe-circle-exclamation" }), _jsx("span", { children: error })] }));
     const warningElement = warning && typeof warning !== "boolean" && (_jsxs("span", { className: "font-medium text-orange-4 dark:text-orange-2", children: [_jsx("i", { className: "fe-circle-exclamation" }), _jsx("span", { children: warning })] }));
     const color = error ? "red" : warning ? "orange" : "yellow";

package/components/loader/Loader.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from "react";
-import { ThemeColor } from "../../types.d";
+import { ThemeColor } from "../../types";
 interface Props extends ComponentPropsWithoutRef<"svg"> {
     size?: "small" | "medium" | "large";
     color?: ThemeColor;

package/components/loader/Loader.js

@@ -24,5 +24,5 @@ const circleStyle = {
 };
 export function Loader({ size = "medium", color = "blue", className, ...rest }) {
     const id = useId();
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: clsx("inline-block", sizeConfig[size], colorVariants[color].text, className), viewBox: "0 0 16 16", ...rest, children: [_jsx("defs", { children: _jsx("circle", { id: id, cx: "8", cy: "8", r: "7" }) }), _jsx("use", { href: `#${id}`, className: "opacity-25 fill-none stroke-current", style: trackStyle }), _jsx("use", { href: `#${id}`, className: "fill-none stroke-current animate-loader-stroke", style: circleStyle })] }));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: clsx("inline-block", sizeConfig[size], colorVariants[color].text, className), viewBox: "0 0 16 16", ...rest, children: [_jsx("defs", { children: _jsx("circle", { id: id, cx: "8", cy: "8", r: "7" }) }), _jsx("use", { href: `#${id}`, className: "fill-none stroke-current opacity-25", style: trackStyle }), _jsx("use", { href: `#${id}`, className: "animate-loader-stroke fill-none stroke-current", style: circleStyle })] }));
 }

package/components/modal/Components.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useModalContext } from ".";
+import { useModalContext } from "./useModalContext";
 import clsx from "clsx";
-import { Button } from "../button";
-import { Scroll } from "../scroll";
+import { Button } from "../button/Button";
+import { Scroll } from "../scroll/Scroll";
 export function ModalHeader({ children, className, closeButton = true, ...props }) {
     const { setOpen } = useModalContext();
     return (_jsxs(_Fragment, { children: [closeButton && (_jsx("div", { className: "float-right p-1", children: _jsx(Button, { icon: true, variant: "text", color: "gray", onClick: () => setOpen(false), children: _jsx("i", { className: "fe-cancel" }) }) })), _jsx("header", { className: clsx("flex items-center px-2 pt-2", className), ...props, children: _jsx("h4", { className: "font-semibold leading-6", children: children }) })] }));