@react-fabric/core 1.0.0-beta.61 → 1.0.0-beta.63

package/css/theme/_utilities.css

@@ -40,7 +40,7 @@
 @variant dark (&:where([data-color-scheme="dark"], [data-color-scheme="dark"] *));
 
 @utility area-* {
-  grid-area: --value([ *]);
+  grid-area: --value([*]);
 }
 
 @utility area-content {
@@ -93,20 +93,6 @@
   font-variant: small-caps;
 }
 
-@utility scroll-hide {
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-}
-
-@utility scroll-thin {
-  &::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-  }
-}
-
 @utility sectioned {
   display: grid;
   grid-template: "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
@@ -115,7 +101,7 @@
 @utility scroll-snap-start {
   scroll-snap-type: both proximity;
 
-  & > * {
+  > * {
     scroll-snap-align: start;
   }
 }
@@ -123,7 +109,7 @@
 @utility scroll-snap-center {
   scroll-snap-type: both proximity;
 
-  & > * {
+  > * {
     scroll-snap-align: center;
   }
 }
@@ -131,13 +117,13 @@
 @utility scroll-snap-end {
   scroll-snap-type: both proximity;
 
-  & > * {
+  > * {
     scroll-snap-align: end;
   }
 }
 
 @utility break-words {
-  word-break: break-word;
+  word-break: word-break;
 }
 
 @utility outline-thin {
@@ -152,46 +138,30 @@
   color: var(--color-accent-600);
   text-decoration: underline dotted;
 
-  &:hover {
+  :hover {
     text-decoration: underline solid;
   }
 }
 
 @utility bg-odd {
-  background-color: color-mix(
-    in oklab,
-    var(--fabric-bg) 99%,
-    var(--color-tint)
-  );
+  background-color: color-mix(in oklab, var(--fabric-bg) 99%, var(--color-tint));
 }
 
 @utility bg-even {
-  background-color: color-mix(
-    in oklab,
-    var(--fabric-bg) 92%,
-    var(--color-tint)
-  );
+  background-color: color-mix(in oklab, var(--fabric-bg) 92%, var(--color-tint));
 }
 
 @utility bg-alternate {
-  & > :nth-child(even) {
-    background-color: color-mix(
-      in oklab,
-      var(--fabric-bg) 92%,
-      var(--color-tint)
-    );
+  > :nth-child(even) {
+    background-color: color-mix(in oklab, var(--fabric-bg) 92%, var(--color-tint));
   }
 
-  & > :nth-child(odd) {
-    background-color: color-mix(
-      in oklab,
-      var(--fabric-bg) 99%,
-      var(--color-tint)
-    );
+  > :nth-child(odd) {
+    background-color: color-mix(in oklab, var(--fabric-bg) 99%, var(--color-tint));
   }
 }
 
-@utility bg-base {
+@utility bg-default {
   background-color: var(--bg-color-base);
 }
 
@@ -223,7 +193,7 @@
   background-color: var(--bg-color-invert);
 }
 
-@utility text-reset {
+@utility text-default {
   color: var(--text-color-base);
 }
 
@@ -251,20 +221,20 @@
   color: var(--text-color-invert);
 }
 
-@utility border-base {
+@utility border-default {
   border-color: var(--border-color-base);
 }
 
-@utility border-dimmed {
-  border-color: var(--border-color-dimmed);
+@utility border-bright {
+  border-color: var(--border-color-bright);
 }
 
-@utility border-muted {
-  border-color: var(--border-color-muted);
+@utility border-soft {
+  border-color: var(--border-color-soft);
 }
 
 @utility border-gray {
-  border-color: var(--color-tint);
+  border-color: var(--border-color-gray);
 }
 
 @utility border-dark {
@@ -275,16 +245,16 @@
   border-color: var(--border-color-light);
 }
 
-@utility outline-base {
+@utility outline-default {
   outline-color: var(--border-color-base);
 }
 
-@utility outline-dimmed {
-  outline-color: var(--border-color-dimmed);
+@utility outline-bright {
+  outline-color: var(--border-color-bright);
 }
 
-@utility outline-muted {
-  outline-color: var(--border-color-muted);
+@utility outline-soft {
+  outline-color: var(--border-color-soft);
 }
 
 @utility outline-gray {
@@ -299,16 +269,16 @@
   outline-color: var(--border-color-light);
 }
 
-@utility stroke-base {
+@utility stroke-default {
   stroke: var(--border-color-base);
 }
 
-@utility stroke-dimmed {
-  stroke: var(--border-color-dimmed);
+@utility stroke-bright {
+  stroke: var(--border-color-bright);
 }
 
-@utility stroke-muted {
-  stroke: var(--border-color-muted);
+@utility stroke-soft {
+  stroke: var(--border-color-soft);
 }
 
 @utility stroke-gray {
@@ -323,7 +293,7 @@
   stroke: var(--border-color-light);
 }
 
-@utility fill-base {
+@utility fill-default {
   fill: var(--bg-color-base);
 }
 
@@ -351,12 +321,8 @@
   fill: var(--bg-color-invert);
 }
 
-@utility gap-* {
-  &:where(.fabric-row) {
-    --gutter: calc(var(--spacing) * --value(integer));
-
-    gap: 0 !important;
-  }
+@utility gutter-* {
+  --gutter: calc(var(--spacing) * --value(integer));
 }
 
 @utility span-* {
@@ -364,178 +330,90 @@
 }
 
 @utility grid-cols-repeat-* {
-  grid-template-columns: repeat(
-    auto-fill,
-    minmax(min(--value([ *]), 100%), 1fr)
-  );
-  grid-template-columns: repeat(
-    auto-fill,
-    minmax(min(calc(var(--spacing) * --value(integer)), 100%), 1fr)
-  );
-}
-
-@media (min-width: theme(screens.xs)) {
-  .hide-xs {
-    @apply hidden;
-  }
-
-  @media (max-width: theme(screens.sm)) {
-    .hide-xs-only {
-      @apply hidden;
-    }
-
-    .show-sm-only,
-    .show-md-only,
-    .show-lg-only,
-    .show-xl-only,
-    .show-2xl-only {
-      @apply hidden;
-    }
-  }
+  grid-template-columns: repeat(auto-fill, minmax(min(--value([*]), 100%), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--spacing) * --value(integer)), 100%), 1fr));
 }
 
-@media (min-width: theme(screens.sm)) {
-  .hide-sm {
-    @apply hidden;
-  }
+@variant not-2xs (@media (width >= theme(--breakpoint-xs)));
 
-  @media (max-width: theme(screens.md)) {
-    .hide-sm-only {
-      @apply hidden;
-    }
-
-    .show-xs-only,
-    .show-md-only,
-    .show-lg-only,
-    .show-xl-only,
-    .show-2xl-only {
-      @apply hidden;
-    }
-  }
-}
+@variant not-xs (@media ((width < theme(--breakpoint-xs)) or (width >= theme(--breakpoint-sm))));
 
-@media (min-width: theme(screens.md)) {
-  .hide-md {
-    @apply hidden;
-  }
+@variant not-sm (@media ((width < theme(--breakpoint-sm)) or (width >= theme(--breakpoint-md))));
 
-  @media (max-width: theme(screens.lg)) {
-    .hide-md-only {
-      @apply hidden;
-    }
-
-    .show-xs-only,
-    .show-sm-only,
-    .show-lg-only,
-    .show-xl-only,
-    .show-2xl-only {
-      @apply hidden;
-    }
-  }
-}
+@variant not-md (@media ((width < theme(--breakpoint-md)) or (width >= theme(--breakpoint-lg))));
 
-@media (min-width: theme(screens.lg)) {
-  .hide-lg {
-    @apply hidden;
-  }
+@variant not-lg (@media ((width < theme(--breakpoint-lg)) or (width >= theme(--breakpoint-xl))));
 
-  @media (max-width: theme(screens.xl)) {
-    .hide-lg-only {
-      @apply hidden;
-    }
-
-    .show-xs-only,
-    .show-sm-only,
-    .show-md-only,
-    .show-xl-only,
-    .show-2xl-only {
-      @apply hidden;
-    }
-  }
-}
+@variant not-xl (@media ((width < theme(--breakpoint-xl)) or (width >= theme(--breakpoint-2xl))));
 
-@media (min-width: theme(screens.xl)) {
-  .hide-xl {
-    @apply hidden;
-  }
+@variant not-2xl (@media (width < theme(--breakpoint-2xl)));
 
-  @media (max-width: theme(screens.2xl)) {
-    .hide-xl-only {
-      @apply hidden;
-    }
-
-    .show-xs-only,
-    .show-sm-only,
-    .show-md-only,
-    .show-lg-only,
-    .show-2xl-only {
-      @apply hidden;
-    }
-  }
-}
+@variant only-2xs (@media ((width >= 0) and (width < theme(--breakpoint-xs))));
 
-@media (min-width: theme(screens.2xl)) {
-  .hide-2xl,
-  .hide-2xl-only {
-    @apply hidden;
-  }
+@variant only-xs (@media ((width >= theme(--breakpoint-xs)) and (width < theme(--breakpoint-sm))));
 
-  .show-xs-only,
-  .show-sm-only,
-  .show-md-only,
-  .show-lg-only,
-  .show-xl-only {
-    @apply hidden;
-  }
-}
+@variant only-sm (@media ((width >= theme(--breakpoint-sm)) and (width < theme(--breakpoint-md))));
 
-@media (max-width: theme(screens.xs)) {
-  .show-xs,
-  .show-sm,
-  .show-md,
-  .show-lg,
-  .show-xl,
-  .show-2xl {
-    @apply hidden;
-  }
-}
+@variant only-md (@media ((width >= theme(--breakpoint-md)) and (width < theme(--breakpoint-lg))));
 
-@media (max-width: theme(screens.sm)) {
-  .show-sm,
-  .show-md,
-  .show-lg,
-  .show-xl,
-  .show-2xl {
-    @apply hidden;
-  }
-}
+@variant only-lg (@media ((width >= theme(--breakpoint-lg)) and (width < theme(--breakpoint-xl))));
 
-@media (max-width: theme(screens.md)) {
-  .show-md,
-  .show-lg,
-  .show-xl,
-  .show-2xl {
-    @apply hidden;
-  }
-}
+@variant only-xl (@media ((width >= theme(--breakpoint-xl)) and (width < theme(--breakpoint-2xl))));
 
-@media (max-width: theme(screens.lg)) {
-  .show-lg,
-  .show-xl,
-  .show-2xl {
-    @apply hidden;
-  }
-}
+@variant only-2xl (@media (width >= theme(--breakpoint-2xl)));
 
-@media (max-width: theme(screens.xl)) {
-  .show-xl,
-  .show-2xl {
-    @apply hidden;
-  }
-}
+@variant @not-4xs (@container (width >= theme(--container-3xs)));
 
-@media (max-width: theme(screens.2xl)) {
-  .show-2xl {
-    @apply hidden;
-  }
-}
+@variant @not-3xs (@container ((width < theme(--container-3xs)) or (width >= theme(--container-2xs))));
+
+@variant @not-2xs (@container ((width < theme(--container-2xs)) or (width >= theme(--container-xs))));
+
+@variant @not-xs (@container ((width < theme(--container-xs)) or (width >= theme(--container-sm))));
+
+@variant @not-sm (@container ((width < theme(--container-sm)) or (width >= theme(--container-md))));
+
+@variant @not-md (@container ((width < theme(--container-md)) or (width >= theme(--container-lg))));
+
+@variant @not-lg (@container ((width < theme(--container-lg)) or (width >= theme(--container-xl))));
+
+@variant @not-xl (@container ((width < theme(--container-xl)) or (width >= theme(--container-2xl))));
+
+@variant @not-2xl (@container ((width < theme(--container-2xl)) or (width >= theme(--container-3xl))));
+
+@variant @not-3xl (@container ((width < theme(--container-3xl)) or (width >= theme(--container-4xl))));
+
+@variant @not-4xl (@container ((width < theme(--container-4xl)) or (width >= theme(--container-5xl))));
+
+@variant @not-5xl (@container ((width < theme(--container-5xl)) or (width >= theme(--container-6xl))));
+
+@variant @not-6xl (@container ((width < theme(--container-6xl)) or (width >= theme(--container-7xl))));
+
+@variant @not-7xl (@container (width < theme(--container-7xl)));
+
+@variant @only-4xs (@container ((width >= 0) and (width < theme(--container-3xs))));
+
+@variant @only-3xs (@container ((width >= theme(--container-3xs)) and (width < theme(--container-2xs))));
+
+@variant @only-2xs (@container ((width >= theme(--container-2xs)) and (width < theme(--container-xs))));
+
+@variant @only-xs (@container ((width >= theme(--container-xs)) and (width < theme(--container-sm))));
+
+@variant @only-sm (@container ((width >= theme(--container-sm)) and (width < theme(--container-md))));
+
+@variant @only-md (@container ((width >= theme(--container-md)) and (width < theme(--container-lg))));
+
+@variant @only-lg (@container ((width >= theme(--container-lg)) and (width < theme(--container-xl))));
+
+@variant @only-xl (@container ((width >= theme(--container-xl)) and (width < theme(--container-2xl))));
+
+@variant @only-2xl (@container ((width >= theme(--container-2xl)) and (width < theme(--container-3xl))));
+
+@variant @only-3xl (@container ((width >= theme(--container-3xl)) and (width < theme(--container-4xl))));
+
+@variant @only-4xl (@container ((width >= theme(--container-4xl)) and (width < theme(--container-5xl))));
+
+@variant @only-5xl (@container ((width >= theme(--container-5xl)) and (width < theme(--container-6xl))));
+
+@variant @only-6xl (@container ((width >= theme(--container-6xl)) and (width < theme(--container-7xl))));
+
+@variant @only-7xl (@container (width >= theme(--container-7xl)));

package/css/theme/index.css

@@ -25,12 +25,10 @@
 @import "./_utilities.css";
 
 @theme static {
-  --font-sans: "Avenir Next", Avenir, "Noto Sans", Roboto, "Helvetica Neue",
-    "Segoe UI", Arial, sans-serif, BlinkMacSystemFont, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-serif: "Noto Serif", Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono: "Noto Sans Mono", Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
+  --font-sans:
+    "Noto Sans Kufi Arabic", "Noto Sans", "Noto Color Emoji", Arial, sans-serif;
+  --font-serif: "Noto Serif", Times, serif;
+  --font-mono: "Noto Sans Mono", Menlo, Monaco, Consolas, monospace;
 }
 
 @theme static {

package/dist/cjs/components/actionLabel/ActionLabel.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It supports custom alignment, disabled states, and can be easily styled with additional CSS classes.
  *
  * @param {ActionLabelProps} props - The properties for the ActionLabel component.
- * @returns {JSX.Element} The rendered ActionLabel component.
+ * @returns {React.ReactElement} The rendered ActionLabel component.
  *
  * @example
  * ```jsx

package/dist/cjs/components/animations/Animations.js

@@ -6,8 +6,8 @@ var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
 var jsxRuntime = require('react/jsx-runtime');
-var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
+var getColor = require('../../utils/getColor.js');
 
 var _excluded = ["className", "color", "strokeColor", "type"],
   _excluded2 = ["className"];
@@ -20,7 +20,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It also allows customization of the icon color and stroke color.
  *
  * @param {AnimationProps} props - The properties for the AnimationIndicator component.
- * @returns {JSX.Element} The rendered AnimationIndicator component.
+ * @returns {React.ReactElement} The rendered AnimationIndicator component.
  *
  * @example
  * ```jsx
@@ -91,7 +91,7 @@ var AnimationIndicator = function AnimationIndicator(_ref) {
  * @param {number | string} [props.size="2rem"] - The size of the loader icon.
  * @param {string} props.icon - The icon to be displayed as the loader.
  * @param {"sm" | "md" | "lg"} [props.maskBlur] - The blur effect for the background mask.
- * @returns {JSX.Element} The rendered AnimationLoader component.
+ * @returns {React.ReactElement} The rendered AnimationLoader component.
  */
 var AnimationLoader = function AnimationLoader(_ref2) {
   var _ref2$color = _ref2.color,
@@ -123,7 +123,7 @@ var AnimationLoader = function AnimationLoader(_ref2) {
  * @param {Object} props - The properties for the LoadingBars component.
  * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the bars.
  * @param {number | string} [props.size="2rem"] - The size of the bars.
- * @returns {JSX.Element} The rendered LoadingBars component.
+ * @returns {React.ReactElement} The rendered LoadingBars component.
  *
  * @example
  * ```jsx
@@ -146,7 +146,7 @@ var LoadingBars = function LoadingBars(props) {
  * @param {Object} props - The properties for the LoadingSpinner component.
  * @param {ColorType | PaletteType | string} [props.color="tint-700"] - The color of the spinner.
  * @param {number | string} [props.size="2rem"] - The size of the spinner.
- * @returns {JSX.Element} The rendered LoadingSpinner component.
+ * @returns {React.ReactElement} The rendered LoadingSpinner component.
  *
  * @example
  * ```jsx
@@ -168,7 +168,7 @@ var LoadingSpinner = function LoadingSpinner(props) {
  * providing a visual placeholder for content that is being loaded.
  *
  * @param {CssProp} props - The properties for the Skeleton component.
- * @returns {JSX.Element} The rendered Skeleton component.
+ * @returns {React.ReactElement} The rendered Skeleton component.
  *
  * @example
  * ```jsx
@@ -214,7 +214,7 @@ var Skeleton = function Skeleton(_ref3) {
  * A component that displays a loading animation with a top border.
  * It is typically used to indicate that content is being loaded in pages and page sections.
  *
- * @returns {JSX.Element} The rendered Loading component.
+ * @returns {React.ReactElement} The rendered Loading component.
  */
 var LoadingLine = function LoadingLine() {
   return /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/components/avatar/Avatar.js

@@ -29,7 +29,7 @@ var SizeMap = {
  * It uses the Boring Avatars library for generating fallback avatars based on the user's name.
  *
  * @param {AvatarProps} props - The properties for the Avatar component.
- * @returns {JSX.Element} The rendered Avatar component.
+ * @returns {React.ReactElement} The rendered Avatar component.
  *
  * @example
  * ```jsx

package/dist/cjs/components/avatar/AvatarGroup.js

@@ -25,7 +25,7 @@ var SizeMap = {
  * It automatically calculates the number of additional avatars based on the `totalCount` prop and the number of children provided.
  *
  * @param {AvatarGroupProps} props - The properties for the AvatarGroup component.
- * @returns {JSX.Element} The rendered AvatarGroup component.
+ * @returns {React.ReactElement} The rendered AvatarGroup component.
  *
  * @example
  * ```jsx

package/dist/cjs/components/badge/Badge.js

@@ -5,34 +5,13 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
-var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
+var getIconProps = require('../../utils/getIconProps.js');
+var Icon = require('../icon/Icon.js');
 
 var _excluded = ["ref", "className", "value", "max", "ping", "block", "inline", "placement", "children", "forButton", "icon"];
 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; }
-/**
- * Utility function to get badge properties from a badge value or object.
- * It checks if the badge is an object and returns its properties,
- *
- * @param {string | number | BadgeType} badge - The badge value or object.
- * @returns {AnyObject} An object containing badge properties.
- */
-var getBadgeProps = function getBadgeProps(badge) {
-  if (utilities.isObject(badge) && ! /*#__PURE__*/react.isValidElement(badge)) {
-    return Object.assign({
-      forButton: true,
-      placement: ""
-    }, badge);
-  } else {
-    return {
-      value: badge,
-      forButton: true,
-      placement: ""
-    };
-  }
-};
-
 /**
  * A component that displays a badge with a value, icon, and optional ping animation.
  * It can be used to indicate notifications, messages, or other important information.
@@ -40,7 +19,7 @@ var getBadgeProps = function getBadgeProps(badge) {
  * It can also wrap children elements, allowing for flexible usage in buttons or other components.
  *
  * @param {BadgeProps} props - The properties for the Badge component.
- * @returns {JSX.Element} The rendered Badge component.
+ * @returns {React.ReactElement} The rendered Badge component.
  *
  * @example
  * ```jsx
@@ -67,7 +46,7 @@ var Badge = function Badge(_ref) {
     icon = _ref.icon,
     rest = _objectWithoutProperties(_ref, _excluded);
   var label = react.useMemo(function () {
-    if ( /*#__PURE__*/react.isValidElement(value)) {
+    if (/*#__PURE__*/react.isValidElement(value)) {
       return value;
     }
     if (!utilities.isNil(value)) {
@@ -96,10 +75,9 @@ var Badge = function Badge(_ref) {
       children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "p-1",
         children: label
-      }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({}, Icon.getIconProps(icon)))]
+      }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({}, getIconProps.getIconProps(icon)))]
     })]
   });
 };
 
 exports.Badge = Badge;
-exports.getBadgeProps = getBadgeProps;

package/dist/cjs/components/breadcrumbs/Breadcrumbs.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It automatically manages the display of overflow items when there are too many links to fit in the available space, providing a dropdown for additional links.
  *
  * @param {BreadcrumbProps} props - The properties for the Breadcrumbs component.
- * @returns {JSX.Element} The rendered Breadcrumbs component.
+ * @returns {React.ReactElement} The rendered Breadcrumbs component.
  *
  * @example
  * ```jsx