@react-fabric/core 1.0.0-beta.0

package/dist/esm/components/avatar/Avatar.js

@@ -0,0 +1,144 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { isSvgPath } from '@react-fabric/utilities';
+import BoringAvatar from 'boring-avatars';
+import classNames from 'classnames';
+import { useState } from 'react';
+import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
+import classes from './Avatar.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "onClick"];
+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; }
+var SizeMap = {
+  xs: "0.875rem",
+  sm: "1.125rem",
+  md: "1.5rem",
+  lg: "2rem",
+  xl: "2.5rem"
+};
+
+/**
+ * An avatar is a graphical representation of a user's identity.
+ */
+var Avatar = function Avatar(_ref) {
+  var ref = _ref.ref,
+    name = _ref.name,
+    avatar = _ref.avatar,
+    fallbackIcon = _ref.fallbackIcon,
+    bg = _ref.bg,
+    color = _ref.color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "" : _ref$size,
+    rounded = _ref.rounded,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "beam" : _ref$variant,
+    className = _ref.className,
+    _ref$viewBox = _ref.viewBox,
+    viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
+    onClick = _ref.onClick,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    fallback = _useState2[0],
+    setFallback = _useState2[1];
+
+  /** ***************** style map *******************/
+  var styles = useMemoDebugger(function () {
+    var s = {};
+    if (bg) {
+      s.backgroundColor = getColor(bg);
+    }
+    if (color) {
+      s.color = getColor(color);
+    }
+    if (size && !(size in SizeMap)) {
+      s.fontSize = size;
+    }
+    if (size && size in SizeMap) {
+      s.fontSize = SizeMap[size];
+    }
+    return s;
+  }, [bg, color, size], "Avatar styles");
+
+  /** ***************** render icon *******************/
+  var avatarImage = useMemoDebugger(function () {
+    setFallback(!avatar);
+    return avatar && /*#__PURE__*/jsxs("div", {
+      className: "contents",
+      children: [/*#__PURE__*/jsx("div", {
+        className: classNames(classes.imgPlaceholder, "absolute inset-0 bg-gray animate-pulse")
+      }), /*#__PURE__*/jsx("img", {
+        src: avatar,
+        alt: avatar,
+        className: "align-baseline",
+        onError: function onError() {
+          return setFallback(true);
+        },
+        onLoad: function onLoad(e) {
+          var _e$currentTarget$prev;
+          return (_e$currentTarget$prev = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev === void 0 ? void 0 : _e$currentTarget$prev.remove();
+        }
+      })]
+    });
+  }, [avatar], "Avatar icon");
+  var fallbackAvatar = useMemoDebugger(function () {
+    if (fallbackIcon) {
+      return isSvgPath(fallbackIcon) ? /*#__PURE__*/jsx("svg", {
+        viewBox: viewBox,
+        children: /*#__PURE__*/jsx("path", {
+          fill: "currentColor",
+          d: fallbackIcon.toString()
+        })
+      }) : /*#__PURE__*/jsx("i", {
+        className: fallbackIcon
+      });
+    }
+    if (variant === "text") {
+      var _name$match;
+      var _ref2 = (_name$match = name.match(/(?=(\w).* (\w).*)|(?=(\w\w).*)/)) !== null && _name$match !== void 0 ? _name$match : [],
+        _ref3 = _slicedToArray(_ref2, 4),
+        first = _ref3[1],
+        second = _ref3[2],
+        group = _ref3[3];
+      return /*#__PURE__*/jsx("svg", {
+        role: "img",
+        children: /*#__PURE__*/jsx("text", {
+          x: "50%",
+          y: "50%",
+          dy: ".1em",
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          style: {
+            fontSize: ".5em",
+            fontWeight: 500
+          },
+          children: group !== null && group !== void 0 ? group : "".concat(first).concat(second)
+        })
+      });
+    }
+    return /*#__PURE__*/jsx(BoringAvatar, {
+      square: true,
+      size: 64,
+      variant: variant,
+      name: name
+    });
+  }, [name, variant, fallbackIcon], "Avatar fallback");
+  return /*#__PURE__*/jsxs("dfn", _objectSpread(_objectSpread({
+    role: "presentation",
+    className: classNames(classes.avatar, className, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getBgClass(bg), color && getColorClass(color), !rounded && "rounded", rounded && "rounded-full"),
+    onClick: onClick,
+    style: styles,
+    "data-clickable": !!onClick,
+    ref: ref
+  }, aria), {}, {
+    children: [!fallback && avatarImage, fallback && fallbackAvatar]
+  }));
+};
+
+export { Avatar };

package/dist/esm/components/avatar/Avatar.module.css

@@ -0,0 +1 @@
+@layer comp{.avatar{border-radius:var(--rounding);box-shadow:0 0 1px theme(borderColor.base);height:1em;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{background-color:theme(backgroundColor.dimmed);border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&>.imagePlaceholder{z-index:-1}}.avatarGroup{&>.avatar{box-shadow:0 0 0 1px theme(borderColor.muted),0 0 0 .125em var(--fabric-bg);&:not(:first-child){margin-inline-start:-.125em}}& .avatarGroup--extra{border-radius:inherit;font-size:inherit;height:1em;width:1em}}}@layer util{.avatarGroup{&>.avatar{border-radius:inherit;font-size:inherit}}}

package/dist/esm/components/avatar/AvatarGroup.js

@@ -0,0 +1,74 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { useMemo, Children } from 'react';
+import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import classes from './Avatar.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["ref", "children", "className", "totalCount", "rounded", "size"];
+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; }
+var SizeMap = {
+  xs: "0.875rem",
+  sm: "1.125rem",
+  md: "1.5rem",
+  lg: "2rem",
+  xl: "2.5rem"
+};
+
+/**
+ * Group multiple avatars together
+ */
+var AvatarGroup = function AvatarGroup(_ref) {
+  var ref = _ref.ref,
+    children = _ref.children,
+    className = _ref.className,
+    totalCount = _ref.totalCount,
+    rounded = _ref.rounded,
+    size = _ref.size,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  /** ***************** style map *******************/
+  var styles = useMemoDebugger(function () {
+    var s = {};
+    if (size && !(size in SizeMap)) {
+      s.fontSize = size;
+    }
+    if (size && size in SizeMap) {
+      s.fontSize = SizeMap[size];
+    }
+    return s;
+  }, [size], "Icon styles");
+  var avatars = useMemo(function () {
+    return Children.toArray(children).filter(Boolean);
+  }, [children]);
+  var diff = useMemo(function () {
+    return totalCount && totalCount > avatars.length && totalCount - avatars.length;
+  }, [avatars, totalCount]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, aria), {}, {
+    ref: ref,
+    className: classNames(classes.avatarGroup, className, "inline-flex flex-nowrap", !rounded && "rounded", rounded && "rounded-full"),
+    style: styles,
+    children: [avatars, !!diff && /*#__PURE__*/jsx("dfn", {
+      className: classNames(classes.avatar, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", classes.extra),
+      children: /*#__PURE__*/jsx("svg", {
+        children: /*#__PURE__*/jsx("text", {
+          x: "50%",
+          y: "50%",
+          dy: ".1em",
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          style: {
+            fontSize: ".375em",
+            fontWeight: 500
+          },
+          children: "+".concat(diff)
+        })
+      })
+    })]
+  }));
+};
+
+export { AvatarGroup };

