@postenbring/hedwig-react 1.5.0 → 2.1.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/button/button.d.ts +13 -7
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +5 -3
- package/dist/button/button.js.map +1 -1
- package/dist/button/button.mjs +1 -1
- package/dist/button/index.js +5 -3
- package/dist/button/index.js.map +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/button-list/button-list.d.ts +19 -0
- package/dist/button-list/button-list.d.ts.map +1 -0
- package/dist/button-list/button-list.js +78 -0
- package/dist/button-list/button-list.js.map +1 -0
- package/dist/button-list/button-list.mjs +8 -0
- package/dist/button-list/button-list.mjs.map +1 -0
- package/dist/button-list/index.d.ts +3 -0
- package/dist/button-list/index.d.ts.map +1 -0
- package/dist/button-list/index.js +80 -0
- package/dist/button-list/index.js.map +1 -0
- package/dist/button-list/index.mjs +9 -0
- package/dist/button-list/index.mjs.map +1 -0
- package/dist/card/card.d.ts +10 -0
- package/dist/card/card.d.ts.map +1 -1
- package/dist/card/card.js +6 -2
- package/dist/card/card.js.map +1 -1
- package/dist/card/card.mjs +1 -1
- package/dist/card/index.js +6 -2
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +1 -1
- package/dist/{chunk-6DWIJEHQ.mjs → chunk-444SCBJD.mjs} +3 -3
- package/dist/chunk-444SCBJD.mjs.map +1 -0
- package/dist/{chunk-FUIKSOJF.mjs → chunk-6SVLMQUW.mjs} +4 -4
- package/dist/{chunk-BQR4ZRFT.mjs → chunk-CFAPQFEC.mjs} +5 -5
- package/dist/{chunk-6VKQ6IRG.mjs → chunk-GXIKHXWC.mjs} +1 -1
- package/dist/chunk-GXIKHXWC.mjs.map +1 -0
- package/dist/{chunk-NE6PE5W7.mjs → chunk-LDZIJR2D.mjs} +7 -3
- package/dist/chunk-LDZIJR2D.mjs.map +1 -0
- package/dist/chunk-ME746XCZ.mjs +31 -0
- package/dist/chunk-ME746XCZ.mjs.map +1 -0
- package/dist/{chunk-V5X3ZS23.mjs → chunk-OHDHIRAW.mjs} +5 -3
- package/dist/chunk-OHDHIRAW.mjs.map +1 -0
- package/dist/{chunk-AYCHNAU7.mjs → chunk-TYCGAA35.mjs} +6 -4
- package/dist/chunk-TYCGAA35.mjs.map +1 -0
- package/dist/chunk-Y6NOEN7R.mjs +1 -0
- package/dist/chunk-Y6NOEN7R.mjs.map +1 -0
- package/dist/{chunk-TC5PD4TA.mjs → chunk-YQMTDQSQ.mjs} +4 -4
- package/dist/footer/footer.js +6 -4
- package/dist/footer/footer.js.map +1 -1
- package/dist/footer/footer.mjs +2 -2
- package/dist/footer/index.js +6 -4
- package/dist/footer/index.js.map +1 -1
- package/dist/footer/index.mjs +2 -2
- package/dist/form/error-summary/error-summary.js +4 -2
- package/dist/form/error-summary/error-summary.js.map +1 -1
- package/dist/form/error-summary/error-summary.mjs +4 -4
- package/dist/form/error-summary/index.js +4 -2
- package/dist/form/error-summary/index.js.map +1 -1
- package/dist/form/error-summary/index.mjs +4 -4
- package/dist/form/index.js +4 -2
- package/dist/form/index.js.map +1 -1
- package/dist/form/index.mjs +18 -18
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +475 -444
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +64 -59
- package/dist/layout/grid/grid.mjs +2 -2
- package/dist/layout/grid/index.mjs +2 -2
- package/dist/layout/index.mjs +3 -3
- package/dist/layout/stack/index.mjs +2 -2
- package/dist/layout/stack/stack.mjs +2 -2
- package/dist/link/index.js +4 -2
- package/dist/link/index.js.map +1 -1
- package/dist/link/index.mjs +1 -1
- package/dist/link/link.d.ts +9 -3
- package/dist/link/link.d.ts.map +1 -1
- package/dist/link/link.js +4 -2
- package/dist/link/link.js.map +1 -1
- package/dist/link/link.mjs +1 -1
- package/dist/modal/index.js.map +1 -1
- package/dist/modal/index.mjs +1 -1
- package/dist/modal/modal.d.ts +1 -1
- package/dist/modal/modal.js.map +1 -1
- package/dist/modal/modal.mjs +1 -1
- package/package.json +6 -6
- package/src/button/button.tsx +19 -10
- package/src/button-list/button-list.stories.tsx +27 -0
- package/src/button-list/button-list.tsx +37 -0
- package/src/button-list/index.tsx +3 -0
- package/src/card/card.tsx +16 -2
- package/src/footer/footer.tsx +1 -1
- package/src/index.ts +1 -0
- package/src/link/link.tsx +18 -5
- package/src/modal/modal.stories.tsx +1 -1
- package/src/modal/modal.tsx +1 -1
- package/dist/chunk-6DWIJEHQ.mjs.map +0 -1
- package/dist/chunk-6VKQ6IRG.mjs.map +0 -1
- package/dist/chunk-AYCHNAU7.mjs.map +0 -1
- package/dist/chunk-NE6PE5W7.mjs.map +0 -1
- package/dist/chunk-V5X3ZS23.mjs.map +0 -1
- /package/dist/{chunk-FUIKSOJF.mjs.map → chunk-6SVLMQUW.mjs.map} +0 -0
- /package/dist/{chunk-BQR4ZRFT.mjs.map → chunk-CFAPQFEC.mjs.map} +0 -0
- /package/dist/{chunk-TC5PD4TA.mjs.map → chunk-YQMTDQSQ.mjs.map} +0 -0
package/dist/button/button.d.ts
CHANGED
|
@@ -1,25 +1,30 @@
|
|
|
1
1
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
2
2
|
/**
|
|
3
3
|
* The height, font size and padding of the button
|
|
4
|
+
*
|
|
5
|
+
* @default "large"
|
|
4
6
|
*/
|
|
5
|
-
size?: "small" | "
|
|
7
|
+
size?: "small" | "large";
|
|
6
8
|
/**
|
|
7
9
|
* The background and fill of the button
|
|
8
10
|
*
|
|
9
11
|
* @default "primary"
|
|
10
12
|
*/
|
|
11
|
-
variant?: "primary" | "secondary" | "
|
|
13
|
+
variant?: "primary" | "secondary" | "tertiary" | "inverted";
|
|
12
14
|
/**
|
|
13
15
|
* Make the button use 100% width available.
|
|
14
16
|
* Using the "mobile" it only stretch to full width on smaller screens
|
|
15
17
|
*/
|
|
16
18
|
fullWidth?: boolean | "mobile";
|
|
17
19
|
/**
|
|
18
|
-
*
|
|
20
|
+
* Specify that there is an icon in the button.
|
|
21
|
+
* `icon`: There is only an icon in the button.
|
|
22
|
+
* `icon="leading"`: There is an icon before the text.
|
|
23
|
+
* `icon="trailing"`: There is an icon after the text.
|
|
19
24
|
*
|
|
20
|
-
*
|
|
25
|
+
* @default false
|
|
21
26
|
*/
|
|
22
|
-
icon?: boolean;
|
|
27
|
+
icon?: boolean | "leading" | "trailing";
|
|
23
28
|
/**
|
|
24
29
|
* Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
25
30
|
*
|
|
@@ -33,8 +38,9 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
33
38
|
* @example
|
|
34
39
|
* <Button variant="primary">Primary</Button>
|
|
35
40
|
* <Button variant="secondary" size="large">Secondary</Button>
|
|
36
|
-
* <Button variant="
|
|
37
|
-
* <Button variant="
|
|
41
|
+
* <Button variant="inverted">Inverted</Button>
|
|
42
|
+
* <Button variant="tertiary" fullWidth="mobile">Tertiary</Button>
|
|
43
|
+
* <Button icon="leading"><LeadingIcon />Leading icon</Button>
|
|
38
44
|
*
|
|
39
45
|
* @example
|
|
40
46
|
* // If used for navigation use the `asChild` prop with a anchor element as a child.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAEzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;IAE5D;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE/B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAExC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM,2GAsClB,CAAC"}
|
package/dist/button/button.js
CHANGED
|
@@ -62,9 +62,9 @@ var Button = (0, import_react.forwardRef)(
|
|
|
62
62
|
asChild,
|
|
63
63
|
children,
|
|
64
64
|
variant = "primary",
|
|
65
|
-
size = "
|
|
65
|
+
size = "large",
|
|
66
66
|
fullWidth = false,
|
|
67
|
-
icon,
|
|
67
|
+
icon = false,
|
|
68
68
|
className
|
|
69
69
|
} = _b, rest = __objRest(_b, [
|
|
70
70
|
"asChild",
|
|
@@ -86,7 +86,9 @@ var Button = (0, import_react.forwardRef)(
|
|
|
86
86
|
{
|
|
87
87
|
"hds-button--full": fullWidth === true,
|
|
88
88
|
"hds-button--mobile-full": fullWidth === "mobile",
|
|
89
|
-
"hds-button--icon
|
|
89
|
+
"hds-button--only-icon": icon === true,
|
|
90
|
+
"hds-button--leading-icon": icon === "leading",
|
|
91
|
+
"hds-button--trailing-icon": icon === "trailing"
|
|
90
92
|
},
|
|
91
93
|
className
|
|
92
94
|
),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * The height, font size and padding of the button\n */\n size?: \"small\" | \"
|
|
1
|
+
{"version":3,"sources":["../../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * The height, font size and padding of the button\n *\n * @default \"large\"\n */\n size?: \"small\" | \"large\";\n\n /**\n * The background and fill of the button\n *\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"inverted\";\n\n /**\n * Make the button use 100% width available.\n * Using the \"mobile\" it only stretch to full width on smaller screens\n */\n fullWidth?: boolean | \"mobile\";\n\n /**\n * Specify that there is an icon in the button.\n * `icon`: There is only an icon in the button.\n * `icon=\"leading\"`: There is an icon before the text.\n * `icon=\"trailing\"`: There is an icon after the text.\n *\n * @default false\n */\n icon?: boolean | \"leading\" | \"trailing\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * Button component\n *\n * @example\n * <Button variant=\"primary\">Primary</Button>\n * <Button variant=\"secondary\" size=\"large\">Secondary</Button>\n * <Button variant=\"inverted\">Inverted</Button>\n * <Button variant=\"tertiary\" fullWidth=\"mobile\">Tertiary</Button>\n * <Button icon=\"leading\"><LeadingIcon />Leading icon</Button>\n *\n * @example\n * // If used for navigation use the `asChild` prop with a anchor element as a child.\n * <Button asChild><a href=\"/home\">Home</a></Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild,\n children,\n variant = \"primary\",\n size = \"large\",\n fullWidth = false,\n icon = false,\n className,\n ...rest\n },\n ref,\n ) => {\n const Component = asChild ? Slot : \"button\";\n\n return (\n <Component\n className={clsx(\n \"hds-button\",\n `hds-button--${size}`,\n `hds-button--${variant}`,\n {\n \"hds-button--full\": fullWidth === true,\n \"hds-button--mobile-full\": fullWidth === \"mobile\",\n \"hds-button--only-icon\": icon === true,\n \"hds-button--leading-icon\": icon === \"leading\",\n \"hds-button--trailing-icon\": icon === \"trailing\",\n },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAC3B,6BAAqB;AACrB,wBAAqB;AAwEf;AAjBC,IAAM,aAAS;AAAA,EACpB,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,IAlEN,IA2DI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,yBAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI;AAAA,UACnB,eAAe,OAAO;AAAA,UACtB;AAAA,YACE,oBAAoB,cAAc;AAAA,YAClC,2BAA2B,cAAc;AAAA,YACzC,yBAAyB,SAAS;AAAA,YAClC,4BAA4B,SAAS;AAAA,YACrC,6BAA6B,SAAS;AAAA,UACxC;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAfL;AAAA,QAiBE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}
|
package/dist/button/button.mjs
CHANGED
package/dist/button/index.js
CHANGED
|
@@ -64,9 +64,9 @@ var Button = (0, import_react.forwardRef)(
|
|
|
64
64
|
asChild,
|
|
65
65
|
children,
|
|
66
66
|
variant = "primary",
|
|
67
|
-
size = "
|
|
67
|
+
size = "large",
|
|
68
68
|
fullWidth = false,
|
|
69
|
-
icon,
|
|
69
|
+
icon = false,
|
|
70
70
|
className
|
|
71
71
|
} = _b, rest = __objRest(_b, [
|
|
72
72
|
"asChild",
|
|
@@ -88,7 +88,9 @@ var Button = (0, import_react.forwardRef)(
|
|
|
88
88
|
{
|
|
89
89
|
"hds-button--full": fullWidth === true,
|
|
90
90
|
"hds-button--mobile-full": fullWidth === "mobile",
|
|
91
|
-
"hds-button--icon
|
|
91
|
+
"hds-button--only-icon": icon === true,
|
|
92
|
+
"hds-button--leading-icon": icon === "leading",
|
|
93
|
+
"hds-button--trailing-icon": icon === "trailing"
|
|
92
94
|
},
|
|
93
95
|
className
|
|
94
96
|
),
|
package/dist/button/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/button/index.tsx","../../src/button/button.tsx"],"sourcesContent":["export { Button } from \"./button\";\n\nexport type * from \"./button\";\n","import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * The height, font size and padding of the button\n */\n size?: \"small\" | \"
|
|
1
|
+
{"version":3,"sources":["../../src/button/index.tsx","../../src/button/button.tsx"],"sourcesContent":["export { Button } from \"./button\";\n\nexport type * from \"./button\";\n","import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * The height, font size and padding of the button\n *\n * @default \"large\"\n */\n size?: \"small\" | \"large\";\n\n /**\n * The background and fill of the button\n *\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"inverted\";\n\n /**\n * Make the button use 100% width available.\n * Using the \"mobile\" it only stretch to full width on smaller screens\n */\n fullWidth?: boolean | \"mobile\";\n\n /**\n * Specify that there is an icon in the button.\n * `icon`: There is only an icon in the button.\n * `icon=\"leading\"`: There is an icon before the text.\n * `icon=\"trailing\"`: There is an icon after the text.\n *\n * @default false\n */\n icon?: boolean | \"leading\" | \"trailing\";\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\n/**\n * Button component\n *\n * @example\n * <Button variant=\"primary\">Primary</Button>\n * <Button variant=\"secondary\" size=\"large\">Secondary</Button>\n * <Button variant=\"inverted\">Inverted</Button>\n * <Button variant=\"tertiary\" fullWidth=\"mobile\">Tertiary</Button>\n * <Button icon=\"leading\"><LeadingIcon />Leading icon</Button>\n *\n * @example\n * // If used for navigation use the `asChild` prop with a anchor element as a child.\n * <Button asChild><a href=\"/home\">Home</a></Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild,\n children,\n variant = \"primary\",\n size = \"large\",\n fullWidth = false,\n icon = false,\n className,\n ...rest\n },\n ref,\n ) => {\n const Component = asChild ? Slot : \"button\";\n\n return (\n <Component\n className={clsx(\n \"hds-button\",\n `hds-button--${size}`,\n `hds-button--${variant}`,\n {\n \"hds-button--full\": fullWidth === true,\n \"hds-button--mobile-full\": fullWidth === \"mobile\",\n \"hds-button--only-icon\": icon === true,\n \"hds-button--leading-icon\": icon === \"leading\",\n \"hds-button--trailing-icon\": icon === \"trailing\",\n },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2B;AAC3B,6BAAqB;AACrB,wBAAqB;AAwEf;AAjBC,IAAM,aAAS;AAAA,EACpB,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,IAlEN,IA2DI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,yBAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI;AAAA,UACnB,eAAe,OAAO;AAAA,UACtB;AAAA,YACE,oBAAoB,cAAc;AAAA,YAClC,2BAA2B,cAAc;AAAA,YACzC,yBAAyB,SAAS;AAAA,YAClC,4BAA4B,SAAS;AAAA,YACrC,6BAA6B,SAAS;AAAA,UACxC;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAfL;AAAA,QAiBE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}
|
package/dist/button/index.mjs
CHANGED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export interface ButtonListProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
2
|
+
/**
|
|
3
|
+
* The list type
|
|
4
|
+
*
|
|
5
|
+
* @default "default"
|
|
6
|
+
*/
|
|
7
|
+
variant?: "default" | "stretched";
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Button list component
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* <ButtonList variant="default">
|
|
14
|
+
* <Button variant="primary">Primary</Button>
|
|
15
|
+
* <Button variant="secondary">Secondary</Button>
|
|
16
|
+
* </ButtonList>
|
|
17
|
+
*/
|
|
18
|
+
export declare const ButtonList: import("react").ForwardRefExoticComponent<ButtonListProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
19
|
+
//# sourceMappingURL=button-list.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-list.d.ts","sourceRoot":"","sources":["../../src/button-list/button-list.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,4GActB,CAAC"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
+
var __spreadValues = (a, b) => {
|
|
12
|
+
for (var prop in b || (b = {}))
|
|
13
|
+
if (__hasOwnProp.call(b, prop))
|
|
14
|
+
__defNormalProp(a, prop, b[prop]);
|
|
15
|
+
if (__getOwnPropSymbols)
|
|
16
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
+
if (__propIsEnum.call(b, prop))
|
|
18
|
+
__defNormalProp(a, prop, b[prop]);
|
|
19
|
+
}
|
|
20
|
+
return a;
|
|
21
|
+
};
|
|
22
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
|
+
var __objRest = (source, exclude) => {
|
|
24
|
+
var target = {};
|
|
25
|
+
for (var prop in source)
|
|
26
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
27
|
+
target[prop] = source[prop];
|
|
28
|
+
if (source != null && __getOwnPropSymbols)
|
|
29
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
30
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
31
|
+
target[prop] = source[prop];
|
|
32
|
+
}
|
|
33
|
+
return target;
|
|
34
|
+
};
|
|
35
|
+
var __export = (target, all) => {
|
|
36
|
+
for (var name in all)
|
|
37
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
38
|
+
};
|
|
39
|
+
var __copyProps = (to, from, except, desc) => {
|
|
40
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
41
|
+
for (let key of __getOwnPropNames(from))
|
|
42
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
43
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
44
|
+
}
|
|
45
|
+
return to;
|
|
46
|
+
};
|
|
47
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
48
|
+
|
|
49
|
+
// src/button-list/button-list.tsx
|
|
50
|
+
var button_list_exports = {};
|
|
51
|
+
__export(button_list_exports, {
|
|
52
|
+
ButtonList: () => ButtonList
|
|
53
|
+
});
|
|
54
|
+
module.exports = __toCommonJS(button_list_exports);
|
|
55
|
+
var import_react = require("react");
|
|
56
|
+
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
57
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
58
|
+
var ButtonList = (0, import_react.forwardRef)(
|
|
59
|
+
(_a, ref) => {
|
|
60
|
+
var _b = _a, { variant = "default", className, children } = _b, rest = __objRest(_b, ["variant", "className", "children"]);
|
|
61
|
+
const Component = "div";
|
|
62
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
63
|
+
Component,
|
|
64
|
+
__spreadProps(__spreadValues({
|
|
65
|
+
className: (0, import_typed_classname.clsx)("hds-button-list", `hds-button-list--${variant}`, className),
|
|
66
|
+
ref
|
|
67
|
+
}, rest), {
|
|
68
|
+
children
|
|
69
|
+
})
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
ButtonList.displayName = "ButtonList";
|
|
74
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
75
|
+
0 && (module.exports = {
|
|
76
|
+
ButtonList
|
|
77
|
+
});
|
|
78
|
+
//# sourceMappingURL=button-list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/button-list/button-list.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface ButtonListProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * The list type\n *\n * @default \"default\"\n */\n variant?: \"default\" | \"stretched\";\n}\n\n/**\n * Button list component\n *\n * @example\n * <ButtonList variant=\"default\">\n * <Button variant=\"primary\">Primary</Button>\n * <Button variant=\"secondary\">Secondary</Button>\n * </ButtonList>\n */\nexport const ButtonList = forwardRef<HTMLDivElement, ButtonListProps>(\n ({ variant = \"default\", className, children, ...rest }, ref) => {\n const Component = \"div\";\n\n return (\n <Component\n className={clsx(\"hds-button-list\", `hds-button-list--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nButtonList.displayName = \"ButtonList\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAC3B,6BAAqB;AAyBf;AALC,IAAM,iBAAa;AAAA,EACxB,CAAC,IAAuD,QAAQ;AAA/D,iBAAE,YAAU,WAAW,WAAW,SAtBrC,IAsBG,IAA+C,iBAA/C,IAA+C,CAA7C,WAAqB,aAAW;AACjC,UAAM,YAAY;AAElB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,mBAAmB,oBAAoB,OAAO,IAAI,SAAsB;AAAA,QACxF;AAAA,SACI,OAHL;AAAA,QAKE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/button-list/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,mBAAmB,eAAe,CAAC"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
+
var __spreadValues = (a, b) => {
|
|
12
|
+
for (var prop in b || (b = {}))
|
|
13
|
+
if (__hasOwnProp.call(b, prop))
|
|
14
|
+
__defNormalProp(a, prop, b[prop]);
|
|
15
|
+
if (__getOwnPropSymbols)
|
|
16
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
+
if (__propIsEnum.call(b, prop))
|
|
18
|
+
__defNormalProp(a, prop, b[prop]);
|
|
19
|
+
}
|
|
20
|
+
return a;
|
|
21
|
+
};
|
|
22
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
|
+
var __objRest = (source, exclude) => {
|
|
24
|
+
var target = {};
|
|
25
|
+
for (var prop in source)
|
|
26
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
27
|
+
target[prop] = source[prop];
|
|
28
|
+
if (source != null && __getOwnPropSymbols)
|
|
29
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
30
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
31
|
+
target[prop] = source[prop];
|
|
32
|
+
}
|
|
33
|
+
return target;
|
|
34
|
+
};
|
|
35
|
+
var __export = (target, all) => {
|
|
36
|
+
for (var name in all)
|
|
37
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
38
|
+
};
|
|
39
|
+
var __copyProps = (to, from, except, desc) => {
|
|
40
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
41
|
+
for (let key of __getOwnPropNames(from))
|
|
42
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
43
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
44
|
+
}
|
|
45
|
+
return to;
|
|
46
|
+
};
|
|
47
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
48
|
+
|
|
49
|
+
// src/button-list/index.tsx
|
|
50
|
+
var button_list_exports = {};
|
|
51
|
+
__export(button_list_exports, {
|
|
52
|
+
ButtonList: () => ButtonList
|
|
53
|
+
});
|
|
54
|
+
module.exports = __toCommonJS(button_list_exports);
|
|
55
|
+
|
|
56
|
+
// src/button-list/button-list.tsx
|
|
57
|
+
var import_react = require("react");
|
|
58
|
+
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
59
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
60
|
+
var ButtonList = (0, import_react.forwardRef)(
|
|
61
|
+
(_a, ref) => {
|
|
62
|
+
var _b = _a, { variant = "default", className, children } = _b, rest = __objRest(_b, ["variant", "className", "children"]);
|
|
63
|
+
const Component = "div";
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
+
Component,
|
|
66
|
+
__spreadProps(__spreadValues({
|
|
67
|
+
className: (0, import_typed_classname.clsx)("hds-button-list", `hds-button-list--${variant}`, className),
|
|
68
|
+
ref
|
|
69
|
+
}, rest), {
|
|
70
|
+
children
|
|
71
|
+
})
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
ButtonList.displayName = "ButtonList";
|
|
76
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
77
|
+
0 && (module.exports = {
|
|
78
|
+
ButtonList
|
|
79
|
+
});
|
|
80
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/button-list/index.tsx","../../src/button-list/button-list.tsx"],"sourcesContent":["export { ButtonList } from \"./button-list\";\n\nexport type * from \"./button-list\";\n","import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface ButtonListProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * The list type\n *\n * @default \"default\"\n */\n variant?: \"default\" | \"stretched\";\n}\n\n/**\n * Button list component\n *\n * @example\n * <ButtonList variant=\"default\">\n * <Button variant=\"primary\">Primary</Button>\n * <Button variant=\"secondary\">Secondary</Button>\n * </ButtonList>\n */\nexport const ButtonList = forwardRef<HTMLDivElement, ButtonListProps>(\n ({ variant = \"default\", className, children, ...rest }, ref) => {\n const Component = \"div\";\n\n return (\n <Component\n className={clsx(\"hds-button-list\", `hds-button-list--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nButtonList.displayName = \"ButtonList\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2B;AAC3B,6BAAqB;AAyBf;AALC,IAAM,iBAAa;AAAA,EACxB,CAAC,IAAuD,QAAQ;AAA/D,iBAAE,YAAU,WAAW,WAAW,SAtBrC,IAsBG,IAA+C,iBAA/C,IAA+C,CAA7C,WAAqB,aAAW;AACjC,UAAM,YAAY;AAElB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,mBAAmB,oBAAoB,OAAO,IAAI,SAAsB;AAAA,QACxF;AAAA,SACI,OAHL;AAAA,QAKE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/card/card.d.ts
CHANGED
|
@@ -8,6 +8,16 @@ export interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageEl
|
|
|
8
8
|
* @default false
|
|
9
9
|
*/
|
|
10
10
|
asChild?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Define image scaling behavior when the image are varies in both width and height across different page breaks and sizes of the card.
|
|
13
|
+
* "crop": Image always fills the available space.
|
|
14
|
+
* If the aspect ratio doesn't match, then the top/bottom or left/right edges are cropped away.
|
|
15
|
+
* "scale": No cropping, image scales to the maximum size available and centers.
|
|
16
|
+
* If the aspect ratio doesn't match, then the background will show on the top/bottom or left/right sides of the image.
|
|
17
|
+
*
|
|
18
|
+
* @default "crop"
|
|
19
|
+
*/
|
|
20
|
+
variant?: "crop" | "scale";
|
|
11
21
|
}
|
|
12
22
|
export declare const CardMediaImg: import("react").ForwardRefExoticComponent<CardImageMediaProps & import("react").RefAttributes<HTMLImageElement>>;
|
|
13
23
|
export declare const CardBody: import("react").ForwardRefExoticComponent<CardBaseProps & import("react").RefAttributes<HTMLDivElement>>;
|
package/dist/card/card.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,eAAO,MAAM,SAAS,0GASrB,CAAC;AAGF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACpF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card/card.tsx"],"names":[],"mappings":"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"}
|
package/dist/card/card.js
CHANGED
|
@@ -76,12 +76,16 @@ var CardMedia = (0, import_react.forwardRef)(
|
|
|
76
76
|
CardMedia.displayName = "Card.Media";
|
|
77
77
|
var CardMediaImg = (0, import_react.forwardRef)(
|
|
78
78
|
(_a, ref) => {
|
|
79
|
-
var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
|
|
79
|
+
var _b = _a, { asChild, variant, className } = _b, rest = __objRest(_b, ["asChild", "variant", "className"]);
|
|
80
80
|
const Component = asChild ? import_react_slot.Slot : "img";
|
|
81
81
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
82
82
|
Component,
|
|
83
83
|
__spreadProps(__spreadValues({}, rest), {
|
|
84
|
-
className: (0, import_typed_classname.clsx)(
|
|
84
|
+
className: (0, import_typed_classname.clsx)(
|
|
85
|
+
"hds-card__media__img",
|
|
86
|
+
{ "hds-card__img__scale": variant === "scale" },
|
|
87
|
+
className
|
|
88
|
+
),
|
|
85
89
|
ref
|
|
86
90
|
})
|
|
87
91
|
);
|
package/dist/card/card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/card/card.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__media\", className as undefined)} ref={ref}>\n {children}\n </Component>\n );\n },\n);\nCardMedia.displayName = \"Card.Media\";\n\nexport interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"img\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__media__img\", className as undefined)}\n ref={ref}\n />\n );\n },\n);\nCardMediaImg.displayName = \"Card.MediaImg\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__body\", className as undefined)} ref={ref}>\n <div className={clsx(\"hds-card__centerbody\", className as undefined)}>{children}</div>\n </Component>\n );\n },\n);\nCardBody.displayName = \"Card.Body\";\n\nexport const CardBodyHeader = forwardRef<\n HTMLHeadingElement,\n CardBaseProps &\n (\n | {\n /**\n * Heading level of the card heading\n */\n as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n asChild?: never;\n }\n | {\n asChild: true;\n as?: never;\n }\n )\n>(({ as: Tag, asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n});\nCardBodyHeader.displayName = \"Card.BodyHeader\";\n\nexport const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-overline\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderOverline.displayName = \"Card.BodyHeaderOverline\";\n\nexport const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-title\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderTitle.displayName = \"Card.BodyHeaderTitle\";\n\nexport const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"p\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-description\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyDescription.displayName = \"Card.BodyDescription\";\n\nexport const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyAction.displayName = \"Card.BodyAction\";\n\nexport const CardBodyActionRow = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action-row\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyActionRow.displayName = \"Card.BodyActionRow\";\n\ninterface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n\n /**\n * Set direction of the arrow\n *\n * @default \"right\"\n */\n direction?: \"right\" | \"up-right\";\n}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n ({ asChild, className, direction, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__body-action-arrow\",\n { \"hds-card__body-action-arrow-up-right\": direction === \"up-right\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardBodyActionArrow.displayName = \"Card.BodyActionArrow\";\n\nexport interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport interface CardSlimAndMiniatureProps extends CardBaseProps {\n /**\n * Change the default rendered element for Card.\n */\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n /**\n * Allows for a horizontal variant for sizes above small.\n *\n * @default \"slim\"\n */\n variant?: \"slim\" | \"miniature\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n\n /* Only fullwidth or focus cards can have images to the left or right of the text: */\n imagePosition?: never;\n}\n\nexport interface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color?: \"darker\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport interface CardFullwidthProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"full-width\";\n color: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps;\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n (\n { as: Tag = \"section\", asChild, className, children, variant, color, imagePosition, ...rest },\n ref,\n ) => {\n const Component = asChild ? Slot : Tag;\n const effectiveColor = variant === \"focus\" && !color ? \"darker\" : color;\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card\",\n { \"hds-card--full-width\": variant === \"full-width\" },\n { \"hds-card--miniature\": variant === \"miniature\" },\n { \"hds-card--focus\": variant === \"focus\" },\n { \"hds-card--color-white\": effectiveColor === \"white\" },\n { \"hds-card--color-light-grey-fill\": effectiveColor === \"light-grey-fill\" },\n { \"hds-card--color-darker\": effectiveColor === \"darker\" },\n { \"hds-card--image-position-right\": imagePosition === \"right\" },\n className as undefined,\n )}\n ref={ref}\n >\n {variant === \"full-width\" ? (\n <div className={clsx(\"hds-card__layoutwrapper\", className as undefined)}>{children}</div>\n ) : (\n children\n )}\n </Component>\n );\n },\n) as CardType;\nCard.displayName = \"Card\";\n\nCard.Media = CardMedia;\nCard.MediaImg = CardMediaImg;\nCard.Body = CardBody;\nCard.BodyHeader = CardBodyHeader;\nCard.BodyHeaderOverline = CardBodyHeaderOverline;\nCard.BodyHeaderTitle = CardBodyHeaderTitle;\nCard.BodyDescription = CardBodyDescription;\nCard.BodyAction = CardBodyAction;\nCard.BodyActionRow = CardBodyActionRow;\nCard.BodyActionArrow = CardBodyActionArrow;\n\ntype CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {\n Media: typeof CardMedia;\n MediaImg: typeof CardMediaImg;\n Body: typeof CardBody;\n BodyHeader: typeof CardBodyHeader;\n BodyHeaderOverline: typeof CardBodyHeaderOverline;\n BodyHeaderTitle: typeof CardBodyHeaderTitle;\n BodyDescription: typeof CardBodyDescription;\n BodyAction: typeof CardBodyAction;\n BodyActionRow: typeof CardBodyActionRow;\n BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/card/card.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__media\", className as undefined)} ref={ref}>\n {children}\n </Component>\n );\n },\n);\nCardMedia.displayName = \"Card.Media\";\n\nexport interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * Define image scaling behavior when the image are varies in both width and height across different page breaks and sizes of the card.\n * \"crop\": Image always fills the available space.\n * If the aspect ratio doesn't match, then the top/bottom or left/right edges are cropped away.\n * \"scale\": No cropping, image scales to the maximum size available and centers.\n * If the aspect ratio doesn't match, then the background will show on the top/bottom or left/right sides of the image.\n *\n * @default \"crop\"\n */\n variant?: \"crop\" | \"scale\";\n}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n ({ asChild, variant, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"img\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__media__img\",\n { \"hds-card__img__scale\": variant === \"scale\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardMediaImg.displayName = \"Card.MediaImg\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component {...rest} className={clsx(\"hds-card__body\", className as undefined)} ref={ref}>\n <div className={clsx(\"hds-card__centerbody\", className as undefined)}>{children}</div>\n </Component>\n );\n },\n);\nCardBody.displayName = \"Card.Body\";\n\nexport const CardBodyHeader = forwardRef<\n HTMLHeadingElement,\n CardBaseProps &\n (\n | {\n /**\n * Heading level of the card heading\n */\n as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n asChild?: never;\n }\n | {\n asChild: true;\n as?: never;\n }\n )\n>(({ as: Tag, asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n});\nCardBodyHeader.displayName = \"Card.BodyHeader\";\n\nexport const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-overline\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderOverline.displayName = \"Card.BodyHeaderOverline\";\n\nexport const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-header-title\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyHeaderTitle.displayName = \"Card.BodyHeaderTitle\";\n\nexport const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"p\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-description\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyDescription.displayName = \"Card.BodyDescription\";\n\nexport const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyAction.displayName = \"Card.BodyAction\";\n\nexport const CardBodyActionRow = forwardRef<HTMLDivElement, CardBaseProps>(\n ({ asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : \"div\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action-row\", className as undefined)}\n ref={ref}\n >\n {children}\n </Component>\n );\n },\n);\nCardBodyActionRow.displayName = \"Card.BodyActionRow\";\n\ninterface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n\n /**\n * Set direction of the arrow\n *\n * @default \"right\"\n */\n direction?: \"right\" | \"up-right\";\n}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n ({ asChild, className, direction, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card__body-action-arrow\",\n { \"hds-card__body-action-arrow-up-right\": direction === \"up-right\" },\n className as undefined,\n )}\n ref={ref}\n />\n );\n },\n);\nCardBodyActionArrow.displayName = \"Card.BodyActionArrow\";\n\nexport interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n *\n * @default false\n */\n asChild?: boolean;\n}\n\nexport interface CardSlimAndMiniatureProps extends CardBaseProps {\n /**\n * Change the default rendered element for Card.\n */\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n /**\n * Allows for a horizontal variant for sizes above small.\n *\n * @default \"slim\"\n */\n variant?: \"slim\" | \"miniature\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n\n /* Only fullwidth or focus cards can have images to the left or right of the text: */\n imagePosition?: never;\n}\n\nexport interface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color?: \"darker\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport interface CardFullwidthProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"full-width\";\n color: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n /**\n * fullwidth or focus cards can have images to the left or right of the text.\n *\n * @default \"left\"\n * */\n imagePosition?: \"left\" | \"right\";\n}\n\nexport type CardProps = CardSlimAndMiniatureProps | CardFocusProps | CardFullwidthProps;\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n (\n { as: Tag = \"section\", asChild, className, children, variant, color, imagePosition, ...rest },\n ref,\n ) => {\n const Component = asChild ? Slot : Tag;\n const effectiveColor = variant === \"focus\" && !color ? \"darker\" : color;\n return (\n <Component\n {...rest}\n className={clsx(\n \"hds-card\",\n { \"hds-card--full-width\": variant === \"full-width\" },\n { \"hds-card--miniature\": variant === \"miniature\" },\n { \"hds-card--focus\": variant === \"focus\" },\n { \"hds-card--color-white\": effectiveColor === \"white\" },\n { \"hds-card--color-light-grey-fill\": effectiveColor === \"light-grey-fill\" },\n { \"hds-card--color-darker\": effectiveColor === \"darker\" },\n { \"hds-card--image-position-right\": imagePosition === \"right\" },\n className as undefined,\n )}\n ref={ref}\n >\n {variant === \"full-width\" ? (\n <div className={clsx(\"hds-card__layoutwrapper\", className as undefined)}>{children}</div>\n ) : (\n children\n )}\n </Component>\n );\n },\n) as CardType;\nCard.displayName = \"Card\";\n\nCard.Media = CardMedia;\nCard.MediaImg = CardMediaImg;\nCard.Body = CardBody;\nCard.BodyHeader = CardBodyHeader;\nCard.BodyHeaderOverline = CardBodyHeaderOverline;\nCard.BodyHeaderTitle = CardBodyHeaderTitle;\nCard.BodyDescription = CardBodyDescription;\nCard.BodyAction = CardBodyAction;\nCard.BodyActionRow = CardBodyActionRow;\nCard.BodyActionArrow = CardBodyActionArrow;\n\ntype CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {\n Media: typeof CardMedia;\n MediaImg: typeof CardMediaImg;\n Body: typeof CardBody;\n BodyHeader: typeof CardBodyHeader;\n BodyHeaderOverline: typeof CardBodyHeaderOverline;\n BodyHeaderTitle: typeof CardBodyHeaderTitle;\n BodyDescription: typeof CardBodyDescription;\n BodyAction: typeof CardBodyAction;\n BodyActionRow: typeof CardBodyActionRow;\n BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
|
package/dist/card/card.mjs
CHANGED
package/dist/card/index.js
CHANGED
|
@@ -77,12 +77,16 @@ var CardMedia = (0, import_react.forwardRef)(
|
|
|
77
77
|
CardMedia.displayName = "Card.Media";
|
|
78
78
|
var CardMediaImg = (0, import_react.forwardRef)(
|
|
79
79
|
(_a, ref) => {
|
|
80
|
-
var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
|
|
80
|
+
var _b = _a, { asChild, variant, className } = _b, rest = __objRest(_b, ["asChild", "variant", "className"]);
|
|
81
81
|
const Component = asChild ? import_react_slot.Slot : "img";
|
|
82
82
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
83
83
|
Component,
|
|
84
84
|
__spreadProps(__spreadValues({}, rest), {
|
|
85
|
-
className: (0, import_typed_classname.clsx)(
|
|
85
|
+
className: (0, import_typed_classname.clsx)(
|
|
86
|
+
"hds-card__media__img",
|
|
87
|
+
{ "hds-card__img__scale": variant === "scale" },
|
|
88
|
+
className
|
|
89
|
+
),
|
|
86
90
|
ref
|
|
87
91
|
})
|
|
88
92
|
);
|