@scaleflex/ui-tw 0.0.27 → 0.0.28

package/button/button.component.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { type ButtonProps } from './button.types';
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "outline" | "link-primary" | "link-secondary" | "link-basic-primary" | "link-basic-secondary" | "link-error" | "link-warning" | "error-primary" | "warning-primary" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    variant?: "primary" | "secondary" | "outline" | "ghost-primary" | "ghost-secondary" | "error-primary" | "warning-primary" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare function Button({ className, children, size, startIcon, endIcon, variant, loading, asChild, disabled, ...rest }: ButtonProps): React.JSX.Element;
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

package/button/button.component.js

@@ -3,11 +3,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "children", "size", "startIcon", "endIcon", "variant", "loading", "asChild", "disabled"];
 import { Slot } from '@radix-ui/react-slot';
 import SpinnerIcon from '@scaleflex/icons-tw/spinner';
+import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
-import React, { useRef } from 'react';
+import React, { useImperativeHandle, useRef } from 'react';
 import { ButtonSize, ButtonVariant, buttonSizeOptions, buttonVariantOptions } from './button.constants';
-import { createRipple, getIconSizeInRem } from './button.utils';
+import { createRipple, isIconSize } from './button.utils';
 import { EndIcon } from './components/end-icon';
 import { StartIcon, startIconVariants } from './components/start-icon';
 var buttonVariants = cva('', {
@@ -20,7 +21,7 @@ var buttonVariants = cva('', {
     size: ButtonSize.Md
   }
 });
-function Button(_ref) {
+var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   var className = _ref.className,
     children = _ref.children,
     _ref$size = _ref.size,
@@ -36,17 +37,21 @@ function Button(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var buttonRef = useRef(null);
+  var localRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return localRef.current;
+  }, [localRef.current]);
   var Comp = asChild ? Slot : 'button';
+  var isIcon = isIconSize(size);
   var handleClick = function handleClick(e) {
-    if (buttonRef.current) {
-      createRipple(e, buttonRef.current);
+    if (localRef.current) {
+      createRipple(e, localRef.current);
     }
   };
   return /*#__PURE__*/React.createElement(Comp, _extends({
-    ref: buttonRef,
+    ref: localRef,
     "data-slot": "button",
-    className: cn('group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md font-medium whitespace-nowrap transition-all outline-none', 'ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", buttonVariants({
+    className: cn('group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md font-medium whitespace-nowrap transition-all outline-none', 'disabled:pointer-events-none disabled:opacity-40', '[&_svg]:pointer-events-none [&_svg]:shrink-0', focusRingClassNames, buttonVariants({
       variant: variant,
       size: size,
       className: className
@@ -61,16 +66,15 @@ function Button(_ref) {
     loading: loading,
     icon: startIcon
   }), loading && !startIcon && /*#__PURE__*/React.createElement("span", {
-    className: startIconVariants({
+    className: cn(startIconVariants({
       size: size
-    })
+    }), isIcon && 'mr-0')
   }, /*#__PURE__*/React.createElement(SpinnerIcon, {
-    size: getIconSizeInRem(size),
     className: "animate-spin"
-  })), children, endIcon && /*#__PURE__*/React.createElement(EndIcon, {
+  })), !(loading && isIcon) ? children : undefined, endIcon && /*#__PURE__*/React.createElement(EndIcon, {
     variant: variant,
     size: size,
     icon: endIcon
   })) : children);
-}
+});
 export { Button, buttonVariants };

package/button/button.constants.d.ts

@@ -3,35 +3,47 @@ export declare const ButtonSize: {
     readonly Sm: "sm";
     readonly Md: "md";
     readonly Lg: "lg";
+    readonly IconXs: "icon-xs";
+    readonly IconSm: "icon-sm";
+    readonly IconMd: "icon-md";
+    readonly IconLg: "icon-lg";
 };
 export declare const buttonSizeOptions: {
     readonly xs: "h-6 px-2.5 py-1.5 text-xs";
     readonly sm: "h-8 px-3 py-2 text-sm";
     readonly md: "h-10 px-4 py-2.5 text-base";
     readonly lg: "h-12 px-6 py-3.5 text-lg";
+    readonly "icon-xs": "size-6 p-1.5 [&_svg:not([class*='size-'])]:size-3";
+    readonly "icon-sm": "size-8 p-2 [&_svg:not([class*='size-'])]:size-3.5";
+    readonly "icon-md": "size-10 p-2.5 [&_svg:not([class*='size-'])]:size-4";
+    readonly "icon-lg": "size-12 p-3.5 [&_svg:not([class*='size-'])]:size-4.5";
 };
 export declare const buttonEndIconSizes: {
-    readonly xs: "ml-1.5";
-    readonly sm: "ml-1.5";
-    readonly md: "ml-2";
-    readonly lg: "ml-2";
+    readonly xs: "ml-1.5 size-3";
+    readonly sm: "ml-1.5 size-3.5";
+    readonly md: "ml-2 size-4";
+    readonly lg: "ml-2 size-4.5";
+    readonly "icon-xs": "ml-1.5 size-3";
+    readonly "icon-sm": "ml-1.5 size-3.5";
+    readonly "icon-md": "ml-2 size-4";
+    readonly "icon-lg": "ml-2 size-4.5";
 };
 export declare const buttonStartIconSizes: {
-    readonly xs: "mr-1.5";
-    readonly sm: "mr-1.5";
-    readonly md: "mr-2";
-    readonly lg: "mr-2";
+    readonly xs: "mr-1.5 size-3";
+    readonly sm: "mr-1.5 size-3.5";
+    readonly md: "mr-2 size-4";
+    readonly lg: "mr-2 size-4.5";
+    readonly "icon-xs": "mr-1.5 size-3";
+    readonly "icon-sm": "mr-1.5 size-3.5";
+    readonly "icon-md": "mr-2 size-4";
+    readonly "icon-lg": "mr-2 size-4.5";
 };
 export declare const ButtonVariant: {
     readonly Primary: "primary";
     readonly Secondary: "secondary";
     readonly Outline: "outline";
-    readonly LinkPrimary: "link-primary";
-    readonly LinkSecondary: "link-secondary";
-    readonly LinkBasicPrimary: "link-basic-primary";
-    readonly LinkBasicSecondary: "link-basic-secondary";
-    readonly LinkError: "link-error";
-    readonly LinkWarning: "link-warning";
+    readonly GhostPrimary: "ghost-primary";
+    readonly GhostSecondary: "ghost-secondary";
     readonly Error: "error-primary";
     readonly Warning: "warning-primary";
 };
@@ -39,12 +51,8 @@ export declare const iconVariantOptions: {
     readonly primary: "";
     readonly secondary: "";
     readonly outline: "text-muted-foreground group-hover/button:text-muted-foreground/80";
-    readonly "link-primary": "";
-    readonly "link-secondary": "text-muted-foreground group-hover/button:text-muted-foreground/80";
-    readonly "link-basic-primary": "";
-    readonly "link-basic-secondary": "text-muted-foreground group-hover/button:text-muted-foreground/80";
-    readonly "link-error": "";
-    readonly "link-warning": "";
+    readonly "ghost-primary": "";
+    readonly "ghost-secondary": "text-muted-foreground group-hover/button:text-muted-foreground/80";
     readonly "error-primary": "";
     readonly "warning-primary": "";
 };
@@ -52,12 +60,10 @@ export declare const buttonVariantOptions: {
     readonly primary: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/80";
     readonly secondary: "border bg-background shadow-xs text-primary border-primary hover:bg-accent hover:border-primary/80";
     readonly outline: "border bg-background text-secondary-foreground shadow-xs border-input hover:bg-secondary hover:border-input/80";
-    readonly "link-primary": "text-primary hover:text-primary/80";
-    readonly "link-secondary": "text-secondary-foreground hover:text-secondary-foreground/80";
-    readonly "link-basic-primary": "text-primary font-normal hover:text-primary/80";
-    readonly "link-basic-secondary": "text-secondary-foreground font-normal hover:text-secondary-foreground/80";
-    readonly "link-error": "text-destructive hover:text-destructive/80";
-    readonly "link-warning": "text-warning hover:text-warning/80";
+    readonly "ghost-primary": "text-primary hover:bg-accent";
+    readonly "ghost-secondary": "text-secondary-foreground hover:bg-secondary";
     readonly "error-primary": "bg-destructive text-primary-foreground shadow-xs hover:bg-destructive/80";
     readonly "warning-primary": "bg-warning text-primary-foreground shadow-xs hover:bg-warning/80";
 };
+export declare const iconSizes: readonly ["icon-xs", "icon-sm", "icon-md", "icon-lg"];
+export type IconSize = (typeof iconSizes)[number];

package/button/button.constants.js

@@ -1,26 +1,26 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _iconVariantOptions, _buttonVariantOptions;
 export var ButtonSize = {
   Xs: 'xs',
   Sm: 'sm',
   Md: 'md',
-  Lg: 'lg'
+  Lg: 'lg',
+  IconXs: 'icon-xs',
+  IconSm: 'icon-sm',
+  IconMd: 'icon-md',
+  IconLg: 'icon-lg'
 };
-export var buttonSizeOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'h-6 px-2.5 py-1.5 text-xs'), ButtonSize.Sm, 'h-8 px-3 py-2 text-sm'), ButtonSize.Md, 'h-10 px-4 py-2.5 text-base'), ButtonSize.Lg, 'h-12 px-6 py-3.5 text-lg');
-export var buttonEndIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'ml-1.5'), ButtonSize.Sm, 'ml-1.5'), ButtonSize.Md, 'ml-2'), ButtonSize.Lg, 'ml-2');
-export var buttonStartIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'mr-1.5'), ButtonSize.Sm, 'mr-1.5'), ButtonSize.Md, 'mr-2'), ButtonSize.Lg, 'mr-2');
+export var buttonSizeOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'h-6 px-2.5 py-1.5 text-xs'), ButtonSize.Sm, 'h-8 px-3 py-2 text-sm'), ButtonSize.Md, 'h-10 px-4 py-2.5 text-base'), ButtonSize.Lg, 'h-12 px-6 py-3.5 text-lg'), ButtonSize.IconXs, "size-6 p-1.5 [&_svg:not([class*='size-'])]:size-3"), ButtonSize.IconSm, "size-8 p-2 [&_svg:not([class*='size-'])]:size-3.5"), ButtonSize.IconMd, "size-10 p-2.5 [&_svg:not([class*='size-'])]:size-4"), ButtonSize.IconLg, "size-12 p-3.5 [&_svg:not([class*='size-'])]:size-4.5");
+export var buttonEndIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'ml-1.5 size-3'), ButtonSize.Sm, 'ml-1.5 size-3.5'), ButtonSize.Md, 'ml-2 size-4'), ButtonSize.Lg, 'ml-2 size-4.5'), ButtonSize.IconXs, 'ml-1.5 size-3'), ButtonSize.IconSm, 'ml-1.5 size-3.5'), ButtonSize.IconMd, 'ml-2 size-4'), ButtonSize.IconLg, 'ml-2 size-4.5');
+export var buttonStartIconSizes = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, 'mr-1.5 size-3'), ButtonSize.Sm, 'mr-1.5 size-3.5'), ButtonSize.Md, 'mr-2 size-4'), ButtonSize.Lg, 'mr-2 size-4.5'), ButtonSize.IconXs, 'mr-1.5 size-3'), ButtonSize.IconSm, 'mr-1.5 size-3.5'), ButtonSize.IconMd, 'mr-2 size-4'), ButtonSize.IconLg, 'mr-2 size-4.5');
 export var ButtonVariant = {
   Primary: 'primary',
   Secondary: 'secondary',
   Outline: 'outline',
-  LinkPrimary: 'link-primary',
-  LinkSecondary: 'link-secondary',
-  LinkBasicPrimary: 'link-basic-primary',
-  LinkBasicSecondary: 'link-basic-secondary',
-  LinkError: 'link-error',
-  LinkWarning: 'link-warning',
+  GhostPrimary: 'ghost-primary',
+  GhostSecondary: 'ghost-secondary',
   Error: 'error-primary',
   Warning: 'warning-primary'
 };