package/dist/esm/components/badge/Badge.js

@@ -0,0 +1,81 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { isObject, isNumber, mergeRefs } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useMemo, cloneElement } from 'react';
+import { Icon } from '../icon/Icon.js';
+import classes from './Badge.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["ref", "className", "value", "max", "ping", "block", "placement", "children", "forButton", "icon", "iconBg", "iconColor", "rtlFlip"];
+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; }
+var getBadgeProps = function getBadgeProps(badge) {
+  if (isObject(badge)) {
+    return Object.assign({
+      forButton: true,
+      placement: ""
+    }, badge);
+  } else {
+    return {
+      value: badge,
+      forButton: true,
+      placement: ""
+    };
+  }
+};
+var Badge = function Badge(_ref) {
+  var ref = _ref.ref,
+    className = _ref.className,
+    value = _ref.value,
+    max = _ref.max,
+    ping = _ref.ping,
+    block = _ref.block,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "top-end" : _ref$placement,
+    children = _ref.children,
+    _ref$forButton = _ref.forButton,
+    forButton = _ref$forButton === void 0 ? false : _ref$forButton,
+    icon = _ref.icon,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    rtlFlip = _ref.rtlFlip,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var label = useMemo(function () {
+    if (isNumber(value) && max && value > max) {
+      return "".concat(max, "+");
+    }
+    return "".concat(value);
+  }, [value, max]);
+  var innerRef = useMemo(function () {
+    return mergeRefs(ref, children === null || children === void 0 ? void 0 : children.props.ref);
+  }, [ref, children === null || children === void 0 ? void 0 : children.props.ref]);
+
+  /**
+   * wrap children in a relative div to float badge, wrapper allows for floating a badge on elements with overflow hidden
+   */
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(forButton ? "contents" : "relative", block ? "block" : "inline-block"),
+    children: [children && /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, {
+      ref: innerRef
+    })), /*#__PURE__*/jsxs("div", {
+      "data-ref": "badge",
+      "data-ping": ping,
+      "data-placement": placement,
+      className: classNames(classes.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-5 pointer-events-none", forButton && !placement ? "relative" : "absolute"),
+      children: [label && /*#__PURE__*/jsx("span", {
+        className: "p-1",
+        children: label
+      }), icon && /*#__PURE__*/jsx(Icon, {
+        icon: icon,
+        bg: iconBg,
+        color: iconColor,
+        rtlFlip: rtlFlip
+      })]
+    })]
+  });
+};
+
+export { Badge, getBadgeProps };

