@cystackapp/ui 1.4.1 → 1.5.0

package/dist/components/collapsible/Collapsible.js

@@ -0,0 +1,50 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as f, useEffect as c } from "react";
+import { cn as s } from "../../utils/cn.js";
+const g = ({
+  expanded: i,
+  duration: n = 300,
+  className: e,
+  children: a
+}) => {
+  const t = `${n}ms`, [l, o] = f(
+    i ? "visible" : "hidden"
+  );
+  return c(() => {
+    i && o("visible");
+  }, [i]), /* @__PURE__ */ r(
+    "div",
+    {
+      className: s(
+        "grid motion-safe:transition-[grid-template-rows] ease-out",
+        i ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        e
+      ),
+      style: { transitionDuration: t },
+      onTransitionEnd: (m) => {
+        m.propertyName === "grid-template-rows" && !i && o("hidden");
+      },
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: s("min-h-0", {
+            "invisible opacity-0": !i
+          }),
+          style: {
+            overflow: l,
+            transitionProperty: "opacity, visibility",
+            transitionDuration: `${t}, 0s`,
+            transitionTimingFunction: "ease-out",
+            // Delay visibility so it hides only after the fade finishes.
+            // When expanding, no delay — content becomes visible immediately.
+            transitionDelay: i ? "0s, 0s" : `0s, ${t}`
+          },
+          children: a
+        }
+      )
+    }
+  );
+};
+export {
+  g as Collapsible
+};

package/dist/components/input/Input.d.ts

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+    /** Marks the input as in an error state — switches the focus ring to error-v2. */
+    invalid?: boolean;
+    /** Content rendered before the input (e.g. an icon). */
+    prefix?: ReactNode;
+    /** Content rendered after the input (e.g. a unit label or clear button). */
+    suffix?: ReactNode;
+}
+export declare const Input: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/input/Input.js

@@ -0,0 +1,39 @@
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { cn as c } from "../../utils/cn.js";
+const e = {
+  default: "border-gray-v2-300 focus-within:border-brand-v2 focus-within:outline-brand-v2",
+  invalid: "border-error-v2-300 focus-within:border-error-v2 focus-within:outline-error-v2",
+  disabled: "bg-gray-v2-50 border-gray-v2-300 cursor-not-allowed"
+}, p = u(
+  ({ invalid: o, prefix: a, suffix: n, className: i, disabled: r, ...t }, l) => /* @__PURE__ */ d(
+    "span",
+    {
+      className: c(
+        "bg-white rounded-lg border shadow-xs flex items-center gap-2 px-3 min-h-10 text-md transition-all outline outline-transparent",
+        o ? e.invalid : e.default,
+        { [e.disabled]: r },
+        i
+      ),
+      children: [
+        a,
+        /* @__PURE__ */ s(
+          "input",
+          {
+            ref: l,
+            disabled: r,
+            "aria-invalid": o,
+            className: "flex-1 min-w-0 bg-transparent outline-none text-gray-v2-900 placeholder:text-gray-v2-500 disabled:text-gray-v2-400 disabled:cursor-not-allowed",
+            ...t,
+            placeholder: r ? void 0 : t.placeholder
+          }
+        ),
+        n
+      ]
+    }
+  )
+);
+p.displayName = "Input";
+export {
+  p as Input
+};

package/dist/components/modal/Modal.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface Props {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    children?: ReactNode;
+    className?: string;
+}
+export declare const Modal: ({ isOpen, onOpenChange, children, className }: Props) => import('react').ReactPortal;
+export {};

package/dist/components/modal/Modal.js

