welcome-ui/dist/Window.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import './Window.css';
import { jsx as o, jsxs as x } from "react/jsx-runtime";
import { c as d } from "./index-B6iGEm-i.js";
import { f as b } from "./forwardRefWithAs-8eP3ZN15.js";
import { forwardRef as l, useState as B } from "react";
import { T as I, a as g, b as j } from "./tab-panel-Cc3MfOBM.js";
import { b as A } from "./Q5W46E73-5xQblshY.js";
import { Badge as S } from "./Badge.js";
import { Icon as m } from "./Icon.js";
import { Text as u } from "./Text.js";
const H = "_root_17x8z_2", P = "_header_17x8z_11", R = "_media_17x8z_125", c = {
  root: H,
  header: P,
  "header-title": "_header-title_17x8z_25",
  "header-tabs": "_header-tabs_17x8z_31",
  "header-tab-item": "_header-tab-item_17x8z_35",
  "header-action-button": "_header-action-button_17x8z_69",
  "header-close-button": "_header-close-button_17x8z_100",
  "header-actions": "_header-actions_17x8z_118",
  "tab-panel": "_tab-panel_17x8z_122",
  media: R,
  "box-text": "_box-text_17x8z_126",
  "size-xl": "_size-xl_17x8z_141",
  "size-lg": "_size-lg_17x8z_145",
  "size-md": "_size-md_17x8z_149",
  "size-sm": "_size-sm_17x8z_153",
  "size-xs": "_size-xs_17x8z_157"
}, k = d(c), h = l(
  ({ children: t, className: a, size: e = "md", ...s }, n) => /* @__PURE__ */ o("div", { className: k("body", `size-${e}`, a), ref: n, ...s, children: t })
);
h.displayName = "Window.Body";
const L = d(c), z = l(
  ({ children: t, className: a, ...e }, s) => /* @__PURE__ */ o("div", { className: L("box-text", a), ref: s, ...e, children: t })
);
z.displayName = "Window.BoxText";
const i = d(c), p = ({
  "aria-label": t,
  className: a,
  icon: e,
  isActive: s,
  onClick: n,
  ...r
}) => /* @__PURE__ */ o(
  "button",
  {
    "aria-label": t,
    "aria-pressed": s,
    className: i("header-action-button", a),
    onClick: n,
    type: "button",
    ...r,
    children: /* @__PURE__ */ o(m, { name: e })
  }
), w = ({
  as: t,
  className: a,
  onClick: e
}) => /* @__PURE__ */ o(
  p,
  {
    "aria-label": "Close window",
    as: t,
    className: i("header-close-button", a),
    icon: "times",
    onClick: e
  }
), M = ({ children: t, className: a, store: e, ...s }) => /* @__PURE__ */ o(g, { className: i("header-tabs", a), store: e, ...s, children: t }), O = b(
  ({ as: t, badge: a, children: e, className: s, icon: n, id: r, store: _, ...v }, W) => {
    const $ = A(_, "selectedId") === r;
    return /* @__PURE__ */ x(
      I,
      {
        className: i("header-tab-item", s),
        id: r,
        ref: W,
        render: t ? /* @__PURE__ */ o(t, {}) : void 0,
        store: _,
        ...v,
        children: [
          n ? /* @__PURE__ */ o(m, { name: n }) : null,
          /* @__PURE__ */ o(u, { variant: "label-sm", children: e }),
          a ? /* @__PURE__ */ o(S, { variant: $ ? "neutral" : "warm", children: a }) : null
        ]
      },
      r
    );
  }
), E = ({ children: t, isClosable: a = !1, onClose: e }) => {
  const s = () => {
    e == null || e();
  };
  return /* @__PURE__ */ x("div", { className: i("header-actions"), children: [
    t,
    a ? /* @__PURE__ */ o(w, { onClick: s }) : null
  ] });
}, q = ({ isExpandable: t = !1, onExpandChange: a }) => {
  const [e, s] = B(!1), n = () => {
    const r = !e;
    s(r), a == null || a(r);
  };
  return /* @__PURE__ */ o("div", { className: i("header-actions"), children: t ? /* @__PURE__ */ o(
    "button",
    {
      "aria-expanded": e,
      "aria-label": e ? "Collapse window" : "Expand window",
      className: i("header-action-button"),
      onClick: n,
      type: "button",
      children: /* @__PURE__ */ o(m, { name: e ? "compress-alt" : "arrow-resize-diagonal" })
    }
  ) : null });
}, C = ({ as: t, className: a, title: e }) => /* @__PURE__ */ o(u, { as: t, className: i("header-title", a), variant: "body-md-strong", children: e }), N = l(
  ({ children: t, className: a, ...e }, s) => /* @__PURE__ */ o("header", { className: i("header", a), ref: s, ...e, children: t })
);
N.displayName = "Window.Header";
const D = Object.assign(N, {
  Button: p,
  CloseButton: w,
  LeftActions: q,
  RightActions: E,
  Tab: O,
  Tabs: M,
  Title: C
}), F = d(c), f = l(
  ({ children: t, className: a, ...e }, s) => /* @__PURE__ */ o("div", { className: F("media", a), ref: s, ...e, children: t })
);
f.displayName = "Window.Media";
const G = d(c), y = l(
  ({ children: t, store: a, tabId: e, ...s }, n) => /* @__PURE__ */ o(j, { className: G("tab-panel"), ref: n, store: a, tabId: e, ...s, children: t })
);
y.displayName = "Window.TabPanel";
const J = d(c), T = b(
  ({ as: t = "div", children: a, className: e, role: s = "region", ...n }, r) => /* @__PURE__ */ o(t, { className: J("root", e), ref: r, role: s, ...n, children: a })
);
T.displayName = "Window";
const se = Object.assign(T, {
  Body: h,
  BoxText: z,
  Header: D,
  Media: f,
  TabPanel: y
});
export {
  se as Window,
  c as windowClasses
};