-export var iconVariantOptions = (_iconVariantOptions = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_iconVariantOptions, ButtonVariant.Primary, ''), ButtonVariant.Secondary, ''), ButtonVariant.Outline, 'text-muted-foreground group-hover/button:text-muted-foreground/80'), ButtonVariant.LinkPrimary, ''), ButtonVariant.LinkSecondary, 'text-muted-foreground group-hover/button:text-muted-foreground/80'), ButtonVariant.LinkBasicPrimary, ''), ButtonVariant.LinkBasicSecondary, 'text-muted-foreground group-hover/button:text-muted-foreground/80'), ButtonVariant.LinkError, ''), ButtonVariant.LinkWarning, ''), ButtonVariant.Error, ''), _defineProperty(_iconVariantOptions, ButtonVariant.Warning, ''));
-export var buttonVariantOptions = (_buttonVariantOptions = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_buttonVariantOptions, ButtonVariant.Primary, 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/80'), ButtonVariant.Secondary, 'border bg-background shadow-xs text-primary border-primary hover:bg-accent hover:border-primary/80'), ButtonVariant.Outline, 'border bg-background text-secondary-foreground shadow-xs border-input hover:bg-secondary hover:border-input/80'), ButtonVariant.LinkPrimary, 'text-primary hover:text-primary/80'), ButtonVariant.LinkSecondary, 'text-secondary-foreground hover:text-secondary-foreground/80'), ButtonVariant.LinkBasicPrimary, 'text-primary font-normal hover:text-primary/80'), ButtonVariant.LinkBasicSecondary, 'text-secondary-foreground font-normal hover:text-secondary-foreground/80'), ButtonVariant.LinkError, 'text-destructive hover:text-destructive/80'), ButtonVariant.LinkWarning, 'text-warning hover:text-warning/80'), ButtonVariant.Error, 'bg-destructive text-primary-foreground shadow-xs hover:bg-destructive/80'), _defineProperty(_buttonVariantOptions, ButtonVariant.Warning, 'bg-warning text-primary-foreground shadow-xs hover:bg-warning/80'));
+export var iconVariantOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonVariant.Primary, ''), ButtonVariant.Secondary, ''), ButtonVariant.Outline, 'text-muted-foreground group-hover/button:text-muted-foreground/80'), ButtonVariant.GhostPrimary, ''), ButtonVariant.GhostSecondary, 'text-muted-foreground group-hover/button:text-muted-foreground/80'), ButtonVariant.Error, ''), ButtonVariant.Warning, '');
+export var buttonVariantOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonVariant.Primary, 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/80'), ButtonVariant.Secondary, 'border bg-background shadow-xs text-primary border-primary hover:bg-accent hover:border-primary/80'), ButtonVariant.Outline, 'border bg-background text-secondary-foreground shadow-xs border-input hover:bg-secondary hover:border-input/80'), ButtonVariant.GhostPrimary, 'text-primary hover:bg-accent'), ButtonVariant.GhostSecondary, 'text-secondary-foreground hover:bg-secondary'), ButtonVariant.Error, 'bg-destructive text-primary-foreground shadow-xs hover:bg-destructive/80'), ButtonVariant.Warning, 'bg-warning text-primary-foreground shadow-xs hover:bg-warning/80');
+export var iconSizes = [ButtonSize.IconXs, ButtonSize.IconSm, ButtonSize.IconMd, ButtonSize.IconLg];

