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

package/dist/esm/utils/getIconProps.js

@@ -0,0 +1,63 @@
+'use client';
+
+import { isValidElement } from 'react';
+
+/**
+ * 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.
+ */
+
+/**
+ * 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" }
+ * ```
+ */
+function getIconProps(props) {
+  if (typeof props === "string") {
+    return {
+      icon: props
+    };
+  }
+  if (/*#__PURE__*/isValidElement(props)) {
+    return {
+      icon: props
+    };
+  }
+  return props;
+}
+
+export { getIconProps };

package/dist/esm/utils/getTooltipProps.js

@@ -0,0 +1,66 @@
+'use client';
+
+import { isString, isObject } from '@react-fabric/utilities';
+import { isValidElement } from 'react';
+
+/**
+ * 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.
+ */
+
+/**
+ * Normalizes a tooltip specification into `TooltipType` props.
+ *
+ * If the input is a string or React element, returns a basic tooltip config
+ * with `placement: "top"` and the content set. If it's an object, merges
+ * it with the base config (adding `ref` and `placement`).
+ *
+ * @param {TooltipType} tooltip - A tooltip string, React element, or full `TooltipType` config.
+ * @param {RefObject<HTMLElement>} innerRef - Optional ref to attach to the tooltip's trigger element.
+ * @returns A `TooltipType` config with `ref` and `placement` set, or `undefined` if tooltip is falsy.
+ *
+ * @example
+ * ```tsx
+ * getTooltipProps("Hello world");
+ * // { ref, placement: "top", content: "Hello world" }
+ * getTooltipProps({ content: "Tip", placement: "bottom" });
+ * // { ref, placement: "bottom", content: "Tip" }
+ * ```
+ */
+function getTooltipProps(tooltip, innerRef) {
+  if (isString(tooltip) || /*#__PURE__*/isValidElement(tooltip)) {
+    return {
+      ref: innerRef,
+      placement: "top",
+      content: tooltip
+    };
+  }
+  if (isObject(tooltip)) {
+    return Object.assign({
+      ref: innerRef,
+      placement: "top"
+    }, tooltip);
+  }
+}
+
+export { getTooltipProps };

package/dist/esm/utils/nodeCheck.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { isObject } from '@react-fabric/utilities';
+import { isValidElement } from 'react';
 
 /*
  * React Fabric
@@ -25,11 +25,11 @@ import { isObject } from '@react-fabric/utilities';
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var nodeCheck = function nodeCheck(node) {
+function nodeCheck(node) {
   for (var _len = arguments.length, types = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     types[_key - 1] = arguments[_key];
   }
-  return isObject(node) && "type" in node && types.includes(node.type);
-};
+  return /*#__PURE__*/isValidElement(node) && types.includes(node.type);
+}
 
 export { nodeCheck };

package/dist/types/components/actionLabel/ActionLabel.d.ts

