@versaur/react 1.0.7 → 1.0.9

package/dist/primitive.d.ts

@@ -6,6 +6,8 @@ import { Badge as Badge_2 } from '@versaur/core/primitive';
 import { BadgeShape } from '@versaur/core/primitive';
 import { BadgeSize } from '@versaur/core/primitive';
 import { BadgeVariant } from '@versaur/core/primitive';
+import { Banner as Banner_2 } from '@versaur/core/primitive';
+import { BannerVariant } from '@versaur/core/primitive';
 import { Button as Button_2 } from '@versaur/core/primitive';
 import { ButtonHTMLAttributes } from 'react';
 import { ButtonSize } from '@versaur/core/primitive';
@@ -141,6 +143,44 @@ export { BadgeSize }
 
 export { BadgeVariant }
 
+/**
+ * Banner component for displaying notifications and alerts
+ *
+ * @example
+ * ```tsx
+ * <Banner variant="danger" icon={<AlertIcon />} onDismiss={() => {}}>
+ *   You need to complete your payment
+ * </Banner>
+ *
+ * <Banner variant="warning">
+ *   This action cannot be undone
+ * </Banner>
+ * ```
+ */
+export declare const Banner: ForwardRefExoticComponent<BannerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual style variant
+     * @default 'info'
+     */
+    variant?: Banner_2.Variant;
+    /**
+     * Icon to display on the left side
+     */
+    icon?: ReactNode;
+    /**
+     * Callback when dismiss button is clicked
+     */
+    onDismiss?: () => void;
+    /**
+     * Banner content (text, icons, etc.)
+     */
+    children?: React.ReactNode;
+}
+
+export { BannerVariant }
+
 /**
  * Button component with data-attribute state machine pattern
  *

package/dist/primitive.js

@@ -1,193 +1,207 @@
-import { jsxs as v, jsx as u } from "react/jsx-runtime";
-import { buttonStyles as j, headingStyles as R, textStyles as k, avatarStyles as I, loaderStyles as w, badgeStyles as K, dotStyles as O, kbdStyles as U } from "@versaur/core/primitive";
-import { LoaderIcon as S, UserIcon as q } from "@versaur/icons";
-import { forwardRef as p, useState as z } from "react";
-import { u as h } from "./use-data-attrs-iPFyfiKN.js";
-import { c as g } from "./cx-B9vmfsc1.js";
-import { I as A } from "./tooltip-M8EGI3lZ.js";
-import { B as et, H as st, T as rt } from "./tooltip-M8EGI3lZ.js";
-const C = p(
+import { jsxs as x, jsx as c } from "react/jsx-runtime";
+import { buttonStyles as k, headingStyles as R, textStyles as w, avatarStyles as S, loaderStyles as K, badgeStyles as z, bannerStyles as A, dotStyles as C, kbdStyles as O } from "@versaur/core/primitive";
+import { LoaderIcon as T, UserIcon as U, XIcon as X } from "@versaur/icons";
+import { forwardRef as u, useState as q } from "react";
+import { u as b } from "./use-data-attrs-iPFyfiKN.js";
+import { c as p } from "./cx-B9vmfsc1.js";
+import { I as B, B as F } from "./tooltip-M8EGI3lZ.js";
+import { H as nt, T as lt } from "./tooltip-M8EGI3lZ.js";
+const G = u(
   ({
     variant: a = "primary",
-    size: o = "medium",
+    size: r = "medium",
     loading: t = !1,
     disabled: e = !1,
-    pressed: r = !1,
+    pressed: o = !1,
     leftIcon: s,
     rightIcon: n,
-    children: i,
-    type: c = "button",
-    onClick: f,
-    className: b,
-    ...d
+    children: l,
+    type: d = "button",
+    onClick: y,
+    className: h,
+    ...m
   }, N) => {
-    const y = !!s, l = !!n, x = !!i;
-    let m;
-    y && l && x ? m = "both-text" : y && x ? m = "left-text" : l && x ? m = "right-text" : y && l ? m = "both" : y ? m = "left" : l && (m = "right");
-    const D = h({
+    const g = !!s, i = !!n, v = !!l;
+    let f;
+    g && i && v ? f = "both-text" : g && v ? f = "left-text" : i && v ? f = "right-text" : g && i ? f = "both" : g ? f = "left" : i && (f = "right");
+    const H = b({
       disabled: e || t,
       loading: t,
-      size: o,
+      size: r,
       variant: a,
-      ...m && { iconConfig: m }
-    }), H = (B) => {
+      ...f && { iconConfig: f }
+    }), j = (I) => {
       if (e || t) {
-        B.preventDefault();
+        I.preventDefault();
         return;
       }
-      f == null || f(B);
+      y == null || y(I);
     };
-    return /* @__PURE__ */ v(
+    return /* @__PURE__ */ x(
       "button",
       {
         ref: N,
-        type: c,
-        className: g(j.button, b),
-        "aria-pressed": r ? "true" : void 0,
+        type: d,
+        className: p(k.button, h),
+        "aria-pressed": o ? "true" : void 0,
         "aria-busy": t ? "true" : void 0,
         "aria-disabled": e || t ? "true" : void 0,
-        ...D,
-        ...d,
-        onClick: H,
+        ...H,
+        ...m,
+        onClick: j,
         children: [
-          t ? /* @__PURE__ */ u(A, { as: S, "aria-label": "Loading", "data-loading-icon": "loader" }) : null,
+          t ? /* @__PURE__ */ c(B, { as: T, "aria-label": "Loading", "data-loading-icon": "loader" }) : null,
           s,
-          i,
+          l,
           n
         ]
       }
     );
   }
 );
