@react-fabric/core 1.0.0-beta.0

package/dist/esm/components/dropdown/Dropdown.js

@@ -0,0 +1,179 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { FloatingTree, useFloatingTree, useFloating, autoUpdate, shift, flip, offset, arrow, safePolygon, useDismiss, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingArrow, useHover, useClick } from '@floating-ui/react';
+import { mergeRefs } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useRef, useState, useMemo, Children, useCallback, useEffect, Fragment, cloneElement } from 'react';
+import classes from './Dropdown.module.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+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 DropdownElement = function DropdownElement(_ref) {
+  var _refs$domReference$cu, _refs$domReference$cu2;
+  var ref = _ref.ref,
+    children = _ref.children,
+    showArrow = _ref.showArrow,
+    closeOnClick = _ref.closeOnClick,
+    _ref$fitToParent = _ref.fitToParent,
+    fitToParent = _ref$fitToParent === void 0 ? true : _ref$fitToParent,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
+    onClose = _ref.onClose,
+    onOpen = _ref.onOpen,
+    disabled = _ref.disabled,
+    plainDropdown = _ref.plainDropdown,
+    dropdownEvent = _ref.dropdownEvent,
+    dropdownClassName = _ref.dropdownClassName;
+  var arrowRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var tree = useFloatingTree();
+  var _useMemo = useMemo(function () {
+      return Children.toArray(children);
+    }, [children]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    anchor = _useMemo2[0],
+    panel = _useMemo2[1];
+  var _useFloating = useFloating({
+      open: isOpen,
+      onOpenChange: function onOpenChange(open, _, reason) {
+        var _ref2;
+        if (reason === "reference-press") return;
+        setIsOpen(open);
+        (_ref2 = open ? onOpen : onClose) === null || _ref2 === void 0 || _ref2();
+      },
+      strategy: "fixed",
+      placement: placement,
+      whileElementsMounted: autoUpdate,
+      middleware: [shift({
+        padding: 8
+      }), flip(), showArrow && offset(9), showArrow && arrow({
+        element: arrowRef
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var handler = dropdownEvent === "hover" ? useHover : useClick;
+  var click = handler(context, {
+    enabled: !disabled,
+    handleClose: safePolygon({
+      blockPointerEvents: true
+    })
+  });
+  var dismiss = useDismiss(context, {
+    referencePress: true
+  });
+  var _useInteractions = useInteractions([dismiss, click]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var minWidth = useMemo(function () {
+    if (fitToParent) {
+      var _refs$reference$curre, _refs$reference$curre2;
+      var el = // @ts-expect-error ignore
+      (_refs$reference$curre = (_refs$reference$curre2 = refs.reference.current) === null || _refs$reference$curre2 === void 0 ? void 0 : _refs$reference$curre2.closest('[data-ref="buttonGroup"]')) !== null && _refs$reference$curre !== void 0 ? _refs$reference$curre : refs.reference.current;
+      return el === null || el === void 0 ? void 0 : el.offsetWidth;
+    }
+    return undefined;
+  }, [refs, isOpen, fitToParent]);
+  var tryClosing = useCallback(function (e) {
+    var _refs$floating$curren, _refs$floating$curren2;
+    if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target.closest("[data-dropdown-dismiss='false']"))) && (!!closeOnClick || (_refs$floating$curren2 = refs.floating.current) !== null && _refs$floating$curren2 !== void 0 && _refs$floating$curren2.contains(e.target.closest("[data-dropdown-dismiss='true']")))) {
+      setTimeout(function () {
+        setIsOpen(false);
+        onClose === null || onClose === void 0 || onClose();
+      }, 100);
+    }
+  }, [closeOnClick, onClose]);
+  var innerRef = useMemo(function () {
+    return mergeRefs(ref, anchor.props.ref, refs.setReference);
+  }, [ref, anchor.props.ref, refs.setReference]);
+  useEffect(function () {
+    disabled && setIsOpen(false);
+  }, [disabled]);
+  useEffect(function () {
+    if (!tree) return;
+    function handleTreeClick() {
+      setIsOpen(false);
+    }
+    tree.events.on("close", handleTreeClick);
+    return function () {
+      tree.events.off("close", handleTreeClick);
+    };
+  }, [tree]);
+  if (!anchor || !panel) throw Error("Dropdown requires two elements [Anchor, Panel]");
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/cloneElement(anchor, _objectSpread(_objectSpread({}, getReferenceProps({
+      onClick: function onClick(e) {
+        var _anchor$props$onClick, _anchor$props;
+        (_anchor$props$onClick = (_anchor$props = anchor.props).onClick) === null || _anchor$props$onClick === void 0 || _anchor$props$onClick.call(_anchor$props, e);
+        e.stopPropagation();
+      }
+    })), {}, {
+      "data-dropdown-open": isOpen ? true : undefined,
+      ref: innerRef
+    })), isOpen && /*#__PURE__*/jsxs(FloatingPortal, {
+      root: (_refs$domReference$cu = (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 ? void 0 : _refs$domReference$cu2.closest(".theme-base")) !== null && _refs$domReference$cu !== void 0 ? _refs$domReference$cu : undefined,
+      children: [/*#__PURE__*/jsx(FloatingOverlay, {}), /*#__PURE__*/jsx(FloatingFocusManager, {
+        context: context,
+        modal: true,
+        children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+          ref: function ref(el) {
+            var _el$querySelector;
+            refs.setFloating(el);
+            el === null || el === void 0 || (_el$querySelector = el.querySelector("input,textarea,button")) === null || _el$querySelector === void 0 || _el$querySelector.focus();
+          },
+          style: _objectSpread({
+            minWidth: minWidth,
+            zIndex: "var(--z-popover)"
+          }, floatingStyles)
+        }, getFloatingProps({
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        })), {}, {
+          children: [/*#__PURE__*/jsx("div", {
+            role: "none",
+            className: classNames(classes.dropdownBody, dropdownClassName, !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100", "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]"),
+            onMouseUpCapture: tryClosing,
+            children: panel
+          }), showArrow && /*#__PURE__*/jsx(FloatingArrow, {
+            ref: arrowRef,
+            context: context,
+            strokeWidth: 0.5,
+            className: "fill-base stroke-muted"
+          })]
+        }))
+      })]
+    })]
+  });
+};
+var Dropdown = function Dropdown(props) {
+  return /*#__PURE__*/jsx(FloatingTree, {
+    children: /*#__PURE__*/jsx(DropdownElement, _objectSpread({}, props))
+  });
+};
+var DropdownDismiss = function DropdownDismiss(_ref3) {
+  var children = _ref3.children,
+    _ref3$dismiss = _ref3.dismiss,
+    dismiss = _ref3$dismiss === void 0 ? true : _ref3$dismiss;
+  var tree = useFloatingTree();
+  return /*#__PURE__*/jsx("div", {
+    role: "none",
+    className: "contents",
+    "data-dropdown-dismiss": dismiss,
+    onMouseUp: function onMouseUp() {
+      return dismiss && setTimeout(function () {
+        return tree === null || tree === void 0 ? void 0 : tree.events.emit("close");
+      }, 50);
+    },
+    children: children
+  });
+};
+
+export { Dropdown, DropdownDismiss };

