@react-fabric/core 1.0.0-beta.9 → 1.0.1

package/src/components/chip/Chip.tsx

@@ -1,85 +1,93 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-import classNames from "classnames";
-import { useCallback, type ReactElement } from "react";
+import { cn } from "@react-fabric/utilities";
+import { useCallback } from "react";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
-import {
-  type AriaProps,
-  type ChildProp,
-  type ColorType,
-  type CssProp,
-  type IconProps,
-  type PolymorphicProps,
-  type RefProp,
-  type SizeType,
-  type TestProps,
+import type {
+  ChildProp,
+  ColorBase,
+  CssPropWithMap,
+  CustomColors,
+  Draggable,
+  HtmlEvents,
+  PolymorphicProps,
+  RefProp,
+  SizeWithCustom,
+  TestProps,
 } from "../../types";
-import { getColor, getColorClass } from "../../utils";
+import { getColor, getIconProps } from "../../utils";
+import type { IconProps } from "../icon/Icon";
 import { Icon } from "../icon/Icon";
-import classes from "./Chip.module.css";
 
 export interface ChipProps
-  extends CssProp,
-    AriaProps,
-    IconProps,
+  extends
+    CssPropWithMap<{ root: string; value: string }>,
     TestProps,
-    ChildProp<string | ReactElement>,
+    HtmlEvents,
+    Draggable,
+    ChildProp<string | React.ReactNode>,
     RefProp<HTMLDivElement> {
   /**
-   * chip size
+   * Value displayed in a small badge on the chip (e.g., count, index).
+   */
+  value?: string | number;
+  /**
+   * Chip size — uses predefined `SizeType` keys (`xs`–`xl`) or a custom font-size string/number.
    */
-  size?: SizeType;
+  size?: SizeWithCustom;
   /**
-   * chip color (CSS color / tailwind color)
+   * Color token (from the design system palette) or arbitrary CSS color string.
    */
-  color?: ColorType | string;
+  color?: CustomColors<ColorBase>;
   /**
-   * chip styling
+   * Visual style variant — controls background, border, and text color treatment.
    */
-  variant?: "solid" | "outline";
+  variant?: "default" | "soft" | "solid" | "outlined";
   /**
-   * full rounded edges
+   * When `true`, rounds the chip edges into a full pill shape.
    */
   rounded?: boolean;
   /**
-   * disabled state
+   * Icon configuration — accepts either a string (icon name) or full `IconProps`. Renders to the left of the label.
    */
-  disabled?: boolean;
+  icon?: IconProps;
   /**
-   * prevent click propagation
+   * Disables interaction and applies a dimmed opacity.
    */
-  stopPropagation?: boolean;
+  disabled?: boolean;
   /**
-   * click handler
+   * Calls `e.preventDefault()` on click — useful when the chip lives inside an `<a>` element.
    */
-  onClick?: React.MouseEventHandler;
+  preventDefault?: boolean;
   /**
-   * icon click handler
+   * Calls `e.stopPropagation()` on click to prevent event bubbling.
    */
-  onIconClick?: React.MouseEventHandler;
+  stopPropagation?: boolean;
   /**
-   * remove handler
+   * Click handler for the remove (×) button; receives the native mouse event.
    */
   onRemove?: React.MouseEventHandler;
 }
@@ -92,38 +100,62 @@ const SizeMap: KeyValue<string> = {
   xl: "2rem",
 };
 
-export const Chip = <Tag extends React.ElementType = "div">({
+/**
+ * A compact, interactive chip used to represent tags, filters, selections, or status indicators.
+ *
+ * Renders a horizontally-flowing container with optional left-to-right slots:
+ * value badge → icon → label → remove (×) button.
+ *
+ * Supports four visual variants (`default`, `soft`, `solid`, `outlined`), five predefined sizes,
+ * and full color customization via the design system palette. The chip is keyboard-accessible,
+ * respects `disabled` and `data-clickable` states, and provides hooks for click and remove actions.
+ *
+ * @example
+ * ```tsx
+ * <Chip color="primary" size="md">
+ *   React
+ * </Chip>
+ *
+ * <Chip color="secondary" variant="outlined" icon="star" onRemove={() => console.log('removed')}>
+ *   Filter
+ * </Chip>
+ * ```
+ */
+export function Chip<Tag extends React.ElementType = "div">({
   ref,
   children,
   className,
+  classNames,
   size,
   color,
   variant,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
+  value,
   disabled,
   onClick,
-  onIconClick,
   onRemove,
   rounded,
+  preventDefault,
   stopPropagation,
   as,
-  ...aria
-}: ChipProps & PolymorphicProps<Tag>) => {
-  /** ***************** style map *******************/
+  draggable,
+  dragKey,
+  dragData,
+  onDragStart,
+  ...props
+}: ChipProps & PolymorphicProps<Tag>) {
+  // Compute inline styles from props (memoized to prevent re-renders)
   const styles = useMemoDebugger(
     () => {
       const s: KeyValue = {};
       if (color) {
-        s.color = getColor(color);
-      }
-      if (size && !(size in SizeMap)) {
-        s.fontSize = size;
+        s["--color"] = getColor(color);
       }
       if (size && size in SizeMap) {
         s.fontSize = SizeMap[size];
+      } else if (size) {
+        // Treat as a custom font-size value when not in the predefined map.
+        s.fontSize = size;
       }
       return s;
     },
@@ -131,63 +163,71 @@ export const Chip = <Tag extends React.ElementType = "div">({
     "Chip styles",
   );
 
-  const clickHandler = useCallback(
-    (e: React.MouseEvent) => {
-      if (stopPropagation) e.stopPropagation();
-      onClick?.(e);
+  const handleDragStart = useCallback(
+    (event: React.DragEvent) => {
+      if (dragKey) {
+        event.dataTransfer?.setData(dragKey, JSON.stringify(dragData));
+        onDragStart?.(event, dragKey, dragData);
+      }
     },
-    [onClick, stopPropagation],
+    [dragKey, dragData, onDragStart],
   );
 
-  const removeHandler = useCallback(
-    (e: React.MouseEvent) => {
-      if (stopPropagation) e.stopPropagation();
-      onRemove?.(e);
-    },
-    [onRemove, stopPropagation],
-  );
+  const clickHandler = (e: React.MouseEvent) => {
+    if (preventDefault) e.preventDefault();
+    if (stopPropagation) e.stopPropagation();
+    onClick?.(e);
+  };
+
+  const removeHandler = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onRemove?.(e);
+  };
 
+  // Resolve the polymorphic element: falls back to `<div>`.
   const E = as ?? "div";
   return (
     <E
       ref={ref}
       role="term"
-      className={classNames(
-        classes.chip,
+      data-ref="chip"
+      className={cn(
+        "fabric-chip",
+        "select-none inline-flex flex-nowrap items-center max-w-72 overflow-hidden rounded",
+        "is-disabled:pointer-events-none is-rounded:rounded-full",
+        "is-clickable:cursor-pointer is-clickable:bg-(image:--click-gradient) is-clickable:is-disabled:pointer-events-none is-clickable:is-disabled:opacity-50",
         className,
-        color && getColorClass(color),
-        "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded",
-        rounded && "rounded-full",
-        !!onClick && classes.clickable,
-        disabled && classes.disabled,
+        classNames?.root,
       )}
       style={styles}
       data-variant={variant}
-      data-inner-clickable={!!onClick}
-      {...{ onClick: clickHandler }}
-      {...aria}
+      data-disabled={disabled}
+      data-rounded={rounded}
+      data-clickable={!!onClick}
+      draggable={draggable}
+      onDragStart={!draggable ? undefined : handleDragStart}
+      onClick={disabled ? undefined : clickHandler}
+      {...props}
     >
-      {icon && (
-        <Icon
-          className={classNames(classes.chipIcon, "m-1")}
-          icon={icon}
-          bg={iconBg}
-          onClick={onIconClick}
-          color={iconColor}
-          rtlFlip={rtlFlip}
-        />
+      {value && (
+        <div className={cn("fabric-chipValue inline-flex items-center px-[0.25em]", classNames?.value)}>
+          <span>{value}</span>
+        </div>
       )}
+      {icon && <Icon data-ref="chipIcon" className="fabric-chipIcon m-1 flex-content" {...getIconProps(icon)} />}
       {children && (
-        <label className={classNames(classes.chipLabel, "truncate")}>
+        <label data-ref="chipLabel" className="fabric-chipLabel truncate flex-1 px-[0.5em]">
           {children}
         </label>
       )}
       {onRemove && (
         <span
           role="none"
-          className={classNames(
-            classes.chipRemove,
-            "cursor-pointer pe-1 opacity-65 hover:opacity-90",
+          data-ref="chipRemove"
+          data-inner-clickable
+          className={cn(
+            "fabric-chipRemove",
+            "cursor-pointer pe-1 pb-0.5 opacity-65 leading-none align-middle text-default hover:opacity-90",
           )}
           onClick={removeHandler}
         >
@@ -196,4 +236,4 @@ export const Chip = <Tag extends React.ElementType = "div">({
       )}
     </E>
   );
-};
+}

package/src/components/collapsable/Collapsable.tsx

@@ -1,71 +1,46 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-import classNames from "classnames";
-import {
-  Children,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-  type RefObject,
-} from "react";
-import {
-  type AriaProps,
-  type ChildrenProp,
-  type CssProp,
-  type RefProp,
-  type TestProps,
-} from "../../types";
-import { CoreIcons } from "../../types/icons";
+import { cn } from "@react-fabric/utilities";
+import { Activity, Children, useEffect, useEffectEvent, useImperativeHandle, useMemo, useRef } from "react";
+import { usePropState } from "../../hooks/usePropState";
+import type { ChildrenProp, CssPropWithMap, RefProp, TestProps } from "../../types";
 import { Icon } from "../icon/Icon";
-import classes from "./Collapsable.module.css";
 
 interface CollapsableRef {
-  button: RefObject<HTMLElement>;
-  body: RefObject<HTMLElement>;
+  button: React.RefObject<HTMLElement | null>;
+  body: React.RefObject<HTMLElement | null>;
   open: boolean;
 }
 
 export interface CollapsableProps
-  extends CssProp,
-    AriaProps,
-    TestProps,
-    RefProp<CollapsableRef>,
-    ChildrenProp {
+  extends CssPropWithMap<{ root?: string; header?: string; body?: string }>, TestProps, RefProp<CollapsableRef>, ChildrenProp {
   /**
    * expand icon alignment
    */
   iconAlign?: "start" | "end";
-  /**
-   * panel body className
-   */
-  bodyClassName?: string;
-  /**
-   * header button className
-   */
-  headerClassName?: string;
   /**
    * Header position sticky
    */
@@ -91,28 +66,49 @@ export interface CollapsableProps
    */
   onOpen?: () => void;
   /**
-   * open handler
+   * close handler
    */
   onClose?: () => void;
 }
 
-export const Collapsable = ({
+/**
+ * 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.
+ *
+ * @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>
+ * ```
+ */
+export function Collapsable({
   ref,
   disabled,
   className,
-  bodyClassName,
-  headerClassName,
+  classNames,
   children,
   iconAlign,
   stickyHeader,
-  iconClosed = CoreIcons.chevronRight,
-  iconOpen = CoreIcons.chevronDown,
+  iconClosed = "icon-[mdi--chevron-right]",
+  iconOpen = "icon-[mdi--chevron-down]",
   open,
   onClose,
   onOpen,
-  ...aria
-}: CollapsableProps) => {
-  const [openState, setOpenState] = useState(open);
+  ...props
+}: CollapsableProps) {
+  const [openState, setOpenState] = usePropState(open);
+
   const headRef = useRef(null);
   const bodyRef = useRef(null);
 
@@ -126,39 +122,45 @@ export const Collapsable = ({
     [openState],
   );
 
+  const toggleHandler = useEffectEvent(() => {
+    if (openState) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  });
+
   useEffect(() => {
-    setOpenState(open);
-  }, [open]);
+    toggleHandler();
+  }, [openState]);
 
   const [head, body] = useMemo(() => {
+    // eslint-disable-next-line @eslint-react/no-children-to-array
     const [h, ...b] = Children.toArray(children);
     return [h, b];
   }, [children]);
   return (
-    <div className={classNames(classes.collapsable, className)} {...aria}>
+    <div className={cn("fabric-collapsable", className, classNames?.root)} {...props}>
       <div
         role="none"
         ref={headRef}
-        className={classNames(
-          classes.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",
+        className={cn(
+          "fabric-collapsableHead",
+          stickyHeader && "bg-default sticky top-0 py-1 z-10",
+          classNames?.header,
+          "flex gap-1 flex-nowrap py-2 cursor-pointer items-center select-none hover:opacity-70",
           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>
+        <Icon size="1em" icon={openState ? iconOpen : iconClosed} rtlFlip />
+        <div className="flex-1">{head}</div>
       </div>
-      {openState && (
-        <div
-          ref={bodyRef}
-          className={classNames(classes.collapsableBody, bodyClassName)}
-        >
+      <Activity mode={openState ? "visible" : "hidden"}>
+        <div ref={bodyRef} className={cn("fabric-collapsableBody", classNames?.body)}>
           {body}
         </div>
-      )}
+      </Activity>
     </div>
   );
-};
+}