@@ -0,0 +1,68 @@
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { useId as p, useRef as f, useCallback as x, useEffect as g } from "react";
+import { createPortal as C } from "react-dom";
+import { XClose as w } from "@untitled-ui/icons-react";
+import { Button as E } from "../button/Button.js";
+import { cn as u } from "../../utils/cn.js";
+import { ModalContext as k } from "./modal-context.js";
+import { useClickOutsideModal as A } from "./use-click-outside-modal.js";
+const D = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', B = ({ isOpen: e, onOpenChange: a, children: m, className: b }) => {
+  const i = p(), n = f(null), o = f(null), y = (t) => {
+    if (!(!e || o.current === null) && (t.key === "Escape" && a(!1), t.key === "Tab")) {
+      const l = Array.from(
+        o.current.querySelectorAll(D)
+      ).filter((v) => !v.closest("[inert]"));
+      if (l.length === 0) return;
+      const c = l[0], d = l[l.length - 1];
+      t.shiftKey ? document.activeElement === c && (t.preventDefault(), d.focus()) : document.activeElement === d && (t.preventDefault(), c.focus());
+    }
+  }, s = x(
+    () => a(!1),
+    [a]
+  );
+  return A(s, n, [o]), g(() => (document.body.classList.toggle("overflow-hidden", e), () => document.body.classList.remove("overflow-hidden")), [e]), C(
+    /* @__PURE__ */ r(k.Provider, { value: i, children: /* @__PURE__ */ r(
+      "div",
+      {
+        ref: n,
+        className: u(
+          "fixed inset-0 flex items-center justify-center z-10 transition-opacity bg-gray-v2-950/48",
+          { "opacity-0 pointer-events-none": !e }
+        ),
+        onKeyDown: y,
+        children: /* @__PURE__ */ h(
+          "div",
+          {
+            ref: o,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": i,
+            className: u(
+              "relative min-h-20 w-xl p-6 rounded-xl bg-white flex flex-col gap-5 overflow-hidden transition-all",
+              { "scale-90": !e },
+              b
+            ),
+            children: [
+              /* @__PURE__ */ r(
+                E,
+                {
+                  variant: "tertiary",
+                  color: "gray",
+                  className: "absolute right-0 top-0 m-4",
+                  onClick: s,
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ r(w, { className: "size-6 shrink-0 text-gray-v2-400" })
+                }
+              ),
+              m
+            ]
+          }
+        )
+      }
+    ) }),
+    document.body
+  );
+};
+export {
+  B as Modal
+};

package/dist/components/modal/helpers/HeaderIcon.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode, SVGProps } from 'react';
+type IconType = "brand" | "gray" | "success" | "warning" | "error";
+interface Props {
+    type?: IconType;
+    Icon: (props: SVGProps<SVGSVGElement>) => ReactNode;
+}
+export declare const ModalHeaderIcon: ({ type, Icon }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modal/helpers/HeaderIcon.js

@@ -0,0 +1,32 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as n } from "../../../utils/cn.js";
+import a from "./circles-sm.svg.js";
+const t = {
+  brand: "bg-brand-v2-100 border-brand-v2-50",
+  gray: "bg-gray-v2-100 border-gray-v2-50",
+  success: "bg-success-v2-100 border-success-v2-50",
+  warning: "bg-warning-v2-100 border-warning-v2-50",
+  error: "bg-error-v2-100 border-error-v2-50"
+}, c = {
+  brand: "text-brand-v2-600",
+  gray: "text-gray-v2-600",
+  success: "text-success-v2-600",
+  warning: "text-warning-v2-600",
+  error: "text-error-v2-600"
+}, g = ({ type: r = "brand", Icon: s }) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: n(
+      "relative h-13 w-13 min-w-13 flex items-center justify-center rounded-full border-8",
+      t[r]
+    ),
+    children: [
+      /* @__PURE__ */ e(s, { className: n("h-6 w-6 min-w-6", c[r]) }),
+      /* @__PURE__ */ e(a, { className: "absolute h-84 w-84 min-w-84 pointer-events-none" })
+    ]
+  }
+);
+export {
+  g as ModalHeaderIcon
+};

package/dist/components/modal/helpers/Title.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+}
+export declare const ModalTitle: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modal/helpers/Title.js

@@ -0,0 +1,9 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useModalContext as r } from "../modal-context.js";
+const i = ({ children: t }) => {
+  const o = r();
+  return /* @__PURE__ */ e("h2", { id: o, className: "text-lg font-semibold text-gray-v2-900", children: t });
+};
+export {
+  i as ModalTitle
+};

