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

package/src/components/pillbox/Pillbox.tsx

@@ -0,0 +1,208 @@
+/**
+ * React Fabric
+ * @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 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.
+ */
+
+import { cn } from "@react-fabric/utilities";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useControlledValue } from "../../hooks/useControlledValue";
+import type { CssProp, CustomColors } from "../../types";
+import { getColor, getIconProps } from "../../utils";
+import { StyleEffect } from "../effect/StyleEffect";
+import type { IconProps } from "../icon/Icon";
+import { Icon } from "../icon/Icon";
+
+/**
+ * Represents a single selectable value type within a Pillbox.
+ */
+type ValueType = string | number | boolean;
+
+/**
+ * Configuration for a single pill option.
+ */
+interface PillOption {
+  /**
+   * Unique value identifying this option.
+   */
+  value: ValueType;
+  /**
+   * Display text shown inside the pill.
+   */
+  label?: React.ReactNode;
+  /**
+   * Icon configuration rendered before the label.
+   */
+  icon?: IconProps;
+  /**
+   * Background color override for the active pill highlight.
+   */
+  bg?: CustomColors;
+  /**
+   * Text color override for the active pill.
+   */
+  color?: CustomColors;
+  /**
+   * Whether this option is disabled and cannot be selected.
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Props for the Pillbox component.
+ */
+interface PillboxProps extends CssProp {
+  /**
+   * Render pills in a full-width flex layout instead of inline.
+   */
+  block?: boolean;
+  /**
+   * Enable toggle behavior when exactly two options exist, allowing
+   * deselect on click.
+   */
+  toggle?: boolean;
+  /**
+   * Hide pills visually when the group is not hovered.
+   */
+  autoHide?: boolean;
+
+  /**
+   * Array of pill options to render.
+   */
+  options: PillOption[];
+  /**
+   * Currently selected value. Controlled component pattern.
+   */
+  value?: ValueType | null;
+  /**
+   * Callback invoked when a pill is selected with its value.
+   */
+  onChange?: (value: ValueType) => void;
+}
+
+/**
+ * A pill-based selector that renders a horizontal group of clickable options
+ * with an animated highlight tracking the selected pill.
+ */
+export function Pillbox({ options, className, block, toggle, value, autoHide, onChange }: PillboxProps) {
+  const pillboxRef = useRef<HTMLDivElement>(null);
+  const [hilightStyle, setHilightStyle] = useState(() => ({ left: 0, top: 0, width: 0, height: 0 }));
+  const { currentValue, updateValue } = useControlledValue(value, null);
+
+  // Allow toggle behavior only when exactly two options exist and toggle is enabled
+  const canToggle = useMemo(() => options.length === 2 && toggle, [options, toggle]);
+  const currentIndex = useMemo(() => {
+    // Use Math.max to default to 0 when no option matches (prevents -1 index)
+    return Math.max(
+      0,
+      options.findIndex((o) => o.value === currentValue),
+    );
+  }, [options, currentValue]);
+
+  const currentOption = options[currentIndex];
+
+  // Update highlight position whenever the selected index or ref changes
+  useLayoutEffect(() => {
+    const el = pillboxRef.current?.querySelectorAll("button")[currentIndex];
+
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    setHilightStyle({
+      left: el?.offsetLeft ?? 0,
+      top: el?.offsetTop ?? 0,
+      width: el?.offsetWidth ?? 0,
+      height: el?.offsetHeight ?? 0,
+    });
+  }, [pillboxRef, currentIndex]);
+
+  const handleValueChange = (value: ValueType) => {
+    // Handle pill selection with optional toggle behavior
+    // In toggle mode, clicking the selected pill switches to the other option
+    updateValue((oldValue) => {
+      if (canToggle) {
+        // Toggle between the two options: click selected pill to switch to the other
+        const newValue = oldValue === options[1].value ? options[0].value : options[1].value;
+        onChange?.(newValue);
+        return newValue;
+      } else {
+        onChange?.(value);
+        return value;
+      }
+    });
+  };
+
+  return (
+    <div ref={pillboxRef} className={cn("fabric-pillbox", className, "relative p-1 outline rounded overflow-hidden")}>
+      <div
+        className={cn(
+          "fabric-pillboxContainer",
+          "relative group rounded select-none overflow-hidden flex-nowrap",
+          block ? "flex" : "inline-flex",
+          autoHide && "not-hover:bg-(--currentBg)",
+        )}
+        style={
+          {
+            "--currentBg": getColor(currentOption.bg ?? "primary-500"),
+            "--currentColor": getColor(currentOption.color ?? "white"),
+          } as React.CSSProperties
+        }
+      >
+        <div
+          className={cn(
+            "fabric-pillHilight",
+            "absolute rounded -z-1! top-0 h-full bg-(--currentBg) transition-[background-color,width,left] ease-in-out duration-500",
+            autoHide && "not-group-hover:hidden",
+          )}
+          style={hilightStyle}
+        />
+        {options.map((opt, idx) => (
+          <button
+            key={`${opt.value}`}
+            disabled={opt.disabled}
+            onClick={() => handleValueChange(opt.value)}
+            data-color={opt.color}
+            type="button"
+            className={cn(
+              "fabric-pill",
+              "flex justify-center flex-initial has-[.fabric-pillLabel]:px-4 has-[.fabric-pillLabel]:py-1 z-1 rounded not-disabled:cursor-pointer disabled:cursor-not-allowed items-center transition-colors ease-in-out duration-500",
+              idx === currentIndex ? "text-(--currentColor)" : "not-disabled:hover:bg-primary-500/20",
+              autoHide && idx !== currentIndex && "not-group-hover:hidden",
+              opt.disabled && "opacity-50",
+              block && "flex-1",
+            )}
+          >
+            {opt.icon && (
+              <Icon
+                className={cn(
+                  "fabric-pillIcon",
+                  "not-has-[~_.fabric-pillLabel]:m-[0.375em] text-[1.125em]  has-[~_.fabric-pillLabel]:me-1 inline-block size-[1em] flex-content pointer-events-none",
+                )}
+                {...getIconProps(opt.icon)}
+              />
+            )}
+            {opt.label && <span className="fabric-pillLabel flex-initial truncate">{opt.label}</span>}
+          </button>
+        ))}
+      </div>
+      <StyleEffect />
+    </div>
+  );
+}

package/src/components/progress/ProgressBar.tsx

@@ -21,16 +21,14 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Format } from "@react-fabric/utilities";
-import classNames from "classnames";
+import { Format, cn } from "@react-fabric/utilities";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
-import { type ColorType } from "../../types";
-import { getColorClass } from "../../utils";
-import classes from "./Progress.module.css";
+import type { CustomColors } from "../../types";
+import { getColor } from "../../utils";
 
 export interface ProgressProps {
   /**
-   * progress value (0-100)
+   * progress value (0-1)
    */
   value: number;
   /**
@@ -40,7 +38,7 @@ export interface ProgressProps {
   /**
    * color
    */
-  color?: ColorType;
+  color?: CustomColors;
   /**
    * animate
    */
@@ -51,7 +49,7 @@ export interface ProgressProps {
   label?: string;
 }
 
-const SizeMap: KeyValue = {
+const SizeMap: KeyValue<string> = {
   "": "0.875rem",
   xxs: "3px",
   xs: "0.375rem",
@@ -61,23 +59,28 @@ const SizeMap: KeyValue = {
   xl: "2rem",
 };
 
-export const ProgressBar = ({
-  value = 0,
-  size,
-  color = "primary",
-  label = "",
-  animate,
-}: ProgressProps) => {
+/**
+ * A component that displays a progress bar indicating the completion percentage of a task or operation.
+ * The progress bar is styled with a background color and a track that fills based on the value provided.
+ * It can also display a label showing the percentage value.
+ * The label can be customized or hidden based on the props provided.
+ *
+ * @example
+ * ```jsx
+ * <ProgressBar value={0.75} size="md" color="primary-500" label="Loading" animate />
+ * // Renders a progress bar with 75% completion, medium size, primary color, and a label "Loading"
+ *
+ * <ProgressBar value={0.5} size="lg" color="success-500" />
+ * // Renders a progress bar with 50% completion, large size, and success color without a label
+ * ```
+ */
+export function ProgressBar({ value = 0, size, color = "primary-500", label = "", animate }: ProgressProps) {
   /** ***************** make sure value is between 0 and 100 *******************/
-  const actualValue = useMemoDebugger(
-    () => Math.min(Math.max(value, 0), 100),
-    [value],
-    "ProgressBar value",
-  );
+  const actualValue = useMemoDebugger(() => Math.min(Math.max(value, 0), 1), [value], "ProgressBar value");
 
   const progressVar = useMemoDebugger<KeyValue>(
     () => ({
-      "--progress": actualValue,
+      "--progress": actualValue * 100,
     }),
     [actualValue],
     "ProgressBar cssVar",
@@ -86,13 +89,10 @@ export const ProgressBar = ({
   /** ***************** component *******************/
   return (
     <div
-      className={classNames(
-        classes.progressbar,
-        getColorClass(color),
-        "block bg-dimmed relative rounded font-bold overflow-hidden whitespace-nowrap",
-      )}
+      className={cn("fabric-progressbar", "block bg-tint-50 relative rounded font-bold overflow-hidden whitespace-nowrap")}
       style={{
         ...progressVar,
+        color: getColor(color),
         minHeight: SizeMap[size ?? ""],
         fontSize: SizeMap[size ?? ""],
       }}
@@ -101,22 +101,22 @@ export const ProgressBar = ({
     >
       {!["xxs", "xs", "sm"].includes(size ?? "") && (
         <div className="absolute inset-0 text-center z-0 align-top">
-          {label} {Format.percent(actualValue / 100)}
+          {label} {Format.percent(actualValue)}
         </div>
       )}
       <div
-        className={classNames(
-          classes.progressTrack,
-          animate && classes.progressAnimate,
+        className={cn(
+          "fabric-progressTrack",
+          animate && "fabric-progressAnimate",
           "h-full overflow-clip bg-current relative z-0",
         )}
       />
       {!["xxs", "xs", "sm"].includes(size ?? "") && (
         <div
-          className={classNames("h-full absolute inset-0 overflow-hidden z-1")}
-          data-label={`${label} ${Format.percent(actualValue / 100)}`}
+          className={cn("h-full absolute inset-0 overflow-hidden z-1")}
+          data-label={`${label} ${Format.percent(actualValue)}`}
         />
       )}
     </div>
   );
-};
+}

package/src/components/progress/ProgressCircle.tsx

@@ -21,15 +21,14 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Format } from "@react-fabric/utilities";
-import classNames from "classnames";
+import { Format, cn } from "@react-fabric/utilities";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
-import { type ColorType } from "../../types";
-import { getColorClass } from "../../utils";
+import type { CustomColors } from "../../types";
+import { getColor } from "../../utils";
 
 export interface ProgressProps {
   /**
-   * progress value (0-100)
+   * progress value (0-1)
    */
   value: number;
   /**
@@ -39,10 +38,10 @@ export interface ProgressProps {
   /**
    * color
    */
-  color?: ColorType;
+  color?: CustomColors;
 }
 
-const SizeMap: KeyValue = {
+const SizeMap: KeyValue<string> = {
   "": "1rem",
   sm: "0.875rem",
   md: "1.125rem",
@@ -50,23 +49,29 @@ const SizeMap: KeyValue = {
   xl: "2rem",
 };
 
-export const ProgressCircle = ({
-  value = 0,
-  size = "sm",
-  color = "primary",
-}: ProgressProps) => {
+/**
+ * A circular progress indicator that visually represents a percentage of completion.
+ * It displays a circular track with a stroke that fills based on the `value` prop.
+ * The component is customizable with size and color props.
+ *
+ * @example
+ * ```jsx
+ * <ProgressCircle value={0.75} size="md" color="primary-500" />
+ * // Renders a circular progress indicator with 75% completion, medium size, and primary color.
+ *
+ * <ProgressCircle value={0.5} size="lg" color="secondary-500" />
+ * // Renders a circular progress indicator with 50% completion, large size, and secondary color.
+ * ```
+ */
+export function ProgressCircle({ value = 0, size = "sm", color = "primary-500" }: ProgressProps) {
   /** ***************** make sure value is between 0 and 100 *******************/
-  const actualValue = useMemoDebugger(
-    () => Math.min(Math.max(value, 0), 100),
-    [value],
-    "ProgressCirle value",
-  );
+  const actualValue = useMemoDebugger(() => Math.min(Math.max(value, 0), 1), [value], "ProgressCirle value");
 
   /** ***************** calculate stroke offset by actual value *******************/
   const strokeDashoffset = useMemoDebugger(
     () => {
       const circumfrence = Math.PI * 2 * 44;
-      return circumfrence * (1 - actualValue / 100);
+      return circumfrence * (1 - actualValue);
     },
     [actualValue],
     "ProgressCirle dashOffset",
@@ -75,25 +80,12 @@ export const ProgressCircle = ({
   /** ***************** component *******************/
   return (
     <div
-      className={classNames(
-        "inline-block w-[4em] h-[4em] text-lg relative",
-        getColorClass(color),
-      )}
+      className={cn("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"
-        className={classNames("absolute inset-0 w-full h-full stroke-dimmed")}
-      >
-        <circle
-          cx="50"
-          cy="50"
-          r="44"
-          strokeWidth="12"
-          strokeOpacity="0.25"
-          fillOpacity="0"
-        />
+      <svg viewBox="0 0 100 100" className={cn("absolute inset-0 w-full h-full stroke-tint-500")}>
+        <circle cx="50" cy="50" r="44" strokeWidth="12" strokeOpacity="0.25" fillOpacity="0" />
         <circle
           cx="50"
           cy="50"
@@ -111,8 +103,8 @@ export const ProgressCircle = ({
         />
       </svg>
       <span className="flex w-full h-full items-center justify-center select-none font-bold text-[0.625em]">
-        {Format.percent(actualValue / 100)}
+        {Format.percent(actualValue)}
       </span>
     </div>
   );
-};
+}

package/src/components/tabpanel/Tab.tsx

@@ -21,36 +21,32 @@
  * 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 { Fragment, type ReactElement, useMemo } from "react";
-import { Tooltip } from "../../overlays";
-import {
-  type AriaProps,
-  type BadgeType,
-  type CallbackReturn,
-  type ChildrenProp,
-  type ColorType,
-  type CssProp,
-  type IconProps,
-  type PolymorphicProps,
-  type RefProp,
-  type TestProps,
-  type TooltipProp,
+import { cn, isString } from "@react-fabric/utilities";
+import { Fragment, useMemo } from "react";
+import type {
+  CallbackReturn,
+  ChildrenProp,
+  ColorBase,
+  CssPropWithMap,
+  PolymorphicProps,
+  RefProp,
+  TestProps,
 } from "../../types";
-import { Badge, getBadgeProps } from "../badge/Badge";
+import { getBadgeProps, getIconProps } from "../../utils";
+import type { BadgeType } from "../badge/Badge";
+import { Badge } from "../badge/Badge";
 import { DropdownTool } from "../dropdown/DropdownTool";
+import type { IconProps } from "../icon/Icon";
 import { Icon } from "../icon/Icon";
-import classes from "./TabPanel.module.css";
+import type { TooltipType } from "../tooltip/Tooltip";
+import { Tooltip } from "../tooltip/Tooltip";
 
 export interface TabProps
-  extends Partial<ChildrenProp>,
-    CssProp,
-    RefProp,
-    AriaProps,
-    TestProps,
-    IconProps,
-    TooltipProp {
+  extends
+    Partial<ChildrenProp>,
+    CssPropWithMap<{ root: string; label: string; active: string; badge: string }>,
+    RefProp<HTMLButtonElement>,
+    TestProps {
   /**
    * tab id
    */
@@ -62,11 +58,17 @@ export interface TabProps
   /**
    * tab color
    */
-  color?: ColorType;
+  color?: ColorBase;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * tab badge
    */
   badge?: string | number | BadgeType;
+
+  tooltip?: string | TooltipType;
   /**
    * disabled
    */
@@ -75,14 +77,10 @@ export interface TabProps
    * tab flex to fill button
    */
   tabFlex?: boolean;
-  /**
-   * className for active state
-   */
-  activeClassName?: string;
   /**
    * action dropdown body
    */
-  actions?: ReactElement;
+  actions?: React.ReactElement;
   /**
    * close handler
    */
@@ -93,35 +91,56 @@ export interface TabProps
   onClick?: (id: string) => CallbackReturn;
 }
 
-export const Tab = <Tag extends React.ElementType = "button">({
+/**
+ * A component that represents a tab in a tabbed interface. It can display an icon, label, badge, and actions.
+ * It supports polymorphic rendering, allowing it to be rendered as different HTML elements.
+ * It also supports tooltips, active states, and click handling.
+ *
+ * @example
+ * ```jsx
+ * <Tab
+ *   id="tab1"
+ *   label="Tab 1"
+ *   icon="home"
+ *   badge="New"
+ *   onClick={(id) => console.log(`Tab clicked: ${id}`)}
+ *   onClose={() => console.log("Tab closed")}
+ *   active={true}
+ *   actions={<button>Action</button>}
+ *   color="primary"
+ *   tooltip="This is a tab"
+ *   activeClassName="bg-blue-100"
+ * />
+ * // Renders a tab with label "Tab 1", home icon, blue background, white text, badge "New",
+ * // and an action button. The tab is active and has a tooltip.
+ * ```
+ */
+export function Tab<Tag extends React.ElementType = "button">({
   ref,
   as,
   id,
   className,
+  classNames,
   label,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   badge,
   disabled,
   onClose,
-  // @ts-expect-error ignore
-  active,
-  // @ts-expect-error ignore
-  minimal,
   onClick,
   tabFlex,
   color,
   actions,
   tooltip,
-  activeClassName,
-  ...aria
-}: TabProps & PolymorphicProps<Tag>) => {
+  // @ts-expect-error ignore
+  active,
+  ...props
+}: TabProps & PolymorphicProps<Tag>): React.ReactElement<TabProps> {
   const badgeProps = useMemo(() => {
     return getBadgeProps(badge);
   }, [badge]);
 
+  const minimal = useMemo(() => !label, [label]);
+
   const tooltipProps = useMemo(() => {
     if (isString(tooltip)) return { content: tooltip };
 
@@ -136,49 +155,41 @@ export const Tab = <Tag extends React.ElementType = "button">({
         data-id={id}
         disabled={disabled}
         data-color={color}
-        className={classNames(
-          classes.tabButton,
+        data-inner-clickable
+        className={cn(
+          "fabric-tabButton",
           className,
-          active && "active pointer-events-none",
-          active && activeClassName,
+          classNames?.root,
+          !!active && "active pointer-events-none",
+          !!active && classNames?.active,
           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",
+          tabFlex ? "flex-1" : "flex-initial max-w-36",
+          minimal && "min-w-6",
+          "flex items-center min-w-18 justify-center overflow-hidden cursor-pointer group/tool",
         )}
         onClick={() => !active && onClick?.(id)}
-        ref={ref as AnyObject}
-        {...aria}
+        ref={ref}
+        {...props}
       >
-        {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>
-        )}
+        {icon && <Icon className="flex-content p-2" {...getIconProps(icon)} />}
+        {!minimal && <label className={cn(classNames?.label, "flex-initial truncate text-center px-1 py-1")}>{label}</label>}
         {badge && (
           <Badge
-            {...badgeProps}
-            placement={minimal ? "end" : ""}
-            className={classNames("me-1", badgeProps.className)}
+            {...(badgeProps as AnyObject)}
+            inline={!minimal}
+            placement={minimal ? "end" : undefined}
+            className={cn("me-1", classNames?.badge)}
           />
         )}
-        {actions && active && (
-          <DropdownTool className="bg-base/20 me-1 z-5">{actions}</DropdownTool>
+        {actions && (
+          <DropdownTool groupHover={!active} 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",
-            )}
+            className={cn("cursor-pointer mx-1 opacity-65 hover:opacity-90 pointer-events-auto")}
             onClick={(e) => {
               onClose?.();
               e.stopPropagation();
@@ -190,4 +201,4 @@ export const Tab = <Tag extends React.ElementType = "button">({
       </E>
     </W>
   );
-};
+}