@postenbring/hedwig-react 1.3.3 → 1.4.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.
@@ -32,6 +32,12 @@ interface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement>
32
32
  * @default false
33
33
  */
34
34
  asChild?: boolean;
35
+ /**
36
+ * Set direction of the arrow
37
+ *
38
+ * @default "right"
39
+ */
40
+ direction?: "right" | "up-right";
35
41
  }
36
42
  export declare const CardBodyActionArrow: import("react").ForwardRefExoticComponent<CardBodyActionArrowProps & import("react").RefAttributes<HTMLSpanElement>>;
37
43
  export interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -45,13 +51,21 @@ export interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {
45
51
  }
46
52
  export interface CardProps extends CardBaseProps {
47
53
  /**
48
- * A Card should in most cases appear as a big link,
49
- * but the actual link should just be the header title.
50
- * To make life better for those with screen readers we should not make
51
- * the entire card a link, as that would cause the entire card to be read
52
- * as a link to the user. That would be perceived as information overload.
54
+ * Change the default rendered element for Card.
53
55
  */
54
56
  as?: "section" | "div" | "article" | "aside";
57
+ /**
58
+ * Allows for a horizontal variant for sizes above small.
59
+ *
60
+ * @default "slim"
61
+ */
62
+ variant?: "slim" | "full-width" | "miniature" | "focus";
63
+ /**
64
+ * The color of the card.
65
+ *
66
+ * @default "lighter-brand"
67
+ * */
68
+ color?: "white" | "lighter-brand" | "light-grey-fill";
55
69
  }
56
70
  export declare const Card: CardType;