@@ -1,6 +1,5 @@
-import { type ReactElement } from "react";
-import { type AriaProps, type ChildProp, type CssProp, type TestProps } from "../../types";
-export interface ActionLabelProps extends AriaProps, CssProp, ChildProp, TestProps {
+import type { ChildProp, CssProp, TestProps } from "../../types";
+export interface ActionLabelProps extends CssProp, ChildProp, TestProps {
     /**
      * action buttons aligment
      */
@@ -12,10 +11,24 @@ export interface ActionLabelProps extends AriaProps, CssProp, ChildProp, TestPro
     /**
      * buttons
      */
-    actions: ReactElement[];
+    actions: React.ReactElement[];
 }
 /**
- * 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.
+ *
+ * @example
+ * ```jsx
+ * <ActionLabel
+ *   actions={[<Button>Action 1</Button>, <Button>Action 2</Button>]}
+ *   align="end"
+ * >
+ *   Label Text
+ * </ActionLabel>
+ * ```
  */
-export declare const ActionLabel: ({ children, className, align, actions, disabled, ...rest }: ActionLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare function ActionLabel({ children, className, align, actions, disabled, ...rest }: ActionLabelProps): import("react").JSX.Element;

package/dist/types/components/alert/Alert.d.ts

@@ -0,0 +1,74 @@
+import type { ColorBase } from "../../types";
+interface AlertBaseProps {
+    /**
+     * toast type
+     */
+    type?: "alert" | "confirm" | "prompt";
+    /**
+     * svg path / webfont className / 1-4 letter text
+     */
+    icon?: string;
+    /**
+     * flip icon in rtl
+     */
+    rtlFlip?: boolean;
+    /**
+     * toast title
+     */
+    title?: string;
+    /**
+     * toast text
+     */
+    message: string | React.ReactElement;
+    /**
+     * theme color
+     */
+    color?: ColorBase;
+    /**
+     * extra action button
+     */
+    actions?: React.ReactNode;
+    /**
+     * ok label
+     */
+    okLabel?: string;
+    /**
+     * cancel label
+     */
+    cancelLabel?: string;
+    /**
+     * placeholder for prompt
+     */
+    placeholder?: string;
+    /**
+     * default value for prompt
+     */
+    defaultValue?: string;
+    multiline?: boolean;
+}
+export type AlertProps = AlertBaseProps & ({
+    type?: "alert";
+    okLabel?: string;
+    cancelLabel?: never;
+    placeholder?: never;
+    defaultValue?: never;
+    multiline?: never;
+} | {
+    type: "confirm";
+    okLabel?: string;
+    cancelLabel?: string;
+    placeholder?: never;
+    defaultValue?: never;
+    multiline?: never;
+} | {
+    type: "prompt";
+    okLabel?: string;
+    cancelLabel?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    multiline?: boolean;
+});
+export declare function Alert({ title, message, color, icon, rtlFlip, actions, onClose, type, multiline, okLabel, cancelLabel, placeholder, defaultValue, }: AlertProps & {
+    onClose?: (ret?: string | boolean) => void;
+}): import("react").JSX.Element;
+export {};

package/dist/types/components/animations/Indicator.d.ts

@@ -0,0 +1,57 @@
+/**
+ * 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 type { CssProp } from "../../types";
+export interface AnimationIndicatorProps extends CssProp {
+    /**
+     * The indicator icon type. Each type maps to a distinct status icon.
+     * Defaults to `"info"`.
+     */
+    type?: "info" | "check" | "cross" | "question" | "exclaim";
+}
+/**
+ * Animated status indicator that renders a themed icon with animation.
+ *
+ * Renders one of five predefined icon types (check, cross, question, exclaim, info)
+ * using the `Icon` component. Useful for displaying success, error, help, alert,
+ * or info states in forms, notifications, and feedback UI.
+ *
+ * @example
+ * ```tsx
+ * import { AnimationIndicator } from "@react-fabric/core";
+ *
+ * // Success indicator
+ * <AnimationIndicator type="check" color="success-500" />
+ *
+ * // Error indicator
+ * <AnimationIndicator type="cross" color="error-500" />
+ *
+ * // Warning indicator
+ * <AnimationIndicator type="exclaim" color="warning-500" />
+ *
+ * // Help indicator
+ * <AnimationIndicator type="question" />
+ * ```
+ */
+export declare function AnimationIndicator({ type, ...props }: AnimationIndicatorProps): import("react").JSX.Element;

package/dist/types/components/animations/Loader.d.ts

@@ -0,0 +1,65 @@
+/**
+ * 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 type { CustomColors } from "../../types/colors";
+export interface AnimationLoaderProps {
+    /**
+     * CSS class name for the icon to display (e.g., an iconify icon class like `"icon-[mdi--loading]"`).
+     */
+    icon: string;
+    /**
+     * Blur intensity for the background mask. Defaults to no blur.
+     */
+    maskBlur?: "sm" | "md" | "lg";
+    /**
+     * Icon color. Accepts palette tokens or any CSS color. Defaults to `"tint-300"`.
+     */
+    color?: CustomColors;
+    /**
+     * Icon size. Accepts CSS size values (px, em, rem). Defaults to `"2rem"`.
+     */
+    size?: number | string;
+}
+/**
+ * Loading overlay that renders an animated icon over a blurred backdrop.
+ *
+ * Renders a centered icon inside a frosted-glass mask, typically used to
+ * indicate loading or disabled states. The mask covers its parent element
+ * and prevents user interaction while visible.
+ *
+ * @example
+ * ```tsx
+ * import { AnimationLoader } from "@react-fabric/core";
+ *
+ * // Loading overlay with medium blur
+ * <div style={{ position: "relative" }}>
+ *     <p>Page content</p>
+ *     <AnimationLoader icon="icon-[mdi--loading]" maskBlur="md" />
+ * </div>
+ *
+ * // Custom color and size
+ * <AnimationLoader icon="icon-[mdi--loading]" color="primary-500" size="3rem" />
+ * ```
+ */
+export declare function AnimationLoader({ color, size, icon, maskBlur }: AnimationLoaderProps): import("react").JSX.Element;

