@scaleflex/ui-tw 0.0.26 → 0.0.28

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';
@@ -41,7 +41,7 @@ var tooltipVariants = cva('', {
 function TooltipContent(_ref4) {
   var className = _ref4.className,
     _ref4$sideOffset = _ref4.sideOffset,
-    sideOffset = _ref4$sideOffset === void 0 ? 0 : _ref4$sideOffset,
+    sideOffset = _ref4$sideOffset === void 0 ? 6 : _ref4$sideOffset,
     children = _ref4.children,
     _ref4$variant = _ref4.variant,
     variant = _ref4$variant === void 0 ? TooltipVariant.Default : _ref4$variant,
@@ -49,22 +49,23 @@ function TooltipContent(_ref4) {
   return /*#__PURE__*/React.createElement(TooltipPrimitive.Portal, null, /*#__PURE__*/React.createElement(TooltipPrimitive.Content, _extends({
     "data-slot": "tooltip-content",
     sideOffset: sideOffset,
-    className: cn('animate-in fade-in-0 zoom-in-95 text-md z-50 w-fit max-w-lg origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-2', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', tooltipVariants({
+    className: cn('animate-in fade-in-0 zoom-in-95 text-md shadow-shadow z-50 w-fit max-w-lg origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-2 shadow-sm', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', tooltipVariants({
       variant: variant
     }), className)
-  }, props), children, /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, {
-    className: cn('z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] fill-transparent', tooltipVariants({
-      variant: variant
-    }))
-  })));
+  }, props), children));
 }
 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;