pentatrion-design 0.0.17 → 0.0.19

package/components/autocomplete/Autocomplete.d.ts

@@ -7,15 +7,11 @@ 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;
+    suffix?: ReactNode;
     placement?: Placement;
     placeholder?: string;
     /**

package/components/autocomplete/Autocomplete.js

@@ -11,7 +11,7 @@ import { Button } from "../button";
 import { Dialog } from "../dialog";
 import { Loader } from "../loader";
 import { inputConfig } from "../input/Input";
-export const Autocomplete = forwardRef(function Autocomplete({ className, icon = true, color = "yellow", selectionSuffix, noSearchSuffix, placement = "bottom", placeholder = "Search...", selection = null, onChangeSelection, autocompleteOptionComponent, loading = false, clearSearchButton = false, searchValue, onChangeSearchValue, options, selectOnFocus = true, readOnly = false, }, inputRef) {
+export const Autocomplete = forwardRef(function Autocomplete({ className, icon = true, color = "yellow", noSearchSuffix, suffix, placement = "bottom", placeholder = "Search...", selection = null, onChangeSelection, autocompleteOptionComponent, loading = false, clearSearchButton = false, searchValue, onChangeSearchValue, options, selectOnFocus = true, readOnly = false, }, inputRef) {
     const [isOpen, setIsOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(null);
     const onChangeSearchValueStable = useEventCallback(onChangeSearchValue);
@@ -121,7 +121,7 @@ export const Autocomplete = forwardRef(function Autocomplete({ className, icon =
                                     handleSelect(activeIndex);
                                 }
                             },
-                        }) }), _jsxs("div", { className: "relative flex-center", children: [selection && selectionSuffix, showClearSearchButton && (_jsx(Button, { withRipple: false, icon: true, color: "gray", variant: "text", onClick: () => {
+                        }) }), _jsxs("div", { className: "relative flex-center", children: [suffix, showClearSearchButton && (_jsx(Button, { withRipple: false, icon: true, color: "gray", variant: "text", onClick: () => {
                                     setIsOpen(false);
                                     onChangeSelectionStable(null);
                                     setActiveIndex(null);

package/components/autocomplete/LazyAutocomplete.d.ts

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

package/components/autocomplete/SimpleAutocomplete.d.ts

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

package/components/textarea/Textarea.d.ts

@@ -1,7 +1,8 @@
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import type { ThemeColor } from "../../types";
 export interface TextareaProps extends ComponentProps<"textarea"> {
     variant?: "normal" | "ghost";
     color?: ThemeColor;
+    action?: ReactNode;
 }
 export declare const Textarea: (props: TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>) => React.ReactElement | null;

package/components/textarea/Textarea.js

@@ -1,6 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef } from "react";
-export const Textarea = forwardRef(function Textarea({ variant = "normal", color = "yellow", disabled = false, className, ...rest }, ref) {
-    return (_jsx("textarea", { "data-color": color, "data-variant": variant, ref: ref, className: clsx("p8n-textarea min-w-0 appearance-none rounded-2xl bg-transparent p-2 outline-offset-[-1px] filter-none", disabled && "disabled", className), disabled: disabled, ...rest }));
+export const Textarea = forwardRef(function Textarea({ variant = "normal", color = "yellow", disabled = false, className, readOnly, action, ...rest }, ref) {
+    return (_jsxs("div", { className: clsx("relative block", className), children: [_jsx("textarea", { "data-color": color, "data-variant": variant, ref: ref, className: clsx("p8n-textarea w-full min-w-0 appearance-none rounded-2xl bg-transparent p-2 outline-offset-[-1px] filter-none", disabled && "disabled", readOnly && "readonly"), readOnly: readOnly, onFocus: () => {
+                    if (readOnly) {
+                        document.activeElement?.select();
+                    }
+                }, disabled: disabled, ...rest }), action && _jsx("div", { className: "absolute right-1 top-1", children: action })] }));
 });

package/package.json

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

package/tailwind/components.js

@@ -230,7 +230,7 @@ export const components = {
             opacity: "0.5",
         },
     },
-    "input[readonly]": {
+    ":is(input,textarea)[readonly]": {
         color: "rgb(var(--color-gray-6))",
     },
     ".option": {

package/tailwind/pentatrionTw.js

@@ -42,16 +42,14 @@ export const pentatrionTw = plugin.withOptions(function (options = {}) {
         options.vars !== false && addBase(vars);
         options.base !== false && addBase(base);
         options.components !== false && addComponents(components);
-        options.componentsInputOutline !== false &&
-            addComponents(componentsInputOutline);
-        options.componentsResizeArea !== false &&
-            addComponents(componentsResizeArea);
+        options.componentsInputOutline !== false && addComponents(componentsInputOutline);
+        options.componentsResizeArea !== false && addComponents(componentsResizeArea);
         options.componentsStep !== false && addComponents(componentsStep);
         options.utilities !== false && addUtilities(utilities);
         options.utilitiesDialog !== false && addUtilities(utilitiesDialog);
         addVariant("active-full", ["&:active", "&.active"]);
-        // addVariant("focus-full", ["&:focus-within", "&.focus", "&:focus"]);
-        addVariant("focus-full", ["&:has(input:focus)", "&.focus", "&:focus"]);
+        // dbl :focus:focus else :hover will have priority to focus-full variant.
+        addVariant("focus-full", ["&:has(input:focus)", "&.focus", "&:focus:focus"]);
     };
 }, function () {
     return {