@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.52

package/dist/types/typography/Abbr.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { type ChildProp, type ColorType, type CssProp } from "../types";
+import { type ChildProp, type ColorType, type CssProp, type PaletteType } from "../types";
 export interface AbbrProps extends ChildProp<string>, CssProp {
     /**
      * content to copy using the tooltip copy action
@@ -10,13 +9,44 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
      *
      * [textPart, tooltip, color (class name or color string)]
      */
-    abbr: Array<[textPart: string, tooltip: string, color?: ColorType | string]>;
+    abbr: Array<[
+        textPart: string,
+        tooltip: string,
+        color?: ColorType | PaletteType | string
+    ]>;
     /**
      * renderer callback
      */
     renderer?: (part: string[]) => JSX.Element;
 }
 /**
- * Typography abbr component to wrap text parts in `abbr` with tooltip
+ * A component that renders abbreviated text with tooltips for additional information.
+ * It allows you to define a list of abbreviations, each with a tooltip and optional color.
+ * The component will tokenize the children text and replace matching parts with the abbreviated version.
+ * It supports a copy action that can either copy the text or the tooltip content.
+ * This component is useful for displaying technical terms or acronyms in a user-friendly way,
+ * while providing additional context through tooltips.
+ *
+ * @param {AbbrProps} props - The properties for the Abbr component.
+ * @returns {JSX.Element} The rendered Abbr component.
+ *
+ * @example
+ * ```jsx
+ * <Abbr
+ * abbr={[
+ *   ["HTML", "HyperText Markup Language", "primary"],
+ *   ["CSS", "Cascading Style Sheets", "secondary"],
+ *   ["JS", "JavaScript", "success"],
+ * ]}
+ * className="text-sm"
+ * copyContent="tooltip"
+ * >
+ *   Learn more about HTML, CSS, and JS.
+ * </Abbr>
+ * // Renders the text with abbreviations for HTML, CSS, and JS,
+ * // each with a tooltip showing the full form and colored according to the specified color.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--abbr} for more details.
  */
 export declare const Abbr: ({ children, abbr, className, renderer, copyContent, }: AbbrProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Anchor.d.ts

@@ -0,0 +1,42 @@
+import { type MouseEventHandler } from "react";
+import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type PaletteType, type PolymorphicProps, type RefProp, type SizeType } from "../types";
+export interface AnchorProps extends ChildrenProp, CssProp, RefProp, AriaProps {
+    /**
+     * link background (CSS color / tailwind color)
+     */
+    bg?: ColorType | PaletteType | string;
+    /**
+     * link color (CSS color / tailwind color)
+     */
+    color?: ColorType | PaletteType | string;
+    /**
+     * link size
+     */
+    size?: SizeType | number | string;
+    /**
+     * font family
+     */
+    family?: "sans" | "serif" | "mono";
+    onClick?: MouseEventHandler;
+}
+/**
+ * A versatile link component that supports polymorphic rendering, allowing it to be used as an anchor (`<a>`), button, or any other HTML element.
+ * It can be styled with background color, text color, font size, and font family.
+ * It accepts various properties such as `bg`, `color`, `size`, and `family` to customize its appearance.
+ * This component is useful for creating links that need to be styled consistently across an application, while also providing flexibility in terms of the HTML element used.
+ *
+ * @param {AnchorProps} props - The properties for the Anchor component.
+ * @param {Tag} as - The HTML element type to render as (default is "a").
+ * @returns {JSX.Element} - A styled anchor element with the specified properties.
+ *
+ * @example
+ * ```jsx
+ * <Anchor href="https://example.com" bg="blue-500" color="white" size="md">
+ *   Click here
+ * </Anchor>
+ * // Renders a link with a blue background, white text, and medium font size.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--anchor} for more details.
+ */
+export declare const Anchor: <Tag extends React.ElementType = "a">({ ref, as, children, className, bg, color, family, size, ...aria }: AnchorProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Copy.d.ts

@@ -1,4 +1,19 @@
 import { type CssProp, type SizeType } from "../types";
+/**
+ * A component that provides a button to copy text to the clipboard.
+ * It uses the Clipboard API to write the specified text to the clipboard.
+ * The button displays a tooltip feedback when the text is successfully copied.
+ *
+ * @param {CopyProps} props - The properties for the Copy component.
+ * @returns {JSX.Element} The rendered Copy component.
+ *
+ * @example
+ * ```jsx
+ * <Copy text="Text to copy" size="small" />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--copy} for more details.
+ */
 export interface CopyProps extends CssProp {
     text: string;
     /**

package/dist/types/typography/Mark.d.ts

@@ -1,18 +1,36 @@
-/// <reference types="react" />
-import { type ChildProp, type ColorType } from "../types";
+import { type ChildProp, type ColorType, type PaletteType } from "../types";
 export interface MarkProps extends ChildProp<string> {
     /**
      * texts to match and abbreviate within
      *
      * [textPart, color (class name or color string)]
      */
-    mark: Array<[textPart: string, color?: ColorType | string]>;
+    mark: Array<[textPart: string, color?: ColorType | PaletteType | string]>;
     /**
      * renderer callback
      */
     renderer?: (part: string[]) => JSX.Element;
 }
 /**
- * Typography mark component to wrap text parts in `mark`
+ * A component that highlights specific text parts with a mark element, allowing for custom rendering and color.
+ * It tokenizes the children string based on the provided `mark` array,
+ * which contains pairs of text parts and their corresponding colors.
+ * The component can use a custom renderer to display the marked text,
+ * allowing for greater flexibility in how the text is presented.
+ *
+ * @param {MarkProps} props - The properties for the Mark component.
+ * @returns {JSX.Element} The rendered Mark component.
+ *
+ * @example
+ * <Mark
+ *   mark={[
+ *     ["important", "red"],
+ *     ["note", "blue"],
+ *   ]}
+ * >
+ *   This is an important note that should be highlighted.
+ * </Mark>
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--mark} for more details.
  */
 export declare const Mark: ({ children, mark, renderer }: MarkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Text.d.ts

@@ -30,6 +30,32 @@ export interface TextProps extends ChildrenProp, CssProp, AriaProps, TestProps {
     clamp?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 }
 /**
- * Typography text component
+ * A component that renders text with various styles, supports line clamping, and provides a "show more" link if the text is clipped.
+ * It can be rendered as an inline element or a block element, and allows customization of background color, text color, font size, font family, and text alignment.
+ * It also supports line clamping to limit the number of visible lines, and provides a toggle to show more or less text when the content exceeds the specified clamp.
+ * The component uses a combination of CSS and JavaScript to achieve the desired effects, ensuring a smooth user experience.
+ * It leverages the ResizeObserver API to detect changes in the text container's size and adjust the line clamping accordingly.
+ *
+ * @param {TextProps} props - The properties for the Text component.
+ * @returns {JSX.Element} The rendered Text component.
+ *
+ * @example
+ * ```jsx
+ * <Text
+ *   inline={false}
+ *   bg="bg-gray-100"
+ *   color="text-gray-800"
+ *   size="md"
+ *   family="sans"
+ *   clamp={2}
+ *   align="start"
+ * >
+ *   This is a sample text that demonstrates the Text component with various styles applied.
+ * </Text>
+ * // Renders a block-level text with gray background, dark gray text, medium font size,
+ * // sans-serif font family, clamped to 2 lines, and left-aligned.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--text} for more details.
  */
 export declare const Text: ({ children, className, inline, bg, color, family, size, clamp, align, ...aria }: TextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Title.d.ts

@@ -24,6 +24,21 @@ export interface TitleProps extends ChildrenProp, CssProp, AriaProps {
     align?: "start" | "end" | "center" | "justify";
 }
 /**
- * Typography title component
+ * A component that renders a title with customizable styles such as background color, text color, size, alignment, and font family.
+ * It can be rendered 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.
+ *
+ * @param {TitleProps} props - The properties for the Title component.
+ * @returns {JSX.Element} The rendered Title component.
+ *
+ * @example
+ * ```jsx
+ * <Title as="h1" bg="blue-500" color="white" size="2xl" align="center">
+ *   This is a Title
+ * </Title>
+ * // Renders a title as an h1 element with a blue background, white text color, size of 2xl, and centered alignment.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--title} for more details.
  */
 export declare const Title: ({ children, className, as, bg, color, size, align, family, ...aria }: TitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/index.d.ts

@@ -1,6 +1,6 @@
 export { Abbr } from "./Abbr";
+export { Anchor } from "./Anchor";
 export { Copy } from "./Copy";
-export { Link } from "./Link";
 export { Mark } from "./Mark";
 export { Text } from "./Text";
 export { Title } from "./Title";

package/dist/types/utils/cloneElement.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from "react";
+export declare const cloneChildren: (children: ReactNode, callback: (child: ReactNode, index: number) => ReactNode) => ReactNode;

package/dist/types/utils/getColor.d.ts

@@ -1,4 +1 @@
-export declare const getColor: (color: string) => string | undefined;
-export declare const getBgClass: (bg: string) => string | undefined;
-export declare const getColorClass: (color: string) => string | undefined;
-export declare const getBorderClass: (color: string) => string | undefined;
+export declare const getColor: (color: string) => string;

package/dist/types/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./calculateDimensions";
+export * from "./cloneElement";
 export * from "./getColor";
 export * from "./nodeCheck";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.52",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,26 +35,24 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.5",
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.13",
-    "boring-avatars": "^1.10.2",
+    "@floating-ui/react": "^0.27.12",
+    "@react-fabric/utilities": "^1.0.0-beta.52",
+    "@tailwindcss/postcss": "~4.1.8",
+    "boring-avatars": "^1.11.2",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "resize-observer-polyfill": "^1.5.1",
-    "tailwindcss": "^3.4.4"
+    "tailwindcss": "^4.1.8"
   },
   "peerDependencies": {
-    "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
-    "react-i18next": "^15.0.2"
+    "i18next": "^25.2.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^15.5.2"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "7d4a7ed1ea9890652826bef58d01c31280d761c8"
+  "gitHead": "0eabb9d88d91af93d657bcc209b226fd576e8260"
 }

package/src/components/actionLabel/ActionLabel.tsx

@@ -22,12 +22,20 @@
  */
 
 import classNames from "classnames";
-import { type ReactElement, useCallback } from "react";
-import { type AriaProps, type ChildProp, type CssProp } from "../../types";
+import { useCallback, type ReactElement } from "react";
+import {
+  type AriaProps,
+  type ChildProp,
+  type CssProp,
+  type TestProps,
+} from "../../types";
 import { ButtonGroup } from "../button/ButtonGroup";
-import classes from "./ActionLabel.module.css";
 
-export interface ActionLabelProps extends AriaProps, CssProp, ChildProp {
+export interface ActionLabelProps
+  extends AriaProps,
+    CssProp,
+    ChildProp,
+    TestProps {
   /**
    * action buttons aligment
    */
@@ -43,8 +51,27 @@ export interface ActionLabelProps extends AriaProps, CssProp, ChildProp {
 }
 
 /**
- * A simple label component with additional actions (like a button or icon) that becomes visible only when the user hovers over the label,
- * useful in interfaces where space is limited or where it's important to keep the UI clean and focused
+ * A label with action buttons that can be aligned to the start or end.
+ * This component is useful for displaying a label with associated actions, such as buttons, that can be aligned based on the design requirements.
+ * It automatically calculates the width of the action buttons to ensure that the label text does not overflow the container.
+ * It uses CSS variables to manage the width of the label text dynamically based on the action buttons' width.
+ * This component is designed to be flexible and can be used in various contexts where a label with actions is needed.
+ * It supports custom alignment, disabled states, and can be easily styled with additional CSS classes.
+ *
+ * @param {ActionLabelProps} props - The properties for the ActionLabel component.
+ * @returns {JSX.Element} The rendered ActionLabel component.
+ *
+ * @example
+ * ```jsx
+ * <ActionLabel
+ *   actions={[<Button>Action 1</Button>, <Button>Action 2</Button>]}
+ *   align="end"
+ * >
+ *   Label Text
+ * </ActionLabel>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-action-label--docs} for more details.
  */
 export const ActionLabel = ({
   children,
@@ -54,9 +81,8 @@ export const ActionLabel = ({
   disabled,
   ...rest
 }: ActionLabelProps) => {
-  /**
-   * calculate the width of the action box, width will be used for a delayed transition on hover
-   */
+  // Calculate the width of the action buttons to set a CSS variable
+  // This is used to ensure the label text does not overflow the container
   const calculateBasis = useCallback((el: HTMLElement | null) => {
     if (el) {
       const clone = el.cloneNode(true) as HTMLElement;
@@ -75,7 +101,7 @@ export const ActionLabel = ({
     <div
       className={classNames(
         className,
-        classes.actionLabel,
+        "fabric-actionLabel",
         "flex overflow-hidden gap-1 items-center cursor-default select-none",
       )}
       data-disabled={disabled}
@@ -83,8 +109,9 @@ export const ActionLabel = ({
     >
       <ButtonGroup
         ref={calculateBasis}
+        data-inner-clickable
         className={classNames(
-          classes.actions,
+          "fabric-actions",
           "overflow-hidden flex-content",
           align === "end" && "order-2",
         )}

package/src/components/animations/Animations.tsx

@@ -30,21 +30,42 @@ import {
   type CssProp,
   type PaletteType,
 } from "../../types";
-import { getColor, getColorClass } from "../../utils";
-import classes from "./Animations.module.css";
+import { getColor } from "../../utils";
 
 export interface AnimationProps extends CssProp, AriaProps {
   type?: "info" | "check" | "cross" | "question" | "exclaim";
   /**
    * icon color
    */
-  color?: ColorType | PaletteType;
+  color?: ColorType | PaletteType | string;
   /**
    * icon mark color
    */
-  strokeColor?: ColorType | PaletteType;
+  strokeColor?: ColorType | PaletteType | string;
 }
 
+/**
+ * A component that displays an animated indicator with a customizable icon type and colors.
+ * It can be used to indicate various states such as success, error, or information.
+ * The component supports different icon types like check, cross, question, and exclamation.
+ * It also allows customization of the icon color and stroke color.
+ *
+ * @param {AnimationProps} props - The properties for the AnimationIndicator component.
+ * @returns {JSX.Element} The rendered AnimationIndicator component.
+ *
+ * @example
+ * ```jsx
+ * <AnimationIndicator
+ *   type="check"
+ *   color="primary-500"
+ *   strokeColor="primary-700"
+ *   className="my-custom-class"
+ *   aria-label="Loading"
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ */
 export const AnimationIndicator = ({
   className,
   color,
@@ -80,10 +101,9 @@ export const AnimationIndicator = ({
     <svg
       data-ref="animated-indicator"
       className={classNames(
-        classes.checkAnimation,
+        "fabric-checkAnimation",
         className,
         "inline-block rounded-full",
-        color && getColorClass(color),
       )}
       style={styles}
       xmlns="http://www.w3.org/2000/svg"
@@ -91,23 +111,42 @@ export const AnimationIndicator = ({
       aria-hidden="true"
       {...aria}
     >
-      <circle className={classes.circlePart} cx="26" cy="26" r="25" />
+      <circle className={"fabric-circlePart"} cx="26" cy="26" r="25" />
       <path
-        className={classNames(
-          classes.iconPart,
-          getColorClass(strokeColor ?? "invert"),
-        )}
+        className={classNames("fabric-iconPart")}
+        style={{
+          color: strokeColor
+            ? getColor(strokeColor)
+            : "var(--text-color-invert)",
+        }}
         d={path}
       />
     </svg>
   );
 };
 
+/**
+ * A component that displays an animated bars loader.
+ * It can be customized with color and size properties.
+ * This component is typically used to indicate loading states in the UI.
+ *
+ * @param {Object} props - The properties for the AnimationBars component.
+ * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the bars.
+ * @param {number | string} [props.size="2rem"] - The size of the bars.
+ * @returns {JSX.Element} The rendered AnimationBars component.
+ *
+ * @example
+ * ```jsx
+ * <AnimationBars color="primary-500" size="3rem" />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ */
 export const AnimationBars = ({
-  color = "tint",
+  color = "tint-500",
   size = "2rem",
 }: {
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   size?: number | string;
 }) => {
   return (
@@ -118,23 +157,40 @@ export const AnimationBars = ({
     >
       <div
         className={classNames(
-          "outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded",
+          "outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded",
         )}
       >
         <div
-          className={classNames(classes.bars, getColorClass(color + "-500/50"))}
-          style={{ width: size }}
+          className={classNames("fabric-bars")}
+          style={{ width: size, color: getColor(color) }}
         />
       </div>
     </div>
   );
 };
 
+/**
+ * A component that displays a spinner animation.
+ * It can be customized with color and size properties.
+ * This component is typically used to indicate loading states in the UI.
+ *
+ * @param {Object} props - The properties for the AnimationSpinner component.
+ * @param {ColorType | PaletteType | string} [props.color="tint-700"] - The color of the spinner.
+ * @param {number | string} [props.size="2rem"] - The size of the spinner.
+ * @returns {JSX.Element} The rendered AnimationSpinner component.
+ *
+ * @example
+ * ```jsx
+ * <AnimationSpinner color="primary-500" size="3rem" />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ */
 export const AnimationSpinner = ({
   color = "tint-700",
   size = "2rem",
 }: {
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   size?: number | string;
 }) => {
   return (
@@ -142,37 +198,46 @@ export const AnimationSpinner = ({
       className={classNames(
         "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
       )}
+      data-ref="spinner"
     >
       <div
         className={classNames(
-          "outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded",
+          "outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded",
         )}
       >
         <div
-          className={classNames(classes.spinner, getColorClass(color))}
-          style={{ width: size }}
+          className={classNames("fabric-spinner")}
+          style={{ width: size, color: getColor(color) }}
         />
       </div>
     </div>
   );
 };
 
-export const Loading = () => {
+/**
+ * A component that displays a skeleton loader with a placeholder for content.
+ * It can be customized with color and size properties.
+ * This component is typically used to indicate loading states in the cards, panels and virtual lists,
+ * providing a visual placeholder for content that is being loaded.
+ *
+ * @param {CssProp} props - The properties for the Skeleton component.
+ * @returns {JSX.Element} The rendered Skeleton component.
+ *
+ * @example
+ * ```jsx
+ * <Skeleton className="my-skeleton" />
+ * * // Renders a skeleton loader with a placeholder for content.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ */
+export const Skeleton = ({ className, ...rest }: CssProp) => {
   return (
     <div
-      className={classNames(
-        classes.loader,
-        "area-[loader] relative overflow-x-clip",
-      )}
+      className={classNames(className, "p-2 animate-pulse flex gap-2 max-w-lg")}
+      data-ref="skeleton"
+      {...rest}
     >
-      <div className="absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500" />
-    </div>
-  );
-};
-
-export const Skeleton = () => {
-  return (
-    <div className={classNames("p-2 animate-pulse flex gap-2 max-w-lg")}>
       <div className="bg-tint-100 rounded aspect-square h-12" />
       <div className="flex-1 flex flex-col gap-2">
         <div className="bg-tint-100 h-3 rounded-full" />
@@ -188,3 +253,23 @@ export const Skeleton = () => {
     </div>
   );
 };
+
+/**
+ * A component that displays a loading animation with a top border.
+ * It is typically used to indicate that content is being loaded in pages and page sections.
+ *
+ * @returns {JSX.Element} The rendered Loading component.
+ */
+export const Loading = () => {
+  return (
+    <div
+      className={classNames(
+        "fabric-loader",
+        "area-[loader] relative overflow-x-clip",
+      )}
+      data-ref="loading"
+    >
+      <div className="absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500" />
+    </div>
+  );
+};