@react-fabric/core 1.0.0-beta.9 → 1.0.2

package/dist/esm/components/panel/PanelStack.js

@@ -4,15 +4,40 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useRef, useState, useTransition, useMemo, Children, useEffect, useCallback, cloneElement } from 'react';
+import { useRef, useState, useTransition, useMemo, Children, isValidElement, useEffect, cloneElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["active", "children", "className", "onPanelChange", "onBack"];
+var _excluded = ["children", "className", "onPanelChange", "onBack"];
 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 PanelStack = function PanelStack(_ref) {
-  _ref.active;
-    var children = _ref.children,
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
+/**
+ * A component that manages a stack of panels, allowing navigation between them.
+ * This component allows you to manage a stack of panels where you can navigate between them.
+ * It accepts an `active` prop to control which panel is currently active,
+ * an `onPanelChange` callback that is triggered when the active panel changes,
+ * and an `onBack` callback to handle navigation to the previous panel in the history.
+ * It uses the `Panel` component to render each individual panel within the stack.
+ * The component maintains a history of panels to allow back navigation,
+ * and it updates the active panel based on user interactions.
+ *
+ * @example
+ * ```jsx
+ * <PanelStack
+ *   active="panel1"
+ *   onPanelChange={(panelId) => console.log(`Active panel changed to: ${panelId}`)}
+ *   onBack={(currentPanel, nextPanel) => {
+ *     console.log(`Navigating back from ${currentPanel} to ${nextPanel}`);
+ *     return true; // return false to prevent navigation
+ *   }}
+ * >
+ *   <Panel panelId="panel1" title="Panel 1">Content for Panel 1</Panel>
+ *   <Panel panelId="panel2" title="Panel 2">Content for Panel 2</Panel>
+ *   <Panel panelId="panel3" title="Panel 3">Content for Panel 3</Panel>
+ * </PanelStack>
+ * ```
+ */
+function PanelStack(_ref) {
+  var children = _ref.children,
     className = _ref.className,
     onPanelChange = _ref.onPanelChange,
     onBack = _ref.onBack,
@@ -26,10 +51,17 @@ var PanelStack = function PanelStack(_ref) {
     _useTransition2 = _slicedToArray(_useTransition, 2),
     startTransition = _useTransition2[1];
   var panels = useMemo(function () {
-    return new Map(Children.toArray(children).map(function (child) {
-      var _child$props$panelId;
-      return child.props && [(_child$props$panelId = child.props.panelId) !== null && _child$props$panelId !== void 0 ? _child$props$panelId : "root", child];
-    }));
+    return new Map(
+    // eslint-disable-next-line @eslint-react/no-children-to-array
+    Children.toArray(children)
+    // @ts-expect-error ignore
+    .map(function (child) {
+      if (/*#__PURE__*/isValidElement(child)) {
+        var _childEl$props$panelI;
+        var childEl = child;
+        return [(_childEl$props$panelI = childEl.props.panelId) !== null && _childEl$props$panelI !== void 0 ? _childEl$props$panelI : "root", childEl];
+      }
+    }).filter(Boolean));
   }, [children]);
   useEffect(function () {
     startTransition(function () {
@@ -40,25 +72,23 @@ var PanelStack = function PanelStack(_ref) {
       }));
     });
   }, [onPanelChange, history]);
-  var goBack = useCallback(function () {
+  var goBack = function goBack() {
     var _history$2;
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
     if ((onBack === null || onBack === void 0 ? void 0 : onBack(history[0], (_history$2 = history[1]) !== null && _history$2 !== void 0 ? _history$2 : "root")) !== false) {
       setHistory(history.slice(1));
     }
-  }, [history, onBack]);
+  };
   var currentPanel = useMemo(function () {
     var _panels$get;
     return (_panels$get = panels.get(history[0])) !== null && _panels$get !== void 0 ? _panels$get : panels.values().next().value;
   }, [history, panels]);
-  var checkMenuClick = useCallback(function (e) {
+  var checkMenuClick = function checkMenuClick(e) {
     var _e$target;
     var panelKey = (_e$target = e.target) === null || _e$target === void 0 || (_e$target = _e$target.dataset) === null || _e$target === void 0 ? void 0 : _e$target.panel;
     if (panelKey) {
       if (panelKey === "back") {
         goBack();
       } else if (panelKey === "root") {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
         if ((onBack === null || onBack === void 0 ? void 0 : onBack(history[0], "root")) !== false) {
           setHistory([]);
         }
@@ -70,16 +100,17 @@ var PanelStack = function PanelStack(_ref) {
       return false;
     }
     return true;
-  }, [goBack, history, panels, onBack]);
+  };
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
     role: "none",
     ref: stackRef,
     className: className,
     onClickCapture: checkMenuClick,
     children: currentPanel && /*#__PURE__*/cloneElement(currentPanel, {
+      // @ts-expect-error ignore
       onBack: history.length > 0 ? goBack : undefined
     })
   }));
-};
+}
 
 export { PanelStack };

