@react-fabric/core 1.0.0-beta.48 → 1.0.0-beta.49

package/css/components/_divider.css

@@ -22,11 +22,17 @@
  */
 
 @layer components {
-  .fabric-divider--vertical {
-    margin-inline: 0.25rem;
-  }
+  .fabric-divider {
+    hr {
+      margin: 0;
+    }
+
+    .fabric-divider-label--vertical {
+      padding-inline: 0.25rem;
+    }
 
-  .fabric-divider--horizontal {
-    margin-block: 0.25rem;
+    .fabric-divider-label--horizontal {
+      padding-block: 0.25rem;
+    }
   }
 }

package/dist/cjs/components/callout/Callout.js

@@ -11,6 +11,7 @@ var _excluded = ["children", "color", "legend", "title", "icon", "border", "onCl
 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 colors = {
+  none: "bg-base text-tint-900 border-tint-100",
   tint: "bg-tint-50/50 text-tint-800 border-tint-300",
   primary: "bg-primary-50/50 text-primary-800 border-primary-300",
   accent: "bg-accent-50/50 text-accent-800 border-accent-300",

package/dist/cjs/components/collapsable/Collapsable.js

@@ -62,7 +62,7 @@ var Collapsable = function Collapsable(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "none",
       ref: headRef,
-      className: classNames("fabric-collapsableHead", "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 px-2 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
+      className: classNames("fabric-collapsableHead", "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
         return !disabled && setOpenState(!openState);
       },
@@ -71,7 +71,7 @@ var Collapsable = function Collapsable(_ref) {
         icon: openState ? iconOpen : iconClosed,
         rtlFlip: true
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-1 px-2",
+        className: "flex-1",
         children: head
       })]
     }), openState && /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/components/divider/Divider.js

@@ -34,9 +34,9 @@ var Divider = function Divider(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "tint-300" : _ref$color,
     vertical = _ref.vertical,
-    labelClassName = _ref.labelClassName;
-    _ref.fill;
-    var _ref$align = _ref.align,
+    labelClassName = _ref.labelClassName,
+    style = _ref.style,
+    _ref$align = _ref.align,
     align = _ref$align === void 0 ? "start" : _ref$align,
     className = _ref.className;
   var Rule = react.useCallback(function (_ref2) {
@@ -45,17 +45,18 @@ var Divider = function Divider(_ref) {
     return /*#__PURE__*/jsxRuntime.jsx("hr", {
       style: {
         flex: flex,
-        borderColor: getColor.getColor(color)
+        borderColor: getColor.getColor(color),
+        borderStyle: style
       },
       className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal")
     });
   }, [color, vertical]);
   return children ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames("flex flex-nowrap items-center", vertical && "flex-col", className),
+    className: classNames("flex flex-nowrap items-center fabric-divider", vertical && "flex-col", className),
     children: [/*#__PURE__*/jsxRuntime.jsx(Rule, {
       flex: align === "start" ? "0 0 1rem" : "1 1 1em"
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("px-2 whitespace-nowrap", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal", labelClassName, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
+      className: classNames("px-2 whitespace-nowrap", vertical ? "fabric-divider-label--vertical" : "fabric-divider-label--horizontal", labelClassName, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
       children: children
     }), /*#__PURE__*/jsxRuntime.jsx(Rule, {
       flex: align === "end" ? "0 0 1rem" : "1 1 1em"

package/dist/cjs/components/icon/Icon.js

@@ -8,7 +8,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 
-var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "viewBox", "className", "onClick"];
+var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "disabled", "viewBox", "className", "onClick"];
 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 SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
@@ -33,6 +33,7 @@ var Icon = function Icon(_ref) {
     rtlFlip = _ref.rtlFlip,
     animate = _ref.animate,
     rounded = _ref.rounded,
+    disabled = _ref.disabled,
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
     className = _ref.className,
@@ -94,7 +95,7 @@ var Icon = function Icon(_ref) {
     ref: ref
   }, rest), {}, {
     role: "presentation",
-    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), className),
+    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), !!onClick && disabled && "opacity-30 pointer-events-none", className),
     onClick: onClick,
     "data-flip": rtlFlip,
     style: styles,

package/dist/cjs/components/navigator/Navigator.js

@@ -7,9 +7,10 @@ var react = require('react');
 var HotKey = require('../../hotkeys/HotKey.js');
 var icons = require('../../types/icons.js');
 var Icon = require('../icon/Icon.js');
+var utilities = require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["className", "onNavigate", "color", "children"];
+var _excluded = ["className", "onNavigate", "color", "children", "length", "current", "disableKeyHandlers"];
 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 Navigator = function Navigator(_ref) {
@@ -17,21 +18,24 @@ var Navigator = function Navigator(_ref) {
     onNavigate = _ref.onNavigate,
     color = _ref.color,
     children = _ref.children,
+    length = _ref.length,
+    current = _ref.current,
+    disableKeyHandlers = _ref.disableKeyHandlers,
     aria = _objectWithoutProperties(_ref, _excluded);
   var navPrev = react.useCallback(function () {
-    return onNavigate(-1);
-  }, [onNavigate]);
+    return (utilities.isEmpty(current) || current !== 0) && onNavigate(-1);
+  }, [onNavigate, current]);
   var navNext = react.useCallback(function () {
-    return onNavigate(+1);
-  }, [onNavigate]);
+    return (utilities.isEmpty(current) || current + 1 < (length !== null && length !== void 0 ? length : 0)) && onNavigate(+1);
+  }, [onNavigate, current, length]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "navigator",
     className: classNames(className, "inline-flex items-center leading-none")
   }, aria), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+    children: [!disableKeyHandlers && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
       keyCombo: "left",
       handler: navPrev
-    }), /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+    }), !disableKeyHandlers && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
       keyCombo: "right",
       handler: navNext
     }), /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