57
71
  type CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {
@@ -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;CACnB;AACD,eAAO,MAAM,YAAY,kHAWxB,CAAC;AAGF,eAAO,MAAM,QAAQ,0GASpB,CAAC;AAGF,eAAO,MAAM,cAAc;IAKjB;;OAEG;QACC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;cAC1B,KAAK;;aAGN,IAAI;SACR,KAAK;wDAclB,CAAC;AAGH,eAAO,MAAM,sBAAsB,0GAalC,CAAC;AAGF,eAAO,MAAM,mBAAmB,0GAa/B,CAAC;AAGF,eAAO,MAAM,mBAAmB,gHAa/B,CAAC;AAGF,eAAO,MAAM,cAAc,0GAa1B,CAAC;AAGF,UAAU,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,mBAAmB,sHAW/B,CAAC;AAGF,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;CAC9C;AAED,eAAO,MAAM,IAAI,EASZ,QAAQ,CAAC;AAad,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,GAAG;IACzE,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,QAAQ,EAAE,OAAO,YAAY,CAAC;IAC9B,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,UAAU,EAAE,OAAO,cAAc,CAAC;IAClC,kBAAkB,EAAE,OAAO,sBAAsB,CAAC;IAClD,eAAe,EAAE,OAAO,mBAAmB,CAAC;IAC5C,eAAe,EAAE,OAAO,mBAAmB,CAAC;IAC5C,UAAU,EAAE,OAAO,cAAc,CAAC;IAClC,eAAe,EAAE,OAAO,mBAAmB,CAAC;CAC7C,CAAC"}
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;CACnB;AACD,eAAO,MAAM,YAAY,kHAWxB,CAAC;AAGF,eAAO,MAAM,QAAQ,0GASpB,CAAC;AAGF,eAAO,MAAM,cAAc;IAKjB;;OAEG;QACC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;cAC1B,KAAK;;aAGN,IAAI;SACR,KAAK;wDAclB,CAAC;AAGH,eAAO,MAAM,sBAAsB,0GAalC,CAAC;AAGF,eAAO,MAAM,mBAAmB,0GAa/B,CAAC;AAGF,eAAO,MAAM,mBAAmB,gHAa/B,CAAC;AAGF,eAAO,MAAM,cAAc,0GAa1B,CAAC;AAGF,UAAU,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CAClC;AACD,eAAO,MAAM,mBAAmB,sHAe/B,CAAC;AAGF,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7C;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAAC;IACxD;;;;SAIK;IACL,KAAK,CAAC,EAAE,OAAO,GAAG,eAAe,GAAG,iBAAiB,CAAC;CACvD;AAQD,eAAO,MAAM,IAAI,EAuBZ,QAAQ,CAAC;AAad,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,GAAG;IACzE,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,QAAQ,EAAE,OAAO,YAAY,CAAC;IAC9B,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,UAAU,EAAE,OAAO,cAAc,CAAC;IAClC,kBAAkB,EAAE,OAAO,sBAAsB,CAAC;IAClD,eAAe,EAAE,OAAO,mBAAmB,CAAC;IAC5C,eAAe,EAAE,OAAO,mBAAmB,CAAC;IAC5C,UAAU,EAAE,OAAO,cAAc,CAAC;IAClC,eAAe,EAAE,OAAO,mBAAmB,CAAC;CAC7C,CAAC"}
package/dist/card/card.js CHANGED
@@ -170,12 +170,16 @@ var CardBodyAction = (0, import_react.forwardRef)(
170
170
  CardBodyAction.displayName = "Card.BodyAction";
171
171
  var CardBodyActionArrow = (0, import_react.forwardRef)(
172
172
  (_a, ref) => {
173
- var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
173
+ var _b = _a, { asChild, className, direction } = _b, rest = __objRest(_b, ["asChild", "className", "direction"]);
174
174
  const Component = asChild ? import_react_slot.Slot : "span";
175
175
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
176
176
  Component,
177
177
  __spreadProps(__spreadValues({}, rest), {
178
- className: (0, import_typed_classname.clsx)("hds-card__body-action-arrow", className),
178
+ className: (0, import_typed_classname.clsx)(
179
+ "hds-card__body-action-arrow",
180
+ { "hds-card__body-action-arrow-up-right": direction === "up-right" },
181
+ className
182
+ ),
179
183
  ref
180
184
  })
181
185
  );
@@ -184,9 +188,26 @@ var CardBodyActionArrow = (0, import_react.forwardRef)(
184
188
  CardBodyActionArrow.displayName = "Card.BodyActionArrow";
185
189
  var Card = (0, import_react.forwardRef)(
186
190
  (_a, ref) => {
187
- var _b = _a, { as: Tag = "section", asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
191
+ var _b = _a, { as: Tag = "section", asChild, className, children, variant, color } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children", "variant", "color"]);
188
192
  const Component = asChild ? import_react_slot.Slot : Tag;
189
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname.clsx)("hds-card", className), ref, children }));
193
+ const effectiveColor = variant === "focus" && !color ? "darker" : color;
194
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
195
+ Component,
196
+ __spreadProps(__spreadValues({}, rest), {
197
+ className: (0, import_typed_classname.clsx)(
198
+ "hds-card",
199
+ { "hds-card--full-width": variant === "full-width" },
200
+ { "hds-card--miniature": variant === "miniature" },
201
+ { "hds-card--focus": variant === "focus" },
202
+ { "hds-card--color-white": effectiveColor === "white" },
203
+ { "hds-card--color-light-grey-fill": effectiveColor === "light-grey-fill" },
204
+ { "hds-card--color-darker": effectiveColor === "darker" },
205
+ className
206
+ ),
207
+ ref,
208
+ children
209
+ })
210
+ );
190
211
  }
191
212
  );
192
213
  Card.displayName = "Card";
@@ -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 {children}\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\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}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action-arrow\", className as undefined)}\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 CardProps extends CardBaseProps {\n /**\n * A Card should in most cases appear as a big link,\n * but the actual link should just be the header title.\n * To make life better for those with screen readers we should not make\n * the entire card a link, as that would cause the entire card to be read\n * as a link to the user. That would be perceived as information overload.\n */\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n ({ as: Tag = \"section\", asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component {...rest} className={clsx(\"hds-card\", className as undefined)} ref={ref}>\n {children}\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.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 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}\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 {children}\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\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 CardProps 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\" | \"full-width\" | \"miniature\" | \"focus\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n}\n\ninterface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color: \"darker\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps | CardFocusProps>(\n ({ as: Tag = \"section\", asChild, className, children, variant, color, ...rest }, ref) => {\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 className as undefined,\n )}\n ref={ref}\n >\n {children}\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.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 BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
@@ -9,7 +9,7 @@ import {
9
9
  CardBodyHeaderTitle,
10
10
  CardMedia,
11
11
  CardMediaImg
12
- } from "../chunk-AZ6X4L5C.mjs";
12
+ } from "../chunk-IEDOH22E.mjs";
13
13
  import "../chunk-YOSPWY5K.mjs";