package/button/button.utils.d.ts

@@ -1,4 +1,6 @@
+import { IconSize } from '@scaleflex/ui-tw/button/button.constants';
 import { ButtonSizeType } from '@scaleflex/ui-tw/button/button.types';
 import type { MouseEvent } from 'react';
 export declare const getIconSizeInRem: (sizeName?: ButtonSizeType | null) => string;
 export declare const createRipple: (event: MouseEvent, container: HTMLElement) => void;
+export declare const isIconSize: (size: unknown) => size is IconSize;

package/button/button.utils.js

@@ -1,4 +1,5 @@
-import { ButtonSize } from '@scaleflex/ui-tw/button/button.constants';
+import { ButtonSize, iconSizes } from '@scaleflex/ui-tw/button/button.constants';
+// TODO: remove this function completely and start using size-x classes (check start/end icons in button)
 export var getIconSizeInRem = function getIconSizeInRem(sizeName) {
   switch (sizeName) {
     case ButtonSize.Lg:
@@ -31,4 +32,7 @@ export var createRipple = function createRipple(event, container) {
   setTimeout(function () {
     return ripple.remove();
   }, 500);
+};
+export var isIconSize = function isIconSize(size) {
+  return typeof size === 'string' && iconSizes.includes(size);
 };

package/button/components/copy-to-clipboard-button.d.ts

@@ -0,0 +1,10 @@
+import { ButtonSizeType } from '@scaleflex/ui-tw/button/button.types';
+import React from 'react';
+export interface CopyToClipboardButtonProps {
+    text: string;
+    disabled?: boolean;
+    size?: ButtonSizeType;
+    initialTooltip?: string;
+    copiedTooltip?: string;
+}
+export declare const CopyToClipboardButton: (props: CopyToClipboardButtonProps) => React.JSX.Element;

package/button/components/copy-to-clipboard-button.js

@@ -0,0 +1,76 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { Button, ButtonSize } from '@scaleflex/ui-tw/button';
+import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
+import { Copy } from 'lucide-react';
+import { useState } from 'react';
+import React from 'react';
+export var CopyToClipboardButton = function CopyToClipboardButton(props) {
+  var text = props.text,
+    _props$size = props.size,
+    size = _props$size === void 0 ? ButtonSize.IconMd : _props$size,
+    _props$initialTooltip = props.initialTooltip,
+    initialTooltip = _props$initialTooltip === void 0 ? 'Copy to clipboard' : _props$initialTooltip,
+    _props$copiedTooltip = props.copiedTooltip,
+    copiedTooltip = _props$copiedTooltip === void 0 ? 'Copied!' : _props$copiedTooltip,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
+  var _useState = useState(initialTooltip),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipText = _useState2[0],
+    setTooltipText = _useState2[1];
+  var _useState3 = useState('default'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tooltipVariant = _useState4[0],
+    setTooltipVariant = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var handleCopy = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return navigator.clipboard.writeText(text);
+          case 3:
+            setTooltipText(copiedTooltip);
+            setTooltipVariant('success');
+            setOpen(true);
+            setTimeout(function () {
+              setOpen(false);
+            }, 1500);
+            setTimeout(function () {
+              setTooltipText(initialTooltip);
+              setTooltipVariant('default');
+            }, 2000);
+            _context.next = 13;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](0);
+            console.error('Failed to copy', _context.t0);
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 10]]);
+    }));
+    return function handleCopy() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement(WithTooltip, {
+    content: tooltipText,
+    variant: tooltipVariant,
+    open: open ? true : undefined
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost-secondary",
+    size: size,
+    onClick: handleCopy,
+    disabled: disabled || !text
+  }, /*#__PURE__*/React.createElement(Copy, null)));
+};

