pentatrion-design 0.0.12 → 0.0.13

package/README.md

@@ -1,7 +1,7 @@
 # [Pentatrion Design System](https://storybook.lonlat.pentatrion.com)
 
-<a href="https://storybook.lonlat.pentatrion.com">
-<img src="https://raw.githubusercontent.com/lhapaipai/lonlat/main/extra/assets/public/graphics/screenshots/storybook.jpg" alt="Pentatrion design system" />
+<a href="https://design.pentatrion.com">
+<img src="https://raw.githubusercontent.com/lhapaipai/pentatrion-design/main/screenshot.png" alt="Pentatrion design system" />
 </a>
 
 ## Prérequis

package/components/autocomplete/Autocomplete.d.ts

@@ -0,0 +1,44 @@
+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";
+export interface AutocompleteProps<O extends OptionLike = Option> {
+    className?: string;
+    icon?: boolean | ReactNode;
+    color?: ThemeColor;
+    /**
+     * render suffix only if selection
+     * ex: add contextuel buttons associated to selection
+     */
+    selectionSuffix?: ReactNode;
+    /**
+     * render suffix only if selection and searchValue is empty
+     */
+    noSearchSuffix?: ReactNode;
+    placement?: Placement;
+    placeholder?: string;
+    /**
+     * search string used as value for <input>
+     */
+    searchValue: string;
+    /**
+     * change handler when typing in the input
+     * or when clicking on an option (the label value is passed)
+     */
+    onChangeSearchValue: (value: string, selectionLabel: boolean) => void;
+    selection?: O | null;
+    /**
+     * select handler for a selection from the autocomplete's dropdown
+     * the option object is passed when clicking on an option
+     * null value is passed when typing a new character in the input search.
+     */
+    onChangeSelection: (option: O | null) => void;
+    options: O[];
+    autocompleteOptionComponent?: (props: AutocompleteOptionProps<O>) => ReactNode;
+    loading?: boolean;
+    clearSearchButton?: boolean;
+    selectOnFocus?: boolean;
+}
+declare const _default: <O extends OptionLike = Option>(props: AutocompleteProps<O> & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+export default _default;

package/components/autocomplete/Autocomplete.js

@@ -0,0 +1,132 @@
+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 { FloatingFocusManager, FloatingList, FloatingPortal, autoUpdate, flip, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, } from "@floating-ui/react";
+import { AutocompleteContext } from "./useAutocompleteContext";
+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";
+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) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const onChangeSearchValueStable = useEventCallback(onChangeSearchValue);
+    const onChangeSelectionStable = useEventCallback(onChangeSelection);
+    const OptionComponent = autocompleteOptionComponent ?? AutocompleteOption;
+    const listRef = useRef([]);
+    const { refs, floatingStyles, context } = useFloating({
+        placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(5),
+            flip({ padding: 10 }),
+            size({
+                apply({ rects, elements, availableHeight }) {
+                    Object.assign(elements.floating.style, {
+                        width: `${Math.max(130, rects.reference.width)}px`,
+                    });
+                    const firstChild = elements.floating.firstElementChild;
+                    if (firstChild) {
+                        firstChild.style.maxHeight = `${Math.min(availableHeight, 288)}px`;
+                    }
+                },
+                padding: 10,
+            }),
+        ],
+    });
+    const role = useRole(context, { role: "listbox" });
+    const dismiss = useDismiss(context);
+    const listNav = useListNavigation(context, {
+        listRef,
+        activeIndex,
+        onNavigate: setActiveIndex,
+        /* we want the real focus to stay on the input, so focus associated to active items is simulated */
+        virtual: true,
+        loop: true,
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        role,
+        dismiss,
+        listNav,
+    ]);
+    function handleChangeSearchValue(e) {
+        const value = e.target.value;
+        onChangeSearchValueStable(value, false);
+        if (value !== searchValue && selection !== null) {
+            onChangeSelectionStable(null);
+            setActiveIndex(null);
+            return;
+        }
+        if (value) {
+            setIsOpen(true);
+            /**
+             * bug whith LazyAutocomplete activeIndex is set to 0 but the options array has immediately 0 elements
+             * so focus can't be set to the first Dom element.
+             */
+            setActiveIndex(listRef.current[0] ? 0 : null);
+        }
+        else {
+            setIsOpen(false);
+            setActiveIndex(null);
+        }
+    }
+    const handleSelect = useCallback((index) => {
+        if (index === null) {
+            onChangeSelectionStable(null);
+        }
+        else if (options[index]) {
+            const newSelection = options[index];
+            onChangeSelectionStable(newSelection);
+            onChangeSearchValueStable(getOptionLabel(newSelection), true);
+        }
+        setActiveIndex(null);
+        setIsOpen(false);
+    }, [options, onChangeSelectionStable, onChangeSearchValueStable]);
+    const autocompleteContext = useMemo(() => ({
+        activeIndex,
+        selection,
+        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({
+                            onFocus() {
+                                if (selectOnFocus) {
+                                    document.activeElement?.select();
+                                }
+                            },
+                            onChange: handleChangeSearchValue,
+                            onMouseDown() {
+                                if (options.length === 0) {
+                                    return;
+                                }
+                                /**
+                                 * There is a already selection
+                                 * and the only element available is the selection,
+                                 * no need to display the dropdown.
+                                 */
+                                // if (options.length === 1 && options[0].value === selection?.value) {
+                                //   return;
+                                // }
+                                setIsOpen((isOpen) => !isOpen);
+                            },
+                            onKeyDown(e) {
+                                if (e.key === "Enter" && activeIndex != null) {
+                                    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: () => {
+                                    setIsOpen(false);
+                                    onChangeSelectionStable(null);
+                                    setActiveIndex(null);
+                                    onChangeSearchValueStable("", true);
+                                }, 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

@@ -0,0 +1,5 @@
+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;

package/components/autocomplete/AutocompleteOption.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useId } from "react";
+import { useListItem } from "@floating-ui/react";
+import { useAutocomplete } from ".";
+import clsx from "clsx";
+import { getOptionLabel, getOptionValue } from "./util";
+function AutocompleteOption(props) {
+    const label = getOptionLabel(props);
+    const id = useId();
+    const { activeIndex, selection, getItemProps, handleSelect } = useAutocomplete();
+    const { ref, index } = useListItem({ label });
+    const isActive = activeIndex === index;
+    const isSelected = selection ? getOptionValue(selection) === getOptionValue(props) : false;
+    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

@@ -0,0 +1,8 @@
+import { AutocompleteProps } from ".";
+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"> {
+    onChangeSearchValueCallback: (searchValue: string) => Promise<O[]>;
+    debounce?: number;
+}
+export declare function LazyAutocomplete<O extends OptionLike = Option>({ onChangeSearchValueCallback, debounce, selection, onChangeSelection, ...rest }: Props<O>): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/autocomplete/LazyAutocomplete.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Autocomplete } from ".";
+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);
+    const [loading, setLoading] = useState(false);
+    const [options, setOptions] = useState([]);
+    const handleChangeSelection = useCallback((selection) => {
+        onChangeSelectionStable(selection);
+        if (selection) {
+            setOptions([]);
+        }
+    }, [onChangeSelectionStable]);
+    // side effect, update the searchValue <input /> value when
+    // selection come from outside
+    useLayoutEffect(() => {
+        if (selection === null) {
+            if (document.activeElement !== inputRef.current) {
+                setSearchValue("", true);
+            }
+            return;
+        }
+        // we need the fresh value of searchValue but we don't
+        // want searchValue as useEffect dependency
+        const selectionLabel = getOptionLabel(selection);
+        if (searchValueRef.current !== selectionLabel) {
+            setSearchValue(selectionLabel, true);
+        }
+    }, [selection, setSearchValue]);
+    /**
+     * set new options when searchValueDebounced change
+     */
+    useEffect(() => {
+        let abort = false;
+        // when we're selecting option we change searchValue to be the complete label
+        // value but we don't want to fetch new research
+        if (selection) {
+            return;
+        }
+        if (searchValueDebounced.trim() === "") {
+            setOptions([]);
+            return;
+        }
+        setLoading(true);
+        onChangeSearchValueCallbackStable(searchValueDebounced)
+            ?.then((newOptions) => {
+            setLoading(false);
+            if (!abort) {
+                setOptions(newOptions);
+            }
+        })
+            .catch(() => {
+            setLoading(false);
+        });
+        return () => {
+            setLoading(false);
+            abort = true;
+        };
+    }, [selection, searchValueDebounced, onChangeSearchValueCallbackStable]);
+    return (_jsx(Autocomplete, { ref: inputRef, searchValue: searchValue, onChangeSearchValue: (newValue, immediate) => {
+            setSearchValue(newValue, immediate || newValue === "" ? true : false);
+        }, selection: selection, onChangeSelection: handleChangeSelection, options: options, loading: loading, ...rest }));
+}

package/components/autocomplete/SimpleAutocomplete.d.ts

@@ -0,0 +1,6 @@
+import { AutocompleteProps } from ".";
+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"> {
+}
+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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Autocomplete } from ".";
+import { useEventCallback } from "../../hooks";
+import { getOptionLabel } from "./util";
+export function SimpleAutocomplete({ options, selection = null, onChangeSelection, ...rest }) {
+    const onChangeSelectionStable = useEventCallback(onChangeSelection);
+    const [searchValue, setSearchValue] = useState(selection ? getOptionLabel(selection) : "");
+    const searchValueRef = useRef(searchValue);
+    searchValueRef.current = searchValue;
+    const inputRef = useRef(null);
+    // side effect, update the searchValue <input /> value when
+    // selection come from outside
+    useLayoutEffect(() => {
+        if (selection === null) {
+            if (document.activeElement !== inputRef.current) {
+                setSearchValue("");
+            }
+            return;
+        }
+        // we need the fresh value of searchValue but we don't
+        // want searchValue as useEffect dependency
+        const selectionLabel = getOptionLabel(selection);
+        if (searchValueRef.current !== getOptionLabel(selection)) {
+            setSearchValue(selectionLabel);
+        }
+    }, [selection, setSearchValue]);
+    const filteredOptions = selection !== null
+        ? []
+        : options.filter((option) => {
+            const optionLabel = getOptionLabel(option);
+            return optionLabel.toLowerCase().startsWith(searchValue.toLowerCase());
+        });
+    return (_jsx(Autocomplete, { ref: inputRef, searchValue: searchValue, onChangeSearchValue: setSearchValue, selection: selection, onChangeSelection: onChangeSelectionStable, options: filteredOptions, ...rest }));
+}

package/components/autocomplete/_fixtures.d.ts

@@ -0,0 +1,2 @@
+import { Option } from "../select";
+export declare const options: Option[];

package/components/autocomplete/_fixtures.js

@@ -0,0 +1,25 @@
+export const options = [
+    { value: "abbeville", label: "Abbeville" },
+    { value: "agde", label: "Agde" },
+    { value: "agen", label: "Agen" },
+    { value: "aixenprovence", label: "Aix-en-Provence" },
+    { value: "ajaccio", label: "Ajaccio" },
+    { value: "albi", label: "Albi" },
+    { value: "alencon", label: "Alençon" },
+    { value: "amiens", label: "Amiens" },
+    { value: "angers", label: "Angers" },
+    { value: "angouleme", label: "Angoulême" },
+    { value: "annonay", label: "Annonay" },
+    { value: "antibes", label: "Antibes" },
+    { value: "arcachon", label: "Arcachon" },
+    { value: "arles", label: "Arles" },
+    { value: "arras", label: "Arras" },
+    { value: "asnieres-sur-seine", label: "Asnières-sur-Seine" },
+    { value: "aubagne", label: "Aubagne" },
+    { value: "aubervilliers", label: "Aubervilliers" },
+    { value: "aulnay-sous-bois", label: "Aulnay-sous-Bois" },
+    { value: "avignon", label: "Avignon" },
+    { value: "avranches", label: "Avranches" },
+    { value: "avoriaz", label: "Avoriaz" },
+    { value: "avray", label: "Avray" },
+];

package/components/autocomplete/index.js

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

package/components/autocomplete/useAutocompleteContext.d.ts

@@ -0,0 +1,11 @@
+import { useInteractions } from "@floating-ui/react";
+import { OptionLike } from "../select";
+interface AutocompleteContext {
+    activeIndex: number | null;
+    selection: OptionLike | null;
+    getItemProps: ReturnType<typeof useInteractions>["getItemProps"];
+    handleSelect: (index: number | null) => void;
+}
+export declare const AutocompleteContext: import("react").Context<AutocompleteContext | null>;
+export declare function useAutocomplete(): AutocompleteContext;
+export {};

package/components/autocomplete/useAutocompleteContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const AutocompleteContext = createContext(null);
+export function useAutocomplete() {
+    const context = useContext(AutocompleteContext);
+    if (context === null) {
+        throw new Error("Autocomplete components must be wrapped in <Autocomplete>");
+    }
+    return context;
+}

package/components/autocomplete/util.d.ts

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

package/components/autocomplete/util.js

@@ -0,0 +1,16 @@
+export function getOptionLabel(option) {
+    switch (option.type) {
+        case "Feature":
+            return option.properties.label;
+        default:
+            return option.label;
+    }
+}
+export function getOptionValue(option) {
+    switch (option.type) {
+        case "Feature":
+            return option.properties.id;
+        default:
+            return option.value;
+    }
+}

package/components/badge/Badge.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { ThemeColor } from "../../types.d";
+interface Props {
+    children: ReactNode;
+    className?: string;
+    tooltip?: string;
+    url?: string;
+    color?: ThemeColor;
+    onClick?: () => void;
+    onRemove?: () => void;
+}
+export declare function Badge({ children, className, onRemove, onClick, tooltip, url, color, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/badge/Badge.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { buttonVariants } from "../button";
+import { Href } from "../href";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
+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],
+        // `variant-solid-${color}`,
+        // `text-${color}-4`,
+        className), children: [onClick ? (_jsx("button", { className: "px-2", onClick: onClick, children: children })) : (_jsx("span", { className: "px-2", children: children })), onRemove && (_jsx("button", { className: "remove rounded-r-full pl-0.5 pr-1", onClick: onRemove, children: _jsx("i", { className: "fe-cancel" }) }))] }));
+    const wrappedBadge = url ? (_jsx(Href, { href: url, ghost: true, children: badge })) : (badge);
+    if (!tooltip) {
+        return wrappedBadge;
+    }
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipContent, { children: tooltip }), _jsx(TooltipTrigger, { asChild: true, children: wrappedBadge })] }));
+}

