@react-fabric/core 1.0.0-beta.1 → 1.0.0-beta.4

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

@@ -1,9 +1,10 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
 import classNames from 'classnames';
-import { useMemo, useCallback, useLayoutEffect } from 'react';
+import { useState, useMemo, useCallback, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AnimationIndicator } from '../../components/animations/Animations.js';
 import { Button } from '../../components/button/Button.js';
@@ -28,9 +29,15 @@ var Alert = function Alert(_ref) {
     onClose = _ref.onClose,
     type = _ref.type,
     okLabel = _ref.okLabel,
-    cancelLabel = _ref.cancelLabel;
+    cancelLabel = _ref.cancelLabel,
+    placeholder = _ref.placeholder,
+    defaultValue = _ref.defaultValue;
   var _useTranslation = useTranslation("core"),
     t = _useTranslation.t;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var _useFloating = useFloating({
       open: true,
       onOpenChange: function onOpenChange() {
@@ -112,9 +119,24 @@ var Alert = function Alert(_ref) {
           }), /*#__PURE__*/jsx("p", {
             className: "area-[message] py-4",
             children: message
-          }), /*#__PURE__*/jsx("div", {
-            className: "area-[message]",
-            children: message
+          }), type === "prompt" && /*#__PURE__*/jsx("input", {
+            value: value,
+            placeholder: placeholder,
+            className: classNames("border rounded focus:border-primary-500"),
+            ref: function ref(e) {
+              return e != null && setTimeout(function () {
+                return e.focus();
+              }, 100);
+            },
+            onBlur: function onBlur(e) {
+              return e.target.focus();
+            },
+            onChange: function onChange(e) {
+              return setValue(e.target.value);
+            },
+            onKeyDown: function onKeyDown(e) {
+              return e.key === "Enter" && handleClose(value);
+            }
           }), /*#__PURE__*/jsxs("div", {
             className: "flex gap-1 justify-center flex-nowrap pt-2 area-[actions]",
             children: [/*#__PURE__*/jsx("div", {

package/dist/esm/types/icons.js

@@ -52,6 +52,8 @@ var CoreIcons;
   _CoreIcons.caretUp = "M7,15L12,10L17,15H7Z";
   _CoreIcons.expand = "M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h3v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3h3c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
   _CoreIcons.collapse = "M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+  _CoreIcons.expandActive = "M17,13H13V17H11V13H7V11H11V7H13V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
+  _CoreIcons.collapseActive = "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
   _CoreIcons.expandAll = "M5.293 16.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM18.707 7.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
   _CoreIcons.colapseAll = "M18.707 21.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM5.293 2.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
   _CoreIcons.folderClosed = "M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z";

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/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 ChildrenProp, type CollapseProps, type Elements, type IconProps, type TestProps } from "../../types";
-export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, TestProps {
+import { type ReactNode } from "react";
+import { type ChildrenProp, type CollapseProps, type CssProp, type Elements, type IconProps, type TestProps } from "../../types";
+export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, CssProp, TestProps {
     /**
      * page title
      */
-    title?: string;
+    title?: ReactNode;
     /**
      * align inline-end
      */
@@ -17,6 +17,10 @@ export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, Test
      * header class
      */
     headerClassName?: string;
+    /**
+     * header class
+     */
+    bodyClassName?: string;
     /**
      * show loading indicator
      */
@@ -49,4 +53,4 @@ export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, Test
 /**
  * Side panel
  */
-export declare const Aside: ({ children, title, icon, iconBg, iconColor, rtlFlip, headerClassName, resizeable, flyout, onFlyout, collapsed, collapsable, onCollapse, actions, loading, align, width: wd, minWidth, maxWidth, "data-testid": testId, "data-test-value": testValue, }: AsideProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Aside: ({ children, title, icon, iconBg, iconColor, rtlFlip, className, bodyClassName, headerClassName, resizeable, flyout, onFlyout, collapsed, collapsable, onCollapse, actions, loading, align, width: wd, minWidth, maxWidth, "data-testid": testId, "data-test-value": testValue, }: AsideProps) => import("react/jsx-runtime").JSX.Element;

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/overlays/alert/Alert.d.ts

@@ -29,5 +29,13 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
      * cancel label
      */
     cancelLabel?: string;
+    /**
+     * placeholder for prompt
+     */
+    placeholder?: string;
+    /**
+     * default value for prompt
+     */
+    defaultValue?: string;
 }
-export declare const Alert: ({ title, message, color, icon, rtlFlip, actions, onClose, type, okLabel, cancelLabel, }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ title, message, color, icon, rtlFlip, actions, onClose, type, okLabel, cancelLabel, placeholder, defaultValue, }: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/icons.d.ts

@@ -34,6 +34,8 @@ export declare namespace CoreIcons {
     const caretUp = "M7,15L12,10L17,15H7Z";
     const expand = "M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h3v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3h3c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
     const collapse = "M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+    const expandActive = "M17,13H13V17H11V13H7V11H11V7H13V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
+    const collapseActive = "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
     const expandAll = "M5.293 16.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM18.707 7.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
     const colapseAll = "M18.707 21.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM5.293 2.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
     const folderClosed = "M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z";

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.1",
+  "version": "1.0.0-beta.4",
   "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.1",
+    "@react-fabric/utilities": "^1.0.0-beta.4",
     "@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": "e0712d7ea2c945de876bef813b5d2dcec1218ed7"
+  "gitHead": "47b0aede19252a3a3ef8df75c08a21caabde8100"
 }

package/src/components/animations/Animations.tsx

@@ -104,7 +104,7 @@ export const AnimationIndicator = ({
 };
 
 export const AnimationBars = ({
-  color = "tint-700",
+  color = "tint",
   size = "2rem",
 }: {
   color?: ColorType | string;

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.module.css

@@ -245,7 +245,7 @@
         background-size: 1em 1em;
 
         & :global {
-          animation: progress 750ms linear infinite;
+          animation: bgprogress 750ms linear infinite;
         }
       }
 

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/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 {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
 import { useLayoutEffectDebugger } from "../../hooks/useEffectDebugger";
@@ -31,6 +38,7 @@ import { useResize } from "../../hooks/useResize";
 import {
   type ChildrenProp,
   type CollapseProps,
+  type CssProp,
   type Elements,
   type IconProps,
   type TestProps,
@@ -43,11 +51,12 @@ export interface AsideProps
   extends IconProps,
     ChildrenProp,
     CollapseProps,
+    CssProp,
     TestProps {
   /**
    * page title
    */
-  title?: string;
+  title?: ReactNode;
   /**
    * align inline-end
    */
@@ -60,6 +69,10 @@ export interface AsideProps
    * header class
    */
   headerClassName?: string;
+  /**
+   * header class
+   */
+  bodyClassName?: string;
 
   /**
    * show loading indicator
@@ -102,6 +115,8 @@ export const Aside = ({
   iconBg,
   iconColor,
   rtlFlip,
+  className,
+  bodyClassName,
   headerClassName,
   resizeable,
   flyout,
@@ -182,7 +197,7 @@ export const Aside = ({
 
   return (
     <aside
-      className={classNames(classes.aside, "overflow-hidden grid")}
+      className={classNames(classes.aside, className, "overflow-hidden grid")}
       data-align={align}
       data-flyout={peek}
       data-collapsed={isCollapsed}
@@ -243,7 +258,11 @@ export const Aside = ({
       <section
         ref={elementRef}
         data-ref="asideBody"
-        className={classNames(classes.asideBody, "overflow-hidden grid")}
+        className={classNames(
+          classes.asideBody,
+          bodyClassName,
+          "overflow-hidden grid",
+        )}
         style={isCollapsed ? widthStyles : undefined}
       >
         <ErrorBoundary>{children}</ErrorBoundary>

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",
       )}
     >