@heroui/card 2.2.9 → 2.2.11

package/dist/chunk-LGSBTEIA.mjs

@@ -1,25 +0,0 @@
-"use client";
-import {
-  useCardContext
-} from "./chunk-XHGGCEVJ.mjs";
-
-// src/card-body.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 CardBody = forwardRef((props, ref) => {
-  var _a;
-  const { as, className, children, ...otherProps } = props;
-  const Component = as || "div";
-  const domRef = useDOMRef(ref);
-  const { slots, classNames } = useCardContext();
-  const bodyStyles = clsx(classNames == null ? void 0 : classNames.body, className);
-  return /* @__PURE__ */ 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;
-
-export {
-  card_body_default
-};

package/dist/chunk-LYDQFOTE.mjs

@@ -1,152 +0,0 @@
-"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

@@ -1,25 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-"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.ts

@@ -1,13 +0,0 @@
-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

@@ -1,271 +0,0 @@
-"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 src_exports = {};
-__export(src_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(src_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

@@ -1,29 +0,0 @@
-"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-5PILOUBS.mjs";
-import {
-  CardProvider,
-  useCardContext
-} from "./chunk-XHGGCEVJ.mjs";
-import {
-  useCard
-} from "./chunk-LYDQFOTE.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.ts

@@ -1,80 +0,0 @@
-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<Record<string, unknown>, _heroui_system.DOMAttributes<_heroui_system.DOMElement>>;
-    getRippleProps: () => RippleProps;
-};
-type UseCardReturn = ReturnType<typeof useCard>;
-
-export { ContextType, Props, UseCardProps, UseCardReturn, useCard };