-C.displayName = "Button";
-const F = p(
-  ({ as: a = "h2", size: o, weight: t, intent: e, case: r, transform: s, children: n, className: i, ...c }, f) => {
-    const b = a, d = h({
+G.displayName = "Button";
+const J = u(
+  ({ as: a = "h2", size: r, weight: t, intent: e, case: o, transform: s, children: n, className: l, ...d }, y) => {
+    const h = a, m = b({
       as: a,
-      case: r,
+      case: o,
       intent: e,
-      size: o,
+      size: r,
       transform: s,
       weight: t
     });
-    return /* @__PURE__ */ u(b, { ref: f, className: g(R.heading, i), ...d, ...c, children: n });
+    return /* @__PURE__ */ c(h, { ref: y, className: p(R.heading, l), ...m, ...d, children: n });
   }
 );
-F.displayName = "Heading";
-const G = p(
-  ({ as: a = "p", size: o, weight: t, intent: e, case: r, transform: s, children: n, className: i, ...c }, f) => {
-    const b = a, d = h({
+J.displayName = "Heading";
+const M = u(
+  ({ as: a = "p", size: r, weight: t, intent: e, case: o, transform: s, children: n, className: l, ...d }, y) => {
+    const h = a, m = b({
       as: a,
-      case: r,
+      case: o,
       intent: e,
-      size: o,
+      size: r,
       transform: s,
       weight: t
     });
-    return /* @__PURE__ */ u(b, { ref: f, className: g(k.text, i), ...d, ...c, children: n });
+    return /* @__PURE__ */ c(h, { ref: y, className: p(w.text, l), ...m, ...d, children: n });
   }
 );
-G.displayName = "Text";
-const T = p(
-  ({ variant: a = "primary", size: o = "md", shape: t = "circle", children: e, className: r, ...s }, n) => {
-    const i = h({ shape: t, size: o, variant: a }), c = e || /* @__PURE__ */ u(A, { as: q });
-    return /* @__PURE__ */ u("span", { ref: n, className: g(I.avatar, r), role: "img", ...i, ...s, children: c });
+M.displayName = "Text";
+const L = u(
+  ({ variant: a = "primary", size: r = "md", shape: t = "circle", children: e, className: o, ...s }, n) => {
+    const l = b({ shape: t, size: r, variant: a }), d = e || /* @__PURE__ */ c(B, { as: U });
+    return /* @__PURE__ */ c("span", { ref: n, className: p(S.avatar, o), role: "img", ...l, ...s, children: d });
   }
 );
-T.displayName = "Avatar";
-const L = p(({ src: a, alt: o, onError: t, className: e, ...r }, s) => {
-  const [n, i] = z(!1);
-  return n ? null : /* @__PURE__ */ u(
+L.displayName = "Avatar";
+const D = u(({ src: a, alt: r, onError: t, className: e, ...o }, s) => {
+  const [n, l] = q(!1);
+  return n ? null : /* @__PURE__ */ c(
     "img",
     {
       ref: s,
-      className: g(I["avatar-image"], e),
+      className: p(S["avatar-image"], e),
       src: a,
-      alt: o,
-      onError: (c) => {
-        i(!0), t == null || t(c);
+      alt: r,
+      onError: (d) => {
+        l(!0), t == null || t(d);
       },
-      ...r
+      ...o
     }
   );
 });
-L.displayName = "Avatar.Image";
-const W = Object.assign(T, {
-  Image: L
-}), J = p(
-  ({ type: a = "spinner", size: o = "sm", children: t, className: e, ...r }, s) => {
-    const n = h({
-      size: o,
+D.displayName = "Avatar.Image";
+const st = Object.assign(L, {
+  Image: D
+}), P = u(
+  ({ type: a = "spinner", size: r = "sm", children: t, className: e, ...o }, s) => {
+    const n = b({
+      size: r,
       type: a
     });
-    return /* @__PURE__ */ v("div", { ref: s, className: g(w.loader, e), ...n, ...r, children: [
-      a === "spinner" && /* @__PURE__ */ u(A, { as: S, "aria-hidden": "true" }),
+    return /* @__PURE__ */ x("div", { ref: s, className: p(K.loader, e), ...n, ...o, children: [
+      a === "spinner" && /* @__PURE__ */ c(B, { as: T, "aria-hidden": "true" }),
       t
     ] });
   }
 );
-J.displayName = "Loader";
-const M = p(
+P.displayName = "Loader";
+const Q = u(
   ({
     variant: a = "primary",
-    size: o = "medium",
+    size: r = "medium",
     shape: t = "rounded",
     iconLeft: e,
-    iconRight: r,
+    iconRight: o,
     maxWidth: s,
     children: n,
-    style: i,
-    className: c,
-    ...f
-  }, b) => {
-    const d = !!e, N = !!r, y = !!n;
-    let l;
-    d && N && y ? l = "both-text" : d && y ? l = "left-text" : N && y ? l = "right-text" : d && N ? l = "both" : d ? l = "left" : N && (l = "right");
-    const x = h({
+    style: l,
+    className: d,
+    ...y
+  }, h) => {
+    const m = !!e, N = !!o, g = !!n;
+    let i;
+    m && N && g ? i = "both-text" : m && g ? i = "left-text" : N && g ? i = "right-text" : m && N ? i = "both" : m ? i = "left" : N && (i = "right");
+    const v = b({
       shape: t,
-      size: o,
+      size: r,
       variant: a,
-      ...l && { iconConfig: l }
-    }), m = {
-      ...i,
+      ...i && { iconConfig: i }
+    }), f = {
+      ...l,
       ...s && { "--vers-comp-badge-max-width": s }
     };
-    return /* @__PURE__ */ v("div", { ref: b, className: g(K.badge, c), ...x, ...f, style: m, children: [
+    return /* @__PURE__ */ x("div", { ref: h, className: p(z.badge, d), ...v, ...y, style: f, children: [
       e,
       n,
-      r
+      o
     ] });
   }
 );
-M.displayName = "Badge";
-const P = p(
-  ({ variant: a = "primary", size: o = "medium", className: t, ...e }, r) => {
-    const s = h({
-      size: o,
+Q.displayName = "Badge";
+const V = u(
+  ({ variant: a = "info", icon: r, onDismiss: t, children: e, className: o, ...s }, n) => {
+    const l = b({
       variant: a
     });
-    return /* @__PURE__ */ u("span", { ref: r, className: g(O.dot, t), ...s, ...e });
+    return /* @__PURE__ */ x("div", { ref: n, className: p(A.banner, o), ...l, ...s, children: [
+      r && /* @__PURE__ */ c("div", { className: A.icon, children: r }),
+      /* @__PURE__ */ c("div", { className: A.content, children: e }),
+      t && /* @__PURE__ */ c(F, { as: X, variant: "ghost", size: "small", onClick: t, "aria-label": "Dismiss banner" })
+    ] });
+  }
+);
+V.displayName = "Banner";
+const Y = u(
+  ({ variant: a = "primary", size: r = "medium", className: t, ...e }, o) => {
+    const s = b({
+      size: r,
+      variant: a
+    });
+    return /* @__PURE__ */ c("span", { ref: o, className: p(C.dot, t), ...s, ...e });
   }
 );
-P.displayName = "Dot";
-const Q = p(
-  ({ variant: a = "filled", size: o = "md", children: t, className: e, ...r }, s) => {
-    const n = h({ size: o, variant: a });
-    return /* @__PURE__ */ u("kbd", { ref: s, className: g(U.kbd, e), ...n, ...r, children: t });
+Y.displayName = "Dot";
+const Z = u(
+  ({ variant: a = "filled", size: r = "md", children: t, className: e, ...o }, s) => {
+    const n = b({ size: r, variant: a });
+    return /* @__PURE__ */ c("kbd", { ref: s, className: p(O.kbd, e), ...n, ...o, children: t });
   }
 );
-Q.displayName = "Kbd";
+Z.displayName = "Kbd";
 export {
-  W as Avatar,
-  M as Badge,
-  C as Button,
-  et as ButtonIcon,
-  P as Dot,
-  F as Heading,
-  st as Hr,
-  A as Icon,
-  Q as Kbd,
-  J as Loader,
-  G as Text,
-  rt as Tooltip
+  st as Avatar,
+  Q as Badge,
+  V as Banner,
+  G as Button,
+  F as ButtonIcon,
+  Y as Dot,
+  J as Heading,
+  nt as Hr,
+  B as Icon,
+  Z as Kbd,
+  P as Loader,
+  M as Text,
+  lt as Tooltip
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versaur/react",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "React components for Versaur Design System",
   "repository": {
     "type": "git",
@@ -48,7 +48,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@versaur/core": "0.0.3",
+    "@versaur/core": "0.0.5",
     "@versaur/icons": "1.0.0"
   },
   "scripts": {