@algolia/satellite 1.0.0-beta.156 → 1.0.0-beta.158

package/cjs/Avatars/UserAvatar.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import type { MinimalUser } from "./types";
-export declare type UserAvatarProps = {
+export declare type UserAvatarLocale = {
+    fallbackText?: string;
+};
+export interface UserAvatarProps {
     /** A minimal user object containing `name`, `email` and `avatar`. */
     user: MinimalUser;
     /**
@@ -10,7 +13,8 @@ export declare type UserAvatarProps = {
     size?: number;
     /** @ignore */
     className?: string;
-};
+    locale?: UserAvatarLocale;
+}
 /** The `UserAvatar` is used as a visual representation of a user. */
-export declare const UserAvatar: ({ className, user, size }: UserAvatarProps) => JSX.Element;
+export declare const UserAvatar: ({ className, user, size, locale: propsLocale }: UserAvatarProps) => JSX.Element;
 export default UserAvatar;

package/cjs/Avatars/UserAvatar.js

@@ -6,49 +6,49 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.UserAvatar = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _reactAvatar = require("@radix-ui/react-avatar");
 var _clsx = _interopRequireDefault(require("clsx"));
-var _react = require("react");
+var _Satellite = require("../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var DEFAULT_LOCALE = {
+  fallbackText: "User's avatar"
+};
 /** The `UserAvatar` is used as a visual representation of a user. */
 var UserAvatar = function UserAvatar(_ref) {
   var _user$email;
   var className = _ref.className,
     user = _ref.user,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 32 : _ref$size;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    imageLoaded = _useState2[0],
-    setImageLoaded = _useState2[1];
-  var initials = (0, _utils.getUserInitials)(user);
-  (0, _react.useEffect)(function () {
-    return setImageLoaded(false);
-  }, [user.avatar]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    role: "img",
-    "aria-label": imageLoaded ? (user === null || user === void 0 ? void 0 : user.name) || "User's avatar" : "User's avatar",
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["relative overflow-hidden flex justify-center items-center rounded-full uppercase transition-colors"]))), imageLoaded ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-white"]))) : (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
+    size = _ref$size === void 0 ? 32 : _ref$size,
+    propsLocale = _ref.locale;
+  var contextLocale = (0, _Satellite.useLocale)("userAvatar");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
+  var fallbackName = user.name || user.email || locale.fallbackText;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAvatar.Root, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden flex justify-center items-center rounded-full"]))), (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
     style: {
       width: size,
       height: size
     },
-    children: [!imageLoaded && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: initials
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n          w-full absolute top-0 left-0\n          transition-opacity ", "\n        "])), imageLoaded ? "opacity-100" : "opacity-0"),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAvatar.Image, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-full w-full object-cover"]))),
       src: user.avatar,
-      role: "presentation",
-      alt: "",
-      onLoad: function onLoad() {
-        return setImageLoaded(true);
-      },
-      onError: function onError() {
-        return setImageLoaded(false);
-      }
+      alt: fallbackName
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAvatar.AvatarFallback, {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex h-full w-full items-center justify-center uppercase"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        "aria-hidden": true,
+        children: (0, _utils.getUserInitials)(user)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["sr-only"]))),
+        children: fallbackName
+      })]
     })]
   });
 };

package/cjs/Badge/Badge.d.ts

@@ -1,6 +1,6 @@
 import type { FunctionComponent, HTMLAttributes, ReactNode } from "react";
 import type { AtLeastOne, ColorVariant, IconComponentType } from "../types";
