pentatrion-design 0.0.18 → 0.0.19

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.18",
+  "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 {