14
14
  export {
15
15
  Card,
@@ -172,12 +172,16 @@ var CardBodyAction = (0, import_react.forwardRef)(
172
172
  CardBodyAction.displayName = "Card.BodyAction";
173
173
  var CardBodyActionArrow = (0, import_react.forwardRef)(
174
174
  (_a, ref) => {
175
- var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
175
+ var _b = _a, { asChild, className, direction } = _b, rest = __objRest(_b, ["asChild", "className", "direction"]);
176
176
  const Component = asChild ? import_react_slot.Slot : "span";
177
177
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
178
178
  Component,
179
179
  __spreadProps(__spreadValues({}, rest), {
180
- className: (0, import_typed_classname.clsx)("hds-card__body-action-arrow", className),
180
+ className: (0, import_typed_classname.clsx)(
181
+ "hds-card__body-action-arrow",
182
+ { "hds-card__body-action-arrow-up-right": direction === "up-right" },
183
+ className
184
+ ),
181
185
  ref
182
186
  })
183
187
  );
@@ -186,9 +190,26 @@ var CardBodyActionArrow = (0, import_react.forwardRef)(
186
190
  CardBodyActionArrow.displayName = "Card.BodyActionArrow";
187
191
  var Card = (0, import_react.forwardRef)(
188
192
  (_a, ref) => {
189
- var _b = _a, { as: Tag = "section", asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
193
+ var _b = _a, { as: Tag = "section", asChild, className, children, variant, color } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children", "variant", "color"]);
190
194
  const Component = asChild ? import_react_slot.Slot : Tag;
191
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname.clsx)("hds-card", className), ref, children }));
195
+ const effectiveColor = variant === "focus" && !color ? "darker" : color;
196
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
197
+ Component,
198
+ __spreadProps(__spreadValues({}, rest), {
199
+ className: (0, import_typed_classname.clsx)(
200
+ "hds-card",
201
+ { "hds-card--full-width": variant === "full-width" },
202
+ { "hds-card--miniature": variant === "miniature" },
203
+ { "hds-card--focus": variant === "focus" },
204
+ { "hds-card--color-white": effectiveColor === "white" },
205
+ { "hds-card--color-light-grey-fill": effectiveColor === "light-grey-fill" },
206
+ { "hds-card--color-darker": effectiveColor === "darker" },
207
+ className
208
+ ),
209
+ ref,
210
+ children
211
+ })
212
+ );
192
213
  }
193
214
  );
194
215
  Card.displayName = "Card";
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/card/index.tsx","../../src/card/card.tsx"],"sourcesContent":["export {\n Card,\n CardMedia,\n CardMediaImg,\n CardBody,\n CardBodyHeader,\n CardBodyHeaderOverline,\n CardBodyHeaderTitle,\n CardBodyDescription,\n CardBodyAction,\n CardBodyActionArrow,\n} from \"./card\";\n\nexport type * from \"./card\";\n","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 {children}\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\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}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n ({ asChild, className, ...rest }, ref) => {\n const Component = asChild ? Slot : \"span\";\n return (\n <Component\n {...rest}\n className={clsx(\"hds-card__body-action-arrow\", className as undefined)}\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 CardProps extends CardBaseProps {\n /**\n * A Card should in most cases appear as a big link,\n * but the actual link should just be the header title.\n * To make life better for those with screen readers we should not make\n * the entire card a link, as that would cause the entire card to be read\n * as a link to the user. That would be perceived as information overload.\n */\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n ({ as: Tag = \"section\", asChild, className, children, ...rest }, ref) => {\n const Component = asChild ? Slot : Tag;\n return (\n <Component {...rest} className={clsx(\"hds-card\", className as undefined)} ref={ref}>\n {children}\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.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 BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/card/index.tsx","../../src/card/card.tsx"],"sourcesContent":["export {\n Card,\n CardMedia,\n CardMediaImg,\n CardBody,\n CardBodyHeader,\n CardBodyHeaderOverline,\n CardBodyHeaderTitle,\n CardBodyDescription,\n CardBodyAction,\n CardBodyActionArrow,\n} from \"./card\";\n\nexport type * from \"./card\";\n","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 {children}\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\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 CardProps 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\" | \"full-width\" | \"miniature\" | \"focus\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n}\n\ninterface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color: \"darker\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps | CardFocusProps>(\n ({ as: Tag = \"section\", asChild, className, children, variant, color, ...rest }, ref) => {\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 className as undefined,\n )}\n ref={ref}\n >\n {children}\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.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 BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
@@ -10,7 +10,7 @@ import {
10
10
  CardBodyHeaderTitle,
11
11
  CardMedia,
12
12
  CardMediaImg
13
- } from "../chunk-AZ6X4L5C.mjs";
13
+ } from "../chunk-IEDOH22E.mjs";
14
14
  import "../chunk-YOSPWY5K.mjs";
