@react-fabric/core 1.0.0-beta.0 → 1.0.0-beta.3

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

@@ -44,10 +44,12 @@ var Badge = function Badge(_ref) {
     rtlFlip = _ref.rtlFlip,
     rest = _objectWithoutProperties(_ref, _excluded);
   var label = react.useMemo(function () {
-    if (utilities.isNumber(value) && max && value > max) {
-      return "".concat(max, "+");
+    if (!utilities.isNil(value)) {
+      if (utilities.isNumber(value) && max && value > max) {
+        return "".concat(max, "+");
+      }
+      return "".concat(value);
     }
-    return "".concat(value);
   }, [value, max]);
   var innerRef = react.useMemo(function () {
     return utilities.mergeRefs(ref, children === null || children === void 0 ? void 0 : children.props.ref);
@@ -60,7 +62,7 @@ var Badge = function Badge(_ref) {
     className: classNames(forButton ? "contents" : "relative", block ? "block" : "inline-block"),
     children: [children && /*#__PURE__*/react.cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, {
       ref: innerRef
-    })), /*#__PURE__*/jsxRuntime.jsxs("div", {
+    })), (!!ping || label) && /*#__PURE__*/jsxRuntime.jsxs("div", {
       "data-ref": "badge",
       "data-ping": ping,
       "data-placement": placement,

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

@@ -16,7 +16,7 @@ var Icon = require('../icon/Icon.js');
 var Button_module = require('./Button.module.css');
 var jsxRuntime = require('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"];
+var _excluded = ["as", "ref", "children", "className", "active", "color", "icon", "iconBg", "iconColor", "iconAlign", "altIcon", "rtlFlip", "rounded", "size", "disabled", "loading", "variant", "badge", "fullWidth", "spinOnHover", "onClick", "actionMessage", "stopPropagation", "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; }
 /**
@@ -47,6 +47,7 @@ var Button = function Button(_ref) {
     spinOnHover = _ref.spinOnHover,
     onClick = _ref.onClick,
     actionMessage = _ref.actionMessage,
+    stopPropagation = _ref.stopPropagation,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "button" : _ref$type,
     hotKey = _ref.hotKey,
@@ -68,7 +69,7 @@ var Button = function Button(_ref) {
     setActionDone = _useState4[1];
   var clickHandler = react.useCallback(function (e) {
     setBusy(true);
-    // e.stopPropagation();
+    stopPropagation && e.stopPropagation();
     var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
     void Promise.resolve(ret).then(function (b) {
       setBusy(false);
@@ -76,7 +77,7 @@ var Button = function Button(_ref) {
         setActionDone(true);
       }
     });
-  }, [onClick, disabled, actionMessage, showActionDoneEvent]);
+  }, [onClick, disabled, actionMessage, showActionDoneEvent, stopPropagation]);
 
   /** ***************** reset done state on timeout *******************/
   react.useEffect(function () {

package/dist/cjs/components/callout/Callout.js

@@ -9,7 +9,7 @@ require('@react-fabric/utilities');
 var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose"];
+var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose", "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 Callout = function Callout(_ref) {
@@ -21,9 +21,10 @@ var Callout = function Callout(_ref) {
     icon = _ref.icon,
     border = _ref.border,
     onClose = _ref.onClose,
+    className = _ref.className,
     aria = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsxs("fieldset", _objectSpread(_objectSpread({
-    className: classNames("block rounded-capped border max-w-full relative overflow-hidden mb-4", getColor.getBgClass(color + "-50"), getColor.getColorClass(color + "-700"), getColor.getBorderClass(color + "-300"), border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
+    className: classNames(className, "block rounded-capped border max-w-full relative overflow-hidden mb-4", getColor.getBgClass(color + "-50"), getColor.getColorClass(color + "-700"), getColor.getBorderClass(color + "-300"), border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
   }, aria), {}, {
     children: [legend && /*#__PURE__*/jsxRuntime.jsx("legend", {
       className: "px-2 mx-4 font-medium",

package/dist/cjs/components/collapsable/Collapsable.js

@@ -11,11 +11,12 @@ var Icon = require('../icon/Icon.js');
 var Collapsable_module = require('./Collapsable.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
+var _excluded = ["ref", "disabled", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
 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 Collapsable = function Collapsable(_ref) {
   var ref = _ref.ref,
+    disabled = _ref.disabled,
     className = _ref.className,
     bodyClassName = _ref.bodyClassName,
     headerClassName = _ref.headerClassName,
@@ -63,7 +64,7 @@ var Collapsable = function Collapsable(_ref) {
       ref: headRef,
       className: classNames(Collapsable_module.collapsableHead, "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
-        return setOpenState(!openState);
+        return !disabled && setOpenState(!openState);
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         size: "1.125em",

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

@@ -139,7 +139,7 @@ var DropdownElement = function DropdownElement(_ref) {
         })), {}, {
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
             role: "none",
-            className: classNames(Dropdown_module.dropdownBody, dropdownClassName, !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100", "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]"),
+            className: classNames(Dropdown_module.dropdownBody, dropdownClassName, !plainDropdown && "shadow-lg shadow-base bg-base ring-1 ring-tint-100", "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]"),
             onMouseUpCapture: tryClosing,
             children: panel
           }), showArrow && /*#__PURE__*/jsxRuntime.jsx(react.FloatingArrow, {

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

@@ -3,6 +3,7 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
+var icons = require('../../types/icons.js');
 var Icon = require('../icon/Icon.js');
 var Dropdown = require('./Dropdown.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -17,7 +18,7 @@ var DropdownTool = function DropdownTool(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsxs(Dropdown.Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-      icon: "mdi mdi-menu-down",
+      icon: icons.CoreIcons.caretDown,
       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]
   }));

package/dist/cjs/core/section/Section.js

@@ -30,11 +30,14 @@ var jsxRuntime = require('react/jsx-runtime');
 
 var Section = function Section(_ref) {
   var children = _ref.children,
-    dir = _ref.dir;
+    className = _ref.className,
+    dir = _ref.dir,
+    ref = _ref.ref;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     "data-ref": "section",
     dir: dir,
-    className: classNames(Section_module.section, "grid area-content overflow-hidden"),
+    ref: ref,
+    className: classNames(Section_module.section, className, "grid area-content overflow-hidden"),
     children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
       children: children
     })

package/dist/cjs/index.js

@@ -80,6 +80,7 @@ exports.ActionLabel = ActionLabel.ActionLabel;
 exports.AnimationBars = Animations.AnimationBars;
 exports.AnimationIndicator = Animations.AnimationIndicator;
 exports.AnimationSpinner = Animations.AnimationSpinner;
+exports.Loading = Animations.Loading;
 exports.Skeleton = Animations.Skeleton;
 exports.Avatar = Avatar.Avatar;
 exports.AvatarGroup = AvatarGroup.AvatarGroup;

package/dist/cjs/overlays/alert/Alert.js

@@ -112,9 +112,6 @@ var Alert = function Alert(_ref) {
           }), /*#__PURE__*/jsxRuntime.jsx("p", {
             className: "area-[message] py-4",
             children: message
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "area-[message]",
-            children: message
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex gap-1 justify-center flex-nowrap pt-2 area-[actions]",
             children: [/*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/typography/Abbr.js

@@ -42,6 +42,7 @@ var AbbrText = function AbbrText(_ref) {
 var Abbr = function Abbr(_ref2) {
   var children = _ref2.children,
     abbr = _ref2.abbr,
+    className = _ref2.className,
     renderer = _ref2.renderer,
     _ref2$copyContent = _ref2.copyContent,
     copyContent = _ref2$copyContent === void 0 ? "text" : _ref2$copyContent;
@@ -101,6 +102,7 @@ var Abbr = function Abbr(_ref2) {
 
   /** ***************** component *******************/
   return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: className,
     children: inner
   });
 };

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

@@ -2,7 +2,7 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { isObject, isNumber, mergeRefs } from '@react-fabric/utilities';
+import { isObject, isNil, isNumber, mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, cloneElement } from 'react';
 import { Icon } from '../icon/Icon.js';
@@ -44,10 +44,12 @@ var Badge = function Badge(_ref) {
     rtlFlip = _ref.rtlFlip,
     rest = _objectWithoutProperties(_ref, _excluded);
   var label = useMemo(function () {
-    if (isNumber(value) && max && value > max) {
-      return "".concat(max, "+");
+    if (!isNil(value)) {
+      if (isNumber(value) && max && value > max) {
+        return "".concat(max, "+");
+      }
+      return "".concat(value);
     }
-    return "".concat(value);
   }, [value, max]);
   var innerRef = useMemo(function () {
     return mergeRefs(ref, children === null || children === void 0 ? void 0 : children.props.ref);
@@ -60,7 +62,7 @@ var Badge = function Badge(_ref) {
     className: classNames(forButton ? "contents" : "relative", block ? "block" : "inline-block"),
     children: [children && /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, {
       ref: innerRef
-    })), /*#__PURE__*/jsxs("div", {
+    })), (!!ping || label) && /*#__PURE__*/jsxs("div", {
       "data-ref": "badge",
       "data-ping": ping,
       "data-placement": placement,

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

@@ -16,7 +16,7 @@ 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"];
+var _excluded = ["as", "ref", "children", "className", "active", "color", "icon", "iconBg", "iconColor", "iconAlign", "altIcon", "rtlFlip", "rounded", "size", "disabled", "loading", "variant", "badge", "fullWidth", "spinOnHover", "onClick", "actionMessage", "stopPropagation", "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; }
 /**
@@ -47,6 +47,7 @@ var Button = function Button(_ref) {
     spinOnHover = _ref.spinOnHover,
     onClick = _ref.onClick,
     actionMessage = _ref.actionMessage,
+    stopPropagation = _ref.stopPropagation,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "button" : _ref$type,
     hotKey = _ref.hotKey,
@@ -68,7 +69,7 @@ var Button = function Button(_ref) {
     setActionDone = _useState4[1];
   var clickHandler = useCallback(function (e) {
     setBusy(true);
-    // e.stopPropagation();
+    stopPropagation && e.stopPropagation();
     var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
     void Promise.resolve(ret).then(function (b) {
       setBusy(false);
@@ -76,7 +77,7 @@ var Button = function Button(_ref) {
         setActionDone(true);
       }
     });
-  }, [onClick, disabled, actionMessage, showActionDoneEvent]);
+  }, [onClick, disabled, actionMessage, showActionDoneEvent, stopPropagation]);
 
   /** ***************** reset done state on timeout *******************/
   useEffect(function () {

package/dist/esm/components/callout/Callout.js

@@ -9,7 +9,7 @@ import '@react-fabric/utilities';
 import { Icon } from '../icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose"];
+var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose", "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 Callout = function Callout(_ref) {
@@ -21,9 +21,10 @@ var Callout = function Callout(_ref) {
     icon = _ref.icon,
     border = _ref.border,
     onClose = _ref.onClose,
+    className = _ref.className,
     aria = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs("fieldset", _objectSpread(_objectSpread({
-    className: classNames("block rounded-capped border max-w-full relative overflow-hidden mb-4", getBgClass(color + "-50"), getColorClass(color + "-700"), getBorderClass(color + "-300"), border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
+    className: classNames(className, "block rounded-capped border max-w-full relative overflow-hidden mb-4", getBgClass(color + "-50"), getColorClass(color + "-700"), getBorderClass(color + "-300"), border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
   }, aria), {}, {
     children: [legend && /*#__PURE__*/jsx("legend", {
       className: "px-2 mx-4 font-medium",

package/dist/esm/components/collapsable/Collapsable.js

@@ -11,11 +11,12 @@ import { Icon } from '../icon/Icon.js';
 import classes from './Collapsable.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
+var _excluded = ["ref", "disabled", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
 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 Collapsable = function Collapsable(_ref) {
   var ref = _ref.ref,
+    disabled = _ref.disabled,
     className = _ref.className,
     bodyClassName = _ref.bodyClassName,
     headerClassName = _ref.headerClassName,
@@ -63,7 +64,7 @@ var Collapsable = function Collapsable(_ref) {
       ref: headRef,
       className: classNames(classes.collapsableHead, "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
-        return setOpenState(!openState);
+        return !disabled && setOpenState(!openState);
       },
       children: [/*#__PURE__*/jsx(Icon, {
         size: "1.125em",

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

@@ -139,7 +139,7 @@ var DropdownElement = function DropdownElement(_ref) {
         })), {}, {
           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]"),
+            className: classNames(classes.dropdownBody, dropdownClassName, !plainDropdown && "shadow-lg shadow-base 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, {

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

@@ -3,6 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
+import { CoreIcons } from '../../types/icons.js';
 import { Icon } from '../icon/Icon.js';
 import { Dropdown } from './Dropdown.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -17,7 +18,7 @@ var DropdownTool = function DropdownTool(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs(Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(Icon, {
-      icon: "mdi mdi-menu-down",
+      icon: CoreIcons.caretDown,
       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]
   }));

package/dist/esm/core/section/Section.js

@@ -30,11 +30,14 @@ import { jsx } from 'react/jsx-runtime';
 
 var Section = function Section(_ref) {
   var children = _ref.children,
-    dir = _ref.dir;
+    className = _ref.className,
+    dir = _ref.dir,
+    ref = _ref.ref;
   return /*#__PURE__*/jsx("div", {
     "data-ref": "section",
     dir: dir,
-    className: classNames(classes.section, "grid area-content overflow-hidden"),
+    ref: ref,
+    className: classNames(classes.section, className, "grid area-content overflow-hidden"),
     children: /*#__PURE__*/jsx(ErrorBoundary, {
       children: children
     })

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 export { ActionLabel } from './components/actionLabel/ActionLabel.js';
-export { AnimationBars, AnimationIndicator, AnimationSpinner, Skeleton } from './components/animations/Animations.js';
+export { AnimationBars, AnimationIndicator, AnimationSpinner, Loading, Skeleton } from './components/animations/Animations.js';
 export { Avatar } from './components/avatar/Avatar.js';
 export { AvatarGroup } from './components/avatar/AvatarGroup.js';
 export { Badge, getBadgeProps } from './components/badge/Badge.js';

package/dist/esm/overlays/alert/Alert.js

@@ -112,9 +112,6 @@ var Alert = function Alert(_ref) {
           }), /*#__PURE__*/jsx("p", {
             className: "area-[message] py-4",
             children: message
-          }), /*#__PURE__*/jsx("div", {
-            className: "area-[message]",
-            children: message
           }), /*#__PURE__*/jsxs("div", {
             className: "flex gap-1 justify-center flex-nowrap pt-2 area-[actions]",
             children: [/*#__PURE__*/jsx("div", {

package/dist/esm/typography/Abbr.js

@@ -42,6 +42,7 @@ var AbbrText = function AbbrText(_ref) {
 var Abbr = function Abbr(_ref2) {
   var children = _ref2.children,
     abbr = _ref2.abbr,
+    className = _ref2.className,
     renderer = _ref2.renderer,
     _ref2$copyContent = _ref2.copyContent,
     copyContent = _ref2$copyContent === void 0 ? "text" : _ref2$copyContent;
@@ -101,6 +102,7 @@ var Abbr = function Abbr(_ref2) {
 
   /** ***************** component *******************/
   return /*#__PURE__*/jsx("span", {
+    className: className,
     children: inner
   });
 };

package/dist/types/components/button/Button.d.ts

@@ -74,6 +74,7 @@ export interface BaseProps extends CssProp, AriaProps, IconProps, RefProp, TestP
      * keyboard shortcut
      */
     hotKey?: string;
+    stopPropagation?: boolean;
     onMouseOut?: MouseEventHandler;
     onMouseOver?: MouseEventHandler;
     onMouseMove?: MouseEventHandler;
@@ -91,4 +92,4 @@ export type ButtonProps = {
 /**
  * Clickable action button
  */
-export declare const Button: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ 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": dataRef, ...aria }: BaseProps & ButtonProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, ref, children, className, active, color, icon, iconBg, iconColor, iconAlign, altIcon, rtlFlip, rounded, size, disabled, loading, variant, badge, fullWidth, spinOnHover, onClick, actionMessage, stopPropagation, type, hotKey, showActionDone, showActionDoneEvent, tabIndex, "data-ref": dataRef, ...aria }: BaseProps & ButtonProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/callout/Callout.d.ts

@@ -1,5 +1,5 @@
-import { type AriaProps, type ChildrenProp, type ColorType, type PaletteType, type TestProps } from "../../types";
-export interface CalloutProps extends AriaProps, ChildrenProp, TestProps {
+import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
+export interface CalloutProps extends AriaProps, ChildrenProp, CssProp, TestProps {
     /**
      * callout color
      */
@@ -25,4 +25,4 @@ export interface CalloutProps extends AriaProps, ChildrenProp, TestProps {
      */
     onClose?: () => void;
 }
-export declare const Callout: ({ children, color, legend, title, icon, border, onClose, ...aria }: CalloutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Callout: ({ children, color, legend, title, icon, border, onClose, className, ...aria }: CalloutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/collapsable/Collapsable.d.ts

@@ -30,6 +30,10 @@ export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp
      * open state
      */
     open?: boolean;
+    /**
+     * disable collapsable
+     */
+    disabled?: boolean;
     /**
      * open handler
      */
@@ -39,5 +43,5 @@ export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp
      */
     onClose?: () => void;
 }
-export declare const Collapsable: ({ ref, className, bodyClassName, headerClassName, children, iconAlign, iconClosed, iconOpen, open, onClose, onOpen, ...aria }: CollapsableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Collapsable: ({ ref, disabled, className, bodyClassName, headerClassName, children, iconAlign, iconClosed, iconOpen, open, onClose, onOpen, ...aria }: CollapsableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/index.d.ts

@@ -1,5 +1,5 @@
 export { ActionLabel } from "./actionLabel/ActionLabel";
-export { AnimationBars, AnimationIndicator, AnimationSpinner, Skeleton, } from "./animations/Animations";
+export { AnimationBars, AnimationIndicator, AnimationSpinner, Skeleton, Loading, } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
 export { AvatarGroup } from "./avatar/AvatarGroup";
 export { Badge, getBadgeProps } from "./badge/Badge";

package/dist/types/components/menu/types.d.ts

@@ -1,4 +1,4 @@
-import { type ElementType } from "react";
+import { type ElementType, type MouseEvent } from "react";
 import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorType, type CssProp, type IconProps, type TestProps } from "../../types";
 export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps {
     /**
@@ -40,7 +40,7 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps
     /**
      * click handler
      */
-    onClick?: () => CallbackReturn;
+    onClick?: (e: MouseEvent) => CallbackReturn;
 }
 export interface MenuRootProps extends CssProp {
     label?: never;

package/dist/types/components/tabpanel/Tab.d.ts

@@ -37,5 +37,9 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
      * close handler
      */
     onClose?: () => CallbackReturn;
+    /**
+     * click handler
+     */
+    onClick?: (id: string) => CallbackReturn;
 }
 export declare const Tab: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, as, id, className, label, icon, iconBg, iconColor, rtlFlip, badge, disabled, onClose, active, minimal, onClick, tabFlex, color, actions, activeClassName, ...aria }: TabProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/aside/Aside.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import { type ReactNode } from "react";
 import { type ChildrenProp, type CollapseProps, type Elements, type IconProps, type TestProps } from "../../types";
 export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, TestProps {
     /**
      * page title
      */
-    title?: string;
+    title?: ReactNode;
     /**
      * align inline-end
      */

package/dist/types/core/section/Section.d.ts

@@ -1,7 +1,7 @@
-import { type ChildrenProp } from "../../types";
+import { type ChildrenProp, type CssProp, type RefProp } from "../../types";
 /**
  * The section component provides a structured layout used within a page to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
  */
-export declare const Section: ({ children, dir, }: ChildrenProp & {
+export declare const Section: ({ children, className, dir, ref, }: ChildrenProp & CssProp & RefProp<HTMLDivElement> & {
     dir?: "ltr" | "rtl";
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/index.d.ts

@@ -62,10 +62,10 @@ export type AriaProps = React.AriaAttributes;
 export interface RefProp<T = HTMLElement> {
     ref?: Ref<T>;
 }
-export type CallbackReturn<T = unknown> = void | T | Promise<T | void>;
+export type CallbackReturn<T = unknown> = undefined | T | Promise<T | undefined>;
 export type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 export type PropsOf<AsTag extends ReactTag> = AsTag extends React.ElementType ? Omit<React.ComponentProps<AsTag>, "ref"> : never;
-export type PolymorphicProps<AsTag extends ReactTag> = Omit<PropsOf<AsTag>, "children" | "as" | "className"> & {
+export type PolymorphicProps<AsTag extends ReactTag> = Omit<PropsOf<AsTag>, "children" | "as" | "className" | "onClick"> & {
     /**
      * The component used for the root node.
      * Either a string to use a HTML element or a component.

package/dist/types/typography/Abbr.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { type ChildProp, type ColorType } from "../types";
-export interface AbbrProps extends ChildProp<string> {
+import { type ChildProp, type ColorType, type CssProp } from "../types";
+export interface AbbrProps extends ChildProp<string>, CssProp {
     /**
      * content to copy using the tooltip copy action
      */
@@ -19,4 +19,4 @@ export interface AbbrProps extends ChildProp<string> {
 /**
  * Typography abbr component to wrap text parts in `abbr` with tooltip
  */
-export declare const Abbr: ({ children, abbr, renderer, copyContent, }: AbbrProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Abbr: ({ children, abbr, className, renderer, copyContent, }: AbbrProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Link.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type MouseEventHandler } from "react";
 import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type PolymorphicProps, type RefProp, type SizeType } from "../types";
 export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
     /**
@@ -17,6 +17,7 @@ export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
      * font family
      */
     family?: "sans" | "serif" | "mono";
+    onClick?: MouseEventHandler;
 }
 /**
  * Typography link component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.3",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.0",
+    "@react-fabric/utilities": "^1.0.0-beta.1",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
@@ -56,5 +56,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "83fa79064b1d57e71149005432192d506810bbda"
+  "gitHead": "2ce2a968f48d6ffc338f5da3a0cf67232d0c6864"
 }

package/src/components/badge/Badge.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { isNumber, isObject, mergeRefs } from "@react-fabric/utilities";
+import { isNil, isNumber, isObject, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { cloneElement, useMemo } from "react";
 import {
@@ -101,10 +101,12 @@ export const Badge = ({
   ...rest
 }: BadgeProps) => {
   const label = useMemo(() => {
-    if (isNumber(value) && max && value > max) {
-      return `${max}+`;
+    if (!isNil(value)) {
+      if (isNumber(value) && max && value > max) {
+        return `${max}+`;
+      }
+      return `${value}`;
     }
-    return `${value}`;
   }, [value, max]);
 
   const innerRef = useMemo(
@@ -127,22 +129,24 @@ export const Badge = ({
           ...rest,
           ref: innerRef,
         })}
-      <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",
-        )}
-      >
-        {label && <span className="p-1">{label}</span>}
-        {icon && (
-          <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
-        )}
-      </div>
+      {(!!ping || label) && (
+        <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",
+          )}
+        >
+          {label && <span className="p-1">{label}</span>}
+          {icon && (
+            <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
+          )}
+        </div>
+      )}
     </div>
   );
 };

package/src/components/button/Button.tsx

@@ -136,6 +136,8 @@ export interface BaseProps
    */
   hotKey?: string;
 
+  stopPropagation?: boolean;
+
   onMouseOut?: MouseEventHandler;
   onMouseOver?: MouseEventHandler;
   onMouseMove?: MouseEventHandler;
@@ -175,6 +177,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   spinOnHover,
   onClick,
   actionMessage,
+  stopPropagation,
   type = "button",
   hotKey,
   showActionDone,
@@ -191,7 +194,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   const clickHandler = useCallback(
     (e: React.MouseEvent) => {
       setBusy(true);
-      // e.stopPropagation();
+      stopPropagation && e.stopPropagation();
       const ret = onClick?.(e);
       void Promise.resolve(ret).then((b) => {
         setBusy(false);
@@ -200,7 +203,7 @@ export const Button = <Tag extends React.ElementType = "button">({
         }
       });
     },
-    [onClick, disabled, actionMessage, showActionDoneEvent],
+    [onClick, disabled, actionMessage, showActionDoneEvent, stopPropagation],
   );
 
   /** ***************** reset done state on timeout *******************/

package/src/components/callout/Callout.tsx

@@ -26,6 +26,7 @@ import {
   type AriaProps,
   type ChildrenProp,
   type ColorType,
+  type CssProp,
   type PaletteType,
   type TestProps,
 } from "../../types";
@@ -33,7 +34,11 @@ import { CoreIcons } from "../../types/icons";
 import { getBgClass, getBorderClass, getColorClass } from "../../utils";
 import { Icon } from "../icon/Icon";
 
-export interface CalloutProps extends AriaProps, ChildrenProp, TestProps {
+export interface CalloutProps
+  extends AriaProps,
+    ChildrenProp,
+    CssProp,
+    TestProps {
   /**
    * callout color
    */
@@ -69,11 +74,13 @@ export const Callout = ({
   icon,
   border,
   onClose,
+  className,
   ...aria
 }: CalloutProps) => {
   return (
     <fieldset
       className={classNames(
+        className,
         "block rounded-capped border max-w-full relative overflow-hidden mb-4",
         getBgClass(color + "-50"),
         getColorClass(color + "-700"),

package/src/components/collapsable/Collapsable.tsx

@@ -78,6 +78,10 @@ export interface CollapsableProps
    * open state
    */
   open?: boolean;
+  /**
+   * disable collapsable
+   */
+  disabled?: boolean;
   /**
    * open handler
    */
@@ -90,6 +94,7 @@ export interface CollapsableProps
 
 export const Collapsable = ({
   ref,
+  disabled,
   className,
   bodyClassName,
   headerClassName,
@@ -135,7 +140,7 @@ export const Collapsable = ({
           headerClassName,
           iconAlign === "end" ? "flex-row-reverse" : "flex-row",
         )}
-        onClick={() => setOpenState(!openState)}
+        onClick={() => !disabled && setOpenState(!openState)}
       >
         <Icon size="1.125em" icon={openState ? iconOpen : iconClosed} rtlFlip />
         <div className="flex-1 px-2">{head}</div>

package/src/components/dropdown/Dropdown.tsx

@@ -257,7 +257,8 @@ const DropdownElement = ({
                 className={classNames(
                   classes.dropdownBody,
                   dropdownClassName,
-                  !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100",
+                  !plainDropdown &&
+                    "shadow-lg shadow-base bg-base ring-1 ring-tint-100",
                   "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]",
                 )}
                 onMouseUpCapture={tryClosing}

package/src/components/dropdown/DropdownTool.tsx

@@ -23,6 +23,7 @@
 
 import classNames from "classnames";
 import { type ChildProp, type CssProp } from "../../types";
+import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
 import { Dropdown, type DropdownProps } from "./Dropdown";
 
@@ -42,7 +43,7 @@ export const DropdownTool = ({
   return (
     <Dropdown {...props}>
       <Icon
-        icon="mdi mdi-menu-down"
+        icon={CoreIcons.caretDown}
         className={classNames(
           className,
           "outline bg-base flex-content pointer-events-auto cursor-pointer",

package/src/components/index.ts

@@ -27,6 +27,7 @@ export {
   AnimationIndicator,
   AnimationSpinner,
   Skeleton,
+  Loading,
 } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
 export { AvatarGroup } from "./avatar/AvatarGroup";

package/src/components/menu/Menu.tsx

@@ -162,7 +162,7 @@ const MenuComponent = ({
     (e: React.MouseEvent) => {
       const el = e.target as HTMLElement;
       if (el.dataset.id) {
-        onClick?.(el.dataset.id);
+        onClick?.(el.dataset.id as AnyObject);
       }
     },
     [onClick],

package/src/components/menu/types.ts

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { type ElementType } from "react";
+import { type ElementType, type MouseEvent } from "react";
 import {
   type AriaProps,
   type BadgeType,
@@ -77,7 +77,7 @@ export interface MenuItemProps
   /**
    * click handler
    */
-  onClick?: () => CallbackReturn;
+  onClick?: (e: MouseEvent) => CallbackReturn;
 }
 
 export interface MenuRootProps extends CssProp {

package/src/components/tabpanel/Tab.tsx

@@ -83,6 +83,10 @@ export interface TabProps
    * close handler
    */
   onClose?: () => CallbackReturn;
+  /**
+   * click handler
+   */
+  onClick?: (id: string) => CallbackReturn;
 }
 
 export const Tab = <Tag extends React.ElementType = "button">({

package/src/core/aside/Aside.tsx

@@ -22,7 +22,14 @@
  */
 
 import classNames from "classnames";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
 import { useLayoutEffectDebugger } from "../../hooks/useEffectDebugger";
@@ -47,7 +54,7 @@ export interface AsideProps
   /**
    * page title
    */
-  title?: string;
+  title?: ReactNode;
   /**
    * align inline-end
    */

package/src/core/section/Section.tsx

@@ -22,7 +22,7 @@
  */
 
 import classNames from "classnames";
-import { type ChildrenProp } from "../../types";
+import { type ChildrenProp, type CssProp, type RefProp } from "../../types";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
 import classes from "./Section.module.css";
 
@@ -31,14 +31,20 @@ import classes from "./Section.module.css";
  */
 export const Section = ({
   children,
+  className,
   dir,
-}: ChildrenProp & { dir?: "ltr" | "rtl" }) => {
+  ref,
+}: ChildrenProp &
+  CssProp &
+  RefProp<HTMLDivElement> & { dir?: "ltr" | "rtl" }) => {
   return (
     <div
       data-ref="section"
       dir={dir}
+      ref={ref}
       className={classNames(
         classes.section,
+        className,
         "grid area-content overflow-hidden",
       )}
     >

package/src/overlays/alert/Alert.tsx

@@ -181,7 +181,6 @@ export const Alert = ({
 
             <Title className="font-medium area-[title]">{title}</Title>
             <p className="area-[message] py-4">{message}</p>
-            <div className="area-[message]">{message}</div>
             <div className="flex gap-1 justify-center flex-nowrap pt-2 area-[actions]">
               <div
                 className="contents"

package/src/types/index.ts

@@ -145,7 +145,10 @@ export interface RefProp<T = HTMLElement> {
 /* *********** */
 
 // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-export type CallbackReturn<T = unknown> = void | T | Promise<T | void>;
+export type CallbackReturn<T = unknown> =
+  | undefined
+  | T
+  | Promise<T | undefined>;
 
 export type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 
@@ -155,7 +158,7 @@ export type PropsOf<AsTag extends ReactTag> = AsTag extends React.ElementType
 
 export type PolymorphicProps<AsTag extends ReactTag> = Omit<
   PropsOf<AsTag>,
-  "children" | "as" | "className"
+  "children" | "as" | "className" | "onClick"
 > & {
   /**
    * The component used for the root node.

package/src/typography/Abbr.tsx

@@ -26,7 +26,7 @@ import classNames from "classnames";
 import { Fragment, useCallback, useMemo } from "react";
 import { useMemoDebugger } from "../hooks/useEffectDebugger";
 import { Tooltip, getTooltipProps } from "../overlays/tooltip/Tooltip";
-import { type ChildProp, type ColorType } from "../types";
+import { type ChildProp, type ColorType, type CssProp } from "../types";
 import { getColor, getColorClass } from "../utils";
 import classes from "./Typography.module.css";
 
@@ -64,7 +64,7 @@ const AbbrText = ({ color, children, tooltip, content }: AbbrTextProps) => {
   );
 };
 
-export interface AbbrProps extends ChildProp<string> {
+export interface AbbrProps extends ChildProp<string>, CssProp {
   /**
    * content to copy using the tooltip copy action
    */
@@ -87,6 +87,7 @@ export interface AbbrProps extends ChildProp<string> {
 export const Abbr = ({
   children,
   abbr,
+  className,
   renderer,
   copyContent = "text",
 }: AbbrProps) => {
@@ -148,5 +149,5 @@ export const Abbr = ({
   );
 
   /** ***************** component *******************/
-  return <span>{inner}</span>;
+  return <span className={className}>{inner}</span>;
 };

package/src/typography/Link.tsx

@@ -22,6 +22,7 @@
  */
 
 import classNames from "classnames";
+import { type MouseEventHandler } from "react";
 import { useMemoDebugger } from "../hooks/useEffectDebugger";
 import {
   type AriaProps,
@@ -52,6 +53,8 @@ export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
    * font family
    */
   family?: "sans" | "serif" | "mono";
+
+  onClick?: MouseEventHandler;
 }
 
 /**