@yamada-ui/card 1.0.41-next-20241005220055 → 1.0.41-next-20241008193728
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/card.d.mts +4 -4
- package/dist/card.d.ts +4 -4
- package/dist/card.js +5 -5
- package/dist/card.js.map +1 -1
- package/dist/card.mjs +1 -1
- package/dist/{chunk-B466N32Z.mjs → chunk-JH35ISXQ.mjs} +7 -7
- package/dist/chunk-JH35ISXQ.mjs.map +1 -0
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +3 -3
- package/dist/chunk-B466N32Z.mjs.map +0 -1
package/dist/card.d.mts
CHANGED
|
@@ -2,6 +2,10 @@ import * as _yamada_ui_core from '@yamada-ui/core';
|
|
|
2
2
|
import { HTMLUIProps, ThemeProps, CSSUIObject } from '@yamada-ui/core';
|
|
3
3
|
|
|
4
4
|
interface CardOptions {
|
|
5
|
+
/**
|
|
6
|
+
* The CSS `align-items` property.
|
|
7
|
+
*/
|
|
8
|
+
align?: CSSUIObject["alignItems"];
|
|
5
9
|
/**
|
|
6
10
|
* The CSS `flex-direction` property.
|
|
7
11
|
*/
|
|
@@ -10,10 +14,6 @@ interface CardOptions {
|
|
|
10
14
|
* The CSS `justify-content` property.
|
|
11
15
|
*/
|
|
12
16
|
justify?: CSSUIObject["justifyContent"];
|
|
13
|
-
/**
|
|
14
|
-
* The CSS `align-items` property.
|
|
15
|
-
*/
|
|
16
|
-
align?: CSSUIObject["alignItems"];
|
|
17
17
|
}
|
|
18
18
|
interface CardProps extends Omit<HTMLUIProps<"article">, "direction">, ThemeProps<"Card">, CardOptions {
|
|
19
19
|
}
|
package/dist/card.d.ts
CHANGED
|
@@ -2,6 +2,10 @@ import * as _yamada_ui_core from '@yamada-ui/core';
|
|
|
2
2
|
import { HTMLUIProps, ThemeProps, CSSUIObject } from '@yamada-ui/core';
|
|
3
3
|
|
|
4
4
|
interface CardOptions {
|
|
5
|
+
/**
|
|
6
|
+
* The CSS `align-items` property.
|
|
7
|
+
*/
|
|
8
|
+
align?: CSSUIObject["alignItems"];
|
|
5
9
|
/**
|
|
6
10
|
* The CSS `flex-direction` property.
|
|
7
11
|
*/
|
|
@@ -10,10 +14,6 @@ interface CardOptions {
|
|
|
10
14
|
* The CSS `justify-content` property.
|
|
11
15
|
*/
|
|
12
16
|
justify?: CSSUIObject["justifyContent"];
|
|
13
|
-
/**
|
|
14
|
-
* The CSS `align-items` property.
|
|
15
|
-
*/
|
|
16
|
-
align?: CSSUIObject["alignItems"];
|
|
17
17
|
}
|
|
18
18
|
interface CardProps extends Omit<HTMLUIProps<"article">, "direction">, ThemeProps<"Card">, CardOptions {
|
|
19
19
|
}
|
package/dist/card.js
CHANGED
|
@@ -38,16 +38,16 @@ var Card = (0, import_core.forwardRef)((props, ref) => {
|
|
|
38
38
|
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Card", props);
|
|
39
39
|
const {
|
|
40
40
|
className,
|
|
41
|
+
align: alignItems,
|
|
41
42
|
direction: flexDirection = "column",
|
|
42
43
|
justify: justifyContent,
|
|
43
|
-
align: alignItems,
|
|
44
44
|
...rest
|
|
45
45
|
} = (0, import_core.omitThemeProps)(mergedProps);
|
|
46
46
|
const css = {
|
|
47
|
+
alignItems,
|
|
47
48
|
display: "flex",
|
|
48
49
|
flexDirection,
|
|
49
50
|
justifyContent,
|
|
50
|
-
alignItems,
|
|
51
51
|
wordWrap: "break-word",
|
|
52
52
|
...styles.container
|
|
53
53
|
};
|
|
@@ -67,9 +67,9 @@ var CardHeader = (0, import_core.forwardRef)(
|
|
|
67
67
|
({ className, ...rest }, ref) => {
|
|
68
68
|
const styles = useCard();
|
|
69
69
|
const css = {
|
|
70
|
+
alignItems: "center",
|
|
70
71
|
display: "flex",
|
|
71
72
|
justifyContent: "flex-start",
|
|
72
|
-
alignItems: "center",
|
|
73
73
|
...styles.header
|
|
74
74
|
};
|
|
75
75
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -89,9 +89,9 @@ var CardBody = (0, import_core.forwardRef)(
|
|
|
89
89
|
({ className, ...rest }, ref) => {
|
|
90
90
|
const styles = useCard();
|
|
91
91
|
const css = {
|
|
92
|
+
alignItems: "flex-start",
|
|
92
93
|
display: "flex",
|
|
93
94
|
flexDirection: "column",
|
|
94
|
-
alignItems: "flex-start",
|
|
95
95
|
...styles.body
|
|
96
96
|
};
|
|
97
97
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -111,9 +111,9 @@ var CardFooter = (0, import_core.forwardRef)(
|
|
|
111
111
|
({ className, ...rest }, ref) => {
|
|
112
112
|
const styles = useCard();
|
|
113
113
|
const css = {
|
|
114
|
+
alignItems: "center",
|
|
114
115
|
display: "flex",
|
|
115
116
|
justifyContent: "flex-start",
|
|
116
|
-
alignItems: "center",
|
|
117
117
|
...styles.footer
|
|
118
118
|
};
|
|
119
119
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
package/dist/card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/card.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n
|
|
1
|
+
{"version":3,"sources":["../src/card.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\n\nconst [CardProvider, useCard] = createContext<{\n [key: string]: CSSUIObject | undefined\n}>({\n name: `CardContext`,\n errorMessage: `useCard returned is 'undefined'. Seems you forgot to wrap the components in \"<Card />\" `,\n})\n\ninterface CardOptions {\n /**\n * The CSS `align-items` property.\n */\n align?: CSSUIObject[\"alignItems\"]\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * The CSS `justify-content` property.\n */\n justify?: CSSUIObject[\"justifyContent\"]\n}\n\nexport interface CardProps\n extends Omit<HTMLUIProps<\"article\">, \"direction\">,\n ThemeProps<\"Card\">,\n CardOptions {}\n\n/**\n * `Card` is a component that groups and displays related information. By default, it renders a `article` element.\n *\n * @see Docs https://yamada-ui.com/components/data-display/card\n */\nexport const Card = forwardRef<CardProps, \"article\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Card\", props)\n const {\n className,\n align: alignItems,\n direction: flexDirection = \"column\",\n justify: justifyContent,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n alignItems,\n display: \"flex\",\n flexDirection,\n justifyContent,\n wordWrap: \"break-word\",\n ...styles.container,\n }\n\n return (\n <CardProvider value={styles}>\n <ui.article\n ref={ref}\n className={cx(\"ui-card\", className)}\n __css={css}\n {...rest}\n />\n </CardProvider>\n )\n})\n\nCard.displayName = \"Card\"\nCard.__ui__ = \"Card\"\n\nexport interface CardHeaderProps extends HTMLUIProps<\"header\"> {}\n\nexport const CardHeader = forwardRef<CardHeaderProps, \"header\">(\n ({ className, ...rest }, ref) => {\n const styles = useCard()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n ...styles.header,\n }\n\n return (\n <ui.header\n ref={ref}\n className={cx(\"ui-card__header\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCardHeader.displayName = \"CardHeader\"\nCardHeader.__ui__ = \"CardHeader\"\n\nexport interface CardBodyProps extends HTMLUIProps {}\n\nexport const CardBody = forwardRef<CardBodyProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const styles = useCard()\n\n const css: CSSUIObject = {\n alignItems: \"flex-start\",\n display: \"flex\",\n flexDirection: \"column\",\n ...styles.body,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-card__body\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCardBody.displayName = \"CardBody\"\nCardBody.__ui__ = \"CardBody\"\n\nexport interface CardFooterProps extends HTMLUIProps<\"footer\"> {}\n\nexport const CardFooter = forwardRef<CardFooterProps, \"footer\">(\n ({ className, ...rest }, ref) => {\n const styles = useCard()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n ...styles.footer,\n }\n\n return (\n <ui.footer\n ref={ref}\n className={cx(\"ui-card__footer\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCardFooter.displayName = \"CardFooter\"\nCardFooter.__ui__ = \"CardFooter\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAKO;AACP,mBAAkC;AAuD5B;AArDN,IAAM,CAAC,cAAc,OAAO,QAAI,4BAE7B;AAAA,EACD,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA2BM,IAAM,WAAO,wBAAiC,CAAC,OAAO,QAAQ;AACnE,QAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,QAAQ,KAAK;AAClE,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,WAAW,gBAAgB;AAAA,IAC3B,SAAS;AAAA,IACT,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAE9B,QAAM,MAAmB;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG,OAAO;AAAA,EACZ;AAEA,SACE,4CAAC,gBAAa,OAAO,QACnB;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;AAIP,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,QAAQ;AAEvB,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;AAIb,IAAM,eAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,QAAQ;AAEvB,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AACvB,SAAS,SAAS;AAIX,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,QAAQ;AAEvB,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;","names":[]}
|
package/dist/card.mjs
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
// src/card.tsx
|
|
4
4
|
import {
|
|
5
|
-
ui,
|
|
6
5
|
forwardRef,
|
|
7
6
|
omitThemeProps,
|
|
7
|
+
ui,
|
|
8
8
|
useComponentMultiStyle
|
|
9
9
|
} from "@yamada-ui/core";
|
|
10
10
|
import { createContext, cx } from "@yamada-ui/utils";
|
|
@@ -17,16 +17,16 @@ var Card = forwardRef((props, ref) => {
|
|
|
17
17
|
const [styles, mergedProps] = useComponentMultiStyle("Card", props);
|
|
18
18
|
const {
|
|
19
19
|
className,
|
|
20
|
+
align: alignItems,
|
|
20
21
|
direction: flexDirection = "column",
|
|
21
22
|
justify: justifyContent,
|
|
22
|
-
align: alignItems,
|
|
23
23
|
...rest
|
|
24
24
|
} = omitThemeProps(mergedProps);
|
|
25
25
|
const css = {
|
|
26
|
+
alignItems,
|
|
26
27
|
display: "flex",
|
|
27
28
|
flexDirection,
|
|
28
29
|
justifyContent,
|
|
29
|
-
alignItems,
|
|
30
30
|
wordWrap: "break-word",
|
|
31
31
|
...styles.container
|
|
32
32
|
};
|
|
@@ -46,9 +46,9 @@ var CardHeader = forwardRef(
|
|
|
46
46
|
({ className, ...rest }, ref) => {
|
|
47
47
|
const styles = useCard();
|
|
48
48
|
const css = {
|
|
49
|
+
alignItems: "center",
|
|
49
50
|
display: "flex",
|
|
50
51
|
justifyContent: "flex-start",
|
|
51
|
-
alignItems: "center",
|
|
52
52
|
...styles.header
|
|
53
53
|
};
|
|
54
54
|
return /* @__PURE__ */ jsx(
|
|
@@ -68,9 +68,9 @@ var CardBody = forwardRef(
|
|
|
68
68
|
({ className, ...rest }, ref) => {
|
|
69
69
|
const styles = useCard();
|
|
70
70
|
const css = {
|
|
71
|
+
alignItems: "flex-start",
|
|
71
72
|
display: "flex",
|
|
72
73
|
flexDirection: "column",
|
|
73
|
-
alignItems: "flex-start",
|
|
74
74
|
...styles.body
|
|
75
75
|
};
|
|
76
76
|
return /* @__PURE__ */ jsx(
|
|
@@ -90,9 +90,9 @@ var CardFooter = forwardRef(
|
|
|
90
90
|
({ className, ...rest }, ref) => {
|
|
91
91
|
const styles = useCard();
|
|
92
92
|
const css = {
|
|
93
|
+
alignItems: "center",
|
|
93
94
|
display: "flex",
|
|
94
95
|
justifyContent: "flex-start",
|
|
95
|
-
alignItems: "center",
|
|
96
96
|
...styles.footer
|
|
97
97
|
};
|
|
98
98
|
return /* @__PURE__ */ jsx(
|
|
@@ -115,4 +115,4 @@ export {
|
|
|
115
115
|
CardBody,
|
|
116
116
|
CardFooter
|
|
117
117
|
};
|
|
118
|
-
//# sourceMappingURL=chunk-
|
|
118
|
+
//# sourceMappingURL=chunk-JH35ISXQ.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/card.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\n\nconst [CardProvider, useCard] = createContext<{\n [key: string]: CSSUIObject | undefined\n}>({\n name: `CardContext`,\n errorMessage: `useCard returned is 'undefined'. Seems you forgot to wrap the components in \"<Card />\" `,\n})\n\ninterface CardOptions {\n /**\n * The CSS `align-items` property.\n */\n align?: CSSUIObject[\"alignItems\"]\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * The CSS `justify-content` property.\n */\n justify?: CSSUIObject[\"justifyContent\"]\n}\n\nexport interface CardProps\n extends Omit<HTMLUIProps<\"article\">, \"direction\">,\n ThemeProps<\"Card\">,\n CardOptions {}\n\n/**\n * `Card` is a component that groups and displays related information. By default, it renders a `article` element.\n *\n * @see Docs https://yamada-ui.com/components/data-display/card\n */\nexport const Card = forwardRef<CardProps, \"article\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Card\", props)\n const {\n className,\n align: alignItems,\n direction: flexDirection = \"column\",\n justify: justifyContent,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n alignItems,\n display: \"flex\",\n flexDirection,\n justifyContent,\n wordWrap: \"break-word\",\n ...styles.container,\n }\n\n return (\n <CardProvider value={styles}>\n <ui.article\n ref={ref}\n className={cx(\"ui-card\", className)}\n __css={css}\n {...rest}\n />\n </CardProvider>\n )\n})\n\nCard.displayName = \"Card\"\nCard.__ui__ = \"Card\"\n\nexport interface CardHeaderProps extends HTMLUIProps<\"header\"> {}\n\nexport const CardHeader = forwardRef<CardHeaderProps, \"header\">(\n ({ className, ...rest }, ref) => {\n const styles = useCard()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n ...styles.header,\n }\n\n return (\n <ui.header\n ref={ref}\n className={cx(\"ui-card__header\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCardHeader.displayName = \"CardHeader\"\nCardHeader.__ui__ = \"CardHeader\"\n\nexport interface CardBodyProps extends HTMLUIProps {}\n\nexport const CardBody = forwardRef<CardBodyProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const styles = useCard()\n\n const css: CSSUIObject = {\n alignItems: \"flex-start\",\n display: \"flex\",\n flexDirection: \"column\",\n ...styles.body,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-card__body\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCardBody.displayName = \"CardBody\"\nCardBody.__ui__ = \"CardBody\"\n\nexport interface CardFooterProps extends HTMLUIProps<\"footer\"> {}\n\nexport const CardFooter = forwardRef<CardFooterProps, \"footer\">(\n ({ className, ...rest }, ref) => {\n const styles = useCard()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n ...styles.footer,\n }\n\n return (\n <ui.footer\n ref={ref}\n className={cx(\"ui-card__footer\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCardFooter.displayName = \"CardFooter\"\nCardFooter.__ui__ = \"CardFooter\"\n"],"mappings":";;;AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe,UAAU;AAuD5B;AArDN,IAAM,CAAC,cAAc,OAAO,IAAI,cAE7B;AAAA,EACD,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA2BM,IAAM,OAAO,WAAiC,CAAC,OAAO,QAAQ;AACnE,QAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,QAAQ,KAAK;AAClE,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,WAAW,gBAAgB;AAAA,IAC3B,SAAS;AAAA,IACT,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAE9B,QAAM,MAAmB;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG,OAAO;AAAA,EACZ;AAEA,SACE,oBAAC,gBAAa,OAAO,QACnB;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;AAIP,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,QAAQ;AAEvB,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;AAIb,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,QAAQ;AAEvB,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AACvB,SAAS,SAAS;AAIX,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,QAAQ;AAEvB,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -40,16 +40,16 @@ var Card = (0, import_core.forwardRef)((props, ref) => {
|
|
|
40
40
|
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Card", props);
|
|
41
41
|
const {
|
|
42
42
|
className,
|
|
43
|
+
align: alignItems,
|
|
43
44
|
direction: flexDirection = "column",
|
|
44
45
|
justify: justifyContent,
|
|
45
|
-
align: alignItems,
|
|
46
46
|
...rest
|
|
47
47
|
} = (0, import_core.omitThemeProps)(mergedProps);
|
|
48
48
|
const css = {
|
|
49
|
+
alignItems,
|
|
49
50
|
display: "flex",
|
|
50
51
|
flexDirection,
|
|
51
52
|
justifyContent,
|
|
52
|
-
alignItems,
|
|
53
53
|
wordWrap: "break-word",
|
|
54
54
|
...styles.container
|
|
55
55
|
};
|
|
@@ -69,9 +69,9 @@ var CardHeader = (0, import_core.forwardRef)(
|
|
|
69
69
|
({ className, ...rest }, ref) => {
|
|
70
70
|
const styles = useCard();
|
|
71
71
|
const css = {
|
|
72
|
+
alignItems: "center",
|
|
72
73
|
display: "flex",
|
|
73
74
|
justifyContent: "flex-start",
|
|
74
|
-
alignItems: "center",
|
|
75
75
|
...styles.header
|
|
76
76
|
};
|
|
77
77
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -91,9 +91,9 @@ var CardBody = (0, import_core.forwardRef)(
|
|
|
91
91
|
({ className, ...rest }, ref) => {
|
|
92
92
|
const styles = useCard();
|
|
93
93
|
const css = {
|
|
94
|
+
alignItems: "flex-start",
|
|
94
95
|
display: "flex",
|
|
95
96
|
flexDirection: "column",
|
|
96
|
-
alignItems: "flex-start",
|
|
97
97
|
...styles.body
|
|
98
98
|
};
|
|
99
99
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -113,9 +113,9 @@ var CardFooter = (0, import_core.forwardRef)(
|
|
|
113
113
|
({ className, ...rest }, ref) => {
|
|
114
114
|
const styles = useCard();
|
|
115
115
|
const css = {
|
|
116
|
+
alignItems: "center",
|
|
116
117
|
display: "flex",
|
|
117
118
|
justifyContent: "flex-start",
|
|
118
|
-
alignItems: "center",
|
|
119
119
|
...styles.footer
|
|
120
120
|
};
|
|
121
121
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/card.tsx"],"sourcesContent":["export { Card,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/card.tsx"],"sourcesContent":["export { Card, CardBody, CardFooter, CardHeader } from \"./card\"\nexport type {\n CardBodyProps,\n CardFooterProps,\n CardHeaderProps,\n CardProps,\n} from \"./card\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\n\nconst [CardProvider, useCard] = createContext<{\n [key: string]: CSSUIObject | undefined\n}>({\n name: `CardContext`,\n errorMessage: `useCard returned is 'undefined'. Seems you forgot to wrap the components in \"<Card />\" `,\n})\n\ninterface CardOptions {\n /**\n * The CSS `align-items` property.\n */\n align?: CSSUIObject[\"alignItems\"]\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * The CSS `justify-content` property.\n */\n justify?: CSSUIObject[\"justifyContent\"]\n}\n\nexport interface CardProps\n extends Omit<HTMLUIProps<\"article\">, \"direction\">,\n ThemeProps<\"Card\">,\n CardOptions {}\n\n/**\n * `Card` is a component that groups and displays related information. By default, it renders a `article` element.\n *\n * @see Docs https://yamada-ui.com/components/data-display/card\n */\nexport const Card = forwardRef<CardProps, \"article\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Card\", props)\n const {\n className,\n align: alignItems,\n direction: flexDirection = \"column\",\n justify: justifyContent,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n alignItems,\n display: \"flex\",\n flexDirection,\n justifyContent,\n wordWrap: \"break-word\",\n ...styles.container,\n }\n\n return (\n <CardProvider value={styles}>\n <ui.article\n ref={ref}\n className={cx(\"ui-card\", className)}\n __css={css}\n {...rest}\n />\n </CardProvider>\n )\n})\n\nCard.displayName = \"Card\"\nCard.__ui__ = \"Card\"\n\nexport interface CardHeaderProps extends HTMLUIProps<\"header\"> {}\n\nexport const CardHeader = forwardRef<CardHeaderProps, \"header\">(\n ({ className, ...rest }, ref) => {\n const styles = useCard()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n ...styles.header,\n }\n\n return (\n <ui.header\n ref={ref}\n className={cx(\"ui-card__header\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCardHeader.displayName = \"CardHeader\"\nCardHeader.__ui__ = \"CardHeader\"\n\nexport interface CardBodyProps extends HTMLUIProps {}\n\nexport const CardBody = forwardRef<CardBodyProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const styles = useCard()\n\n const css: CSSUIObject = {\n alignItems: \"flex-start\",\n display: \"flex\",\n flexDirection: \"column\",\n ...styles.body,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-card__body\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCardBody.displayName = \"CardBody\"\nCardBody.__ui__ = \"CardBody\"\n\nexport interface CardFooterProps extends HTMLUIProps<\"footer\"> {}\n\nexport const CardFooter = forwardRef<CardFooterProps, \"footer\">(\n ({ className, ...rest }, ref) => {\n const styles = useCard()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n ...styles.footer,\n }\n\n return (\n <ui.footer\n ref={ref}\n className={cx(\"ui-card__footer\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCardFooter.displayName = \"CardFooter\"\nCardFooter.__ui__ = \"CardFooter\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,kBAKO;AACP,mBAAkC;AAuD5B;AArDN,IAAM,CAAC,cAAc,OAAO,QAAI,4BAE7B;AAAA,EACD,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA2BM,IAAM,WAAO,wBAAiC,CAAC,OAAO,QAAQ;AACnE,QAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,QAAQ,KAAK;AAClE,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,WAAW,gBAAgB;AAAA,IAC3B,SAAS;AAAA,IACT,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAE9B,QAAM,MAAmB;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG,OAAO;AAAA,EACZ;AAEA,SACE,4CAAC,gBAAa,OAAO,QACnB;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;AAIP,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,QAAQ;AAEvB,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;AAIb,IAAM,eAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,QAAQ;AAEvB,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AACvB,SAAS,SAAS;AAIX,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,QAAQ;AAEvB,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;","names":[]}
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/card",
|
|
3
|
-
"version": "1.0.41-next-
|
|
3
|
+
"version": "1.0.41-next-20241008193728",
|
|
4
4
|
"description": "Yamada UI card component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@yamada-ui/core": "1.15.2-next-
|
|
40
|
-
"@yamada-ui/utils": "1.5.
|
|
39
|
+
"@yamada-ui/core": "1.15.2-next-20241008193728",
|
|
40
|
+
"@yamada-ui/utils": "1.5.3-next-20241008193728"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"clean-package": "2.2.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/card.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\n\nconst [CardProvider, useCard] = createContext<{ [key: string]: CSSUIObject }>({\n name: `CardContext`,\n errorMessage: `useCard returned is 'undefined'. Seems you forgot to wrap the components in \"<Card />\" `,\n})\n\ninterface CardOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * The CSS `justify-content` property.\n */\n justify?: CSSUIObject[\"justifyContent\"]\n /**\n * The CSS `align-items` property.\n */\n align?: CSSUIObject[\"alignItems\"]\n}\n\nexport interface CardProps\n extends Omit<HTMLUIProps<\"article\">, \"direction\">,\n ThemeProps<\"Card\">,\n CardOptions {}\n\n/**\n * `Card` is a component that groups and displays related information. By default, it renders a `article` element.\n *\n * @see Docs https://yamada-ui.com/components/data-display/card\n */\nexport const Card = forwardRef<CardProps, \"article\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Card\", props)\n const {\n className,\n direction: flexDirection = \"column\",\n justify: justifyContent,\n align: alignItems,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection,\n justifyContent,\n alignItems,\n wordWrap: \"break-word\",\n ...styles.container,\n }\n\n return (\n <CardProvider value={styles}>\n <ui.article\n ref={ref}\n className={cx(\"ui-card\", className)}\n __css={css}\n {...rest}\n />\n </CardProvider>\n )\n})\n\nCard.displayName = \"Card\"\nCard.__ui__ = \"Card\"\n\nexport interface CardHeaderProps extends HTMLUIProps<\"header\"> {}\n\nexport const CardHeader = forwardRef<CardHeaderProps, \"header\">(\n ({ className, ...rest }, ref) => {\n const styles = useCard()\n\n const css: CSSUIObject = {\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n ...styles.header,\n }\n\n return (\n <ui.header\n ref={ref}\n className={cx(\"ui-card__header\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCardHeader.displayName = \"CardHeader\"\nCardHeader.__ui__ = \"CardHeader\"\n\nexport interface CardBodyProps extends HTMLUIProps {}\n\nexport const CardBody = forwardRef<CardBodyProps, \"div\">(\n ({ className, ...rest }, ref) => {\n const styles = useCard()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n ...styles.body,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-card__body\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCardBody.displayName = \"CardBody\"\nCardBody.__ui__ = \"CardBody\"\n\nexport interface CardFooterProps extends HTMLUIProps<\"footer\"> {}\n\nexport const CardFooter = forwardRef<CardFooterProps, \"footer\">(\n ({ className, ...rest }, ref) => {\n const styles = useCard()\n\n const css: CSSUIObject = {\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n ...styles.footer,\n }\n\n return (\n <ui.footer\n ref={ref}\n className={cx(\"ui-card__footer\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nCardFooter.displayName = \"CardFooter\"\nCardFooter.__ui__ = \"CardFooter\"\n"],"mappings":";;;AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe,UAAU;AAqD5B;AAnDN,IAAM,CAAC,cAAc,OAAO,IAAI,cAA8C;AAAA,EAC5E,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA2BM,IAAM,OAAO,WAAiC,CAAC,OAAO,QAAQ;AACnE,QAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,QAAQ,KAAK;AAClE,QAAM;AAAA,IACJ;AAAA,IACA,WAAW,gBAAgB;AAAA,IAC3B,SAAS;AAAA,IACT,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAE9B,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG,OAAO;AAAA,EACZ;AAEA,SACE,oBAAC,gBAAa,OAAO,QACnB;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;AAIP,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,QAAQ;AAEvB,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;AAIb,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,QAAQ;AAEvB,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AACvB,SAAS,SAAS;AAIX,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,SAAS,QAAQ;AAEvB,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;","names":[]}
|