package/button/components/end-icon.d.ts

@@ -1,4 +1,3 @@
 import { EndIconProps } from '@scaleflex/ui-tw/button/button.types';
-import React from 'react';
-declare const EndIcon: (props: EndIconProps) => React.JSX.Element | null;
+declare const EndIcon: (props: EndIconProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export { EndIcon };

package/button/components/end-icon.js

@@ -1,10 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "icon", "variant"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { buttonEndIconSizes, iconVariantOptions } from '@scaleflex/ui-tw/button/button.constants';
-import { getIconSizeInRem } from '@scaleflex/ui-tw/button/button.utils';
 import { cva } from 'class-variance-authority';
-import React, { cloneElement, useMemo } from 'react';
+import { cloneElement } from 'react';
 var endIconVariants = cva('', {
   variants: {
     variant: iconVariantOptions,
@@ -16,21 +17,12 @@ var EndIcon = function EndIcon(props) {
     icon = props.icon,
     variant = props.variant,
     rest = _objectWithoutProperties(props, _excluded);
-  var sizeInRem = useMemo(function () {
-    return getIconSizeInRem(size);
-  }, [size]);
   if (!icon) return null;
-  return /*#__PURE__*/React.createElement("span", _extends({
+  return /*#__PURE__*/cloneElement(icon, _objectSpread({
     className: endIconVariants({
       size: size,
       variant: variant
     })
-  }, rest), /*#__PURE__*/cloneElement(icon, {
-    size: sizeInRem,
-    style: {
-      width: sizeInRem,
-      height: sizeInRem
-    }
-  }));
+  }, rest));
 };
 export { EndIcon };

package/button/components/start-icon.d.ts

@@ -1,8 +1,8 @@
 import { StartIconProps } from '@scaleflex/ui-tw/button/button.types';
 import React from 'react';
 declare const startIconVariants: (props?: ({
-    variant?: "primary" | "secondary" | "outline" | "link-primary" | "link-secondary" | "link-basic-primary" | "link-basic-secondary" | "link-error" | "link-warning" | "error-primary" | "warning-primary" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    variant?: "primary" | "secondary" | "outline" | "ghost-primary" | "ghost-secondary" | "error-primary" | "warning-primary" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const StartIcon: (props: StartIconProps) => React.JSX.Element | null;
 export { StartIcon, startIconVariants };

package/button/components/start-icon.js

@@ -1,11 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "variant", "icon", "loading"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import SpinnerIcon from '@scaleflex/icons-tw/spinner';
 import { buttonStartIconSizes, iconVariantOptions } from '@scaleflex/ui-tw/button/button.constants';
-import { getIconSizeInRem } from '@scaleflex/ui-tw/button/button.utils';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
-import React, { cloneElement, useMemo } from 'react';
+import React, { cloneElement } from 'react';
 var startIconVariants = cva('', {
   variants: {
     variant: iconVariantOptions,
@@ -19,31 +21,16 @@ var StartIcon = function StartIcon(props) {
     _props$loading = props.loading,
     loading = _props$loading === void 0 ? false : _props$loading,
     rest = _objectWithoutProperties(props, _excluded);
-  var sizeInRem = useMemo(function () {
-    return getIconSizeInRem(size);
-  }, [size]);
   if (!icon) return null;
-  return /*#__PURE__*/React.createElement("span", _extends({
+  return loading ? /*#__PURE__*/React.createElement(SpinnerIcon, {
+    className: cn(startIconVariants({
+      size: size
+    }), 'animate-spin')
+  }) : (/*#__PURE__*/cloneElement(icon, _objectSpread({
     className: startIconVariants({
-      size: size,
-      className: 'flex'
+      variant: variant,
+      size: size
     })
-  }, rest), loading ? /*#__PURE__*/React.createElement(SpinnerIcon, {
-    size: sizeInRem,
-    className: "animate-spin",
-    style: {
-      width: sizeInRem,
-      height: sizeInRem
-    }
-  }) : (/*#__PURE__*/cloneElement(icon, {
-    size: sizeInRem,
-    style: {
-      width: sizeInRem,
-      height: sizeInRem
-    },
-    className: startIconVariants({
-      variant: variant
-    })
-  })));
+  }, rest)));
 };
 export { StartIcon, startIconVariants };

package/button/index.d.ts

@@ -1,3 +1,4 @@
 export { Button, buttonVariants } from './button.component';
 export type { ButtonProps } from './button.types';
 export { ButtonVariant, ButtonSize } from './button.constants';
+export { CopyToClipboardButton } from './components/copy-to-clipboard-button';

package/button/index.js

@@ -1,2 +1,3 @@
 export { Button, buttonVariants } from './button.component';
-export { ButtonVariant, ButtonSize } from './button.constants';
+export { ButtonVariant, ButtonSize } from './button.constants';
+export { CopyToClipboardButton } from './components/copy-to-clipboard-button';

package/input/input.component.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "type", "size", "disabled", "readOnly"];
-import { getBaseInputClasses } from '@scaleflex/ui-tw/input/input.utils';
+import { getBaseInputClasses, readOnlyClassNames, selectionHighlightClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
@@ -32,7 +32,7 @@ function Input(_ref) {
     "data-slot": "input",
     disabled: disabled,
     readOnly: readOnly,
-    className: cn.apply(void 0, ['flex w-full min-w-0'].concat(_toConsumableArray(getBaseInputClasses()), ['read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'selection:bg-primary selection:text-primary-foreground', inputVariants({
+    className: cn.apply(void 0, ['flex w-full min-w-0'].concat(_toConsumableArray(getBaseInputClasses()), [readOnlyClassNames, selectionHighlightClassNames, inputVariants({
       size: size,
       className: className
     })]))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -19,7 +19,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.27",
+    "@scaleflex/icons-tw": "^0.0.28",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
     "lodash.merge": "^4.6.2",

package/pill/index.d.ts

@@ -0,0 +1,3 @@
+export { Pill, pillVariants } from './pill.component';
+export type { PillProps } from './pill.types';
+export { pillSizeOptions, pillVariantOptions } from './pill.constants';

package/pill/index.js

@@ -0,0 +1,2 @@
+export { Pill, pillVariants } from './pill.component';
+export { pillSizeOptions, pillVariantOptions } from './pill.constants';

package/pill/pill.component.d.ts

@@ -0,0 +1,8 @@
+import { PillProps } from '@scaleflex/ui-tw/pill/pill.types';
+import React from 'react';
+declare const pillVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "outline" | "default" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function Pill({ className, size, variant, removable, onRemove, ...props }: PillProps): React.JSX.Element;
+export { Pill, pillVariants };

package/pill/pill.component.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "size", "variant", "removable", "onRemove"];
+import { PillVariant, pillSizeOptions, pillVariantOptions, removePillSizeOptions, removePillVariantOptions } from '@scaleflex/ui-tw/pill/pill.constants';
+import { getPillCrossIconClassName } from '@scaleflex/ui-tw/pill/pill.utils';
+import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import React from 'react';
+var pillVariants = cva('', {
+  variants: {
+    size: pillSizeOptions,
+    variant: pillVariantOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md,
+    variant: PillVariant.Default
+  }
+});
+var removePillVariants = cva('', {
+  variants: {
+    size: removePillSizeOptions,
+    variant: removePillVariantOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md,
+    variant: PillVariant.Default
+  }
+});
+function Pill(_ref) {
+  var className = _ref.className,
+    size = _ref.size,
+    variant = _ref.variant,
+    removable = _ref.removable,
+    onRemove = _ref.onRemove,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('border-input text-foreground border', 'inline-flex items-center rounded-full text-sm font-medium whitespace-nowrap shadow-xs transition-colors', pillVariants({
+      size: size,
+      variant: variant
+    }), className)
+  }, props), /*#__PURE__*/React.createElement("span", {
+    className: "select-none"
+  }, props.children), removable && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onRemove,
+    className: cn('text-muted-foreground shrink-0 cursor-pointer transition-transform duration-150 ease-in-out active:scale-85', removePillVariants({
+      size: size,
+      variant: variant
+    }), focusRingClassNames),
+    "aria-label": "Remove"
+  }, /*#__PURE__*/React.createElement(X, {
+    className: getPillCrossIconClassName(size)
+  })));
+}
+export { Pill, pillVariants };

package/pill/pill.constants.d.ts

@@ -0,0 +1,22 @@
+export declare const PillVariant: {
+    readonly Default: "default";
+    readonly Outline: "outline";
+};
+export declare const pillSizeOptions: {
+    readonly sm: "h-6 px-2 text-xs gap-1";
+    readonly md: "h-8 px-2.5 text-sm gap-1";
+    readonly lg: "h-10 px-3 text-base gap-1";
+};
+export declare const pillVariantOptions: {
+    readonly default: "bg-secondary";
+    readonly outline: "";
+};
+export declare const removePillSizeOptions: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const removePillVariantOptions: {
+    default: string;
+    outline: string;
+};

package/pill/pill.constants.js

@@ -0,0 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var PillVariant = {
+  Default: 'default',
+  Outline: 'outline'
+};
+export var pillSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'h-6 px-2 text-xs gap-1'), FormSize.Md, 'h-8 px-2.5 text-sm gap-1'), FormSize.Lg, 'h-10 px-3 text-base gap-1');
+export var pillVariantOptions = _defineProperty(_defineProperty({}, PillVariant.Default, 'bg-secondary'), PillVariant.Outline, '');
+export var removePillSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'p-0.25 -mr-0.25 rounded-sm'), FormSize.Md, 'p-0.5 -mr-0.5 rounded-md'), FormSize.Lg, 'p-0.75 -mr-0.75 rounded-md');
+export var removePillVariantOptions = _defineProperty(_defineProperty({}, PillVariant.Default, 'hover:bg-muted-foreground/10'), PillVariant.Outline, 'hover:bg-muted/70');

package/pill/pill.types.d.ts

@@ -0,0 +1,7 @@
+import { pillVariants } from '@scaleflex/ui-tw/pill/pill.component';
+import type { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
+export interface PillProps extends ComponentProps<'div'>, VariantProps<typeof pillVariants> {
+    removable?: boolean;
+    onRemove?: () => void;
+}

package/pill/pill.types.js

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

package/pill/pill.utils.d.ts

@@ -0,0 +1,2 @@
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+export declare const getPillCrossIconClassName: (size?: FormSizeType | null) => "size-3" | "size-4" | "size-5";

package/pill/pill.utils.js

@@ -0,0 +1,16 @@
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var getPillCrossIconClassName = function getPillCrossIconClassName(size) {
+  if (!size) {
+    return 'size-4';
+  }
+  switch (size) {
+    case FormSize.Sm:
+      return 'size-3';
+    case FormSize.Md:
+      return 'size-4';
+    case FormSize.Lg:
+      return 'size-5';
+    default:
+      return 'size-4';
+  }
+};

package/select/select.component.js

@@ -11,11 +11,11 @@ var _excluded = ["className", "size", "children", "readOnly", "icon"],
   _excluded7 = ["className"];
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { inputSizeOptions } from '@scaleflex/ui-tw/input/input.constants';
-import { getBaseInputClasses } from '@scaleflex/ui-tw/input/input.utils';
 import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
 import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
 import { selectLabelSizeOptions } from '@scaleflex/ui-tw/select/select.constants';
 import { getOptionInGroupPaddingLeft } from '@scaleflex/ui-tw/select/select.utils';
+import { getBaseInputClasses } from '@scaleflex/ui-tw/styles/shared-classes';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
@@ -67,7 +67,7 @@ function SelectTrigger(_ref4) {
   return /*#__PURE__*/React.createElement(SelectPrimitive.Trigger, _extends({
     "data-slot": "select-trigger",
     "data-size": size,
-    className: cn.apply(void 0, ['flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm whitespace-nowrap'].concat(_toConsumableArray(getBaseInputClasses()), ['data-[placeholder]:text-muted-foreground/80 hover:border-secondary-foreground/50', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectTriggerVariants({
+    className: cn.apply(void 0, ['flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm whitespace-nowrap', 'data-[placeholder]:text-muted-foreground/80 hover:border-secondary-foreground/50', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"].concat(_toConsumableArray(getBaseInputClasses()), [selectTriggerVariants({
       size: size,
       className: className
     }), readOnly && 'bg-secondary text-foreground pointer-events-none cursor-default disabled:opacity-100', className]))

package/styles/shared-classes.d.ts

@@ -0,0 +1,4 @@
+export declare const focusRingClassNames = "focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none";
+export declare const selectionHighlightClassNames = "selection:bg-primary selection:text-primary-foreground";
+export declare const readOnlyClassNames = "read-only:bg-secondary read-only:text-foreground read-only:cursor-default";
+export declare const getBaseInputClasses: () => string[];

package/styles/shared-classes.js

@@ -0,0 +1,6 @@
+export var focusRingClassNames = 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none';
+export var selectionHighlightClassNames = 'selection:bg-primary selection:text-primary-foreground';
+export var readOnlyClassNames = 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default';
+export var getBaseInputClasses = function getBaseInputClasses() {
+  return ['rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'border-input text-foreground bg-background', 'placeholder:text-muted-foreground/80 hover:border-secondary-foreground/50', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:border-secondary-foreground/50', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive hover:aria-invalid:border-destructive/60 focus-visible:aria-invalid:border-destructive', 'focus-visible:group-data-[highlight=true]:border-warning group-data-[highlight=true]:border-warning hover:group-data-[highlight=true]:border-warning/60 group-data-[highlight=true]:focus-visible:ring-warning/20', focusRingClassNames];
+};

package/styles/theme-map.css

@@ -33,6 +33,7 @@
 
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
+  --color-success-10: var(--success-10);
   --color-info: var(--info);
   --color-info-foreground: var(--info-foreground);
   --color-warning: var(--warning);

package/styles/variables.css

@@ -16,6 +16,7 @@
 
   --success: oklch(0.637 0.17 151.295);
   --success-foreground: oklch(0.429 0.107 154.754);
+  --success-10: oklch(0.978 0.025 163.82);
   --destructive: oklch(0.577 0.215 27.325);
   --destructive-foreground: oklch(0.472 0.173 26.157);
   --destructive-10: oklch(0.967 0.016 17.438);
@@ -74,6 +75,7 @@
 
   --success: oklch(0.6 0.2 154.83);
   --success-foreground: oklch(0.2 0.1 165.45);
+  --success-10: oklch(0.2 0.01 163.82);
   --destructive: oklch(0.55 0.2 27.325);
   --destructive-foreground: oklch(0.704 0.183 22.984);
   --destructive-10: oklch(0.2 0.01 17.438);

package/switch/switch.component.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "size"];
 import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
@@ -30,7 +31,7 @@ function Switch(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(SwitchPrimitive.Root, _extends({
     "data-slot": "switch",
-    className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none', 'hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', 'ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', switchVariants({
+    className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none', 'hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', focusRingClassNames, switchVariants({
       size: size
     }), className)
   }, props), /*#__PURE__*/React.createElement(SwitchPrimitive.Thumb, {

package/textarea/components/left-toolbar-buttons.d.ts

@@ -0,0 +1,3 @@
+import { LeftToolbarButtonsProps } from '@scaleflex/ui-tw/textarea/textarea.types';
+import React from 'react';
+export declare const LeftToolbarButtons: (props: LeftToolbarButtonsProps) => React.JSX.Element;

package/textarea/components/left-toolbar-buttons.js

@@ -0,0 +1,23 @@
+import { SparkleIcon } from '@scaleflex/icons-tw/sparkle-icon';
+import { Button } from '@scaleflex/ui-tw/button';
+import React from 'react';
+import { getToolbarSizes } from '../textarea.utils';
+export var LeftToolbarButtons = function LeftToolbarButtons(props) {
+  var size = props.size,
+    onGenerate = props.onGenerate,
+    onClearAll = props.onClearAll;
+  var _getToolbarSizes = getToolbarSizes(size),
+    buttonSize = _getToolbarSizes.buttonSize;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, onGenerate && /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost-primary",
+    size: buttonSize,
+    startIcon: /*#__PURE__*/React.createElement(SparkleIcon, {
+      className: "size-3.5"
+    }),
+    onClick: onGenerate
+  }, "Generate"), onClearAll && /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost-secondary",
+    size: buttonSize,
+    onClick: onClearAll
+  }, "Clear all"));
+};

package/textarea/components/right-toolbar-buttons.d.ts

@@ -0,0 +1,3 @@
+import { RightToolbarButtonsProps } from '@scaleflex/ui-tw/textarea/textarea.types';
+import React from 'react';
+export declare const RightToolbarButtons: (props: RightToolbarButtonsProps) => React.JSX.Element;

package/textarea/components/right-toolbar-buttons.js

@@ -0,0 +1,28 @@
+import { Button } from '@scaleflex/ui-tw/button';
+import { CopyToClipboardButton } from '@scaleflex/ui-tw/button/components/copy-to-clipboard-button';
+import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
+import { Languages } from 'lucide-react';
+import React from 'react';
+import { getToolbarSizes } from '../textarea.utils';
+export var RightToolbarButtons = function RightToolbarButtons(props) {
+  var size = props.size,
+    textToCopy = props.textToCopy,
+    translateActionTooltip = props.translateActionTooltip,
+    initialCopyActionTooltip = props.initialCopyActionTooltip,
+    copiedActionTooltip = props.copiedActionTooltip,
+    onTranslate = props.onTranslate;
+  var _getToolbarSizes = getToolbarSizes(size),
+    iconSize = _getToolbarSizes.iconSize;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, onTranslate && /*#__PURE__*/React.createElement(WithTooltip, {
+    content: translateActionTooltip
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost-primary",
+    size: iconSize,
+    onClick: onTranslate
+  }, /*#__PURE__*/React.createElement(Languages, null))), textToCopy && /*#__PURE__*/React.createElement(CopyToClipboardButton, {
+    size: iconSize,
+    text: textToCopy,
+    initialTooltip: initialCopyActionTooltip,
+    copiedTooltip: copiedActionTooltip
+  }));
+};

package/textarea/components/textarea-with-actions.d.ts

@@ -0,0 +1,4 @@
+import { TextareaWithActionsProps } from '@scaleflex/ui-tw/textarea/textarea.types';
+import React from 'react';
+declare function TextareaWithActions({ leftToolbar, rightToolbar, className, ...textareaProps }: TextareaWithActionsProps): React.JSX.Element;
+export { TextareaWithActions };

package/textarea/components/textarea-with-actions.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["leftToolbar", "rightToolbar", "className"];
+import { textareaWithActionsSizeOptions } from '@scaleflex/ui-tw/textarea/textarea.constants';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { Textarea } from '../';
+var textareaWithActionsVariants = cva('', {
+  variants: {
+    size: textareaWithActionsSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function TextareaWithActions(_ref) {
+  var leftToolbar = _ref.leftToolbar,
+    rightToolbar = _ref.rightToolbar,
+    className = _ref.className,
+    textareaProps = _objectWithoutProperties(_ref, _excluded);
+  var _ref2 = textareaProps || {},
+    size = _ref2.size;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "relative"
+  }, /*#__PURE__*/React.createElement(Textarea, _extends({}, textareaProps, {
+    className: cn(className, textareaWithActionsVariants({
+      size: size
+    }))
+  })), leftToolbar && /*#__PURE__*/React.createElement("div", {
+    className: "absolute bottom-1.5 left-1.5 flex items-center gap-0.5"
+  }, leftToolbar), rightToolbar && /*#__PURE__*/React.createElement("div", {
+    className: "absolute right-1.5 bottom-1.5 flex items-center gap-0.5"
+  }, rightToolbar));
+}
+export { TextareaWithActions };

package/textarea/index.d.ts

@@ -1,2 +1,5 @@
 export { Textarea, textareaVariants } from './textarea.component';
+export { TextareaWithActions } from './components/textarea-with-actions';
+export { RightToolbarButtons } from './components/right-toolbar-buttons';
+export { LeftToolbarButtons } from './components/left-toolbar-buttons';
 export type { TextareaProps } from './textarea.types';

package/textarea/index.js

@@ -1 +1,4 @@
-export { Textarea, textareaVariants } from './textarea.component';
+export { Textarea, textareaVariants } from './textarea.component';
+export { TextareaWithActions } from './components/textarea-with-actions';
+export { RightToolbarButtons } from './components/right-toolbar-buttons';
+export { LeftToolbarButtons } from './components/left-toolbar-buttons';

package/textarea/textarea.component.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "size", "disabled", "readOnly"];
+import { focusRingClassNames, getBaseInputClasses, readOnlyClassNames, selectionHighlightClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
@@ -27,10 +28,9 @@ function Textarea(_ref) {
     "data-slot": "textarea",
     disabled: disabled,
     readOnly: readOnly,
-    className: cn('field-sizing-content resize-y', 'border-input text-foreground bg-background flex w-full rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'focus-visible:border-secondary-foreground/50 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground hover:border-secondary-foreground/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive hover:aria-invalid:border-destructive/60 focus-visible:aria-invalid:border-destructive', 'focus-visible:group-data-[highlight=true]:border-warning group-data-[highlight=true]:border-warning hover:group-data-[highlight=true]:border-warning/60 group-data-[highlight=true]:focus-visible:ring-warning/20', textareaVariants({
-      size: size,
-      className: className
-    }))
+    className: cn('flex field-sizing-content w-full resize-y', getBaseInputClasses(), readOnlyClassNames, selectionHighlightClassNames, focusRingClassNames, textareaVariants({
+      size: size
+    }), className)
   }, props));
 }
 export { Textarea, textareaVariants };

