@postenbring/hedwig-react 2.1.4 → 2.2.0

package/dist/index.mjs

@@ -1,7 +1,15 @@
+import "./chunk-CSXSUQ2M.mjs";
+import {
+  Text
+} from "./chunk-DMOMTRIY.mjs";
 import "./chunk-3D2MWIEX.mjs";
 import {
   WarningBanner
 } from "./chunk-EMQB6JIS.mjs";
+import "./chunk-JKCVB5TR.mjs";
+import {
+  StyledHtml
+} from "./chunk-EGW3RCXD.mjs";
 import "./chunk-3LYJRAOC.mjs";
 import {
   Table
@@ -19,10 +27,10 @@ import {
   TabsTab
 } from "./chunk-J5SCUELT.mjs";
 import "./chunk-KQITCS3U.mjs";
-import "./chunk-CSXSUQ2M.mjs";
+import "./chunk-SRLM3K2X.mjs";
 import {
-  Text
-} from "./chunk-DMOMTRIY.mjs";
+  ShowMoreButton
+} from "./chunk-JUHJZLH2.mjs";
 import "./chunk-JTZPQHKD.mjs";
 import {
   Skeleton
@@ -35,10 +43,6 @@ import "./chunk-TJH5QJMS.mjs";
 import {
   StepIndicator
 } from "./chunk-XQBJ75VD.mjs";
-import "./chunk-JKCVB5TR.mjs";
-import {
-  StyledHtml
-} from "./chunk-EGW3RCXD.mjs";
 import "./chunk-FYFJ75NX.mjs";
 import {
   Modal,
@@ -64,11 +68,28 @@ import {
   useNavbarExpendableMenuContext
 } from "./chunk-DRSAVDIE.mjs";
 import "./chunk-XMDDGSCF.mjs";
-import "./chunk-SRLM3K2X.mjs";
+import "./chunk-BVG5VSZK.mjs";
+import "./chunk-G65EYZFQ.mjs";
+import "./chunk-ZQHLYAJU.mjs";
 import {
-  ShowMoreButton
-} from "./chunk-JUHJZLH2.mjs";
+  HStack,
+  Stack,
+  VStack
+} from "./chunk-FUIKSOJF.mjs";
+import {
+  Container
+} from "./chunk-4QZR2H72.mjs";
+import {
+  Grid,
+  GridItem
+} from "./chunk-TC5PD4TA.mjs";
+import "./chunk-7ROE6ADK.mjs";
+import "./chunk-NE6W2PCD.mjs";
+import "./chunk-2YL2MVWN.mjs";
 import "./chunk-K2CB2NLY.mjs";
+import {
+  Figure
+} from "./chunk-OE6RISJS.mjs";
 import "./chunk-HQVL3ZJ2.mjs";
 import {
   Footer,
@@ -86,6 +107,7 @@ import "./chunk-AGZHQDCQ.mjs";
 import {
   Textarea
 } from "./chunk-JEAGKB4V.mjs";
+import "./chunk-KPPLVGZ3.mjs";
 import "./chunk-7LPYJC6S.mjs";
 import {
   Input
@@ -98,34 +120,39 @@ import {
   RadioGroup,
   useRadioGroupContext
 } from "./chunk-E6OOFTRQ.mjs";
+import "./chunk-YJOOSTJC.mjs";
+import {
+  Checkbox
+} from "./chunk-BO3EWZGA.mjs";
+import "./chunk-LMF3QGSF.mjs";
+import {
+  Fieldset,
+  useFieldsetContext
+} from "./chunk-Z2ZPTZ6F.mjs";
 import "./chunk-TDLSHJ4Z.mjs";
 import {
   DatePicker
 } from "./chunk-GVO57ZWU.mjs";
 import "./chunk-Y5SUMFYJ.mjs";
 import "./chunk-XZ43OSZ5.mjs";
-import "./chunk-KPPLVGZ3.mjs";
+import "./chunk-NSLSA7F7.mjs";
+import {
+  ErrorMessage
+} from "./chunk-LHIG6RW7.mjs";
 import {
   ErrorSummary
-} from "./chunk-4YCM72TQ.mjs";
+} from "./chunk-ZSYBCM2L.mjs";
 import "./chunk-CKAL5ZJZ.mjs";
 import "./chunk-CYDWEPFL.mjs";
 import {
   AutoAnimateHeight
 } from "./chunk-KCEWKQ4W.mjs";
-import "./chunk-YJOOSTJC.mjs";
-import {
-  Checkbox
-} from "./chunk-BO3EWZGA.mjs";
-import "./chunk-LMF3QGSF.mjs";
-import {
-  Fieldset,
-  useFieldsetContext
-} from "./chunk-Z2ZPTZ6F.mjs";
-import "./chunk-NSLSA7F7.mjs";
+import "./chunk-RC76SXBP.mjs";
 import {
-  ErrorMessage
-} from "./chunk-LHIG6RW7.mjs";
+  Message,
+  MessageDescription,
+  MessageTitle
+} from "./chunk-BYFBK3J7.mjs";
 import {
   focusTrap,
   useHydrated,
@@ -137,12 +164,6 @@ import {
   Link
 } from "./chunk-OHDHIRAW.mjs";
 import "./chunk-6QV3OV66.mjs";
-import "./chunk-RC76SXBP.mjs";
-import {
-  Message,
-  MessageDescription,
-  MessageTitle
-} from "./chunk-BYFBK3J7.mjs";
 import {
   LinkList
 } from "./chunk-OS24UCTD.mjs";
@@ -154,24 +175,11 @@ import "./chunk-CFAH2LID.mjs";
 import {
   HelpText
 } from "./chunk-YZDURLEY.mjs";
-import "./chunk-BVG5VSZK.mjs";
-import {
-  Container
-} from "./chunk-4QZR2H72.mjs";
-import "./chunk-G65EYZFQ.mjs";
-import {
-  Grid,
-  GridItem
-} from "./chunk-YQMTDQSQ.mjs";
-import "./chunk-ZQHLYAJU.mjs";
-import {
-  HStack,
-  Stack,
-  VStack
-} from "./chunk-6SVLMQUW.mjs";
-import "./chunk-NE6W2PCD.mjs";
-import "./chunk-7ROE6ADK.mjs";
+import "./chunk-ISAHCU7C.mjs";
 import "./chunk-HT2EIJAD.mjs";
+import {
+  Button
+} from "./chunk-TYCGAA35.mjs";
 import "./chunk-Y6NOEN7R.mjs";
 import {
   ButtonList
@@ -189,30 +197,22 @@ import {
   CardMedia,
   CardMediaImg
 } from "./chunk-IC2K5VZJ.mjs";
-import "./chunk-2YL2MVWN.mjs";
 import {
   DescriptionList
 } from "./chunk-C7ZTOZP3.mjs";
-import {
-  Figure
-} from "./chunk-OE6RISJS.mjs";
+import "./chunk-OVKUPO5U.mjs";
 import "./chunk-K6PP3ACJ.mjs";
-import "./chunk-BCFV6VOE.mjs";
 import {
-  Box,
-  BoxCloseButton
-} from "./chunk-3OGHJOJF.mjs";
+  Badge
+} from "./chunk-OXZOGFNV.mjs";
 import "./chunk-KFDS3IPB.mjs";
 import {
   Blockquote
 } from "./chunk-JYN2QSN2.mjs";
-import "./chunk-ISAHCU7C.mjs";
+import "./chunk-BCFV6VOE.mjs";
 import {
   Breadcrumbs
 } from "./chunk-A42PXOVR.mjs";
-import {
-  Button
-} from "./chunk-TYCGAA35.mjs";
 import "./chunk-ZKMFJZSH.mjs";
 import {
   Accordion
@@ -228,14 +228,23 @@ import {
 } from "./chunk-EZVEYJOX.mjs";
 import "./chunk-YQFL5UN4.mjs";
 import {
-  Badge
-} from "./chunk-OXZOGFNV.mjs";
+  Alert,
+  AlertDescription,
+  AlertTitle
+} from "./chunk-4P4GPVKZ.mjs";
+import {
+  Box,
+  BoxCloseButton
+} from "./chunk-3OGHJOJF.mjs";
 import "./chunk-YOSPWY5K.mjs";
 export {
   Accordion,
   AccordionContent,
   AccordionHeader,
   AccordionItem,
+  Alert,
+  AlertDescription,
+  AlertTitle,
   AutoAnimateHeight,
   Badge,
   Blockquote,

package/dist/layout/grid/grid.mjs

@@ -1,9 +1,9 @@
 import {
   Grid,
   GridItem
-} from "../../chunk-YQMTDQSQ.mjs";
-import "../../chunk-NE6W2PCD.mjs";
+} from "../../chunk-TC5PD4TA.mjs";
 import "../../chunk-7ROE6ADK.mjs";
+import "../../chunk-NE6W2PCD.mjs";
 import "../../chunk-YOSPWY5K.mjs";
 export {
   Grid,

package/dist/layout/grid/index.mjs

@@ -2,9 +2,9 @@ import "../../chunk-G65EYZFQ.mjs";
 import {
   Grid,
   GridItem
-} from "../../chunk-YQMTDQSQ.mjs";
-import "../../chunk-NE6W2PCD.mjs";
+} from "../../chunk-TC5PD4TA.mjs";
 import "../../chunk-7ROE6ADK.mjs";
+import "../../chunk-NE6W2PCD.mjs";
 import "../../chunk-YOSPWY5K.mjs";
 export {
   Grid,

package/dist/layout/index.mjs

@@ -1,20 +1,20 @@
 import "../chunk-BVG5VSZK.mjs";
-import {
-  Container
-} from "../chunk-4QZR2H72.mjs";
 import "../chunk-G65EYZFQ.mjs";
-import {
-  Grid,
-  GridItem
-} from "../chunk-YQMTDQSQ.mjs";
 import "../chunk-ZQHLYAJU.mjs";
 import {
   HStack,
   Stack,
   VStack
-} from "../chunk-6SVLMQUW.mjs";
-import "../chunk-NE6W2PCD.mjs";
+} from "../chunk-FUIKSOJF.mjs";
+import {
+  Container
+} from "../chunk-4QZR2H72.mjs";
+import {
+  Grid,
+  GridItem
+} from "../chunk-TC5PD4TA.mjs";
 import "../chunk-7ROE6ADK.mjs";
+import "../chunk-NE6W2PCD.mjs";
 import "../chunk-YOSPWY5K.mjs";
 export {
   Container,

package/dist/layout/stack/index.mjs

@@ -3,9 +3,9 @@ import {
   HStack,
   Stack,
   VStack
-} from "../../chunk-6SVLMQUW.mjs";
-import "../../chunk-NE6W2PCD.mjs";
+} from "../../chunk-FUIKSOJF.mjs";
 import "../../chunk-7ROE6ADK.mjs";
+import "../../chunk-NE6W2PCD.mjs";
 import "../../chunk-YOSPWY5K.mjs";
 export {
   HStack,

package/dist/layout/stack/stack.mjs

@@ -2,9 +2,9 @@ import {
   HStack,
   Stack,
   VStack
-} from "../../chunk-6SVLMQUW.mjs";
-import "../../chunk-NE6W2PCD.mjs";
+} from "../../chunk-FUIKSOJF.mjs";
 import "../../chunk-7ROE6ADK.mjs";
+import "../../chunk-NE6W2PCD.mjs";
 import "../../chunk-YOSPWY5K.mjs";
 export {
   HStack,

package/dist/text/text.d.ts

@@ -53,6 +53,6 @@ export type TextProps = {
  * </Text>
  * ```
  */
-export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLHeadingElement | HTMLParagraphElement>>;
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLParagraphElement | HTMLHeadingElement>>;
 export {};
 //# sourceMappingURL=text.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postenbring/hedwig-react",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -17,7 +17,7 @@
     "@types/react-dom": "^18.3.1",
     "react": "^18.3.1",
     "react-dom": "18.3.1",
-    "tsup": "^8.4.0",
+    "tsup": "^8.5.0",
     "typescript": "^5.8.3",
     "eslint-config-custom": "0.0.1",
     "hedwig-tsconfig": "0.0.0"
@@ -29,9 +29,9 @@
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@radix-ui/react-popover": "1.1.13",
-    "@radix-ui/react-slot": "1.2.2",
-    "@postenbring/hedwig-css": "2.1.4"
+    "@radix-ui/react-popover": "1.1.14",
+    "@radix-ui/react-slot": "1.2.3",
+    "@postenbring/hedwig-css": "2.2.0"
   },
   "publishConfig": {
     "access": "public"

package/src/alert/alert.stories.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert } from ".";
+
+const meta: Meta<typeof Alert> = {
+  title: "Alert",
+  component: Alert,
+
+  argTypes: {
+    variant: {
+      options: ["info", "success", "warning", "error", "neutral"],
+      control: {
+        type: "radio",
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+export const Preview: Story = {
+  tags: ["!dev"],
+  args: {
+    variant: "success",
+    children: (
+      <>
+        <Alert.Title>Alert header</Alert.Title>
+        <Alert.Description>
+          Alert header Alert description. A more detailed explanation of whats happening, but not
+          too long.
+        </Alert.Description>
+      </>
+    ),
+  },
+};

package/src/alert/alert.tsx

@@ -0,0 +1,83 @@
+import React, { forwardRef, type HTMLAttributes } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { Box, type BoxProps } from "../box/box";
+
+export interface AlertTitleProps extends HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+export const AlertTitle = forwardRef<HTMLParagraphElement, AlertTitleProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component className={clsx("hds-alert__title", className as undefined)} ref={ref} {...rest} />
+    );
+  },
+);
+AlertTitle.displayName = "Alert.Title";
+
+export interface AlertDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+export const AlertDescription = forwardRef<HTMLParagraphElement, AlertDescriptionProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        className={clsx("hds-alert__description", className as undefined)}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);
+AlertDescription.displayName = "Alert.Description";
+
+export type AlertProps = (
+  | {
+      variant?: "info" | "success" | "warning" | "error";
+      icon?: never;
+      iconClassName?: never;
+    }
+  | {
+      variant: "neutral";
+      icon?: React.ReactNode;
+      iconClassName?: string;
+    }
+) &
+  Omit<BoxProps, "variant" | "asChild">;
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ children, className, variant = "success", icon, iconClassName, ...rest }, ref) => {
+    return (
+      <Box
+        className={clsx(`hds-alert`, `hds-alert--${variant}`, className as undefined)}
+        ref={ref}
+        {...rest}
+      >
+        {variant === "neutral" && (
+          <div className={clsx("hds-alert--neutral__icon", iconClassName as undefined)}>{icon}</div>
+        )}
+        {children}
+      </Box>
+    );
+  },
+) as AlertType;
+Alert.displayName = "Alert";
+
+type AlertType = ReturnType<typeof forwardRef<HTMLDivElement, AlertProps>> & {
+  Title: typeof AlertTitle;
+  Description: typeof AlertDescription;
+};
+Alert.Title = AlertTitle;
+Alert.Description = AlertDescription;

package/src/alert/index.tsx

@@ -0,0 +1,2 @@
+export { Alert, AlertTitle, AlertDescription } from "./alert";
+export type * from "./alert";

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./accordion";
+export * from "./alert";
 export * from "./badge";
 export * from "./blockquote";
 export * from "./box";