@react-fabric/core 1.0.0-beta.0

package/dist/cjs/components/animations/Animations.js

@@ -0,0 +1,135 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var react = require('react');
+var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var getColor = require('../../utils/getColor.js');
+require('@react-fabric/utilities');
+var Animations_module = require('./Animations.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["className", "color", "strokeColor", "type"];
+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 AnimationIndicator = function AnimationIndicator(_ref) {
+  var className = _ref.className,
+    color = _ref.color,
+    strokeColor = _ref.strokeColor,
+    type = _ref.type,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var styles = useEffectDebugger.useMemoDebugger(function () {
+    var s = {};
+    if (color) {
+      s.color = getColor.getColor(color);
+    }
+    if (strokeColor) {
+      s.stroke = getColor.getColor(strokeColor);
+    }
+    return s;
+  }, [color, strokeColor], "Animation styles");
+  var path = react.useMemo(function () {
+    if (type === "check") return "M14.1 27.2l7.1 7.2 16.7-16.8";
+    if (type === "cross") return "M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8";
+    if (type === "question") return "M18.949 17.621c0.426-0.787 1.354-1.6 2.108-2.223 1.279-0.984 3.87-1.778 5.805-1.778 3.837 0 6.189 2.689 6.189 6.034 0 2.23-1.193 4.214-3.751 6.346-2.886 2.361-3.497 3.362-3.497 5.788v0c0-2.263 0.689-3.509 3.476-5.772 2.689-2.23 3.772-3.968 3.772-6.362 0-3.772-2.492-6.034-6.789-6.034-2.132 0-3.903 0.722-5.28 1.804-0.82 0.623-1.476 1.377-2.033 2.197zM26 41.329v0-2.948z";
+    if (type === "exclaim") return "M26.611 10.873c-0.002 1.015-0.002 2.071-0.002 3.086v11.777c0 3.086 0.002 2.232 0 3.288h-0.018c-0.001-1.056 0-0.202 0-3.288v-11.777c0-1.015 0-2.071-0.002-3.086zM26.59 37.472h0.018v3.655h-0.018z";
+    return "M26 22L26 41M27 22L27 41M25 22L25 41M26 11L26 16M27 11L27 16M25 11L25 16Z";
+  }, [type]);
+  /** ***************** component *******************/
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread(_objectSpread({
+    "data-ref": "animated-indicator",
+    className: classNames(Animations_module.checkAnimation, className, "inline-block rounded-full", color && getColor.getColorClass(color)),
+    style: styles,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 52 52",
+    "aria-hidden": "true"
+  }, aria), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+      className: Animations_module.circlePart,
+      cx: "26",
+      cy: "26",
+      r: "25"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      className: classNames(Animations_module.iconPart, getColor.getColorClass(strokeColor !== null && strokeColor !== void 0 ? strokeColor : "invert")),
+      d: path
+    })]
+  }));
+};
+var AnimationBars = function AnimationBars(_ref2) {
+  var _ref2$color = _ref2.color,
+    color = _ref2$color === void 0 ? "tint-700" : _ref2$color,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? "2rem" : _ref2$size;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames(Animations_module.bars, getColor.getColorClass(color + "-500/50")),
+        style: {
+          width: size
+        }
+      })
+    })
+  });
+};
+var AnimationSpinner = function AnimationSpinner(_ref3) {
+  var _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? "tint-700" : _ref3$color,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? "2rem" : _ref3$size;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames(Animations_module.spinner, getColor.getColorClass(color)),
+        style: {
+          width: size
+        }
+      })
+    })
+  });
+};
+var Loading = function Loading() {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classNames(Animations_module.loader, "area-[loader] relative overflow-x-clip"),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500"
+    })
+  });
+};
+var Skeleton = function Skeleton() {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames("p-2 animate-pulse flex gap-2 max-w-lg"),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "bg-tint-100 rounded aspect-square h-12"
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-1 flex flex-col gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "bg-tint-100 h-3 rounded-full"
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "bg-tint-100 h-2 rounded-full basis-[30%]"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "bg-tint-100 h-2 rounded-full basis-[60%]"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "bg-tint-100 h-2 rounded-full basis-[30%]"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "bg-tint-100 h-2 rounded-full basis-[60%]"
+        })]
+      })]
+    })]
+  });
+};
+
+exports.AnimationBars = AnimationBars;
+exports.AnimationIndicator = AnimationIndicator;
+exports.AnimationSpinner = AnimationSpinner;
+exports.Loading = Loading;
+exports.Skeleton = Skeleton;