package/textarea/textarea.constants.d.ts

@@ -3,3 +3,8 @@ export declare const textareaSizeOptions: {
     readonly md: "py-3 px-4 text-base min-h-16 max-h-48";
     readonly lg: "py-3 px-4 text-lg min-h-20 max-h-60";
 };
+export declare const textareaWithActionsSizeOptions: {
+    readonly sm: "pb-10";
+    readonly md: "pb-12";
+    readonly lg: "pb-14";
+};

package/textarea/textarea.constants.js

@@ -1,3 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
-export var textareaSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 text-sm min-h-14 max-h-44'), FormSize.Md, 'py-3 px-4 text-base min-h-16 max-h-48'), FormSize.Lg, 'py-3 px-4 text-lg min-h-20 max-h-60');
+export var textareaSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 text-sm min-h-14 max-h-44'), FormSize.Md, 'py-3 px-4 text-base min-h-16 max-h-48'), FormSize.Lg, 'py-3 px-4 text-lg min-h-20 max-h-60');
+export var textareaWithActionsSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pb-10'), FormSize.Md, 'pb-12'), FormSize.Lg, 'pb-14');

package/textarea/textarea.types.d.ts

@@ -1,6 +1,23 @@
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactElement } from 'react';
 export interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'size'> {
     size?: FormSizeType;
     'aria-invalid'?: boolean;
 }