package/dist/components/modal/helpers/circles-sm.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const r = (t) => /* @__PURE__ */ e.createElement("svg", { height: 336, width: 336, viewBox: "0 0 336 336", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("radialGradient", { id: "radialGradient-mask", cx: "50%", cy: "50%", r: "50%", fx: "50%", fy: "50%" }, /* @__PURE__ */ e.createElement("stop", { offset: "0%", stopColor: "white" }), /* @__PURE__ */ e.createElement("stop", { offset: "100%", stopColor: "black" })), /* @__PURE__ */ e.createElement("mask", { id: "background-pattern-decorative-mask" }, /* @__PURE__ */ e.createElement("rect", { x: 0, y: 0, height: "100%", width: "100%", fill: "url(#radialGradient-mask)" }))), /* @__PURE__ */ e.createElement("g", { mask: "url(#background-pattern-decorative-mask)" }, /* @__PURE__ */ e.createElement("circle", { cx: 168, cy: 168, r: 168, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 168, cy: 168, r: 144, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 168, cy: 168, r: 120, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 168, cy: 168, r: 96, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 168, cy: 168, r: 72, stroke: "#E9EAEB", fill: "transparent" }), /* @__PURE__ */ e.createElement("circle", { cx: 168, cy: 168, r: 48, stroke: "#E9EAEB", fill: "transparent" })));
+export {
+  r as default
+};

package/dist/components/modal/modal-context.d.ts

@@ -0,0 +1,2 @@
+export declare const ModalContext: import('react').Context<string | undefined>;
+export declare function useModalContext(): string | undefined;

package/dist/components/modal/modal-context.js

@@ -0,0 +1,9 @@
+import { createContext as t, useContext as o } from "react";
+const e = t(void 0);
+function r() {
+  return o(e);
+}
+export {
+  e as ModalContext,
+  r as useModalContext
+};

package/dist/components/modal/use-click-outside-modal.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useClickOutsideModal: (onClose: () => void, overlayRef: RefObject<HTMLDivElement>, modalRefs: RefObject<HTMLElement>[]) => void;

package/dist/components/modal/use-click-outside-modal.js

@@ -0,0 +1,15 @@
+import { useEffect as u } from "react";
+const d = (e, n, r) => {
+  u(() => {
+    function i(o) {
+      const { target: t } = o;
+      t instanceof Node && n.current && n.current.contains(t) && r.every((c) => !c.current || !c.current.contains(t)) && e();
+    }
+    return window.addEventListener("mousedown", i), () => {
+      window.removeEventListener("mousedown", i);
+    };
+  }, [n, r, e]);
+};
+export {
+  d as useClickOutsideModal
+};

package/dist/components/toast/ToastSlice.d.ts

