@particle-academy/react-fancy 5.29.1 → 5.30.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-CuRZivBz.d.cts +136 -0
- package/dist/Card-CuRZivBz.d.ts +136 -0
- package/dist/card.cjs +12 -6
- package/dist/card.d.cts +50 -3
- package/dist/card.d.ts +50 -3
- package/dist/card.js +3 -1
- package/dist/chunk-5F6V5HHT.cjs +399 -0
- package/dist/chunk-5F6V5HHT.cjs.map +1 -0
- package/dist/{chunk-Y3T7WMT6.cjs → chunk-65HKNZFG.cjs} +2 -2
- package/dist/{chunk-Y3T7WMT6.cjs.map → chunk-65HKNZFG.cjs.map} +1 -1
- package/dist/{chunk-2HGYDDIQ.js → chunk-ASCATIDJ.js} +3 -3
- package/dist/{chunk-2HGYDDIQ.js.map → chunk-ASCATIDJ.js.map} +1 -1
- package/dist/{chunk-6GWOB2Z4.js → chunk-CESGP5AF.js} +2 -2
- package/dist/{chunk-6GWOB2Z4.js.map → chunk-CESGP5AF.js.map} +1 -1
- package/dist/chunk-CF2U25LM.js +392 -0
- package/dist/chunk-CF2U25LM.js.map +1 -0
- package/dist/chunk-CFH6CJQG.js +3 -0
- package/dist/chunk-CFH6CJQG.js.map +1 -0
- package/dist/chunk-FJKZ5NOA.cjs +4 -0
- package/dist/chunk-FJKZ5NOA.cjs.map +1 -0
- package/dist/{chunk-FEUAZW3X.cjs → chunk-SCGE6DCE.cjs} +3 -3
- package/dist/{chunk-FEUAZW3X.cjs.map → chunk-SCGE6DCE.cjs.map} +1 -1
- package/dist/heading.cjs +3 -2
- package/dist/heading.js +2 -1
- package/dist/index.cjs +26 -25
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +5 -4
- package/dist/json-editor.cjs +13 -13
- package/dist/json-editor.js +2 -2
- package/docs/Card.md +170 -20
- package/package.json +1 -1
- package/dist/Card-BZ5F6-wd.d.cts +0 -50
- package/dist/Card-BZ5F6-wd.d.ts +0 -50
- package/dist/chunk-5DQ2XUJI.cjs +0 -173
- package/dist/chunk-5DQ2XUJI.cjs.map +0 -1
- package/dist/chunk-ZIDBI6JX.js +0 -167
- package/dist/chunk-ZIDBI6JX.js.map +0 -1
package/dist/chunk-5DQ2XUJI.cjs
DELETED
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
|
|
7
|
-
var CardHeader = react.forwardRef(
|
|
8
|
-
({ className, children, ...props }, ref) => {
|
|
9
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10
|
-
"div",
|
|
11
|
-
{
|
|
12
|
-
ref,
|
|
13
|
-
"data-react-fancy-card-header": "",
|
|
14
|
-
className: chunkZU5Q77OT_cjs.cn(
|
|
15
|
-
"border-b border-zinc-200 dark:border-zinc-700",
|
|
16
|
-
className
|
|
17
|
-
),
|
|
18
|
-
...props,
|
|
19
|
-
children
|
|
20
|
-
}
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
);
|
|
24
|
-
CardHeader.displayName = "CardHeader";
|
|
25
|
-
var CardBody = react.forwardRef(
|
|
26
|
-
({ className, children, ...props }, ref) => {
|
|
27
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
28
|
-
"div",
|
|
29
|
-
{
|
|
30
|
-
ref,
|
|
31
|
-
"data-react-fancy-card-body": "",
|
|
32
|
-
className: chunkZU5Q77OT_cjs.cn(className),
|
|
33
|
-
...props,
|
|
34
|
-
children
|
|
35
|
-
}
|
|
36
|
-
);
|
|
37
|
-
}
|
|
38
|
-
);
|
|
39
|
-
CardBody.displayName = "CardBody";
|
|
40
|
-
var CardFooter = react.forwardRef(
|
|
41
|
-
({ className, children, ...props }, ref) => {
|
|
42
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
43
|
-
"div",
|
|
44
|
-
{
|
|
45
|
-
ref,
|
|
46
|
-
"data-react-fancy-card-footer": "",
|
|
47
|
-
className: chunkZU5Q77OT_cjs.cn(
|
|
48
|
-
"border-t border-zinc-200 dark:border-zinc-700",
|
|
49
|
-
className
|
|
50
|
-
),
|
|
51
|
-
...props,
|
|
52
|
-
children
|
|
53
|
-
}
|
|
54
|
-
);
|
|
55
|
-
}
|
|
56
|
-
);
|
|
57
|
-
CardFooter.displayName = "CardFooter";
|
|
58
|
-
var CardMedia = react.forwardRef(
|
|
59
|
-
({
|
|
60
|
-
src,
|
|
61
|
-
alt = "",
|
|
62
|
-
ratio = "16/9",
|
|
63
|
-
height,
|
|
64
|
-
background,
|
|
65
|
-
objectPosition = "center",
|
|
66
|
-
loading = "lazy",
|
|
67
|
-
topLeft,
|
|
68
|
-
topRight,
|
|
69
|
-
bottomLeft,
|
|
70
|
-
bottomRight,
|
|
71
|
-
className,
|
|
72
|
-
style,
|
|
73
|
-
children,
|
|
74
|
-
...props
|
|
75
|
-
}, ref) => {
|
|
76
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
77
|
-
"div",
|
|
78
|
-
{
|
|
79
|
-
ref,
|
|
80
|
-
"data-react-fancy-card-media": "",
|
|
81
|
-
className: chunkZU5Q77OT_cjs.cn(
|
|
82
|
-
"relative overflow-hidden rounded-t-lg",
|
|
83
|
-
// Card's `padding` prop pads EVERY direct child
|
|
84
|
-
// (`[&>*]:px-4 …`), which would inset the media and break the
|
|
85
|
-
// flush-to-the-edge look every caller wants. `!` wins regardless of
|
|
86
|
-
// stylesheet order, which plain `p-0` would not.
|
|
87
|
-
"!px-0 !py-0",
|
|
88
|
-
className
|
|
89
|
-
),
|
|
90
|
-
style: {
|
|
91
|
-
...height === void 0 ? { aspectRatio: ratio } : { height },
|
|
92
|
-
...background ? { background } : null,
|
|
93
|
-
...style
|
|
94
|
-
},
|
|
95
|
-
...props,
|
|
96
|
-
children: [
|
|
97
|
-
src ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
98
|
-
"img",
|
|
99
|
-
{
|
|
100
|
-
src,
|
|
101
|
-
alt,
|
|
102
|
-
loading,
|
|
103
|
-
className: "absolute inset-0 h-full w-full object-cover",
|
|
104
|
-
style: { objectPosition }
|
|
105
|
-
}
|
|
106
|
-
) : null,
|
|
107
|
-
children,
|
|
108
|
-
topLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 top-2 z-10", children: topLeft }) : null,
|
|
109
|
-
topRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 top-2 z-10", children: topRight }) : null,
|
|
110
|
-
bottomLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-2 left-2 z-10", children: bottomLeft }) : null,
|
|
111
|
-
bottomRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-2 right-2 z-10", children: bottomRight }) : null
|
|
112
|
-
]
|
|
113
|
-
}
|
|
114
|
-
);
|
|
115
|
-
}
|
|
116
|
-
);
|
|
117
|
-
CardMedia.displayName = "CardMedia";
|
|
118
|
-
var variantClasses = {
|
|
119
|
-
outlined: "border border-zinc-200 dark:border-zinc-700",
|
|
120
|
-
elevated: "shadow-md border border-zinc-100 dark:border-zinc-800",
|
|
121
|
-
flat: "bg-zinc-50 dark:bg-zinc-800/50"
|
|
122
|
-
};
|
|
123
|
-
var paddingClasses = {
|
|
124
|
-
none: "",
|
|
125
|
-
sm: "[&>*]:px-3 [&>*]:py-2",
|
|
126
|
-
md: "[&>*]:px-4 [&>*]:py-3",
|
|
127
|
-
lg: "[&>*]:px-6 [&>*]:py-4"
|
|
128
|
-
};
|
|
129
|
-
var CardRoot = react.forwardRef(
|
|
130
|
-
({
|
|
131
|
-
variant = "outlined",
|
|
132
|
-
padding = "md",
|
|
133
|
-
interactive = false,
|
|
134
|
-
className,
|
|
135
|
-
children,
|
|
136
|
-
...props
|
|
137
|
-
}, ref) => {
|
|
138
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
139
|
-
"div",
|
|
140
|
-
{
|
|
141
|
-
ref,
|
|
142
|
-
"data-react-fancy-card": "",
|
|
143
|
-
className: chunkZU5Q77OT_cjs.cn(
|
|
144
|
-
"rounded-lg bg-white dark:bg-zinc-900",
|
|
145
|
-
variantClasses[variant],
|
|
146
|
-
// `overflow-hidden` is part of `interactive` rather than always-on:
|
|
147
|
-
// clipping unconditionally would cut off popovers and dropdowns that
|
|
148
|
-
// legitimately overflow a static card.
|
|
149
|
-
interactive && "overflow-hidden transition hover:-translate-y-0.5 hover:shadow-lg hover:border-zinc-300 dark:hover:border-zinc-600",
|
|
150
|
-
paddingClasses[padding],
|
|
151
|
-
className
|
|
152
|
-
),
|
|
153
|
-
...props,
|
|
154
|
-
children
|
|
155
|
-
}
|
|
156
|
-
);
|
|
157
|
-
}
|
|
158
|
-
);
|
|
159
|
-
CardRoot.displayName = "Card";
|
|
160
|
-
var Card = Object.assign(CardRoot, {
|
|
161
|
-
Media: CardMedia,
|
|
162
|
-
Header: CardHeader,
|
|
163
|
-
Body: CardBody,
|
|
164
|
-
Footer: CardFooter
|
|
165
|
-
});
|
|
166
|
-
|
|
167
|
-
exports.Card = Card;
|
|
168
|
-
exports.CardBody = CardBody;
|
|
169
|
-
exports.CardFooter = CardFooter;
|
|
170
|
-
exports.CardHeader = CardHeader;
|
|
171
|
-
exports.CardMedia = CardMedia;
|
|
172
|
-
//# sourceMappingURL=chunk-5DQ2XUJI.cjs.map
|
|
173
|
-
//# sourceMappingURL=chunk-5DQ2XUJI.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
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"]}
|
package/dist/chunk-ZIDBI6JX.js
DELETED
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
import { cn } from './chunk-MMW2JGKZ.js';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
-
|
|
5
|
-
var CardHeader = forwardRef(
|
|
6
|
-
({ className, children, ...props }, ref) => {
|
|
7
|
-
return /* @__PURE__ */ jsx(
|
|
8
|
-
"div",
|
|
9
|
-
{
|
|
10
|
-
ref,
|
|
11
|
-
"data-react-fancy-card-header": "",
|
|
12
|
-
className: cn(
|
|
13
|
-
"border-b border-zinc-200 dark:border-zinc-700",
|
|
14
|
-
className
|
|
15
|
-
),
|
|
16
|
-
...props,
|
|
17
|
-
children
|
|
18
|
-
}
|
|
19
|
-
);
|
|
20
|
-
}
|
|
21
|
-
);
|
|
22
|
-
CardHeader.displayName = "CardHeader";
|
|
23
|
-
var CardBody = forwardRef(
|
|
24
|
-
({ className, children, ...props }, ref) => {
|
|
25
|
-
return /* @__PURE__ */ jsx(
|
|
26
|
-
"div",
|
|
27
|
-
{
|
|
28
|
-
ref,
|
|
29
|
-
"data-react-fancy-card-body": "",
|
|
30
|
-
className: cn(className),
|
|
31
|
-
...props,
|
|
32
|
-
children
|
|
33
|
-
}
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
);
|
|
37
|
-
CardBody.displayName = "CardBody";
|
|
38
|
-
var CardFooter = forwardRef(
|
|
39
|
-
({ className, children, ...props }, ref) => {
|
|
40
|
-
return /* @__PURE__ */ jsx(
|
|
41
|
-
"div",
|
|
42
|
-
{
|
|
43
|
-
ref,
|
|
44
|
-
"data-react-fancy-card-footer": "",
|
|
45
|
-
className: cn(
|
|
46
|
-
"border-t border-zinc-200 dark:border-zinc-700",
|
|
47
|
-
className
|
|
48
|
-
),
|
|
49
|
-
...props,
|
|
50
|
-
children
|
|
51
|
-
}
|
|
52
|
-
);
|
|
53
|
-
}
|
|
54
|
-
);
|
|
55
|
-
CardFooter.displayName = "CardFooter";
|
|
56
|
-
var CardMedia = forwardRef(
|
|
57
|
-
({
|
|
58
|
-
src,
|
|
59
|
-
alt = "",
|
|
60
|
-
ratio = "16/9",
|
|
61
|
-
height,
|
|
62
|
-
background,
|
|
63
|
-
objectPosition = "center",
|
|
64
|
-
loading = "lazy",
|
|
65
|
-
topLeft,
|
|
66
|
-
topRight,
|
|
67
|
-
bottomLeft,
|
|
68
|
-
bottomRight,
|
|
69
|
-
className,
|
|
70
|
-
style,
|
|
71
|
-
children,
|
|
72
|
-
...props
|
|
73
|
-
}, ref) => {
|
|
74
|
-
return /* @__PURE__ */ jsxs(
|
|
75
|
-
"div",
|
|
76
|
-
{
|
|
77
|
-
ref,
|
|
78
|
-
"data-react-fancy-card-media": "",
|
|
79
|
-
className: cn(
|
|
80
|
-
"relative overflow-hidden rounded-t-lg",
|
|
81
|
-
// Card's `padding` prop pads EVERY direct child
|
|
82
|
-
// (`[&>*]:px-4 …`), which would inset the media and break the
|
|
83
|
-
// flush-to-the-edge look every caller wants. `!` wins regardless of
|
|
84
|
-
// stylesheet order, which plain `p-0` would not.
|
|
85
|
-
"!px-0 !py-0",
|
|
86
|
-
className
|
|
87
|
-
),
|
|
88
|
-
style: {
|
|
89
|
-
...height === void 0 ? { aspectRatio: ratio } : { height },
|
|
90
|
-
...background ? { background } : null,
|
|
91
|
-
...style
|
|
92
|
-
},
|
|
93
|
-
...props,
|
|
94
|
-
children: [
|
|
95
|
-
src ? /* @__PURE__ */ jsx(
|
|
96
|
-
"img",
|
|
97
|
-
{
|
|
98
|
-
src,
|
|
99
|
-
alt,
|
|
100
|
-
loading,
|
|
101
|
-
className: "absolute inset-0 h-full w-full object-cover",
|
|
102
|
-
style: { objectPosition }
|
|
103
|
-
}
|
|
104
|
-
) : null,
|
|
105
|
-
children,
|
|
106
|
-
topLeft ? /* @__PURE__ */ jsx("span", { className: "absolute left-2 top-2 z-10", children: topLeft }) : null,
|
|
107
|
-
topRight ? /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-2 z-10", children: topRight }) : null,
|
|
108
|
-
bottomLeft ? /* @__PURE__ */ jsx("span", { className: "absolute bottom-2 left-2 z-10", children: bottomLeft }) : null,
|
|
109
|
-
bottomRight ? /* @__PURE__ */ jsx("span", { className: "absolute bottom-2 right-2 z-10", children: bottomRight }) : null
|
|
110
|
-
]
|
|
111
|
-
}
|
|
112
|
-
);
|
|
113
|
-
}
|
|
114
|
-
);
|
|
115
|
-
CardMedia.displayName = "CardMedia";
|
|
116
|
-
var variantClasses = {
|
|
117
|
-
outlined: "border border-zinc-200 dark:border-zinc-700",
|
|
118
|
-
elevated: "shadow-md border border-zinc-100 dark:border-zinc-800",
|
|
119
|
-
flat: "bg-zinc-50 dark:bg-zinc-800/50"
|
|
120
|
-
};
|
|
121
|
-
var paddingClasses = {
|
|
122
|
-
none: "",
|
|
123
|
-
sm: "[&>*]:px-3 [&>*]:py-2",
|
|
124
|
-
md: "[&>*]:px-4 [&>*]:py-3",
|
|
125
|
-
lg: "[&>*]:px-6 [&>*]:py-4"
|
|
126
|
-
};
|
|
127
|
-
var CardRoot = forwardRef(
|
|
128
|
-
({
|
|
129
|
-
variant = "outlined",
|
|
130
|
-
padding = "md",
|
|
131
|
-
interactive = false,
|
|
132
|
-
className,
|
|
133
|
-
children,
|
|
134
|
-
...props
|
|
135
|
-
}, ref) => {
|
|
136
|
-
return /* @__PURE__ */ jsx(
|
|
137
|
-
"div",
|
|
138
|
-
{
|
|
139
|
-
ref,
|
|
140
|
-
"data-react-fancy-card": "",
|
|
141
|
-
className: cn(
|
|
142
|
-
"rounded-lg bg-white dark:bg-zinc-900",
|
|
143
|
-
variantClasses[variant],
|
|
144
|
-
// `overflow-hidden` is part of `interactive` rather than always-on:
|
|
145
|
-
// clipping unconditionally would cut off popovers and dropdowns that
|
|
146
|
-
// legitimately overflow a static card.
|
|
147
|
-
interactive && "overflow-hidden transition hover:-translate-y-0.5 hover:shadow-lg hover:border-zinc-300 dark:hover:border-zinc-600",
|
|
148
|
-
paddingClasses[padding],
|
|
149
|
-
className
|
|
150
|
-
),
|
|
151
|
-
...props,
|
|
152
|
-
children
|
|
153
|
-
}
|
|
154
|
-
);
|
|
155
|
-
}
|
|
156
|
-
);
|
|
157
|
-
CardRoot.displayName = "Card";
|
|
158
|
-
var Card = Object.assign(CardRoot, {
|
|
159
|
-
Media: CardMedia,
|
|
160
|
-
Header: CardHeader,
|
|
161
|
-
Body: CardBody,
|
|
162
|
-
Footer: CardFooter
|
|
163
|
-
});
|
|
164
|
-
|
|
165
|
-
export { Card, CardBody, CardFooter, CardHeader, CardMedia };
|
|
166
|
-
//# sourceMappingURL=chunk-ZIDBI6JX.js.map
|
|
167
|
-
//# sourceMappingURL=chunk-ZIDBI6JX.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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-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"]}
|