package/dist/cjs/components/animations/Animations.module.css

@@ -0,0 +1 @@
+@layer comp{@keyframes l2{0%,25%{background-position:0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}50%{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}75%{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}95%,to{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px}}.bars{--c:linear-gradient(currentcolor 0 0);--r1:radial-gradient(farthest-side at bottom,currentcolor 93%,#0000);--r2:radial-gradient(farthest-side at top,currentcolor 93%,#0000);animation:l2 1s infinite alternate;aspect-ratio:1;background:var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2);background-repeat:no-repeat}@keyframes l4{to{transform:rotate(1turn)}}.spinner{--b:8px;animation:l4 2s steps(10) infinite;aspect-ratio:1;background:conic-gradient(#0000 10%,currentcolor) content-box;border-radius:50%;mask:repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));mask-composite:destination-in;mask-composite:intersect}@keyframes loader{0%{transform:translateX(calc(-100%*var(--multiplier)))}to{transform:translateX(calc(100%*var(--multiplier)))}}.loader{--multiplier:1;&>div{height:calc(.125rem + 2px);&:after{animation:loader 1s cubic-bezier(.65,0,.45,1) infinite}}:global([dir=rtl]) &{--multiplier:-1}}@keyframes check-stroke{to{stroke-dashoffset:0}}@keyframes check-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes check-fill{to{box-shadow:inset 0 0 0 1em currentcolor}}.checkAnimation{box-shadow:inset 0 0 0 currentcolor;color:theme(colors.primary.DEFAULT);height:1.5em;width:1.5em;fill:transparent;stroke-miterlimit:10;stroke-width:4px;animation:check-fill .4s ease-in-out .4s forwards,check-scale .3s ease-in-out .9s both;animation-delay:.75s;& .circlePart{fill:transparent;stroke:currentcolor;stroke-dasharray:166;stroke-dashoffset:166;stroke-miterlimit:10;stroke-width:8px;animation:check-stroke .6s cubic-bezier(.65,0,.45,1) forwards;animation-delay:.25s}& .iconPart{transform-origin:50% 50%;stroke:currentcolor;stroke-dasharray:48;stroke-dashoffset:48;animation:check-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation-delay:.75s}}}

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

@@ -0,0 +1,144 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
+var BoringAvatar = require('boring-avatars');
+var classNames = require('classnames');
+var react = require('react');
+var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var getColor = require('../../utils/getColor.js');
+var Avatar_module = require('./Avatar.module.css');
+var jsxRuntime = require('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 = react.useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    fallback = _useState2[0],
+    setFallback = _useState2[1];
+
+  /** ***************** style map *******************/
+  var styles = useEffectDebugger.useMemoDebugger(function () {
+    var s = {};
+    if (bg) {
+      s.backgroundColor = getColor.getColor(bg);
+    }
+    if (color) {
+      s.color = getColor.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 = useEffectDebugger.useMemoDebugger(function () {
+    setFallback(!avatar);
+    return avatar && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "contents",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames(Avatar_module.imgPlaceholder, "absolute inset-0 bg-gray animate-pulse")
+      }), /*#__PURE__*/jsxRuntime.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 = useEffectDebugger.useMemoDebugger(function () {
+    if (fallbackIcon) {
+      return utilities.isSvgPath(fallbackIcon) ? /*#__PURE__*/jsxRuntime.jsx("svg", {
+        viewBox: viewBox,
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          fill: "currentColor",
+          d: fallbackIcon.toString()
+        })
+      }) : /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("svg", {
+        role: "img",
+        children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(BoringAvatar, {
+      square: true,
+      size: 64,
+      variant: variant,
+      name: name
+    });
+  }, [name, variant, fallbackIcon], "Avatar fallback");
+  return /*#__PURE__*/jsxRuntime.jsxs("dfn", _objectSpread(_objectSpread({
+    role: "presentation",
+    className: classNames(Avatar_module.avatar, className, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), !rounded && "rounded", rounded && "rounded-full"),
+    onClick: onClick,
+    style: styles,
+    "data-clickable": !!onClick,
+    ref: ref
+  }, aria), {}, {
+    children: [!fallback && avatarImage, fallback && fallbackAvatar]
+  }));
+};
+
+exports.Avatar = Avatar;

package/dist/cjs/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/cjs/components/avatar/AvatarGroup.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var react = require('react');
+var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var Avatar_module = require('./Avatar.module.css');
+var jsxRuntime = require('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 = useEffectDebugger.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 = react.useMemo(function () {
+    return react.Children.toArray(children).filter(Boolean);
+  }, [children]);
+  var diff = react.useMemo(function () {
+    return totalCount && totalCount > avatars.length && totalCount - avatars.length;
+  }, [avatars, totalCount]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, aria), {}, {
+    ref: ref,
+    className: classNames(Avatar_module.avatarGroup, className, "inline-flex flex-nowrap", !rounded && "rounded", rounded && "rounded-full"),
+    style: styles,
+    children: [avatars, !!diff && /*#__PURE__*/jsxRuntime.jsx("dfn", {
+      className: classNames(Avatar_module.avatar, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", Avatar_module.extra),
+      children: /*#__PURE__*/jsxRuntime.jsx("svg", {
+        children: /*#__PURE__*/jsxRuntime.jsx("text", {
+          x: "50%",
+          y: "50%",
+          dy: ".1em",
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          style: {
+            fontSize: ".375em",
+            fontWeight: 500
+          },
+          children: "+".concat(diff)
+        })
+      })
+    })]
+  }));
+};
+
+exports.AvatarGroup = AvatarGroup;

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

@@ -0,0 +1,82 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var Icon = require('../icon/Icon.js');
+var Badge_module = require('./Badge.module.css');
+var jsxRuntime = require('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 (utilities.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 = react.useMemo(function () {
+    if (utilities.isNumber(value) && max && value > max) {
+      return "".concat(max, "+");
+    }
+    return "".concat(value);
+  }, [value, max]);
+  var innerRef = react.useMemo(function () {
+    return utilities.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__*/jsxRuntime.jsxs("div", {
+    className: classNames(forButton ? "contents" : "relative", block ? "block" : "inline-block"),
+    children: [children && /*#__PURE__*/react.cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, {
+      ref: innerRef
+    })), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "data-ref": "badge",
+      "data-ping": ping,
+      "data-placement": placement,
+      className: classNames(Badge_module.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__*/jsxRuntime.jsx("span", {
+        className: "p-1",
+        children: label
+      }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        icon: icon,
+        bg: iconBg,
+        color: iconColor,
+        rtlFlip: rtlFlip
+      })]
+    })]
+  });
+};
+
+exports.Badge = Badge;
+exports.getBadgeProps = getBadgeProps;