@@ -0,0 +1,11 @@
+import { InternalToastProps } from './types';
+import { Observable } from '../../utils/observable';
+interface Props {
+    toast: InternalToastProps;
+    observable: Observable<InternalToastProps>;
+}
+/** A slice of toast. Freshly out of the toaster, crunchy on the outside, soft and tender on the inside.
+ * Or is it just notification's UI.
+ */
+export declare const ToastSlice: ({ toast, observable }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/toast/ToastSlice.js

@@ -0,0 +1,103 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { useState as f, useRef as y, useMemo as T, useCallback as p, useEffect as l } from "react";
+import { XClose as x } from "@untitled-ui/icons-react";
+import { Button as w } from "../button/Button.js";
+import { iconByToastType as B, styleToastType as N } from "./icons.js";
+import { cn as m } from "../../utils/cn.js";
+const k = 4e3, W = ({ toast: e, observable: r }) => {
+  var a, d;
+  const [h, g] = f(!1), n = y(null), o = T(() => ["peach"].includes(e.type) ? "gradient" : "normal", [e.type]), s = p(
+    (t) => {
+      r.notify({ ...t, status: "dismissed" });
+    },
+    [r]
+  ), u = p(
+    (t) => {
+      r.notify({ ...t, status: "destroyed" });
+    },
+    [r]
+  );
+  return l(() => {
+    g(!0);
+  }, []), l(() => {
+    const t = setTimeout(() => {
+      s(e);
+    }, k);
+    return () => clearTimeout(t);
+  }, [e, s]), /* @__PURE__ */ c(
+    "div",
+    {
+      ref: n,
+      style: h ? e.status === "dismissed" ? (
+        // The last state before toast is destroyed
+        {
+          height: 0,
+          minHeight: 0,
+          opacity: 0,
+          marginBottom: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
+          borderWidth: 0
+        }
+      ) : (
+        // The stable state
+        {
+          height: (d = n.current) == null ? void 0 : d.offsetHeight,
+          marginBottom: "0.75rem",
+          paddingTop: "0.75rem",
+          paddingBottom: "0.75rem",
+          borderWidth: "1px"
+        }
+      ) : (
+        // The first state: before toast is mounted
+        {
+          transform: "translate(0, -100%)",
+          height: (a = n.current) == null ? void 0 : a.offsetHeight,
+          marginBottom: "0.75rem",
+          paddingTop: "0.75rem",
+          paddingBottom: "0.75rem",
+          borderWidth: "1px"
+        }
+      ),
+      className: m(
+        "px-6 flex items-center gap-3 rounded-md duration-300 ease-out shadow-sm-01 min-h-16 overflow-hidden",
+        N[e.type],
+        o === "gradient" && "text-white"
+      ),
+      onTransitionEnd: (t) => {
+        t.target === t.currentTarget && t.propertyName === "height" && u(e);
+      },
+      children: [
+        B[e.type],
+        /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ i("span", { className: "text-md font-medium w-80 min-h-[1em] wrap-break-words", children: e.message }),
+          e.detail ? /* @__PURE__ */ i(
+            "span",
+            {
+              className: m(
+                "text-sm w-80 min-h-[1em] wrap-break-words line-clamp-3",
+                o === "gradient" ? "text-white" : "text-gray-v2-500"
+              ),
+              children: e.detail
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ i(
+          w,
+          {
+            variant: "tertiary",
+            color: "gray",
+            onClick: () => s(e),
+            className: m(
+              o === "gradient" && "text-white hover:bg-transparent"
+            ),
+            children: /* @__PURE__ */ i(x, { className: "size-5 shrink-0 text-gray-v2-400" })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  W as ToastSlice
+};

package/dist/components/toast/icons.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { ToastType } from './types';
+export declare const styleToastType: {
+    [T in ToastType]: string;
+};
+export declare const iconByToastType: {
+    [T in ToastType]: ReactNode;
+};

package/dist/components/toast/icons.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import { InfoCircle as r, XCircle as s, CheckCircle as i } from "@untitled-ui/icons-react";
+const a = {
+  success: "bg-white border-success-v2-500",
+  error: "bg-white border-error-v2-500",
+  warning: "bg-white border-warning-v2-500",
+  info: "bg-white border-blue-v2-500",
+  peach: "bg-gradient-to-br from-[#d74874] to-[#da805f] border-transparent"
+}, c = {
+  success: /* @__PURE__ */ e(i, { className: "text-success-v2-500 size-6 shrink-0" }),
+  error: /* @__PURE__ */ e(s, { className: "text-error-v2-500 size-6 shrink-0" }),
+  warning: /* @__PURE__ */ e(r, { className: "text-warning-v2-500 size-6 shrink-0" }),
+  info: /* @__PURE__ */ e(r, { className: "text-blue-v2-500 size-6 shrink-0" }),
+  peach: /* @__PURE__ */ e(r, { className: "text-white size-6 shrink-0" })
+};
+export {
+  c as iconByToastType,
+  a as styleToastType
+};

package/dist/components/toast/index.d.ts

@@ -0,0 +1,4 @@
+import { WrittenOnTheToast } from './types';
+/** Where we store the newly cooked toasts. When a toast is created, it will appear here. */
+export declare const Toaster: () => import("react/jsx-runtime").JSX.Element;
+export declare const createToast: (newToast: WrittenOnTheToast) => void;

package/dist/components/toast/index.js

@@ -0,0 +1,35 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useEffect as a } from "react";
+import { ToastSlice as n } from "./ToastSlice.js";
+import { useToastList as i } from "./use-toast-list.js";
+import { Observable as c } from "../../utils/observable.js";
+const l = () => window.isSecureContext ? crypto.randomUUID() : crypto.getRandomValues(new Uint32Array(1))[0].toString(), e = new c(), s = /* @__PURE__ */ new Set(), b = () => {
+  const o = i(e);
+  return a(() => {
+    const t = Symbol();
+    return s.add(t), () => {
+      s.delete(t);
+    };
+  }, []), /* @__PURE__ */ r("div", { className: "flex flex-col", children: o.map((t) => /* @__PURE__ */ r(
+    n,
+    {
+      toast: t,
+      observable: e
+    },
+    `toast-${t.id}`
+  )) });
+}, T = (o) => {
+  process.env.NODE_ENV !== "production" && s.size === 0 && console.warn(
+    "[Toaster] createToast was called but no <Toaster> is mounted. This toast will be lost."
+  );
+  const t = {
+    ...o,
+    id: l(),
+    status: "stable"
+  };
+  e.notify(t);
+};
+export {
+  b as Toaster,
+  T as createToast
+};

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export type ToastType = "error" | "warning" | "success" | "info" | "peach";
+type ToastStatus = "stable" | "dismissed" | "destroyed";
+/** The name is Bon, Jambon. */
+export interface WrittenOnTheToast {
+    type: ToastType;
+    message: string;
+    detail?: ReactNode;
+}
+export interface InternalToastProps extends WrittenOnTheToast {
+    id: string;
+    status: ToastStatus;
+}
+export {};

package/dist/components/toast/use-toast-list.d.ts

@@ -0,0 +1,4 @@
+import { InternalToastProps } from './types';
+import { Observable } from '../../utils/observable';
+/** Returns the list of current existing toasts. */
+export declare const useToastList: (observable: Observable<InternalToastProps>) => InternalToastProps[];

package/dist/components/toast/use-toast-list.js

@@ -0,0 +1,27 @@
+import { useState as d, useEffect as f } from "react";
+import { flushSync as m } from "react-dom";
+const c = (i) => {
+  const [u, r] = d([]);
+  return f(() => i.subscribe((s) => {
+    if (s.status === "dismissed") {
+      r(
+        (t) => t.map(
+          (e) => e.id === s.id ? { ...e, status: "dismissed" } : e
+        )
+      );
+      return;
+    }
+    if (s.status === "destroyed") {
+      r((t) => t.filter((e) => e.id !== s.id));
+      return;
+    }
+    setTimeout(() => {
+      m(() => {
+        r((t) => [...t, s]);
+      });
+    });
+  }), [i]), u;
+};
+export {
+  c as useToastList
+};

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+export { Button } from './components/button/Button';
+export type { ButtonProps } from './components/button/Button';
+export type { ButtonVariant, ButtonColor, ButtonSize, ButtonLoadingStyle, } from './components/button/button-variants';
 export { Badge } from './components/badge/Badge';
 export { BadgeTag, getBadgeAutoColor, TAG_ICON_COLOR_CLASSES, } from './components/badge/variants/BadgeTag';
 export { BadgeMore } from './components/badge/variants/BadgeMore';
@@ -18,6 +21,17 @@ export { PageTitle } from './components/page-title/PageTitle';
 export { Popover } from './components/popover/Popover';
 export { usePopoverCoord } from './components/popover/use-popover-coord';
 export type { PopoverPosition } from './components/popover/use-popover-coord';
+export { Checkbox } from './components/checkbox/Checkbox';
 export { Switch } from './components/switch/Switch';
 export { Tooltip } from './components/tooltip/Tooltip';
+export { Collapsible } from './components/collapsible/Collapsible';
+export { Card } from './components/card/Card';
+export type { CardSize } from './components/card/types';
+export { Input } from './components/input/Input';
+export { Toaster, createToast } from './components/toast/index';
+export type { WrittenOnTheToast, ToastType } from './components/toast/types';
+export { Modal } from './components/modal/Modal';
+export { ModalHeaderIcon } from './components/modal/helpers/HeaderIcon';
+export { ModalTitle } from './components/modal/helpers/Title';
+export { useClickOutsideModal } from './components/modal/use-click-outside-modal';
 export { cn } from './utils/cn';

package/dist/index.js

@@ -1,42 +1,63 @@
-import { Badge as r } from "./components/badge/Badge.js";
-import { BadgeTag as m, TAG_ICON_COLOR_CLASSES as p, getBadgeAutoColor as x } from "./components/badge/variants/BadgeTag.js";
-import { BadgeMore as s } from "./components/badge/variants/BadgeMore.js";
-import { useResizeObserver as a } from "./hooks/element-shift/use-resize-observer.js";
+import { Button as e } from "./components/button/Button.js";
+import { Badge as m } from "./components/badge/Badge.js";
+import { BadgeTag as x, TAG_ICON_COLOR_CLASSES as f, getBadgeAutoColor as a } from "./components/badge/variants/BadgeTag.js";
+import { BadgeMore as i } from "./components/badge/variants/BadgeMore.js";
+import { useResizeObserver as l } from "./hooks/element-shift/use-resize-observer.js";
 import { useScrollListener as u } from "./hooks/element-shift/use-scroll-listener.js";
-import { useWindowResizeListener as g } from "./hooks/element-shift/use-window-resize-listener.js";
-import { useMutationObserver as C } from "./hooks/element-shift/use-mutation-observer.js";
-import { useTransitionEndListener as b } from "./hooks/element-shift/use-transition-end-listener.js";
+import { useWindowResizeListener as b } from "./hooks/element-shift/use-window-resize-listener.js";
+import { useMutationObserver as c } from "./hooks/element-shift/use-mutation-observer.js";
+import { useTransitionEndListener as S } from "./hooks/element-shift/use-transition-end-listener.js";
 import { useAnimationFrame as O } from "./hooks/element-shift/use-animation-frame.js";
-import { useElementShift as v } from "./hooks/element-shift/use-element-shift.js";
-import { Combobox as B } from "./components/combobox/Combobox.js";
-import { useValidatedCombobox as c } from "./components/combobox/use-validated-combobox.js";
-import { ErrorState as R } from "./components/error-state/ErrorState.js";
-import { PageTitle as h } from "./components/page-title/PageTitle.js";
-import { Popover as z } from "./components/popover/Popover.js";
+import { useElementShift as L } from "./hooks/element-shift/use-element-shift.js";
+import { Combobox as A } from "./components/combobox/Combobox.js";
+import { useValidatedCombobox as h } from "./components/combobox/use-validated-combobox.js";
+import { ErrorState as P } from "./components/error-state/ErrorState.js";
+import { PageTitle as _ } from "./components/page-title/PageTitle.js";
+import { Popover as w } from "./components/popover/Popover.js";
 import { usePopoverCoord as F } from "./components/popover/use-popover-coord.js";
-import { Switch as I } from "./components/switch/Switch.js";
-import { Tooltip as V } from "./components/tooltip/Tooltip.js";
-import { cn as j } from "./utils/cn.js";
+import { Checkbox as H } from "./components/checkbox/Checkbox.js";
+import { Switch as V } from "./components/switch/Switch.js";
+import { Tooltip as j } from "./components/tooltip/Tooltip.js";
+import { Collapsible as y } from "./components/collapsible/Collapsible.js";
+import { Card as J } from "./components/card/Card.js";
+import { Input as Q } from "./components/input/Input.js";
+import { Toaster as X, createToast as Y } from "./components/toast/index.js";
+import { Modal as $ } from "./components/modal/Modal.js";
+import { ModalHeaderIcon as ro } from "./components/modal/helpers/HeaderIcon.js";
+import { ModalTitle as to } from "./components/modal/helpers/Title.js";
+import { useClickOutsideModal as po } from "./components/modal/use-click-outside-modal.js";
+import { cn as fo } from "./utils/cn.js";
 export {
-  r as Badge,
-  s as BadgeMore,
-  m as BadgeTag,
-  B as Combobox,
-  R as ErrorState,
-  h as PageTitle,
-  z as Popover,
-  I as Switch,
-  p as TAG_ICON_COLOR_CLASSES,
-  V as Tooltip,
-  j as cn,
-  x as getBadgeAutoColor,
+  m as Badge,
+  i as BadgeMore,
+  x as BadgeTag,
+  e as Button,
+  J as Card,
+  H as Checkbox,
+  y as Collapsible,
+  A as Combobox,
+  P as ErrorState,
+  Q as Input,
+  $ as Modal,
+  ro as ModalHeaderIcon,
+  to as ModalTitle,
+  _ as PageTitle,
+  w as Popover,
+  V as Switch,
+  f as TAG_ICON_COLOR_CLASSES,
+  X as Toaster,
+  j as Tooltip,
+  fo as cn,
+  Y as createToast,
+  a as getBadgeAutoColor,
   O as useAnimationFrame,
-  v as useElementShift,
-  C as useMutationObserver,
+  po as useClickOutsideModal,
+  L as useElementShift,
+  c as useMutationObserver,
   F as usePopoverCoord,
-  a as useResizeObserver,
+  l as useResizeObserver,
   u as useScrollListener,
-  b as useTransitionEndListener,
-  c as useValidatedCombobox,
-  g as useWindowResizeListener
+  S as useTransitionEndListener,
+  h as useValidatedCombobox,
+  b as useWindowResizeListener
 };