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

package/dist/esm/typography/Text.js

@@ -10,10 +10,9 @@ import { useTranslation } from 'react-i18next';
 import { useLayoutEffectDebugger, useMemoDebugger } from '../hooks/useEffectDebugger.js';
 import { usePropToggle } from '../hooks/usePropToggle.js';
 import { calculateTextHeight } from '../utils/calculateDimensions.js';
-import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
-import classes from './Typography.module.css';
-import { TextSizeMap } from './types.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getColor } from '../utils/getColor.js';
+import { TextSizeMap } from './types.js';
 
 var _excluded = ["children", "className", "inline", "bg", "color", "family", "size", "clamp", "align"];
 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; }
@@ -98,13 +97,13 @@ var Text = function Text(_ref) {
         "--text-clamp": showMore ? "unset" : clamp !== null && clamp !== void 0 ? clamp : "unset"
       },
       children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-        className: classNames(classes.text, "text-reset mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), bg && getBgClass(bg), color && getColorClass(color), clamp && "line-clamp-1"),
+        className: classNames("fabric-text", "mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), clamp && "line-clamp-1"),
         style: styles
       }, aria), {}, {
         children: children
       }))
     }), clipped && /*#__PURE__*/jsx("div", {
-      className: classes.moreLink,
+      className: "fabric-moreLink",
       children: /*#__PURE__*/jsxs("span", {
         role: "link",
         tabIndex: 0,

package/dist/esm/typography/Title.js

@@ -4,11 +4,11 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
-import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import { getColor } from '../utils/getColor.js';
 import '@react-fabric/utilities';
 import { TitleSizeMap } from './types.js';
-import classes from './Typography.module.css';
-import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "as", "bg", "color", "size", "align", "family"];
 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; }
@@ -48,7 +48,7 @@ var Title = function Title(_ref) {
   }, [bg, color, size, align], "Title styles");
   var E = as !== null && as !== void 0 ? as : "p";
   return /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({
-    className: classNames(classes.title, "px-[2px] py-1 truncate whitespace-pre-wrap", className, family && "font-".concat(family), !as && "text-lg", bg && getBgClass(bg), color && getColorClass(color)),
+    className: classNames("fabric-title", className, family && "font-".concat(family), !as && "text-lg"),
     style: styles
   }, aria), {}, {
     children: children

package/dist/esm/utils/cloneElement.js

@@ -0,0 +1,44 @@
+'use client';
+
+import { Children, isValidElement } from 'react';
+import { Fragment } from 'react/jsx-runtime';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var cloneChildren = function cloneChildren(children, callback) {
+  var _Children$map;
+  return (_Children$map = Children.map(children, function (c) {
+    if ( /*#__PURE__*/isValidElement(c)) {
+      if (c.type === Fragment) {
+        var _c$props;
+        // just compare to `Fragment`
+        return cloneChildren((_c$props = c.props) === null || _c$props === void 0 ? void 0 : _c$props.children, callback);
+      }
+      return c;
+    }
+    return c;
+  })) === null || _Children$map === void 0 ? void 0 : _Children$map.flat().filter(Boolean).map(callback);
+};
+
+export { cloneChildren };

package/dist/esm/utils/getColor.js

@@ -29,21 +29,7 @@ var getColor = function getColor(color) {
   if (color && isColor(color)) {
     return color;
   }
-};
-var getBgClass = function getBgClass(bg) {
-  if (bg && !isColor(bg)) {
-    return "bg-".concat(bg);
-  }
-};
-var getColorClass = function getColorClass(color) {
-  if (color && !isColor(color)) {
-    return "text-".concat(color);
-  }
-};
-var getBorderClass = function getBorderClass(color) {
-  if (color && !isColor(color)) {
-    return "border-".concat(color);
-  }
+  return "var(--color-".concat(color, ")");
 };
 
-export { getBgClass, getBorderClass, getColor, getColorClass };
+export { getColor };

package/dist/types/components/actionLabel/ActionLabel.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
-import { type AriaProps, type ChildProp, type CssProp } from "../../types";
-export interface ActionLabelProps extends AriaProps, CssProp, ChildProp {
+import { type AriaProps, type ChildProp, type CssProp, type TestProps } from "../../types";
+export interface ActionLabelProps extends AriaProps, CssProp, ChildProp, TestProps {
     /**
      * action buttons aligment
      */

package/dist/types/components/animations/Animations.d.ts

@@ -4,20 +4,20 @@ export interface AnimationProps extends CssProp, AriaProps {
     /**
      * icon color
      */
-    color?: ColorType | PaletteType;
+    color?: ColorType | PaletteType | string;
     /**
      * icon mark color
      */
-    strokeColor?: ColorType | PaletteType;
+    strokeColor?: ColorType | PaletteType | string;
 }
 export declare const AnimationIndicator: ({ className, color, strokeColor, type, ...aria }: AnimationProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AnimationBars: ({ color, size, }: {
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     size?: number | string;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const AnimationSpinner: ({ color, size, }: {
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     size?: number | string;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
-export declare const Skeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const Skeleton: ({ className, ...rest }: CssProp) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type AriaProps, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
+import { type PaletteType, type AriaProps, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
 export interface AvatarProps extends CssProp, AriaProps, TestProps, RefProp {
     /**
      * avatar name for generated fallback
@@ -20,11 +20,11 @@ export interface AvatarProps extends CssProp, AriaProps, TestProps, RefProp {
     /**
      * background color (CSS color / tailwind color)
      */
-    bg?: ColorType | string;
+    bg?: ColorType | PaletteType | string;
     /**
      * icon color (CSS color / tailwind color)
      */
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     /**
      * icon size
      */

package/dist/types/components/badge/Badge.d.ts

@@ -4,6 +4,10 @@ export interface BadgeProps extends CssProp, RefProp, IconProps, Partial<ChildPr
      * make wrapper a block element
      */
     block?: boolean;
+    /**
+     * inline badge
+     */
+    inline?: boolean;
     /**
      * badge value
      */
@@ -22,4 +26,4 @@ export interface BadgeProps extends CssProp, RefProp, IconProps, Partial<ChildPr
     placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top" | "bottom" | "start" | "end";
 }
 export declare const getBadgeProps: (badge?: string | number | BadgeType) => AnyObject;
-export declare const Badge: ({ ref, className, value, max, ping, block, placement, children, forButton, icon, iconBg, iconColor, rtlFlip, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ ref, className, value, max, ping, block, inline, placement, children, forButton, icon, iconBg, iconColor, rtlFlip, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts

@@ -1,6 +1,6 @@
 import { type AriaProps, type ChildrenProp, type CssProp } from "../../types";
-import { Link } from "../../typography/Link";
-export interface BreadcrumbProps extends CssProp, AriaProps, ChildrenProp<typeof Link> {
+import { Anchor } from "../../typography/Anchor";
+export interface BreadcrumbProps extends CssProp, AriaProps, ChildrenProp<typeof Anchor> {
     /**
      * breadcrumb styling
      */

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

@@ -1,5 +1,5 @@
 import { type MouseEventHandler, type WheelEventHandler } from "react";
-import { type AriaProps, type BadgeType, type CallbackReturn, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
+import { type ColorState, type AriaProps, type BadgeType, type CallbackReturn, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
 export interface BaseProps extends CssProp, AriaProps, IconProps, RefProp, TestProps {
     /**
      * primary icon alignment
@@ -16,7 +16,7 @@ export interface BaseProps extends CssProp, AriaProps, IconProps, RefProp, TestP
     /**
      * button color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * button type
      */
@@ -24,7 +24,7 @@ export interface BaseProps extends CssProp, AriaProps, IconProps, RefProp, TestP
     /**
      * button styling
      */
-    variant?: "outline" | "solid" | "link";
+    variant?: "outline" | "soft" | "solid" | "link";
     /**
      * active state with click disabled
      */
@@ -82,14 +82,16 @@ export interface BaseProps extends CssProp, AriaProps, IconProps, RefProp, TestP
     onMouseLeave?: MouseEventHandler;
     onWheel?: WheelEventHandler;
 }
-export type ButtonProps = {
+type ButtonTypeProps = {
     children: string | React.ReactElement;
     "aria-label"?: string;
 } | {
     children?: never;
     "aria-label": string;
 };
+export type ButtonProps<Tag extends React.ElementType = "button"> = BaseProps & ButtonTypeProps & PolymorphicProps<Tag>;
 /**
  * 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, stopPropagation, 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 }: ButtonProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
+import { type AriaProps, type ChildrenProp, type ColorState, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
 import { type Button } from "./Button";
 export interface ButtonGroupProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDivElement>, ChildrenProp<React.ReactElement<typeof Button>> {
     /**
@@ -17,7 +17,7 @@ export interface ButtonGroupProps extends CssProp, AriaProps, TestProps, RefProp
     /**
      * button color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * full rounded edges
      */

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { type Placement } from "@floating-ui/react";
 import { type CallbackReturn, type PolymorphicProps, type RefProp } from "../../types";
 import { type BaseProps, type ButtonProps } from "./Button";
 interface ExtendedProps extends Omit<BaseProps, "onClick">, RefProp {
@@ -14,6 +15,10 @@ interface ExtendedProps extends Omit<BaseProps, "onClick">, RefProp {
      * ok label
      */
     cancelLabel?: string;
+    /**
+     * dropdown placement
+     */
+    placement?: Placement;
     /**
      * click handler, return Promise to autoset loading state
      */
@@ -23,5 +28,5 @@ export type ConfirmButtonProps = ExtendedProps & ButtonProps;
 /**
  * Button with confirmation dropdown
  */
-export declare const ConfirmButton: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, message, color, okLabel, cancelLabel, onClick, loading, actionMessage, showActionDone, showActionDoneEvent, ...props }: ConfirmButtonProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const ConfirmButton: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, message, color, okLabel, cancelLabel, onClick, loading, placement, actionMessage, showActionDone, showActionDoneEvent, ...props }: ConfirmButtonProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,9 @@
-import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
+import { type AriaProps, type ChildrenProp, type ColorState, type CssProp, type TestProps } from "../../types";
 export interface CalloutProps extends AriaProps, ChildrenProp, CssProp, TestProps {
     /**
      * callout color
      */
-    color?: ColorType | PaletteType;
+    color?: ColorState;
     /**
      * legend title
      */

package/dist/types/components/card/Card.d.ts

@@ -1,8 +1,8 @@
 import { type MouseEventHandler } from "react";
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
-import { type AriaProps, type ChildrenProp, type CssProp, type TestProps } from "../../types";
-export interface CardProps extends CssProp, AriaProps, TestProps, ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
+import { type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
+export interface CardProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDivElement>, ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
     /**
      * apply flex fill styling
      */
@@ -36,4 +36,4 @@ export interface CardProps extends CssProp, AriaProps, TestProps, ChildrenProp<R
      */
     dragData?: KeyValue;
 }
-export declare const Card: ({ children, className, bodyClassName, selected, selectedRibbon, onClick, flex, draggable, dragKey, dragData, ...aria }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, className, bodyClassName, selected, selectedRibbon, onClick, flex, draggable, dragKey, dragData, ref, ...aria }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/chip/Chip.d.ts

@@ -1,14 +1,14 @@
 import { type ReactElement } from "react";
-import { type AriaProps, type ChildProp, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
+import { type AriaProps, type ChildProp, type ColorType, type CssProp, type IconProps, type PaletteType, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
 export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, ChildProp<string | ReactElement>, RefProp<HTMLDivElement> {
     /**
      * chip size
      */
-    size?: SizeType;
+    size?: SizeType | number | string;
     /**
      * chip color (CSS color / tailwind color)
      */
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     /**
      * chip styling
      */

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

@@ -18,6 +18,10 @@ export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp
      * header button className
      */
     headerClassName?: string;
+    /**
+     * Header position sticky
+     */
+    stickyHeader?: boolean;
     /**
      * open state icon
      */
@@ -43,5 +47,5 @@ export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp
      */
     onClose?: () => void;
 }
-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 declare const Collapsable: ({ ref, disabled, className, bodyClassName, headerClassName, children, iconAlign, stickyHeader, iconClosed, iconOpen, open, onClose, onOpen, ...aria }: CollapsableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import { type CssProp, type ChildProp, type ColorType, type PaletteType } from "../../types";
+import { type ChildProp, type ColorType, type CssProp, type PaletteType } from "../../types";
 export interface DividerProps extends CssProp, Partial<ChildProp> {
     /**
      * apply text bg
@@ -8,13 +8,17 @@ export interface DividerProps extends CssProp, Partial<ChildProp> {
      * vertical rule
      */
     vertical?: boolean;
+    /**
+     * divider label classname(s)
+     */
+    labelClassName?: string;
     /**
      * rule color
      */
-    color?: ColorType | PaletteType | "tint";
+    color?: ColorType | PaletteType | string;
     /**
      * text alignment
      */
     align?: "start" | "end" | "center";
 }
-export declare const Divider: ({ children, color, vertical, fill, align, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Divider: ({ children, color, vertical, labelClassName, fill, align, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/dropdown/DropdownTool.d.ts

@@ -1,6 +1,7 @@
 import { type ChildProp, type CssProp } from "../../types";
 import { type DropdownProps } from "./Dropdown";
-export declare const DropdownTool: ({ children, className, groupHover, ...props }: ChildProp & CssProp & Omit<DropdownProps, "children"> & {
+export declare const DropdownTool: ({ children, className, groupHover, icon, ...props }: ChildProp & CssProp & Omit<DropdownProps, "children"> & {
+    icon?: string;
     /**
      * hide until group hovered
      */

package/dist/types/components/empty/EmptyContent.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ChildrenProp, type CssProp, type TestProps } from "../../types";
+import { type ChildrenProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
 export interface EmptyContentProps extends CssProp, TestProps, Partial<ChildrenProp> {
     /**
      * empty title
@@ -17,5 +17,9 @@ export interface EmptyContentProps extends CssProp, TestProps, Partial<ChildrenP
      * empty icon
      */
     icon?: string | React.ReactElement;
+    /**
+     * icon color
+     */
+    iconColor?: ColorType | PaletteType;
 }
-export declare const EmptyContent: ({ children, title, message, icon, className, size, ...test }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmptyContent: ({ children, title, message, icon, className, size, iconColor, ...test }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/icon/Icon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type AriaProps, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
+import { type PaletteType, type AriaProps, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
 export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
     /**
      * svg path / webfont className / 1-4 letter text
@@ -8,11 +8,11 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
     /**
      * background color (CSS color / tailwind color)
      */
-    bg?: ColorType | string;
+    bg?: ColorType | PaletteType | string;
     /**
      * icon color (CSS color / tailwind color)
      */
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     /**
      * flip icon in rtl
      */

package/dist/types/components/media/Media.d.ts

@@ -1,5 +1,5 @@
-import { type AriaProps, type CssProp } from "../../types";
-export interface BaseProps extends CssProp, AriaProps {
+import { type AriaProps, type CssProp, type TestProps } from "../../types";
+export interface BaseProps extends CssProp, TestProps, AriaProps {
     /**
      * media source
      */

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

@@ -3,5 +3,6 @@ import { type ChildrenProp } from "../../types";
 import { type Menu } from "./Menu";
 export interface ContextMenuProps extends ChildrenProp {
     menu: React.ReactElement<typeof Menu>;
+    disabled?: boolean;
 }
-export declare const ContextMenu: ({ children, menu }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: ({ children, menu, disabled }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type PolymorphicProps } from "../../types";
 import { type MenuItemProps } from "./types";
-export declare const MenuItem: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, label, color, className, icon, iconBg, iconColor, appendLabel, rtlFlip, altIcon, id, active, disabled, onClick, badge, hotKey, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, label, color, className, icon, iconBg, iconColor, appendLabel, rtlFlip, altIcon, id, active, disabled, onClick, badge, hotKey, tabIndex, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 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";
+import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorState, type CssProp, type IconProps, type TestProps } from "../../types";
 export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps {
     /**
      * menu id passed via menu.onClick
@@ -16,7 +16,7 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps
     /**
      * menu color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * item active
      */

package/dist/types/components/navigator/Navigator.d.ts

@@ -1,12 +1,12 @@
-import { type AriaProps, type ColorType, type CssProp, type TestProps } from "../../types";
-export interface NavigatorProps extends CssProp, AriaProps, TestProps {
+import { type AriaProps, type ChildProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
+export interface NavigatorProps extends CssProp, AriaProps, TestProps, Partial<ChildProp> {
     /**
      * navigator button color
      */
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     /**
      * navigation handler
      */
     onNavigate: (dir: -1 | 1) => void;
 }
-export declare const Navigator: ({ className, onNavigate, color, ...aria }: NavigatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Navigator: ({ className, onNavigate, color, children, ...aria }: NavigatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/progress/ProgressBar.d.ts

@@ -1,4 +1,4 @@
-import { type ColorType } from "../../types";
+import { type PaletteType, type ColorType } from "../../types";
 export interface ProgressProps {
     /**
      * progress value (0-100)
@@ -11,7 +11,7 @@ export interface ProgressProps {
     /**
      * color
      */
-    color?: ColorType;
+    color?: ColorType | PaletteType;
     /**
      * animate
      */

package/dist/types/components/progress/ProgressCircle.d.ts

@@ -1,4 +1,4 @@
-import { type ColorType } from "../../types";
+import { type PaletteType, type ColorType } from "../../types";
 export interface ProgressProps {
     /**
      * progress value (0-100)
@@ -11,6 +11,6 @@ export interface ProgressProps {
     /**
      * color
      */
-    color?: ColorType;
+    color?: ColorType | PaletteType;
 }
 export declare const ProgressCircle: ({ value, size, color, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
-import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type TestProps } from "../../types";
-export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaProps, TestProps, IconProps {
+import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorState, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type TestProps, type TooltipProp } from "../../types";
+export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaProps, TestProps, IconProps, TooltipProp {
     /**
      * tab id
      */
@@ -12,11 +12,11 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
     /**
      * tab color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * tab badge
      */
-    badge?: BadgeType;
+    badge?: string | number | BadgeType;
     /**
      * disabled
      */
@@ -42,4 +42,4 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
      */
     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;
+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, onClick, tabFlex, color, actions, tooltip, activeClassName, ...aria }: TabProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import { type CallbackReturn, type ChildrenProp } from "../../types";
 import { Tab } from "./Tab";
 export interface TabPanelProps extends ChildrenProp<typeof Tab> {
@@ -29,6 +30,14 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
      * tab list className
      */
     headerClassName?: string;
+    /**
+     * append element
+     */
+    append?: ReactNode;
+    /**
+     * prepend element
+     */
+    prepend?: ReactNode;
     /**
      * change handler
      */
@@ -38,4 +47,4 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
      */
     onBeforeChange?: (nextTab: string, currentTab?: string) => CallbackReturn;
 }
-export declare const TabPanel: ({ children, headerClassName, orientation, activeTab, justify, variant, tabFlex, gap, onBeforeChange, onChange, }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabPanel: ({ children, headerClassName, orientation, activeTab, justify, variant, tabFlex, append, prepend, gap, onBeforeChange, onChange, }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/content/Content.d.ts

@@ -1,9 +1,10 @@
-import { type ChildrenProp, type CssProp, type PositionObject, type RefProp, type SizeObject, type TestProps } from "../../types";
+import { type MouseEvent } from "react";
+import { type ChildrenProp, type CssProp, type RefProp, type ScrollObject, type SizeObject, type TestProps } from "../../types";
 export interface ContentProps extends ChildrenProp, CssProp, RefProp, TestProps {
     /**
      * scroll vevent handler
      */
-    onScroll?: (event: PositionObject) => void;
+    onScroll?: (scroll: ScrollObject, event: MouseEvent<HTMLDivElement>) => void;
     /**
      * scroll vevent handler
      */

package/dist/types/core/headfoot/HeadFoot.d.ts

@@ -1,14 +1,6 @@
-import { type AriaProps, type ChildrenProp, type ColorWithGrays, type CssProp, type TestProps } from "../../types";
+import { type AriaProps, type ChildrenProp, type CssProp, type TestProps } from "../../types";
 interface BaseProps extends CssProp, AriaProps, ChildrenProp, TestProps {
     dir?: "ltr" | "rtl";
-    /**
-     * background color
-     */
-    bg?: ColorWithGrays | string;
-    /**
-     * background color
-     */
-    color?: ColorWithGrays | string;
 }
 type DefaultProps = BaseProps & {
     flex?: false;

package/dist/types/core/responsive/Responsive.d.ts

@@ -39,7 +39,7 @@ export interface ColProps extends AriaProps, CssProp, TestProps, Partial<Childre
     /**
      * column flex
      */
-    flex?: "auto" | "fill" | "full";
+    flex?: "auto" | "fill" | "full" | "initial" | "content";
     /**
      * stretch inner content
      */