package/dist/types/components/animations/LoadingBars.d.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.
+ */
+import type { CustomColors } from "../../types";
+export interface LoadingBarsProps {
+    /**
+     * Spinner color. Accepts palette tokens or any CSS color.
+     */
+    color?: CustomColors;
+    /**
+     * Spinner size. Accepts CSS size values (px, em, rem).
+     */
+    size?: number | string;
+    /**
+     * Blur intensity for the background mask. Defaults to no blur.
+     */
+    maskBlur?: "sm" | "md" | "lg";
+}
+/**
+ * Animated loading indicator that renders a "bars scale fade" spinner.
+ *
+ * A thin wrapper around `AnimationLoader` that provides a pre-configured
+ * bars-style loading animation. Useful for inline loading indicators in
+ * forms, tables, or content areas.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingBars } from "@react-fabric/core";
+ *
+ * // Basic bars spinner
+ * <LoadingBars />
+ *
+ * // Custom color and size
+ * <LoadingBars color="primary-500" size="2rem" />
+ *
+ * // With backdrop blur
+ * <LoadingBars maskBlur="sm" />
+ * ```
+ */
+export declare function LoadingBars(props: LoadingBarsProps): import("react").JSX.Element;

package/dist/types/components/animations/LoadingLine.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+/**
+ * Inline loading indicator that renders a top-border shimmer animation.
+ *
+ * A lightweight loading bar displayed as a thin horizontal line at the top
+ * of its container. Useful for page-level or section-level loading states
+ * where a full overlay would be too intrusive.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingLine } from "@react-fabric/core";
+ *
+ * // Page-level loading indicator
+ * <div>
+ *     <LoadingLine />
+ *     <p>Content loads below...</p>
+ * </div>
+ * ```
+ */
+export declare function LoadingLine(): import("react").JSX.Element;

package/dist/types/components/animations/LoadingSpinner.d.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.
+ */
+import type { CustomColors } from "../../types";
+export interface LoadingSpinnerProps {
+    /**
+     * Spinner color. Accepts palette tokens or any CSS color.
+     */
+    color?: CustomColors;
+    /**
+     * Spinner size. Accepts CSS size values (px, em, rem).
+     */
+    size?: number | string;
+    /**
+     * Blur intensity for the background mask. Defaults to no blur.
+     */
+    maskBlur?: "sm" | "md" | "lg";
+}
+/**
+ * Animated loading indicator that renders an "eclipse" spinner.
+ *
+ * A thin wrapper around `AnimationLoader` that provides a pre-configured
+ * circular loading animation. Useful for inline loading indicators in
+ * images, charts, and data cards.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingSpinner } from "@react-fabric/core";
+ *
+ * // Basic spinner
+ * <LoadingSpinner />
+ *
+ * // Custom color and size
+ * <LoadingSpinner color="primary-500" size="2rem" />
+ *
+ * // With backdrop blur
+ * <LoadingSpinner maskBlur="sm" />
+ * ```
+ */
+export declare function LoadingSpinner(props: LoadingSpinnerProps): import("react").JSX.Element;

package/dist/types/components/animations/Skeleton.d.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.
+ */
+import type { ColorTints, CssPropWithMap, CustomColors } from "../../types";
+type SkeletonSlotNames = {
+    root?: string;
+    iconPlaceholder?: string;
+    titlePlaceholder?: string;
+    linePlaceholder?: string;
+};
+export interface SkeletonProps extends CssPropWithMap<SkeletonSlotNames> {
+    /**
+     * Background color for all skeleton slots. Accepts palette tokens or any CSS color.
+     * Defaults to `"tint-100"`.
+     */
+    color?: CustomColors<ColorTints>;
+}
+/**
+ * Content placeholder that renders a grayed-out card mockup with icon, title, and line slots.
+ *
+ * Displays a pre-styled skeleton card layout (icon area + title + two rows of text lines)
+ * to occupy space while real content loads. Useful for list items, cards, panels, and
+ * virtualized lists.
+ *
+ * @example
+ * ```tsx
+ * import { Skeleton } from "@react-fabric/core";
+ *
+ * // Basic skeleton placeholder
+ * <Skeleton />
+ *
+ * // Custom color
+ * <Skeleton color="primary-100" />
+ *
+ * // Custom slot styling
+ * <Skeleton classNames={{ titlePlaceholder: "w-2/3" }} />
+ * ```
+ */
+export declare function Skeleton({ className, classNames, color, ...rest }: SkeletonProps): import("react").JSX.Element;
+export {};