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

package/src/components/media/Media.tsx

@@ -25,7 +25,6 @@ import { getImageColorset } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { type AriaProps, type CssProp, type TestProps } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Button } from "../button/Button";
 import { Icon } from "../icon/Icon";
 
@@ -75,10 +74,10 @@ const loadIndicator = (
   <div
     className={classNames(
       "fabric-mediaPlaceholder",
-      "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse",
+      "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm text-gray",
     )}
   >
-    ●●●
+    <i className="icon-[svg-spinners--pulse-rings-2]" />
   </div>
 );
 
@@ -156,7 +155,7 @@ export const Image = ({
         <Icon
           size="2rem"
           className="absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-          icon={CoreIcons.mediaImageBroken}
+          icon="icon-[mdi--image-off-outline]"
         />
       )}
     </div>
@@ -272,7 +271,7 @@ export const Video = ({
               rounded
               variant="link"
               className={"fabric-mediaControlPlaceholder"}
-              icon={CoreIcons.ellipsis}
+              icon="icon-[mdi--dots-vertical]"
               aria-label="controls"
             />
             <Button
@@ -284,7 +283,7 @@ export const Video = ({
                 videoRef.current &&
                   (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
               }}
-              icon={volume ? CoreIcons.volumeOn : CoreIcons.volumeOff}
+              icon={volume ? "icon-[mdi--volume]" : "icon-[mdi--volume-mute]"}
             />
             <Button
               rounded
@@ -296,7 +295,7 @@ export const Video = ({
                   ? videoRef.current?.play()
                   : videoRef.current?.pause();
               }}
-              icon={state ? CoreIcons.pause : CoreIcons.play}
+              icon={state ? "icon-[mdi--pause]" : "icon-[mdi--play]"}
             />
           </div>
         </Fragment>
@@ -305,7 +304,7 @@ export const Video = ({
         <Icon
           size="2rem"
           className="absolute text-tint-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-          icon={CoreIcons.mediaVideoBroken}
+          icon="icon-[mdi--video-off-outline]"
         />
       )}
     </div>

package/src/components/menu/Menu.tsx

@@ -56,7 +56,6 @@ import {
   useState,
 } from "react";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
-import { CoreIcons } from "../../types/icons";
 import { cloneChildren, nodeCheck } from "../../utils";
 import { MenuItem } from "./MenuItem";
 import { type MenuProps } from "./types";
@@ -218,7 +217,7 @@ const MenuComponent = ({
           } as AnyObject) as AnyObject)}
           data-open={isOpen}
           minimal={minimal}
-          altIcon={CoreIcons.chevronRight}
+          altIcon="icon-[mdi--menu-right]"
           ref={mergeRefs(refs.setReference, ref)}
         />
       )}

package/src/components/navigator/Navigator.tsx

