@react-fabric/core 1.0.0-beta.4 → 1.0.0-beta.40

package/src/components/navigator/Navigator.tsx

@@ -22,21 +22,28 @@
  */
 
 import classNames from "classnames";
+import { useCallback } from "react";
 import { HotKey } from "../../hotkeys/HotKey";
 import {
   type AriaProps,
+  type ChildProp,
   type ColorType,
   type CssProp,
+  type PaletteType,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
 
-export interface NavigatorProps extends CssProp, AriaProps, TestProps {
+export interface NavigatorProps
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    Partial<ChildProp> {
   /**
    * navigator button color
    */
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   /**
    * navigation handler
    */
@@ -47,28 +54,35 @@ export const Navigator = ({
   className,
   onNavigate,
   color,
+  children,
   ...aria
 }: NavigatorProps) => {
+  const navPrev = useCallback(() => onNavigate(-1), [onNavigate]);
+  const navNext = useCallback(() => onNavigate(+1), [onNavigate]);
   return (
     <div
-      className={classNames(className, "inline-block leading-none")}
+      data-ref="navigator"
+      className={classNames(className, "inline-flex items-center leading-none")}
       {...aria}
     >
-      <HotKey keyCombo="left" handler={() => onNavigate(-1)} />
-      <HotKey keyCombo="right" handler={() => onNavigate(1)} />
+      <HotKey keyCombo="left" handler={navPrev} />
+      <HotKey keyCombo="right" handler={navNext} />
       <Icon
         rtlFlip
         color={color}
         className="text-[1em] p-1"
         aria-label="previous"
+        data-ref="previous"
         icon={CoreIcons.chevronLeft}
         onClick={(e) => [e.stopPropagation(), onNavigate(-1)]}
       />
+      {children}
       <Icon
         rtlFlip
         className="text-[1em] p-1"
         color={color}
         aria-label="next"
+        data-ref="next"
         icon={CoreIcons.chevronRight}
         onClick={(e) => [e.stopPropagation(), onNavigate(1)]}
       />

package/src/components/panel/Panel.tsx

@@ -38,7 +38,6 @@ import {
 import { CoreIcons } from "../../types/icons";
 import { Loading } from "../animations/Animations";
 import { Icon } from "../icon/Icon";
-import classes from "./Panel.module.css";
 
 export interface PanelProps
   extends CssProp,
@@ -146,7 +145,7 @@ export const Panel = ({
   return (
     <div
       className={classNames(
-        classes.panel,
+        "fabric-panel",
         className,
         "rounded-capped overflow-hidden outline grid",
         expanded ? "fixed inset-4 z-50" : "relative",
@@ -172,16 +171,17 @@ export const Panel = ({
       <header
         role="none"
         className={classNames(
-          classes.panelHeader,
+          "fabric-panelHeader",
           headerClassName,
           "flex flex-nowrap items-center area-head",
         )}
+        data-ref="panelHeader"
         onClick={collapsable ? toggleCollapse : undefined}
       >
         {onBack && (
           <Icon
             data-ref="panelBack"
-            className={classNames(classes.panelAction, "cursor-pointer")}
+            className={classNames("fabric-panelAction", "cursor-pointer")}
             icon={CoreIcons.chevronLeft}
             onClick={onBack}
           />
@@ -204,7 +204,7 @@ export const Panel = ({
         >
           {title}
         </div>
-        <div className="px-1">{actions}</div>
+        <div className="px-1 leading-none">{actions}</div>
         {hasTools && (
           <div
             role="none"
@@ -214,7 +214,7 @@ export const Panel = ({
             {expandable && (
               <Icon
                 data-ref="panelExpand"
-                className={classNames(classes.panelAction, "cursor-pointer")}
+                className={classNames("fabric-panelAction", "cursor-pointer")}
                 icon={expanded ? CoreIcons.minimize : CoreIcons.maximize}
                 onClick={toggleExpand}
               />
@@ -222,7 +222,7 @@ export const Panel = ({
             {!expanded && collapsable && (
               <Icon
                 data-ref="panelCollapse"
-                className={classNames(classes.panelAction, "cursor-pointer")}
+                className={classNames("fabric-panelAction", "cursor-pointer")}
                 icon={collapsed ? CoreIcons.expand : CoreIcons.collapse}
                 onClick={toggleCollapse}
               />
@@ -230,7 +230,7 @@ export const Panel = ({
             {!expanded && onClose && (
               <Icon
                 data-ref="panelClose"
-                className={classNames(classes.panelAction, "cursor-pointer")}
+                className={classNames("fabric-panelAction", "cursor-pointer")}
                 icon={CoreIcons.close}
                 onClick={onClose}
               />
@@ -240,8 +240,9 @@ export const Panel = ({
       </header>
       {(!collapsed || expanded) && (
         <div
+          data-ref="panelBody"
           className={classNames(
-            classes.panelBody,
+            "fabric-panelBody",
             "area-content grid overflow-hidden",
           )}
         >

package/src/components/panel/PanelGroup.tsx

@@ -28,7 +28,6 @@ import {
   useMemoDebugger,
 } from "../../hooks/useEffectDebugger";
 import { type ChildrenProp } from "../../types";
-import classes from "./Panel.module.css";
 
 export interface PanelGroupProps extends ChildrenProp {
   /**
@@ -81,7 +80,7 @@ export const PanelGroup = ({
     <div
       data-ref="panelGroup"
       className={classNames(
-        classes.panelGroup,
+        "fabric-panelGroup",
         "flex flex-col overflow-auto area-content p-px",
       )}
     >

package/src/components/progress/ProgressBar.tsx

@@ -24,9 +24,8 @@
 import { Format } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
-import { type ColorType } from "../../types";
-import { getColorClass } from "../../utils";
-import classes from "./Progress.module.css";
+import { type PaletteType, type ColorType } from "../../types";
+import { getColor } from "../../utils";
 
 export interface ProgressProps {
   /**
@@ -40,7 +39,7 @@ export interface ProgressProps {
   /**
    * color
    */
-  color?: ColorType;
+  color?: ColorType | PaletteType;
   /**
    * animate
    */
@@ -64,7 +63,7 @@ const SizeMap: KeyValue = {
 export const ProgressBar = ({
   value = 0,
   size,
-  color = "primary",
+  color = "primary-500",
   label = "",
   animate,
 }: ProgressProps) => {
@@ -87,12 +86,12 @@ export const ProgressBar = ({
   return (
     <div
       className={classNames(
-        classes.progressbar,
-        getColorClass(color),
+        "fabric-progressbar",
         "block bg-dimmed relative rounded font-bold overflow-hidden whitespace-nowrap",
       )}
       style={{
         ...progressVar,
+        color: getColor(color),
         minHeight: SizeMap[size ?? ""],
         fontSize: SizeMap[size ?? ""],
       }}
@@ -106,8 +105,8 @@ export const ProgressBar = ({
       )}
       <div
         className={classNames(
-          classes.progressTrack,
-          animate && classes.progressAnimate,
+          "fabric-progressTrack",
+          animate && "fabric-progressAnimate",
           "h-full overflow-clip bg-current relative z-0",
         )}
       />

package/src/components/progress/ProgressCircle.tsx

@@ -24,8 +24,8 @@
 import { Format } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
-import { type ColorType } from "../../types";
-import { getColorClass } from "../../utils";
+import { type PaletteType, type ColorType } from "../../types";
+import { getColor } from "../../utils";
 
 export interface ProgressProps {
   /**
@@ -39,7 +39,7 @@ export interface ProgressProps {
   /**
    * color
    */
-  color?: ColorType;
+  color?: ColorType | PaletteType;
 }
 
 const SizeMap: KeyValue = {
@@ -53,7 +53,7 @@ const SizeMap: KeyValue = {
 export const ProgressCircle = ({
   value = 0,
   size = "sm",
-  color = "primary",
+  color = "primary-500",
 }: ProgressProps) => {
   /** ***************** make sure value is between 0 and 100 *******************/
   const actualValue = useMemoDebugger(
@@ -75,12 +75,9 @@ export const ProgressCircle = ({
   /** ***************** component *******************/
   return (
     <div
-      className={classNames(
-        "inline-block w-[4em] h-[4em] text-lg relative",
-        getColorClass(color),
-      )}
+      className={classNames("inline-block w-[4em] h-[4em] text-lg relative")}
       aria-hidden="true"
-      style={{ fontSize: SizeMap[size] }}
+      style={{ fontSize: SizeMap[size], color: getColor(color) }}
     >
       <svg
         viewBox="0 0 100 100"

package/src/components/tabpanel/Tab.tsx

@@ -21,24 +21,26 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { type ReactElement, useMemo } from "react";
+import { Fragment, type ReactElement, useMemo } from "react";
+import { Tooltip } from "../../overlays";
 import {
   type AriaProps,
   type BadgeType,
   type CallbackReturn,
   type ChildrenProp,
-  type ColorType,
+  type ColorState,
   type CssProp,
   type IconProps,
   type PolymorphicProps,
   type RefProp,
   type TestProps,
+  type TooltipProp,
 } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
 import { DropdownTool } from "../dropdown/DropdownTool";
 import { Icon } from "../icon/Icon";
-import classes from "./TabPanel.module.css";
 
 export interface TabProps
   extends Partial<ChildrenProp>,
@@ -46,7 +48,8 @@ export interface TabProps
     RefProp,
     AriaProps,
     TestProps,
-    IconProps {
+    IconProps,
+    TooltipProp {
   /**
    * tab id
    */
@@ -58,11 +61,11 @@ export interface TabProps
   /**
    * tab color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * tab badge
    */
-  badge?: BadgeType;
+  badge?: string | number | BadgeType;
   /**
    * disabled
    */
@@ -104,12 +107,11 @@ export const Tab = <Tag extends React.ElementType = "button">({
   onClose,
   // @ts-expect-error ignore
   active,
-  // @ts-expect-error ignore
-  minimal,
   onClick,
   tabFlex,
   color,
   actions,
+  tooltip,
   activeClassName,
   ...aria
 }: TabProps & PolymorphicProps<Tag>) => {
@@ -117,63 +119,78 @@ export const Tab = <Tag extends React.ElementType = "button">({
     return getBadgeProps(badge);
   }, [badge]);
 
+  const minimal = useMemo(() => !label, [label]);
+
+  const tooltipProps = useMemo(() => {
+    if (isString(tooltip)) return { content: tooltip };
+
+    return tooltip ?? {};
+  }, [tooltip]);
+
   const E = as ?? "button";
+  const W = tooltip ? Tooltip : Fragment;
   return (
-    <E
-      data-id={id}
-      disabled={disabled}
-      data-color={color}
-      className={classNames(
-        classes.tabButton,
-        className,
-        active && "active pointer-events-none",
-        active && activeClassName,
-        disabled && "text-tint-500 pointer-events-none",
-        tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-24",
-        "flex items-center justify-center px-1 rounded overflow-hidden",
-      )}
-      onClick={() => !active && onClick?.(id)}
-      ref={ref as AnyObject}
-      {...aria}
-    >
-      {icon && (
-        <Icon
-          icon={icon}
-          bg={iconBg}
-          color={iconColor}
-          rtlFlip={rtlFlip}
-          className="flex-content"
-        />
-      )}
-      {!minimal && (
-        <label className="flex-initial truncate text-center px-1 py-1">
-          {label}
-        </label>
-      )}
-      {badge && (
-        <Badge
-          {...badgeProps}
-          placement={minimal ? "end" : ""}
-          className={classNames("me-1", badgeProps.className)}
-        />
-      )}
-      {actions && active && (
-        <DropdownTool className="bg-base/20 me-1 z-5">{actions}</DropdownTool>
-      )}
-      {onClose && (
-        <span
-          role="none"
-          className={classNames(
-            "cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto",
-          )}
-          onClick={(e) => {
-            onClose?.();
-            e.stopPropagation();
-          }}
-        >
-          &times;
-        </span>
-      )}
-    </E>
+    <W {...tooltipProps}>
+      <E
+        data-id={id}
+        disabled={disabled}
+        data-color={color}
+        data-inner-clickable
+        className={classNames(
+          "fabric-tabButton",
+          className,
+          active && "active pointer-events-none",
+          active && activeClassName,
+          disabled && "text-tint-500 pointer-events-none",
+          tabFlex ? "flex-1" : "flex-initial max-w-36",
+          minimal ? "min-w-6" : "min-w-18",
+          "flex items-center justify-center px-1 rounded overflow-hidden",
+        )}
+        onClick={() => !active && onClick?.(id)}
+        ref={ref as AnyObject}
+        {...aria}
+      >
+        {icon && (
+          <Icon
+            icon={icon}
+            bg={iconBg}
+            color={iconColor}
+            rtlFlip={rtlFlip}
+            className="flex-content p-2"
+          />
+        )}
+        {!minimal && (
+          <label className="flex-initial truncate text-center px-1 py-1">
+            {label}
+          </label>
+        )}
+        {badge && (
+          <Badge
+            {...badgeProps}
+            placement={minimal ? "end" : ""}
+            className={classNames("me-1", badgeProps.className)}
+          />
+        )}
+        {actions && active && (
+          <DropdownTool className="bg-tint-50/20 me-1 z-5">
+            {actions}
+          </DropdownTool>
+        )}
+        {onClose && (
+          <span
+            role="none"
+            className={classNames(
+              "cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto",
+            )}
+            onClick={(e) => {
+              onClose?.();
+              e.stopPropagation();
+            }}
+          >
+            &times;
+          </span>
+        )}
+      </E>
+    </W>
   );
 };

package/src/components/tabpanel/TabPanel.tsx

@@ -25,6 +25,7 @@ import classNames from "classnames";
 import {
   Children,
   cloneElement,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -33,7 +34,6 @@ import {
 import { type CallbackReturn, type ChildrenProp } from "../../types";
 import { nodeCheck } from "../../utils";
 import { Tab } from "./Tab";
-import classes from "./TabPanel.module.css";
 
 export interface TabPanelProps extends ChildrenProp<typeof Tab> {
   /**
@@ -64,6 +64,14 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
    * tab list className
    */
   headerClassName?: string;
+  /**
+   * append element
+   */
+  append?: ReactNode;
+  /**
+   * prepend element
+   */
+  prepend?: ReactNode;
   /**
    * change handler
    */
@@ -84,6 +92,8 @@ export const TabPanel = ({
   justify,
   variant,
   tabFlex,
+  append,
+  prepend,
   gap,
   onBeforeChange,
   onChange,
@@ -124,7 +134,7 @@ export const TabPanel = ({
   return (
     <div
       className={classNames(
-        classes.tabPanel,
+        "fabric-tabPanel",
         "area-content grid bg-base overflow-hidden",
       )}
       data-orientation={orientation}
@@ -132,21 +142,33 @@ export const TabPanel = ({
     >
       <div
         className={classNames(
-          classes.tabList,
+          "fabric-tabHeader",
           headerClassName,
           justify && `justify-${justify}`,
           ["start", "end"].includes(orientation) && "flex-col",
-          "flex flex-nowrap overflow-auto scroll-thin",
+          "flex flex-nowrap overflow-hidden items-center",
         )}
-        style={{ gap }}
       >
-        {tabs.map((node: AnyObject) =>
-          cloneElement(node, {
-            tabFlex: node.props.tabFlex ?? tabFlex,
-            onClick: handleClick,
-            active: node.props.id === active,
-          }),
-        )}
+        {prepend}
+        <div
+          className={classNames(
+            "fabric-tabList",
+            justify && `justify-${justify}`,
+            ["start", "end"].includes(orientation) && "flex-col",
+            ["bottom", "end"].includes(orientation) ? "self-start" : "self-end",
+            "flex flex-1 flex-nowrap overflow-auto scroll-thin",
+          )}
+          style={{ gap }}
+        >
+          {tabs.map((node: AnyObject) =>
+            cloneElement(node, {
+              tabFlex: node.props.tabFlex ?? tabFlex,
+              onClick: handleClick,
+              active: node.props.id === active,
+            }),
+          )}
+        </div>
+        {append}
       </div>
       {rest}
       {activeTabPanel}

package/src/core/aside/Aside.tsx

@@ -45,7 +45,6 @@ import {
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
-import classes from "./Aside.module.css";
 
 export interface AsideProps
   extends IconProps,
@@ -197,9 +196,10 @@ export const Aside = ({
 
   return (
     <aside
-      className={classNames(classes.aside, className, "overflow-hidden grid")}
+      className={classNames("fabric-aside", className, "overflow-hidden grid")}
       data-align={align}
       data-flyout={peek}
+      data-loading={loading}
       data-collapsed={isCollapsed}
       style={isCollapsed ? undefined : widthStyles}
       data-testid={testId}
@@ -207,15 +207,16 @@ export const Aside = ({
     >
       <header
         className={classNames(
-          classes.asideHeader,
+          "fabric-asideHeader",
           headerClassName,
           "grid area-head items-center",
         )}
+        data-ref="asideHeader"
       >
         {title && (
           <div
             className={classNames(
-              classes.asideTitle,
+              "fabric-asideTitle",
               "truncate py-0.5 px-1 select-none pointer-events-none",
             )}
           >
@@ -225,7 +226,7 @@ export const Aside = ({
         {collapsable && (
           <Icon
             aria-label={isCollapsed ? "expand" : "collapse"}
-            className={classNames(classes.asideCollapse, "p-2 select-none")}
+            className={classNames("fabric-asideCollapse", "p-2 select-none")}
             icon={CoreIcons.chevronLeft}
             rtlFlip
             onClick={toggleCollapse}
@@ -239,12 +240,12 @@ export const Aside = ({
             color={iconColor}
             rtlFlip={rtlFlip}
             className={classNames(
-              classes.asideIcon,
+              "fabric-asideIcon",
               "p-1 text-lg select-none pointer-events-none",
             )}
           />
         )}
-        {actions && <div className={classes.asideActions}>{actions}</div>}
+        {actions && <div className={"fabric-asideActions"}>{actions}</div>}
       </header>
       {loading && <Loading />}
       {isCollapsed && (
@@ -252,14 +253,14 @@ export const Aside = ({
           role="none"
           onClick={tryPeek}
           data-ref="asidePlaceholder"
-          className={classes.asidePlaceholder}
+          className={"fabric-asidePlaceholder"}
         />
       )}
       <section
         ref={elementRef}
         data-ref="asideBody"
         className={classNames(
-          classes.asideBody,
+          "fabric-asideBody",
           bodyClassName,
           "overflow-hidden grid",
         )}
@@ -271,7 +272,7 @@ export const Aside = ({
         <div
           {...resizeHandleProps}
           className={classNames(
-            classes.asideResizer,
+            "fabric-asideResizer",
             "before:absolute before:inset-0 before:w-1 before:top-1/2 before:-translate-y-1/2 before:transition-all",
           )}
         />