pentatrion-design 0.0.14 → 0.0.16

package/components/autocomplete/Autocomplete.d.ts

@@ -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,7 +94,8 @@ 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) {
                                     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.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.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.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 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/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/useDropdownMenuContext.d.ts

@@ -1,4 +1,4 @@
-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(): {

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/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/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.js

@@ -5,11 +5,15 @@ 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([
+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([
+                ]), children: prefix })), _jsx("input", { ref: ref, className: clsx(inputConfig.input, !prefix && "pl-4", !suffix && "pr-4"), disabled: disabled, readOnly: readOnly, onFocus: () => {
+                    if (readOnly) {
+                        document.activeElement?.select();
+                    }
+                }, ...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-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/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 }) })] }));

package/components/modal/ModalContent.js

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

package/components/modal/ModalTrigger.js

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

package/components/notification/NotificationsProvider.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { NotificationsContext, createNotificationsManager, } from "./NotificationsContext";
-import { Snack } from "../snack";
+import { Snack } from "../snack/Snack";
 export function NotificationsProvider({ children }) {
     const [notifications, setNotifications] = useState([]);
     const container = useRef(null);

package/components/notification/useFetch.js

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { fetchAPI } from "../../lib";
-import { useContextNotifications } from ".";
+import { useContextNotifications } from "./useContextNotifications";
 export const useFetch = () => {
     // is it the good useContextNotifications ? from redux or not ??
     const notificationManager = useContextNotifications();

package/components/select/Select.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode, Ref } from "react";
 import { Placement } from "@floating-ui/react";
-import { SelectSelectionProps } from ".";
+import { SelectSelectionProps } from "./SelectSelection";
 import type { Option } from "./interface";
 export type SelectValue = number | string | null;
 type ChangeEventLike = {

package/components/select/Select.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { FloatingFocusManager, FloatingList, FloatingPortal, autoUpdate, flip, offset, size, useClick, useDismiss, useFloating, useInteractions, useListNavigation, useMergeRefs, useRole, useTypeahead, } from "@floating-ui/react";
-import { SelectSelection, SelectContext } from ".";
+import { SelectSelection } from "./SelectSelection";
+import { SelectContext } from "./useSelectContext";
 import clsx from "clsx";
-import { Input } from "../input";
-import { Button } from "../button";
-import { useEventCallback } from "../../hooks";
-import { Dialog } from "../dialog";
+import { Input } from "../input/Input";
+import { Button } from "../button/Button";
+import { useEventCallback } from "../../hooks/useEventCallback";
+import { Dialog } from "../dialog/Dialog";
 function defaultGetSearchableValue(matchReg, option) {
     return matchReg.test(option.label.toLowerCase().trim());
 }
@@ -50,8 +51,7 @@ export const Select = forwardRef(({ variant = "normal", disabled = false, showAr
                     Object.assign(elements.floating.style, {
                         width: `${Math.max(floatingMinWidth, rects.reference.width)}px`,
                     });
-                    const firstChild = elements.floating
-                        .firstElementChild;
+                    const firstChild = elements.floating.firstElementChild;
                     if (firstChild) {
                         firstChild.style.maxHeight = `${Math.min(availableHeight, 300)}px`;
                     }
@@ -85,7 +85,13 @@ export const Select = forwardRef(({ variant = "normal", disabled = false, showAr
             isTypingRef.current = isTyping;
         },
     });
-    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNav, typeahead, click, dismiss, role]);
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        listNav,
+        typeahead,
+        click,
+        dismiss,
+        role,
+    ]);
     useEffect(() => {
         if (SelectOptionCustomComponent) {
             return;
@@ -126,9 +132,7 @@ export const Select = forwardRef(({ variant = "normal", disabled = false, showAr
                             }, ...getFloatingProps(), children: _jsxs(Dialog, { placement: context.placement, className: "max-h-80 overflow-auto motion-safe:animate-fade-in-list", children: [searchable && (_jsx("div", { className: "p-2", children: _jsx(Input, { color: "gray", placeholder: "Search", tabIndex: selectedIndex === null ? 0 : -1, value: search, onChange: handleSearchChange, onFocus: () => setSearchHasFocus(true), onBlur: () => setSearchHasFocus(false) }) })), SelectOptionCustomComponent ? (_jsx(FloatingList, { elementsRef: listRef, labelsRef: labelsRef, children: filteredOptions.map((option) => (_createElement(SelectOptionCustomComponent, { ...option, key: option.value }))) })) : (filteredOptions.map((option, index) => {
                                         const isActive = activeIndex === index;
                                         const isSelected = selectedIndex === index;
-                                        return (_jsx("button", { className: clsx("option", isSelected
-                                                ? "bg-gray-2"
-                                                : isActive && "bg-gray-1"), role: "option", "aria-selected": isActive && isSelected, tabIndex: isActive ? 0 : -1, ref: (node) => {
+                                        return (_jsx("button", { className: clsx("option", isSelected ? "bg-gray-2" : isActive && "bg-gray-1"), role: "option", "aria-selected": isActive && isSelected, tabIndex: isActive ? 0 : -1, ref: (node) => {
                                                 listRef.current[index] = node;
                                             }, ...getItemProps({
                                                 onClick: () => handleSelect(index),

package/components/tooltip/SimpleTooltip.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from "react";
-import { Tooltip, TooltipContent, TooltipTrigger } from ".";
+import { Tooltip } from "./Tooltip";
+import { TooltipContent } from "./TooltipContent";
+import { TooltipTrigger } from "./TooltipTrigger";
 export function SimpleTooltip({ content, children, contentClassName, ...options }) {
     return (_jsxs(Tooltip, { ...options, children: [_jsx(TooltipContent, { className: contentClassName, children: content }), _jsx(TooltipTrigger, { asChild: isValidElement(children), children: children })] }));
 }

package/components/tooltip/Tooltip.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTooltip, TooltipContext } from ".";
+import { useTooltip } from "./useTooltip";
+import { TooltipContext } from "./useTooltipContext";
 export function Tooltip({ children, ...options }) {
     const tooltip = useTooltip(options);
     return _jsx(TooltipContext.Provider, { value: tooltip, children: children });

package/components/tooltip/Tooltip.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cleanup, fireEvent, render } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
-import { SimpleTooltip } from ".";
+import { SimpleTooltip } from "./SimpleTooltip";
 afterEach(cleanup);
 describe("<Tooltip />", () => {
     it("show the popup", async () => {

package/components/tooltip/TooltipContent.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useTooltipContext } from ".";
+import { useTooltipContext } from "./useTooltipContext";
 import { FloatingPortal, useMergeRefs } from "@floating-ui/react";
 import clsx from "clsx";
 import { computeArrowStyle } from "../dialog/util";
-import { Dialog } from "../dialog";
+import { Dialog } from "../dialog/Dialog";
 export const TooltipContent = forwardRef(({ style, children, className, ...props }, propRef) => {
     const context = useTooltipContext();
     const ref = useMergeRefs([context.refs.setFloating, propRef]);

package/components/tooltip/TooltipTrigger.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cloneElement, forwardRef, isValidElement } from "react";
-import { useTooltipContext } from ".";
+import { useTooltipContext } from "./useTooltipContext";
 import { useMergeRefs } from "@floating-ui/react";
 export const TooltipTrigger = forwardRef(({ children, asChild = false, ...props }, propRef) => {
     const context = useTooltipContext();

package/components/tooltip/useTooltipContext.d.ts

@@ -1,4 +1,4 @@
-import { useTooltip } from ".";
+import { useTooltip } from "./useTooltip";
 type ContextType = ReturnType<typeof useTooltip> | null;
 export declare const TooltipContext: import("react").Context<ContextType>;
 export declare function useTooltipContext(): {

package/hooks/useRipple.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { useDebounce } from ".";
+import { useDebounce } from "./useDebounce";
 /**
  * This hook accepts a ref to any element and adds a click event handler that creates ripples when click
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pentatrion-design",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "",
   "keywords": [],
   "author": "Hugues Tavernier",

package/tailwind/base.js

@@ -57,4 +57,46 @@ export const base = {
     abbr: {
         "@apply cursor-help underline decoration-dashed": {},
     },
+    '[data-color="yellow"]': {
+        "--color-custom-1": "var(--color-yellow-1);",
+        "--color-custom-2": "var(--color-yellow-2);",
+        "--color-custom-3": "var(--color-yellow-3);",
+        "--color-custom-4": "var(--color-yellow-4);",
+        "--color-custom-5": "var(--color-yellow-5);",
+    },
+    '[data-color="gray"]': {
+        "--color-custom-1": "var(--color-gray-1);",
+        "--color-custom-2": "var(--color-gray-2);",
+        "--color-custom-3": "var(--color-gray-3);",
+        "--color-custom-4": "var(--color-gray-4);",
+        "--color-custom-5": "var(--color-gray-5);",
+    },
+    '[data-color="red"]': {
+        "--color-custom-1": "var(--color-red-1);",
+        "--color-custom-2": "var(--color-red-2);",
+        "--color-custom-3": "var(--color-red-3);",
+        "--color-custom-4": "var(--color-red-4);",
+        "--color-custom-5": "var(--color-red-5);",
+    },
+    '[data-color="orange"]': {
+        "--color-custom-1": "var(--color-orange-1);",
+        "--color-custom-2": "var(--color-orange-2);",
+        "--color-custom-3": "var(--color-orange-3);",
+        "--color-custom-4": "var(--color-orange-4);",
+        "--color-custom-5": "var(--color-orange-5);",
+    },
+    '[data-color="green"]': {
+        "--color-custom-1": "var(--color-green-1);",
+        "--color-custom-2": "var(--color-green-2);",
+        "--color-custom-3": "var(--color-green-3);",
+        "--color-custom-4": "var(--color-green-4);",
+        "--color-custom-5": "var(--color-green-5);",
+    },
+    '[data-color="blue"]': {
+        "--color-custom-1": "var(--color-blue-1);",
+        "--color-custom-2": "var(--color-blue-2);",
+        "--color-custom-3": "var(--color-blue-3);",
+        "--color-custom-4": "var(--color-blue-4);",
+        "--color-custom-5": "var(--color-blue-5);",
+    },
 };

package/tailwind/components.js

@@ -186,46 +186,19 @@ export const componentsResizeArea = {
 };
 export const componentsInputOutline = {
     ":is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea)": {
-        "@apply outline outline-1 focus-full:outline-2": {},
+        "@apply outline outline-1 outline-[rgb(var(--color-custom-2))] hover:outline-[rgb(var(--color-custom-3))] focus-full:outline-[rgb(var(--color-custom-4))]": {},
     },
     ':is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):where([data-color="yellow"])': {
-        "@apply outline-gray-2 hover:outline-gray-3 focus-full:outline-yellow-4": {},
+        "@apply outline-gray-2 hover:outline-gray-3": {},
     },
-    ':is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):where([data-color="gray"])': {
-        "@apply outline-gray-2 hover:outline-gray-3 focus-full:outline-gray-4": {},
-    },
-    ':is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):where([data-color="red"])': {
-        "@apply outline-red-2 hover:outline-red-3 focus-full:outline-red-4": {},
-    },
-    ':is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):where([data-color="orange"])': {
-        "@apply outline-orange-2 hover:outline-orange-3 focus-full:outline-orange-4": {},
-    },
-    ':is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):where([data-color="blue"])': {
-        "@apply outline-blue-2 hover:outline-blue-3 focus-full:outline-blue-4": {},
-    },
-    ':is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):where([data-color="green"])': {
-        "@apply outline-green-2 hover:outline-green-3 focus-full:outline-green-4": {},
+    ":is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):not([readonly], .readonly)": {
+        "@apply focus-full:outline-2": {},
     },
     ':is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):where([data-variant="ghost"])': {
         "@apply outline-transparent": {},
     },
-    ':is(.p8n-input-checkbox, .p8n-input-radio):where([data-color="yellow"])': {
-        "@apply text-yellow-3": {},
-    },
-    ':is(.p8n-input-checkbox, .p8n-input-radio):where([data-color="gray"])': {
-        "@apply text-gray-3": {},
-    },
-    ':is(.p8n-input-checkbox, .p8n-input-radio):where([data-color="red"])': {
-        "@apply text-red-3": {},
-    },
-    ':is(.p8n-input-checkbox, .p8n-input-radio):where([data-color="orange"])': {
-        "@apply text-orange-3": {},
-    },
-    ':is(.p8n-input-checkbox, .p8n-input-radio):where([data-color="blue"])': {
-        "@apply text-blue-3": {},
-    },
-    ':is(.p8n-input-checkbox, .p8n-input-radio):where([data-color="green"])': {
-        "@apply text-green-3": {},
+    ":is(.p8n-input-checkbox, .p8n-input-radio)": {
+        "@apply text-[rgb(var(--color-custom-3))]": {},
     },
     ":is(.p8n-input-checkbox, .p8n-input-radio):is(:checked, .checked, .indeterminate)": {
         "@apply bg-full bg-center bg-no-repeat outline-gray-1 bg-current": {},
@@ -257,6 +230,9 @@ export const components = {
             opacity: "0.5",
         },
     },
+    "input[readonly]": {
+        color: "rgb(var(--color-gray-6))",
+    },
     ".option": {
         "@apply flex w-full px-2 h-8 items-center text-left relative cursor-pointer first:rounded-t-2xl last:rounded-b-2xl hover:bg-gray-1 focus-full:text-gray-8 outline-none": {},
         "&[disabled]": { color: "rgb(var(--color-gray-6))", pointerEvents: "none" },

package/tailwind/utilities.js

@@ -45,23 +45,14 @@ export const utilitiesDialog = {
     },
     '[data-placement="right-start"]': { transformOrigin: "top left" },
     '[data-placement="right-end"]': { transformOrigin: "bottom left" },
-    '[data-placement][data-color="yellow"] .p8n-arrow': {
-        "@apply text-gray-0": {},
+    ".p8n-arrow": {
+        "@apply text-[rgb(var(--color-custom-1))]": {},
     },
-    '[data-placement][data-color="gray"] .p8n-arrow': {
+    '[data-color="yellow"] .p8n-arrow': {
         "@apply text-gray-0": {},
     },
-    '[data-placement][data-color="red"] .p8n-arrow': {
-        "@apply text-red-1": {},
-    },
-    '[data-placement][data-color="orange"] .p8n-arrow': {
-        "@apply text-orange-1": {},
-    },
-    '[data-placement][data-color="blue"] .p8n-arrow': {
-        "@apply text-blue-1": {},
-    },
-    '[data-placement][data-color="green"] .p8n-arrow': {
-        "@apply text-green-1": {},
+    '[data-color="gray"] .p8n-arrow': {
+        "@apply text-gray-0": {},
     },
     ".option[data-nested][data-open]:not([data-focus-inside])": {
         "@apply bg-gray-2": {},