@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/dist/cjs/components/panel/Panel.js

@@ -3,29 +3,55 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var classNames = require('classnames');
+var utilities = require('@react-fabric/utilities');
+var reactHotkeys = require('@tanstack/react-hotkeys');
 var react = require('react');
 var usePropToggle = require('../../hooks/usePropToggle.js');
-var icons = require('../../types/icons.js');
-var Animations = require('../animations/Animations.js');
+var LoadingLine = require('../animations/LoadingLine.js');
 var Icon = require('../icon/Icon.js');
-var Panel_module = require('./Panel.module.css');
+var Titlebar = require('../titlebar/Titlebar.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "className", "titleClassName", "headerClassName", "title", "actions", "icon", "iconBg", "iconColor", "rtlFlip", "panelId", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "loading", "expandable", "expanded", "onExpand", "collapsable", "collapsed", "onCollapse", "onClose", "onBack"];
+var _excluded = ["children", "className", "classNames", "title", "actions", "icon", "panelId", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "loading", "expandable", "expanded", "onExpand", "collapsable", "collapsed", "onCollapse", "onClose", "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 Panel = function Panel(_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 panel with a header, body, and optional actions.
+ * It supports expandable and collapsible functionality, loading state, and customizable styles.
+ * The panel can be resized and has a fixed position when expanded.
+ * It can be customized with different colors, icons, and behaviors.
+ * This component is useful for displaying content in a structured way, allowing users to interact with it through actions and toggles.
+ * It can be used in various applications where panels are needed, such as dashboards, settings pages, or content management systems.
+ *
+ * @example
+ * ```jsx
+ * <Panel
+ *   title="Panel Title"
+ *   icon="icon-[mdi--info]"
+ *   actions={<button>Action</button>}
+ *   expandable
+ *   collapsable
+ *   onExpand={() => console.log("Expanded")}
+ *   onCollapse={() => console.log("Collapsed")}
+ *   onClose={() => console.log("Closed")}
+ *   height="400px"
+ *   width="300px"
+ *   minHeight="200px"
+ *   minWidth="200px"
+ *   maxHeight="600px"
+ *   maxWidth="600px"
+ * >
+ *   <p>This is the content of the panel.</p>
+ * </Panel>
+ * ```
+ */
+function Panel(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    titleClassName = _ref.titleClassName,
-    headerClassName = _ref.headerClassName,
+    classNames = _ref.classNames,
     title = _ref.title,
     actions = _ref.actions,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     panelId = _ref.panelId,
     height = _ref.height,
     width = _ref.width,
@@ -54,8 +80,18 @@ var Panel = function Panel(_ref) {
   var hasTools = react.useMemo(function () {
     return !!expandable || !!collapsable || !!onClose;
   }, [expandable, collapsable, onClose]);
+  reactHotkeys.useHotkeySequences([{
+    sequence: ["Escape"],
+    callback: function callback() {
+      return toggleExpand();
+    },
+    options: {
+      enabled: expanded,
+      conflictBehavior: "allow"
+    }
+  }]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(Panel_module.panel, className, "rounded-capped overflow-hidden outline grid", expanded ? "fixed inset-4 z-50" : "relative"),
+    className: utilities.cn("fabric-panel", className, "rounded-capped overflow-hidden outline grid group", expanded ? "fixed inset-4 z-50" : "relative", !collapsed && "not-last:border-b"),
     "data-ref": "panel",
     "data-collapsed": collapsed,
     style: expanded ? {} : collapsed ? {
@@ -71,57 +107,76 @@ var Panel = function Panel(_ref) {
       maxHeight: maxHeight
     }
   }, aria), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs("header", {
-      role: "none",
-      className: classNames(Panel_module.panelHeader, headerClassName, "flex flex-nowrap items-center area-head"),
-      "data-testid": "panel-header",
-      onClick: collapsable ? toggleCollapse : undefined,
-      children: [onBack && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Titlebar.Titlebar, {
+      title: title,
+      icon: icon,
+      onClick: function onClick() {
+        return toggleCollapse();
+      },
+      prepend: !!onBack && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        rtlFlip: true,
         "data-ref": "panelBack",
-        className: classNames(Panel_module.panelAction, "cursor-pointer"),
-        icon: icons.CoreIcons.chevronLeft,
+        className: utilities.cn("fabric-panelAction", "cursor-pointer pointer-events-auto"),
+        icon: "icon-[mdi--chevron-left]"
+        // @ts-expect-error ignore
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        ,
         onClick: onBack
-      }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip,
-        className: "p-2 text-md select-none pointer-events-none"
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames(titleClassName, "flex-1 select-none truncate", title && "py-1 first:px-2"),
-        children: title
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "px-1",
-        children: actions
-      }), hasTools && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        role: "none",
-        className: "px-1 gap-px flex",
-        onClick: function onClick(e) {
-          return e.stopPropagation();
-        },
-        children: [expandable && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-          "data-ref": "panelExpand",
-          className: classNames(Panel_module.panelAction, "cursor-pointer"),
-          icon: expanded ? icons.CoreIcons.minimize : icons.CoreIcons.maximize,
-          onClick: toggleExpand
-        }), !expanded && collapsable && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-          "data-ref": "panelCollapse",
-          className: classNames(Panel_module.panelAction, "cursor-pointer"),
-          icon: collapsed ? icons.CoreIcons.expand : icons.CoreIcons.collapse,
-          onClick: toggleCollapse
-        }), !expanded && onClose && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-          "data-ref": "panelClose",
-          className: classNames(Panel_module.panelAction, "cursor-pointer"),
-          icon: icons.CoreIcons.close,
-          onClick: onClose
+      }),
+      actions: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [actions, hasTools && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          role: "none",
+          className: "px-1 gap-px flex",
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          },
+          children: [expandable && /*#__PURE__*/jsxRuntime.jsx("button", {
+            type: "button",
+            className: "size-fit cursor-pointer leading-none outline-none",
+            onClick: function onClick() {
+              return toggleExpand();
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+              "data-ref": "panelExpand",
+              className: utilities.cn("fabric-panelAction", "cursor-pointer pointer-events-auto"),
+              icon: expanded ? "icon-[mdi--fullscreen-exit]" : "icon-[mdi--fullscreen]"
+            })
+          }), !expanded && collapsable && /*#__PURE__*/jsxRuntime.jsx("button", {
+            type: "button",
+            className: "size-fit cursor-pointer leading-none outline-none",
+            onClick: function onClick() {
+              return toggleCollapse();
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+              "data-ref": "panelCollapse",
+              className: utilities.cn("fabric-panelAction", "cursor-pointer pointer-events-auto"),
+              icon: collapsed ? "icon-[mdi--plus-box-outline]" : "icon-[mdi--minus-box-outline]"
+            })
+          }), !expanded && onClose && /*#__PURE__*/jsxRuntime.jsx("button", {
+            type: "button",
+            className: "size-fit cursor-pointer leading-none outline-none",
+            onClick: function onClick() {
+              return onClose();
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+              "data-ref": "panelClose",
+              className: utilities.cn("fabric-panelAction", "cursor-pointer pointer-events-auto"),
+              icon: "icon-[mdi--close]"
+            })
+          })]
         })]
