@payfit/unity-components 2.17.12 → 2.18.0

package/dist/esm/components/alert/Alert.d.ts

@@ -1,69 +1,5 @@
-import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-declare const alert: import('tailwind-variants').TVReturnType<{
-    variant: {
-        info: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    icon: string;
-}, undefined, {
-    variant: {
-        info: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    icon: string;
-}, import('tailwind-variants').TVReturnType<{
-    variant: {
-        info: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    icon: string;
-}, undefined, unknown, unknown, undefined>>;
-type BaseAlertProps = PropsWithChildren<{
-    /**
-     * The alert's variant, which determines its visual style.
-     */
-    variant: NonNullable<VariantProps<typeof alert>['variant']>;
-}>;
+type BaseAlertProps = PropsWithChildren;
 type DismissableConfig = {
     /**
      * Whether the alert is dismissable by the user, and should render a close button.
@@ -87,9 +23,33 @@ type DismissableConfig = {
      */
     dismissButtonLabel: string;
 };
-export type AlertProps = BaseAlertProps & DismissableConfig;
+type VariantConfig = {
+    /**
+     * The alert's variant, which determines its visual style.
+     * Each variant has a fixed icon:
+     * - info: InfoFilled
+     * - warning: WarningFilled
+     * - success: CheckCircleFilled
+     * - danger: WarningCircleFilled
+     * - insight: LightbulbFilamentFilled
+     */
+    variant?: 'info' | 'warning' | 'success' | 'danger' | 'insight';
+};
+export type AlertProps = BaseAlertProps & DismissableConfig & VariantConfig;
 /**
- * Alerts display brief messages for the user without interrupting their use of the app. They can provide feedback, confirmations, warnings, or errors.
+ * Alerts display brief messages for the user without interrupting their use of the app.
+ * They can provide feedback, confirmations, warnings, errors, or educational insights.
+ * @example
+ * <Alert variant="info">
+ *   <AlertTitle>Information</AlertTitle>
+ *   <AlertContent>This is an informational message.</AlertContent>
+ * </Alert>
+ * @example
+ * // Insight variant for tips and guidance
+ * <Alert variant="insight">
+ *   <AlertTitle>Pro Tip</AlertTitle>
+ *   <AlertContent>Use keyboard shortcuts to navigate faster.</AlertContent>
+ * </Alert>
  */
 declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Alert };

package/dist/esm/components/alert/Alert.js

@@ -1,9 +1,9 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import { uyTv as g } from "@payfit/unity-themes";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
 import { CircularIconButton as a } from "../icon-button/CircularIconButton.js";
-import { Icon as p } from "../icon/Icon.js";
-const w = g({
+import { Icon as w } from "../icon/Icon.js";
+const p = b({
   slots: {
     base: "uy:p-200 uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:sm:gap-200 uy:border uy:border-solid uy:rounded-150 uy:sm:rounded-100",
     content: "uy:flex uy:flex-col uy:flex-1 uy:[&>header:has(+*:not(footer))]:mb-100 uy:[&>*+footer]:mt-200 uy:[&>*:first-child:not(header)]:sm:pt-50",
@@ -12,16 +12,24 @@ const w = g({
   variants: {
     variant: {
       info: {
-        base: "uy:bg-surface-info-lowest uy:border-border-info-lowest"
+        base: "uy:bg-surface-info-lowest uy:border-border-info-lowest",
+        icon: "uy:text-content-info"
       },
       warning: {
-        base: "uy:bg-surface-warning-lowest uy:border-border-warning-lowest"
+        base: "uy:bg-surface-warning-lowest uy:border-border-warning-lowest",
+        icon: "uy:text-content-warning"
       },
       success: {
-        base: "uy:bg-surface-success-lowest uy:border-border-success-lowest"
+        base: "uy:bg-surface-success-lowest uy:border-border-success-lowest",
+        icon: "uy:text-content-success"
       },
       danger: {
-        base: "uy:bg-surface-danger-lowest uy:border-border-danger-lowest"
+        base: "uy:bg-surface-danger-lowest uy:border-border-danger-lowest",
+        icon: "uy:text-content-danger"
+      },
+      insight: {
+        base: "uy:bg-surface-neutral-lowest uy:border-surface-neutral-lowest",
+        icon: "uy:text-content-neutral-lowest"
       }
     }
   },
@@ -29,53 +37,54 @@ const w = g({
     variant: "info"
   }
 }), x = {
-  info: { src: "InfoFilled", color: "content.info" },
-  warning: { src: "WarningFilled", color: "content.warning" },
-  success: { src: "CheckCircleFilled", color: "content.success" },
-  danger: { src: "WarningCircleFilled", color: "content.danger" }
-}, h = b(
+  info: "InfoFilled",
+  warning: "WarningFilled",
+  success: "CheckCircleFilled",
+  danger: "WarningCircleFilled",
+  insight: "LightbulbFilamentFilled"
+}, h = g(
   ({
-    children: c,
-    variant: e,
-    isDismissable: o,
-    onDismiss: s,
-    dismissButtonLabel: t,
-    ...l
-  }, i) => {
-    const { base: u, content: d, icon: y } = w({ variant: e }), f = x[e], m = {
+    children: l,
+    variant: e = "info",
+    isDismissable: o = !1,
+    onDismiss: n,
+    dismissButtonLabel: r,
+    ...i
+  }, u) => {
+    const { base: c, content: d, icon: y } = p({ variant: e }), f = x[e], m = {
       role: e === "danger" ? "alert" : "status",
       "aria-live": e === "danger" ? "assertive" : "polite",
       "aria-atomic": !0,
       "aria-relevant": "additions removals"
     };
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ s(
       "div",
       {
+        ...i,
         "data-dd-privacy": "mask",
-        ref: i,
-        className: u(),
+        ref: u,
+        className: c(),
         ...m,
-        ...l,
         children: [
-          /* @__PURE__ */ n("div", { className: y(), children: [
-            /* @__PURE__ */ r(p, { size: 24, ...f, alt: `${e} alert` }),
-            o && /* @__PURE__ */ r(
+          /* @__PURE__ */ s("div", { className: y(), children: [
+            /* @__PURE__ */ t(w, { src: f, size: 24, role: "presentation" }),
+            o && r && /* @__PURE__ */ t(
               a,
               {
-                title: t,
+                title: r,
                 icon: "CloseOutlined",
-                onPress: s,
+                onPress: n,
                 className: "uy:sm:hidden"
               }
             )
           ] }),
-          /* @__PURE__ */ r("section", { className: d(), children: c }),
-          o && /* @__PURE__ */ r(
+          /* @__PURE__ */ t("section", { className: d(), children: l }),
+          o && r && /* @__PURE__ */ t(
             a,
             {
-              title: t,
+              title: r,
               icon: "CloseOutlined",
-              onPress: s,
+              onPress: n,
               className: "uy:hidden uy:sm:flex"
             }
           )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.17.12",
+  "version": "2.18.0",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -42,7 +42,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.12.0",
-    "@payfit/unity-illustrations": "2.17.12",
+    "@payfit/unity-illustrations": "2.18.0",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.27.1",
@@ -74,8 +74,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.17.12",
-    "@payfit/unity-themes": "2.17.12",
+    "@payfit/unity-icons": "2.18.0",
+    "@payfit/unity-themes": "2.18.0",
     "@storybook/react-vite": "^10.2.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -95,9 +95,9 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.17.12",
-    "@payfit/unity-illustrations": "2.17.12",
-    "@payfit/unity-themes": "2.17.12",
+    "@payfit/unity-icons": "2.18.0",
+    "@payfit/unity-illustrations": "2.18.0",
+    "@payfit/unity-themes": "2.18.0",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.2.17",
     "@storybook/addon-designs": "11.1.2",