@@ -32,7 +32,6 @@ import {
   type PaletteType,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
 import { isEmpty } from "@react-fabric/utilities";
 
@@ -108,7 +107,7 @@ export const Navigator = ({
         className="text-[1em] p-1"
         aria-label="previous"
         data-ref="previous"
-        icon={CoreIcons.chevronLeft}
+        icon="icon-[mdi--chevron-left]"
         disabled={!isEmpty(current) && current === 0}
         onClick={(e) => [e.stopPropagation(), navPrev()]}
       />
@@ -119,7 +118,7 @@ export const Navigator = ({
         color={color}
         aria-label="next"
         data-ref="next"
-        icon={CoreIcons.chevronRight}
+        icon="icon-[mdi--chevron-right]"
         disabled={!isEmpty(current) && current + 1 === length}
         onClick={(e) => [e.stopPropagation(), navNext()]}
       />

package/src/components/panel/Panel.tsx

@@ -35,8 +35,7 @@ import {
   type ExpandProps,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
-import { Loading } from "../animations/Animations";
+import { LoadingLine } from "../animations/Animations";
 import { getIconProps, Icon, type IconProps } from "../icon/Icon";
 
 export interface PanelProps
@@ -119,7 +118,7 @@ export interface PanelProps
  * ```jsx
  * <Panel
  *   title="Panel Title"
- *   icon={CoreIcons.info}
+ *   icon="icon-[mdi--info]"
  *   actions={<button>Action</button>}
  *   expandable
  *   collapsable
@@ -216,9 +215,10 @@ export const Panel = ({
       >
         {onBack && (
           <Icon
+            rtlFlip
             data-ref="panelBack"
             className={classNames("fabric-panelAction", "cursor-pointer")}
-            icon={CoreIcons.chevronLeft}
+            icon="icon-[mdi--chevron-left]"
             onClick={onBack}
           />
         )}
@@ -248,7 +248,11 @@ export const Panel = ({
               <Icon
                 data-ref="panelExpand"
                 className={classNames("fabric-panelAction", "cursor-pointer")}
-                icon={expanded ? CoreIcons.minimize : CoreIcons.maximize}
+                icon={
+                  expanded
+                    ? "icon-[mdi--fullscreen-exit]"
+                    : "icon-[mdi--fullscreen]"
+                }
                 onClick={toggleExpand}
               />
             )}
@@ -256,7 +260,9 @@ export const Panel = ({
               <Icon
                 data-ref="panelCollapse"
                 className={classNames("fabric-panelAction", "cursor-pointer")}
-                icon={collapsed ? CoreIcons.expand : CoreIcons.collapse}
+                icon={
+                  collapsed ? "icon-[mdi--plus-box]" : "icon-[mdi--minus-box]"
+                }
                 onClick={toggleCollapse}
               />
             )}
@@ -264,7 +270,7 @@ export const Panel = ({
               <Icon
                 data-ref="panelClose"
                 className={classNames("fabric-panelAction", "cursor-pointer")}
-                icon={CoreIcons.close}
+                icon="icon-[mdi--close]"
                 onClick={onClose}
               />
             )}
@@ -279,7 +285,7 @@ export const Panel = ({
             "area-content grid overflow-hidden",
           )}
         >
-          {loading && <Loading />}
+          {loading && <LoadingLine />}
           {children}
         </div>
       )}

package/src/core/aside/Aside.tsx

@@ -23,7 +23,7 @@
 
 import classNames from "classnames";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Loading } from "../../components/animations/Animations";
+import { LoadingLine } from "../../components/animations/Animations";
 import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { useLayoutEffectDebugger } from "../../hooks/useEffectDebugger";
 import { usePropToggle } from "../../hooks/usePropToggle";
@@ -35,7 +35,6 @@ import {
   type Elements,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
 
 export interface AsideProps
@@ -111,7 +110,7 @@ export interface AsideProps
  * ```jsx
  * <Aside
  *   title="Sidebar Title"
- *   icon={CoreIcons.menu}
+ *   icon=icon-[mdi--menu]
  *   rtlFlip={true}
  *   className="custom-aside"
  *   bodyClassName="custom-aside-body"
@@ -254,7 +253,7 @@ export const Aside = ({
           <Icon
             aria-label={isCollapsed ? "expand" : "collapse"}
             className={classNames("fabric-asideCollapse", "p-2 select-none")}
-            icon={CoreIcons.chevronLeft}
+            icon="icon-[mdi--chevron-left]"
             rtlFlip
             onClick={toggleCollapse}
             data-ref="asideToggle"
@@ -271,7 +270,7 @@ export const Aside = ({
         )}
         {actions && <div className={"fabric-asideActions"}>{actions}</div>}
       </header>
-      {loading && <Loading />}
+      {loading && <LoadingLine />}
       {isCollapsed && (
         <div
           role="none"

package/src/core/page/Page.tsx

@@ -22,7 +22,7 @@
  */
 
 import classNames from "classnames";
-import { Loading } from "../../components/animations/Animations";
+import { LoadingLine } from "../../components/animations/Animations";
 import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { type ChildrenProp, type RefProp, type TestProps } from "../../types";
 
@@ -116,7 +116,7 @@ export const Page = ({
           {title}
         </div>
       )}
-      {loading && <Loading />}
+      {loading && <LoadingLine />}
       {children}
     </div>
   );

package/src/index.ts

@@ -44,7 +44,6 @@ export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
 export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
 
 export { type ModalProps } from "./types";
-export { CoreIcons } from "./types/icons";
 
 export { cloneChildren } from "./utils";
 

package/src/overlays/alert/Alert.tsx

@@ -37,7 +37,6 @@ import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
 import { Icon } from "../../components/icon/Icon";
 import { type ColorState, type Elements } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Title } from "../../typography/Title";
 import { getColor } from "../../utils";
 
@@ -256,7 +255,7 @@ export const Alert = ({
                 className="m-0"
                 color={color}
                 onClick={() => handleClose(false)}
-                icon={CoreIcons.close}
+                icon="icon-[mdi--close]"
                 aria-label="close"
               />
             </div>

package/src/overlays/flyout/Flyout.tsx

@@ -33,7 +33,7 @@ import {
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement, useCallback, useEffect } from "react";
-import { Loading } from "../../components/animations/Animations";
+import { LoadingLine } from "../../components/animations/Animations";
 import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
@@ -44,7 +44,6 @@ import {
   type Elements,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 
 export interface FlyoutProps extends AriaProps, TestProps, ChildrenProp {
   icon?: IconProps;
@@ -236,11 +235,11 @@ export const Flyout = ({
                   "fabric-panelAction",
                   "cursor-pointer p-1 text-xl self-center",
                 )}
-                icon={CoreIcons.close}
+                icon="icon-[mdi--close]"
                 onClick={() => handleClose(false)}
               />
             </Header>
-            {loading && <Loading />}
+            {loading && <LoadingLine />}
             <div
               role="dialog"
               className={classNames(

package/src/overlays/modal/Modal.tsx

@@ -33,7 +33,7 @@ import {
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement, useCallback, useEffect } from "react";
-import { Loading } from "../../components/animations/Animations";
+import { LoadingLine } from "../../components/animations/Animations";
 import { getIconProps, Icon, type IconProps } from "../../components/icon/Icon";
 import { Header } from "../../core/headfoot/HeadFoot";
 import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
@@ -44,7 +44,6 @@ import {
   type Elements,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 
 export interface ModalProps extends AriaProps, TestProps, ChildrenProp {
   icon?: IconProps;
@@ -226,11 +225,11 @@ export const Modal = ({
                     "fabric-panelAction",
                     "cursor-pointer p-1 text-xl self-center",
                   )}
-                  icon={CoreIcons.close}
+                  icon="icon-[mdi--close]"
                   onClick={() => handleClose(false)}
                 />
               </Header>
-              {loading && <Loading />}
+              {loading && <LoadingLine />}
               <div
                 role="dialog"
                 className={classNames(

package/src/overlays/toast/Toast.tsx

@@ -28,7 +28,6 @@ import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
 import { Icon } from "../../components/icon/Icon";
 import { type ColorState, type Elements } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { getColor } from "../../utils";
 
 export interface ToastProps {
@@ -175,7 +174,7 @@ export const Toast = ({
               variant="link"
               className="m-0"
               color={color}
-              icon={CoreIcons.closeAll}
+              icon="icon-[mdi--close-box-multiple-outline]"
               aria-label="close-all"
               onClick={onCloseAll}
             />
@@ -184,7 +183,7 @@ export const Toast = ({
               variant="link"
               className="m-0"
               color={color}
-              icon={CoreIcons.close}
+              icon="icon-[mdi--close]"
               aria-label="close"
               onClick={() => handleClose(false)}
             />

package/src/overlays/tooltip/Tooltip.tsx

@@ -51,7 +51,6 @@ import {
 import { Icon } from "../../components/icon/Icon";
 import { useIsRtl } from "../../hooks/useIsRtl";
 import { type RefProp, type TooltipType } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { getColor } from "../../utils";
 
 export interface TooltipProps extends TooltipType, RefProp {
@@ -159,7 +158,7 @@ export const Tooltip = ({
           className="ms-2 cursor-pointer text-dimmed flex-content opacity-75 hover:opacity-90 active:opacity-60"
           onClick={handler}
         >
-          <Icon icon={CoreIcons.copy} />
+          <Icon icon="icon-[mdi--content-copy]" />
         </span>
       );
     }

package/src/types/index.ts

@@ -34,8 +34,10 @@ export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
 
 export type ColorState =
+  | "default"
   | "primary"
   | "accent"
+  | "muted"
   | "info"
   | "danger"
   | "success"
@@ -425,11 +427,22 @@ export interface TooltipProp {
   tooltip?: string | TooltipType;
 }
 
-export interface ChildProp<T = JSX.Element> {
+export type ReactElement =
+  | React.ReactElement
+  | string
+  | number
+  | bigint
+  | Iterable<React.ReactNode>
+  | React.ReactPortal
+  | boolean
+  | null
+  | undefined;
+
+export interface ChildProp<T = ReactElement> {
   children: Elements<T>;
 }
 
-export interface ChildrenProp<T = JSX.Element> {
+export interface ChildrenProp<T = ReactElement> {
   children: Elements<T> | Array<Elements<T>>;
 }
 
@@ -460,3 +473,20 @@ export type Complete<T> = {
     ? T[P]
     : T[P] | undefined;
 };
+
+export type NestedKeys<T> = T extends object
+  ? {
+      [K in keyof T]: K extends string | number
+        ? T[K] extends object
+          ? // Check for array type explicitly and handle it
+            T[K] extends readonly any[]
+            ? T[K][number] extends object
+              ? // Array of objects/items: return key with array index notation and recurse
+                `${K}.${NestedKeys<T[K][number]>}` | `${K}`
+              : `${K}`
+            : // Standard object: return key with dot notation and recurse
+              `${K}.${NestedKeys<T[K]>}` | `${K}`
+          : `${K}`
+        : never;
+    }[keyof T]
+  : "";

package/src/typography/Copy.tsx

@@ -27,7 +27,6 @@ import { useTranslation } from "react-i18next";
 import { Button } from "../components/button/Button";
 import { Tooltip } from "../overlays/tooltip/Tooltip";
 import { type CssProp, type SizeType } from "../types";
-import { CoreIcons } from "../types/icons";
 
 /**
  * A component that provides a button to copy text to the clipboard.
@@ -63,7 +62,7 @@ export const Copy = ({ text, size, className }: CopyProps) => {
   return (
     <Tooltip content={t("action.copy")}>
       <Button
-        icon={CoreIcons.copy}
+        icon="icon-[mdi--content-copy]"
         aria-label="Copy text"
         actionMessage={t("action.copied")}
         variant="link"