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

package/src/components/button/ToggleButtonGroup.tsx

@@ -1,99 +1,111 @@
-/*
+/**
  * 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 { EMPTY_ARRAY, isArray } from "@react-fabric/utilities";
-import classNames from "classnames";
-import { Children, cloneElement, useCallback, useMemo } from "react";
+import { cn, EMPTY_ARRAY, isArray } from "@react-fabric/utilities";
+import { cloneElement, isValidElement } from "react";
 import { useControlledValue } from "../../hooks/useControlledValue";
-import {
-  type AriaProps,
-  type ChildrenProp,
-  type ColorType,
-  type CssProp,
-  type SizeType,
-} from "../../types";
-import { type ButtonProps } from "./Button";
-import classes from "./Button.module.css";
+import type { ChildrenProp, CssProp, TestProps } from "../../types";
+import { cloneChildren } from "../../utils";
+import type { ButtonProps, SharedButtonProps } from "./Button";
 
-interface BaseProps
-  extends CssProp,
-    AriaProps,
-    ChildrenProp<React.ReactElement<ButtonProps & { value: string }>> {
+interface BaseProps extends CssProp, TestProps, SharedButtonProps {
   /**
-   * vertical orientation
+   * Arrange buttons vertically (top-to-bottom) instead of the default horizontal layout.
    */
   vertical?: boolean;
   /**
-   * button styling
-   */
-  variant?: "outline" | "solid" | "link";
-  /**
-   * button size
-   */
-  size?: SizeType;
-  /**
-   * button color
-   */
-  color?: ColorType;
-  /**
-   * full rounded edges
-   */
-  rounded?: boolean;
-  /**
-   * disabled state
+   * Disable all child toggle buttons, preventing interaction.
    */
   disabled?: boolean;
   /**
-   * stretch to full width
+   * Stretch the button group to full available width using `flex` (vs `inline-flex` by default).
    */
   fullWidth?: boolean;
 }
 
-export type ToggleButtonGroupProps = BaseProps &
-  (
-    | {
-        /**
-         *
-         */
-        value: string;
-        /**
-         * change handler
-         */
-        onChange?: (value: string) => void;
-      }
-    | {
-        /**
-         *
-         */
-        value: string[];
-        /**
-         * change handler
-         */
-        onChange?: (value: string[]) => void;
-      }
-  );
+/**
+ * Props for single-value (radio-like) or multi-value (checkbox-like) toggle groups.
+ */
+export type ToggleButtonGroupValueProps<T> =
+  | {
+      /** The currently selected single value. When `null`, no button is active. */
+      value: T;
+      /** Callback invoked when the selected value changes. Receives the new value or `null` if cleared. */
+      onChange?: (value: T) => void;
+    }
+  | {
+      /** The array of currently selected values. An empty array means no buttons are active. */
+      value: T[];
+      /** Callback invoked when the selected values change. Receives the updated array or `null` if cleared. */
+      onChange?: (value: T[]) => void;
+    };
+
+export type ToggleButtonGroupProps<T> = BaseProps & ChildrenProp<ButtonProps & { value: T }> & ToggleButtonGroupValueProps<T>;
 
