twenty-ui 1.0.0-alpha.2 → 2.42.0

package/dist/surfaces-CMiB6au_.js

@@ -1,494 +0,0 @@
-import { s as K, t as L } from "./theme-constants-Bpkh40Q_.js";
-import { Ot as ea, wt as U } from "./TablerIcons-CSp0ySKT.js";
-import { Fragment as ra, jsx as r, jsxs as I } from "react/jsx-runtime";
-import { clsx as s } from "clsx";
-import oa, { createContext as ta, forwardRef as ia, useContext as da, useRef as na } from "react";
-import { isBoolean as sa, isFunction as W, isNonEmptyArray as la } from "@sniptt/guards";
-import { useRender as S } from "@base-ui/react/use-render";
-import { AlertDialog as k } from "@base-ui/react/alert-dialog";
-import { useDirection as _a } from "@base-ui/react/direction-provider";
-import { Menu as l } from "@base-ui/react/menu";
-import { Dialog as q } from "@base-ui/react/dialog";
-import { Popover as N } from "@base-ui/react/popover";
-var g = (a, e) => (o) => s(a, W(e) ? e(o) : e), ca = "_root_1fskg_1", va = "_solid_1fskg_22", ma = "_outline_1fskg_26", pa = "_soft_1fskg_30", ua = "_sm_1fskg_35", ga = "_md_1fskg_40", ha = "_square_1fskg_46", fa = "_round_1fskg_51", ka = "_accent_1fskg_57", Na = "_success_1fskg_63", Ca = "_warning_1fskg_69", ba = "_hoverable_1fskg_75", wa = "_box_1fskg_113", Pa = "_indicator_1fskg_134", xa = "_check_1fskg_150", Da = "_minus_1fskg_151", b = {
-  root: ca,
-  solid: va,
-  outline: ma,
-  soft: pa,
-  sm: ua,
-  md: ga,
-  square: ha,
-  round: fa,
-  accent: ka,
-  success: Na,
-  warning: Ca,
-  hoverable: ba,
-  box: wa,
-  indicator: Pa,
-  check: xa,
-  minus: Da
-}, ya = "_backdrop_12kqm_1", Ma = "_viewport_12kqm_12", Ia = "_popup_12kqm_31", Ra = "_header_12kqm_73", Ta = "_body_12kqm_81", Aa = "_footer_12kqm_85", Ha = "_title_12kqm_96", La = "_description_12kqm_103", C = {
-  backdrop: ya,
-  viewport: Ma,
-  popup: Ia,
-  header: Ra,
-  body: Ta,
-  footer: Aa,
-  title: Ha,
-  description: La
-}, Sa = ({ render: a, ref: e, className: o, ...t }) => S({
-  render: a,
-  ref: e,
-  props: {
-    ...t,
-    className: s(C.body, o)
-  }
-}), $a = ({ className: a, ...e }) => /* @__PURE__ */ r(k.Description, {
-  ...e,
-  className: g(C.description, a)
-}), Ba = ({ render: a, ref: e, className: o, ...t }) => S({
-  render: a,
-  ref: e,
-  props: {
-    ...t,
-    className: s(C.footer, o)
-  }
-}), za = ({ render: a, ref: e, className: o, ...t }) => S({
-  render: a,
-  ref: e,
-  props: {
-    ...t,
-    className: s(C.header, o)
-  }
-}), Oa = ({ size: a = "md", container: e, keepMounted: o, className: t, ...i }) => {
-  const d = L(), n = _a();
-  return /* @__PURE__ */ I(k.Portal, {
-    container: e === void 0 ? d ?? void 0 : e,
-    keepMounted: o,
-    children: [/* @__PURE__ */ r(k.Backdrop, { className: C.backdrop }), /* @__PURE__ */ r(k.Viewport, {
-      dir: n,
-      className: C.viewport,
-      children: /* @__PURE__ */ r(k.Popup, {
-        ...i,
-        "data-size": a,
-        className: g(C.popup, t)
-      })
-    })]
-  });
-}, Fa = ({ className: a, ...e }) => /* @__PURE__ */ r(k.Title, {
-  ...e,
-  className: g(C.title, a)
-}), Ea = () => ({
-  Root: k.Root,
-  Trigger: k.Trigger,
-  Popup: Oa,
-  Title: Fa,
-  Description: $a,
-  Close: k.Close,
-  Header: za,
-  Body: Sa,
-  Footer: Ba
-}), Sr = /* @__PURE__ */ Ea(), qa = "_card_1cl8g_1", Ga = { card: qa }, $r = ({ children: a, className: e, fullWidth: o, rounded: t, backgroundColor: i, style: d, ...n }) => /* @__PURE__ */ r("div", {
-  className: s(Ga.card, e),
-  "data-full-width": o || void 0,
-  "data-rounded": t || void 0,
-  style: K(i) ? {
-    ...d,
-    "--card-background-color": i
-  } : d,
-  ...n,
-  children: a
-}), ja = "_cardContent_10wri_1", Ka = { cardContent: ja }, Br = ({ children: a, className: e, divider: o, isClickable: t, hasHoverHighlight: i, ...d }) => /* @__PURE__ */ r("div", {
-  className: s(Ka.cardContent, e),
-  "data-divider": o || void 0,
-  "data-clickable": t || void 0,
-  "data-hover-highlight": i || void 0,
-  ...d,
-  children: a
-}), Ua = "_cardFooter_15rlh_1", Wa = { cardFooter: Ua }, zr = ({ children: a, className: e, divider: o, ...t }) => /* @__PURE__ */ r("div", {
-  className: s(Wa.cardFooter, e),
-  "data-no-divider": o === !1 || void 0,
-  ...t,
-  children: a
-}), Va = "_cardHeader_yrli2_1", Xa = { cardHeader: Va }, Or = ({ children: a, className: e, ...o }) => /* @__PURE__ */ r("div", {
-  className: s(Xa.cardHeader, e),
-  ...o,
-  children: a
-}), Ya = "_commandTextContainer_2o210_1", Za = "_commandText_2o210_1", Ja = "_commandKey_2o210_15", G = {
-  commandTextContainer: Ya,
-  commandText: Za,
-  commandKey: Ja
-}, Qa = ({ hotKeys: a, joinLabel: e = "then" }) => /* @__PURE__ */ r("div", {
-  className: G.commandText,
-  children: a && /* @__PURE__ */ r("div", {
-    className: G.commandTextContainer,
-    children: a.map((o, t) => /* @__PURE__ */ I(oa.Fragment, { children: [/* @__PURE__ */ r("div", {
-      className: G.commandKey,
-      children: o
-    }), t < a.length - 1 && e] }, t))
-  })
-}), A = (a) => K(a) && !sa(a) && a !== "", ae = ({ checked: a, disabled: e }) => /* @__PURE__ */ r("span", {
-  "aria-hidden": !0,
-  className: s(b.root, b.solid, b.sm, b.square, b.accent),
-  "data-checked": a || void 0,
-  "data-disabled": e || void 0,
-  children: /* @__PURE__ */ r("span", {
-    className: b.box,
-    children: a && /* @__PURE__ */ r("span", {
-      className: b.indicator,
-      children: /* @__PURE__ */ r(U, { "aria-hidden": !0 })
-    })
-  })
-}), ee = "_root_1mkwm_2", re = "_startIcon_1mkwm_47", oe = "_endIcon_1mkwm_48", te = "_label_1mkwm_60", ie = "_text_1mkwm_70", de = "_description_1mkwm_77", ne = "_inlineDescription_1mkwm_85", se = "_endDescription_1mkwm_90", le = "_hotkeys_1mkwm_95", _e = "_actions_1mkwm_101", ce = "_checkIndicator_1mkwm_117", ve = "_submenuIcon_1mkwm_124", c = {
-  root: ee,
-  startIcon: re,
-  endIcon: oe,
-  label: te,
-  text: ie,
-  description: de,
-  inlineDescription: ne,
-  endDescription: se,
-  hotkeys: le,
-  actions: _e,
-  checkIndicator: ce,
-  submenuIcon: ve
-}, me = ({ color: a = "neutral", selected: e = !1, focused: o = !1, disabled: t = !1, indicator: i = "none", startIcon: d, endIcon: n, description: m, descriptionPlacement: _ = "inline", actions: p, hotkeys: h, hasSubmenu: f = !1, className: u, children: x, render: B, ref: z, onClick: O, ...F }) => {
-  const R = A(m), E = (T) => {
-    if (t) {
-      T.preventDefault();
-      return;
-    }
-    O?.(T);
-  };
-  return S({
-    render: B,
-    ref: z,
-    state: {
-      color: a,
-      indicator: i,
-      selected: e,
-      highlighted: o,
-      disabled: t
-    },
-    props: {
-      ...F,
-      className: s(c.root, u),
-      "aria-disabled": t || void 0,
-      onClick: E,
-      children: /* @__PURE__ */ I(ra, { children: [
-        i === "checkbox" && /* @__PURE__ */ r(ae, {
-          checked: e,
-          disabled: t
-        }),
-        A(d) && /* @__PURE__ */ r("div", {
-          className: c.startIcon,
-          children: d
-        }),
-        /* @__PURE__ */ I("div", {
-          className: c.label,
-          children: [/* @__PURE__ */ r("div", {
-            className: c.text,
-            children: x
-          }), R && _ === "inline" && /* @__PURE__ */ r("div", {
-            className: s(c.description, c.inlineDescription),
-            children: m
-          })]
-        }),
-        R && _ === "end" && /* @__PURE__ */ r("div", {
-          className: s(c.description, c.endDescription),
-          children: m
-        }),
-        A(p) && /* @__PURE__ */ r("div", {
-          className: c.actions,
-          children: p
-        }),
-        la(h) && /* @__PURE__ */ r("div", {
-          className: c.hotkeys,
-          children: /* @__PURE__ */ r(Qa, { hotKeys: h })
-        }),
-        A(n) && /* @__PURE__ */ r("div", {
-          className: c.endIcon,
-          children: n
-        }),
-        i === "check" && e && /* @__PURE__ */ r(U, {
-          className: c.checkIndicator,
-          "aria-hidden": !0
-        }),
-        f && /* @__PURE__ */ r(ea, {
-          className: c.submenuIcon,
-          "aria-hidden": !0
-        })
-      ] })
-    }
-  });
-}, $ = ({ color: a = "neutral", startIcon: e, endIcon: o, description: t, descriptionPlacement: i, hotkeys: d, disabled: n = !1, children: m, render: _, ...p }, h) => ({
-  ...p,
-  disabled: n,
-  render: (f, u) => /* @__PURE__ */ r(me, {
-    ...f,
-    render: W(_) ? (x) => _(x, u) : _,
-    color: a,
-    disabled: n,
-    startIcon: e,
-    endIcon: o,
-    description: t,
-    descriptionPlacement: i,
-    hotkeys: d,
-    ...h?.(u),
-    children: m
-  })
-}), pe = (a) => /* @__PURE__ */ r(l.CheckboxItem, { ...$(a, (e) => ({
-  indicator: "checkbox",
-  selected: e.checked
-})) }), ue = "_positioner_3411d_1", ge = "_popup_3411d_5", he = "_group_3411d_36", fe = "_groupLabel_3411d_42", ke = "_separator_3411d_54", P = {
-  positioner: ue,
-  popup: ge,
-  group: he,
-  groupLabel: fe,
-  separator: ke
-}, Ne = ({ className: a, ...e }) => /* @__PURE__ */ r(l.Group, {
-  ...e,
-  className: g(P.group, a)
-}), Ce = ({ className: a, ...e }) => /* @__PURE__ */ r(l.GroupLabel, {
-  ...e,
-  className: g(P.groupLabel, a)
-}), be = (a) => /* @__PURE__ */ r(l.Item, { ...$(a) }), V = ta(!1), we = {
-  root: {
-    side: "bottom",
-    align: "start",
-    sideOffset: 8,
-    alignOffset: 0
-  },
-  submenu: {
-    side: "inline-end",
-    align: "start",
-    sideOffset: 0,
-    alignOffset: -4
-  }
-}, Pe = ({ side: a, align: e, sideOffset: o, alignOffset: t, anchor: i, keepMounted: d, className: n, children: m, ..._ }) => {
-  const p = L(), { container: h = p ?? void 0, ...f } = _, u = we[da(V) ? "submenu" : "root"];
-  return /* @__PURE__ */ r(l.Portal, {
-    container: h,
-    keepMounted: d,
-    children: /* @__PURE__ */ r(l.Positioner, {
-      side: a ?? u.side,
-      align: e ?? u.align,
-      sideOffset: o ?? u.sideOffset,
-      alignOffset: t ?? u.alignOffset,
-      anchor: i,
-      className: P.positioner,
-      children: /* @__PURE__ */ r(l.Popup, {
-        ...f,
-        className: g(P.popup, n),
-        children: m
-      })
-    })
-  });
-}, xe = ({ className: a, ...e }) => /* @__PURE__ */ r(l.RadioGroup, {
-  ...e,
-  className: g(P.group, a)
-}), De = (a) => /* @__PURE__ */ r(l.RadioItem, { ...$(a, (e) => ({
-  indicator: "check",
-  selected: e.checked
-})) }), ye = ({ className: a, ...e }) => /* @__PURE__ */ r(l.Separator, {
-  ...e,
-  className: g(P.separator, a)
-}), Me = ({ children: a, ...e }) => /* @__PURE__ */ r(V.Provider, {
-  value: !0,
-  children: /* @__PURE__ */ r(l.SubmenuRoot, {
-    ...e,
-    children: a
-  })
-}), Ie = (a) => /* @__PURE__ */ r(l.SubmenuTrigger, { ...$(a, () => ({ hasSubmenu: !0 })) }), Fr = {
-  Root: l.Root,
-  Trigger: l.Trigger,
-  Popup: Pe,
-  Item: be,
-  CheckboxItem: pe,
-  RadioGroup: xe,
-  RadioItem: De,
-  Group: Ne,
-  GroupLabel: Ce,
-  Separator: ye,
-  SubmenuRoot: Me,
-  SubmenuTrigger: Ie
-}, Re = "_modal_4h0sx_1", Te = "_small_4h0sx_20", Ae = "_medium_4h0sx_24", He = "_large_4h0sx_28", Le = "_extraLarge_4h0sx_32", Se = "_paddingNone_4h0sx_37", $e = "_paddingSmall_4h0sx_41", Be = "_paddingMedium_4h0sx_45", ze = "_paddingLarge_4h0sx_49", Oe = "_overlayDark_4h0sx_53", Fe = "_smallBorderRadius_4h0sx_57", Ee = "_overlayTransparent_4h0sx_61", qe = "_mobile_4h0sx_67", Ge = "_narrowWidth_4h0sx_74", je = "_autoHeight_4h0sx_78", Ke = "_fullscreen_4h0sx_82", v = {
-  modal: Re,
-  small: Te,
-  medium: Ae,
-  large: He,
-  extraLarge: Le,
-  paddingNone: Se,
-  paddingSmall: $e,
-  paddingMedium: Be,
-  paddingLarge: ze,
-  overlayDark: Oe,
-  smallBorderRadius: Fe,
-  overlayTransparent: Ee,
-  mobile: qe,
-  narrowWidth: Ge,
-  autoHeight: je,
-  fullscreen: Ke
-}, Ue = "_backdrop_1oefj_1", We = "_overlayLight_1oefj_16", Ve = "_inContainer_1oefj_20", j = {
-  backdrop: Ue,
-  overlayLight: We,
-  inContainer: Ve
-}, X = ia(({ overlay: a, backdropZIndex: e, isInContainer: o, className: t, style: i, ...d }, n) => /* @__PURE__ */ r("div", {
-  ref: n,
-  className: s(j.backdrop, a === "light" && j.overlayLight, o && j.inContainer, t),
-  style: {
-    "--modal-backdrop-z-index": e,
-    ...i
-  },
-  ...d
-}));
-X.displayName = "ModalBackdrop";
-var Xe = 40, Ye = 39, Ze = /* @__PURE__ */ new Set([
-  "ArrowUp",
-  "ArrowDown",
-  "ArrowLeft",
-  "ArrowRight",
-  "Home",
-  "End"
-]), Je = {
-  none: v.paddingNone,
-  small: v.paddingSmall,
-  medium: v.paddingMedium,
-  large: v.paddingLarge
-}, Qe = {
-  dark: v.overlayDark,
-  light: void 0,
-  transparent: v.overlayTransparent
-}, Er = ({ isOpen: a, ariaLabel: e, children: o, size: t = "medium", padding: i = "medium", overlay: d = "dark", isMobile: n = !1, isInContainer: m = !1, container: _, gap: p, smallBorderRadius: h, narrowWidth: f, autoHeight: u, width: x, modalZIndex: B = Xe, backdropZIndex: z = Ye, backdropTestId: O = "modal-backdrop", backdropClickOutsideId: F, preventClickOutside: R, onBackdropMouseDown: E, modalRef: T }) => {
-  const Y = na(null), Z = T ?? Y, J = L(), Q = K(_) ? _ : J ?? void 0, aa = (D) => {
-    D.stopPropagation(), E?.(D);
-  };
-  return /* @__PURE__ */ r(q.Root, {
-    open: a,
-    modal: !1,
-    disablePointerDismissal: !0,
-    children: /* @__PURE__ */ r(q.Portal, {
-      container: Q,
-      children: /* @__PURE__ */ r(X, {
-        "data-testid": O,
-        "data-click-outside-id": F,
-        onMouseDown: aa,
-        overlay: d,
-        backdropZIndex: z,
-        isInContainer: m,
-        children: /* @__PURE__ */ r(q.Popup, {
-          initialFocus: !1,
-          finalFocus: !1,
-          onKeyDown: (D) => {
-            Ze.has(D.key) && D.preventBaseUIHandler();
-          },
-          render: /* @__PURE__ */ r("div", {
-            ref: Z,
-            "aria-label": e,
-            className: s(v.modal, v[t], Je[i], Qe[d], n && v.mobile, h && v.smallBorderRadius, f && v.narrowWidth, u && v.autoHeight),
-            style: {
-              "--modal-z-index": B,
-              width: n ? void 0 : x,
-              gap: p !== void 0 ? `var(--t-spacing-${p})` : void 0
-            },
-            "data-globally-prevent-click-outside": R
-          }),
-          children: o
-        })
-      })
-    })
-  });
-}, ar = "_content_1g670_1", er = "_verticallyCentered_1g670_11", rr = "_horizontallyCentered_1g670_15", or = "_overflowHidden_1g670_19", tr = "_withContentPadding_1g670_23", ir = "_noPadding_1g670_27", w = {
-  content: ar,
-  verticallyCentered: er,
-  horizontallyCentered: rr,
-  overflowHidden: or,
-  withContentPadding: tr,
-  noPadding: ir
-}, qr = ({ children: a, isVerticallyCentered: e, isHorizontallyCentered: o, noPadding: t, overflowHidden: i, gap: d, contentPadding: n }) => /* @__PURE__ */ r("div", {
-  className: s(w.content, e && w.verticallyCentered, o && w.horizontallyCentered, i && w.overflowHidden, n !== void 0 && w.withContentPadding, t && w.noPadding),
-  style: {
-    gap: d !== void 0 ? `var(--t-spacing-${d})` : void 0,
-    "--modal-content-padding": n !== void 0 ? `var(--t-spacing-${n})` : void 0
-  },
-  children: a
-}), dr = "_footer_1lanc_1", nr = "_autoHeight_1lanc_12", sr = "_centered_1lanc_16", lr = "_smallPadding_1lanc_20", H = {
-  footer: dr,
-  autoHeight: nr,
-  centered: sr,
-  smallPadding: lr
-}, Gr = ({ children: a, autoHeight: e, centered: o, smallPadding: t, className: i }) => /* @__PURE__ */ r("div", {
-  className: s(H.footer, e && H.autoHeight, o && H.centered, t && H.smallPadding, i),
-  children: a
-}), _r = "_header_1njem_1", cr = "_autoHeight_1njem_11", vr = "_noPadding_1njem_15", mr = "_withHorizontalPadding_1njem_19", pr = "_withBorderBottom_1njem_29", y = {
-  header: _r,
-  autoHeight: cr,
-  noPadding: vr,
-  withHorizontalPadding: mr,
-  withBorderBottom: pr
-}, jr = ({ children: a, noPadding: e, autoHeight: o, hasBorderBottom: t, paddingHorizontal: i, backgroundColor: d }) => /* @__PURE__ */ r("div", {
-  className: s(y.header, o && y.autoHeight, e && y.noPadding, i !== void 0 && y.withHorizontalPadding, t && y.withBorderBottom),
-  style: {
-    "--modal-header-padding-horizontal": i !== void 0 ? `var(--t-spacing-${i})` : void 0,
-    backgroundColor: d
-  },
-  children: a
-}), ur = "_positioner_zlrze_1", gr = "_popup_zlrze_5", hr = "_title_zlrze_29", fr = "_description_zlrze_36", kr = "_arrow_zlrze_42", M = {
-  positioner: ur,
-  popup: gr,
-  title: hr,
-  description: fr,
-  arrow: kr
-}, Nr = ({ className: a, ...e }) => /* @__PURE__ */ r(N.Description, {
-  ...e,
-  className: g(M.description, a)
-}), Cr = ({ side: a = "bottom", align: e = "center", sideOffset: o = 8, alignOffset: t, arrow: i = !1, anchor: d, container: n, keepMounted: m, className: _, children: p, ...h }) => {
-  const f = L();
-  return /* @__PURE__ */ r(N.Portal, {
-    container: n ?? f ?? void 0,
-    keepMounted: m,
-    children: /* @__PURE__ */ r(N.Positioner, {
-      side: a,
-      align: e,
-      sideOffset: o,
-      alignOffset: t,
-      anchor: d,
-      className: M.positioner,
-      children: /* @__PURE__ */ I(N.Popup, {
-        ...h,
-        className: g(M.popup, _),
-        children: [i && /* @__PURE__ */ r(N.Arrow, { className: M.arrow }), p]
-      })
-    })
-  });
-}, br = ({ className: a, ...e }) => /* @__PURE__ */ r(N.Title, {
-  ...e,
-  className: g(M.title, a)
-}), Kr = {
-  Root: N.Root,
-  Trigger: N.Trigger,
-  Popup: Cr,
-  Title: br,
-  Description: Nr,
-  Close: N.Close
-};
-export {
-  b as _,
-  Er as a,
-  me as c,
-  Qa as d,
-  Or as f,
-  Sr as g,
-  $r as h,
-  qr as i,
-  c as l,
-  Br as m,
-  jr as n,
-  X as o,
-  zr as p,
-  Gr as r,
-  Fr as s,
-  Kr as t,
-  A as u,
-  g as v
-};