package/dist/esm/components/dropdown/Dropdown.module.css

@@ -0,0 +1 @@
+@layer var{.dropdownBody{grid-template:1fr/1fr;& [data-ref=card],& [data-ref=panelGroup],& [data-ref=panel]{border-inline:0;border-top:0;box-shadow:none;grid-area:unset;outline:0}}}

package/dist/esm/components/dropdown/DropdownTool.js

@@ -0,0 +1,26 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { Icon } from '../icon/Icon.js';
+import { Dropdown } from './Dropdown.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["children", "className", "groupHover"];
+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 DropdownTool = function DropdownTool(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    groupHover = _ref.groupHover,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs(Dropdown, _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/jsx(Icon, {
+      icon: "mdi mdi-menu-down",
+      className: classNames(className, "outline bg-base flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover:inline-block data-[dropdown-open]:inline-block")
+    }), children]
+  }));
+};
+
+export { DropdownTool };

package/dist/esm/components/empty/EmptyContent.js

@@ -0,0 +1,92 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { isString } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { isValidElement } from 'react';
+import { Icon } from '../icon/Icon.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["children", "title", "message", "icon", "className", "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 = {
+  "": "1rem",
+  sm: "0.875rem",
+  md: "1.125rem"
+};
+var DefaultIcon = function DefaultIcon() {
+  return /*#__PURE__*/jsxs("svg", {
+    version: "1.1",
+    viewBox: "0 0 512 512",
+    width: "1em",
+    height: "1em",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsx("path", {
+      opacity: "0.5",
+      fill: "currentColor",
+      d: "M106.1,296.01c-0.46,0-0.92-0.05-1.37-0.14c-0.45-0.09-0.89-0.22-1.31-0.4c-0.42-0.17-0.83-0.39-1.21-0.64c-0.38-0.26-0.74-0.55-1.06-0.87c-0.33-0.33-0.62-0.68-0.87-1.07c-0.26-0.38-0.47-0.78-0.65-1.21c-0.17-0.42-0.31-0.86-0.4-1.31c-0.09-0.45-0.13-0.91-0.13-1.36c0-0.46,0.04-0.92,0.13-1.37s0.23-0.89,0.4-1.31c0.18-0.42,0.39-0.83,0.65-1.21c0.25-0.38,0.54-0.74,0.87-1.06c0.32-0.33,0.68-0.62,1.06-0.87s0.79-0.47,1.21-0.65c0.42-0.17,0.86-0.31,1.31-0.4c0.9-0.18,1.83-0.18,2.73,0c0.45,0.09,0.89,0.23,1.31,0.4c0.43,0.18,0.83,0.4,1.21,0.65s0.74,0.54,1.07,0.87c0.32,0.32,0.61,0.68,0.87,1.06c0.25,0.38,0.47,0.79,0.64,1.21s0.31,0.86,0.4,1.31s0.14,0.91,0.14,1.37c0,0.45-0.05,0.91-0.14,1.36c-0.09,0.45-0.23,0.89-0.4,1.31c-0.17,0.43-0.39,0.83-0.64,1.21c-0.26,0.39-0.55,0.74-0.87,1.07c-0.33,0.32-0.69,0.61-1.07,0.87c-0.38,0.25-0.78,0.47-1.21,0.64c-0.42,0.18-0.86,0.31-1.31,0.4S106.55,296.01,106.1,296.01z"
+    }), /*#__PURE__*/jsx("path", {
+      opacity: "0.5",
+      fill: "currentColor",
+      d: "M475.5,458.25H36.5c-8.78,0-16.58-4.58-20.86-12.24c-4.28-7.67-4.09-16.71,0.51-24.19l70.18-114.04c2.03-3.29,6.34-4.32,9.63-2.29c3.29,2.03,4.32,6.34,2.29,9.63L28.07,429.16c-1.91,3.1-1.99,6.84-0.21,10.02s5.01,5.07,8.64,5.07H475.5c3.64,0,6.87-1.9,8.64-5.07s1.7-6.92-0.21-10.02l-219.5-356.7c-1.84-3-4.92-4.71-8.43-4.71s-6.59,1.72-8.43,4.71L124.24,272.88c-2.03,3.29-6.34,4.32-9.63,2.29c-3.29-2.03-4.32-6.34-2.29-9.63L235.64,65.13C240.03,58,247.64,53.75,256,53.75s15.97,4.25,20.36,11.38l219.5,356.7c4.6,7.48,4.79,16.52,0.51,24.19C492.08,453.67,484.28,458.25,475.5,458.25z"
+    }), /*#__PURE__*/jsx("path", {
+      opacity: "0.5",
+      fill: "currentColor",
+      d: "M354.79,279.28c-1.85,0-3.65-0.75-4.95-2.05c-0.33-0.32-0.62-0.68-0.87-1.07c-0.26-0.37-0.47-0.78-0.65-1.2c-0.17-0.43-0.31-0.87-0.4-1.31c-0.09-0.45-0.13-0.91-0.13-1.37c0-0.46,0.04-0.92,0.13-1.37c0.09-0.44,0.23-0.89,0.4-1.31c0.18-0.42,0.39-0.83,0.65-1.21c0.25-0.38,0.54-0.74,0.87-1.06c1.62-1.63,4.04-2.37,6.31-1.91c0.45,0.09,0.89,0.22,1.31,0.4c0.43,0.17,0.83,0.39,1.21,0.64c0.39,0.25,0.74,0.55,1.06,0.87c0.33,0.32,0.62,0.68,0.88,1.06c0.25,0.38,0.46,0.79,0.64,1.21c0.18,0.42,0.31,0.87,0.4,1.31c0.09,0.45,0.14,0.91,0.14,1.37c0,0.46-0.05,0.92-0.14,1.37c-0.09,0.44-0.22,0.88-0.4,1.31c-0.18,0.42-0.39,0.83-0.64,1.2c-0.26,0.39-0.55,0.75-0.88,1.07c-0.32,0.32-0.67,0.61-1.06,0.87c-0.38,0.25-0.78,0.47-1.21,0.64c-0.42,0.18-0.86,0.31-1.31,0.4C355.7,279.23,355.24,279.28,354.79,279.28z"
+    }), /*#__PURE__*/jsx("path", {
+      opacity: "0.5",
+      fill: "currentColor",
+      d: "M403.86,423.48H108.14c-10.56,0-20.31-5.72-25.46-14.94c-5.15-9.21-4.91-20.52,0.62-29.51l147.86-240.29c5.35-8.69,14.63-13.88,24.84-13.88s19.49,5.19,24.84,13.88l68.87,111.91c2.03,3.29,1,7.6-2.29,9.63c-3.29,2.02-7.6,1-9.63-2.29l-68.87-111.91c-2.78-4.52-7.61-7.22-12.91-7.22s-10.13,2.7-12.91,7.22L95.22,386.37c-2.88,4.67-3,10.55-0.32,15.34c2.68,4.79,7.75,7.77,13.24,7.77h295.72c5.49,0,10.56-2.98,13.24-7.77c2.68-4.79,2.55-10.67-0.32-15.34l-54.14-87.97c-2.03-3.29-1-7.6,2.29-9.63c3.29-2.02,7.61-1,9.63,2.29l54.14,87.97c5.53,8.99,5.77,20.3,0.62,29.51C424.17,417.76,414.42,423.48,403.86,423.48z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: "currentColor",
+      d: "M270.12,335.13h-28.24c-6.17,0-11.22-4.83-11.5-10.99l-0.5-11.01c-0.18-3.86,2.81-7.14,6.67-7.31 c3.85-0.21,7.14,2.81,7.31,6.67l0.4,8.64h23.49l5.23-114.15h-33.96l3.79,82.55c0.18,3.86-2.81,7.14-6.67,7.31 c-0.11,0.01-0.22,0.01-0.33,0.01c-3.72,0-6.81-2.93-6.99-6.68l-3.91-85.15c-0.14-3.13,1.01-6.22,3.17-8.48 c2.16-2.26,5.2-3.56,8.33-3.56h39.17c3.13,0,6.16,1.3,8.33,3.56c2.16,2.26,3.32,5.35,3.17,8.48l-5.46,119.12 C281.34,330.3,276.29,335.13,270.12,335.13z"
+    }), /*#__PURE__*/jsx("path", {
+      fill: "currentColor",
+      d: "M268.47,394.55h-24.94c-4.83,0-9.39-2.12-12.5-5.81s-4.44-8.54-3.63-13.3l2.69-15.79 c1.34-7.89,8.13-13.61,16.13-13.61h19.56c8,0,14.78,5.73,16.13,13.61l2.69,15.79c0.81,4.76-0.51,9.61-3.63,13.3 S273.3,394.55,268.47,394.55z M246.22,360.04c-1.15,0-2.13,0.83-2.33,1.96l-2.69,15.79c-0.16,0.94,0.26,1.61,0.52,1.92 c0.26,0.31,0.85,0.84,1.8,0.84h24.94c0.95,0,1.54-0.53,1.8-0.84c0.26-0.31,0.68-0.98,0.52-1.92L268.11,362 c-0.19-1.14-1.17-1.96-2.33-1.96H246.22z"
+    })]
+  });
+};
+var EmptyContent = function EmptyContent(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    message = _ref.message,
+    icon = _ref.icon,
+    className = _ref.className,
+    size = _ref.size,
+    test = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    className: classNames("p-6 flex flex-col items-center area-content", className),
+    style: size && {
+      fontSize: SizeMap[size]
+    }
+  }, test), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "leading-none",
+      style: {
+        fontSize: "4em"
+      },
+      children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
+        icon: icon
+      }), /*#__PURE__*/isValidElement(icon) && icon, !icon && /*#__PURE__*/jsx(DefaultIcon, {})]
+    }), title && /*#__PURE__*/jsx("p", {
+      className: "font-medium text-center text-dimmed",
+      style: {
+        fontSize: "1.5em"
+      },
+      children: title
+    }), /*#__PURE__*/jsx("p", {
+      className: "font-medium text-center text-muted",
+      style: {
+        fontSize: "0.875em"
+      },
+      children: message
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex gap-1 pt-6",
+      children: children
+    })]
+  }));
+};
+
+export { EmptyContent };