@@ -41,8 +45,9 @@ var Navigator = function Navigator(_ref) {
       "aria-label": "previous",
       "data-ref": "previous",
       icon: icons.CoreIcons.chevronLeft,
+      disabled: !utilities.isEmpty(current) && current === 0,
       onClick: function onClick(e) {
-        return [e.stopPropagation(), onNavigate(-1)];
+        return [e.stopPropagation(), navPrev()];
       }
     }), children, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       rtlFlip: true,
@@ -51,8 +56,9 @@ var Navigator = function Navigator(_ref) {
       "aria-label": "next",
       "data-ref": "next",
       icon: icons.CoreIcons.chevronRight,
+      disabled: !utilities.isEmpty(current) && current + 1 === length,
       onClick: function onClick(e) {
-        return [e.stopPropagation(), onNavigate(1)];
+        return [e.stopPropagation(), navNext()];
       }
     })]
   }));

package/dist/esm/components/callout/Callout.js

@@ -11,6 +11,7 @@ var _excluded = ["children", "color", "legend", "title", "icon", "border", "onCl
 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 colors = {
+  none: "bg-base text-tint-900 border-tint-100",
   tint: "bg-tint-50/50 text-tint-800 border-tint-300",
   primary: "bg-primary-50/50 text-primary-800 border-primary-300",
   accent: "bg-accent-50/50 text-accent-800 border-accent-300",

package/dist/esm/components/collapsable/Collapsable.js

@@ -62,7 +62,7 @@ var Collapsable = function Collapsable(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       role: "none",
       ref: headRef,
-      className: classNames("fabric-collapsableHead", "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 px-2 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
+      className: classNames("fabric-collapsableHead", "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
         return !disabled && setOpenState(!openState);
       },
@@ -71,7 +71,7 @@ var Collapsable = function Collapsable(_ref) {
         icon: openState ? iconOpen : iconClosed,
         rtlFlip: true
       }), /*#__PURE__*/jsx("div", {
-        className: "flex-1 px-2",
+        className: "flex-1",
         children: head
       })]
     }), openState && /*#__PURE__*/jsx("div", {

package/dist/esm/components/divider/Divider.js

@@ -34,9 +34,9 @@ var Divider = function Divider(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "tint-300" : _ref$color,
     vertical = _ref.vertical,
-    labelClassName = _ref.labelClassName;
-    _ref.fill;
-    var _ref$align = _ref.align,
+    labelClassName = _ref.labelClassName,
+    style = _ref.style,
+    _ref$align = _ref.align,
     align = _ref$align === void 0 ? "start" : _ref$align,
     className = _ref.className;
   var Rule = useCallback(function (_ref2) {
@@ -45,17 +45,18 @@ var Divider = function Divider(_ref) {
     return /*#__PURE__*/jsx("hr", {
       style: {
         flex: flex,
-        borderColor: getColor(color)
+        borderColor: getColor(color),
+        borderStyle: style
       },
       className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal")
     });
   }, [color, vertical]);
   return children ? /*#__PURE__*/jsxs("div", {
-    className: classNames("flex flex-nowrap items-center", vertical && "flex-col", className),
+    className: classNames("flex flex-nowrap items-center fabric-divider", vertical && "flex-col", className),
     children: [/*#__PURE__*/jsx(Rule, {
       flex: align === "start" ? "0 0 1rem" : "1 1 1em"
     }), /*#__PURE__*/jsx("div", {
-      className: classNames("px-2 whitespace-nowrap", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal", labelClassName, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
+      className: classNames("px-2 whitespace-nowrap", vertical ? "fabric-divider-label--vertical" : "fabric-divider-label--horizontal", labelClassName, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
       children: children
     }), /*#__PURE__*/jsx(Rule, {
       flex: align === "end" ? "0 0 1rem" : "1 1 1em"

package/dist/esm/components/icon/Icon.js

@@ -8,7 +8,7 @@ import { useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
 
-var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "viewBox", "className", "onClick"];
+var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "disabled", "viewBox", "className", "onClick"];
 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 SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
@@ -33,6 +33,7 @@ var Icon = function Icon(_ref) {
     rtlFlip = _ref.rtlFlip,
     animate = _ref.animate,
     rounded = _ref.rounded,
+    disabled = _ref.disabled,
     _ref$viewBox = _ref.viewBox,
     viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
     className = _ref.className,
@@ -94,7 +95,7 @@ var Icon = function Icon(_ref) {
     ref: ref
   }, rest), {}, {
     role: "presentation",
-    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), className),
+    className: classNames("fabric-icon", "select-none overflow-hidden box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate), !!onClick && disabled && "opacity-30 pointer-events-none", className),
     onClick: onClick,
     "data-flip": rtlFlip,
     style: styles,

package/dist/esm/components/navigator/Navigator.js

@@ -7,9 +7,10 @@ import { useCallback } from 'react';
 import { HotKey } from '../../hotkeys/HotKey.js';
 import { CoreIcons } from '../../types/icons.js';
 import { Icon } from '../icon/Icon.js';
+import { isEmpty } from '@react-fabric/utilities';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["className", "onNavigate", "color", "children"];
+var _excluded = ["className", "onNavigate", "color", "children", "length", "current", "disableKeyHandlers"];
 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 Navigator = function Navigator(_ref) {
@@ -17,21 +18,24 @@ var Navigator = function Navigator(_ref) {
     onNavigate = _ref.onNavigate,
     color = _ref.color,
     children = _ref.children,
+    length = _ref.length,
+    current = _ref.current,
+    disableKeyHandlers = _ref.disableKeyHandlers,
     aria = _objectWithoutProperties(_ref, _excluded);
   var navPrev = useCallback(function () {
-    return onNavigate(-1);
-  }, [onNavigate]);
+    return (isEmpty(current) || current !== 0) && onNavigate(-1);
+  }, [onNavigate, current]);
   var navNext = useCallback(function () {
-    return onNavigate(+1);
-  }, [onNavigate]);
+    return (isEmpty(current) || current + 1 < (length !== null && length !== void 0 ? length : 0)) && onNavigate(+1);
+  }, [onNavigate, current, length]);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     "data-ref": "navigator",
     className: classNames(className, "inline-flex items-center leading-none")
   }, aria), {}, {
-    children: [/*#__PURE__*/jsx(HotKey, {
+    children: [!disableKeyHandlers && /*#__PURE__*/jsx(HotKey, {
       keyCombo: "left",
       handler: navPrev
-    }), /*#__PURE__*/jsx(HotKey, {
+    }), !disableKeyHandlers && /*#__PURE__*/jsx(HotKey, {
       keyCombo: "right",
       handler: navNext
     }), /*#__PURE__*/jsx(Icon, {
@@ -41,8 +45,9 @@ var Navigator = function Navigator(_ref) {
       "aria-label": "previous",
       "data-ref": "previous",
       icon: CoreIcons.chevronLeft,
+      disabled: !isEmpty(current) && current === 0,
       onClick: function onClick(e) {
-        return [e.stopPropagation(), onNavigate(-1)];
+        return [e.stopPropagation(), navPrev()];
       }
     }), children, /*#__PURE__*/jsx(Icon, {
       rtlFlip: true,
@@ -51,8 +56,9 @@ var Navigator = function Navigator(_ref) {
       "aria-label": "next",
       "data-ref": "next",
       icon: CoreIcons.chevronRight,
+      disabled: !isEmpty(current) && current + 1 === length,
       onClick: function onClick(e) {
-        return [e.stopPropagation(), onNavigate(1)];
+        return [e.stopPropagation(), navNext()];
       }
     })]
   }));

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

@@ -4,7 +4,7 @@ export interface CalloutProps extends AriaProps, ChildrenProp, CssProp, TestProp
     /**
      * callout color
      */
-    color?: ColorState;
+    color?: ColorState | "none";
     /**
      * legend title
      */

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

@@ -1,9 +1,5 @@
 import { type ChildProp, type ColorType, type CssProp, type PaletteType } from "../../types";
 export interface DividerProps extends CssProp, Partial<ChildProp> {
-    /**
-     * apply text bg
-     */
-    fill?: boolean;
     /**
      * vertical rule
      */
@@ -20,5 +16,9 @@ export interface DividerProps extends CssProp, Partial<ChildProp> {
      * text alignment
      */
     align?: "start" | "end" | "center";
+    /**
+     * divider style
+     */
+    style?: "solid" | "dashed" | "dotted";
 }
-export declare const Divider: ({ children, color, vertical, labelClassName, fill, align, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Divider: ({ children, color, vertical, labelClassName, style, align, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -33,6 +33,7 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
      * apply animation
      */
     animate?: "spin" | "pulse" | "bounce";
+    disabled?: boolean;
     /**
      * click handler
      */
@@ -41,4 +42,4 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
 /**
  * An icon is a display component for svg icon path / image
  */
-export declare const Icon: ({ ref, icon, bg, color, size, rtlFlip, animate, rounded, viewBox, className, onClick, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ ref, icon, bg, color, size, rtlFlip, animate, rounded, disabled, viewBox, className, onClick, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.48",
+  "version": "1.0.0-beta.49",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.9",
-    "@react-fabric/utilities": "^1.0.0-beta.48",
+    "@react-fabric/utilities": "^1.0.0-beta.49",
     "@tailwindcss/postcss": "~4.0.14",
     "boring-avatars": "^1.11.2",
     "classnames": "^2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "0b1001b4ae1ee67f8e1817d6395d1f3945321897"
+  "gitHead": "29b3ed65e9f9687d738dd7c6facdb9fedafb4219"
 }

package/src/components/callout/Callout.tsx

@@ -40,7 +40,7 @@ export interface CalloutProps
   /**
    * callout color
    */
-  color?: ColorState;
+  color?: ColorState | "none";
   /**
    * legend title
    */
@@ -64,6 +64,7 @@ export interface CalloutProps
 }
 
 const colors = {
+  none: "bg-base text-tint-900 border-tint-100",
   tint: "bg-tint-50/50 text-tint-800 border-tint-300",
   primary: "bg-primary-50/50 text-primary-800 border-primary-300",
   accent: "bg-accent-50/50 text-accent-800 border-accent-300",

package/src/components/collapsable/Collapsable.tsx

@@ -142,13 +142,13 @@ export const Collapsable = ({
           "fabric-collapsableHead",
           "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70",
           headerClassName,
-          stickyHeader && "bg-base sticky top-0 px-2 py-1 z-10",
+          stickyHeader && "bg-base sticky top-0 py-1 z-10",
           iconAlign === "end" ? "flex-row-reverse" : "flex-row",
         )}
         onClick={() => !disabled && setOpenState(!openState)}
       >
         <Icon size="1.125em" icon={openState ? iconOpen : iconClosed} rtlFlip />
-        <div className="flex-1 px-2">{head}</div>
+        <div className="flex-1">{head}</div>
       </div>
       {openState && (
         <div

package/src/components/divider/Divider.tsx

@@ -32,10 +32,6 @@ import {
 import { getColor } from "../../utils";
 
 export interface DividerProps extends CssProp, Partial<ChildProp> {
-  /**
-   * apply text bg
-   */
-  fill?: boolean;
   /**
    * vertical rule
    */
@@ -52,6 +48,10 @@ export interface DividerProps extends CssProp, Partial<ChildProp> {
    * text alignment
    */
   align?: "start" | "end" | "center";
+  /**
+   * divider style
+   */
+  style?: "solid" | "dashed" | "dotted";
 }
 
 export const Divider = ({
@@ -59,7 +59,7 @@ export const Divider = ({
   color = "tint-300",
   vertical,
   labelClassName,
-  fill,
+  style,
   align = "start",
   className,
 }: DividerProps) => {
@@ -67,7 +67,7 @@ export const Divider = ({
     ({ flex, className }: KeyValue) => {
       return (
         <hr
-          style={{ flex, borderColor: getColor(color) }}
+          style={{ flex, borderColor: getColor(color), borderStyle: style }}
           className={classNames(
             className,
             vertical && "vertical",
@@ -85,7 +85,7 @@ export const Divider = ({
   return children ? (
     <div
       className={classNames(
-        "flex flex-nowrap items-center",
+        "flex flex-nowrap items-center fabric-divider",
         vertical && "flex-col",
         className,
       )}
@@ -94,7 +94,9 @@ export const Divider = ({
       <div
         className={classNames(
           "px-2 whitespace-nowrap",
-          vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal",
+          vertical
+            ? "fabric-divider-label--vertical"
+            : "fabric-divider-label--horizontal",
           labelClassName,
           "rounded-full text-[0.75em]",
           vertical && "origin-center -rotate-90 z-1",

package/src/components/icon/Icon.tsx

@@ -68,6 +68,7 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
    * apply animation
    */
   animate?: "spin" | "pulse" | "bounce";
+  disabled?: boolean;
   /**
    * click handler
    */
@@ -95,6 +96,7 @@ export const Icon = ({
   rtlFlip,
   animate,
   rounded,
+  disabled,
   viewBox = "0 0 24 24",
   className,
   onClick,
@@ -162,6 +164,7 @@ export const Icon = ({
         !rounded && "rounded",
         rounded && "rounded-full",
         animate && `animate-${animate}`,
+        !!onClick && disabled && "opacity-30 pointer-events-none",
         className,
       )}
       onClick={onClick}

package/src/components/navigator/Navigator.tsx

@@ -34,12 +34,16 @@ import {
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
+import { isEmpty } from "@react-fabric/utilities";
 
 export interface NavigatorProps
   extends CssProp,
     AriaProps,
     TestProps,
     Partial<ChildProp> {
+  length?: number;
+  current?: number;
+  disableKeyHandlers?: boolean;
   /**
    * navigator button color
    */
@@ -55,18 +59,27 @@ export const Navigator = ({
   onNavigate,
   color,
   children,
+  length,
+  current,
+  disableKeyHandlers,
   ...aria
 }: NavigatorProps) => {
-  const navPrev = useCallback(() => onNavigate(-1), [onNavigate]);
-  const navNext = useCallback(() => onNavigate(+1), [onNavigate]);
+  const navPrev = useCallback(
+    () => (isEmpty(current) || current !== 0) && onNavigate(-1),
+    [onNavigate, current],
+  );
+  const navNext = useCallback(
+    () => (isEmpty(current) || current + 1 < (length ?? 0)) && onNavigate(+1),
+    [onNavigate, current, length],
+  );
   return (
     <div
       data-ref="navigator"
       className={classNames(className, "inline-flex items-center leading-none")}
       {...aria}
     >
-      <HotKey keyCombo="left" handler={navPrev} />
-      <HotKey keyCombo="right" handler={navNext} />
+      {!disableKeyHandlers && <HotKey keyCombo="left" handler={navPrev} />}
+      {!disableKeyHandlers && <HotKey keyCombo="right" handler={navNext} />}
       <Icon
         rtlFlip
         color={color}
@@ -74,7 +87,8 @@ export const Navigator = ({
         aria-label="previous"
         data-ref="previous"
         icon={CoreIcons.chevronLeft}
-        onClick={(e) => [e.stopPropagation(), onNavigate(-1)]}
+        disabled={!isEmpty(current) && current === 0}
+        onClick={(e) => [e.stopPropagation(), navPrev()]}
       />
       {children}
       <Icon
@@ -84,7 +98,8 @@ export const Navigator = ({
         aria-label="next"
         data-ref="next"
         icon={CoreIcons.chevronRight}
-        onClick={(e) => [e.stopPropagation(), onNavigate(1)]}
+        disabled={!isEmpty(current) && current + 1 === length}
+        onClick={(e) => [e.stopPropagation(), navNext()]}
       />
     </div>
   );