welcome-ui 10.1.6 → 10.1.7

package/dist/Window.js

@@ -3,13 +3,15 @@ import './Window.css';
 import { jsx as r, jsxs as _ } from "react/jsx-runtime";
 import { c as d } from "./index-PAaZGbyz.js";
 import { f as b } from "./forwardRefWithAs-8eP3ZN15.js";
-import { forwardRef as l, useState as W } from "react";
-import { T as v, a as $, b as B } from "./tab-panel-j7xVgkpE.js";
+import { forwardRef as l, useState as B } from "react";
+import { T as g, a as j, b as A } from "./tab-panel-j7xVgkpE.js";
+import { b as S } from "./Q3KUZPD7-CfUCRwV-.js";
+import { Badge as H } from "./Badge.js";
 import { Icon as m } from "./Icon.js";
-import { Text as h } from "./Text.js";
-const g = "_root_1r7a4_2", j = "_header_1r7a4_11", A = "_media_1r7a4_125", c = {
-  root: g,
-  header: j,
+import { Text as u } from "./Text.js";
+const I = "_root_1r7a4_2", P = "_header_1r7a4_11", R = "_media_1r7a4_125", c = {
+  root: I,
+  header: P,
   "header-title": "_header-title_1r7a4_25",
   "header-tabs": "_header-tabs_1r7a4_31",
   "header-tab-item": "_header-tab-item_1r7a4_35",
@@ -17,122 +19,126 @@ const g = "_root_1r7a4_2", j = "_header_1r7a4_11", A = "_media_1r7a4_125", c = {
   "header-close-button": "_header-close-button_1r7a4_100",
   "header-actions": "_header-actions_1r7a4_118",
   "tab-panel": "_tab-panel_1r7a4_122",
-  media: A,
+  media: R,
   "box-text": "_box-text_1r7a4_126",
   "size-xl": "_size-xl_1r7a4_141",
   "size-lg": "_size-lg_1r7a4_145",
   "size-md": "_size-md_1r7a4_149",
   "size-sm": "_size-sm_1r7a4_153",
   "size-xs": "_size-xs_1r7a4_157"
-}, H = d(c), u = l(
-  ({ children: t, className: a, size: e = "md", ...s }, o) => /* @__PURE__ */ r("div", { className: H("body", `size-${e}`, a), ref: o, ...s, children: t })
+}, k = d(c), h = l(
+  ({ children: t, className: e, size: a = "md", ...s }, o) => /* @__PURE__ */ r("div", { className: k("body", `size-${a}`, e), ref: o, ...s, children: t })
 );
-u.displayName = "Window.Body";
-const P = d(c), x = l(
-  ({ children: t, className: a, ...e }, s) => /* @__PURE__ */ r("div", { className: P("box-text", a), ref: s, ...e, children: t })
+h.displayName = "Window.Body";
+const L = d(c), p = l(
+  ({ children: t, className: e, ...a }, s) => /* @__PURE__ */ r("div", { className: L("box-text", e), ref: s, ...a, children: t })
 );
-x.displayName = "Window.BoxText";
-const n = d(c), p = ({
+p.displayName = "Window.BoxText";
+const n = d(c), x = ({
   "aria-label": t,
-  className: a,
-  icon: e,
+  className: e,
+  icon: a,
   onClick: s,
   ...o
 }) => /* @__PURE__ */ r(
   "button",
   {
     "aria-label": t,
-    className: n("header-action-button", a),
+    className: n("header-action-button", e),
     onClick: s,
     type: "button",
     ...o,
-    children: /* @__PURE__ */ r(m, { name: e })
+    children: /* @__PURE__ */ r(m, { name: a })
   }
 ), w = ({
   as: t,
-  className: a,
-  onClick: e
+  className: e,
+  onClick: a
 }) => /* @__PURE__ */ r(
-  p,
+  x,
   {
     "aria-label": "Close window",
     as: t,
-    className: n("header-close-button", a),
+    className: n("header-close-button", e),
     icon: "times",
-    onClick: e
+    onClick: a
   }
-), R = ({ children: t, store: a }) => /* @__PURE__ */ r($, { className: n("header-tabs"), store: a, children: t }), k = b(
-  ({ as: t, children: a, icon: e, id: s, store: o, ...i }, T) => /* @__PURE__ */ _(
-    v,
-    {
-      className: n("header-tab-item"),
-      id: s,
-      ref: T,
-      render: t ? /* @__PURE__ */ r(t, {}) : void 0,
-      store: o,
-      ...i,
-      children: [
-        e ? /* @__PURE__ */ r(m, { name: e }) : null,
-        /* @__PURE__ */ r(h, { variant: "label-sm", children: a })
-      ]
-    },
-    s
-  )
-), I = ({ children: t, isClosable: a = !1, onClose: e }) => {
+), M = ({ children: t, store: e }) => /* @__PURE__ */ r(j, { className: n("header-tabs"), store: e, children: t }), O = b(
+  ({ as: t, badge: e, children: a, icon: s, id: o, store: i, ...T }, v) => {
+    const { selectedId: W } = S(i), $ = W === o;
+    return /* @__PURE__ */ _(
+      g,
+      {
+        className: n("header-tab-item"),
+        id: o,
+        ref: v,
+        render: t ? /* @__PURE__ */ r(t, {}) : void 0,
+        store: i,
+        ...T,
+        children: [
+          s ? /* @__PURE__ */ r(m, { name: s }) : null,
+          /* @__PURE__ */ r(u, { variant: "label-sm", children: a }),
+          e ? /* @__PURE__ */ r(H, { variant: $ ? "neutral" : "warm", children: e }) : null
+        ]
+      },
+      o
+    );
+  }
+), E = ({ children: t, isClosable: e = !1, onClose: a }) => {
   const s = () => {
-    e == null || e();
+    a == null || a();
   };
   return /* @__PURE__ */ _("div", { className: n("header-actions"), children: [
     t,
-    a ? /* @__PURE__ */ r(w, { onClick: s }) : null
+    e ? /* @__PURE__ */ r(w, { onClick: s }) : null
   ] });
-}, L = ({ isExpandable: t = !1, onExpandChange: a }) => {
-  const [e, s] = W(!1), o = () => {
-    const i = !e;
-    s(i), a == null || a(i);
+}, q = ({ isExpandable: t = !1, onExpandChange: e }) => {
+  const [a, s] = B(!1), o = () => {
+    const i = !a;
+    s(i), e == null || e(i);
   };
   return /* @__PURE__ */ r("div", { className: n("header-actions"), children: t ? /* @__PURE__ */ r(
     "button",
     {
-      "aria-expanded": e,
-      "aria-label": e ? "Collapse window" : "Expand window",
+      "aria-expanded": a,
+      "aria-label": a ? "Collapse window" : "Expand window",
       className: n("header-action-button"),
       onClick: o,
       type: "button",
-      children: /* @__PURE__ */ r(m, { name: e ? "compress-alt" : "arrow-resize-diagonal" })
+      children: /* @__PURE__ */ r(m, { name: a ? "compress-alt" : "arrow-resize-diagonal" })
     }
   ) : null });
-}, M = ({ as: t, className: a, title: e }) => /* @__PURE__ */ r(h, { as: t, className: n("header-title", a), variant: "body-md-strong", children: e }), N = l(
-  ({ children: t, className: a, ...e }, s) => /* @__PURE__ */ r("header", { className: n("header", a), ref: s, ...e, children: t })
+}, D = ({ as: t, className: e, title: a }) => /* @__PURE__ */ r(u, { as: t, className: n("header-title", e), variant: "body-md-strong", children: a }), N = l(
+  ({ children: t, className: e, ...a }, s) => /* @__PURE__ */ r("header", { className: n("header", e), ref: s, ...a, children: t })
 );
 N.displayName = "Window.Header";
-const O = Object.assign(N, {
-  Button: p,
+const F = Object.assign(N, {
+  Button: x,
   CloseButton: w,
-  LeftActions: L,
-  RightActions: I,
-  Tab: k,
-  Tabs: R,
-  Title: M
-}), S = d(c), f = l(
-  ({ children: t, className: a, ...e }, s) => /* @__PURE__ */ r("div", { className: S("media", a), ref: s, ...e, children: t })
+  LeftActions: q,
+  RightActions: E,
+  Tab: O,
+  Tabs: M,
+  Title: D
+}), G = d(c), f = l(
+  ({ children: t, className: e, ...a }, s) => /* @__PURE__ */ r("div", { className: G("media", e), ref: s, ...a, children: t })
 );
 f.displayName = "Window.Media";
-const E = d(c), y = l(
-  ({ children: t, store: a, tabId: e, ...s }, o) => /* @__PURE__ */ r(B, { className: E("tab-panel"), ref: o, store: a, tabId: e, ...s, children: t })
+const J = d(c), y = l(
+  ({ children: t, store: e, tabId: a, ...s }, o) => /* @__PURE__ */ r(A, { className: J("tab-panel"), ref: o, store: e, tabId: a, ...s, children: t })
 );
 y.displayName = "Window.TabPanel";
-const q = d(c), z = b(
-  ({ as: t = "div", children: a, className: e, role: s = "region", ...o }, i) => /* @__PURE__ */ r(t, { className: q("root", e), ref: i, role: s, ...o, children: a })
+const K = d(c), z = b(
+  ({ as: t = "div", children: e, className: a, role: s = "region", ...o }, i) => /* @__PURE__ */ r(t, { className: K("root", a), ref: i, role: s, ...o, children: e })
 );
 z.displayName = "Window";
-const V = Object.assign(z, {
-  Body: u,
-  BoxText: x,
-  Header: O,
+const te = Object.assign(z, {
+  Body: h,
+  BoxText: p,
+  Header: F,
   Media: f,
   TabPanel: y
 });
 export {
-  V as Window
+  te as Window
 };

package/dist/types/components/Window/types.d.ts

@@ -24,6 +24,7 @@ export interface HeaderRightActionsOptions {
 }
 export type HeaderRightActionsProps = MergeProps<PropsWithChildren<HTMLAttributes<HTMLDivElement>>, HeaderRightActionsOptions>;
 export type HeaderTabItem = TabProps & {
+    badge?: number | React.ReactElement | string;
     icon?: IconName;
     id: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "welcome-ui",
-  "version": "10.1.6",
+  "version": "10.1.7",
   "description": "Customizable design system with react, typescript, tailwindcss and ariakit.",
   "files": [
     "dist"