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

package/src/components/chip/Chip.tsx

@@ -29,31 +29,29 @@ import {
   type ChildProp,
   type ColorType,
   type CssProp,
-  type IconProps,
+  type PaletteType,
   type PolymorphicProps,
   type RefProp,
   type SizeType,
   type TestProps,
 } from "../../types";
-import { getColor, getColorClass } from "../../utils";
-import { Icon } from "../icon/Icon";
-import classes from "./Chip.module.css";
+import { getColor } from "../../utils";
+import { getIconProps, Icon, type IconProps } from "../icon/Icon";
 
 export interface ChipProps
   extends CssProp,
     AriaProps,
-    IconProps,
     TestProps,
     ChildProp<string | ReactElement>,
     RefProp<HTMLDivElement> {
   /**
    * chip size
    */
-  size?: SizeType;
+  size?: SizeType | number | string;
   /**
    * chip color (CSS color / tailwind color)
    */
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   /**
    * chip styling
    */
@@ -62,10 +60,18 @@ export interface ChipProps
    * full rounded edges
    */
   rounded?: boolean;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * disabled state
    */
   disabled?: boolean;
+  /**
+   * prevent click default, useful when component is within a `a` link
+   */
+  preventDefault?: boolean;
   /**
    * prevent click propagation
    */
@@ -92,6 +98,26 @@ const SizeMap: KeyValue<string> = {
   xl: "2rem",
 };
 
+/**
+ * A component that represents a small block of information, often used for tags, categories, or actions.
+ * It allows customization of size, color, variant, and includes optional icon and remove functionality.
+ * It supports various properties for styling and interaction, including click handlers and disabled state.
+ * It can be used in various contexts, such as filtering options, displaying tags, or representing user actions.
+ * It can be styled with custom CSS classes and supports features like rounded edges and click handling.
+ * It can also include an icon and a remove button, making it versatile for different use cases.
+ *
+ * @param {ChipProps} props - The properties for the Chip component.
+ * @returns {JSX.Element} The rendered Chip component.
+ *
+ * @example
+ * ```jsx
+ * <Chip color="primary" size="md" className="my-chip">
+ *   Example Chip
+ * </Chip>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-chip--docs} for more details.
+ */
 export const Chip = <Tag extends React.ElementType = "div">({
   ref,
   children,
@@ -100,14 +126,12 @@ export const Chip = <Tag extends React.ElementType = "div">({
   color,
   variant,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   disabled,
   onClick,
   onIconClick,
   onRemove,
   rounded,
+  preventDefault,
   stopPropagation,
   as,
   ...aria
@@ -133,10 +157,11 @@ export const Chip = <Tag extends React.ElementType = "div">({
 
   const clickHandler = useCallback(
     (e: React.MouseEvent) => {
-      if (stopPropagation) e.stopPropagation();
+      preventDefault && e.preventDefault();
+      stopPropagation && e.stopPropagation();
       onClick?.(e);
     },
-    [onClick, stopPropagation],
+    [onClick, preventDefault, stopPropagation],
   );
 
   const removeHandler = useCallback(
@@ -152,41 +177,44 @@ export const Chip = <Tag extends React.ElementType = "div">({
     <E
       ref={ref}
       role="term"
+      data-ref="chip"
       className={classNames(
-        classes.chip,
+        "fabric-chip",
         className,
-        color && getColorClass(color),
-        "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded",
+        "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}
       data-inner-clickable={!!onClick}
-      {...{ onClick: clickHandler }}
+      {...{ onClick: disabled ? undefined : clickHandler }}
       {...aria}
     >
       {icon && (
         <Icon
-          className={classNames(classes.chipIcon, "m-1")}
-          icon={icon}
-          bg={iconBg}
+          data-ref="chipIcon"
+          className={classNames("fabric-chipIcon", "m-1 flex-content")}
           onClick={onIconClick}
-          color={iconColor}
-          rtlFlip={rtlFlip}
+          {...getIconProps(icon)}
         />
       )}
       {children && (
-        <label className={classNames(classes.chipLabel, "truncate")}>
+        <label
+          data-ref="chipLabel"
+          className={classNames("fabric-chipLabel", "truncate flex-1")}
+        >
           {children}
         </label>
       )}
       {onRemove && (
         <span
           role="none"
+          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

@@ -38,13 +38,11 @@ import {
   type RefProp,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
-import classes from "./Collapsable.module.css";
 
 interface CollapsableRef {
-  button: RefObject<HTMLElement>;
-  body: RefObject<HTMLElement>;
+  button: RefObject<HTMLElement | null>;
+  body: RefObject<HTMLElement | null>;
   open: boolean;
 }
 
@@ -96,6 +94,32 @@ export interface CollapsableProps
   onClose?: () => void;
 }
 
+/**
+ * A component that can be expanded or collapsed to show or hide content.
+ * It is useful for organizing content in a way that allows users to focus on the information they are interested in.
+ * It supports custom icons for open and closed states, alignment options, and can be made sticky.
+ * This component is ideal for creating accordions, expandable panels, or sections that can be toggled by the user.
+ *
+ * @param {CollapsableProps} props - The properties for the Collapsable component.
+ * @returns {JSX.Element} The rendered Collapsable component.
+ *
+ * @example
+ * ```jsx
+ * <Collapsable
+ *   iconAlign="start"
+ *   iconOpen="icon-[mdi--chevron-down]"
+ *   iconClosed="icon-[mdi--chevron-right]"
+ *   open={true}
+ *   onOpen={() => console.log("Opened")}
+ *   onClose={() => console.log("Closed")}
+ * >
+ *   <div>Header Content</div>
+ *   <div>Body Content</div>
+ * </Collapsable>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-collapsable--docs} for more details.
+ */
 export const Collapsable = ({
   ref,
   disabled,
@@ -105,8 +129,8 @@ export const Collapsable = ({
   children,
   iconAlign,
   stickyHeader,
-  iconClosed = CoreIcons.chevronRight,
-  iconOpen = CoreIcons.chevronDown,
+  iconClosed = "icon-[mdi--chevron-right]",
+  iconOpen = "icon-[mdi--chevron-down]",
   open,
   onClose,
   onOpen,
@@ -135,26 +159,26 @@ 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",
+          stickyHeader && "bg-base sticky top-0 py-1 z-10",
           iconAlign === "end" ? "flex-row-reverse" : "flex-row",
         )}
         onClick={() => !disabled && setOpenState(!openState)}
       >
         <Icon size="1.125em" icon={openState ? iconOpen : iconClosed} rtlFlip />
-        <div className="flex-1 px-2">{head}</div>
+        <div className="flex-1">{head}</div>
       </div>
       {openState && (
         <div
           ref={bodyRef}
-          className={classNames(classes.collapsableBody, bodyClassName)}
+          className={classNames("fabric-collapsableBody", bodyClassName)}
         >
           {body}
         </div>

package/src/components/divider/Divider.tsx

@@ -24,37 +24,61 @@
 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 { getColor } from "../../utils";
 
 export interface DividerProps extends CssProp, Partial<ChildProp> {
-  /**
-   * apply text bg
-   */
-  fill?: boolean;
   /**
    * vertical rule
    */
   vertical?: boolean;
+  /**
+   * divider label classname(s)
+   */
+  labelClassName?: string;
   /**
    * rule color
    */
-  color?: ColorType | PaletteType | "tint";
+  color?: ColorType | PaletteType | string;
   /**
    * text alignment
    */
   align?: "start" | "end" | "center";
+  /**
+   * divider style
+   */
+  style?: "solid" | "dashed" | "dotted";
 }
 
+/**
+ * A component that represents a visual divider between content.
+ * It can be used to separate sections of content, with optional text labels.
+ * It supports both horizontal and vertical orientations, customizable colors,
+ * styles, and alignment options.
+ *
+ * @param {DividerProps} props - The properties for the Divider component.
+ * @returns {JSX.Element} The rendered Divider component.
+ *
+ * @example
+ * ```jsx
+ * <Divider color="primary" align="center" style="dashed">
+ *   Divider Text
+ * </Divider>
+ * // Renders a horizontal divider with primary color, centered text, and dashed style.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-divider--docs} for more details.
+ */
 export const Divider = ({
   children,
-  color,
+  color = "tint-300",
   vertical,
-  fill,
+  labelClassName,
+  style,
   align = "start",
   className,
 }: DividerProps) => {
@@ -62,13 +86,14 @@ export const Divider = ({
     ({ flex, className }: KeyValue) => {
       return (
         <hr
-          style={{ flex }}
+          style={{ flex, borderColor: getColor(color), borderStyle: style }}
           className={classNames(
             className,
             vertical && "vertical",
             !flex && "self-stretch",
-            vertical ? "mx-1" : "my-1",
-            color && getBorderClass(color + "-200"),
+            vertical
+              ? "fabric-divider--vertical"
+              : "fabric-divider--horizontal",
           )}
         />
       );
@@ -79,7 +104,7 @@ export const Divider = ({
   return children ? (
     <div
       className={classNames(
-        "flex flex-nowrap items-center",
+        "flex flex-nowrap items-center fabric-divider",
         vertical && "flex-col",
         className,
       )}
@@ -88,9 +113,10 @@ export const Divider = ({
       <div
         className={classNames(
           "px-2 whitespace-nowrap",
-          vertical ? "mx-1" : "my-1",
-          fill && getBgClass((color ?? "tint") + "-200"),
-          !fill && getColorClass((color ?? "tint") + "-600"),
+          vertical
+            ? "fabric-divider-label--vertical"
+            : "fabric-divider-label--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];
@@ -222,8 +221,10 @@ const DropdownElement = ({
           onClick: (e) => {
             anchor.props.onClick?.(e);
             e.stopPropagation();
+            e.preventDefault();
           },
         }),
+        "data-inner-clickable": "true",
         "data-dropdown-open": isOpen ? true : undefined,
         ref: innerRef,
       })}
@@ -237,18 +238,13 @@ const DropdownElement = ({
           <FloatingOverlay />
           <FloatingFocusManager context={context} modal>
             <div
-              ref={(el) => {
-                refs.setFloating(el);
-                el
-                  ?.querySelector<HTMLElement>("input,textarea,button")
-                  ?.focus();
-              }}
+              ref={refs.setFloating}
               style={{
                 minWidth,
                 zIndex: "var(--z-popover)",
                 ...floatingStyles,
               }}
-              data-testid="dropdown-body"
+              data-ref="dropdownBody"
               {...getFloatingProps({
                 onClick: (e) => e.stopPropagation(),
               })}
@@ -256,10 +252,9 @@ const DropdownElement = ({
               <div
                 role="none"
                 className={classNames(
-                  classes.dropdownBody,
+                  "fabric-dropdownBody",
                   dropdownClassName,
-                  !plainDropdown &&
-                    "shadow-lg shadow-base bg-base ring-1 ring-tint-100",
+                  !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100",
                   "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]",
                 )}
                 onMouseUpCapture={tryClosing}
@@ -271,7 +266,7 @@ const DropdownElement = ({
                   ref={arrowRef}
                   context={context}
                   strokeWidth={0.5}
-                  className="fill-base stroke-muted"
+                  className="fill-base stroke-dimmed"
                 />
               )}
             </div>
@@ -282,12 +277,52 @@ const DropdownElement = ({
   );
 };
 
+/**
+ * A component that displays a dropdown menu with an anchor and a panel.
+ * It supports various features such as placement, arrow display, click handling,
+ * and event handling for opening and closing the dropdown.
+ *
+ * @param props - Dropdown properties
+ * @returns JSX Element
+ *
+ * @example
+ * ```jsx
+ * <Dropdown
+ *   placement="bottom"
+ *   showArrow
+ *   closeOnClick
+ *   fitToParent
+ *   onOpen={() => console.log("Dropdown opened")}
+ *   onClose={() => console.log("Dropdown closed")}
+ * >
+ *   <button>Open Dropdown</button>
+ *   <div>
+ *     <DropdownDismiss>
+ *       <button>Dismiss</button>
+ *     </DropdownDismiss>
+ *     <p>Dropdown Content</p>
+ *   </div>
+ * </Dropdown>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-dropdown--docs} for more details.
+ * @see {@link https://floating-ui.com/docs/react} for more details on Floating UI.
+ */
 export const Dropdown = (props: DropdownProps) => (
   <FloatingTree>
     <DropdownElement {...props} />
   </FloatingTree>
 );
 
+/**
+ * A component that allows dismissing the dropdown when clicked.
+ * It can be used inside the dropdown panel to provide a dismiss area.
+ * It supports an optional `dismiss` prop to control whether the dropdown should be dismissed on click.
+ *
+ * @param children - The children elements to render inside the dismiss area.
+ * @param dismiss - Whether to dismiss the dropdown on click (default: true).
+ * @returns JSX Element
+ */
 export const DropdownDismiss = ({
   children,
   dismiss = true,

package/src/components/dropdown/DropdownTool.tsx

@@ -23,10 +23,34 @@
 
 import classNames from "classnames";
 import { type ChildProp, type CssProp } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
 import { Dropdown, type DropdownProps } from "./Dropdown";
 
+/**
+ * A dropdown component that displays an icon and tool menu.
+ * It can be used to create a dropdown menu that appears when the icon is clicked or hovered over.
+ * This component is useful for creating toolbars or action menus in a user interface.
+ * It accepts children as menu items and can be styled with additional CSS classes.
+ *
+ * @param {ChildProp} children - The content to be displayed inside the dropdown.
+ * @param {CssProp} className - Additional CSS classes to apply to the dropdown.
+ * @param {string} icon - The icon to be displayed in the dropdown.
+ * @param {boolean} groupHover - If true, the dropdown will only be visible when the parent group is hovered.
+ * @param {DropdownProps} props - Additional properties for the dropdown.
+ * @returns {JSX.Element} The rendered DropdownTool component.
+ *
+ * @example
+ * ```jsx
+ * <DropdownTool
+ *   icon="caret-down"
+ *   groupHover={true}
+ *   className="my-dropdown"
+ * >
+ *   <MenuItem>Item 1</MenuItem>
+ *   <MenuItem>Item 2</MenuItem>
+ * </DropdownTool>
+ * ```
+ */
 export const DropdownTool = ({
   children,
   className,
@@ -45,12 +69,12 @@ export const DropdownTool = ({
   return (
     <Dropdown {...props}>
       <Icon
-        icon={icon ?? CoreIcons.caretDown}
+        icon={icon ?? "icon-[mdi--menu-down]"}
         className={classNames(
+          "outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer",
           className,
-          "outline bg-base flex-content pointer-events-auto cursor-pointer",
           groupHover &&
-            "hidden group-hover:inline-block data-[dropdown-open]:inline-block",
+            "hidden group-hover/tool:inline-block data-dropdown-open:inline-block",
         )}
       />
       {children}

package/src/components/empty/EmptyContent.tsx

@@ -24,7 +24,14 @@
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement } from "react";
-import { type ChildrenProp, type CssProp, type TestProps } from "../../types";
+import {
+  type ChildrenProp,
+  type ColorType,
+  type CssProp,
+  type PaletteType,
+  type TestProps,
+} from "../../types";
+import { getColor } from "../../utils";
 import { Icon } from "../icon/Icon";
 
 export interface EmptyContentProps
@@ -47,6 +54,10 @@ export interface EmptyContentProps
    * empty icon
    */
   icon?: string | React.ReactElement;
+  /**
+   * icon color
+   */
+  iconColor?: ColorType | PaletteType;
 }
 
 const SizeMap: KeyValue = {
@@ -94,6 +105,32 @@ const DefaultIcon = () => (
   </svg>
 );
 
+/**
+ * A component that displays a message and an optional icon when there is no content to show.
+ * It allows customization of title, message, icon, size, and additional CSS properties.
+ * It can also accept children elements for additional actions or information.
+ * This component is useful for displaying a friendly message when data is not available,
+ * such as in empty states of lists, tables, or other content areas.
+ *
+ * @param {EmptyContentProps} props - The properties for the EmptyContent component.
+ * @returns {JSX.Element} The rendered EmptyContent component.
+ *
+ * @example
+ * ```jsx
+ * <EmptyContent
+ *   title="No Data Available"
+ *   message="Please check back later."
+ *   icon="empty"
+ *   iconColor="tint-700"
+ *   size="md"
+ * >
+ *   <Button onClick={() => console.log("Action clicked")}>Retry</Button>
+ * </EmptyContent>
+ * // Renders an empty content area with a title, message, icon, and a button for retrying the action.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-emptycontent--docs} for more details.
+ */
 export const EmptyContent = ({
   children,
   title,
@@ -101,6 +138,7 @@ export const EmptyContent = ({
   icon,
   className,
   size,
+  iconColor,
   ...test
 }: EmptyContentProps) => {
   return (
@@ -116,25 +154,28 @@ export const EmptyContent = ({
       }
       {...test}
     >
-      <div className="leading-none" style={{ fontSize: "4em" }}>
+      <div
+        className="leading-none"
+        style={{ fontSize: "4em", color: getColor(iconColor ?? "tint-700") }}
+      >
         {isString(icon) && <Icon icon={icon} />}
         {isValidElement(icon) && icon}
         {!icon && <DefaultIcon />}
       </div>
       {title && (
-        <p
-          className="font-medium text-center text-dimmed"
+        <div
+          className="font-medium text-center opacity-85"
           style={{ fontSize: "1.5em" }}
         >
           {title}
-        </p>
+        </div>
       )}
-      <p
-        className="font-medium text-center text-muted"
+      <div
+        className="font-medium text-center opacity-65"
         style={{ fontSize: "0.875em" }}
       >
         {message}
-      </p>
+      </div>
       <div className="flex gap-1 pt-6">{children}</div>
     </div>
   );