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

package/src/typography/Title.tsx

@@ -1,126 +1,54 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
- *
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
- * The MIT License (MIT)
- * Copyright (c) 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:
  *
- * 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 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 DetailedHTMLProps,
-  type ElementType,
-  type HTMLAttributes,
-} from "react";
-import { useMemoDebugger } from "../hooks/useEffectDebugger";
-import {
-  type AriaProps,
-  type ChildrenProp,
-  type ColorWithGrays,
-  type CssProp,
-  type SizeType,
-} from "../types";
-import { getBgClass, getColor, getColorClass } from "../utils";
-import { TitleSizeMap } from "./types";
-import classes from "./Typography.module.css";
+import { cn } from "@react-fabric/utilities";
+import type { ChildrenProp, CssProp } from "../types";
 
-export interface TitleProps extends ChildrenProp, CssProp, AriaProps {
-  as?: ElementType<
-    DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>,
+export interface TitleProps extends ChildrenProp, CssProp {
+  as?: React.ElementType<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>,
     "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
   >;
-  /**
-   * title background
-   */
-  bg?: ColorWithGrays | string;
-  /**
-   * title color (CSS color / tailwind color)
-   */
-  color?: ColorWithGrays | string;
-  /**
-   * title size (CSS color / tailwind color)
-   */
-  size?: SizeType | number | string;
-  /**
-   * font family
-   */
-  family?: "sans" | "serif" | "mono";
-  /**
-   * text align
-   */
-  align?: "start" | "end" | "center" | "justify";
 }
 
 /**
- * Typography title component
+ * A component that renders a title as different HTML elements based on the `as` prop.
+ * This component is useful for creating headings or titles in a consistent style across an application.
+ *
+ * @example
+ * ```jsx
+ * <Title as="h1">
+ *   This is a Title
+ * </Title>
+ * ```
  */
-export const Title = ({
-  children,
-  className,
-  as,
-  bg,
-  color,
-  size,
-  align,
-  family,
-  ...aria
-}: TitleProps) => {
-  /** ***************** style map *******************/
-  const styles = useMemoDebugger(
-    () => {
-      const s: KeyValue = {};
-      if (bg) {
-        s.backgroundColor = getColor(bg);
-      }
-      if (color) {
-        s.color = getColor(color);
-      }
-      if (align) {
-        s.textAlign = align;
-      }
-      if (size && !(size in TitleSizeMap)) {
-        s.fontSize = size;
-      }
-      if (size && size in TitleSizeMap) {
-        s.fontSize = TitleSizeMap[size];
-      }
-      return s;
-    },
-    [bg, color, size, align],
-    "Title styles",
-  );
-
+export function Title({ children, className, as, ...props }: TitleProps) {
   const E = as ?? "p";
   return (
-    <E
-      className={classNames(
-        classes.title,
-        "px-[2px] py-1 truncate whitespace-pre-wrap",
-        className,
-        family && `font-${family}`,
-        !as && "text-lg",
-        bg && getBgClass(bg),
-        color && getColorClass(color),
-      )}
-      style={styles}
-      {...aria}
-    >
+    <E className={cn("fabric-title", className, !as && "text-lg")} {...props}>
       {children}
     </E>
   );
-};
+}

package/src/typography/types.ts

@@ -1,26 +1,32 @@
-/*
+/**
  * 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.
  */
 
+/**
+ * Size-to-font-size mapping for the `Title` component.
+ * Maps size tokens (`xs`–`xl`) to rem-based font sizes.
+ */
 export const TitleSizeMap: KeyValue<string> = {
   xs: "0.875rem",
   sm: "1.125rem",
@@ -29,6 +35,10 @@ export const TitleSizeMap: KeyValue<string> = {
   xl: "2rem",
 };
 
+/**
+ * Size-to-font-size mapping for the `Text` component.
+ * Maps size tokens (`xs`–`xl`) to rem-based font sizes.
+ */
 export const TextSizeMap: KeyValue<string> = {
   xs: "0.75rem",
   sm: "0.875rem",

package/src/utils/calculateDimensions.ts

@@ -1,67 +1,77 @@
-/*
+/**
  * 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.
  */
 
 /* istanbul ignore file */
 
-/** ***************** get css style property value *******************/
-export const getCssStyle = (element: HTMLElement, property: string) => {
+/**
+ * Retrieves a computed CSS property value from an element.
+ *
+ * @param {HTMLElement} element - The DOM element to read from.
+ * @param {string} property - The CSS property name to retrieve.
+ * @returns The computed value of the property.
+ */
+export function getCssStyle(element: HTMLElement, property: string) {
   return getComputedStyle(element).getPropertyValue(property);
-};
+}
 
-/** ***************** calculate full width for given element *******************/
-export const calculateTextWidth = (
-  element: HTMLElement,
-  styleRoot?: HTMLElement,
-) => {
+/**
+ * Calculates the full rendered width of an element by cloning it with matching styles
+ * and measuring its offsetWidth in an off-screen position.
+ *
+ * @param {HTMLElement} element - The element to measure.
+ * @param {HTMLElement} styleRoot - Optional element whose computed styles to copy; falls back to element itself.
+ * @returns The element's full width in pixels.
+ */
+export function calculateTextWidth(element: HTMLElement, styleRoot?: HTMLElement) {
   const clone = element.cloneNode(true) as HTMLElement;
   clone.style.font = getCssStyle(styleRoot ?? element, "font");
   clone.style.padding = getCssStyle(styleRoot ?? element, "padding");
-  clone.style.letterSpacing = getCssStyle(
-    styleRoot ?? element,
-    "letter-spacing",
-  );
+  clone.style.letterSpacing = getCssStyle(styleRoot ?? element, "letter-spacing");
   clone.style.position = "absolute";
   clone.style.top = "-10000%";
   document.body.appendChild(clone);
   const width = clone.offsetWidth;
   clone.remove();
   return width;
-};
+}
 
-/** ***************** calculate full height for given element *******************/
-export const calculateTextHeight = (
-  element: HTMLElement,
-  styleRoot?: HTMLElement,
-) => {
+/**
+ * Calculates the full rendered height of an element by cloning it with matching styles
+ * and measuring its offsetHeight in an off-screen position.
+ *
+ * @param {HTMLElement} element - The element to measure.
+ * @param {HTMLElement} styleRoot - Optional element whose computed styles to copy; falls back to element itself.
+ * @returns The element's full height in pixels.
+ */
+export function calculateTextHeight(element: HTMLElement, styleRoot?: HTMLElement) {
   const clone = element.cloneNode(true) as HTMLElement;
   clone.style.font = getCssStyle(styleRoot ?? element, "font");
   clone.style.width = `${element.offsetWidth}px`;
   clone.style.padding = getCssStyle(styleRoot ?? element, "padding");
   clone.style.lineHeight = getCssStyle(styleRoot ?? element, "line-height");
-  clone.style.letterSpacing = getCssStyle(
-    styleRoot ?? element,
-    "letter-spacing",
-  );
+  clone.style.letterSpacing = getCssStyle(styleRoot ?? element, "letter-spacing");
   clone.style.webkitLineClamp = "unset";
   clone.style.position = "absolute";
   clone.style.left = "-10000%";
@@ -69,4 +79,4 @@ export const calculateTextHeight = (
   const height = clone.offsetHeight;
   clone.remove();
   return height;
-};
+}

package/src/utils/cloneElement.ts

@@ -0,0 +1,61 @@
+/**
+ * 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.
+ */
+
+/* istanbul ignore file */
+
+import { Children, isValidElement } from "react";
+import { Fragment } from "react/jsx-runtime";
+
+/**
+ * Flattens and clones React children, unwrapping `Fragment` wrappers.
+ *
+ * Recursively processes children to flatten nested `Fragment` elements,
+ * returning a plain array of cloned React nodes. Useful when you need
+ * to iterate over children without Fragment wrappers interfering.
+ *
+ * @param {React.ReactNode} children - The React children to flatten and clone.
+ * @returns An array of cloned React nodes, or `undefined` if children is falsy.
+ *
+ * @example
+ * ```tsx
+ * const children = cloneChildren(<><div>A</div><Fragment><div>B</div></Fragment></>);
+ * // Returns: [<div>A</div>, <div>B</div>]
+ * ```
+ */
+export function cloneChildren(children: React.ReactNode): React.ReactNode[] | undefined {
+  // eslint-disable-next-line @eslint-react/no-children-map
+  return Children.map(children, (c: React.ReactNode) => {
+    if (isValidElement(c)) {
+      if (c.type === Fragment) {
+        // just compare to `Fragment`
+        return cloneChildren((c.props as KeyValue)?.children as React.ReactNode);
+      }
+      return c as React.ReactElement<KeyValue>;
+    }
+    return c;
+  })
+    ?.flat()
+    .filter(Boolean);
+}

package/src/{core/content/Content.module.css → utils/getBadgeProps.ts}

@@ -4,7 +4,7 @@
  *
  *
  * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * Copyright (c) 2026 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,
@@ -21,20 +21,25 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .content {
-    --fabric-content: color-mix(in lab, var(--fabric-bg) 97%, var(--tint));
+import { isObject } from "@react-fabric/utilities";
+import { isValidElement } from "react";
+import type { BadgeType } from "../components/badge/Badge";
 
-    overflow: auto;
-    padding: 1rem;
-    background-color: var(--fabric-content);
-  }
-}
-
-@layer util {
-  .content {
-    width: unset;
-    height: unset;
-    margin: unset;
+/**
+ * Utility function to get badge properties from a badge value or object.
+ * It checks if the badge is an object and returns its properties,
+ *
+ * @param {string | number | BadgeType} badge - The badge value or object.
+ * @returns {BadgeType} An object containing badge properties.
+ */
+export function getBadgeProps(badge?: string | number | BadgeType) {
+  if (isObject(badge) && !isValidElement(badge)) {
+    return Object.assign({ forButton: true, placement: "" }, badge);
+  } else {
+    return {
+      value: badge,
+      forButton: true,
+      placement: "",
+    };
   }
 }

package/src/utils/getColor.ts

@@ -1,49 +1,55 @@
-/*
+/**
  * 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.
  */
 
 /* istanbul ignore file */
 
 import { isColor } from "@react-fabric/utilities";
 
-export const getColor = (color: string) => {
+/**
+ * Resolves a color value to a CSS color string.
+ *
+ * If the input is a valid CSS color (e.g., `"#ff0000"`, `"rgb(255,0,0)"`), it is returned as-is.
+ * Otherwise, it is treated as a design token name and resolved to a CSS custom property
+ * (e.g., `"primary-500"` → `"var(--color-primary-500)"`).
+ *
+ * @param {ColorUnion} color - The color value to resolve. Accepts CSS color strings or design token names.
+ * @returns The resolved CSS color string, or `undefined` if color is falsy.
+ *
+ * @example
+ * ```ts
+ * getColor("primary-500");    // "var(--color-primary-500)"
+ * getColor("#ff0000");       // "#ff0000"
+ * getColor("red");           // "var(--color-red)"
+ * getColor(undefined);       // undefined
+ * ```
+ */
+export function getColor(color?: string) {
+  if (!color) return undefined;
   if (color && isColor(color)) {
     return color;
   }
-};
-
-export const getBgClass = (bg: string) => {
-  if (bg && !isColor(bg)) {
-    return `bg-${bg}`;
-  }
-};
-
-export const getColorClass = (color: string) => {
-  if (color && !isColor(color)) {
-    return `text-${color}`;
-  }
-};
-export const getBorderClass = (color: string) => {
-  if (color && !isColor(color)) {
-    return `border-${color}`;
-  }
-};
+  if (color.startsWith("--")) return `var(${color})`;
+  return `var(--color-${color})`;
+}

package/src/utils/getIconProps.ts

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ */
+
+/* istanbul ignore file */
+
+import { isValidElement } from "react";
+import type { BaseIconProps, IconProps } from "../components/icon/Icon";
+
+/**
+ * Normalizes an `IconProps` value into a `BaseIconProps` object.
+ *
+ * If the input is a string or a React element, wraps it in an `{ icon }` object.
+ * If it's already a `BaseIconProps` object, returns it as-is.
+ *
+ * @param {IconProps} props - An icon specification: a string (CSS class or SVG path), a React element, or a `BaseIconProps` object.
+ * @returns A `BaseIconProps` object suitable for spreading onto the `Icon` component.
+ *
+ * @example
+ * ```tsx
+ * getIconProps("icon-[mdi--home]");
+ * // { icon: "icon-[mdi--home]" }
+ * getIconProps(<MyIcon />);
+ * // { icon: <MyIcon /> }
+ * getIconProps({ icon: "M10 20v-6h4v6" });
+ * // { icon: "M10 20v-6h4v6" }
+ * ```
+ */
+export function getIconProps(props: IconProps): BaseIconProps {
+  if (typeof props === "string") {
+    return { icon: props };
+  }
+  if (isValidElement(props)) {
+    return { icon: props };
+  }
+  return props;
+}