-export declare type BadgeSizes = "default" | "small";
+export declare type BadgeSizes = "small" | "medium" | "large";
 export declare type BadgeVariants = ColorVariant | "pink";
 interface BaseBadgeProps extends HTMLAttributes<HTMLDivElement> {
     /** @default "grey" */
@@ -21,7 +21,7 @@ export declare type BadgeProps = BaseBadgeProps & AtLeastOne<BadgeContentProps>;
  *
  * - Stay consistent with badge content (text), don't vary your vocabulary
  * - Bages usually come after a textual information or explanation
- * - Don't use badges where traditional error messages  (such as form validation) can be used instead
+ * - Don't use badges where traditional error messages (such as form validation) can be used instead
  * - Don't use badges with combination of buttons
  * - Badges are not interactive
  *

package/cjs/Badge/Badge.js

@@ -13,7 +13,7 @@ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satel
 var _isRenderedChild = _interopRequireDefault(require("../utils/isRenderedChild"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "value", "icon", "variant", "size", "className"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  inline-flex items-center justify-center\n  rounded-full border\n  overflow-hidden\n"])));
@@ -27,8 +27,9 @@ var VARIANT_CLASSNAMES = {
   pink: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-100 border-pink-200 text-pink-700"])))
 };
 var SIZE_CLASSNAMES = {
-  "default": (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["h-6 display-body px-2 space-x-2"]))),
-  small: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["h-4 display-caption px-1 space-x-1"])))
+  small: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["h-4 display-caption px-1 space-x-1"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["h-5 display-body px-2 space-x-2"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["h-6 display-body px-2 space-x-2"])))
 };
 
 /**
@@ -36,7 +37,7 @@ var SIZE_CLASSNAMES = {
  *
  * - Stay consistent with badge content (text), don't vary your vocabulary
  * - Bages usually come after a textual information or explanation
- * - Don't use badges where traditional error messages  (such as form validation) can be used instead
+ * - Don't use badges where traditional error messages (such as form validation) can be used instead
  * - Don't use badges with combination of buttons
  * - Badges are not interactive
  *
@@ -53,7 +54,7 @@ var Badge = function Badge(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "grey" : _ref$variant,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "default" : _ref$size,
+    size = _ref$size === void 0 ? "large" : _ref$size,
     className = _ref.className,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var badgeClassName = (0, _clsx["default"])(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
@@ -64,7 +65,7 @@ var Badge = function Badge(_ref) {
         size: ".8em"
       })
     }), (0, _isRenderedChild["default"])(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
       children: children
     }), (0, _isRenderedChild["default"])(value) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: value

package/cjs/Banners/Alert/Alert.js

@@ -37,7 +37,7 @@ var ICON_VARIANTS = {
 var ICON_CLASSNAME_VARIANTS = {
   grey: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"]))),
   accent: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-accent-600"]))),
-  green: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["text-green-700"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["text-green-600"]))),
   orange: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["text-orange-600"]))),
   red: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["text-red-600"])))
 };

package/cjs/Button/Button.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
-import { AcceptableButtonType, ButtonBaseProps, ExtractProps } from "./types";
-export declare type ButtonProps<T extends AcceptableButtonType = "button"> = ButtonBaseProps & ExtractProps<T> & {
-    as?: T;
-};
+import { type PolymorphicButtonProps } from "./PolymorphicButton";
+export declare type ButtonProps = Omit<PolymorphicButtonProps<"button">, "as" | "ref">;
 /**
  * Buttons are used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. Buttons can contain a combination of a clear label and an icon while links are always text.
  *
@@ -17,5 +15,5 @@ export declare type ButtonProps<T extends AcceptableButtonType = "button"> = But
  * - Use icon-only button for an action that is less critical and doesn't have to drag too much of user attention
  * - Buttons can take the full width to fill the parent container
  */
-export declare const Button: <T extends AcceptableButtonType = "button">(props: ButtonProps<T>) => JSX.Element;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;

package/cjs/Button/Button.js

@@ -6,20 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Button = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-var _styles = require("./styles");
-var _types = require("./types");
+var _react = require("react");
+var _PolymorphicButton = require("./PolymorphicButton");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["as", "className", "variant", "size", "startIcon", "endIcon", "loading", "children"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn inline-flex justify-center items-center px-4 typo-display-body"])));
-
 /**
  * Buttons are used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. Buttons can contain a combination of a clear label and an icon while links are always text.
  *
@@ -34,47 +25,13 @@ var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_te
  * - Use icon-only button for an action that is less critical and doesn't have to drag too much of user attention
  * - Buttons can take the full width to fill the parent container
  */
-var Button = function Button(props) {
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? "button" : _props$as,
-    className = props.className,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? "neutral" : _props$variant,
-    _props$size = props.size,
-    size = _props$size === void 0 ? "medium" : _props$size,
-    StartIcon = props.startIcon,
-    EndIcon = props.endIcon,
-    _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading,
-    children = props.children,
-    cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  if (loading) {
-    cleanedProps.disabled = true;
-  }
-  var buttonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, _styles.BUTTON_SIZE_CLASSNAMES[size], _styles.BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
-  var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
-  var iconClassNames = (0, _clsx["default"])((0, _styles.getIconColorClassName)(props), loading && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
-  var textClassNames = (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
-  if ((0, _types.isButtonType)(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
-    // @ts-ignore
-    cleanedProps.type = "button";
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({}, cleanedProps), {}, {
-    className: buttonClassName,
-    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
-      className: loaderClassNames,
-      size: _styles.BUTTON_LOADER_ICON_SIZES[size],
-      thickness: 1
-    }), StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 pr-2"]))), iconClassNames)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["truncate text-center"]))), textClassNames),
-      children: children
-    }), EndIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndIcon, {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 pl-2"]))), iconClassNames)
-    })]
+var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolymorphicButton.PolymorphicButton, _objectSpread(_objectSpread({}, props), {}, {
+    as: "button",
+    ref: ref
   }));
-};
+});
 exports.Button = Button;
+Button.displayName = "Button";
 var _default = Button;
 exports["default"] = _default;