package/dist/esm/components/badge/Badge.module.css

@@ -0,0 +1 @@
+@layer comp{@keyframes pinger{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(3)}}.badge{--tw-bg-opacity:1;background-color:theme(colors.tint.200/var(--tw-bg-opacity));box-sizing:content-box;color:theme(textColor.base);outline:.5px solid theme(backgroundColor.base);&>span{font-size:.625em;font-weight:500;line-height:1;vertical-align:.125em}&[data-ping=true]{--translate:50%;&:before{animation:pinger 1s linear infinite;background-color:inherit;border-radius:999px;content:"";inset:0;position:absolute;z-index:-1}}&:not([data-ping=true]){--translate:0.75rem;min-width:1em}&[data-placement=top]{left:50%;top:0;transform:translate(-50%,-50%)}&[data-placement=top-start]{inset-inline-start:0;top:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*-1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*1),-50%)}}&[data-placement=top-end]{inset-inline-end:0;top:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*-1),-50%)}}&[data-placement=bottom]{bottom:0;left:50%;transform:translate(-50%,50%)}&[data-placement=bottom-start]{bottom:0;inset-inline-start:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*-1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*1),-50%)}}&[data-placement=bottom-end]{bottom:0;inset-inline-end:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*-1),-50%)}}&[data-placement=start]{inset-inline-start:0;top:50%;:global([dir=ltr]) &{transform:translate(-50%,-50%)}:global([dir=rtl]) &{transform:translate(50%,-50%)}}&[data-placement=end]{inset-inline-end:0;top:50%;:global([dir=ltr]) &{transform:translate(50%,-50%)}:global([dir=rtl]) &{transform:translate(-50%,-50%)}}}}