-      })]
-    }), (!collapsed || expanded) && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      "data-testid": "panel-body",
-      className: classNames(Panel_module.panelBody, "area-content grid overflow-hidden"),
-      children: [loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), children]
+      }),
+      className: utilities.cn(classNames === null || classNames === void 0 ? void 0 : classNames.titlebar),
+      classNames: classNames
+    }), /*#__PURE__*/jsxRuntime.jsx(react.Activity, {
+      mode: !collapsed || expanded ? "visible" : "hidden",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        "data-ref": "panelBody",
+        className: utilities.cn("fabric-panelBody", classNames === null || classNames === void 0 ? void 0 : classNames.body, "area-content grid overflow-hidden"),
+        children: [loading && /*#__PURE__*/jsxRuntime.jsx(LoadingLine.LoadingLine, {}), children]
+      })
     })]
   }));
-};
+}
 
 exports.Panel = Panel;

package/dist/cjs/components/panel/PanelGroup.js

@@ -1,13 +1,33 @@
 'use strict';
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var classNames = require('classnames');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
-var Panel_module = require('./Panel.module.css');
+var cloneElement = require('../../utils/cloneElement.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var PanelGroup = function PanelGroup(_ref) {
+/**
+ * A component that groups multiple panels together, allowing for one panel to be expanded at a time.
+ * This component allows you to manage a group of panels where only one can be expanded at a time.
+ * It accepts an `activePanel` prop to control which panel is currently expanded,
+ * and an `onActiveChange` callback that is triggered when the active panel changes.
+ * It uses the `Panel` component to render each individual panel within the group.
+ *
+ * @example
+ * ```jsx
+ * <PanelGroup
+ *   activePanel="panel1"
+ *   onActiveChange={(panelId) => console.log(`Active panel changed to: ${panelId}`)}
+ * >
+ *   <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>
+ * </PanelGroup>
+ * ```
+ */
+function PanelGroup(_ref) {
+  var _cloneChildren;
   var children = _ref.children,
     activePanel = _ref.activePanel,
     onActiveChange = _ref.onActiveChange;
@@ -16,35 +36,41 @@ var PanelGroup = function PanelGroup(_ref) {
     expandedPanel = _useState2[0],
     setExpandedPanel = _useState2[1];
   var panels = useEffectDebugger.useMemoDebugger(function () {
-    return react.Children.toArray(children).map(function (child, index) {
-      return child.props.panelId || index;
-    });
+    return (
+      // eslint-disable-next-line @eslint-react/no-children-to-array
+      react.Children.toArray(children).map(function (child, index) {
+        var _child$props;
+        return (/*#__PURE__*/react.isValidElement(child) ? (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.panelId : "") || index;
+      })
+    );
   }, [children], "PanelGroup children");
   useEffectDebugger.useEffectDebugger(function () {
     setExpandedPanel(activePanel !== null && activePanel !== void 0 ? activePanel : panels[0]);
   }, [activePanel, panels], "PanelGroup setActive");
-  var changeExpanded = react.useCallback(function (collapsed, id, handler) {
+  var changeExpanded = function changeExpanded(collapsed, id, handler) {
     if (!collapsed) {
       setExpandedPanel(id);
       onActiveChange === null || onActiveChange === void 0 || onActiveChange(id);
     }
     handler === null || handler === void 0 || handler(collapsed);
     return id !== expandedPanel;
-  }, [onActiveChange, expandedPanel]);
+  };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     "data-ref": "panelGroup",
-    className: classNames(Panel_module.panelGroup, "flex flex-col overflow-auto area-content p-px"),
-    children: react.Children.toArray(children).map(function (child, index) {
-      return /*#__PURE__*/react.cloneElement(child, {
-        panelId: child.props.panelId || index,
+    className: utilities.cn("fabric-panelGroup", "flex flex-col overflow-auto scroll-thin area-content p-px"),
+    children: (_cloneChildren = cloneElement.cloneChildren(children)) === null || _cloneChildren === void 0 ? void 0 : _cloneChildren.map(function (child, index) {
+      var childEl = child;
+      var id = childEl.props.panelId || index;
+      return /*#__PURE__*/react.cloneElement(childEl, {
+        panelId: id,
         collapsable: true,
-        onCollapse: function onCollapse(b, id) {
-          return changeExpanded(b, id, child.props.onCollapse);
+        onCollapse: function onCollapse(b) {
+          return changeExpanded(b, id, childEl.props.onCollapse);
         },
-        collapsed: expandedPanel !== (child.props.panelId || index)
+        collapsed: expandedPanel !== (childEl.props.panelId || index)
       });
     })
   });
-};
+}
 
 exports.PanelGroup = PanelGroup;

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

@@ -7,12 +7,37 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var react = require('react');
 var jsxRuntime = require('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 = react.useMemo(function () {
-    return new Map(react.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
+    react.Children.toArray(children)
+    // @ts-expect-error ignore
+    .map(function (child) {
+      if (/*#__PURE__*/react.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]);
   react.useEffect(function () {
     startTransition(function () {
@@ -40,25 +72,23 @@ var PanelStack = function PanelStack(_ref) {
       }));
     });
   }, [onPanelChange, history]);
-  var goBack = react.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 = react.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 = react.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__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
     role: "none",
     ref: stackRef,
     className: className,
     onClickCapture: checkMenuClick,
     children: currentPanel && /*#__PURE__*/react.cloneElement(currentPanel, {
+      // @ts-expect-error ignore
       onBack: history.length > 0 ? goBack : undefined
     })
   }));
-};
+}
 
 exports.PanelStack = PanelStack;

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

@@ -0,0 +1,118 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var useControlledValue = require('../../hooks/useControlledValue.js');
+var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
+var getIconProps = require('../../utils/getIconProps.js');
+var StyleEffect = require('../effect/StyleEffect.js');
+var Icon = require('../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 = react.useRef(null);
+  var _useState = react.useState(function () {
+      return {
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    hilightStyle = _useState2[0],
+    setHilightStyle = _useState2[1];
+  var _useControlledValue = 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 = react.useMemo(function () {
+    return options.length === 2 && toggle;
+  }, [options, toggle]);
+  var currentIndex = react.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
+  react.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__*/jsxRuntime.jsxs("div", {
+    ref: pillboxRef,
+    className: utilities.cn("fabric-pillbox", className, "relative p-1 outline rounded overflow-hidden"),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: utilities.cn("fabric-pillboxContainer", "relative group rounded select-none overflow-hidden flex-nowrap", block ? "flex" : "inline-flex", autoHide && "not-hover:bg-(--currentBg)"),
+      style: {
+        "--currentBg": getColor.getColor((_currentOption$bg = currentOption.bg) !== null && _currentOption$bg !== void 0 ? _currentOption$bg : "primary-500"),
+        "--currentColor": getColor.getColor((_currentOption$color = currentOption.color) !== null && _currentOption$color !== void 0 ? _currentOption$color : "white")
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: utilities.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__*/jsxRuntime.jsxs("button", {
+          disabled: opt.disabled,
+          onClick: function onClick() {
+            return handleValueChange(opt.value);
+          },
+          "data-color": opt.color,
+          type: "button",
+          className: utilities.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__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
+            className: utilities.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.getIconProps(opt.icon))), opt.label && /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "fabric-pillLabel flex-initial truncate",
+            children: opt.label
+          })]
+        }, "".concat(opt.value));
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(StyleEffect.StyleEffect, {})]
+  });
+}
+
+exports.Pillbox = Pillbox;

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

