@actioneer/ads 0.1.0

package/components/alert.d.ts

@@ -0,0 +1,21 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Alert — persistent inline messaging, ported from HeroUI v3's anatomy onto
+ * ADS tokens: a NEUTRAL surface (no colored wash) where only the indicator
+ * icon and the title carry the variant color; the description stays muted.
+ * Flat per the elevation rule (an alert isn't clickable); generous 2xl
+ * radius per the source. The `--alert-accent` var carries the variant color
+ * down to AlertTitle without prop-drilling.
+ */
+declare const alertVariants: (props?: ({
+    variant?: "success" | "warning" | "danger" | "info" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+    icon?: React.ReactNode;
+    onClose?: () => void;
+}
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export {};

package/components/alert.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import * as i from "react";
+import { cva as m } from "class-variance-authority";
+import { Info as l, WarningCircle as g, Warning as p, CheckCircle as x, Close as v } from "../lib/icons.js";
+import { cn as n } from "../lib/cn.js";
+const h = m(
+  "flex w-full items-start gap-4 rounded-2xl bg-muted px-4 py-3",
+  {
+    variants: {
+      variant: {
+        default: "[--alert-accent:var(--foreground)]",
+        success: "[--alert-accent:var(--color-success-700)]",
+        warning: "[--alert-accent:var(--color-warning-700)]",
+        danger: "[--alert-accent:var(--color-danger-700)]",
+        info: "[--alert-accent:var(--color-info-700)]"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+), w = {
+  default: l,
+  success: x,
+  warning: p,
+  danger: g,
+  info: l
+}, N = i.forwardRef(
+  ({ className: r, variant: t = "default", icon: a, onClose: s, children: o, ...c }, d) => {
+    const f = w[t ?? "default"];
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: d,
+        role: "alert",
+        className: n(h({ variant: t }), r),
+        ...c,
+        children: [
+          /* @__PURE__ */ e("span", { className: "flex shrink-0 select-none items-center justify-center p-1 text-(--alert-accent) [&_svg]:size-4", children: a ?? /* @__PURE__ */ e(f, { "aria-hidden": !0 }) }),
+          /* @__PURE__ */ e("div", { className: "flex min-w-0 grow flex-col items-start", children: o }),
+          s && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Dismiss",
+              onClick: s,
+              className: n(
+                "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground",
+                "transition-colors hover:bg-fill hover:text-foreground",
+                "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+                "[&_svg]:size-4"
+              ),
+              children: /* @__PURE__ */ e(v, { "aria-hidden": !0 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+N.displayName = "Alert";
+const b = i.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ e(
+  "p",
+  {
+    ref: a,
+    className: n("text-xs font-medium leading-6 text-(--alert-accent)", r),
+    ...t
+  }
+));
+b.displayName = "AlertTitle";
+const y = i.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ e("p", { ref: a, className: n("text-xs text-muted-foreground", r), ...t }));
+y.displayName = "AlertDescription";
+export {
+  N as Alert,
+  y as AlertDescription,
+  b as AlertTitle
+};