package/dist/esm/components/pillbox/Pillbox.js

@@ -0,0 +1,118 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { cn } from '@react-fabric/utilities';
+import { useRef, useState, useMemo, useLayoutEffect } from 'react';
+import { useControlledValue } from '../../hooks/useControlledValue.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
+import { getIconProps } from '../../utils/getIconProps.js';
+import { StyleEffect } from '../effect/StyleEffect.js';
+import { Icon } from '../icon/Icon.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), true).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; }
+/**
+ * A pill-based selector that renders a horizontal group of clickable options
+ * with an animated highlight tracking the selected pill.
+ */
+function Pillbox(_ref) {
+  var _currentOption$bg, _currentOption$color;
+  var options = _ref.options,
+    className = _ref.className,
+    block = _ref.block,
+    toggle = _ref.toggle,
+    value = _ref.value,
+    autoHide = _ref.autoHide,
+    onChange = _ref.onChange;
+  var pillboxRef = useRef(null);
+  var _useState = useState(function () {
+      return {
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    hilightStyle = _useState2[0],
+    setHilightStyle = _useState2[1];
+  var _useControlledValue = useControlledValue(value, null),
+    currentValue = _useControlledValue.currentValue,
+    updateValue = _useControlledValue.updateValue;
+
+  // Allow toggle behavior only when exactly two options exist and toggle is enabled
+  var canToggle = useMemo(function () {
+    return options.length === 2 && toggle;
+  }, [options, toggle]);
+  var currentIndex = useMemo(function () {
+    // Use Math.max to default to 0 when no option matches (prevents -1 index)
+    return Math.max(0, options.findIndex(function (o) {
+      return o.value === currentValue;
+    }));
+  }, [options, currentValue]);
+  var currentOption = options[currentIndex];
+
+  // Update highlight position whenever the selected index or ref changes
+  useLayoutEffect(function () {
+    var _pillboxRef$current, _el$offsetLeft, _el$offsetTop, _el$offsetWidth, _el$offsetHeight;
+    var el = (_pillboxRef$current = pillboxRef.current) === null || _pillboxRef$current === void 0 ? void 0 : _pillboxRef$current.querySelectorAll("button")[currentIndex];
+
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    setHilightStyle({
+      left: (_el$offsetLeft = el === null || el === void 0 ? void 0 : el.offsetLeft) !== null && _el$offsetLeft !== void 0 ? _el$offsetLeft : 0,
+      top: (_el$offsetTop = el === null || el === void 0 ? void 0 : el.offsetTop) !== null && _el$offsetTop !== void 0 ? _el$offsetTop : 0,
+      width: (_el$offsetWidth = el === null || el === void 0 ? void 0 : el.offsetWidth) !== null && _el$offsetWidth !== void 0 ? _el$offsetWidth : 0,
+      height: (_el$offsetHeight = el === null || el === void 0 ? void 0 : el.offsetHeight) !== null && _el$offsetHeight !== void 0 ? _el$offsetHeight : 0
+    });
+  }, [pillboxRef, currentIndex]);
+  var handleValueChange = function handleValueChange(value) {
+    // Handle pill selection with optional toggle behavior
+    // In toggle mode, clicking the selected pill switches to the other option
+    updateValue(function (oldValue) {
+      if (canToggle) {
+        // Toggle between the two options: click selected pill to switch to the other
+        var newValue = oldValue === options[1].value ? options[0].value : options[1].value;
+        onChange === null || onChange === void 0 || onChange(newValue);
+        return newValue;
+      } else {
+        onChange === null || onChange === void 0 || onChange(value);
+        return value;
+      }
+    });
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ref: pillboxRef,
+    className: cn("fabric-pillbox", className, "relative p-1 outline rounded overflow-hidden"),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: cn("fabric-pillboxContainer", "relative group rounded select-none overflow-hidden flex-nowrap", block ? "flex" : "inline-flex", autoHide && "not-hover:bg-(--currentBg)"),
+      style: {
+        "--currentBg": getColor((_currentOption$bg = currentOption.bg) !== null && _currentOption$bg !== void 0 ? _currentOption$bg : "primary-500"),
+        "--currentColor": getColor((_currentOption$color = currentOption.color) !== null && _currentOption$color !== void 0 ? _currentOption$color : "white")
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        className: cn("fabric-pillHilight", "absolute rounded -z-1! top-0 h-full bg-(--currentBg) transition-[background-color,width,left] ease-in-out duration-500", autoHide && "not-group-hover:hidden"),
+        style: hilightStyle
+      }), options.map(function (opt, idx) {
+        return /*#__PURE__*/jsxs("button", {
+          disabled: opt.disabled,
+          onClick: function onClick() {
+            return handleValueChange(opt.value);
+          },
+          "data-color": opt.color,
+          type: "button",
+          className: cn("fabric-pill", "flex justify-center flex-initial has-[.fabric-pillLabel]:px-4 has-[.fabric-pillLabel]:py-1 z-1 rounded not-disabled:cursor-pointer disabled:cursor-not-allowed items-center transition-colors ease-in-out duration-500", idx === currentIndex ? "text-(--currentColor)" : "not-disabled:hover:bg-primary-500/20", autoHide && idx !== currentIndex && "not-group-hover:hidden", opt.disabled && "opacity-50", block && "flex-1"),
+          children: [opt.icon && /*#__PURE__*/jsx(Icon, _objectSpread({
+            className: cn("fabric-pillIcon", "not-has-[~_.fabric-pillLabel]:m-[0.375em] text-[1.125em]  has-[~_.fabric-pillLabel]:me-1 inline-block size-[1em] flex-content pointer-events-none")
+          }, getIconProps(opt.icon))), opt.label && /*#__PURE__*/jsx("span", {
+            className: "fabric-pillLabel flex-initial truncate",
+            children: opt.label
+          })]
+        }, "".concat(opt.value));
+      })]
+    }), /*#__PURE__*/jsx(StyleEffect, {})]
+  });
+}
+
+export { Pillbox };

