@postenbring/hedwig-react 1.3.3 → 1.4.0

package/dist/index.mjs

@@ -2,10 +2,6 @@ import "./chunk-3D2MWIEX.mjs";
 import {
   WarningBanner
 } from "./chunk-EMQB6JIS.mjs";
-import "./chunk-SRLM3K2X.mjs";
-import {
-  ShowMoreButton
-} from "./chunk-JUHJZLH2.mjs";
 import "./chunk-7YWW46R3.mjs";
 import {
   Tabs
@@ -19,22 +15,26 @@ import {
   TabsTab
 } from "./chunk-J5SCUELT.mjs";
 import "./chunk-KQITCS3U.mjs";
+import "./chunk-CSXSUQ2M.mjs";
+import {
+  Text
+} from "./chunk-DMOMTRIY.mjs";
+import "./chunk-AJFQHFQT.mjs";
+import {
+  Spinner
+} from "./chunk-ZTZAPNZB.mjs";
 import "./chunk-TJH5QJMS.mjs";
 import {
   StepIndicator
 } from "./chunk-XQBJ75VD.mjs";
-import "./chunk-3LYJRAOC.mjs";
-import {
-  Table
-} from "./chunk-ZOZPWP3N.mjs";
 import "./chunk-JKCVB5TR.mjs";
 import {
   StyledHtml
 } from "./chunk-EGW3RCXD.mjs";
-import "./chunk-CSXSUQ2M.mjs";
+import "./chunk-3LYJRAOC.mjs";
 import {
-  Text
-} from "./chunk-DMOMTRIY.mjs";
+  Table
+} from "./chunk-ZOZPWP3N.mjs";
 import "./chunk-H3E546OT.mjs";
 import {
   Navbar,
@@ -57,10 +57,10 @@ import "./chunk-JTZPQHKD.mjs";
 import {
   Skeleton
 } from "./chunk-WLESNP6Z.mjs";
-import "./chunk-AJFQHFQT.mjs";
+import "./chunk-SRLM3K2X.mjs";
 import {
-  Spinner
-} from "./chunk-ZTZAPNZB.mjs";
+  ShowMoreButton
+} from "./chunk-JUHJZLH2.mjs";
 import "./chunk-FYFJ75NX.mjs";
 import {
   Modal,
@@ -69,10 +69,6 @@ import {
   ModalHeader
 } from "./chunk-6VKQ6IRG.mjs";
 import "./chunk-HQVL3ZJ2.mjs";
-import "./chunk-CFAH2LID.mjs";
-import {
-  HelpText
-} from "./chunk-YZDURLEY.mjs";
 import "./chunk-IJSEJZ3W.mjs";
 import "./chunk-AGZHQDCQ.mjs";
 import {
@@ -99,6 +95,7 @@ import "./chunk-7LPYJC6S.mjs";
 import {
   Input
 } from "./chunk-ITLZQ47H.mjs";
+import "./chunk-CYDWEPFL.mjs";
 import "./chunk-YJOOSTJC.mjs";
 import {
   Checkbox
@@ -118,23 +115,26 @@ import "./chunk-NSLSA7F7.mjs";
 import {
   ErrorMessage
 } from "./chunk-LHIG6RW7.mjs";
-import "./chunk-CYDWEPFL.mjs";
 import {
   AutoAnimateHeight
 } from "./chunk-KCEWKQ4W.mjs";
+import "./chunk-6QV3OV66.mjs";
 import "./chunk-RC76SXBP.mjs";
 import {
   Message,
   MessageDescription,
   MessageTitle
 } from "./chunk-BYFBK3J7.mjs";
-import "./chunk-6QV3OV66.mjs";
 import {
   focusTrap,
   useHydrated,
   useMergeRefs,
   useResize
 } from "./chunk-ILFK3VKS.mjs";
+import "./chunk-CFAH2LID.mjs";
+import {
+  HelpText
+} from "./chunk-YZDURLEY.mjs";
 import "./chunk-BVG5VSZK.mjs";
 import {
   Container
@@ -168,7 +168,7 @@ import {
   CardBodyHeaderTitle,
   CardMedia,
   CardMediaImg
-} from "./chunk-AZ6X4L5C.mjs";
+} from "./chunk-IEDOH22E.mjs";
 import "./chunk-2YL2MVWN.mjs";
 import {
   DescriptionList

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postenbring/hedwig-react",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,15 +23,15 @@
     "hedwig-tsconfig": "0.0.0"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "@types/react-dom": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "@radix-ui/react-popover": "1.1.2",
     "@radix-ui/react-slot": "1.1.0",
-    "@postenbring/hedwig-css": "1.4.2"
+    "@postenbring/hedwig-css": "1.5.0"
   },
   "publishConfig": {
     "access": "public"

package/src/card/card.tsx

@@ -150,14 +150,25 @@ interface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement>
    * @default false
    */
   asChild?: boolean;
+
+  /**
+   * Set direction of the arrow
+   *
+   * @default "right"
+   */
+  direction?: "right" | "up-right";
 }
 export const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(
-  ({ asChild, className, ...rest }, ref) => {
+  ({ asChild, className, direction, ...rest }, ref) => {
     const Component = asChild ? Slot : "span";
     return (
       <Component
         {...rest}
-        className={clsx("hds-card__body-action-arrow", className as undefined)}
+        className={clsx(
+          "hds-card__body-action-arrow",
+          { "hds-card__body-action-arrow-up-right": direction === "up-right" },
+          className as undefined,
+        )}
         ref={ref}
       />
     );
@@ -178,20 +189,48 @@ export interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export interface CardProps extends CardBaseProps {
   /**
-   * A Card should in most cases appear as a big link,
-   * but the actual link should just be the header title.
-   * To make life better for those with screen readers we should not make
-   * the entire card a link, as that would cause the entire card to be read
-   * as a link to the user. That would be perceived as information overload.
+   * Change the default rendered element for Card.
    */
   as?: "section" | "div" | "article" | "aside";
+  /**
+   * Allows for a horizontal variant for sizes above small.
+   *
+   * @default "slim"
+   */
+  variant?: "slim" | "full-width" | "miniature" | "focus";
+  /**
+   * The color of the card.
+   *
+   * @default "lighter-brand"
+   * */
+  color?: "white" | "lighter-brand" | "light-grey-fill";
+}
+
+interface CardFocusProps extends CardBaseProps {
+  as?: "section" | "div" | "article" | "aside";
+  variant: "focus";
+  color: "darker";
 }
 
-export const Card = forwardRef<HTMLDivElement, CardProps>(
-  ({ as: Tag = "section", asChild, className, children, ...rest }, ref) => {
+export const Card = forwardRef<HTMLDivElement, CardProps | CardFocusProps>(
+  ({ as: Tag = "section", asChild, className, children, variant, color, ...rest }, ref) => {
     const Component = asChild ? Slot : Tag;
+    const effectiveColor = variant === "focus" && !color ? "darker" : color;
     return (
-      <Component {...rest} className={clsx("hds-card", className as undefined)} ref={ref}>
+      <Component
+        {...rest}
+        className={clsx(
+          "hds-card",
+          { "hds-card--full-width": variant === "full-width" },
+          { "hds-card--miniature": variant === "miniature" },
+          { "hds-card--focus": variant === "focus" },
+          { "hds-card--color-white": effectiveColor === "white" },
+          { "hds-card--color-light-grey-fill": effectiveColor === "light-grey-fill" },
+          { "hds-card--color-darker": effectiveColor === "darker" },
+          className as undefined,
+        )}
+        ref={ref}
+      >
         {children}
       </Component>
     );

package/dist/chunk-AZ6X4L5C.mjs.map

@@ -1 +0,0 @@
-{"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":[]}