+export interface TextareaWithActionsProps extends TextareaProps {
+    leftToolbar?: ReactElement;
+    rightToolbar?: ReactElement;
+}
+export interface RightToolbarButtonsProps {
+    size?: FormSizeType;
+    textToCopy?: string;
+    initialCopyActionTooltip?: string;
+    copiedActionTooltip?: string;
+    translateActionTooltip?: string;
+    onTranslate?: () => void;
+}
+export interface LeftToolbarButtonsProps {
+    size?: FormSizeType;
+    onGenerate?: () => void;
+    onClearAll?: () => void;
+}

package/textarea/textarea.utils.d.ts

@@ -0,0 +1,8 @@
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+export declare const getToolbarSizes: (textareaSize?: FormSizeType) => {
+    buttonSize: "xs";
+    iconSize: "icon-xs";
+} | {
+    buttonSize: "sm";
+    iconSize: "icon-sm";
+};

package/textarea/textarea.utils.js

@@ -0,0 +1,18 @@
+import { ButtonSize } from '@scaleflex/ui-tw/button';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var getToolbarSizes = function getToolbarSizes(textareaSize) {
+  switch (textareaSize) {
+    case FormSize.Sm:
+      return {
+        buttonSize: ButtonSize.Xs,
+        iconSize: ButtonSize.IconXs
+      };
+    case FormSize.Md:
+    case FormSize.Lg:
+    default:
+      return {
+        buttonSize: ButtonSize.Sm,
+        iconSize: ButtonSize.IconSm
+      };
+  }
+};