@@ -2,14 +2,13 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
-var getColor = require('../../utils/getColor.js');
-var Progress_module = require('./Progress.module.css');
+require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../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 = useEffectDebugger.useMemoDebugger(function () {
-    return Math.min(Math.max(value, 0), 100);
+    return Math.min(Math.max(value, 0), 1);
   }, [value], "ProgressBar value");
   var progressVar = useEffectDebugger.useMemoDebugger(function () {
     return {
-      "--progress": actualValue
+      "--progress": actualValue * 100
     };
   }, [actualValue], "ProgressBar cssVar");
 
   /** ***************** component *******************/
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames(Progress_module.progressbar, getColor.getColorClass(color), "block bg-dimmed relative rounded font-bold overflow-hidden whitespace-nowrap"),
+    className: utilities.cn("fabric-progressbar", "block bg-tint-50 relative rounded font-bold overflow-hidden whitespace-nowrap"),
     style: _objectSpread(_objectSpread({}, progressVar), {}, {
+      color: getColor.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__*/jsxRuntime.jsxs("div", {
       className: "absolute inset-0 text-center z-0 align-top",
-      children: [label, " ", utilities.Format.percent(actualValue / 100)]
+      children: [label, " ", utilities.Format.percent(actualValue)]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(Progress_module.progressTrack, animate && Progress_module.progressAnimate, "h-full overflow-clip bg-current relative z-0")
+      className: utilities.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__*/jsxRuntime.jsx("div", {
-      className: classNames("h-full absolute inset-0 overflow-hidden z-1"),
-      "data-label": "".concat(label, " ").concat(utilities.Format.percent(actualValue / 100))
+      className: utilities.cn("h-full absolute inset-0 overflow-hidden z-1"),
+      "data-label": "".concat(label, " ").concat(utilities.Format.percent(actualValue))
     })]
   });
-};
+}
 
 exports.ProgressBar = ProgressBar;