@heroui/card 2.2.11 → 2.2.13

package/dist/chunk-NVHFBF4D.mjs

@@ -0,0 +1,151 @@
+"use client";
+
+// src/use-card.ts
+import { card } from "@heroui/theme";
+import { useCallback, useMemo } from "react";
+import { chain, mergeProps } from "@react-aria/utils";
+import { useFocusRing } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
+import { useAriaButton } from "@heroui/use-aria-button";
+import { mapPropsVariants, useProviderContext } from "@heroui/system";
+import { clsx, dataAttr, objectToDeps } from "@heroui/shared-utils";
+import { filterDOMProps } from "@heroui/react-utils";
+import { useDOMRef } from "@heroui/react-utils";
+import { useRipple } from "@heroui/ripple";
+function useCard(originalProps) {
+  var _a, _b, _c, _d;
+  const globalContext = useProviderContext();
+  const [props, variantProps] = mapPropsVariants(originalProps, card.variantKeys);
+  const {
+    ref,
+    as,
+    children,
+    onClick,
+    onPress,
+    autoFocus,
+    className,
+    classNames,
+    allowTextSelectionOnPress = true,
+    ...otherProps
+  } = props;
+  const domRef = useDOMRef(ref);
+  const Component = as || (originalProps.isPressable ? "button" : "div");
+  const shouldFilterDOMProps = typeof Component === "string";
+  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const disableRipple = (_d = (_c = originalProps.disableRipple) != null ? _c : globalContext == null ? void 0 : globalContext.disableRipple) != null ? _d : false;
+  const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
+  const { onClear: onClearRipple, onPress: onRipplePressHandler, ripples } = useRipple();
+  const handlePress = useCallback(
+    (e) => {
+      if (disableRipple || disableAnimation) return;
+      domRef.current && onRipplePressHandler(e);
+    },
+    [disableRipple, disableAnimation, domRef, onRipplePressHandler]
+  );
+  const { buttonProps, isPressed } = useAriaButton(
+    {
+      onPress: chain(onPress, handlePress),
+      elementType: as,
+      isDisabled: !originalProps.isPressable,
+      onClick,
+      allowTextSelectionOnPress,
+      ...otherProps
+    },
+    domRef
+  );
+  const { hoverProps, isHovered } = useHover({
+    isDisabled: !originalProps.isHoverable,
+    ...otherProps
+  });
+  const { isFocusVisible, isFocused, focusProps } = useFocusRing({
+    autoFocus
+  });
+  const slots = useMemo(
+    () => card({
+      ...variantProps,
+      disableAnimation
+    }),
+    [objectToDeps(variantProps), disableAnimation]
+  );
+  const context = useMemo(
+    () => ({
+      slots,
+      classNames,
+      disableAnimation,
+      isDisabled: originalProps.isDisabled,
+      isFooterBlurred: originalProps.isFooterBlurred,
+      fullWidth: originalProps.fullWidth
+    }),
+    [
+      slots,
+      classNames,
+      originalProps.isDisabled,
+      originalProps.isFooterBlurred,
+      disableAnimation,
+      originalProps.fullWidth
+    ]
+  );
+  const getCardProps = useCallback(
+    (props2 = {}) => {
+      return {
+        ref: domRef,
+        className: slots.base({ class: baseStyles }),
+        tabIndex: originalProps.isPressable ? 0 : -1,
+        "data-hover": dataAttr(isHovered),
+        "data-pressed": dataAttr(isPressed),
+        "data-focus": dataAttr(isFocused),
+        "data-focus-visible": dataAttr(isFocusVisible),
+        "data-disabled": dataAttr(originalProps.isDisabled),
+        ...mergeProps(
+          originalProps.isPressable ? { ...buttonProps, ...focusProps, role: "button" } : {},
+          originalProps.isHoverable ? hoverProps : {},
+          filterDOMProps(otherProps, {
+            enabled: shouldFilterDOMProps
+          }),
+          filterDOMProps(props2)
+        )
+      };
+    },
+    [
+      domRef,
+      slots,
+      baseStyles,
+      shouldFilterDOMProps,
+      originalProps.isPressable,
+      originalProps.isHoverable,
+      originalProps.isDisabled,
+      isHovered,
+      isPressed,
+      isFocusVisible,
+      buttonProps,
+      focusProps,
+      hoverProps,
+      otherProps
+    ]
+  );
+  const getRippleProps = useCallback(
+    () => ({ ripples, onClear: onClearRipple }),
+    [ripples, onClearRipple]
+  );
+  return {
+    context,
+    domRef,
+    Component,
+    classNames,
+    children,
+    isHovered,
+    isPressed,
+    disableAnimation,
+    isPressable: originalProps.isPressable,
+    isHoverable: originalProps.isHoverable,
+    disableRipple,
+    handlePress,
+    isFocusVisible,
+    getCardProps,
+    getRippleProps
+  };
+}
+
+export {
+  useCard
+};

