@particle-academy/react-fancy 5.24.0 → 5.25.0
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/dist/card.cjs +6 -6
- package/dist/card.js +1 -1
- package/dist/{chunk-524TOKU3.cjs → chunk-5DQ2XUJI.cjs} +7 -7
- package/dist/{chunk-524TOKU3.cjs.map → chunk-5DQ2XUJI.cjs.map} +1 -1
- package/dist/{chunk-4K4ECIKK.js → chunk-ZIDBI6JX.js} +7 -7
- package/dist/{chunk-4K4ECIKK.js.map → chunk-ZIDBI6JX.js.map} +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/dist/card.cjs
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunk5DQ2XUJI_cjs = require('./chunk-5DQ2XUJI.cjs');
|
|
4
4
|
require('./chunk-ZU5Q77OT.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
Object.defineProperty(exports, "Card", {
|
|
9
9
|
enumerable: true,
|
|
10
|
-
get: function () { return
|
|
10
|
+
get: function () { return chunk5DQ2XUJI_cjs.Card; }
|
|
11
11
|
});
|
|
12
12
|
Object.defineProperty(exports, "CardBody", {
|
|
13
13
|
enumerable: true,
|
|
14
|
-
get: function () { return
|
|
14
|
+
get: function () { return chunk5DQ2XUJI_cjs.CardBody; }
|
|
15
15
|
});
|
|
16
16
|
Object.defineProperty(exports, "CardFooter", {
|
|
17
17
|
enumerable: true,
|
|
18
|
-
get: function () { return
|
|
18
|
+
get: function () { return chunk5DQ2XUJI_cjs.CardFooter; }
|
|
19
19
|
});
|
|
20
20
|
Object.defineProperty(exports, "CardHeader", {
|
|
21
21
|
enumerable: true,
|
|
22
|
-
get: function () { return
|
|
22
|
+
get: function () { return chunk5DQ2XUJI_cjs.CardHeader; }
|
|
23
23
|
});
|
|
24
24
|
Object.defineProperty(exports, "CardMedia", {
|
|
25
25
|
enumerable: true,
|
|
26
|
-
get: function () { return
|
|
26
|
+
get: function () { return chunk5DQ2XUJI_cjs.CardMedia; }
|
|
27
27
|
});
|
|
28
28
|
//# sourceMappingURL=card.cjs.map
|
|
29
29
|
//# sourceMappingURL=card.cjs.map
|
package/dist/card.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Card, CardBody, CardFooter, CardHeader, CardMedia } from './chunk-
|
|
1
|
+
export { Card, CardBody, CardFooter, CardHeader, CardMedia } from './chunk-ZIDBI6JX.js';
|
|
2
2
|
import './chunk-MMW2JGKZ.js';
|
|
3
3
|
//# sourceMappingURL=card.js.map
|
|
4
4
|
//# sourceMappingURL=card.js.map
|
|
@@ -80,8 +80,8 @@ var CardMedia = react.forwardRef(
|
|
|
80
80
|
"data-react-fancy-card-media": "",
|
|
81
81
|
className: chunkZU5Q77OT_cjs.cn(
|
|
82
82
|
"relative overflow-hidden rounded-t-lg",
|
|
83
|
-
// Card's `padding` prop pads EVERY direct
|
|
84
|
-
// (`[
|
|
83
|
+
// Card's `padding` prop pads EVERY direct child
|
|
84
|
+
// (`[&>*]:px-4 …`), which would inset the media and break the
|
|
85
85
|
// flush-to-the-edge look every caller wants. `!` wins regardless of
|
|
86
86
|
// stylesheet order, which plain `p-0` would not.
|
|
87
87
|
"!px-0 !py-0",
|
|
@@ -122,9 +122,9 @@ var variantClasses = {
|
|
|
122
122
|
};
|
|
123
123
|
var paddingClasses = {
|
|
124
124
|
none: "",
|
|
125
|
-
sm: "[
|
|
126
|
-
md: "[
|
|
127
|
-
lg: "[
|
|
125
|
+
sm: "[&>*]:px-3 [&>*]:py-2",
|
|
126
|
+
md: "[&>*]:px-4 [&>*]:py-3",
|
|
127
|
+
lg: "[&>*]:px-6 [&>*]:py-4"
|
|
128
128
|
};
|
|
129
129
|
var CardRoot = react.forwardRef(
|
|
130
130
|
({
|
|
@@ -169,5 +169,5 @@ exports.CardBody = CardBody;
|
|
|
169
169
|
exports.CardFooter = CardFooter;
|
|
170
170
|
exports.CardHeader = CardHeader;
|
|
171
171
|
exports.CardMedia = CardMedia;
|
|
172
|
-
//# sourceMappingURL=chunk-
|
|
173
|
-
//# sourceMappingURL=chunk-
|
|
172
|
+
//# sourceMappingURL=chunk-5DQ2XUJI.cjs.map
|
|
173
|
+
//# sourceMappingURL=chunk-5DQ2XUJI.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Card/CardHeader.tsx","../src/components/Card/CardBody.tsx","../src/components/Card/CardFooter.tsx","../src/components/Card/CardMedia.tsx","../src/components/Card/Card.tsx"],"names":["forwardRef","jsx","cn","jsxs"],"mappings":"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","file":"chunk-524TOKU3.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardHeaderProps } from \"./Card.types\";\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-header=\"\"\n className={cn(\n \"border-b border-zinc-200 dark:border-zinc-700\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardHeader.displayName = \"CardHeader\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardBodyProps } from \"./Card.types\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-body=\"\"\n className={cn(className)}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardBody.displayName = \"CardBody\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardFooterProps } from \"./Card.types\";\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-footer=\"\"\n className={cn(\n \"border-t border-zinc-200 dark:border-zinc-700\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardFooter.displayName = \"CardFooter\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardMediaProps } from \"./Card.types\";\n\n/**\n * The fixed-ratio media region at the top of a card: a thumbnail, gradient or\n * solid swatch, with slots pinned to its corners.\n *\n * This is `Card.Media` rather than a separate `<MediaCard>` because the thing\n * being asked for was never a different card — it was a card with a picture in\n * it. Four surfaces had each rebuilt exactly this (a gallery index, a package\n * grid, a starter-kit grid and a showcase grid) and one of them was already\n * wrapping `Card` and hand-rolling only this region.\n *\n * ## The `background` is not decoration\n *\n * It shows through while the image loads and stays visible if the image never\n * arrives. The gallery relied on that: each style card is keyed to a swatch, so\n * a missing screenshot degrades to the right colour rather than to a hole.\n */\nexport const CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(\n (\n {\n src,\n alt = \"\",\n ratio = \"16/9\",\n height,\n background,\n objectPosition = \"center\",\n loading = \"lazy\",\n topLeft,\n topRight,\n bottomLeft,\n bottomRight,\n className,\n style,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-media=\"\"\n className={cn(\n \"relative overflow-hidden rounded-t-lg\",\n // Card's `padding` prop pads EVERY direct div child\n // (`[&>div]:px-4 …`), which would inset the media and break the\n // flush-to-the-edge look every caller wants. `!` wins regardless of\n // stylesheet order, which plain `p-0` would not.\n \"!px-0 !py-0\",\n className,\n )}\n style={{\n ...(height === undefined ? { aspectRatio: ratio } : { height }),\n ...(background ? { background } : null),\n ...style,\n }}\n {...props}\n >\n {src ? (\n <img\n src={src}\n alt={alt}\n loading={loading}\n className=\"absolute inset-0 h-full w-full object-cover\"\n style={{ objectPosition }}\n />\n ) : null}\n\n {children}\n\n {topLeft ? <span className=\"absolute left-2 top-2 z-10\">{topLeft}</span> : null}\n {topRight ? <span className=\"absolute right-2 top-2 z-10\">{topRight}</span> : null}\n {bottomLeft ? <span className=\"absolute bottom-2 left-2 z-10\">{bottomLeft}</span> : null}\n {bottomRight ? <span className=\"absolute bottom-2 right-2 z-10\">{bottomRight}</span> : null}\n </div>\n );\n },\n);\n\nCardMedia.displayName = \"CardMedia\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CardHeader } from \"./CardHeader\";\nimport { CardBody } from \"./CardBody\";\nimport { CardFooter } from \"./CardFooter\";\nimport { CardMedia } from \"./CardMedia\";\nimport type { CardProps } from \"./Card.types\";\n\nconst variantClasses: Record<NonNullable<CardProps[\"variant\"]>, string> = {\n outlined: \"border border-zinc-200 dark:border-zinc-700\",\n elevated: \"shadow-md border border-zinc-100 dark:border-zinc-800\",\n flat: \"bg-zinc-50 dark:bg-zinc-800/50\",\n};\n\nconst paddingClasses: Record<NonNullable<CardProps[\"padding\"]>, string> = {\n none: \"\",\n sm: \"[&>div]:px-3 [&>div]:py-2\",\n md: \"[&>div]:px-4 [&>div]:py-3\",\n lg: \"[&>div]:px-6 [&>div]:py-4\",\n};\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n variant = \"outlined\",\n padding = \"md\",\n interactive = false,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card=\"\"\n className={cn(\n \"rounded-lg bg-white dark:bg-zinc-900\",\n variantClasses[variant],\n // `overflow-hidden` is part of `interactive` rather than always-on:\n // clipping unconditionally would cut off popovers and dropdowns that\n // legitimately overflow a static card.\n interactive &&\n \"overflow-hidden transition hover:-translate-y-0.5 hover:shadow-lg hover:border-zinc-300 dark:hover:border-zinc-600\",\n paddingClasses[padding],\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardRoot.displayName = \"Card\";\n\nexport const Card = Object.assign(CardRoot, {\n Media: CardMedia,\n Header: CardHeader,\n Body: CardBody,\n Footer: CardFooter,\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Card/CardHeader.tsx","../src/components/Card/CardBody.tsx","../src/components/Card/CardFooter.tsx","../src/components/Card/CardMedia.tsx","../src/components/Card/Card.tsx"],"names":["forwardRef","jsx","cn","jsxs"],"mappings":"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","file":"chunk-5DQ2XUJI.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardHeaderProps } from \"./Card.types\";\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-header=\"\"\n className={cn(\n \"border-b border-zinc-200 dark:border-zinc-700\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardHeader.displayName = \"CardHeader\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardBodyProps } from \"./Card.types\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-body=\"\"\n className={cn(className)}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardBody.displayName = \"CardBody\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardFooterProps } from \"./Card.types\";\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-footer=\"\"\n className={cn(\n \"border-t border-zinc-200 dark:border-zinc-700\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardFooter.displayName = \"CardFooter\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardMediaProps } from \"./Card.types\";\n\n/**\n * The fixed-ratio media region at the top of a card: a thumbnail, gradient or\n * solid swatch, with slots pinned to its corners.\n *\n * This is `Card.Media` rather than a separate `<MediaCard>` because the thing\n * being asked for was never a different card — it was a card with a picture in\n * it. Four surfaces had each rebuilt exactly this (a gallery index, a package\n * grid, a starter-kit grid and a showcase grid) and one of them was already\n * wrapping `Card` and hand-rolling only this region.\n *\n * ## The `background` is not decoration\n *\n * It shows through while the image loads and stays visible if the image never\n * arrives. The gallery relied on that: each style card is keyed to a swatch, so\n * a missing screenshot degrades to the right colour rather than to a hole.\n */\nexport const CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(\n (\n {\n src,\n alt = \"\",\n ratio = \"16/9\",\n height,\n background,\n objectPosition = \"center\",\n loading = \"lazy\",\n topLeft,\n topRight,\n bottomLeft,\n bottomRight,\n className,\n style,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-media=\"\"\n className={cn(\n \"relative overflow-hidden rounded-t-lg\",\n // Card's `padding` prop pads EVERY direct child\n // (`[&>*]:px-4 …`), which would inset the media and break the\n // flush-to-the-edge look every caller wants. `!` wins regardless of\n // stylesheet order, which plain `p-0` would not.\n \"!px-0 !py-0\",\n className,\n )}\n style={{\n ...(height === undefined ? { aspectRatio: ratio } : { height }),\n ...(background ? { background } : null),\n ...style,\n }}\n {...props}\n >\n {src ? (\n <img\n src={src}\n alt={alt}\n loading={loading}\n className=\"absolute inset-0 h-full w-full object-cover\"\n style={{ objectPosition }}\n />\n ) : null}\n\n {children}\n\n {topLeft ? <span className=\"absolute left-2 top-2 z-10\">{topLeft}</span> : null}\n {topRight ? <span className=\"absolute right-2 top-2 z-10\">{topRight}</span> : null}\n {bottomLeft ? <span className=\"absolute bottom-2 left-2 z-10\">{bottomLeft}</span> : null}\n {bottomRight ? <span className=\"absolute bottom-2 right-2 z-10\">{bottomRight}</span> : null}\n </div>\n );\n },\n);\n\nCardMedia.displayName = \"CardMedia\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CardHeader } from \"./CardHeader\";\nimport { CardBody } from \"./CardBody\";\nimport { CardFooter } from \"./CardFooter\";\nimport { CardMedia } from \"./CardMedia\";\nimport type { CardProps } from \"./Card.types\";\n\nconst variantClasses: Record<NonNullable<CardProps[\"variant\"]>, string> = {\n outlined: \"border border-zinc-200 dark:border-zinc-700\",\n elevated: \"shadow-md border border-zinc-100 dark:border-zinc-800\",\n flat: \"bg-zinc-50 dark:bg-zinc-800/50\",\n};\n\n/**\n * Padding is applied to the card's DIRECT CHILDREN rather than the card\n * itself, so a full-bleed child (`Card.Media`) can opt out with `!px-0`\n * without having to undo a padding that is already baked into the frame.\n *\n * The selector is `&>*`, not `&>div`. It was `&>div` until 5.24.0, which meant\n * the tag a caller happened to choose silently decided whether that child was\n * padded: `<Card><div>a</div><p>b</p></Card>` inset the div and left the\n * paragraph hard against the border. Nothing in the caller's code hinted at\n * the rule, and the result read as a bug in the card.\n */\nconst paddingClasses: Record<NonNullable<CardProps[\"padding\"]>, string> = {\n none: \"\",\n sm: \"[&>*]:px-3 [&>*]:py-2\",\n md: \"[&>*]:px-4 [&>*]:py-3\",\n lg: \"[&>*]:px-6 [&>*]:py-4\",\n};\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n variant = \"outlined\",\n padding = \"md\",\n interactive = false,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card=\"\"\n className={cn(\n \"rounded-lg bg-white dark:bg-zinc-900\",\n variantClasses[variant],\n // `overflow-hidden` is part of `interactive` rather than always-on:\n // clipping unconditionally would cut off popovers and dropdowns that\n // legitimately overflow a static card.\n interactive &&\n \"overflow-hidden transition hover:-translate-y-0.5 hover:shadow-lg hover:border-zinc-300 dark:hover:border-zinc-600\",\n paddingClasses[padding],\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardRoot.displayName = \"Card\";\n\nexport const Card = Object.assign(CardRoot, {\n Media: CardMedia,\n Header: CardHeader,\n Body: CardBody,\n Footer: CardFooter,\n});\n"]}
|
|
@@ -78,8 +78,8 @@ var CardMedia = forwardRef(
|
|
|
78
78
|
"data-react-fancy-card-media": "",
|
|
79
79
|
className: cn(
|
|
80
80
|
"relative overflow-hidden rounded-t-lg",
|
|
81
|
-
// Card's `padding` prop pads EVERY direct
|
|
82
|
-
// (`[
|
|
81
|
+
// Card's `padding` prop pads EVERY direct child
|
|
82
|
+
// (`[&>*]:px-4 …`), which would inset the media and break the
|
|
83
83
|
// flush-to-the-edge look every caller wants. `!` wins regardless of
|
|
84
84
|
// stylesheet order, which plain `p-0` would not.
|
|
85
85
|
"!px-0 !py-0",
|
|
@@ -120,9 +120,9 @@ var variantClasses = {
|
|
|
120
120
|
};
|
|
121
121
|
var paddingClasses = {
|
|
122
122
|
none: "",
|
|
123
|
-
sm: "[
|
|
124
|
-
md: "[
|
|
125
|
-
lg: "[
|
|
123
|
+
sm: "[&>*]:px-3 [&>*]:py-2",
|
|
124
|
+
md: "[&>*]:px-4 [&>*]:py-3",
|
|
125
|
+
lg: "[&>*]:px-6 [&>*]:py-4"
|
|
126
126
|
};
|
|
127
127
|
var CardRoot = forwardRef(
|
|
128
128
|
({
|
|
@@ -163,5 +163,5 @@ var Card = Object.assign(CardRoot, {
|
|
|
163
163
|
});
|
|
164
164
|
|
|
165
165
|
export { Card, CardBody, CardFooter, CardHeader, CardMedia };
|
|
166
|
-
//# sourceMappingURL=chunk-
|
|
167
|
-
//# sourceMappingURL=chunk-
|
|
166
|
+
//# sourceMappingURL=chunk-ZIDBI6JX.js.map
|
|
167
|
+
//# sourceMappingURL=chunk-ZIDBI6JX.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Card/CardHeader.tsx","../src/components/Card/CardBody.tsx","../src/components/Card/CardFooter.tsx","../src/components/Card/CardMedia.tsx","../src/components/Card/Card.tsx"],"names":["forwardRef","jsx"],"mappings":"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","file":"chunk-4K4ECIKK.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardHeaderProps } from \"./Card.types\";\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-header=\"\"\n className={cn(\n \"border-b border-zinc-200 dark:border-zinc-700\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardHeader.displayName = \"CardHeader\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardBodyProps } from \"./Card.types\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-body=\"\"\n className={cn(className)}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardBody.displayName = \"CardBody\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardFooterProps } from \"./Card.types\";\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-footer=\"\"\n className={cn(\n \"border-t border-zinc-200 dark:border-zinc-700\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardFooter.displayName = \"CardFooter\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardMediaProps } from \"./Card.types\";\n\n/**\n * The fixed-ratio media region at the top of a card: a thumbnail, gradient or\n * solid swatch, with slots pinned to its corners.\n *\n * This is `Card.Media` rather than a separate `<MediaCard>` because the thing\n * being asked for was never a different card — it was a card with a picture in\n * it. Four surfaces had each rebuilt exactly this (a gallery index, a package\n * grid, a starter-kit grid and a showcase grid) and one of them was already\n * wrapping `Card` and hand-rolling only this region.\n *\n * ## The `background` is not decoration\n *\n * It shows through while the image loads and stays visible if the image never\n * arrives. The gallery relied on that: each style card is keyed to a swatch, so\n * a missing screenshot degrades to the right colour rather than to a hole.\n */\nexport const CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(\n (\n {\n src,\n alt = \"\",\n ratio = \"16/9\",\n height,\n background,\n objectPosition = \"center\",\n loading = \"lazy\",\n topLeft,\n topRight,\n bottomLeft,\n bottomRight,\n className,\n style,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-media=\"\"\n className={cn(\n \"relative overflow-hidden rounded-t-lg\",\n // Card's `padding` prop pads EVERY direct div child\n // (`[&>div]:px-4 …`), which would inset the media and break the\n // flush-to-the-edge look every caller wants. `!` wins regardless of\n // stylesheet order, which plain `p-0` would not.\n \"!px-0 !py-0\",\n className,\n )}\n style={{\n ...(height === undefined ? { aspectRatio: ratio } : { height }),\n ...(background ? { background } : null),\n ...style,\n }}\n {...props}\n >\n {src ? (\n <img\n src={src}\n alt={alt}\n loading={loading}\n className=\"absolute inset-0 h-full w-full object-cover\"\n style={{ objectPosition }}\n />\n ) : null}\n\n {children}\n\n {topLeft ? <span className=\"absolute left-2 top-2 z-10\">{topLeft}</span> : null}\n {topRight ? <span className=\"absolute right-2 top-2 z-10\">{topRight}</span> : null}\n {bottomLeft ? <span className=\"absolute bottom-2 left-2 z-10\">{bottomLeft}</span> : null}\n {bottomRight ? <span className=\"absolute bottom-2 right-2 z-10\">{bottomRight}</span> : null}\n </div>\n );\n },\n);\n\nCardMedia.displayName = \"CardMedia\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CardHeader } from \"./CardHeader\";\nimport { CardBody } from \"./CardBody\";\nimport { CardFooter } from \"./CardFooter\";\nimport { CardMedia } from \"./CardMedia\";\nimport type { CardProps } from \"./Card.types\";\n\nconst variantClasses: Record<NonNullable<CardProps[\"variant\"]>, string> = {\n outlined: \"border border-zinc-200 dark:border-zinc-700\",\n elevated: \"shadow-md border border-zinc-100 dark:border-zinc-800\",\n flat: \"bg-zinc-50 dark:bg-zinc-800/50\",\n};\n\nconst paddingClasses: Record<NonNullable<CardProps[\"padding\"]>, string> = {\n none: \"\",\n sm: \"[&>div]:px-3 [&>div]:py-2\",\n md: \"[&>div]:px-4 [&>div]:py-3\",\n lg: \"[&>div]:px-6 [&>div]:py-4\",\n};\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n variant = \"outlined\",\n padding = \"md\",\n interactive = false,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card=\"\"\n className={cn(\n \"rounded-lg bg-white dark:bg-zinc-900\",\n variantClasses[variant],\n // `overflow-hidden` is part of `interactive` rather than always-on:\n // clipping unconditionally would cut off popovers and dropdowns that\n // legitimately overflow a static card.\n interactive &&\n \"overflow-hidden transition hover:-translate-y-0.5 hover:shadow-lg hover:border-zinc-300 dark:hover:border-zinc-600\",\n paddingClasses[padding],\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardRoot.displayName = \"Card\";\n\nexport const Card = Object.assign(CardRoot, {\n Media: CardMedia,\n Header: CardHeader,\n Body: CardBody,\n Footer: CardFooter,\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Card/CardHeader.tsx","../src/components/Card/CardBody.tsx","../src/components/Card/CardFooter.tsx","../src/components/Card/CardMedia.tsx","../src/components/Card/Card.tsx"],"names":["forwardRef","jsx"],"mappings":";;;;AAIO,IAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,UAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC1C,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,8BAAA,EAA6B,EAAA;AAAA,QAC7B,SAAA,EAAW,EAAA;AAAA,UACT,+CAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AClBlB,IAAM,QAAA,GAAWA,UAAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,UAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC1C,IAAA,uBACEC,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,4BAAA,EAA2B,EAAA;AAAA,QAC3B,SAAA,EAAW,GAAG,SAAS,CAAA;AAAA,QACtB,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;ACfhB,IAAM,UAAA,GAAaD,UAAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,UAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC1C,IAAA,uBACEC,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,8BAAA,EAA6B,EAAA;AAAA,QAC7B,SAAA,EAAW,EAAA;AAAA,UACT,+CAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;ACFlB,IAAM,SAAA,GAAYD,UAAAA;AAAA,EACvB,CACE;AAAA,IACE,GAAA;AAAA,IACA,GAAA,GAAM,EAAA;AAAA,IACN,KAAA,GAAQ,MAAA;AAAA,IACR,MAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA,GAAiB,QAAA;AAAA,IACjB,OAAA,GAAU,MAAA;AAAA,IACV,OAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,6BAAA,EAA4B,EAAA;AAAA,QAC5B,SAAA,EAAW,EAAA;AAAA,UACT,uCAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAKA,aAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA,UACL,GAAI,WAAW,MAAA,GAAY,EAAE,aAAa,KAAA,EAAM,GAAI,EAAE,MAAA,EAAO;AAAA,UAC7D,GAAI,UAAA,GAAa,EAAE,UAAA,EAAW,GAAI,IAAA;AAAA,UAClC,GAAG;AAAA,SACL;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,GAAA,mBACCC,GAAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,GAAA;AAAA,cACA,OAAA;AAAA,cACA,SAAA,EAAU,6CAAA;AAAA,cACV,KAAA,EAAO,EAAE,cAAA;AAAe;AAAA,WAC1B,GACE,IAAA;AAAA,UAEH,QAAA;AAAA,UAEA,0BAAUA,GAAAA,CAAC,UAAK,SAAA,EAAU,4BAAA,EAA8B,mBAAQ,CAAA,GAAU,IAAA;AAAA,UAC1E,2BAAWA,GAAAA,CAAC,UAAK,SAAA,EAAU,6BAAA,EAA+B,oBAAS,CAAA,GAAU,IAAA;AAAA,UAC7E,6BAAaA,GAAAA,CAAC,UAAK,SAAA,EAAU,+BAAA,EAAiC,sBAAW,CAAA,GAAU,IAAA;AAAA,UACnF,8BAAcA,GAAAA,CAAC,UAAK,SAAA,EAAU,gCAAA,EAAkC,uBAAY,CAAA,GAAU;AAAA;AAAA;AAAA,KACzF;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;AC1ExB,IAAM,cAAA,GAAoE;AAAA,EACxE,QAAA,EAAU,6CAAA;AAAA,EACV,QAAA,EAAU,uDAAA;AAAA,EACV,IAAA,EAAM;AACR,CAAA;AAaA,IAAM,cAAA,GAAoE;AAAA,EACxE,IAAA,EAAM,EAAA;AAAA,EACN,EAAA,EAAI,uBAAA;AAAA,EACJ,EAAA,EAAI,uBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,QAAA,GAAWD,UAAAA;AAAA,EACf,CACE;AAAA,IACE,OAAA,GAAU,UAAA;AAAA,IACV,OAAA,GAAU,IAAA;AAAA,IACV,WAAA,GAAc,KAAA;AAAA,IACd,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,uBAAA,EAAsB,EAAA;AAAA,QACtB,SAAA,EAAW,EAAA;AAAA,UACT,sCAAA;AAAA,UACA,eAAe,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA,UAItB,WAAA,IACE,oHAAA;AAAA,UACF,eAAe,OAAO,CAAA;AAAA,UACtB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,QAAA,CAAS,WAAA,GAAc,MAAA;AAEhB,IAAM,IAAA,GAAO,MAAA,CAAO,MAAA,CAAO,QAAA,EAAU;AAAA,EAC1C,KAAA,EAAO,SAAA;AAAA,EACP,MAAA,EAAQ,UAAA;AAAA,EACR,IAAA,EAAM,QAAA;AAAA,EACN,MAAA,EAAQ;AACV,CAAC","file":"chunk-ZIDBI6JX.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardHeaderProps } from \"./Card.types\";\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-header=\"\"\n className={cn(\n \"border-b border-zinc-200 dark:border-zinc-700\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardHeader.displayName = \"CardHeader\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardBodyProps } from \"./Card.types\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-body=\"\"\n className={cn(className)}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardBody.displayName = \"CardBody\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardFooterProps } from \"./Card.types\";\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-footer=\"\"\n className={cn(\n \"border-t border-zinc-200 dark:border-zinc-700\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardFooter.displayName = \"CardFooter\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardMediaProps } from \"./Card.types\";\n\n/**\n * The fixed-ratio media region at the top of a card: a thumbnail, gradient or\n * solid swatch, with slots pinned to its corners.\n *\n * This is `Card.Media` rather than a separate `<MediaCard>` because the thing\n * being asked for was never a different card — it was a card with a picture in\n * it. Four surfaces had each rebuilt exactly this (a gallery index, a package\n * grid, a starter-kit grid and a showcase grid) and one of them was already\n * wrapping `Card` and hand-rolling only this region.\n *\n * ## The `background` is not decoration\n *\n * It shows through while the image loads and stays visible if the image never\n * arrives. The gallery relied on that: each style card is keyed to a swatch, so\n * a missing screenshot degrades to the right colour rather than to a hole.\n */\nexport const CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(\n (\n {\n src,\n alt = \"\",\n ratio = \"16/9\",\n height,\n background,\n objectPosition = \"center\",\n loading = \"lazy\",\n topLeft,\n topRight,\n bottomLeft,\n bottomRight,\n className,\n style,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card-media=\"\"\n className={cn(\n \"relative overflow-hidden rounded-t-lg\",\n // Card's `padding` prop pads EVERY direct child\n // (`[&>*]:px-4 …`), which would inset the media and break the\n // flush-to-the-edge look every caller wants. `!` wins regardless of\n // stylesheet order, which plain `p-0` would not.\n \"!px-0 !py-0\",\n className,\n )}\n style={{\n ...(height === undefined ? { aspectRatio: ratio } : { height }),\n ...(background ? { background } : null),\n ...style,\n }}\n {...props}\n >\n {src ? (\n <img\n src={src}\n alt={alt}\n loading={loading}\n className=\"absolute inset-0 h-full w-full object-cover\"\n style={{ objectPosition }}\n />\n ) : null}\n\n {children}\n\n {topLeft ? <span className=\"absolute left-2 top-2 z-10\">{topLeft}</span> : null}\n {topRight ? <span className=\"absolute right-2 top-2 z-10\">{topRight}</span> : null}\n {bottomLeft ? <span className=\"absolute bottom-2 left-2 z-10\">{bottomLeft}</span> : null}\n {bottomRight ? <span className=\"absolute bottom-2 right-2 z-10\">{bottomRight}</span> : null}\n </div>\n );\n },\n);\n\nCardMedia.displayName = \"CardMedia\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CardHeader } from \"./CardHeader\";\nimport { CardBody } from \"./CardBody\";\nimport { CardFooter } from \"./CardFooter\";\nimport { CardMedia } from \"./CardMedia\";\nimport type { CardProps } from \"./Card.types\";\n\nconst variantClasses: Record<NonNullable<CardProps[\"variant\"]>, string> = {\n outlined: \"border border-zinc-200 dark:border-zinc-700\",\n elevated: \"shadow-md border border-zinc-100 dark:border-zinc-800\",\n flat: \"bg-zinc-50 dark:bg-zinc-800/50\",\n};\n\n/**\n * Padding is applied to the card's DIRECT CHILDREN rather than the card\n * itself, so a full-bleed child (`Card.Media`) can opt out with `!px-0`\n * without having to undo a padding that is already baked into the frame.\n *\n * The selector is `&>*`, not `&>div`. It was `&>div` until 5.24.0, which meant\n * the tag a caller happened to choose silently decided whether that child was\n * padded: `<Card><div>a</div><p>b</p></Card>` inset the div and left the\n * paragraph hard against the border. Nothing in the caller's code hinted at\n * the rule, and the result read as a bug in the card.\n */\nconst paddingClasses: Record<NonNullable<CardProps[\"padding\"]>, string> = {\n none: \"\",\n sm: \"[&>*]:px-3 [&>*]:py-2\",\n md: \"[&>*]:px-4 [&>*]:py-3\",\n lg: \"[&>*]:px-6 [&>*]:py-4\",\n};\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n variant = \"outlined\",\n padding = \"md\",\n interactive = false,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n data-react-fancy-card=\"\"\n className={cn(\n \"rounded-lg bg-white dark:bg-zinc-900\",\n variantClasses[variant],\n // `overflow-hidden` is part of `interactive` rather than always-on:\n // clipping unconditionally would cut off popovers and dropdowns that\n // legitimately overflow a static card.\n interactive &&\n \"overflow-hidden transition hover:-translate-y-0.5 hover:shadow-lg hover:border-zinc-300 dark:hover:border-zinc-600\",\n paddingClasses[padding],\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nCardRoot.displayName = \"Card\";\n\nexport const Card = Object.assign(CardRoot, {\n Media: CardMedia,\n Header: CardHeader,\n Body: CardBody,\n Footer: CardFooter,\n});\n"]}
|
package/dist/index.cjs
CHANGED
|
@@ -102,7 +102,7 @@ var chunkBFKCVSNK_cjs = require('./chunk-BFKCVSNK.cjs');
|
|
|
102
102
|
var chunkQOGKO6JH_cjs = require('./chunk-QOGKO6JH.cjs');
|
|
103
103
|
require('./chunk-3I2KWNXT.cjs');
|
|
104
104
|
var chunkCJVNO5YM_cjs = require('./chunk-CJVNO5YM.cjs');
|
|
105
|
-
var
|
|
105
|
+
var chunk5DQ2XUJI_cjs = require('./chunk-5DQ2XUJI.cjs');
|
|
106
106
|
var chunk6SO2ZX3J_cjs = require('./chunk-6SO2ZX3J.cjs');
|
|
107
107
|
var chunkN4VHOTMK_cjs = require('./chunk-N4VHOTMK.cjs');
|
|
108
108
|
var chunkZTC3EQFZ_cjs = require('./chunk-ZTC3EQFZ.cjs');
|
|
@@ -722,7 +722,7 @@ Object.defineProperty(exports, "Callout", {
|
|
|
722
722
|
});
|
|
723
723
|
Object.defineProperty(exports, "Card", {
|
|
724
724
|
enumerable: true,
|
|
725
|
-
get: function () { return
|
|
725
|
+
get: function () { return chunk5DQ2XUJI_cjs.Card; }
|
|
726
726
|
});
|
|
727
727
|
Object.defineProperty(exports, "Carousel", {
|
|
728
728
|
enumerable: true,
|
package/dist/index.js
CHANGED
|
@@ -100,7 +100,7 @@ export { sanitizeHref, sanitizeHtml } from './chunk-XJXQG34J.js';
|
|
|
100
100
|
export { Calendar } from './chunk-NTMHP7FS.js';
|
|
101
101
|
import './chunk-NMXCQOHV.js';
|
|
102
102
|
export { Callout } from './chunk-HOP3XXPV.js';
|
|
103
|
-
export { Card } from './chunk-
|
|
103
|
+
export { Card } from './chunk-ZIDBI6JX.js';
|
|
104
104
|
export { Carousel, useCarousel } from './chunk-RFLPFQFF.js';
|
|
105
105
|
export { Accordion, useAccordion } from './chunk-LYHQ4VBR.js';
|
|
106
106
|
export { AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, useAccordionPanel, useAccordionSection } from './chunk-I3RPL3GE.js';
|