@dmsi/wedgekit-react 0.0.475 → 0.0.477

package/dist/components/index.css

@@ -931,6 +931,9 @@
   .min-w-36 {
     min-width: calc(var(--spacing) * 36);
   }
+  .min-w-\[2px\] {
+    min-width: 2px;
+  }
   .min-w-full {
     min-width: 100%;
   }

package/dist/components/index.js

@@ -1,30 +1,31 @@
 import {
   DataGrid,
+  DateInput,
   MobileDataGrid
-} from "../chunk-GTPSPGSJ.js";
-import "../chunk-OEMLNGE2.js";
-import "../chunk-IT4VFU6T.js";
+} from "../chunk-WIDUWFLX.js";
 import "../chunk-M7INAUAJ.js";
-import {
-  PDFViewer
-} from "../chunk-IG2YUDHI.js";
+import "../chunk-4Q7T4GJ2.js";
+import "../chunk-3DEYCNUE.js";
 import {
   ProductImagePreview
 } from "../chunk-DYBJUTGK.js";
+import {
+  PDFViewer
+} from "../chunk-24K4HHV5.js";
+import "../chunk-B53XDCLO.js";
 import "../chunk-MBZ55T2D.js";
 import "../chunk-2IKT6IHB.js";
 import "../chunk-YCDDBSVU.js";
 import "../chunk-3X3Y4TMS.js";
 import "../chunk-BQNPOGD5.js";
-import "../chunk-KJNK7KEV.js";
-import "../chunk-TVXBP5CW.js";
+import "../chunk-QMSPTD6L.js";
+import "../chunk-XIXQUEYC.js";
 import "../chunk-5IFPG6TS.js";
 import "../chunk-KW6V7O3H.js";
 import "../chunk-AJ5M6MVX.js";
 import "../chunk-JUFBGNWW.js";
 import "../chunk-YNKN6RKF.js";
 import "../chunk-VJVY6NPF.js";