package/dist/chunk-TE6SZS6W.mjs

@@ -0,0 +1,25 @@
+"use client";
+import {
+  useCardContext
+} from "./chunk-XHGGCEVJ.mjs";
+
+// src/card-footer.tsx
+import { forwardRef } from "@heroui/system";
+import { useDOMRef } from "@heroui/react-utils";
+import { clsx } from "@heroui/shared-utils";
+import { jsx } from "react/jsx-runtime";
+var CardFooter = forwardRef((props, ref) => {
+  var _a;
+  const { as, className, children, ...otherProps } = props;
+  const Component = as || "div";
+  const domRef = useDOMRef(ref);
+  const { slots, classNames } = useCardContext();
+  const footerStyles = clsx(classNames == null ? void 0 : classNames.footer, className);
+  return /* @__PURE__ */ jsx(Component, { ref: domRef, className: (_a = slots.footer) == null ? void 0 : _a.call(slots, { class: footerStyles }), ...otherProps, children });
+});
+CardFooter.displayName = "HeroUI.CardFooter";
+var card_footer_default = CardFooter;
+
+export {
+  card_footer_default
+};

package/dist/chunk-XHGGCEVJ.mjs

@@ -0,0 +1,14 @@
+"use client";
+
+// src/card-context.ts
+import { createContext } from "@heroui/react-utils";
+var [CardProvider, useCardContext] = createContext({
+  name: "CardContext",
+  strict: true,
+  errorMessage: "useCardContext: `context` is undefined. Seems you forgot to wrap component within <Card />"
+});
+
+export {
+  CardProvider,
+  useCardContext
+};

package/dist/index.d.mts

@@ -0,0 +1,13 @@
+export { default as Card, CardProps } from './card.mjs';
+export { default as CardFooter, CardFooterProps } from './card-footer.mjs';
+export { useCard } from './use-card.mjs';
+export { CardProvider, useCardContext } from './card-context.mjs';
+export { default as CardHeader } from './card-header.mjs';
+export { default as CardBody } from './card-body.mjs';
+import '@heroui/system';
+import 'react';
+import '@react-types/shared';
+import '@heroui/theme';
+import '@heroui/ripple';
+import '@react-aria/interactions';
+import '@heroui/react-utils';

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { default as Card, CardProps } from './card.js';
+export { default as CardFooter, CardFooterProps } from './card-footer.js';
+export { useCard } from './use-card.js';
+export { CardProvider, useCardContext } from './card-context.js';
+export { default as CardHeader } from './card-header.js';
+export { default as CardBody } from './card-body.js';
+import '@heroui/system';
+import 'react';
+import '@react-types/shared';
+import '@heroui/theme';
+import '@heroui/ripple';
+import '@react-aria/interactions';
+import '@heroui/react-utils';

package/dist/index.js

