@react-fabric/core 1.0.0-beta.36 → 1.0.0-beta.37

package/src/components/navigator/Navigator.tsx

@@ -22,17 +22,18 @@
  */
 
 import classNames from "classnames";
+import { useCallback } from "react";
 import { HotKey } from "../../hotkeys/HotKey";
 import {
-  type ChildProp,
   type AriaProps,
+  type ChildProp,
   type ColorType,
   type CssProp,
+  type PaletteType,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
-import { useCallback } from "react";
 
 export interface NavigatorProps
   extends CssProp,
@@ -42,7 +43,7 @@ export interface NavigatorProps
   /**
    * navigator button color
    */
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   /**
    * navigation handler
    */

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,7 +171,7 @@ export const Panel = ({
       <header
         role="none"
         className={classNames(
-          classes.panelHeader,
+          "fabric-panelHeader",
           headerClassName,
           "flex flex-nowrap items-center area-head",
         )}
@@ -182,7 +181,7 @@ export const Panel = ({
         {onBack && (
           <Icon
             data-ref="panelBack"
-            className={classNames(classes.panelAction, "cursor-pointer")}
+            className={classNames("fabric-panelAction", "cursor-pointer")}
             icon={CoreIcons.chevronLeft}
             onClick={onBack}
           />
@@ -215,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}
               />
@@ -223,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}
               />
@@ -231,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}
               />
@@ -243,7 +242,7 @@ export const Panel = ({
         <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

@@ -30,7 +30,7 @@ import {
   type BadgeType,
   type CallbackReturn,
   type ChildrenProp,
-  type ColorType,
+  type ColorState,
   type CssProp,
   type IconProps,
   type PolymorphicProps,
@@ -41,7 +41,6 @@ import {
 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>,
@@ -62,7 +61,7 @@ export interface TabProps
   /**
    * tab color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * tab badge
    */
@@ -138,7 +137,7 @@ export const Tab = <Tag extends React.ElementType = "button">({
         data-color={color}
         data-inner-clickable
         className={classNames(
-          classes.tabButton,
+          "fabric-tabButton",
           className,
           active && "active pointer-events-none",
           active && activeClassName,

package/src/components/tabpanel/TabPanel.tsx

@@ -34,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> {
   /**
@@ -135,7 +134,7 @@ export const TabPanel = ({
   return (
     <div
       className={classNames(
-        classes.tabPanel,
+        "fabric-tabPanel",
         "area-content grid bg-base overflow-hidden",
       )}
       data-orientation={orientation}
@@ -143,7 +142,7 @@ export const TabPanel = ({
     >
       <div
         className={classNames(
-          classes.tabHeader,
+          "fabric-tabHeader",
           headerClassName,
           justify && `justify-${justify}`,
           ["start", "end"].includes(orientation) && "flex-col",
@@ -153,7 +152,7 @@ export const TabPanel = ({
         {prepend}
         <div
           className={classNames(
-            classes.tabList,
+            "fabric-tabList",
             justify && `justify-${justify}`,
             ["start", "end"].includes(orientation) && "flex-col",
             ["bottom", "end"].includes(orientation) ? "self-start" : "self-end",

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,7 +196,7 @@ 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}
@@ -208,7 +207,7 @@ export const Aside = ({
     >
       <header
         className={classNames(
-          classes.asideHeader,
+          "fabric-asideHeader",
           headerClassName,
           "grid area-head items-center",
         )}
@@ -217,7 +216,7 @@ export const Aside = ({
         {title && (
           <div
             className={classNames(
-              classes.asideTitle,
+              "fabric-asideTitle",
               "truncate py-0.5 px-1 select-none pointer-events-none",
             )}
           >
@@ -227,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}
@@ -241,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 && (
@@ -254,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",
         )}
@@ -273,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",
           )}
         />

package/src/core/boundary/ErrorBoundary.tsx

@@ -29,7 +29,6 @@ import { Fragment } from "react/jsx-runtime";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
 import { usePropToggle } from "../../hooks/usePropToggle";
 import { type ChildrenProp } from "../../types";
-import classes from "./ErrorBoundary.module.css";
 import { ErrorIcon } from "./ErrorIcon";
 import { useGlobals } from "../../context/Global";
 
@@ -53,7 +52,7 @@ const ErrorMessage = ({ error, errorElement }: KeyValue) => {
   return (
     <Fragment>
       <ErrorIcon />
-      <div className={classNames(classes.boundaryMessage, "p-2")}>
+      <div className={classNames("fabric-boundaryMessage", "p-2")}>
         <EE error={error} />
       </div>
     </Fragment>
@@ -64,10 +63,12 @@ const ErrorStack = ({ error, stack }: KeyValue) => {
   const [show, toggleShow] = usePropToggle(false);
   useLogger().error(error, {}, stack);
   return (
-    <div className={classNames(classes.boundaryDetail, "overflow-hidden grid")}>
+    <div
+      className={classNames("fabric-boundaryDetail", "overflow-hidden grid")}
+    >
       <div
         className={classNames(
-          classes.boundaryLink,
+          "fabric-boundaryLink",
           "px-2 py-1 text-xs text-end",
         )}
       >
@@ -78,7 +79,7 @@ const ErrorStack = ({ error, stack }: KeyValue) => {
       {show && (
         <div
           className={classNames(
-            classes.boundaryStack,
+            "fabric-boundaryStack",
             "overflow-auto p-2 text-xs border-t",
           )}
         >
@@ -122,13 +123,13 @@ export class ErrorBoundary extends Component<
       return (
         <div
           className={classNames(
-            classes.errorBoundary,
+            "fabric-errorBoundary",
             "grid grid-rows-1 overflow-hidden p-0.5 rounded-capped",
           )}
         >
           <div
             className={classNames(
-              classes.boundaryContent,
+              "fabric-boundaryContent",
               "overflow-hidden grid rounded-capped",
             )}
           >

package/src/core/boundary/ErrorIcon.tsx

@@ -22,13 +22,12 @@
  */
 
 import classNames from "classnames";
-import classes from "./ErrorBoundary.module.css";
 
 export const ErrorIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 64 64"
-    className={classNames(classes.boundaryIcon, "size-6 m-2")}
+    className={classNames("fabric-boundaryIcon", "size-6 m-2")}
   >
     <path
       fill="#808080"

package/src/core/content/Content.tsx

@@ -34,7 +34,6 @@ import {
   type TestProps,
 } from "../../types";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
-import classes from "./Content.module.css";
 
 export interface ContentProps
   extends ChildrenProp,
@@ -89,7 +88,7 @@ export const Content = ({
       data-test-value={testValue}
       ref={resizeHandle}
       onScroll={scrollHandler}
-      className={classNames(classes.content, "area-content", className)}
+      className={classNames("fabric-content", "area-content", className)}
     >
       <ErrorBoundary>{children}</ErrorBoundary>
     </section>

package/src/core/headfoot/HeadFoot.tsx

@@ -22,27 +22,15 @@
  */
 
 import classNames from "classnames";
-import { useMemoDebugger } from "../../hooks/useEffectDebugger";
 import {
   type AriaProps,
   type ChildrenProp,
-  type ColorWithGrays,
   type CssProp,
   type TestProps,
 } from "../../types";
-import { getBgClass, getColor, getColorClass } from "../../utils";
-import classes from "./HeadFoot.module.css";
 
 interface BaseProps extends CssProp, AriaProps, ChildrenProp, TestProps {
   dir?: "ltr" | "rtl";
-  /**
-   * background color
-   */
-  bg?: ColorWithGrays | string;
-  /**
-   * background color
-   */
-  color?: ColorWithGrays | string;
 }
 
 type DefaultProps = BaseProps & { flex?: false };
@@ -58,8 +46,6 @@ const HeadFoot = ({
   as: E,
   children,
   className,
-  bg,
-  color,
   flex,
   area,
   dir,
@@ -67,37 +53,18 @@ const HeadFoot = ({
   justify = "start",
   ...aria
 }: KeyValue & { as: "header" | "footer" }) => {
-  /** ***************** style map *******************/
-  const styles = useMemoDebugger(
-    () => {
-      const s: KeyValue = {};
-      if (bg) {
-        s.backgroundColor = getColor(bg);
-      }
-      if (color) {
-        s.color = getColor(color);
-      }
-      return s;
-    },
-    [bg],
-    "HeadFoot styles",
-  );
-
   return (
     <E
       dir={dir}
       className={classNames(
-        classes.headfoot,
+        "fabric-headfoot",
         className,
-        bg && getBgClass(bg),
-        color && getColorClass(color),
         area === "head" ? "area-head" : "area-foot",
         `leading-none`,
         flex && "flex flex-nowrap",
         align && `items-${align}`,
         justify && `justify-${justify}`,
       )}
-      style={styles}
       {...aria}
     >
       {children}

package/src/core/page/Page.tsx

@@ -25,7 +25,6 @@ import classNames from "classnames";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
 import { type ChildrenProp, type IconProps, type TestProps } from "../../types";
-import classes from "./Page.module.css";
 
 export interface PageProps extends IconProps, ChildrenProp, TestProps {
   /**
@@ -68,7 +67,7 @@ export const Page = ({
       data-test-value={testValue}
       data-loading={loading}
       className={classNames(
-        classes.page,
+        "fabric-page",
         "overflow-hidden grid area-content",
         paper && "shadow-paper m-[6px] rounded-capped",
       )}
@@ -77,7 +76,7 @@ export const Page = ({
         <div
           data-ref="pageTitle"
           className={classNames(
-            classes.pageTitle,
+            "fabric-pageTitle",
             "select-none flex gap-1 items-center justify-center px-1 py-0.5 font-medium text-center",
             titleClassName,
           )}

package/src/core/responsive/Responsive.tsx

@@ -29,7 +29,6 @@ import {
   type SizeTypeWithZero,
   type TestProps,
 } from "../../types";
-import classes from "./Responsive.module.css";
 
 export interface ContainerProps
   extends AriaProps,
@@ -101,7 +100,7 @@ export const Container = ({
   return (
     <div
       className={classNames(
-        classes.container,
+        "fabric-container",
         className,
         !fullWidth && "container mx-auto",
       )}
@@ -126,7 +125,7 @@ export const Row = ({
   return (
     <div
       className={classNames(
-        classes.row,
+        "fabric-row",
         className,
         "flex",
         orient === "row" && "flex-row",
@@ -156,9 +155,9 @@ export const Col = ({
   return (
     <div
       className={classNames(
-        classes.col,
+        "fabric-col",
         className,
-        stretchContent && classes.stretchContent,
+        stretchContent && "stretchContent",
         flex === "fill" && "flex-1",
         flex === "full" && "flex-full",
         flex === "auto" && "flex-initial",

package/src/core/section/Section.tsx

@@ -24,7 +24,6 @@
 import classNames from "classnames";
 import { type ChildrenProp, type CssProp, type RefProp } from "../../types";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
-import classes from "./Section.module.css";
 
 /**
  * The section component provides a structured layout used within a page to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
@@ -43,7 +42,7 @@ export const Section = ({
       dir={dir}
       ref={ref}
       className={classNames(
-        classes.section,
+        "fabric-section",
         className,
         "grid area-content overflow-hidden",
       )}

package/src/core/theme/ThemeProvider.tsx

@@ -25,7 +25,6 @@ import { isColor } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo } from "react";
 import { type ChildrenProp } from "../../types";
-import classes from "./Theme.module.css";
 
 export interface ThemeProps {
   /**
@@ -36,9 +35,9 @@ export interface ThemeProps {
    * branding css className
    *
    * .branding {
-   *  --primary: #color;
-   *  --accent: #color;
-   *  --tint: #color;
+   *  --color-primary: #color;
+   *  --color-accent: #color;
+   *  --color-tint: #color;
    * }
    */
   branding?: string;
@@ -75,22 +74,22 @@ export const ThemeProvider = ({
   const styles = useMemo(() => {
     const ret: KeyValue = {};
     if (primaryColor && isColor(primaryColor)) {
-      ret["--primary"] = primaryColor;
+      ret["--color-primary"] = primaryColor;
     }
     if (primaryColor && !isColor(primaryColor)) {
-      ret["--primary"] = `var(--${primaryColor})`;
+      ret["--color-primary"] = `var(--color-${primaryColor})`;
     }
     if (accentColor && isColor(accentColor)) {
-      ret["--accent"] = accentColor;
+      ret["--color-accent"] = accentColor;
     }
     if (accentColor && !isColor(accentColor)) {
-      ret["--accent"] = `var(--${accentColor})`;
+      ret["--color-accent"] = `var(--color-${accentColor})`;
     }
     if (tintColor && isColor(tintColor)) {
-      ret["--tint"] = tintColor;
+      ret["--color-tint"] = tintColor;
     }
     if (tintColor && !isColor(tintColor)) {
-      ret["--tint"] = `var(--${tintColor})`;
+      ret["--color-tint"] = `var(--color-${tintColor})`;
     }
     return ret;
   }, [primaryColor, accentColor, tintColor]);
@@ -101,7 +100,7 @@ export const ThemeProvider = ({
       data-color-scheme={colorScheme}
       data-rounding={rounding}
       className={classNames(
-        classes.themeProvider,
+        "fabric-themeProvider",
         "contents theme-base",
         branding,
       )}