-import "../chunk-GTBGPBH6.js";
 import "../chunk-AT4AWD6B.js";
 import "../chunk-EWGHVZL5.js";
 import {
@@ -36,40 +37,30 @@ import {
 import {
   SkeletonParagraph
 } from "../chunk-ETAEB3TA.js";
-import {
-  Select
-} from "../chunk-HVNHTM3P.js";
 import {
   Pagination
 } from "../chunk-GRGDX7JC.js";
-import "../chunk-NIWXVOBW.js";
+import {
+  Select
+} from "../chunk-HVNHTM3P.js";
+import "../chunk-X67L3NZI.js";
 import "../chunk-4RJKB7LC.js";
+import "../chunk-FG7GNGE3.js";
 import "../chunk-G7KIKHER.js";
 import "../chunk-AG43RS4Q.js";
 import "../chunk-ZQJMNPCF.js";
-import "../chunk-FG7GNGE3.js";
 import {
   ListGroup
 } from "../chunk-6TYWM26K.js";
 import "../chunk-SBRRNFOP.js";
 import "../chunk-Y2GK27RX.js";
-import "../chunk-H2KC5XUY.js";
 import "../chunk-QVWYTQKL.js";
-import {
-  EmptyCartIcon
-} from "../chunk-75USUR3I.js";
-import {
-  Checkbox
-} from "../chunk-WEAVZEE4.js";
-import {
-  CompactImagesPreview
-} from "../chunk-OZBB6RFM.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-BFFNSUNS.js";
+} from "../chunk-QBSEKZWX.js";
 import {
   Menu
 } from "../chunk-TCMOGTPB.js";
@@ -77,7 +68,6 @@ import "../chunk-DVU5XV7L.js";
 import {
   MenuOption
 } from "../chunk-IPAKWF2V.js";
-import "../chunk-WVUIIBRR.js";
 import {
   Search
 } from "../chunk-RQRR4FEF.js";
@@ -87,6 +77,16 @@ import {
 import {
   Label
 } from "../chunk-AL5QIRY3.js";
+import "../chunk-WVUIIBRR.js";
+import {
+  EmptyCartIcon
+} from "../chunk-75USUR3I.js";
+import {
+  Checkbox
+} from "../chunk-WEAVZEE4.js";
+import {
+  CompactImagesPreview
+} from "../chunk-OZBB6RFM.js";
 import "../chunk-URYQ24NF.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-R3EQIDBX.js";
@@ -96,14 +96,18 @@ import {
 } from "../chunk-UCJUC5AZ.js";
 import {
   Accordion
-} from "../chunk-ZQSD74IJ.js";
+} from "../chunk-IY7SXEVY.js";
 import {
   Card
 } from "../chunk-KBJZUVLM.js";
-import "../chunk-DORD2EBO.js";
+import {
+  Alert
+} from "../chunk-4UH72JT2.js";
+import "../chunk-H2KC5XUY.js";
 import {
   Paragraph
 } from "../chunk-ZSETMD4A.js";
+import "../chunk-DORD2EBO.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
@@ -114,6 +118,7 @@ import "../chunk-IXR65MOU.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Accordion,
+  Alert,
   Button,
   Card,
   Checkbox,
@@ -121,6 +126,7 @@ export {
   DataCellHeader,
   DataGrid,
   DataGridCell,
+  DateInput,
   DragAlongCell,
   DraggableCellHeader,
   EmptyCartIcon,

package/dist/index.css

@@ -909,6 +909,9 @@
   .min-w-36 {
     min-width: calc(var(--spacing) * 36);
   }
+  .min-w-\[2px\] {
+    min-width: 2px;
+  }
   .min-w-full {
     min-width: 100%;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.475",
+  "version": "0.0.477",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Alert.tsx

@@ -0,0 +1,81 @@
+import clsx from "clsx";
+import { Button } from "./Button";
+import { Heading2 } from "./Heading";
+import { Icon } from "./Icon";
+import { Paragraph } from "./Paragraph";
+import { Stack } from "./Stack";
+import { HTMLAttributes, useCallback } from "react";
+
+export type AlertVariant = "error" | "warning";
+
+export interface AlertProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "className"> {
+  id?: string;
+  testId?: string;
+  variant: AlertVariant;
+  title: string;
+  message: string;
+  dismissible?: boolean;
+  onClose?: () => void;
+}
+export function Alert({
+  id,
+  testId,
+  variant,
+  title,
+  message,
+  dismissible = false,
+  onClose,
+  ...rest
+}: AlertProps) {
+  const isError = variant === "error";
+
+  const handleClose = useCallback(() => {
+    if (onClose) onClose();
+  }, [onClose]);
+
+  return (
+    <Stack
+      id={id}
+      data-testid={testId}
+      sizing="container"
+      backgroundColor="background-grouped-primary-normal"
+      borderColor="border-primary-normal"
+      items="start"
+      elevation={4}
+      rounded
+      padding
+      horizontal
+      horizontalMobile
+      {...rest}
+    >
+      <div
+        className={clsx("min-w-[2px] min-h-full flex", {
+          "bg-background-critical-normal": isError,
+          "bg-background-warning-normal": !isError,
+        })}
+      />
+      <span
+        className={clsx({
+          "text-icon-critical-normal": isError,
+          "text-icon-warning-normal": !isError,
+        })}
+      >
+        <Icon name="warning" />
+      </span>
+      <Stack flexGrow={1} sizing="component">
+        <Heading2>{title}</Heading2>
+        <Paragraph>{message}</Paragraph>
+      </Stack>
+      {dismissible && (
+        <Button
+          aria-label="Dismiss alert"
+          iconOnly
+          variant="tertiary"
+          leftIcon={<Icon name="close" />}
+          onClick={handleClose}
+        />
+      )}
+    </Stack>
+  );
+}

package/src/components/index.ts

@@ -18,6 +18,7 @@ export { MenuOption } from "./MenuOption";
 export { Search } from "./Search";
 export { Tooltip } from "./Tooltip";
 export { Input } from "./Input";
+export { DateInput } from "./DateInput";
 export { Accordion } from "./Accordion";
 export { Card } from "./Card";
 export { MobileDataGrid } from "./MobileDataGrid";
@@ -29,3 +30,4 @@ export { ListGroup } from "./ListGroup";
 export { Pagination } from "./Pagination";
 export { SkeletonParagraph } from "./SkeletonParagraph";
 export { EmptyCartIcon } from "./EmptyCartIcon";
+export { Alert } from "./Alert";