package/dist/surfaces.cjs

@@ -1 +0,0 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./OverflowingTextWithTooltip-DUtQD8sI.cjs"),o=require("./surfaces-BgMtsVvD.cjs");exports.AlertDialog=o.AlertDialog;exports.AppTooltip=e.AppTooltip;exports.Card=o.Card;exports.CardContent=o.CardContent;exports.CardFooter=o.CardFooter;exports.CardHeader=o.CardHeader;exports.Menu=o.Menu;exports.Modal=o.Modal;exports.ModalBackdrop=o.ModalBackdrop;exports.ModalContent=o.ModalContent;exports.ModalFooter=o.ModalFooter;exports.ModalHeader=o.ModalHeader;exports.OverflowingTextWithTooltip=e.OverflowingTextWithTooltip;exports.Popover=o.Popover;exports.TooltipDelay=e.TooltipDelay;exports.TooltipPosition=e.TooltipPosition;

package/dist/surfaces.mjs

@@ -1,20 +0,0 @@
-import { i as a, n as r, r as t, t as s } from "./OverflowingTextWithTooltip-D2ri4HNc.js";
-import { a as i, f as l, g as d, h as p, i as n, m as C, n as M, o as m, p as T, r as f, s as g, t as h } from "./surfaces-CMiB6au_.js";
-export {
-  d as AlertDialog,
-  r as AppTooltip,
-  p as Card,
-  C as CardContent,
-  T as CardFooter,
-  l as CardHeader,
-  g as Menu,
-  i as Modal,
-  m as ModalBackdrop,
-  n as ModalContent,
-  f as ModalFooter,
-  M as ModalHeader,
-  s as OverflowingTextWithTooltip,
-  h as Popover,
-  t as TooltipDelay,
-  a as TooltipPosition
-};