-export const ToggleButtonGroup = ({
+/**
+ * A composite component that renders a group of toggle buttons with shared styling
+ * and selection behavior.
+ *
+ * Automatically switches between single-select (radio-like) and multi-select
+ * (checkbox-like) modes based on the `value` prop: a scalar value enables radio
+ * mode (one active button), while an array enables checkbox mode (multiple active).
+ *
+ * All child buttons receive consistent `color`, `size`, `variant`, `disabled`,
+ * and `rounded` props, while each button's own `value` and `onClick` are preserved
+ * and extended with the group's selection logic.
+ *
+ * @example
+ * ```jsx
+ * // Single-select (radio-like)
+ * <ToggleButtonGroup
+ *   value={selected}
+ *   onChange={(v) => setSelected(v)}
+ *   variant="outlined"
+ *   color="primary"
+ *   size="md"
+ * >
+ *   <Button value="a">A</Button>
+ *   <Button value="b">B</Button>
+ * </ToggleButtonGroup>
+ *
+ * // Multi-select (checkbox-like)
+ * <ToggleButtonGroup
+ *   value={selected}
+ *   onChange={(v) => setSelected(v)}
+ *   variant="outlined"
+ *   color="primary"
+ *   rounded
+ *   fullWidth
+ * >
+ *   <Button value="a">A</Button>
+ *   <Button value="b">B</Button>
+ *   <Button value="c">C</Button>
+ * </ToggleButtonGroup>
+ * ```
+ */
+export function ToggleButtonGroup<T extends AnyObject = string>({
   vertical,
   className,
   children,
@@ -105,57 +117,59 @@ export const ToggleButtonGroup = ({
   size,
   value,
   onChange,
-  ...aria
-}: ToggleButtonGroupProps) => {
-  const isMultiple = useMemo(() => isArray(value), [value]);
-  const { currentValue, updateValue } = useControlledValue<typeof value>(
-    value,
-    isArray(value) ? EMPTY_ARRAY : "",
-  );
+  ...props
+}: ToggleButtonGroupProps<T>) {
+  // Determine selection mode: array value = multi-select, scalar = single-select
+  const isMultiple = isArray(value);
+  // Controlled value with empty array / null as defaults for multi / single mode
+  const { currentValue, updateValue } = useControlledValue(value, isMultiple ? (EMPTY_ARRAY as T[]) : undefined);
 
-  const clickHandler = useCallback(
-    (cb: AnyObject) => (e: React.MouseEvent<HTMLElement>) => {
-      let newValue: AnyObject = `${e.currentTarget.dataset.value}`;
-      if (isArray(currentValue)) {
-        if (currentValue.includes(newValue))
-          newValue = currentValue.filter((v) => v !== newValue);
-        else newValue = [...currentValue, newValue];
-      }
-      updateValue(newValue);
-      onChange?.(newValue);
-      cb?.(e);
-    },
-    [currentValue, onChange],
-  );
+  // Toggle handler: toggles the child's value in/out of the selected set
+  const clickHandler = (childValue: T, cb?: (e?: React.MouseEvent) => void) => (e?: React.MouseEvent) => {
+    let newValue;
+    if (isArray(currentValue)) {
+      // Multi-select: remove if already selected, otherwise add
+      if (currentValue.includes(childValue)) newValue = currentValue.filter((v) => v !== childValue);
+      else newValue = [...currentValue, childValue];
+    } else {
+      // Single-select: toggle to this value (replaces previous)
+      newValue = childValue;
+    }
+    updateValue(newValue);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
+    onChange?.(newValue as any);
+    cb?.(e);
+  };
 
   return (
     <div
-      className={classNames(
-        classes.buttonGroup,
+      {...props}
+      className={cn(
+        "fabric-buttonGroup",
+        "flex-nowrap align-middle is-vertical:flex-col",
         className,
         fullWidth ? "flex" : "inline-flex",
-        "flex-nowrap align-middle",
-        vertical && classes.vertical,
-        vertical && "flex-col",
       )}
-      {...aria}
+      data-vertical={vertical}
     >
-      {Children.map(children, (child: AnyObject) =>
-        cloneElement(child, {
-          color,
-          size,
-          variant,
-          disabled,
-          rounded,
-          fullWidth,
-          ...child.props,
-          onClick: clickHandler(child.props.onClick),
-          "data-value": child.props.value,
-          "data-checked": isMultiple
-            ? currentValue.includes(child.props.value)
-            : currentValue === child.props.value,
-        }),
-      )}
+      {cloneChildren(children)?.map((child) => {
+        if (isValidElement(child)) {
+          const childEl = child as React.ReactElement<ButtonProps & { value: T }>;
+          return cloneElement(childEl, {
+            color,
+            size,
+            variant,
+            disabled,
+            rounded,
+            ...childEl.props,
+            activeClickable: isMultiple,
+            onClick: clickHandler(childEl.props.value, childEl.props.onClick),
+            // Check if this button is currently active based on selection mode
+            active: isArray(currentValue) ? currentValue?.includes(childEl.props.value) : currentValue === childEl.props.value,
+          });
+        }
+        return child;
+      })}
     </div>
   );
-};
+}

package/src/components/callout/Callout.tsx

@@ -1,60 +1,52 @@
-/*
+/**
  * 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 {
-  type AriaProps,
-  type ChildrenProp,
-  type ColorType,
-  type CssProp,
-  type PaletteType,
-  type TestProps,
-} from "../../types";
-import { CoreIcons } from "../../types/icons";
-import { getBgClass, getBorderClass, getColorClass } from "../../utils";
+import { cn } from "@react-fabric/utilities";
+import type { ChildrenProp, ColorBase, CssPropWithMap, TestProps } from "../../types";
+import { getIconProps } from "../../utils";
+import type { IconProps } from "../icon/Icon";
 import { Icon } from "../icon/Icon";
 
 export interface CalloutProps
-  extends AriaProps,
-    ChildrenProp,
-    CssProp,
-    TestProps {
+  extends ChildrenProp, CssPropWithMap<{ root: string; legend: string; title: string; icon: string }>, TestProps {
   /**
    * callout color
    */
-  color?: ColorType | PaletteType;
+  color?: ColorBase | "default";
   /**
    * legend title
    */
-  legend?: string;
+  legend?: string | React.ReactElement;
   /**
    * callout icon
    */
-  icon?: string;
+  icon?: IconProps;
   /**
    * callout title
    */
-  title?: string;
+  title?: string | React.ReactElement;
   /**
    * callout border style
    */
@@ -65,47 +57,77 @@ export interface CalloutProps
   onClose?: () => void;
 }
 
-export const Callout = ({
+/**
+ * A component that displays a callout box with an optional title, icon, and legend.
+ * It can be used to highlight important information, warnings, or notices.
+ * The callout can be styled with different colors and border styles, and it supports a close action.
+ * This component is useful for drawing attention to specific content within a page or application,
+ * such as alerts, notifications, or important messages.
+ *
+ * @example
+ * ```jsx
+ * <Callout
+ *   color="primary"
+ *   legend="Important Notice"
+ *   title="Attention Required"
+ *   icon="info"
+ *   onClose={() => console.log("Callout closed")}
+ * >
+ *   This is an important message that requires your attention.
+ * </Callout>
+ * // Renders a callout box with a primary color, an icon, a title, and a close button.
+ * ```
+ */
+export function Callout({
   children,
-  // @ts-expect-error ignore
-  color = "tint",
+  color = "default",
+  classNames,
   legend,
   title,
   icon,
-  border,
+  border = "solid",
   onClose,
   className,
-  ...aria
-}: CalloutProps) => {
+  ...props
+}: CalloutProps) {
   return (
     <fieldset
-      className={classNames(
+      className={cn(
+        "fabric-callout block rounded-capped  max-w-full relative overflow-hidden",
         className,
-        "block rounded-capped border max-w-full relative overflow-hidden mb-4",
-        getBgClass(color + "-50"),
-        getColorClass(color + "-700"),
-        getBorderClass(color + "-300"),
         border === "dashed" && "border-dashed",
         border === "dotted" && "border-dotted",
+        border != "solid" ? "border-[1.5px]" : "border",
       )}
-      {...aria}
+      style={{ "--color": `var(--color-${color})` } as React.CSSProperties}
+      {...props}
     >
-      {legend && <legend className="px-2 mx-4 font-medium">{legend}</legend>}
-      <div className={classNames("break-words whitespace-break-spaces p-2")}>
+      {legend && (
+        <legend className={cn("fabric-calloutLegend px-2 mx-4 font-medium", classNames?.legend)} data-ref="calloutLegend">
+          {legend}
+        </legend>
+      )}
+      <div className={cn("fabric-calloutContent break-words whitespace-break-spaces p-2")}>
         <div className="flex flex-nowrap items-center text-xl pe-4 gap-2 mb-4 empty:mb-0">
-          {icon && <Icon icon={icon} />}
-          {title && <p className="flex-1">{title}</p>}
+          {icon && <Icon {...getIconProps(icon)} data-ref="calloutIcon" />}
+          {title && (
+            <p className="flex-1" data-ref="calloutTitle">
+              {title}
+            </p>
+          )}
         </div>
-        <div className="pe-4">{children}</div>
+        <div className="fabric-calloutMessage pe-4">{children}</div>
       </div>
       {onClose && (
-        <Icon
-          size="md"
-          className={classNames("absolute end-2", legend ? "top-0" : "top-2")}
-          icon={CoreIcons.close}
+        <div
+          role="none"
+          className={cn("absolute inset-e-2 text-tint-500 hover:text-tint-700 cursor-pointer", legend ? "top-0" : "top-2")}
+          data-ref="calloutClose"
           onClick={onClose}
-        />
+        >
+          <Icon size="md" icon="icon-[mdi--close]" />
+        </div>
       )}
     </fieldset>
   );
-};
+}