package/dist/esm/components/icon/Icon.js

@@ -0,0 +1,106 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { isSvgPath, isString } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
+import classes from './Icon.module.css';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "viewBox", "className", "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 SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
+var SizeMap = {
+  xs: "0.625rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "2rem"
+};
+
+/**
+ * An icon is a display component for svg icon path / image
+ */
+var Icon = function Icon(_ref) {
+  var ref = _ref.ref,
+    icon = _ref.icon,
+    bg = _ref.bg,
+    color = _ref.color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "" : _ref$size,
+    rtlFlip = _ref.rtlFlip,
+    animate = _ref.animate,
+    rounded = _ref.rounded,
+    _ref$viewBox = _ref.viewBox,
+    viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
+    className = _ref.className,
+    onClick = _ref.onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  /** ***************** 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], "Icon styles");
+
+  /** ***************** check if icon is svg path *******************/
+  var isSvg = useMemoDebugger(function () {
+    return isSvgPath(icon);
+  }, [icon], "Icon isSvg");
+
+  /** ***************** render icon *******************/
+  var iconEl = useMemoDebugger(function () {
+    var _SvgTextSize$icon$len;
+    if (!isString(icon)) {
+      throw Error("Invalid icon expected string");
+    }
+    return isSvg ? /*#__PURE__*/jsx("svg", {
+      viewBox: viewBox,
+      children: /*#__PURE__*/jsx("path", {
+        fill: "currentColor",
+        d: icon.toString()
+      })
+    }) : (icon === null || icon === void 0 ? void 0 : icon.toString().length) <= 4 ? /*#__PURE__*/jsx("svg", {
+      role: "img",
+      children: /*#__PURE__*/jsx("text", {
+        x: "50%",
+        y: "50%",
+        dy: ".1em",
+        dominantBaseline: "middle",
+        textAnchor: "middle",
+        style: {
+          fontSize: (_SvgTextSize$icon$len = SvgTextSize[icon.length]) !== null && _SvgTextSize$icon$len !== void 0 ? _SvgTextSize$icon$len : "1em"
+        },
+        children: icon
+      })
+    }) : /*#__PURE__*/jsx("i", {
+      className: "".concat(icon)
+    });
+  }, [icon, isSvg, viewBox], "Icon el");
+  return /*#__PURE__*/jsx("dfn", _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref,
+    role: "presentation",
+    className: classNames(classes.icon, className, "select-none overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getBgClass(bg), color && getColorClass(color), !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate)),
+    onClick: onClick,
+    "data-flip": rtlFlip,
+    style: styles,
+    "data-clickable": !!onClick,
+    children: iconEl
+  }));
+};
+
+export { Icon };

