@heroui/card 2.2.10 → 2.2.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +2 -2
- package/dist/card-body.d.mts +6 -0
- package/dist/card-body.d.ts +1 -1
- package/dist/card-body.js +0 -2
- package/dist/card-context.d.mts +13 -0
- package/dist/card-footer.d.mts +8 -0
- package/dist/card-footer.d.ts +1 -1
- package/dist/card-footer.js +0 -2
- package/dist/card-header.d.mts +6 -0
- package/dist/card-header.d.ts +1 -1
- package/dist/card-header.js +0 -2
- package/dist/card.d.mts +14 -0
- package/dist/card.d.ts +1 -1
- package/dist/card.js +1 -4
- package/dist/card.mjs +2 -2
- package/dist/{chunk-5PILOUBS.mjs → chunk-MW56SEHC.mjs} +1 -1
- package/dist/{chunk-LYDQFOTE.mjs → chunk-NVHFBF4D.mjs} +1 -2
- package/dist/index.d.mts +13 -0
- package/dist/index.js +4 -5
- package/dist/index.mjs +2 -2
- package/dist/use-card.d.mts +80 -0
- package/dist/use-card.d.ts +2 -2
- package/dist/use-card.js +1 -2
- package/dist/use-card.mjs +1 -1
- package/package.json +13 -13
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -15,10 +15,10 @@ npm i @heroui/card
|
|
|
15
15
|
## Contribution
|
|
16
16
|
|
|
17
17
|
Yes please! See the
|
|
18
|
-
[contributing guidelines](https://github.com/
|
|
18
|
+
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
|
|
19
19
|
for details.
|
|
20
20
|
|
|
21
21
|
## License
|
|
22
22
|
|
|
23
23
|
This project is licensed under the terms of the
|
|
24
|
-
[MIT license](https://github.com/
|
|
24
|
+
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
|
package/dist/card-body.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as _heroui_system from '@heroui/system';
|
|
2
2
|
import { HTMLHeroUIProps } from '@heroui/system';
|
|
3
3
|
|
|
4
|
-
declare const CardBody: _heroui_system.InternalForwardRefRenderFunction<"div", HTMLHeroUIProps<"div"
|
|
4
|
+
declare const CardBody: _heroui_system.InternalForwardRefRenderFunction<"div", HTMLHeroUIProps<"div">, never>;
|
|
5
5
|
|
|
6
6
|
export { CardBody as default };
|
package/dist/card-body.js
CHANGED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ContextType } from './use-card.mjs';
|
|
3
|
+
import '@heroui/system';
|
|
4
|
+
import '@react-types/shared';
|
|
5
|
+
import '@heroui/theme';
|
|
6
|
+
import '@heroui/ripple';
|
|
7
|
+
import '@react-aria/interactions';
|
|
8
|
+
import '@heroui/react-utils';
|
|
9
|
+
|
|
10
|
+
declare const CardProvider: react.Provider<ContextType>;
|
|
11
|
+
declare const useCardContext: () => ContextType;
|
|
12
|
+
|
|
13
|
+
export { CardProvider, useCardContext };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as _heroui_system from '@heroui/system';
|
|
2
|
+
import { HTMLHeroUIProps } from '@heroui/system';
|
|
3
|
+
|
|
4
|
+
interface CardFooterProps extends HTMLHeroUIProps<"div"> {
|
|
5
|
+
}
|
|
6
|
+
declare const CardFooter: _heroui_system.InternalForwardRefRenderFunction<"div", CardFooterProps, never>;
|
|
7
|
+
|
|
8
|
+
export { type CardFooterProps, CardFooter as default };
|
package/dist/card-footer.d.ts
CHANGED
|
@@ -5,4 +5,4 @@ interface CardFooterProps extends HTMLHeroUIProps<"div"> {
|
|
|
5
5
|
}
|
|
6
6
|
declare const CardFooter: _heroui_system.InternalForwardRefRenderFunction<"div", CardFooterProps, never>;
|
|
7
7
|
|
|
8
|
-
export { CardFooterProps, CardFooter as default };
|
|
8
|
+
export { type CardFooterProps, CardFooter as default };
|
package/dist/card-footer.js
CHANGED
package/dist/card-header.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as _heroui_system from '@heroui/system';
|
|
2
2
|
import { HTMLHeroUIProps } from '@heroui/system';
|
|
3
3
|
|
|
4
|
-
declare const CardHeader: _heroui_system.InternalForwardRefRenderFunction<"div", HTMLHeroUIProps<"div"
|
|
4
|
+
declare const CardHeader: _heroui_system.InternalForwardRefRenderFunction<"div", HTMLHeroUIProps<"div">, never>;
|
|
5
5
|
|
|
6
6
|
export { CardHeader as default };
|
package/dist/card-header.js
CHANGED
package/dist/card.d.mts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as _heroui_system from '@heroui/system';
|
|
2
|
+
import { UseCardProps } from './use-card.mjs';
|
|
3
|
+
import 'react';
|
|
4
|
+
import '@react-types/shared';
|
|
5
|
+
import '@heroui/theme';
|
|
6
|
+
import '@heroui/ripple';
|
|
7
|
+
import '@react-aria/interactions';
|
|
8
|
+
import '@heroui/react-utils';
|
|
9
|
+
|
|
10
|
+
interface CardProps extends UseCardProps {
|
|
11
|
+
}
|
|
12
|
+
declare const Card: _heroui_system.InternalForwardRefRenderFunction<"div", CardProps, never>;
|
|
13
|
+
|
|
14
|
+
export { type CardProps, Card as default };
|
package/dist/card.d.ts
CHANGED
package/dist/card.js
CHANGED
|
@@ -72,8 +72,7 @@ function useCard(originalProps) {
|
|
|
72
72
|
const { onClear: onClearRipple, onPress: onRipplePressHandler, ripples } = (0, import_ripple.useRipple)();
|
|
73
73
|
const handlePress = (0, import_react.useCallback)(
|
|
74
74
|
(e) => {
|
|
75
|
-
if (disableRipple || disableAnimation)
|
|
76
|
-
return;
|
|
75
|
+
if (disableRipple || disableAnimation) return;
|
|
77
76
|
domRef.current && onRipplePressHandler(e);
|
|
78
77
|
},
|
|
79
78
|
[disableRipple, disableAnimation, domRef, onRipplePressHandler]
|
|
@@ -202,5 +201,3 @@ var Card = (0, import_system2.forwardRef)((props, ref) => {
|
|
|
202
201
|
});
|
|
203
202
|
Card.displayName = "HeroUI.Card";
|
|
204
203
|
var card_default = Card;
|
|
205
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
206
|
-
0 && (module.exports = {});
|
package/dist/card.mjs
CHANGED
|
@@ -37,8 +37,7 @@ function useCard(originalProps) {
|
|
|
37
37
|
const { onClear: onClearRipple, onPress: onRipplePressHandler, ripples } = useRipple();
|
|
38
38
|
const handlePress = useCallback(
|
|
39
39
|
(e) => {
|
|
40
|
-
if (disableRipple || disableAnimation)
|
|
41
|
-
return;
|
|
40
|
+
if (disableRipple || disableAnimation) return;
|
|
42
41
|
domRef.current && onRipplePressHandler(e);
|
|
43
42
|
},
|
|
44
43
|
[disableRipple, disableAnimation, domRef, onRipplePressHandler]
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export { default as Card, CardProps } from './card.mjs';
|
|
2
|
+
export { default as CardFooter, CardFooterProps } from './card-footer.mjs';
|
|
3
|
+
export { useCard } from './use-card.mjs';
|
|
4
|
+
export { CardProvider, useCardContext } from './card-context.mjs';
|
|
5
|
+
export { default as CardHeader } from './card-header.mjs';
|
|
6
|
+
export { default as CardBody } from './card-body.mjs';
|
|
7
|
+
import '@heroui/system';
|
|
8
|
+
import 'react';
|
|
9
|
+
import '@react-types/shared';
|
|
10
|
+
import '@heroui/theme';
|
|
11
|
+
import '@heroui/ripple';
|
|
12
|
+
import '@react-aria/interactions';
|
|
13
|
+
import '@heroui/react-utils';
|
package/dist/index.js
CHANGED
|
@@ -19,8 +19,8 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
19
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
20
|
|
|
21
21
|
// src/index.ts
|
|
22
|
-
var
|
|
23
|
-
__export(
|
|
22
|
+
var index_exports = {};
|
|
23
|
+
__export(index_exports, {
|
|
24
24
|
Card: () => card_default,
|
|
25
25
|
CardBody: () => card_body_default,
|
|
26
26
|
CardFooter: () => card_footer_default,
|
|
@@ -29,7 +29,7 @@ __export(src_exports, {
|
|
|
29
29
|
useCard: () => useCard,
|
|
30
30
|
useCardContext: () => useCardContext
|
|
31
31
|
});
|
|
32
|
-
module.exports = __toCommonJS(
|
|
32
|
+
module.exports = __toCommonJS(index_exports);
|
|
33
33
|
|
|
34
34
|
// src/use-card.ts
|
|
35
35
|
var import_theme = require("@heroui/theme");
|
|
@@ -68,8 +68,7 @@ function useCard(originalProps) {
|
|
|
68
68
|
const { onClear: onClearRipple, onPress: onRipplePressHandler, ripples } = (0, import_ripple.useRipple)();
|
|
69
69
|
const handlePress = (0, import_react.useCallback)(
|
|
70
70
|
(e) => {
|
|
71
|
-
if (disableRipple || disableAnimation)
|
|
72
|
-
return;
|
|
71
|
+
if (disableRipple || disableAnimation) return;
|
|
73
72
|
domRef.current && onRipplePressHandler(e);
|
|
74
73
|
},
|
|
75
74
|
[disableRipple, disableAnimation, domRef, onRipplePressHandler]
|
package/dist/index.mjs
CHANGED
|
@@ -10,14 +10,14 @@ import {
|
|
|
10
10
|
} from "./chunk-D5XJWRAV.mjs";
|
|
11
11
|
import {
|
|
12
12
|
card_default
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-MW56SEHC.mjs";
|
|
14
14
|
import {
|
|
15
15
|
CardProvider,
|
|
16
16
|
useCardContext
|
|
17
17
|
} from "./chunk-XHGGCEVJ.mjs";
|
|
18
18
|
import {
|
|
19
19
|
useCard
|
|
20
|
-
} from "./chunk-
|
|
20
|
+
} from "./chunk-NVHFBF4D.mjs";
|
|
21
21
|
export {
|
|
22
22
|
card_default as Card,
|
|
23
23
|
card_body_default as CardBody,
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import * as _heroui_system from '@heroui/system';
|
|
2
|
+
import { HTMLHeroUIProps, PropGetter } from '@heroui/system';
|
|
3
|
+
import * as react from 'react';
|
|
4
|
+
import { ReactNode, MouseEventHandler } from 'react';
|
|
5
|
+
import { PressEvents, FocusableProps } from '@react-types/shared';
|
|
6
|
+
import { SlotsToClasses, CardSlots, CardVariantProps, CardReturnType } from '@heroui/theme';
|
|
7
|
+
import { RippleProps } from '@heroui/ripple';
|
|
8
|
+
import { PressEvent } from '@react-aria/interactions';
|
|
9
|
+
import { ReactRef } from '@heroui/react-utils';
|
|
10
|
+
|
|
11
|
+
interface Props extends Omit<HTMLHeroUIProps<"div">, "onClick"> {
|
|
12
|
+
/**
|
|
13
|
+
* Ref to the DOM node.
|
|
14
|
+
*/
|
|
15
|
+
ref?: ReactRef<HTMLDivElement | null>;
|
|
16
|
+
/**
|
|
17
|
+
* Usually the Card parts, `CardHeader`, `CardBody` and `CardFooter`.
|
|
18
|
+
*/
|
|
19
|
+
children?: ReactNode | ReactNode[];
|
|
20
|
+
/**
|
|
21
|
+
* Whether the card should show a ripple animation on press, this prop is ignored if `disableAnimation` is true or `isPressable` is false.
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
24
|
+
disableRipple?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Whether the card should allow text selection on press. (only for pressable cards)
|
|
27
|
+
* @default true
|
|
28
|
+
*/
|
|
29
|
+
allowTextSelectionOnPress?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* The native button click event handler.
|
|
32
|
+
* use `onPress` instead.
|
|
33
|
+
* @deprecated
|
|
34
|
+
*/
|
|
35
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
36
|
+
/**
|
|
37
|
+
* Classname or List of classes to change the classNames of the element.
|
|
38
|
+
* if `className` is passed, it will be added to the base slot.
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```ts
|
|
42
|
+
* <Card classNames={{
|
|
43
|
+
* base:"base-classes",
|
|
44
|
+
* header: "dot-classes",
|
|
45
|
+
* body: "content-classes",
|
|
46
|
+
* footer: "avatar-classes",
|
|
47
|
+
* }} />
|
|
48
|
+
* ```
|
|
49
|
+
*/
|
|
50
|
+
classNames?: SlotsToClasses<CardSlots>;
|
|
51
|
+
}
|
|
52
|
+
type UseCardProps = Props & PressEvents & FocusableProps & CardVariantProps;
|
|
53
|
+
type ContextType = {
|
|
54
|
+
slots: CardReturnType;
|
|
55
|
+
classNames?: SlotsToClasses<CardSlots>;
|
|
56
|
+
isDisabled?: CardVariantProps["isDisabled"];
|
|
57
|
+
isFooterBlurred?: CardVariantProps["isFooterBlurred"];
|
|
58
|
+
disableAnimation?: CardVariantProps["disableAnimation"];
|
|
59
|
+
fullWidth?: CardVariantProps["fullWidth"];
|
|
60
|
+
};
|
|
61
|
+
declare function useCard(originalProps: UseCardProps): {
|
|
62
|
+
context: ContextType;
|
|
63
|
+
domRef: react.RefObject<HTMLDivElement>;
|
|
64
|
+
Component: _heroui_system.As<any>;
|
|
65
|
+
classNames: SlotsToClasses<"base" | "body" | "footer" | "header"> | undefined;
|
|
66
|
+
children: ReactNode | ReactNode[];
|
|
67
|
+
isHovered: boolean;
|
|
68
|
+
isPressed: boolean;
|
|
69
|
+
disableAnimation: boolean;
|
|
70
|
+
isPressable: boolean | undefined;
|
|
71
|
+
isHoverable: boolean | undefined;
|
|
72
|
+
disableRipple: boolean;
|
|
73
|
+
handlePress: (e: PressEvent) => void;
|
|
74
|
+
isFocusVisible: boolean;
|
|
75
|
+
getCardProps: PropGetter;
|
|
76
|
+
getRippleProps: () => RippleProps;
|
|
77
|
+
};
|
|
78
|
+
type UseCardReturn = ReturnType<typeof useCard>;
|
|
79
|
+
|
|
80
|
+
export { type ContextType, type Props, type UseCardProps, type UseCardReturn, useCard };
|
package/dist/use-card.d.ts
CHANGED
|
@@ -72,9 +72,9 @@ declare function useCard(originalProps: UseCardProps): {
|
|
|
72
72
|
disableRipple: boolean;
|
|
73
73
|
handlePress: (e: PressEvent) => void;
|
|
74
74
|
isFocusVisible: boolean;
|
|
75
|
-
getCardProps: PropGetter
|
|
75
|
+
getCardProps: PropGetter;
|
|
76
76
|
getRippleProps: () => RippleProps;
|
|
77
77
|
};
|
|
78
78
|
type UseCardReturn = ReturnType<typeof useCard>;
|
|
79
79
|
|
|
80
|
-
export { ContextType, Props, UseCardProps, UseCardReturn, useCard };
|
|
80
|
+
export { type ContextType, type Props, type UseCardProps, type UseCardReturn, useCard };
|
package/dist/use-card.js
CHANGED
|
@@ -60,8 +60,7 @@ function useCard(originalProps) {
|
|
|
60
60
|
const { onClear: onClearRipple, onPress: onRipplePressHandler, ripples } = (0, import_ripple.useRipple)();
|
|
61
61
|
const handlePress = (0, import_react.useCallback)(
|
|
62
62
|
(e) => {
|
|
63
|
-
if (disableRipple || disableAnimation)
|
|
64
|
-
return;
|
|
63
|
+
if (disableRipple || disableAnimation) return;
|
|
65
64
|
domRef.current && onRipplePressHandler(e);
|
|
66
65
|
},
|
|
67
66
|
[disableRipple, disableAnimation, domRef, onRipplePressHandler]
|
package/dist/use-card.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@heroui/card",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.13",
|
|
4
4
|
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"card"
|
|
7
7
|
],
|
|
8
|
-
"author": "
|
|
8
|
+
"author": "HeroUI <support@heroui.com>",
|
|
9
9
|
"homepage": "https://heroui.com",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"main": "dist/index.js",
|
|
@@ -28,19 +28,19 @@
|
|
|
28
28
|
"react": ">=18 || >=19.0.0-rc.0",
|
|
29
29
|
"react-dom": ">=18 || >=19.0.0-rc.0",
|
|
30
30
|
"framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
|
|
31
|
-
"@heroui/theme": ">=2.4.
|
|
32
|
-
"@heroui/system": ">=2.4.
|
|
31
|
+
"@heroui/theme": ">=2.4.6",
|
|
32
|
+
"@heroui/system": ">=2.4.7"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@react-aria/focus": "3.19.
|
|
36
|
-
"@react-aria/utils": "3.
|
|
37
|
-
"@react-aria/interactions": "3.
|
|
38
|
-
"@react-aria/button": "3.11.
|
|
39
|
-
"@react-types/shared": "3.
|
|
40
|
-
"@heroui/shared-utils": "2.1.
|
|
41
|
-
"@heroui/
|
|
42
|
-
"@heroui/
|
|
43
|
-
"@heroui/
|
|
35
|
+
"@react-aria/focus": "3.19.1",
|
|
36
|
+
"@react-aria/utils": "3.27.0",
|
|
37
|
+
"@react-aria/interactions": "3.23.0",
|
|
38
|
+
"@react-aria/button": "3.11.1",
|
|
39
|
+
"@react-types/shared": "3.27.0",
|
|
40
|
+
"@heroui/shared-utils": "2.1.6",
|
|
41
|
+
"@heroui/use-aria-button": "2.2.8",
|
|
42
|
+
"@heroui/ripple": "2.2.11",
|
|
43
|
+
"@heroui/react-utils": "2.1.7"
|
|
44
44
|
},
|
|
45
45
|
"clean-package": "../../../clean-package.config.json",
|
|
46
46
|
"module": "dist/index.mjs",
|