package/cjs/Button/Button.tailwind.js

@@ -59,7 +59,6 @@ var buttonPlugin = plugin(function (_ref) {
       },
       "&:active, &.btn-active": {
         borderColor: theme("colors.grey.200"),
-        backgroundImage: theme("color.grey.100"),
         boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.grey.500"), 0.4), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
       },
       "&:disabled, &.btn-disabled": {
@@ -114,7 +113,6 @@ var buttonPlugin = plugin(function (_ref) {
         boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 0 0 1px ").concat(theme("colors.red.800"), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n        ")
       },
       "&:active, &.btn-active": {
-        backgroundImage: theme("colors.red.700"),
         borderColor: theme("colors.red.800"),
         boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.red.900"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.red.900"), 0.6), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
       },

package/cjs/Button/IconButton.d.ts

@@ -1,17 +1,5 @@
 /// <reference types="react" />
-import type { IconComponentType } from "../types";
-import { AcceptableButtonType, ButtonSize, ButtonVariant, ExtractProps } from "./types";
-export interface IconButtonBaseProps {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    disabled?: boolean;
-    icon: IconComponentType;
-    title: string;
-    showTooltip?: boolean;
-    loading?: boolean;
-}
-export declare type IconButtonProps<T extends AcceptableButtonType> = IconButtonBaseProps & ExtractProps<T> & {
-    as?: T;
-};
-export declare const IconButton: <T extends AcceptableButtonType = "button">(props: IconButtonProps<T>) => JSX.Element;
+import { type PolymorphicIconButtonProps } from "./PolymorphicIconButton";
+export declare type IconButtonProps = Omit<PolymorphicIconButtonProps<"button">, "as" | "ref">;
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/cjs/Button/IconButton.js

@@ -5,73 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.IconButton = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-var _Tooltip = require("../Tooltip");
-var _styles = require("./styles");
-var _types = require("./types");
+var _react = require("react");
+var _PolymorphicIconButton = require("./PolymorphicIconButton");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "loading"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn inline-flex items-center justify-center"])));
-var SIZE_CLASSNAMES = {
-  small: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-6 w-6 text-mobile md:text-sm"]))),
-  medium: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["h-8 w-8 text-md"]))),
-  large: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["h-10 w-10 text-lg"])))
-};
-var VARIANT_CLASSNAMES = _objectSpread(_objectSpread({}, _styles.BUTTON_VARIANT_CLASSNAMES), {}, {
-  neutral: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["btn-neutral text-grey-600"])))
+var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolymorphicIconButton.PolymorphicIconButton, _objectSpread(_objectSpread({}, props), {}, {
+    as: "button",
+    ref: ref
+  }));
 });
-var IconButton = function IconButton(props) {
-  var _props$as = props.as,
-    Tag = _props$as === void 0 ? "button" : _props$as,
-    className = props.className,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? "neutral" : _props$variant,
-    _props$size = props.size,
-    size = _props$size === void 0 ? "medium" : _props$size,
-    Icon = props.icon,
-    title = props.title,
-    showTooltip = props.showTooltip,
-    _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading,
-    cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  if (loading) {
-    cleanedProps.disabled = true;
-  }
-  var iconButtonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
-  var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
-  if ((0, _types.isButtonType)(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
-    // @ts-ignore
-    cleanedProps.type = "button";
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
-    delay: 500,
-    show: showTooltip,
-    placement: "top",
-    content: title,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, _objectSpread(_objectSpread({}, cleanedProps), {}, {
-      className: iconButtonClassName,
-      "aria-label": title,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
-          className: loaderClassNames,
-          size: _styles.BUTTON_LOADER_ICON_SIZES[size],
-          thickness: 1
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          className: (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["invisible"])))),
-          size: "1em"
-        })]
-      })
-    }))
-  });
-};
 exports.IconButton = IconButton;
+IconButton.displayName = "IconButton";
 var _default = IconButton;
 exports["default"] = _default;

package/cjs/Button/PolymorphicButton.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ButtonBaseProps, PolymorphicComponentPropWithRef } from "./types";
+export declare type PolymorphicButtonProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, ButtonBaseProps>;
+declare type PolymorphicButtonComponent = (<C extends React.ElementType = "button">(props: PolymorphicButtonProps<C>) => React.ReactElement | null) & {
+    displayName?: string;
+};
+/**
+ * `PolymorphicButton` is intended for internal use
+ */
+export declare const PolymorphicButton: PolymorphicButtonComponent;
+export {};

