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

package/src/components/button/ButtonGroup.tsx

@@ -26,7 +26,7 @@ import { cloneElement } from "react";
 import {
   type AriaProps,
   type ChildrenProp,
-  type ColorType,
+  type ColorState,
   type CssProp,
   type RefProp,
   type SizeType,
@@ -34,7 +34,6 @@ import {
 } from "../../types";
 import { cloneChildren } from "../../utils";
 import { type Button } from "./Button";
-import classes from "./Button.module.css";
 
 export interface ButtonGroupProps
   extends CssProp,
@@ -57,7 +56,7 @@ export interface ButtonGroupProps
   /**
    * button color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * full rounded edges
    */
@@ -88,11 +87,11 @@ export const ButtonGroup = ({
     <div
       data-ref="buttonGroup"
       className={classNames(
-        classes.buttonGroup,
+        "fabric-buttonGroup",
         className,
         fullWidth ? "flex" : "inline-flex",
         "flex-nowrap align-middle rounded",
-        vertical && classes.vertical,
+        vertical && "vertical",
         vertical && "flex-col items-stretch",
       )}
       {...aria}

package/src/components/button/ToggleButtonGroup.tsx

@@ -34,7 +34,6 @@ import {
 } from "../../types";
 import { cloneChildren } from "../../utils";
 import { type ButtonProps } from "./Button";
-import classes from "./Button.module.css";
 
 interface BaseProps
   extends CssProp,
@@ -132,11 +131,11 @@ export const ToggleButtonGroup = ({
   return (
     <div
       className={classNames(
-        classes.buttonGroup,
+        "fabric-buttonGroup",
         className,
         fullWidth ? "flex" : "inline-flex",
         "flex-nowrap align-middle",
-        vertical && classes.vertical,
+        vertical && "vertical",
         vertical && "flex-col",
       )}
       {...aria}

package/src/components/callout/Callout.tsx

@@ -25,13 +25,11 @@ import classNames from "classnames";
 import {
   type AriaProps,
   type ChildrenProp,
-  type ColorType,
+  type ColorState,
   type CssProp,
-  type PaletteType,
   type TestProps,
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import { getBgClass, getBorderClass, getColorClass } from "../../utils";
 import { Icon } from "../icon/Icon";
 
 export interface CalloutProps
@@ -42,7 +40,7 @@ export interface CalloutProps
   /**
    * callout color
    */
-  color?: ColorType | PaletteType;
+  color?: ColorState;
   /**
    * legend title
    */
@@ -65,6 +63,16 @@ export interface CalloutProps
   onClose?: () => void;
 }
 
+const colors = {
+  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",
+  info: "bg-info-50/50 text-info-800 border-info-300",
+  danger: "bg-danger-50/50 text-danger-800 border-danger-300",
+  success: "bg-success-50/50 text-success-800 border-success-300",
+  warning: "bg-warning-50/50 text-warning-800 border-warning-300",
+};
+
 export const Callout = ({
   children,
   // @ts-expect-error ignore
@@ -80,11 +88,9 @@ export const Callout = ({
   return (
     <fieldset
       className={classNames(
-        className,
         "block rounded-capped border max-w-full relative overflow-hidden mb-4",
-        getBgClass(color + "-50"),
-        getColorClass(color + "-700"),
-        getBorderClass(color + "-300"),
+        colors[color],
+        className,
         border === "dashed" && "border-dashed",
         border === "dotted" && "border-dotted",
       )}

package/src/components/card/Card.tsx

@@ -43,7 +43,6 @@ import {
   type TestProps,
 } from "../../types";
 import { nodeCheck } from "../../utils";
-import classes from "./Card.module.css";
 
 export interface CardProps
   extends CssProp,
@@ -116,20 +115,20 @@ export const Card = ({
   return (
     <div
       className={classNames(
-        classes.cardWrapper,
+        "fabric-cardWrapper",
         "rounded-capped relative grid",
         flex && "flex-1",
-        selected && selectedRibbon && classes.selected,
-        selected && "outline outline-2 outline-accent-500 outline-offset-2",
+        selected && selectedRibbon && "selected",
+        selected && "outline-2 outline-accent-500 outline-offset-2",
       )}
     >
       <ErrorBoundary>
         <div
           className={classNames(
-            classes.card,
+            "fabric-card",
             className,
             "rounded-capped flex flex-col flex-nowrap overflow-hidden",
-            onClick && classes.clickable,
+            onClick && "clickable",
           )}
           draggable={draggable}
           onDragStart={
@@ -145,7 +144,7 @@ export const Card = ({
           {header}
           <div
             role="none"
-            className={classNames(classes.cardBody, bodyClassName, "flex-1")}
+            className={classNames("fabric-cardBody", bodyClassName, "flex-1")}
             onClick={onClick}
           >
             {body}

package/src/components/card/CardCover.tsx

@@ -26,7 +26,6 @@ import { Children, useMemo } from "react";
 import { type AriaProps, type ChildrenProp, type CssProp } from "../../types";
 import { nodeCheck } from "../../utils";
 import { Image, Video } from "../media/Media";
-import classes from "./Card.module.css";
 
 export interface CardCoverProps extends CssProp, AriaProps, ChildrenProp {
   /**
@@ -43,12 +42,19 @@ export interface CardCoverProps extends CssProp, AriaProps, ChildrenProp {
   justify?: "start" | "center" | "end";
 }
 
+const scheme = {
+  inheritScheme: "inheritScheme",
+  light: "light",
+  dark: "dark",
+};
+
 export const CardCover = ({
   className,
   children,
   height = 120,
   justify = "end",
-  colorScheme,
+  // @ts-expect-error ignore
+  colorScheme = "inheritScheme",
   ...aria
 }: CardCoverProps) => {
   const [media, body] = useMemo(() => {
@@ -64,8 +70,8 @@ export const CardCover = ({
     <div
       style={{ height }}
       className={classNames(
-        classes.cardCover,
-        classes[colorScheme ?? "inheritScheme"],
+        "fabric-cardCover",
+        scheme[colorScheme],
         "relative z-0",
       )}
       {...aria}
@@ -73,9 +79,8 @@ export const CardCover = ({
       {media}
       <div
         className={classNames(
-          classes.cardCoverContent,
+          "fabric-cardCoverContent",
           "relative pointer-events-none z-1 flex flex-col flex-nowrap p-4 h-full",
-          className,
           `justify-${justify}`,
           className,
         )}

package/src/components/chip/Chip.tsx

@@ -30,14 +30,14 @@ import {
   type ColorType,
   type CssProp,
   type IconProps,
+  type PaletteType,
   type PolymorphicProps,
   type RefProp,
   type SizeType,
   type TestProps,
 } from "../../types";
-import { getColor, getColorClass } from "../../utils";
+import { getColor } from "../../utils";
 import { Icon } from "../icon/Icon";
-import classes from "./Chip.module.css";
 
 export interface ChipProps
   extends CssProp,
@@ -53,7 +53,7 @@ export interface ChipProps
   /**
    * chip color (CSS color / tailwind color)
    */
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   /**
    * chip styling
    */
@@ -154,13 +154,12 @@ export const Chip = <Tag extends React.ElementType = "div">({
       role="term"
       data-ref="chip"
       className={classNames(
-        classes.chip,
+        "fabric-chip",
         className,
-        color && getColorClass(color),
         "select-none inline-flex flex-nowrap items-center align-middle max-w-72 rounded",
         rounded && "rounded-full",
-        !!onClick && classes.clickable,
-        disabled && classes.disabled,
+        !!onClick && "clickable",
+        disabled && "disabled",
       )}
       style={styles}
       data-variant={variant}
@@ -171,7 +170,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
       {icon && (
         <Icon
           data-ref="chipIcon"
-          className={classNames(classes.chipIcon, "m-1")}
+          className={classNames("fabric-chipIcon", "m-1")}
           icon={icon}
           bg={iconBg}
           onClick={onIconClick}
@@ -182,7 +181,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
       {children && (
         <label
           data-ref="chipLabel"
-          className={classNames(classes.chipLabel, "truncate")}
+          className={classNames("fabric-chipLabel", "truncate")}
         >
           {children}
         </label>
@@ -193,7 +192,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
           data-ref="chipRemove"
           data-inner-cliackable
           className={classNames(
-            classes.chipRemove,
+            "fabric-chipRemove",
             "cursor-pointer pe-1 opacity-65 hover:opacity-90",
           )}
           onClick={removeHandler}

package/src/components/collapsable/Collapsable.tsx

@@ -40,7 +40,6 @@ import {
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
-import classes from "./Collapsable.module.css";
 
 interface CollapsableRef {
   button: RefObject<HTMLElement>;
@@ -135,12 +134,12 @@ export const Collapsable = ({
     return [h, b];
   }, [children]);
   return (
-    <div className={classNames(classes.collapsable, className)} {...aria}>
+    <div className={classNames("fabric-collapsable", className)} {...aria}>
       <div
         role="none"
         ref={headRef}
         className={classNames(
-          classes.collapsableHead,
+          "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",
@@ -154,7 +153,7 @@ export const Collapsable = ({
       {openState && (
         <div
           ref={bodyRef}
-          className={classNames(classes.collapsableBody, bodyClassName)}
+          className={classNames("fabric-collapsableBody", bodyClassName)}
         >
           {body}
         </div>

package/src/components/divider/Divider.tsx

@@ -24,13 +24,12 @@
 import classNames from "classnames";
 import { useCallback } from "react";
 import {
-  type CssProp,
   type ChildProp,
   type ColorType,
+  type CssProp,
   type PaletteType,
 } from "../../types";
-import { getBgClass, getBorderClass, getColorClass } from "../../utils";
-import classes from "./Divider.module.css";
+import { getColor } from "../../utils";
 
 export interface DividerProps extends CssProp, Partial<ChildProp> {
   /**
@@ -41,10 +40,14 @@ export interface DividerProps extends CssProp, Partial<ChildProp> {
    * vertical rule
    */
   vertical?: boolean;
+  /**
+   * divider label classname(s)
+   */
+  labelClassName?: string;
   /**
    * rule color
    */
-  color?: ColorType | PaletteType | "tint";
+  color?: ColorType | PaletteType | string;
   /**
    * text alignment
    */
@@ -53,8 +56,9 @@ export interface DividerProps extends CssProp, Partial<ChildProp> {
 
 export const Divider = ({
   children,
-  color,
+  color = "tint-300",
   vertical,
+  labelClassName,
   fill,
   align = "start",
   className,
@@ -63,13 +67,14 @@ export const Divider = ({
     ({ flex, className }: KeyValue) => {
       return (
         <hr
-          style={{ flex }}
+          style={{ flex, borderColor: getColor(color) }}
           className={classNames(
             className,
             vertical && "vertical",
             !flex && "self-stretch",
-            vertical ? classes.vertical : classes.horizontal,
-            color && getBorderClass(color + "-200"),
+            vertical
+              ? "fabric-divider--vertical"
+              : "fabric-divider--horizontal",
           )}
         />
       );
@@ -89,9 +94,8 @@ export const Divider = ({
       <div
         className={classNames(
           "px-2 whitespace-nowrap",
-          vertical ? classes.vertical : classes.horizontal,
-          fill && getBgClass((color ?? "tint") + "-200"),
-          !fill && getColorClass((color ?? "tint") + "-600"),
+          vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal",
+          labelClassName,
           "rounded-full text-[0.75em]",
           vertical && "origin-center -rotate-90 z-1",
         )}

package/src/components/dropdown/Dropdown.tsx

@@ -54,7 +54,6 @@ import {
   useState,
 } from "react";
 import { type ChildProp, type RefProp } from "../../types";
-import classes from "./Dropdown.module.css";
 
 export interface DropdownProps extends RefProp {
   children: [React.ReactNode, React.ReactNode];
@@ -257,7 +256,7 @@ const DropdownElement = ({
               <div
                 role="none"
                 className={classNames(
-                  classes.dropdownBody,
+                  "fabric-dropdownBody",
                   dropdownClassName,
                   !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100",
                   "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]",
@@ -271,7 +270,7 @@ const DropdownElement = ({
                   ref={arrowRef}
                   context={context}
                   strokeWidth={0.5}
-                  className="fill-base stroke-muted"
+                  className="fill-base stroke-dimmed"
                 />
               )}
             </div>

package/src/components/dropdown/DropdownTool.tsx

@@ -48,7 +48,7 @@ export const DropdownTool = ({
         icon={icon ?? CoreIcons.caretDown}
         className={classNames(
           className,
-          "outline bg-base flex-content pointer-events-auto cursor-pointer",
+          "outline bg-base/50 flex-content pointer-events-auto cursor-pointer",
           groupHover &&
             "hidden group-hover/tool:inline-block data-[dropdown-open]:inline-block",
         )}

package/src/components/icon/Icon.tsx

@@ -25,6 +25,7 @@ import { isString, isSvgPath } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo } from "react";
 import {
+  type PaletteType,
   type AriaProps,
   type ColorType,
   type CssProp,
@@ -32,8 +33,7 @@ import {
   type SizeType,
   type TestProps,
 } from "../../types";
-import { getBgClass, getColor, getColorClass } from "../../utils";
-import classes from "./Icon.module.css";
+import { getColor } from "../../utils";
 
 export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
   /**
@@ -43,11 +43,11 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
   /**
    * background color (CSS color / tailwind color)
    */
-  bg?: ColorType | string;
+  bg?: ColorType | PaletteType | string;
   /**
    * icon color (CSS color / tailwind color)
    */
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   /**
    * flip icon in rtl
    */
@@ -157,14 +157,12 @@ export const Icon = ({
       {...rest}
       role="presentation"
       className={classNames(
-        classes.icon,
-        className,
-        "select-none overflow-hidden inline-block box-content leading-none not-italic text-center",
-        bg && getBgClass(bg),
-        color && getColorClass(color),
+        "fabric-icon",
+        "select-none overflow-hidden box-content leading-none not-italic text-center",
         !rounded && "rounded",
         rounded && "rounded-full",
         animate && `animate-${animate}`,
+        className,
       )}
       onClick={onClick}
       data-flip={rtlFlip}

package/src/components/media/Media.tsx

@@ -27,7 +27,6 @@ import { useMemo, useRef, useState } from "react";
 import { type AriaProps, type CssProp, type TestProps } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { Button } from "../button/Button";
-import classes from "./Media.module.css";
 
 export interface BaseProps extends CssProp, TestProps, AriaProps {
   /**
@@ -44,6 +43,12 @@ export interface BaseProps extends CssProp, TestProps, AriaProps {
   fit?: "cover" | "contain" | "fill";
 }
 
+const cover = {
+  fill: "object-fill",
+  cover: "object-cover",
+  contain: "object-contain",
+};
+
 export interface ImageProps extends BaseProps {
   /**
    * image alt text
@@ -78,7 +83,7 @@ export const Image = ({
     () => (
       <div
         className={classNames(
-          classes.mediaPlaceholder,
+          "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",
         )}
       >
@@ -91,9 +96,9 @@ export const Image = ({
     <div
       data-ref="image"
       className={classNames(
-        classes.mediaContainer,
+        "fabric-mediaContainer",
         "relative overflow-hidden bg-gray inline-block",
-        reel && classes.mediaReel,
+        reel && "fabric-mediaReel",
         className,
       )}
       data-colorset={colorSet}
@@ -106,9 +111,9 @@ export const Image = ({
         loading="lazy"
         crossOrigin="anonymous"
         className={classNames(
-          classes.media,
+          "fabric-media",
           "pointer-events-none w-full h-full",
-          fit && `object-${fit}`,
+          cover[fit],
         )}
         onLoad={(e) => {
           e.currentTarget.previousElementSibling?.remove();
@@ -138,9 +143,9 @@ export const Video = ({
     <div
       data-ref="video"
       className={classNames(
-        classes.mediaContainer,
+        "fabric-mediaContainer",
         "relative overflow-hidden bg-gray inline-block",
-        reel && classes.mediaReel,
+        reel && "fabric-mediaReel",
         className,
       )}
       onMouseEnter={() => {
@@ -153,7 +158,7 @@ export const Video = ({
     >
       <div
         className={classNames(
-          classes.mediaPlaceholder,
+          "fabric-mediaPlaceholder",
           "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse",
         )}
       >
@@ -166,7 +171,7 @@ export const Video = ({
         poster={poster}
         autoPlay={autoPlay}
         className={classNames(
-          classes.media,
+          "fabric-media",
           "pointer-events-none w-full h-full",
           fit && `object-${fit}`,
         )}
@@ -184,14 +189,14 @@ export const Video = ({
       <div
         data-inner-clickable
         className={classNames(
-          classes.mediaControls,
+          "fabric-mediaControls",
           "absolute bottom-6 end-6 rounded-full flex flex-col",
         )}
       >
         <Button
           rounded
           variant="link"
-          className={classes.mediaControlPlaceholder}
+          className={"fabric-mediaControlPlaceholder"}
           icon={CoreIcons.ellipsis}
           aria-label="controls"
         />
@@ -199,7 +204,7 @@ export const Video = ({
           rounded
           variant="link"
           aria-label="controls"
-          className={classes.mediaControlAction}
+          className={"fabric-mediaControlAction"}
           onClick={() => {
             videoRef.current &&
               (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
@@ -210,7 +215,7 @@ export const Video = ({
           rounded
           variant="link"
           aria-label="controls"
-          className={classes.mediaControlAction}
+          className={"fabric-mediaControlAction"}
           onClick={() => {
             videoRef.current?.paused
               ? videoRef.current?.play()

package/src/components/menu/Menu.tsx

@@ -233,7 +233,7 @@ const MenuComponent = ({
                     menuClassName,
                     "flex flex-col bg-base p-1 menu-list",
                     isNested &&
-                      "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]",
+                      "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-(--z-popover)",
                   )}
                   autoFocus
                   ref={mergeRefs(isNested ? refs.setFloating : ref)}

package/src/components/menu/MenuItem.tsx

@@ -31,7 +31,6 @@ import { Tooltip } from "../../overlays";
 import { type PolymorphicProps } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
 import { Icon } from "../icon/Icon";
-import classes from "./Menu.module.css";
 import { type MenuItemProps } from "./types";
 
 export const MenuItem = <Tag extends React.ElementType = "button">({
@@ -77,7 +76,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
     }
     return (
       <Icon
-        className={classNames(classes.menuIcon, minimal && classes.minimal)}
+        className={classNames("fabric-menuIcon", minimal && "minimal")}
         icon={path ?? ""}
         bg={iconBg}
         color={iconColor}
@@ -146,11 +145,11 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
         data-dropdown-dismiss
         data-color={color}
         className={classNames(
-          classes.menuItem,
+          "fabric-menuItem",
           className,
-          active && classes.active,
-          minimal && classes.minimal,
-          disabled && classes.disabled,
+          active && "active",
+          minimal && "minimal",
+          disabled && "disabled",
           "rounded-capped relative max-w-[50vw] my-0.5",
         )}
         data-active={active}

package/src/components/menu/types.ts

@@ -27,7 +27,7 @@ import {
   type BadgeType,
   type CallbackReturn,
   type ChildrenProp,
-  type ColorType,
+  type ColorState,
   type CssProp,
   type IconProps,
   type TestProps,
@@ -53,7 +53,7 @@ export interface MenuItemProps
   /**
    * menu color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * item active
    */

package/src/components/meter/Meter.tsx

@@ -25,7 +25,6 @@ import { Format } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
 import { type AriaProps, type CssProp, type TestProps } from "../../types";
-import classes from "./Meter.module.css";
 
 export interface MeterProps extends CssProp, AriaProps, TestProps {
   /**
@@ -51,7 +50,7 @@ export const Meter = ({ value, hideLabel, className, ...aria }: MeterProps) => {
   return (
     <div
       className={classNames(
-        classes.meter,
+        "fabric-meter",
         className,
         "flex flex-nowrap items-center gap-[2px]",
       )}
@@ -61,7 +60,7 @@ export const Meter = ({ value, hideLabel, className, ...aria }: MeterProps) => {
         <div
           key={step}
           className={classNames(
-            classes.meterBar,
+            "fabric-meterBar",
             "first-of-type:rounded-s last-of-type:rounded-e bg-tint-100 relative outline -outline-offset-1 outline-muted overflow-hidden after:absolute after:inset-0",
           )}
           data-active={activeCount >= step}