@react-fabric/core 1.0.0-beta.35 → 1.0.0-beta.37

package/dist/esm/overlays/flyout/Flyout.js

@@ -11,7 +11,6 @@ import { Icon } from '../../components/icon/Icon.js';
 import { Header } from '../../core/headfoot/HeadFoot.js';
 import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { CoreIcons } from '../../types/icons.js';
-import classes from './Flyout.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "hideMask", "align"];
@@ -105,7 +104,7 @@ var Flyout = function Flyout(_ref) {
         context: context,
         children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
           "data-align": align,
-          className: classNames(classes.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
+          className: classNames("fabric-flyout", "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
           style: {
             width: width,
             minWidth: minWidth
@@ -116,7 +115,7 @@ var Flyout = function Flyout(_ref) {
           children: /*#__PURE__*/jsxs(HotKeyWrapper, {
             children: [/*#__PURE__*/jsxs(Header, {
               flex: true,
-              className: classNames(classes.flyoutHeader, headerClassName),
+              className: classNames("fabric-flyoutHeader", headerClassName),
               children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
                 icon: icon,
                 bg: iconBg,
@@ -128,7 +127,7 @@ var Flyout = function Flyout(_ref) {
                 children: title
               }), actions, /*#__PURE__*/jsx(Icon, {
                 "data-ref": "panelClose",
-                className: classNames(classes.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
+                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
                 icon: CoreIcons.close,
                 onClick: function onClick() {
                   return handleClose(false);
@@ -136,7 +135,7 @@ var Flyout = function Flyout(_ref) {
               })]
             }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
               role: "dialog",
-              className: classNames(classes.flyoutBody, "flex-1 grid overflow-hidden"),
+              className: classNames("fabric-flyoutBody", "flex-1 grid overflow-hidden"),
               tabIndex: 0,
               children: children
             })]

package/dist/esm/overlays/message/Message.js

@@ -4,9 +4,8 @@ import classNames from 'classnames';
 import { useRef, useCallback, useLayoutEffect } from 'react';
 import { Icon } from '../../components/icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { getBgClass, getColorClass } from '../../utils/getColor.js';
+import { getColor } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
-import classes from './Message.module.css';
 
 /*
  * React Fabric
@@ -52,7 +51,11 @@ var Message = function Message(_ref) {
     }, 100);
   }, []);
   return /*#__PURE__*/jsxs("div", {
-    className: classNames(classes.message, color ? getBgClass(color + "-300") : "bg-invert", color ? getColorClass(color + "-900") : "text-invert", "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none"),
+    className: classNames("fabric-message", "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none"),
+    style: {
+      backgroundColor: color ? getColor(color + "-300") : "var(--bg-color-invert)",
+      color: color ? getColor(color + "-900") : "var(--text-color-invert)"
+    },
     ref: elRef,
     children: [icon && /*#__PURE__*/jsx(Icon, {
       icon: icon,

package/dist/esm/overlays/modal/Modal.js

@@ -11,7 +11,6 @@ import { Icon } from '../../components/icon/Icon.js';
 import { Header } from '../../core/headfoot/HeadFoot.js';
 import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { CoreIcons } from '../../types/icons.js';
-import classes from './Modal.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "height", "minHeight", "minWidth"];
@@ -85,7 +84,7 @@ var Modal = function Modal(_ref) {
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
-          className: classNames(classes.modal, "rounded-capped relative overflow-hidden flex flex-col flex-nowrap", "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
+          className: classNames("fabric-modal", "rounded-capped relative overflow-hidden flex flex-col flex-nowrap", "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
           style: {
             width: width,
             height: height,
@@ -97,7 +96,7 @@ var Modal = function Modal(_ref) {
           children: /*#__PURE__*/jsxs(HotKeyWrapper, {
             children: [/*#__PURE__*/jsxs(Header, {
               flex: true,
-              className: classNames(classes.modalHeader, headerClassName),
+              className: classNames("fabric-modalHeader", headerClassName),
               children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
                 icon: icon,
                 bg: iconBg,
@@ -109,7 +108,7 @@ var Modal = function Modal(_ref) {
                 children: title
               }), actions, /*#__PURE__*/jsx(Icon, {
                 "data-ref": "panelClose",
-                className: classNames(classes.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
+                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
                 icon: CoreIcons.close,
                 onClick: function onClick() {
                   return handleClose(false);
@@ -117,7 +116,7 @@ var Modal = function Modal(_ref) {
               })]
             }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
               role: "dialog",
-              className: classNames(classes.modalBody, "flex-1 grid overflow-hidden"),
+              className: classNames("fabric-modalBody", "flex-1 grid overflow-hidden"),
               tabIndex: 0,
               children: children
             })]

package/dist/esm/overlays/toast/Toast.js

@@ -8,9 +8,8 @@ import { Button } from '../../components/button/Button.js';
 import { Icon } from '../../components/icon/Icon.js';
 import { CoreIcons } from '../../types/icons.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { getColorClass, getBorderClass, getBgClass } from '../../utils/getColor.js';
+import { getColor } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
-import classes from './Toast.module.css';
 
 /*
  * React Fabric
@@ -61,22 +60,22 @@ var Toast = function Toast(_ref) {
       case "danger":
         return /*#__PURE__*/jsx(AnimationIndicator, {
           type: "cross",
-          className: getColorClass(color + "-600")
+          color: "danger-600"
         });
       case "success":
         return /*#__PURE__*/jsx(AnimationIndicator, {
           type: "check",
-          className: getColorClass(color + "-600")
+          color: "success-600"
         });
       case "warning":
         return /*#__PURE__*/jsx(AnimationIndicator, {
           type: "exclaim",
-          className: getColorClass(color + "-600")
+          color: "warning-600"
         });
       default:
         return /*#__PURE__*/jsx(AnimationIndicator, {
           type: type === "confirm" ? "question" : "info",
-          className: getColorClass(color + "-600")
+          color: "".concat(color, "-600")
         });
     }
   }, [color, type, icon]);
@@ -94,13 +93,22 @@ var Toast = function Toast(_ref) {
   }, []);
   return /*#__PURE__*/jsxs("div", {
     role: "alert",
-    className: classNames(classes.toast, getBorderClass(color + "-300"), "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none"),
+    className: classNames("fabric-toast", "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none"),
+    style: {
+      borderColor: getColor(color + "-300")
+    },
     ref: elRef,
     children: [/*#__PURE__*/jsx("div", {
-      className: classNames("flex-initial p-2", getBgClass(color + "-100")),
+      className: classNames("flex-initial p-2"),
+      style: {
+        backgroundColor: getColor(color + "-300")
+      },
       children: iconType
     }), /*#__PURE__*/jsxs("div", {
-      className: classNames(getBgClass(color + "-50/50"), "flex flex-col flex-1 flex-nowrap overflow-hidden p-2"),
+      className: classNames("flex flex-col flex-1 flex-nowrap overflow-hidden p-2"),
+      style: {
+        backgroundColor: getColor(color + "-50")
+      },
       children: [/*#__PURE__*/jsxs("div", {
         className: "flex flex-nowrap gap-2 items-start",
         children: [/*#__PURE__*/jsx("div", {

package/dist/esm/overlays/tooltip/Tooltip.js

@@ -10,10 +10,10 @@ import { useRef, useState, useEffect, useMemo, Fragment, cloneElement, isValidEl
 import { Icon } from '../../components/icon/Icon.js';
 import { useIsRtl } from '../../hooks/useIsRtl.js';
 import { CoreIcons } from '../../types/icons.js';
-import classes from './Tooltip.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
 
-var _excluded = ["ref", "children", "color", "content", "open", "copyContent", "disabled", "placement"];
+var _excluded = ["ref", "children", "color", "textColor", "content", "open", "copyContent", "disabled", "placement"];
 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 getTooltipProps = function getTooltipProps(tooltip, innerRef) {
@@ -35,6 +35,7 @@ var Tooltip = function Tooltip(_ref) {
   var ref = _ref.ref,
     children = _ref.children,
     color = _ref.color,
+    textColor = _ref.textColor,
     content = _ref.content,
     open = _ref.open,
     copyContent = _ref.copyContent,
@@ -112,17 +113,28 @@ var Tooltip = function Tooltip(_ref) {
     }, open ? {} : getReferenceProps(rest))), isOpen && content && /*#__PURE__*/jsx(FloatingPortal, {
       children: /*#__PURE__*/jsxs("dfn", _objectSpread(_objectSpread({
         "data-ref": "tooltip",
-        "data-color": color,
-        className: classNames(classes.tooltip, "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-current"),
+        className: classNames("fabric-tooltip z-(--z-tooltip)", "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-muted"),
         ref: refs.setFloating,
-        style: floatingStyles
+        style: _objectSpread({
+          color: textColor ? getColor(textColor) : undefined,
+          backgroundColor: color ? getColor(color) : undefined
+        }, floatingStyles)
       }, getFloatingProps()), {}, {
         children: [/*#__PURE__*/jsx("span", {
-          className: classNames("font-medium text-dimmed flex-1 break-all", isString(content) && "whitespace-pre-wrap mixed-lang"),
+          className: classNames("font-medium flex-1 break-all", !textColor && "contrast", isString(content) && "whitespace-pre-wrap mixed-lang"),
+          style: {
+            color: textColor ? undefined : color ? getColor(color) : "var(--bg-color-muted)"
+          },
           children: content
         }), copyEl, /*#__PURE__*/jsx(FloatingArrow, {
           ref: arrowRef,
-          context: context
+          context: context,
+          strokeWidth: 0.5,
+          className: "fill-muted stroke-dimmed",
+          style: {
+            stroke: color ? getColor(color) : undefined,
+            fill: color ? getColor(color) : undefined
+          }
         })]
       }))
     })]

package/dist/esm/typography/Abbr.js

@@ -8,8 +8,7 @@ import { useCallback, Fragment, useMemo } from 'react';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
 import { Tooltip, getTooltipProps } from '../overlays/tooltip/Tooltip.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { getColorClass, getColor } from '../utils/getColor.js';
-import classes from './Typography.module.css';
+import { getColor } from '../utils/getColor.js';
 
 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; }
@@ -28,7 +27,7 @@ var AbbrText = function AbbrText(_ref) {
   }, [tooltip, content]);
   return /*#__PURE__*/jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {
     children: /*#__PURE__*/jsx("abbr", {
-      className: classNames(classes.abbr, "whitespace-nowrap", color && getColorClass(color)),
+      className: classNames("fabric-abbr", "whitespace-nowrap"),
       style: color ? {
         "--abbr-color": getColor(color)
       } : undefined,

package/dist/esm/typography/Anchor.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
 import 'react';
 import { jsx } from 'react/jsx-runtime';
-import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
+import { getColor } from '../utils/getColor.js';
 import '@react-fabric/utilities';
 import { TextSizeMap } from './types.js';
 
@@ -45,7 +45,7 @@ var Anchor = function Anchor(_ref) {
   }, [bg, color, size, family], "Link styles");
   var E = as !== null && as !== void 0 ? as : "a";
   return /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({
-    className: classNames("link", className, family && "font-".concat(family), bg && getBgClass(bg), color && getColorClass(color)),
+    className: classNames("link", className, family && "font-".concat(family)),
     style: styles,
     ref: ref
   }, aria), {}, {

package/dist/esm/typography/Mark.js

@@ -7,8 +7,7 @@ import classNames from 'classnames';
 import { useCallback, Fragment } from 'react';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { getBgClass, getColor } from '../utils/getColor.js';
-import classes from './Typography.module.css';
+import { getColor } from '../utils/getColor.js';
 
 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; }
@@ -16,7 +15,7 @@ var MarkText = function MarkText(_ref) {
   var color = _ref.color,
     children = _ref.children;
   return /*#__PURE__*/jsx("mark", {
-    className: classNames(classes.mark, "whitespace-nowrap", color && getBgClass(color)),
+    className: classNames("fabric-mark", "whitespace-nowrap"),
     style: color ? {
       "--mark-color": getColor(color)
     } : undefined,

package/dist/esm/typography/Text.js

@@ -11,8 +11,7 @@ import { useLayoutEffectDebugger, useMemoDebugger } from '../hooks/useEffectDebu
 import { usePropToggle } from '../hooks/usePropToggle.js';
 import { calculateTextHeight } from '../utils/calculateDimensions.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
-import classes from './Typography.module.css';
+import { getColor } from '../utils/getColor.js';
 import { TextSizeMap } from './types.js';
 
 var _excluded = ["children", "className", "inline", "bg", "color", "family", "size", "clamp", "align"];
@@ -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, "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

@@ -6,10 +6,9 @@ import classNames from 'classnames';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
 import 'react';
 import { jsx } from 'react/jsx-runtime';
-import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
+import { getColor } from '../utils/getColor.js';
 import '@react-fabric/utilities';
 import { TitleSizeMap } from './types.js';
-import classes from './Typography.module.css';
 
 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; }
@@ -49,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, 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/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/animations/Animations.d.ts

@@ -4,19 +4,19 @@ 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;

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/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
      */

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/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/chip/Chip.d.ts

@@ -1,5 +1,5 @@
 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
@@ -8,7 +8,7 @@ export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, Chi
     /**
      * chip color (CSS color / tailwind color)
      */
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     /**
      * chip styling
      */

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/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/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,9 +1,9 @@
-import { type ChildProp, type AriaProps, type ColorType, type CssProp, type TestProps } from "../../types";
+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
      */

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,5 +1,5 @@
 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, type TooltipProp } from "../../types";
+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,7 +12,7 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
     /**
      * tab color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * tab badge
      */

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/theme/ThemeProvider.d.ts

@@ -8,9 +8,9 @@ export interface ThemeProps {
      * branding css className
      *
      * .branding {
-     *  --primary: #color;
-     *  --accent: #color;
-     *  --tint: #color;
+     *  --color-primary: #color;
+     *  --color-accent: #color;
+     *  --color-tint: #color;
      * }
      */
     branding?: string;