package/dist/esm/components/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,71 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { useMemo, Children } from 'react';
+import { Link } from '../../typography/Link.js';
+import { Dropdown } from '../dropdown/Dropdown.js';
+import classes from './Breadcrumbs.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["variant", "className", "separator", "children", "color"];
+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; }
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "classic" : _ref$variant,
+    className = _ref.className,
+    _ref$separator = _ref.separator,
+    separator = _ref$separator === void 0 ? "/" : _ref$separator,
+    children = _ref.children,
+    color = _ref.color,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useMemo = useMemo(function () {
+      var nodeList = Children.toArray(children);
+      if (nodeList.length > 7) {
+        return [nodeList.slice(0, 3), nodeList.slice(3, -3), nodeList.slice(-3)];
+      }
+      return [nodeList];
+    }, [children]),
+    _useMemo2 = _slicedToArray(_useMemo, 3),
+    start = _useMemo2[0],
+    overflow = _useMemo2[1],
+    end = _useMemo2[2];
+  return /*#__PURE__*/jsxs("nav", _objectSpread(_objectSpread({
+    "data-color": color,
+    "data-variant": variant,
+    className: classNames(classes.breadcrumbs, className, "flex flex-nowrap items-center")
+  }, aria), {}, {
+    children: [start.map(function (link, idx) {
+      return /*#__PURE__*/jsx("li", {
+        className: classes.breadcrumbLink,
+        "data-separator": separator,
+        children: link
+      }, idx);
+    }), overflow && /*#__PURE__*/jsxs(Dropdown, {
+      closeOnClick: true,
+      showArrow: true,
+      children: [/*#__PURE__*/jsx("li", {
+        className: classes.breadcrumbLink,
+        "data-separator": separator,
+        children: /*#__PURE__*/jsx(Link, {
+          children: "..."
+        })
+      }), /*#__PURE__*/jsx("div", {
+        "data-color": color,
+        className: classNames(classes.breadcrumbOverflow, "flex flex-col"),
+        children: overflow
+      })]
+    }), end === null || end === void 0 ? void 0 : end.map(function (link, idx) {
+      return /*#__PURE__*/jsx("li", {
+        className: classes.breadcrumbLink,
+        "data-separator": separator,
+        children: link
+      }, idx);
+    })]
+  }));
+};
+
+export { Breadcrumbs };