package/tooltip/tooltip.component.d.ts

@@ -6,5 +6,5 @@ declare function TooltipProvider({ delayDuration, ...props }: ComponentProps<typ
 declare function Tooltip({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
 declare function TooltipTrigger({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
 declare function TooltipContent({ className, sideOffset, children, variant, ...props }: TooltipContentProps): React.JSX.Element;
-declare function WithTooltip({ variant, content, children, ...otherProps }: WithTooltipProps): React.JSX.Element;
+declare function WithTooltip({ variant, content, children, delayDuration, open, ...otherProps }: WithTooltipProps): React.JSX.Element;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, WithTooltip };

package/tooltip/tooltip.component.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["delayDuration"],
   _excluded2 = ["className", "sideOffset", "children", "variant"],
-  _excluded3 = ["variant", "content", "children"];
+  _excluded3 = ["variant", "content", "children", "delayDuration", "open"];
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
@@ -58,9 +58,14 @@ function WithTooltip(_ref5) {
   var variant = _ref5.variant,
     content = _ref5.content,
     children = _ref5.children,
+    delayDuration = _ref5.delayDuration,
+    open = _ref5.open,
     otherProps = _objectWithoutProperties(_ref5, _excluded3);
   if (!content) return children;
-  return /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    open: open,
+    delayDuration: delayDuration || 700
+  }, /*#__PURE__*/React.createElement(TooltipTrigger, {
     asChild: true
   }, children), /*#__PURE__*/React.createElement(TooltipContent, _extends({
     variant: variant

package/tooltip/tooltip.constants.d.ts

@@ -2,9 +2,11 @@ export declare const TooltipVariant: {
     readonly Default: "default";
     readonly Error: "error";
     readonly Warning: "warning";
+    readonly Success: "success";
 };
 export declare const tooltipVariantOptions: {
     readonly default: "bg-muted text-foreground";
     readonly warning: "bg-warning-10 text-warning-foreground";
     readonly error: "bg-destructive-10 text-destructive-foreground";
+    readonly success: "bg-success-10 text-success-foreground";
 };

package/tooltip/tooltip.constants.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 export var TooltipVariant = {
   Default: 'default',
   Error: 'error',
-  Warning: 'warning'
+  Warning: 'warning',
+  Success: 'success'
 };
-export var tooltipVariantOptions = _defineProperty(_defineProperty(_defineProperty({}, TooltipVariant.Default, 'bg-muted text-foreground'), TooltipVariant.Warning, 'bg-warning-10 text-warning-foreground'), TooltipVariant.Error, 'bg-destructive-10 text-destructive-foreground');
+export var tooltipVariantOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, TooltipVariant.Default, 'bg-muted text-foreground'), TooltipVariant.Warning, 'bg-warning-10 text-warning-foreground'), TooltipVariant.Error, 'bg-destructive-10 text-destructive-foreground'), TooltipVariant.Success, 'bg-success-10 text-success-foreground');

package/tooltip/tooltip.types.d.ts

@@ -3,9 +3,11 @@ import { ComponentProps, ReactElement } from 'react';
 import { TooltipVariant } from './tooltip.constants';
 export type TooltipVariantType = (typeof TooltipVariant)[keyof typeof TooltipVariant];
 export interface WithTooltipProps extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'content'> {
-    content?: ReactElement | undefined | string;
     children: ReactElement;
+    open?: boolean;
+    content?: ReactElement | undefined | string;
     variant?: TooltipVariantType;
+    delayDuration?: number;
 }
 export interface TooltipContentProps extends ComponentProps<typeof TooltipPrimitive.Content> {
     variant?: TooltipVariantType;

package/input/input.utils.d.ts

@@ -1 +0,0 @@
-export declare const getBaseInputClasses: () => string[];

package/input/input.utils.js

@@ -1,3 +0,0 @@
-export var getBaseInputClasses = function getBaseInputClasses() {
-  return ['rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'border-input text-foreground bg-background', 'placeholder:text-muted-foreground/80 hover:border-secondary-foreground/50', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:border-secondary-foreground/50 focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive hover:aria-invalid:border-destructive/60 focus-visible:aria-invalid:border-destructive', 'focus-visible:group-data-[highlight=true]:border-warning group-data-[highlight=true]:border-warning hover:group-data-[highlight=true]:border-warning/60 group-data-[highlight=true]:focus-visible:ring-warning/20'];
-};