package/components/badge/index.js

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

package/components/button/Button.d.ts

@@ -0,0 +1,34 @@
+import { ComponentPropsWithRef } from "react";
+import { ThemeColor } from "../../types.d";
+export interface ButtonProps extends ComponentPropsWithRef<"button"> {
+    withRipple?: boolean;
+    variant?: "contained" | "light" | "outlined" | "text" | "ghost";
+    size?: "small" | "medium" | "large" | "custom";
+    color?: ThemeColor;
+    children?: React.ReactNode;
+    /**
+     * undefined: hidden
+     * false: invisible
+     * true: visible
+     */
+    loading?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    focusable?: boolean;
+    /**
+     * For a selected item inside a group.
+     */
+    selected?: boolean;
+    icon?: boolean;
+}
+export declare const buttonVariants: {
+    size(icon: boolean, size: "small" | "medium" | "large" | "custom"): string | false;
+    variant: {
+        contained(color: ThemeColor): string;
+        light(color: ThemeColor): string;
+        outlined(color: ThemeColor): string;
+        text(color: ThemeColor): string;
+        ghost(color: ThemeColor): string;
+    };
+};
+export declare const Button: (props: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/components/button/Button.js

@@ -0,0 +1,80 @@
+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";
+export const buttonVariants = {
+    size(icon, size) {
+        if (size === "custom") {
+            return false;
+        }
+        switch (size) {
+            case "small":
+                return clsx("text-sm h-6", icon ? "min-w-6 [&_i]:w-6" : "px-2");
+            case "medium":
+                return clsx("h-8", icon ? "min-w-8 [&_i]:w-8" : "px-4");
+            case "large":
+                return clsx("h-12", icon ? "text-2xl min-w-12 [&_i]:w-12" : "text-xl px-8");
+        }
+    },
+    variant: {
+        contained(color) {
+            return clsx("shadow hover:shadow-md focus:shadow-md active-full:shadow-lg outline-offset-0", {
+                yellow: "text-yellow-text bg-yellow-3 hover:bg-yellow-4 active-full:bg-yellow-5 focus-visible:outline-yellow-5",
+                gray: "text-gray-text bg-gray-3 hover:bg-gray-4 active-full:bg-gray-5 focus-visible:outline-gray-5",
+                red: "text-red-text bg-red-3 hover:bg-red-4 active-full:bg-red-5 focus-visible:outline-red-5",
+                orange: "text-orange-text bg-orange-3 hover:bg-orange-4 active-full:bg-orange-5 focus-visible:outline-orange-5",
+                green: "text-green-text bg-green-3 hover:bg-green-4 active-full:bg-green-5 focus-visible:outline-green-5",
+                blue: "text-blue-text bg-blue-3 hover:bg-blue-4 active-full:bg-blue-5 focus-visible:outline-blue-5",
+            }[color]);
+        },
+        light(color) {
+            return clsx("shadow hover:shadow-md focus:shadow-md active-full:shadow-lg outline-offset-0 bg-gray-0", {
+                yellow: "text-gray-text hover:text-yellow-text hover:bg-yellow-3 active-full:bg-yellow-4 dark:active-full:bg-yellow-4 focus-visible:outline-yellow-4",
+                gray: "text-gray-text hover:text-gray-text hover:bg-gray-3 active-full:bg-gray-4 dark:active-full:bg-gray-4/50 focus-visible:outline-gray-4",
+                red: "text-gray-text hover:text-red-text hover:bg-red-3 active-full:bg-red-4 dark:active-full:bg-red-4/50 focus-visible:outline-red-4",
+                orange: "text-gray-text hover:text-orange-text hover:bg-orange-3 active-full:bg-orange-4 dark:active-full:bg-orange-4/50 focus-visible:outline-orange-4",
+                green: "text-gray-text hover:text-green-text hover:bg-green-3 active-full:bg-green-4 dark:active-full:bg-green-4/50 focus-visible:outline-green-4",
+                blue: "text-gray-text hover:text-blue-text hover:bg-blue-3 active-full:bg-blue-4 dark:active-full:bg-blue-4/50 focus-visible:outline-blue-4",
+            }[color]);
+        },
+        outlined(color) {
+            return clsx("bg-gray-0 text-gray-7 outline outline-2 outline-offset-[-2px] focus-visible:ring-2 active-full:shadow-md", {
+                yellow: "hover:bg-yellow-1/50 active-full:bg-yellow-2/50 outline-yellow-5 focus-visible:ring-yellow-4",
+                gray: "hover:bg-gray-1 active-full:bg-gray-2 outline-gray-5 focus-visible:ring-gray-4",
+                red: "hover:bg-red-1/50 active-full:bg-red-2/50 outline-red-5 focus-visible:ring-red-4",
+                orange: "hover:bg-orange-1/50 active-full:bg-orange-2/50 outline-orange-5 focus-visible:ring-orange-4",
+                green: "hover:bg-green-1/50 active-full:bg-green-2/50 outline-green-5 focus-visible:ring-green-4",
+                blue: "hover:bg-blue-1/50 active-full:bg-blue-2/50 outline-blue-5 focus-visible:ring-blue-4",
+            }[color]);
+        },
+        text(color) {
+            return clsx("bg-transparent active-full:shadow-sm outline-offset-0", {
+                yellow: "hover:bg-yellow-1/50 active-full:bg-yellow-2/25 text-yellow-4 hover:text-yellow-5 focus-visible:outline-yellow-5",
+                gray: "hover:bg-gray-1 active-full:bg-gray-2 text-gray-5 hover:text-gray-6 active-full:text-gray-7 focus-visible:outline-gray-5",
+                red: "hover:bg-red-1/50 active-full:bg-red-2/50 text-red-4 hover:text-red-5 focus-visible:outline-red-5",
+                orange: "hover:bg-orange-1/50 active-full:bg-orange-2/50 text-orange-4 hover:text-orange-5 focus-visible:outline-orange-5",
+                green: "hover:bg-green-1/50 active-full:bg-green-2/50 text-green-4 hover:text-green-5 focus-visible:outline-green-5",
+                blue: "hover:bg-blue-1/50 active-full:bg-blue-2/50 text-blue-4 hover:text-blue-5 focus-visible:outline-blue-5",
+            }[color]);
+        },
+        ghost(color) {
+            return clsx("bg-transparent outline-offset-0", {
+                yellow: "text-yellow-4 hover:text-yellow-5",
+                gray: "text-gray-5 hover:text-gray-6 active-full:text-gray-7",
+                red: "text-red-4 hover:text-red-5",
+                orange: "text-orange-4 hover:text-orange-5",
+                green: "text-green-4 hover:text-green-5",
+                blue: "text-blue-4 hover:text-blue-5",
+            }[color]);
+        },
+    },
+};
+export const Button = forwardRef(({ withRipple = true, variant = "contained", loading, color = "yellow", size = "medium", focusable = true, fullWidth, className, disabled, children, selected = false, icon = false, ...props }, ref) => {
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    const notClickable = loading || disabled;
+    const ripples = useRipple(inputRef);
+    // check if overflow-clip-margin: 1px; is needed ?
+    return (_jsxs("button", { tabIndex: focusable ? 0 : -1, role: "button", ref: inputRef, className: clsx("relative inline-flex cursor-pointer items-center overflow-clip border-0 text-center leading-5 no-underline duration-300 focus-visible:outline focus-visible:outline-2 motion-safe:transition-color-shadow", icon ? "rounded-full" : "rounded-2xl", className, buttonVariants.size(icon, size), buttonVariants.variant[variant](color), icon && "justify-center [&_:last-child:not(i,img,svg)]:pr-4", fullWidth && "w-full", selected && "active", notClickable && "disabled"), "data-variant": variant, disabled: disabled, "aria-busy": loading, ...props, children: [!notClickable && withRipple && ripples, children, loading !== undefined && (_jsx("span", { className: "", children: _jsx(Loader, { color: color, size: "small", className: clsx("-mr-2 ml-2", !loading && "invisible") }) }))] }));
+});

package/components/button/Button.test.d.ts

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

package/components/button/Button.test.js

@@ -0,0 +1,17 @@
+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 ".";
+afterEach(cleanup);
+describe("<Button />", () => {
+    it("forwards className", () => {
+        const { getByRole } = render(_jsx(Button, { className: "custom" }));
+        expect(getByRole("button")).toHaveClass("custom");
+    });
+    it("handle click", () => {
+        const mockOnClick = vi.fn();
+        const { getByRole } = render(_jsx(Button, { onClick: mockOnClick, children: "Click Me" }));
+        fireEvent.click(getByRole("button"));
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+});

package/components/button/ButtonGroup.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps, ReactNode } from "react";
+interface Props extends ComponentProps<"div"> {
+    children: ReactNode;
+    direction?: "horizontal" | "vertical";
+}
+export declare function ButtonGroup({ children, className, direction }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/button/ButtonGroup.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const buttonGroupVariants = {
+    horizontal: "[&_:not(:first-child)]:rounded-bl-none [&_:not(:last-child)]:rounded-tr-none [&_[data-variant='outlined']]:-mx-[1px]",
+    vertical: "flex flex-col [&_:not(:first-child)]:rounded-tr-none [&_:not(:last-child)]:rounded-bl-none [&_[data-variant='outlined']]:-my-[1px]",
+};
+export function ButtonGroup({ children, className, direction = "horizontal" }) {
+    return (_jsx("div", { className: clsx("ll-button-group [&_:not(:first-child)]:rounded-tl-none [&_:not(:last-child)]:rounded-br-none", buttonGroupVariants[direction], `direction-${direction}`, className), children: children }));
+}

package/components/button/LinkButton.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithRef } from "react";
+import { ThemeColor } from "../../types.d";
+export interface LinkButtonProps extends ComponentPropsWithRef<"a"> {
+    href: string;
+    withRipple?: boolean;
+    variant?: "contained" | "light" | "outlined" | "text" | "ghost";
+    size?: "small" | "medium" | "large" | "custom";
+    color?: ThemeColor;
+    children?: React.ReactNode;
+    fullWidth?: boolean;
+    focusable?: boolean;
+    /**
+     * For a selected item inside a group.
+     */
+    selected?: boolean;
+    icon?: boolean;
+}
+export declare const LinkButton: (props: LinkButtonProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;