package/dist/esm/components/progress/ProgressBar.js

@@ -1,15 +1,14 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { Format } from '@react-fabric/utilities';
-import classNames from 'classnames';
+import { Format, cn } from '@react-fabric/utilities';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import { getColorClass } from '../../utils/getColor.js';
-import classes from './Progress.module.css';
+import 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SizeMap = {
   "": "0.875rem",
   xxs: "3px",
@@ -19,29 +18,46 @@ var SizeMap = {
   lg: "1.5rem",
   xl: "2rem"
 };
-var ProgressBar = function ProgressBar(_ref) {
+
+/**
+ * A component that displays a progress bar indicating the completion percentage of a task or operation.
+ * The progress bar is styled with a background color and a track that fills based on the value provided.
+ * It can also display a label showing the percentage value.
+ * The label can be customized or hidden based on the props provided.
+ *
+ * @example
+ * ```jsx
+ * <ProgressBar value={0.75} size="md" color="primary-500" label="Loading" animate />
+ * // Renders a progress bar with 75% completion, medium size, primary color, and a label "Loading"
+ *
+ * <ProgressBar value={0.5} size="lg" color="success-500" />
+ * // Renders a progress bar with 50% completion, large size, and success color without a label
+ * ```
+ */
+function ProgressBar(_ref) {
   var _ref$value = _ref.value,
     value = _ref$value === void 0 ? 0 : _ref$value,
     size = _ref.size,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "primary" : _ref$color,
+    color = _ref$color === void 0 ? "primary-500" : _ref$color,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? "" : _ref$label,
     animate = _ref.animate;
   /** ***************** make sure value is between 0 and 100 *******************/
   var actualValue = useMemoDebugger(function () {
-    return Math.min(Math.max(value, 0), 100);
+    return Math.min(Math.max(value, 0), 1);
   }, [value], "ProgressBar value");
   var progressVar = useMemoDebugger(function () {
     return {
-      "--progress": actualValue
+      "--progress": actualValue * 100
     };
   }, [actualValue], "ProgressBar cssVar");
 
   /** ***************** component *******************/
   return /*#__PURE__*/jsxs("div", {
-    className: classNames(classes.progressbar, getColorClass(color), "block bg-dimmed relative rounded font-bold overflow-hidden whitespace-nowrap"),
+    className: cn("fabric-progressbar", "block bg-tint-50 relative rounded font-bold overflow-hidden whitespace-nowrap"),
     style: _objectSpread(_objectSpread({}, progressVar), {}, {
+      color: getColor(color),
       minHeight: SizeMap[size !== null && size !== void 0 ? size : ""],
       fontSize: SizeMap[size !== null && size !== void 0 ? size : ""]
     }),
@@ -49,14 +65,14 @@ var ProgressBar = function ProgressBar(_ref) {
     "aria-hidden": "true",
     children: [!["xxs", "xs", "sm"].includes(size !== null && size !== void 0 ? size : "") && /*#__PURE__*/jsxs("div", {
       className: "absolute inset-0 text-center z-0 align-top",
-      children: [label, " ", Format.percent(actualValue / 100)]
+      children: [label, " ", Format.percent(actualValue)]
     }), /*#__PURE__*/jsx("div", {
-      className: classNames(classes.progressTrack, animate && classes.progressAnimate, "h-full overflow-clip bg-current relative z-0")
+      className: cn("fabric-progressTrack", animate && "fabric-progressAnimate", "h-full overflow-clip bg-current relative z-0")
     }), !["xxs", "xs", "sm"].includes(size !== null && size !== void 0 ? size : "") && /*#__PURE__*/jsx("div", {
-      className: classNames("h-full absolute inset-0 overflow-hidden z-1"),
-      "data-label": "".concat(label, " ").concat(Format.percent(actualValue / 100))
+      className: cn("h-full absolute inset-0 overflow-hidden z-1"),
+      "data-label": "".concat(label, " ").concat(Format.percent(actualValue))
     })]
   });
-};
+}
 
 export { ProgressBar };

package/dist/esm/components/progress/ProgressCircle.js

@@ -1,10 +1,10 @@
 'use client';
 
-import { Format } from '@react-fabric/utilities';
-import classNames from 'classnames';
+import { cn, Format } from '@react-fabric/utilities';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import { getColorClass } from '../../utils/getColor.js';
+import 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
 
 /*
  * React Fabric
@@ -36,34 +36,50 @@ var SizeMap = {
   lg: "1.5rem",
   xl: "2rem"
 };
-var ProgressCircle = function ProgressCircle(_ref) {
+
+/**
+ * A circular progress indicator that visually represents a percentage of completion.
+ * It displays a circular track with a stroke that fills based on the `value` prop.
+ * The component is customizable with size and color props.
+ *
+ * @example
+ * ```jsx
+ * <ProgressCircle value={0.75} size="md" color="primary-500" />
+ * // Renders a circular progress indicator with 75% completion, medium size, and primary color.
+ *
+ * <ProgressCircle value={0.5} size="lg" color="secondary-500" />
+ * // Renders a circular progress indicator with 50% completion, large size, and secondary color.
+ * ```
+ */
+function ProgressCircle(_ref) {
   var _ref$value = _ref.value,
     value = _ref$value === void 0 ? 0 : _ref$value,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "sm" : _ref$size,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "primary" : _ref$color;
+    color = _ref$color === void 0 ? "primary-500" : _ref$color;
   /** ***************** make sure value is between 0 and 100 *******************/
   var actualValue = useMemoDebugger(function () {
-    return Math.min(Math.max(value, 0), 100);
+    return Math.min(Math.max(value, 0), 1);
   }, [value], "ProgressCirle value");
 
   /** ***************** calculate stroke offset by actual value *******************/
   var strokeDashoffset = useMemoDebugger(function () {
     var circumfrence = Math.PI * 2 * 44;
-    return circumfrence * (1 - actualValue / 100);
+    return circumfrence * (1 - actualValue);
   }, [actualValue], "ProgressCirle dashOffset");
 
   /** ***************** component *******************/
   return /*#__PURE__*/jsxs("div", {
-    className: classNames("inline-block w-[4em] h-[4em] text-lg relative", getColorClass(color)),
+    className: cn("inline-block w-[4em] h-[4em] text-lg relative"),
     "aria-hidden": "true",
     style: {
-      fontSize: SizeMap[size]
+      fontSize: SizeMap[size],
+      color: getColor(color)
     },
     children: [/*#__PURE__*/jsxs("svg", {
       viewBox: "0 0 100 100",
-      className: classNames("absolute inset-0 w-full h-full stroke-dimmed"),
+      className: cn("absolute inset-0 w-full h-full stroke-tint-500"),
       children: [/*#__PURE__*/jsx("circle", {
         cx: "50",
         cy: "50",
@@ -88,9 +104,9 @@ var ProgressCircle = function ProgressCircle(_ref) {
       })]
     }), /*#__PURE__*/jsx("span", {
       className: "flex w-full h-full items-center justify-center select-none font-bold text-[0.625em]",
-      children: Format.percent(actualValue / 100)
+      children: Format.percent(actualValue)
     })]
   });
-};
+}
 
 export { ProgressCircle };

package/dist/esm/components/tabpanel/Tab.js

@@ -2,50 +2,67 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { isString } from '@react-fabric/utilities';
-import classNames from 'classnames';
+import { isString, cn } from '@react-fabric/utilities';
 import { useMemo, Fragment } from 'react';
-import '@babel/runtime/helpers/slicedToArray';
-import '@floating-ui/react';
-import 'react-i18next';
-import '../../hooks/useEffectDebugger.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import '../../hotkeys/HotKeyWrapper.js';
-import { Tooltip } from '../../overlays/tooltip/Tooltip.js';
-import { getBadgeProps, Badge } from '../badge/Badge.js';
-import { Icon } from '../icon/Icon.js';
-import '../../types/icons.js';
+import { getBadgeProps } from '../../utils/getBadgeProps.js';
+import { getIconProps } from '../../utils/getIconProps.js';
+import { Badge } from '../badge/Badge.js';
 import { DropdownTool } from '../dropdown/DropdownTool.js';
-import classes from './TabPanel.module.css';
+import { Icon } from '../icon/Icon.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
 
-var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "minimal", "onClick", "tabFlex", "color", "actions", "tooltip", "activeClassName"];
+var _excluded = ["ref", "as", "id", "className", "classNames", "label", "icon", "badge", "disabled", "onClose", "onClick", "tabFlex", "color", "actions", "tooltip", "active"];
 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 Tab = function Tab(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
+/**
+ * A component that represents a tab in a tabbed interface. It can display an icon, label, badge, and actions.
+ * It supports polymorphic rendering, allowing it to be rendered as different HTML elements.
+ * It also supports tooltips, active states, and click handling.
+ *
+ * @example
+ * ```jsx
+ * <Tab
+ *   id="tab1"
+ *   label="Tab 1"
+ *   icon="home"
+ *   badge="New"
+ *   onClick={(id) => console.log(`Tab clicked: ${id}`)}
+ *   onClose={() => console.log("Tab closed")}
+ *   active={true}
+ *   actions={<button>Action</button>}
+ *   color="primary"
+ *   tooltip="This is a tab"
+ *   activeClassName="bg-blue-100"
+ * />
+ * // Renders a tab with label "Tab 1", home icon, blue background, white text, badge "New",
+ * // and an action button. The tab is active and has a tooltip.
+ * ```
+ */
+function Tab(_ref) {
   var ref = _ref.ref,
     as = _ref.as,
     id = _ref.id,
     className = _ref.className,
+    classNames = _ref.classNames,
     label = _ref.label,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     badge = _ref.badge,
     disabled = _ref.disabled,
     onClose = _ref.onClose,
-    active = _ref.active,
-    minimal = _ref.minimal,
     _onClick = _ref.onClick,
     tabFlex = _ref.tabFlex,
     color = _ref.color,
     actions = _ref.actions,
     tooltip = _ref.tooltip,
-    activeClassName = _ref.activeClassName,
-    aria = _objectWithoutProperties(_ref, _excluded);
+    active = _ref.active,
+    props = _objectWithoutProperties(_ref, _excluded);
   var badgeProps = useMemo(function () {
     return getBadgeProps(badge);
   }, [badge]);
+  var minimal = useMemo(function () {
+    return !label;
+  }, [label]);
   var tooltipProps = useMemo(function () {
     if (isString(tooltip)) return {
       content: tooltip
@@ -59,30 +76,29 @@ var Tab = function Tab(_ref) {
       "data-id": id,
       disabled: disabled,
       "data-color": color,
-      className: classNames(classes.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-24", "flex items-center justify-center px-1 rounded overflow-hidden"),
+      "data-inner-clickable": true,
+      className: cn("fabric-tabButton", className, classNames === null || classNames === void 0 ? void 0 : classNames.root, !!active && "active pointer-events-none", !!active && (classNames === null || classNames === void 0 ? void 0 : classNames.active), disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal && "min-w-6", "flex items-center min-w-18 justify-center overflow-hidden cursor-pointer group/tool"),
       onClick: function onClick() {
         return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
       },
       ref: ref
-    }, aria), {}, {
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip,
-        className: "flex-content"
-      }), !minimal && /*#__PURE__*/jsx("label", {
-        className: "flex-initial truncate text-center px-1 py-1",
+    }, props), {}, {
+      children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({
+        className: "flex-content p-2"
+      }, getIconProps(icon))), !minimal && /*#__PURE__*/jsx("label", {
+        className: cn(classNames === null || classNames === void 0 ? void 0 : classNames.label, "flex-initial truncate text-center px-1 py-1"),
         children: label
       }), badge && /*#__PURE__*/jsx(Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
-        placement: minimal ? "end" : "",
-        className: classNames("me-1", badgeProps.className)
-      })), actions && active && /*#__PURE__*/jsx(DropdownTool, {
-        className: "bg-base/20 me-1 z-5",
+        inline: !minimal,
+        placement: minimal ? "end" : undefined,
+        className: cn("me-1", classNames === null || classNames === void 0 ? void 0 : classNames.badge)
+      })), actions && /*#__PURE__*/jsx(DropdownTool, {
+        groupHover: !active,
+        className: "bg-tint-50/20 me-1 z-5",
         children: actions
       }), onClose && /*#__PURE__*/jsx("span", {
         role: "none",
-        className: classNames("cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto"),
+        className: cn("cursor-pointer mx-1 opacity-65 hover:opacity-90 pointer-events-auto"),
         onClick: function onClick(e) {
           onClose === null || onClose === void 0 || onClose();
           e.stopPropagation();
@@ -91,6 +107,6 @@ var Tab = function Tab(_ref) {
       })]
     }))
   }));
-};
+}
 
 export { Tab };