@@ -0,0 +1,270 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Card: () => card_default,
+  CardBody: () => card_body_default,
+  CardFooter: () => card_footer_default,
+  CardHeader: () => card_header_default,
+  CardProvider: () => CardProvider,
+  useCard: () => useCard,
+  useCardContext: () => useCardContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/use-card.ts
+var import_theme = require("@heroui/theme");
+var import_react = require("react");
+var import_utils = require("@react-aria/utils");
+var import_focus = require("@react-aria/focus");
+var import_interactions = require("@react-aria/interactions");
+var import_use_aria_button = require("@heroui/use-aria-button");
+var import_system = require("@heroui/system");
+var import_shared_utils = require("@heroui/shared-utils");
+var import_react_utils = require("@heroui/react-utils");
+var import_react_utils2 = require("@heroui/react-utils");
+var import_ripple = require("@heroui/ripple");
+function useCard(originalProps) {
+  var _a, _b, _c, _d;
+  const globalContext = (0, import_system.useProviderContext)();
+  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.card.variantKeys);
+  const {
+    ref,
+    as,
+    children,
+    onClick,
+    onPress,
+    autoFocus,
+    className,
+    classNames,
+    allowTextSelectionOnPress = true,
+    ...otherProps
+  } = props;
+  const domRef = (0, import_react_utils2.useDOMRef)(ref);
+  const Component = as || (originalProps.isPressable ? "button" : "div");
+  const shouldFilterDOMProps = typeof Component === "string";
+  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const disableRipple = (_d = (_c = originalProps.disableRipple) != null ? _c : globalContext == null ? void 0 : globalContext.disableRipple) != null ? _d : false;
+  const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
+  const { onClear: onClearRipple, onPress: onRipplePressHandler, ripples } = (0, import_ripple.useRipple)();
+  const handlePress = (0, import_react.useCallback)(
+    (e) => {
+      if (disableRipple || disableAnimation) return;
+      domRef.current && onRipplePressHandler(e);
+    },
+    [disableRipple, disableAnimation, domRef, onRipplePressHandler]
+  );
+  const { buttonProps, isPressed } = (0, import_use_aria_button.useAriaButton)(
+    {
+      onPress: (0, import_utils.chain)(onPress, handlePress),
+      elementType: as,
+      isDisabled: !originalProps.isPressable,
+      onClick,
+      allowTextSelectionOnPress,
+      ...otherProps
+    },
+    domRef
+  );
+  const { hoverProps, isHovered } = (0, import_interactions.useHover)({
+    isDisabled: !originalProps.isHoverable,
+    ...otherProps
+  });
+  const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)({
+    autoFocus
+  });
+  const slots = (0, import_react.useMemo)(
+    () => (0, import_theme.card)({
+      ...variantProps,
+      disableAnimation
+    }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), disableAnimation]
+  );
+  const context = (0, import_react.useMemo)(
+    () => ({
+      slots,
+      classNames,
+      disableAnimation,
+      isDisabled: originalProps.isDisabled,
+      isFooterBlurred: originalProps.isFooterBlurred,
+      fullWidth: originalProps.fullWidth
+    }),
+    [
+      slots,
+      classNames,
+      originalProps.isDisabled,
+      originalProps.isFooterBlurred,
+      disableAnimation,
+      originalProps.fullWidth
+    ]
+  );
+  const getCardProps = (0, import_react.useCallback)(
+    (props2 = {}) => {
+      return {
+        ref: domRef,
+        className: slots.base({ class: baseStyles }),
+        tabIndex: originalProps.isPressable ? 0 : -1,
+        "data-hover": (0, import_shared_utils.dataAttr)(isHovered),
+        "data-pressed": (0, import_shared_utils.dataAttr)(isPressed),
+        "data-focus": (0, import_shared_utils.dataAttr)(isFocused),
+        "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
+        "data-disabled": (0, import_shared_utils.dataAttr)(originalProps.isDisabled),
+        ...(0, import_utils.mergeProps)(
+          originalProps.isPressable ? { ...buttonProps, ...focusProps, role: "button" } : {},
+          originalProps.isHoverable ? hoverProps : {},
+          (0, import_react_utils.filterDOMProps)(otherProps, {
+            enabled: shouldFilterDOMProps
+          }),
+          (0, import_react_utils.filterDOMProps)(props2)
+        )
+      };
+    },
+    [
+      domRef,
+      slots,
+      baseStyles,
+      shouldFilterDOMProps,
+      originalProps.isPressable,
+      originalProps.isHoverable,
+      originalProps.isDisabled,
+      isHovered,
+      isPressed,
+      isFocusVisible,
+      buttonProps,
+      focusProps,
+      hoverProps,
+      otherProps
+    ]
+  );
+  const getRippleProps = (0, import_react.useCallback)(
+    () => ({ ripples, onClear: onClearRipple }),
+    [ripples, onClearRipple]
+  );
+  return {
+    context,
+    domRef,
+    Component,
+    classNames,
+    children,
+    isHovered,
+    isPressed,
+    disableAnimation,
+    isPressable: originalProps.isPressable,
+    isHoverable: originalProps.isHoverable,
+    disableRipple,
+    handlePress,
+    isFocusVisible,
+    getCardProps,
+    getRippleProps
+  };
+}
+
+// src/card-context.ts
+var import_react_utils3 = require("@heroui/react-utils");
+var [CardProvider, useCardContext] = (0, import_react_utils3.createContext)({
+  name: "CardContext",
+  strict: true,
+  errorMessage: "useCardContext: `context` is undefined. Seems you forgot to wrap component within <Card />"
+});
+
+// src/card.tsx
+var import_system2 = require("@heroui/system");
+var import_ripple2 = require("@heroui/ripple");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Card = (0, import_system2.forwardRef)((props, ref) => {
+  const {
+    children,
+    context,
+    Component,
+    isPressable,
+    disableAnimation,
+    disableRipple,
+    getCardProps,
+    getRippleProps
+  } = useCard({ ...props, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Component, { ...getCardProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardProvider, { value: context, children }),
+    isPressable && !disableAnimation && !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ripple2.Ripple, { ...getRippleProps() })
+  ] });
+});
+Card.displayName = "HeroUI.Card";
+var card_default = Card;
+
+// src/card-header.tsx
+var import_system3 = require("@heroui/system");
+var import_react_utils4 = require("@heroui/react-utils");
+var import_shared_utils2 = require("@heroui/shared-utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CardHeader = (0, import_system3.forwardRef)((props, ref) => {
+  var _a;
+  const { as, className, children, ...otherProps } = props;
+  const Component = as || "div";
+  const domRef = (0, import_react_utils4.useDOMRef)(ref);
+  const { slots, classNames } = useCardContext();
+  const headerStyles = (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.header, className);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ref: domRef, className: (_a = slots.header) == null ? void 0 : _a.call(slots, { class: headerStyles }), ...otherProps, children });
+});
+CardHeader.displayName = "HeroUI.CardHeader";
+var card_header_default = CardHeader;
+
+// src/card-body.tsx
+var import_system4 = require("@heroui/system");
+var import_react_utils5 = require("@heroui/react-utils");
+var import_shared_utils3 = require("@heroui/shared-utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CardBody = (0, import_system4.forwardRef)((props, ref) => {
+  var _a;
+  const { as, className, children, ...otherProps } = props;
+  const Component = as || "div";
+  const domRef = (0, import_react_utils5.useDOMRef)(ref);
+  const { slots, classNames } = useCardContext();
+  const bodyStyles = (0, import_shared_utils3.clsx)(classNames == null ? void 0 : classNames.body, className);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ref: domRef, className: (_a = slots.body) == null ? void 0 : _a.call(slots, { class: bodyStyles }), ...otherProps, children });
+});
+CardBody.displayName = "HeroUI.CardBody";
+var card_body_default = CardBody;
+
+// src/card-footer.tsx
+var import_system5 = require("@heroui/system");
+var import_react_utils6 = require("@heroui/react-utils");
+var import_shared_utils4 = require("@heroui/shared-utils");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CardFooter = (0, import_system5.forwardRef)((props, ref) => {
+  var _a;
+  const { as, className, children, ...otherProps } = props;
+  const Component = as || "div";
+  const domRef = (0, import_react_utils6.useDOMRef)(ref);
+  const { slots, classNames } = useCardContext();
+  const footerStyles = (0, import_shared_utils4.clsx)(classNames == null ? void 0 : classNames.footer, className);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ref: domRef, className: (_a = slots.footer) == null ? void 0 : _a.call(slots, { class: footerStyles }), ...otherProps, children });
+});
+CardFooter.displayName = "HeroUI.CardFooter";
+var card_footer_default = CardFooter;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardProvider,
+  useCard,
+  useCardContext
+});

