@yamada-ui/card 1.0.38 → 1.0.39-dev-20240917033401
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/card.d.mts +11 -7
- package/dist/card.d.ts +11 -7
- package/dist/card.js +1 -1
- package/dist/card.js.map +1 -1
- package/dist/card.mjs +1 -1
- package/dist/{chunk-F3TZ4KBM.mjs → chunk-4YITJI3O.mjs} +3 -3
- package/dist/chunk-4YITJI3O.mjs.map +1 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +3 -3
- package/dist/chunk-F3TZ4KBM.mjs.map +0 -1
package/dist/card.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
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
5
|
/**
|
|
6
6
|
* The CSS `flex-direction` property.
|
|
7
7
|
*/
|
|
@@ -14,19 +14,23 @@ type CardOptions = {
|
|
|
14
14
|
* The CSS `align-items` property.
|
|
15
15
|
*/
|
|
16
16
|
align?: CSSUIObject["alignItems"];
|
|
17
|
-
}
|
|
18
|
-
|
|
17
|
+
}
|
|
18
|
+
interface CardProps extends Omit<HTMLUIProps<"article">, "direction">, ThemeProps<"Card">, CardOptions {
|
|
19
|
+
}
|
|
19
20
|
/**
|
|
20
21
|
* `Card` is a component that groups and displays related information. By default, it renders a `article` element.
|
|
21
22
|
*
|
|
22
23
|
* @see Docs https://yamada-ui.com/components/data-display/card
|
|
23
24
|
*/
|
|
24
25
|
declare const Card: _yamada_ui_core.Component<"article", CardProps>;
|
|
25
|
-
|
|
26
|
+
interface CardHeaderProps extends HTMLUIProps<"header"> {
|
|
27
|
+
}
|
|
26
28
|
declare const CardHeader: _yamada_ui_core.Component<"header", CardHeaderProps>;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
29
|
+
interface CardBodyProps extends HTMLUIProps {
|
|
30
|
+
}
|
|
31
|
+
declare const CardBody: _yamada_ui_core.Component<"div", CardBodyProps>;
|
|
32
|
+
interface CardFooterProps extends HTMLUIProps<"footer"> {
|
|
33
|
+
}
|
|
30
34
|
declare const CardFooter: _yamada_ui_core.Component<"footer", CardFooterProps>;
|
|
31
35
|
|
|
32
36
|
export { Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps };
|
package/dist/card.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
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
5
|
/**
|
|
6
6
|
* The CSS `flex-direction` property.
|
|
7
7
|
*/
|
|
@@ -14,19 +14,23 @@ type CardOptions = {
|
|
|
14
14
|
* The CSS `align-items` property.
|
|
15
15
|
*/
|
|
16
16
|
align?: CSSUIObject["alignItems"];
|
|
17
|
-
}
|
|
18
|
-
|
|
17
|
+
}
|
|
18
|
+
interface CardProps extends Omit<HTMLUIProps<"article">, "direction">, ThemeProps<"Card">, CardOptions {
|
|
19
|
+
}
|
|
19
20
|
/**
|
|
20
21
|
* `Card` is a component that groups and displays related information. By default, it renders a `article` element.
|
|
21
22
|
*
|
|
22
23
|
* @see Docs https://yamada-ui.com/components/data-display/card
|
|
23
24
|
*/
|
|
24
25
|
declare const Card: _yamada_ui_core.Component<"article", CardProps>;
|
|
25
|
-
|
|
26
|
+
interface CardHeaderProps extends HTMLUIProps<"header"> {
|
|
27
|
+
}
|
|
26
28
|
declare const CardHeader: _yamada_ui_core.Component<"header", CardHeaderProps>;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
29
|
+
interface CardBodyProps extends HTMLUIProps {
|
|
30
|
+
}
|
|
31
|
+
declare const CardBody: _yamada_ui_core.Component<"div", CardBodyProps>;
|
|
32
|
+
interface CardFooterProps extends HTMLUIProps<"footer"> {
|
|
33
|
+
}
|
|
30
34
|
declare const CardFooter: _yamada_ui_core.Component<"footer", CardFooterProps>;
|
|
31
35
|
|
|
32
36
|
export { Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps };
|
package/dist/card.js
CHANGED
|
@@ -35,7 +35,7 @@ var [CardProvider, useCard] = (0, import_utils.createContext)({
|
|
|
35
35
|
errorMessage: `useCard returned is 'undefined'. Seems you forgot to wrap the components in "<Card />" `
|
|
36
36
|
});
|
|
37
37
|
var Card = (0, import_core.forwardRef)((props, ref) => {
|
|
38
|
-
const [styles, mergedProps] = (0, import_core.
|
|
38
|
+
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Card", props);
|
|
39
39
|
const {
|
|
40
40
|
className,
|
|
41
41
|
direction: flexDirection = "column",
|
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 ui,\n forwardRef,\n omitThemeProps,\n
|
|
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\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\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\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAKO;AACP,mBAAkC;AAqD5B;AAnDN,IAAM,CAAC,cAAc,OAAO,QAAI,4BAA8C;AAAA,EAC5E,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,WAAW,gBAAgB;AAAA,IAC3B,SAAS;AAAA,IACT,OAAO;AAAA,IACP,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAE9B,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT;AAAA,IACA;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;AAIM,IAAM,iBAAa;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,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAIO,IAAM,eAAW;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,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAIO,IAAM,iBAAa;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,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}
|
package/dist/card.mjs
CHANGED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
ui,
|
|
6
6
|
forwardRef,
|
|
7
7
|
omitThemeProps,
|
|
8
|
-
|
|
8
|
+
useComponentMultiStyle
|
|
9
9
|
} from "@yamada-ui/core";
|
|
10
10
|
import { createContext, cx } from "@yamada-ui/utils";
|
|
11
11
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -14,7 +14,7 @@ var [CardProvider, useCard] = createContext({
|
|
|
14
14
|
errorMessage: `useCard returned is 'undefined'. Seems you forgot to wrap the components in "<Card />" `
|
|
15
15
|
});
|
|
16
16
|
var Card = forwardRef((props, ref) => {
|
|
17
|
-
const [styles, mergedProps] =
|
|
17
|
+
const [styles, mergedProps] = useComponentMultiStyle("Card", props);
|
|
18
18
|
const {
|
|
19
19
|
className,
|
|
20
20
|
direction: flexDirection = "column",
|
|
@@ -107,4 +107,4 @@ export {
|
|
|
107
107
|
CardBody,
|
|
108
108
|
CardFooter
|
|
109
109
|
};
|
|
110
|
-
//# sourceMappingURL=chunk-
|
|
110
|
+
//# sourceMappingURL=chunk-4YITJI3O.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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\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\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\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"],"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;AAIM,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;AAIO,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;AAIO,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;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -37,7 +37,7 @@ var [CardProvider, useCard] = (0, import_utils.createContext)({
|
|
|
37
37
|
errorMessage: `useCard returned is 'undefined'. Seems you forgot to wrap the components in "<Card />" `
|
|
38
38
|
});
|
|
39
39
|
var Card = (0, import_core.forwardRef)((props, ref) => {
|
|
40
|
-
const [styles, mergedProps] = (0, import_core.
|
|
40
|
+
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Card", props);
|
|
41
41
|
const {
|
|
42
42
|
className,
|
|
43
43
|
direction: flexDirection = "column",
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/card.tsx"],"sourcesContent":["export { Card, CardHeader, CardBody, CardFooter } from \"./card\"\nexport type {\n CardProps,\n CardHeaderProps,\n CardBodyProps,\n CardFooterProps,\n} from \"./card\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/card.tsx"],"sourcesContent":["export { Card, CardHeader, CardBody, CardFooter } from \"./card\"\nexport type {\n CardProps,\n CardHeaderProps,\n CardBodyProps,\n CardFooterProps,\n} from \"./card\"\n","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\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\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\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,kBAKO;AACP,mBAAkC;AAqD5B;AAnDN,IAAM,CAAC,cAAc,OAAO,QAAI,4BAA8C;AAAA,EAC5E,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,WAAW,gBAAgB;AAAA,IAC3B,SAAS;AAAA,IACT,OAAO;AAAA,IACP,GAAG;AAAA,EACL,QAAI,4BAAe,WAAW;AAE9B,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,IACT;AAAA,IACA;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;AAIM,IAAM,iBAAa;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,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAIO,IAAM,eAAW;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,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAIO,IAAM,iBAAa;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,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","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.
|
|
3
|
+
"version": "1.0.39-dev-20240917033401",
|
|
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.14.
|
|
40
|
-
"@yamada-ui/utils": "1.5.
|
|
39
|
+
"@yamada-ui/core": "1.14.1-dev-20240917033401",
|
|
40
|
+
"@yamada-ui/utils": "1.5.1-dev-20240917033401"
|
|
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 useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\n\nconst [CardProvider, useCard] = createContext<Record<string, CSSUIObject>>({\n name: `CardContext`,\n errorMessage: `useCard returned is 'undefined'. Seems you forgot to wrap the components in \"<Card />\" `,\n})\n\ntype 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 type CardProps = 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] = useMultiComponentStyle(\"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\nexport type CardHeaderProps = 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\nexport type CardBodyProps = HTMLUIProps<\"main\">\n\nexport const CardBody = forwardRef<CardBodyProps, \"main\">(\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\nexport type CardFooterProps = 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"],"mappings":";;;AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe,UAAU;AAoD5B;AAlDN,IAAM,CAAC,cAAc,OAAO,IAAI,cAA2C;AAAA,EACzE,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA0BM,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;AAIM,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;AAIO,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;AAIO,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;","names":[]}
|