package/dist/esm/components/breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1 @@
+@layer comp{.breadcrumbOverflow,.breadcrumbs{--color:theme(colors.primary.DEFAULT);&[data-color=accent]{--color:theme(colors.accent.DEFAULT)}&[data-color=info]{--color:theme(colors.info.DEFAULT)}&[data-color=danger]{--color:theme(colors.danger.DEFAULT)}&[data-color=success]{--color:theme(colors.success.DEFAULT)}&[data-color=warning]{--color:theme(colors.warning.DEFAULT)}& :global(.link){padding:.25em .5em;text-decoration:none}}.breadcrumbOverflow,.breadcrumbs[data-variant=classic]{& :global(.link){color:color-mix(in lab,var(--color) 90%,var(--fabric-text))}& :global(.link):hover{background-color:theme(colors.tint.50/50%);color:color-mix(in lab,var(--color) 99%,var(--fabric-text));text-decoration:underline}& :global(.link):active{background-color:theme(colors.tint.50);color:color-mix(in lab,var(--color) 85%,var(--fabric-text))}}.breadcrumbs[data-variant=classic]{&>.breadcrumbLink{list-style:none;&:after{color:theme(colors.tint.300);content:attr(data-separator);display:inline-block;margin-inline:.125em}&:last-child:after{content:unset}}}[data-ref=viewport] .breadcrumbs{grid-area:crumbbar;padding:0 .25rem}}@layer var{.breadcrumbs[data-variant=classic]{&>:global(.link){max-width:24rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&>.breadcrumbLink:last-child>:global(.link){color:theme(colors.tint.600);pointer-events:none}}.breadcrumbs[data-variant=modern]{&>.breadcrumbLink{--linkcolor:color-mix(in lab,var(--color) 50%,var(--fabric-bg));border-radius:var(--rounding);list-style:none;position:relative;&:last-child{--color:theme(colors.tint.500);pointer-events:none}&:first-child>:global(.link){border-end-start-radius:var(--rounding);border-start-start-radius:var(--rounding)}&:last-child>:global(.link){border-end-end-radius:var(--rounding);border-start-end-radius:var(--rounding)}&:not(:first-child){margin-inline-start:-1em;&:before{border:.625em solid transparent;border-block-color:var(--linkcolor);border-inline-end-color:var(--linkcolor);content:"";display:inline-block;vertical-align:middle}&>:global(.link){margin-inline-start:-.625em}}&:not(:last-child){&:after{border:.625em solid transparent;border-inline-start-color:var(--linkcolor);content:"";display:inline-block;vertical-align:middle}}&>:global(.link){background-color:var(--linkcolor);color:color-mix(in lab,var(--color) 50%,var(--fabric-text));display:inline-block;line-height:1;padding:.125em .5em;vertical-align:middle}&:hover{--linkcolor:color-mix(in lab,var(--color) 65%,var(--fabric-bg))}&:active{--linkcolor:color-mix(in lab,var(--color) 35%,var(--fabric-bg))}}}}

package/dist/esm/components/button/Button.js

@@ -0,0 +1,170 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { mergeRefs, isString, isNil } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useRef, useState, useCallback, useEffect, useMemo, Fragment, isValidElement } from 'react';
+import { useEffectDebugger } from '../../hooks/useEffectDebugger.js';
+import { HotKey } from '../../hotkeys/HotKey.js';
+import { HotKeyLabel } from '../../hotkeys/HotKeyLabel.js';
+import { Tooltip } from '../../overlays/tooltip/Tooltip.js';
+import { AnimationIndicator } from '../animations/Animations.js';
+import { getBadgeProps, Badge } from '../badge/Badge.js';
+import { Icon } from '../icon/Icon.js';
+import classes from './Button.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["as", "ref", "children", "className", "active", "color", "icon", "iconBg", "iconColor", "iconAlign", "altIcon", "rtlFlip", "rounded", "size", "disabled", "loading", "variant", "badge", "fullWidth", "spinOnHover", "onClick", "actionMessage", "type", "hotKey", "showActionDone", "showActionDoneEvent", "tabIndex", "data-ref"];
+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; }
+/**
+ * Clickable action button
+ */
+var Button = function Button(_ref) {
+  var as = _ref.as,
+    ref = _ref.ref,
+    children = _ref.children,
+    className = _ref.className,
+    active = _ref.active,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    icon = _ref.icon,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    _ref$iconAlign = _ref.iconAlign,
+    iconAlign = _ref$iconAlign === void 0 ? "start" : _ref$iconAlign,
+    altIcon = _ref.altIcon,
+    rtlFlip = _ref.rtlFlip,
+    rounded = _ref.rounded,
+    size = _ref.size,
+    disabled = _ref.disabled,
+    loading = _ref.loading,
+    variant = _ref.variant,
+    badge = _ref.badge,
+    fullWidth = _ref.fullWidth,
+    spinOnHover = _ref.spinOnHover,
+    onClick = _ref.onClick,
+    actionMessage = _ref.actionMessage,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "button" : _ref$type,
+    hotKey = _ref.hotKey,
+    showActionDone = _ref.showActionDone,
+    _ref$showActionDoneEv = _ref.showActionDoneEvent,
+    showActionDoneEvent = _ref$showActionDoneEv === void 0 ? "click" : _ref$showActionDoneEv,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+    dataRef = _ref["data-ref"],
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var refEl = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    busy = _useState2[0],
+    setBusy = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    actionDone = _useState4[0],
+    setActionDone = _useState4[1];
+  var clickHandler = useCallback(function (e) {
+    setBusy(true);
+    // e.stopPropagation();
+    var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    void Promise.resolve(ret).then(function (b) {
+      setBusy(false);
+      if (b !== false && actionMessage && showActionDoneEvent === "click") {
+        setActionDone(true);
+      }
+    });
+  }, [onClick, disabled, actionMessage, showActionDoneEvent]);
+
+  /** ***************** reset done state on timeout *******************/
+  useEffect(function () {
+    actionMessage && showActionDone && setActionDone(true);
+  }, [showActionDone, actionMessage]);
+  useEffectDebugger(function () {
+    if (actionDone) {
+      var timer = setTimeout(function () {
+        return setActionDone(false);
+      }, 2000);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [actionDone], "ActionButton done handler");
+  var TooltipWrapper = useMemo(function () {
+    return actionMessage ? Tooltip : Fragment;
+  }, [actionMessage, actionDone]);
+  var tooltipProps = useMemo(function () {
+    if (actionDone && actionMessage) {
+      return {
+        content: actionMessage,
+        placement: "top",
+        color: color,
+        open: true
+      };
+    }
+  }, [actionDone, actionMessage, color]);
+  var badgeProps = useMemo(function () {
+    return getBadgeProps(badge);
+  }, [badge]);
+  var E = as !== null && as !== void 0 ? as : "button";
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(classes.buttonWrapper, className, "relative align-text-top select-none focus-within:z-1", fullWidth ? "block w-full" : "inline-block"),
+    "data-ref": dataRef !== null && dataRef !== void 0 ? dataRef : "button",
+    "data-size": size,
+    "data-loading": busy || loading,
+    "data-disabled": disabled,
+    children: [hotKey && /*#__PURE__*/jsx(HotKey, {
+      keyCombo: hotKey,
+      handler: function handler() {
+        var _refEl$current;
+        return !disabled && ((_refEl$current = refEl.current) === null || _refEl$current === void 0 ? void 0 : _refEl$current.click());
+      }
+    }), /*#__PURE__*/jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {
+      children: /*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({
+        ref: mergeRefs(ref, refEl),
+        role: "button",
+        className: classNames(classes.button, "pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none", "focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner", fullWidth && "max-w-full w-full", rounded && "rounded-full", spinOnHover && classes.spinOnHover),
+        type: type,
+        disabled: disabled,
+        tabIndex: tabIndex,
+        "data-inner-clickable": true,
+        onClick: clickHandler,
+        "data-color": color,
+        "data-active": active,
+        "data-variant": variant
+      }, aria), {}, {
+        children: [icon && /*#__PURE__*/jsx(Icon, {
+          className: classes.buttonIcon,
+          icon: icon,
+          bg: iconBg,
+          color: iconColor,
+          rtlFlip: rtlFlip,
+          "data-align": iconAlign
+        }), /*#__PURE__*/isValidElement(children) && /*#__PURE__*/jsx("div", {
+          className: classes.buttonChild,
+          children: children
+        }), isString(children) && /*#__PURE__*/jsx("label", {
+          className: classNames(classes.buttonLabel, "truncate"),
+          "data-colored-icon": !!iconBg,
+          children: children
+        }), !isNil(badge) && /*#__PURE__*/jsx(Badge, _objectSpread({}, badgeProps)), hotKey && /*#__PURE__*/jsx(HotKeyLabel, {
+          keyCombo: hotKey
+        }), altIcon && /*#__PURE__*/jsx(Icon, {
+          className: classes.altIcon,
+          icon: altIcon,
+          rtlFlip: true
+        })]
+      }))
+    })), actionDone && /*#__PURE__*/jsx("div", {
+      className: classNames("absolute inset-0 overflow-hidden flex justify-center items-center", "bg-".concat(color, "-300"), rounded ? "rounded-full" : "rounded"),
+      children: /*#__PURE__*/jsx(AnimationIndicator, {
+        type: "check",
+        color: color
+      })
+    })]
+  });
+};
+
+export { Button };