package/dist/index.mjs

@@ -0,0 +1,29 @@
+"use client";
+import {
+  card_body_default
+} from "./chunk-LGSBTEIA.mjs";
+import {
+  card_footer_default
+} from "./chunk-TE6SZS6W.mjs";
+import {
+  card_header_default
+} from "./chunk-D5XJWRAV.mjs";
+import {
+  card_default
+} from "./chunk-MW56SEHC.mjs";
+import {
+  CardProvider,
+  useCardContext
+} from "./chunk-XHGGCEVJ.mjs";
+import {
+  useCard
+} from "./chunk-NVHFBF4D.mjs";
+export {
+  card_default as Card,
+  card_body_default as CardBody,
+  card_footer_default as CardFooter,
+  card_header_default as CardHeader,
+  CardProvider,
+  useCard,
+  useCardContext
+};

package/dist/use-card.d.mts

@@ -0,0 +1,80 @@
+import * as _heroui_system from '@heroui/system';
+import { HTMLHeroUIProps, PropGetter } from '@heroui/system';
+import * as react from 'react';
+import { ReactNode, MouseEventHandler } from 'react';
+import { PressEvents, FocusableProps } from '@react-types/shared';
+import { SlotsToClasses, CardSlots, CardVariantProps, CardReturnType } from '@heroui/theme';
+import { RippleProps } from '@heroui/ripple';
+import { PressEvent } from '@react-aria/interactions';
+import { ReactRef } from '@heroui/react-utils';
+
+interface Props extends Omit<HTMLHeroUIProps<"div">, "onClick"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLDivElement | null>;
+    /**
+     * Usually the Card parts, `CardHeader`, `CardBody` and `CardFooter`.
+     */
+    children?: ReactNode | ReactNode[];
+    /**
+     * Whether the card should show a ripple animation on press, this prop is ignored if `disableAnimation` is true or `isPressable` is false.
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Whether the card should allow text selection on press. (only for pressable cards)
+     * @default true
+     */
+    allowTextSelectionOnPress?: boolean;
+    /**
+     * The native button click event handler.
+     * use `onPress` instead.
+     * @deprecated
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Card classNames={{
+     *    base:"base-classes",
+     *    header: "dot-classes",
+     *    body: "content-classes",
+     *    footer: "avatar-classes",
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<CardSlots>;
+}
+type UseCardProps = Props & PressEvents & FocusableProps & CardVariantProps;
+type ContextType = {
+    slots: CardReturnType;
+    classNames?: SlotsToClasses<CardSlots>;
+    isDisabled?: CardVariantProps["isDisabled"];
+    isFooterBlurred?: CardVariantProps["isFooterBlurred"];
+    disableAnimation?: CardVariantProps["disableAnimation"];
+    fullWidth?: CardVariantProps["fullWidth"];
+};
+declare function useCard(originalProps: UseCardProps): {
+    context: ContextType;
+    domRef: react.RefObject<HTMLDivElement>;
+    Component: _heroui_system.As<any>;
+    classNames: SlotsToClasses<"base" | "body" | "footer" | "header"> | undefined;
+    children: ReactNode | ReactNode[];
+    isHovered: boolean;
+    isPressed: boolean;
+    disableAnimation: boolean;
+    isPressable: boolean | undefined;
+    isHoverable: boolean | undefined;
+    disableRipple: boolean;
+    handlePress: (e: PressEvent) => void;
+    isFocusVisible: boolean;
+    getCardProps: PropGetter;
+    getRippleProps: () => RippleProps;
+};
+type UseCardReturn = ReturnType<typeof useCard>;
+
+export { type ContextType, type Props, type UseCardProps, type UseCardReturn, useCard };

package/dist/use-card.d.ts

@@ -0,0 +1,80 @@
+import * as _heroui_system from '@heroui/system';
+import { HTMLHeroUIProps, PropGetter } from '@heroui/system';
+import * as react from 'react';
+import { ReactNode, MouseEventHandler } from 'react';
+import { PressEvents, FocusableProps } from '@react-types/shared';
+import { SlotsToClasses, CardSlots, CardVariantProps, CardReturnType } from '@heroui/theme';
+import { RippleProps } from '@heroui/ripple';
+import { PressEvent } from '@react-aria/interactions';
+import { ReactRef } from '@heroui/react-utils';
+
+interface Props extends Omit<HTMLHeroUIProps<"div">, "onClick"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLDivElement | null>;
+    /**
+     * Usually the Card parts, `CardHeader`, `CardBody` and `CardFooter`.
+     */
+    children?: ReactNode | ReactNode[];
+    /**
+     * Whether the card should show a ripple animation on press, this prop is ignored if `disableAnimation` is true or `isPressable` is false.
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Whether the card should allow text selection on press. (only for pressable cards)
+     * @default true
+     */
+    allowTextSelectionOnPress?: boolean;
+    /**
+     * The native button click event handler.
+     * use `onPress` instead.
+     * @deprecated
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Card classNames={{
+     *    base:"base-classes",
+     *    header: "dot-classes",
+     *    body: "content-classes",
+     *    footer: "avatar-classes",
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<CardSlots>;
+}
+type UseCardProps = Props & PressEvents & FocusableProps & CardVariantProps;
+type ContextType = {
+    slots: CardReturnType;
+    classNames?: SlotsToClasses<CardSlots>;
+    isDisabled?: CardVariantProps["isDisabled"];
+    isFooterBlurred?: CardVariantProps["isFooterBlurred"];
+    disableAnimation?: CardVariantProps["disableAnimation"];
+    fullWidth?: CardVariantProps["fullWidth"];
+};
+declare function useCard(originalProps: UseCardProps): {
+    context: ContextType;
+    domRef: react.RefObject<HTMLDivElement>;
+    Component: _heroui_system.As<any>;
+    classNames: SlotsToClasses<"base" | "body" | "footer" | "header"> | undefined;
+    children: ReactNode | ReactNode[];
+    isHovered: boolean;
+    isPressed: boolean;
+    disableAnimation: boolean;
+    isPressable: boolean | undefined;
+    isHoverable: boolean | undefined;
+    disableRipple: boolean;
+    handlePress: (e: PressEvent) => void;
+    isFocusVisible: boolean;
+    getCardProps: PropGetter;
+    getRippleProps: () => RippleProps;
+};
+type UseCardReturn = ReturnType<typeof useCard>;
+
+export { type ContextType, type Props, type UseCardProps, type UseCardReturn, useCard };