@scaleflex/ui-tw 0.0.26 → 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/form/components/form-select-field.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+import { FormSelectFieldProps } from '../form.types';
+declare function FormSelectField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ selectProps, ...rest }: FormSelectFieldProps<TFieldValues, TName>): React.JSX.Element;
+export { FormSelectField };

package/form/components/form-select-field.component.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon", "placeholder", "options"],
+  _excluded2 = ["selectProps"];
+import { isOptionGroup, useFormField } from '@scaleflex/ui-tw/form';
+import { FormFieldGroup } from '@scaleflex/ui-tw/form';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@scaleflex/ui-tw/select';
+import React from 'react';
+function FormSelectInner(_ref) {
+  var field = _ref.field,
+    args = _ref.args,
+    selectProps = _ref.selectProps,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    className = _ref.className;
+  var _useFormField = useFormField(),
+    error = _useFormField.error,
+    formItemId = _useFormField.formItemId;
+  var _ref2 = selectProps || {},
+    icon = _ref2.icon,
+    placeholder = _ref2.placeholder,
+    options = _ref2.options,
+    restSelectProps = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    onValueChange: readOnly ? undefined : field.onChange,
+    defaultValue: field.value,
+    disabled: disabled || readOnly
+  }, restSelectProps), /*#__PURE__*/React.createElement(SelectTrigger, {
+    id: formItemId,
+    "aria-invalid": !!error,
+    size: args === null || args === void 0 ? void 0 : args.size,
+    readOnly: readOnly,
+    className: className,
+    icon: icon
+  }, /*#__PURE__*/React.createElement(SelectValue, {
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Select'
+  })), /*#__PURE__*/React.createElement(SelectContent, null, options === null || options === void 0 ? void 0 : options.map(function (option, groupIndex) {
+    if (isOptionGroup(option)) {
+      return /*#__PURE__*/React.createElement(SelectGroup, {
+        key: groupIndex
+      }, option.label && /*#__PURE__*/React.createElement(SelectLabel, {
+        size: args === null || args === void 0 ? void 0 : args.size
+      }, option.label), option.options.map(function (_ref3) {
+        var label = _ref3.label,
+          value = _ref3.value,
+          disabled = _ref3.disabled,
+          icon = _ref3.icon,
+          tooltip = _ref3.tooltip;
+        return /*#__PURE__*/React.createElement(SelectItem, {
+          key: value,
+          value: value,
+          disabled: disabled,
+          size: args === null || args === void 0 ? void 0 : args.size,
+          icon: icon,
+          tooltip: tooltip,
+          isGroup: !!option.label
+        }, label);
+      }), groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
+    }
+    return /*#__PURE__*/React.createElement(SelectGroup, {
+      key: "default"
+    }, /*#__PURE__*/React.createElement(SelectItem, {
+      value: option.value,
+      disabled: option.disabled,
+      size: args === null || args === void 0 ? void 0 : args.size,
+      icon: option.icon,
+      tooltip: option.tooltip
+    }, option.label));
+  })));
+}
+function FormSelectField(_ref4) {
+  var selectProps = _ref4.selectProps,
+    rest = _objectWithoutProperties(_ref4, _excluded2);
+  var readOnly = rest.readOnly,
+    disabled = rest.disabled;
+  return /*#__PURE__*/React.createElement(FormFieldGroup, rest, function (field, args) {
+    return /*#__PURE__*/React.createElement(FormSelectInner, {
+      field: field,
+      args: args,
+      selectProps: selectProps,
+      readOnly: readOnly,
+      disabled: disabled
+    });
+  });
+}
+export { FormSelectField };

package/form/form.types.d.ts

@@ -1,4 +1,5 @@
 import { InputProps } from '@scaleflex/ui-tw/input';
+import { SelectProps } from '@scaleflex/ui-tw/select/select.types';
 import { SwitchProps } from '@scaleflex/ui-tw/switch/switch.types';
 import { TextareaProps } from '@scaleflex/ui-tw/textarea';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
@@ -45,3 +46,32 @@ export type FormInputFieldProps<TFieldValues extends FieldValues, TName extends
 export type FormTextareaFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = Omit<FormFieldGroupProps<TFieldValues, TName>, 'children'> & {
     textareaProps?: TextareaProps;
 };
+export interface FlatOption {
+    label: ReactElement | string;
+    value: string;
+    disabled?: boolean;
+    icon?: ReactElement;
+    tooltip?: ReactElement | string;
+}
+export interface OptionGroup {
+    label?: ReactElement | string;
+    options: FlatOption[];
+}
+export type SelectOption = FlatOption | OptionGroup;
+export type FormSelectProps = SelectProps & {
+    options: SelectOption[];
+    placeholder?: string;
+    icon?: ReactElement;
+};
+export type FormSelectFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = Omit<FormFieldGroupProps<TFieldValues, TName>, 'children'> & {
+    icon?: ReactElement;
+    selectProps?: FormSelectProps;
+};
+export interface FormSelectInnerProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> {
+    field: ControllerRenderProps<TFieldValues, TName>;
+    args: FormFieldArgs | undefined;
+    selectProps?: FormSelectProps;
+    readOnly?: boolean;
+    disabled?: boolean;
+    className?: string;
+}

package/form/form.utils.d.ts

@@ -0,0 +1,2 @@
+import { FlatOption, OptionGroup } from '@scaleflex/ui-tw/form';
+export declare const isOptionGroup: (option: FlatOption | OptionGroup) => option is OptionGroup;

package/form/form.utils.js

@@ -0,0 +1,3 @@
+export var isOptionGroup = function isOptionGroup(option) {
+  return 'options' in option;
+};

package/form/index.d.ts

@@ -1,6 +1,9 @@
 export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, useFormField, } from './form.component';
+export { isOptionGroup } from './form.utils';
+export { SelectOption, FlatOption, OptionGroup } from './form.types';
 export { FormFieldGroup } from './components/form-field-group.component';
 export { FormInputField } from './components/form-input-field.component';
 export { FormPasswordField } from './components/form-password-field.component';
 export { FormTextareaField } from './components/form-textarea-field.component';
 export { FormSwitchField } from './components/form-switch-field.component';
+export { FormSelectField } from './components/form-select-field.component';

package/form/index.js

@@ -1,6 +1,9 @@
 export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, useFormField } from './form.component';
+export { isOptionGroup } from './form.utils';
+export { SelectOption, FlatOption, OptionGroup } from './form.types';
 export { FormFieldGroup } from './components/form-field-group.component';
 export { FormInputField } from './components/form-input-field.component';
 export { FormPasswordField } from './components/form-password-field.component';
 export { FormTextareaField } from './components/form-textarea-field.component';
-export { FormSwitchField } from './components/form-switch-field.component';
+export { FormSwitchField } from './components/form-switch-field.component';
+export { FormSelectField } from './components/form-select-field.component';