package/dist/esm/components/button/Button.module.css

@@ -0,0 +1 @@
+@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:progress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}

package/dist/esm/components/button/ButtonGroup.js

@@ -0,0 +1,41 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { Children, cloneElement } from 'react';
+import classes from './Button.module.css';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["vertical", "className", "children", "variant", "rounded", "disabled", "fullWidth", "color", "size"];
+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; }
+var ButtonGroup = function ButtonGroup(_ref) {
+  var vertical = _ref.vertical,
+    className = _ref.className,
+    children = _ref.children,
+    variant = _ref.variant,
+    rounded = _ref.rounded,
+    disabled = _ref.disabled,
+    fullWidth = _ref.fullWidth,
+    color = _ref.color,
+    size = _ref.size,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+    "data-ref": "buttonGroup",
+    className: classNames(classes.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle rounded", vertical && classes.vertical, vertical && "flex-col items-stretch")
+  }, aria), {}, {
+    children: Children.map(children, function (child) {
+      return /*#__PURE__*/cloneElement(child, _objectSpread({
+        color: color,
+        size: size,
+        variant: variant,
+        disabled: disabled,
+        rounded: rounded,
+        fullWidth: fullWidth
+      }, child.props));
+    })
+  }));
+};
+
+export { ButtonGroup };