@cystackapp/ui 1.4.0 → 1.5.0

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
 };

package/dist/test-utils/expect-visibility.d.ts

@@ -0,0 +1,45 @@
+import { Locator } from '@playwright/test';
+/**
+ * Assert that an element is fully invisible to users — not just visually hidden,
+ * but also unreachable by pointer and keyboard/assistive tech.
+ *
+ * Verifies three pillars:
+ * 1. **Not visually seen** — `checkVisibility()` returns false (checks opacity, visibility, display on ancestors)
+ * 2. **Not interactable** — a real mouse click at the element's coordinates does not trigger event handlers
+ * 3. **Not detectable** — the element cannot receive focus, even when programmatically given `tabIndex`
+ *
+ * Note: this asserts the element itself is invisible, NOT that its ancestors reserve no layout
+ * space. A `visibility:hidden` element inside a wrapper that still holds its content height will
+ * pass every pillar — the user sees a blank gap, but no assertion on the hidden element alone can
+ * detect that. Test the wrapper's height separately when that invariant matters (e.g. Accordion).
+ *
+ * Pillar 1 retries automatically (via `.toPass()`) to allow CSS transitions to settle.
+ *
+ * Recommended CSS approach: combine `invisible` (visibility: hidden) with `opacity-0`.
+ * This covers all three pillars natively without JS.
+ *
+ * @example
+ * ```ts
+ * // Assert collapsed accordion content is fully invisible
+ * await expectInvisible(component.getByText("Content"));
+ *
+ * // After expanding, assert it's fully visible
+ * await component.getByRole("button").click();
+ * await expectVisible(component.getByText("Content"));
+ * ```
+ */
+export declare function expectInvisible(locator: Locator): Promise<void>;
+/**
+ * Assert that an element is fully visible and interactive — the inverse of {@link expectInvisible}.
+ *
+ * Verifies:
+ * 1. **Visually seen** — `checkVisibility()` returns true
+ * 2. **Interactable** — a real mouse click reaches the element's event handlers
+ * 3. **Detectable** — the element can receive focus
+ *
+ * @example
+ * ```ts
+ * await expectVisible(component.getByText("Content"));
+ * ```
+ */
+export declare function expectVisible(locator: Locator): Promise<void>;

package/dist/utils/observable.d.ts

@@ -0,0 +1,7 @@
+/** Observer object made for React useEffect: the subscribe function returns a clean up function which unsubscribes when React components unmount. */
+export declare class Observable<T> {
+    observers: Function[];
+    constructor();
+    notify(data: T): void;
+    subscribe(f: (typeof this.observers)[number]): () => void;
+}

package/dist/utils/observable.js

@@ -0,0 +1,22 @@
+var t = Object.defineProperty;
+var i = (e, s, r) => s in e ? t(e, s, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[s] = r;
+var o = (e, s, r) => i(e, typeof s != "symbol" ? s + "" : s, r);
+class c {
+  constructor() {
+    o(this, "observers");
+    this.observers = [];
+  }
+  notify(s) {
+    this.observers.forEach((r) => r(s));
+  }
+  subscribe(s) {
+    return this.observers.push(s), () => {
+      [...this.observers].forEach((r, b) => {
+        r === s && this.observers.splice(b, 1);
+      });
+    };
+  }
+}
+export {
+  c as Observable
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cystackapp/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -45,7 +45,8 @@
   "devDependencies": {
     "@platform-dash/eslint-config": "*",
     "eslint": "^10.0.3",
-    "@playwright/experimental-ct-react": "^1.59.1",
+    "@playwright/experimental-ct-react": "1.60.0",
+    "@playwright/test": "1.60.0",
     "@storybook/addon-essentials": "^8.6.18",
     "@storybook/react": "^8.6.18",
     "@storybook/react-vite": "^8.6.18",

package/theme.css

@@ -333,6 +333,9 @@
   --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
   --shadow-sm-01: 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
   --shadow-sm-02: 0px 1px 3px rgba(10, 13, 18, 0.1);
+  --shadow-xs-skeuomorphic: 0px 0px 0px 0.5px rgba(10, 13, 18, 0.18) inset,
+    0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset,
+    0px 1px 2px 0px rgba(10, 13, 18, 0.05);
 }
 
 @keyframes pseudo-rotate {