15
15
  export {
16
16
  Card,
@@ -114,12 +114,16 @@ var CardBodyAction = forwardRef(
114
114
  CardBodyAction.displayName = "Card.BodyAction";
115
115
  var CardBodyActionArrow = forwardRef(
116
116
  (_a, ref) => {
117
- var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
117
+ var _b = _a, { asChild, className, direction } = _b, rest = __objRest(_b, ["asChild", "className", "direction"]);
118
118
  const Component = asChild ? Slot : "span";
119
119
  return /* @__PURE__ */ jsx(
120
120
  Component,
121
121
  __spreadProps(__spreadValues({}, rest), {
122
- className: clsx("hds-card__body-action-arrow", className),
122
+ className: clsx(
123
+ "hds-card__body-action-arrow",
124
+ { "hds-card__body-action-arrow-up-right": direction === "up-right" },
125
+ className
126
+ ),
123
127
  ref
124
128
  })
125
129
  );
@@ -128,9 +132,26 @@ var CardBodyActionArrow = forwardRef(
128
132
  CardBodyActionArrow.displayName = "Card.BodyActionArrow";
129
133
  var Card = forwardRef(
130
134
  (_a, ref) => {
131
- var _b = _a, { as: Tag = "section", asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
135
+ var _b = _a, { as: Tag = "section", asChild, className, children, variant, color } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children", "variant", "color"]);
132
136
  const Component = asChild ? Slot : Tag;
133
- return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, rest), { className: clsx("hds-card", className), ref, children }));
137
+ const effectiveColor = variant === "focus" && !color ? "darker" : color;
138
+ return /* @__PURE__ */ jsx(
139
+ Component,
140
+ __spreadProps(__spreadValues({}, rest), {
141
+ className: clsx(
142
+ "hds-card",
143
+ { "hds-card--full-width": variant === "full-width" },
144
+ { "hds-card--miniature": variant === "miniature" },
145
+ { "hds-card--focus": variant === "focus" },
146
+ { "hds-card--color-white": effectiveColor === "white" },
147
+ { "hds-card--color-light-grey-fill": effectiveColor === "light-grey-fill" },
148
+ { "hds-card--color-darker": effectiveColor === "darker" },
149
+ className
150
+ ),
151
+ ref,
152
+ children
153
+ })
154
+ );
134
155
  }
135
156
  );
136
157
  Card.displayName = "Card";
@@ -156,4 +177,4 @@ export {
156
177
  CardBodyActionArrow,
157
178
  Card
158
179
  };
159
- //# sourceMappingURL=chunk-AZ6X4L5C.mjs.map
180
+ //# sourceMappingURL=chunk-IEDOH22E.mjs.map
@@ -0,0 +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 {children}\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\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 CardProps 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\" | \"full-width\" | \"miniature\" | \"focus\";\n /**\n * The color of the card.\n *\n * @default \"lighter-brand\"\n * */\n color?: \"white\" | \"lighter-brand\" | \"light-grey-fill\";\n}\n\ninterface CardFocusProps extends CardBaseProps {\n as?: \"section\" | \"div\" | \"article\" | \"aside\";\n variant: \"focus\";\n color: \"darker\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps | CardFocusProps>(\n ({ as: Tag = \"section\", asChild, className, children, variant, color, ...rest }, ref) => {\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 className as undefined,\n )}\n ref={ref}\n >\n {children}\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.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 BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}
@@ -7,9 +7,9 @@ import {
7
7
  import "../../chunk-CKAL5ZJZ.mjs";
8
8
  import "../../chunk-CYDWEPFL.mjs";
9
9
  import "../../chunk-KCEWKQ4W.mjs";
10
+ import "../../chunk-6QV3OV66.mjs";
10
11
  import "../../chunk-RC76SXBP.mjs";
11
12
  import "../../chunk-BYFBK3J7.mjs";
12
- import "../../chunk-6QV3OV66.mjs";
13
13
  import "../../chunk-ILFK3VKS.mjs";
14
14
  import "../../chunk-XLLYMQLW.mjs";
15
15
  import "../../chunk-VYS2QNTL.mjs";
@@ -5,9 +5,9 @@ import {
5
5
  import "../../chunk-CKAL5ZJZ.mjs";
6
6
  import "../../chunk-CYDWEPFL.mjs";
7
7
  import "../../chunk-KCEWKQ4W.mjs";
8
+ import "../../chunk-6QV3OV66.mjs";
8
9
  import "../../chunk-RC76SXBP.mjs";
9
10
  import "../../chunk-BYFBK3J7.mjs";
10
- import "../../chunk-6QV3OV66.mjs";
11
11
  import "../../chunk-ILFK3VKS.mjs";
12
12
  import "../../chunk-XLLYMQLW.mjs";
13
13
  import "../../chunk-VYS2QNTL.mjs";
@@ -24,6 +24,7 @@ import "../chunk-7LPYJC6S.mjs";
24
24
  import {
25
25
  Input
26
26
  } from "../chunk-ITLZQ47H.mjs";
27
+ import "../chunk-CYDWEPFL.mjs";
27
28
  import "../chunk-YJOOSTJC.mjs";
28
29
  import {
29
30
  Checkbox
@@ -43,11 +44,10 @@ import "../chunk-NSLSA7F7.mjs";
43
44
  import {
44
45
  ErrorMessage
45
46
  } from "../chunk-LHIG6RW7.mjs";
46
- import "../chunk-CYDWEPFL.mjs";
47
47
  import "../chunk-KCEWKQ4W.mjs";
48
+ import "../chunk-6QV3OV66.mjs";
48
49
  import "../chunk-RC76SXBP.mjs";
49
50
  import "../chunk-BYFBK3J7.mjs";
50
- import "../chunk-6QV3OV66.mjs";
51
51
  import "../chunk-ILFK3VKS.mjs";
52
52
  import "../chunk-XLLYMQLW.mjs";
53
53
  import "../chunk-VYS2QNTL.mjs";
package/dist/index.js CHANGED
@@ -570,12 +570,16 @@ var CardBodyAction = (0, import_react11.forwardRef)(
570
570
  CardBodyAction.displayName = "Card.BodyAction";
571
571
  var CardBodyActionArrow = (0, import_react11.forwardRef)(
572
572
  (_a, ref) => {
573
- var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
573
+ var _b = _a, { asChild, className, direction } = _b, rest = __objRest(_b, ["asChild", "className", "direction"]);
574
574
  const Component = asChild ? import_react_slot5.Slot : "span";
575
575
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
576
576
  Component,
577
577
  __spreadProps(__spreadValues({}, rest), {
578
- className: (0, import_typed_classname10.clsx)("hds-card__body-action-arrow", className),
578
+ className: (0, import_typed_classname10.clsx)(
579
+ "hds-card__body-action-arrow",
580
+ { "hds-card__body-action-arrow-up-right": direction === "up-right" },
581
+ className
582
+ ),
579
583
  ref
580
584
  })
581
585
  );
@@ -584,9 +588,26 @@ var CardBodyActionArrow = (0, import_react11.forwardRef)(
584
588
  CardBodyActionArrow.displayName = "Card.BodyActionArrow";
585
589
  var Card = (0, import_react11.forwardRef)(
586
590
  (_a, ref) => {
587
- var _b = _a, { as: Tag = "section", asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
591
+ var _b = _a, { as: Tag = "section", asChild, className, children, variant, color } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children", "variant", "color"]);
588
592
  const Component = asChild ? import_react_slot5.Slot : Tag;
589
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname10.clsx)("hds-card", className), ref, children }));
593
+ const effectiveColor = variant === "focus" && !color ? "darker" : color;
594
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
595
+ Component,
596
+ __spreadProps(__spreadValues({}, rest), {
597
+ className: (0, import_typed_classname10.clsx)(
598
+ "hds-card",
599
+ { "hds-card--full-width": variant === "full-width" },
600
+ { "hds-card--miniature": variant === "miniature" },
601
+ { "hds-card--focus": variant === "focus" },
602
+ { "hds-card--color-white": effectiveColor === "white" },
603
+ { "hds-card--color-light-grey-fill": effectiveColor === "light-grey-fill" },
604
+ { "hds-card--color-darker": effectiveColor === "darker" },
605
+ className
606
+ ),
607
+ ref,
608
+ children
609
+ })
610
+ );
590
611
  }
591
612
  );
592
613
  Card.displayName = "Card";