package/dist/esm/components/icon/Icon.module.css

@@ -0,0 +1 @@
+@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{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}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}

package/dist/esm/components/media/Media.js

@@ -0,0 +1,148 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { getImageColorset } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useState, useMemo, useRef } from 'react';
+import { CoreIcons } from '../../types/icons.js';
+import { Button } from '../button/Button.js';
+import classes from './Media.module.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _excluded = ["src", "alt", "reel", "fit", "className"],
+  _excluded2 = ["src", "poster", "reel", "autoPlay", "playOnHover", "fit", "className"];
+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 Image = function Image(_ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    reel = _ref.reel,
+    _ref$fit = _ref.fit,
+    fit = _ref$fit === void 0 ? "cover" : _ref$fit,
+    className = _ref.className,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState("light"),
+    _useState2 = _slicedToArray(_useState, 2),
+    colorSet = _useState2[0],
+    setColorSet = _useState2[1];
+  var loadIndicator = useMemo(function () {
+    return /*#__PURE__*/jsx("div", {
+      className: classNames(classes.mediaPlaceholder, "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse"),
+      children: "\u25CF\u25CF\u25CF"
+    });
+  }, [src]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    "data-ref": "image",
+    className: classNames(classes.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && classes.mediaReel, className),
+    "data-colorset": colorSet
+  }, aria), {}, {
+    children: [loadIndicator, /*#__PURE__*/jsx("img", {
+      alt: alt !== null && alt !== void 0 ? alt : src,
+      src: src,
+      loading: "lazy",
+      crossOrigin: "anonymous",
+      className: classNames(classes.media, "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+      onLoad: function onLoad(e) {
+        var _e$currentTarget$prev;
+        (_e$currentTarget$prev = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev === void 0 || _e$currentTarget$prev.remove();
+        setColorSet(getImageColorset(e.currentTarget));
+      }
+    })]
+  }));
+};
+var Video = function Video(_ref2) {
+  var src = _ref2.src,
+    poster = _ref2.poster,
+    reel = _ref2.reel,
+    autoPlay = _ref2.autoPlay,
+    playOnHover = _ref2.playOnHover,
+    _ref2$fit = _ref2.fit,
+    fit = _ref2$fit === void 0 ? "cover" : _ref2$fit,
+    className = _ref2.className,
+    aria = _objectWithoutProperties(_ref2, _excluded2);
+  var videoRef = useRef(null);
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    state = _useState4[0],
+    setState = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    volume = _useState6[0],
+    setVolume = _useState6[1];
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    "data-ref": "video",
+    className: classNames(classes.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && classes.mediaReel, className),
+    onMouseEnter: function onMouseEnter() {
+      var _videoRef$current;
+      playOnHover && ((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.play());
+    },
+    onMouseLeave: function onMouseLeave() {
+      var _videoRef$current2;
+      playOnHover && ((_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.pause());
+    }
+  }, aria), {}, {
+    children: [/*#__PURE__*/jsx("div", {
+      className: classNames(classes.mediaPlaceholder, "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse"),
+      children: "\u25CF\u25CF\u25CF"
+    }), /*#__PURE__*/jsxs("video", {
+      loop: true,
+      ref: videoRef,
+      controls: false,
+      poster: poster,
+      autoPlay: autoPlay,
+      className: classNames(classes.media, "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+      onPlay: function onPlay() {
+        return setState(true);
+      },
+      onPause: function onPause() {
+        return setState(false);
+      },
+      onVolumeChange: function onVolumeChange(e) {
+        return setVolume(!!e.currentTarget.volume);
+      },
+      onLoadedData: function onLoadedData(e) {
+        var _e$currentTarget$prev2;
+        e.currentTarget.volume = 0;
+        (_e$currentTarget$prev2 = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev2 === void 0 || _e$currentTarget$prev2.remove();
+      },
+      children: [/*#__PURE__*/jsx("source", {
+        src: src
+      }), /*#__PURE__*/jsx("track", {
+        kind: "captions"
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      "data-inner-clickable": true,
+      className: classNames(classes.mediaControls, "absolute bottom-6 end-6 rounded-full flex flex-col"),
+      children: [/*#__PURE__*/jsx(Button, {
+        rounded: true,
+        variant: "link",
+        className: classes.mediaControlPlaceholder,
+        icon: CoreIcons.ellipsis,
+        "aria-label": "controls"
+      }), /*#__PURE__*/jsx(Button, {
+        rounded: true,
+        variant: "link",
+        "aria-label": "controls",
+        className: classes.mediaControlAction,
+        onClick: function onClick() {
+          videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+        },
+        icon: volume ? CoreIcons.volumeOn : CoreIcons.volumeOff
+      }), /*#__PURE__*/jsx(Button, {
+        rounded: true,
+        variant: "link",
+        "aria-label": "controls",
+        className: classes.mediaControlAction,
+        onClick: function onClick() {
+          var _videoRef$current3, _videoRef$current4, _videoRef$current5;
+          (_videoRef$current3 = videoRef.current) !== null && _videoRef$current3 !== void 0 && _videoRef$current3.paused ? (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.play() : (_videoRef$current5 = videoRef.current) === null || _videoRef$current5 === void 0 ? void 0 : _videoRef$current5.pause();
+        },
+        icon: state ? CoreIcons.pause : CoreIcons.play
+      })]
+    })]
+  }));
+};
+
+export { Image, Video };

package/dist/esm/components/media/Media.module.css

@@ -0,0 +1 @@
+@layer comp{.mediaContainer{&.mediaReel{&:after,&:before{background-image:linear-gradient(90deg,#222c 0,#222c .25rem,#fff8 0,#fff8 .75rem,#222c 0,#222c 1rem);background-position:50%;background-repeat:repeat-x;background-size:1rem;border:.125rem solid #222c;content:"";height:.5rem;inset-inline:0;position:absolute}&:before{top:0}&:after{bottom:0}}& .mediaControls{& [data-ref=button]{margin:0;&>:first-child{background-color:theme(colors.black/50%);color:#fff;&:hover{background-color:theme(colors.black/80%);color:theme(colors.primary.600)}}}& .mediaControlAction>:first-child{background-color:theme(colors.black/70%)}& .mediaControlAction+.mediaControlAction{margin-top:8px}}}}@layer util{& .mediaControls{&:hover{& .mediaControlPlaceholder{display:none}}&:not(:hover){& .mediaControlAction{display:none}}}}

package/dist/esm/components/menu/ContextMenu.js

@@ -0,0 +1,84 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useFloating, autoUpdate, offset, flip, useClick, useDismiss, useInteractions, FloatingPortal } from '@floating-ui/react';
+import { useState, useRef, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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 ContextMenu = function ContextMenu(_ref) {
+  var children = _ref.children,
+    menu = _ref.menu;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useFloating = useFloating({
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      strategy: "fixed",
+      placement: "bottom-start",
+      whileElementsMounted: autoUpdate,
+      middleware: [offset(8), flip()]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var click = useClick(context, {});
+  var dismiss = useDismiss(context, {});
+  var _useInteractions = useInteractions([dismiss, click]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var handleClick = useRef(function (e) {
+    var virtual = {
+      getBoundingClientRect: function getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: e.clientX,
+          y: e.clientY,
+          top: e.clientY,
+          left: e.clientX,
+          right: e.clientX,
+          bottom: e.clientY
+        };
+      }
+    };
+    refs.setReference(virtual);
+    setIsOpen(true);
+    e.stopImmediatePropagation();
+    e.preventDefault();
+    return false;
+  });
+  var wrapperRef = useRef(function (el) {
+    var _el$parentElement, _el$parentElement2;
+    el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || _el$parentElement.removeEventListener("contextmenu", handleClick.current);
+    el === null || el === void 0 || (_el$parentElement2 = el.parentElement) === null || _el$parentElement2 === void 0 || _el$parentElement2.addEventListener("contextmenu", handleClick.current);
+  });
+  var tryClosing = useRef(function (e) {
+    var _e$target;
+    if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.closest("[data-dropdown-dismiss='true']")) setTimeout(function () {
+      return setIsOpen(false);
+    }, 50);
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: "contents",
+    ref: wrapperRef.current,
+    onMouseUpCapture: tryClosing.current,
+    children: [children, isOpen && /*#__PURE__*/jsx(FloatingPortal, {
+      children: /*#__PURE__*/cloneElement(menu, _objectSpread(_objectSpread({}, getFloatingProps()), {}, {
+        style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
+          borderRadius: "var(--rounding)",
+          zIndex: "var(--z-popover)",
+          fontSize: "0.875rem"
+        }),
+        className: "bg-base outline rounded-capped shadow-lg",
+        ref: refs.setFloating,
+        onMouseUp: tryClosing.current
+      }))
+    })]
+  });
+};
+
+export { ContextMenu };