package/cjs/Button/PolymorphicButton.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PolymorphicButton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _styles = require("./styles");
+var _types = require("./types");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "className", "variant", "size", "startIcon", "endIcon", "loading", "children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn inline-flex justify-center items-center px-3 typo-display-body"])));
+var ICON_SIZE = 16;
+/**
+ * `PolymorphicButton` is intended for internal use
+ */
+var PolymorphicButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? "button" : _props$as,
+    className = props.className,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? "neutral" : _props$variant,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "medium" : _props$size,
+    StartIcon = props.startIcon,
+    EndIcon = props.endIcon,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    children = props.children,
+    cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  if (loading) {
+    // @ts-expect-error
+    cleanedProps.disabled = true;
+  }
+  var buttonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, _styles.BUTTON_SIZE_CLASSNAMES[size], _styles.BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
+  var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
+  var iconClassNames = (0, _clsx["default"])((0, _styles.getIconColorClassName)(props), loading && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
+  var textClassNames = (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
+  if ((0, _types.isButtonType)(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
+    // @ts-expect-error
+    cleanedProps.type = "button";
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({}, cleanedProps), {}, {
+    className: buttonClassName,
+    ref: ref,
+    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
+      className: loaderClassNames,
+      size: _styles.BUTTON_LOADER_ICON_SIZES[size],
+      thickness: 1
+    }), StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
+      size: ICON_SIZE,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"]))), iconClassNames)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["truncate text-center px-1"]))), textClassNames),
+      children: children
+    }), EndIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndIcon, {
+      size: ICON_SIZE,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"]))), iconClassNames)
+    })]
+  }));
+});
+exports.PolymorphicButton = PolymorphicButton;
+PolymorphicButton.displayName = "PolymorphicButton";

package/cjs/Button/PolymorphicIconButton.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { TooltipWrapperBaseProps } from "../Tooltip/types";
+import type { IconComponentType } from "../types";
+import { ButtonSize, ButtonVariant, PolymorphicComponentPropWithRef } from "./types";
+export interface IconButtonBaseProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    icon: IconComponentType;
+    title: string;
+    showTooltip?: boolean;
+    /** @default "top" */
+    tooltipPlacement?: TooltipWrapperBaseProps["placement"];
+    loading?: boolean;
+}
+export declare type PolymorphicIconButtonProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, IconButtonBaseProps>;
+declare type PolymorphicIconButtonComponent = (<C extends React.ElementType = "button">(props: PolymorphicIconButtonProps<C>) => React.ReactElement | null) & {
+    displayName?: string;
+};
+/**
+ * `PolymorphicIconButton` is intended for internal use
+ */
+export declare const PolymorphicIconButton: PolymorphicIconButtonComponent;
+export {};

package/cjs/Button/PolymorphicIconButton.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PolymorphicIconButton = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _Tooltip = require("../Tooltip");
+var _styles = require("./styles");
+var _types = require("./types");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "tooltipPlacement", "loading"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn inline-flex items-center justify-center"])));
+var SIZE_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-6 w-6 text-mobile md:text-sm"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["h-8 w-8 text-md"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["h-10 w-10 text-lg"])))
+};
+var VARIANT_CLASSNAMES = _objectSpread(_objectSpread({}, _styles.BUTTON_VARIANT_CLASSNAMES), {}, {
+  neutral: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["btn-neutral text-grey-600"])))
+});
+/**
+ * `PolymorphicIconButton` is intended for internal use
+ */
+var PolymorphicIconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$as = props.as,
+    Tag = _props$as === void 0 ? "button" : _props$as,
+    className = props.className,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? "neutral" : _props$variant,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "medium" : _props$size,
+    Icon = props.icon,
+    title = props.title,
+    showTooltip = props.showTooltip,
+    _props$tooltipPlaceme = props.tooltipPlacement,
+    tooltipPlacement = _props$tooltipPlaceme === void 0 ? "top" : _props$tooltipPlaceme,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  if (loading) {
+    // @ts-expect-error
+    cleanedProps.disabled = true;
+  }
+  var iconButtonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
+  var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
+  if ((0, _types.isButtonType)(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
+    // @ts-ignore
+    cleanedProps.type = "button";
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
+    delay: 500,
+    show: showTooltip,
+    placement: tooltipPlacement,
+    content: title,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, _objectSpread(_objectSpread({}, cleanedProps), {}, {
+      className: iconButtonClassName,
+      "aria-label": title,
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
+          className: loaderClassNames,
+          size: _styles.BUTTON_LOADER_ICON_SIZES[size],
+          thickness: 1
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          className: (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["invisible"])))),
+          size: "1em"
+        })]
+      })
+    }))
+  });
+});
+exports.PolymorphicIconButton = PolymorphicIconButton;
+PolymorphicIconButton.displayName = "PolymorphicIconButton";

package/cjs/Button/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./Button";
 export * from "./IconButton";
 export * from "./ButtonGroup";
-export * from "./types";
+export { ButtonSize, ButtonVariant } from "./types";
 export { default } from "./Button";