package/dist/cjs/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/cjs/components/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var react = require('react');
+var Link = require('../../typography/Link.js');
+var Dropdown = require('../dropdown/Dropdown.js');
+var Breadcrumbs_module = require('./Breadcrumbs.module.css');
+var jsxRuntime = require('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 = react.useMemo(function () {
+      var nodeList = react.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__*/jsxRuntime.jsxs("nav", _objectSpread(_objectSpread({
+    "data-color": color,
+    "data-variant": variant,
+    className: classNames(Breadcrumbs_module.breadcrumbs, className, "flex flex-nowrap items-center")
+  }, aria), {}, {
+    children: [start.map(function (link, idx) {
+      return /*#__PURE__*/jsxRuntime.jsx("li", {
+        className: Breadcrumbs_module.breadcrumbLink,
+        "data-separator": separator,
+        children: link
+      }, idx);
+    }), overflow && /*#__PURE__*/jsxRuntime.jsxs(Dropdown.Dropdown, {
+      closeOnClick: true,
+      showArrow: true,
+      children: [/*#__PURE__*/jsxRuntime.jsx("li", {
+        className: Breadcrumbs_module.breadcrumbLink,
+        "data-separator": separator,
+        children: /*#__PURE__*/jsxRuntime.jsx(Link.Link, {
+          children: "..."
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        "data-color": color,
+        className: classNames(Breadcrumbs_module.breadcrumbOverflow, "flex flex-col"),
+        children: overflow
+      })]
+    }), end === null || end === void 0 ? void 0 : end.map(function (link, idx) {
+      return /*#__PURE__*/jsxRuntime.jsx("li", {
+        className: Breadcrumbs_module.breadcrumbLink,
+        "data-separator": separator,
+        children: link
+      }, idx);
+    })]
+  }));
+};
+
+exports.Breadcrumbs = Breadcrumbs;

package/dist/cjs/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))}}}}