@cystackapp/ui 1.4.1 → 2.0.0

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/key-typeguard.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Type guard that narrows a string to a key of the given object.
+ * Counterpart to `enumTypeguard` (which checks values).
+ */
+export declare function keyTypeguard<T extends Record<PropertyKey, unknown>>(value: PropertyKey, obj: T): value is keyof T;

package/dist/utils/key-typeguard.js

@@ -0,0 +1,6 @@
+function r(e, n) {
+  return e in n;
+}
+export {
+  r as keyTypeguard
+};

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/dist/utils/use-debounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delayMs: number): T;

package/dist/utils/use-debounce.js

@@ -0,0 +1,11 @@
+import { useState as u, useEffect as c } from "react";
+function i(e, t) {
+  const [o, n] = u(e);
+  return c(() => {
+    const r = setTimeout(() => n(e), t);
+    return () => clearTimeout(r);
+  }, [e, t]), o;
+}
+export {
+  i as useDebounce
+};

package/package.json

@@ -1,6 +1,12 @@
 {
   "name": "@cystackapp/ui",
-  "version": "1.4.1",
+  "version": "2.0.0",
+  "description": "CyStack design system — reusable React UI components built with Tailwind CSS v4",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://git.cystack.org/platform/ui.git"
+  },
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,17 +28,18 @@
     "build": "vite build",
     "dev": "vite build --watch",
     "typecheck": "tsc --noEmit --pretty",
+    "lint": "eslint src",
     "storybook": "storybook dev -p 6007",
     "test": "vitest run --passWithNoTests && playwright test -c playwright-ct.config.ts",
     "test:component": "playwright test -c playwright-ct.config.ts",
     "test:unit": "vitest run",
     "test:unit:watch": "vitest",
-    "i18n": "node ../../scripts/generate-i18n.mjs",
-    "i18n:check": "node ../../scripts/check-i18n-keys.mjs"
+    "i18n": "node scripts/generate-i18n.mjs --scan src --output src/i18n/resources.ts",
+    "i18n:check": "node scripts/check-i18n-keys.mjs"
   },
   "peerDependencies": {
     "@untitled-ui/icons-react": "^0.1.4",
-    "i18next": "23.7.7",
+    "i18next": ">=23.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-i18next": "^15.0.0",
@@ -43,21 +50,37 @@
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
-    "@platform-dash/eslint-config": "*",
-    "eslint": "^10.0.3",
-    "@playwright/experimental-ct-react": "^1.59.1",
+    "@eslint/compat": "^2.0.3",
+    "@eslint/js": "^10",
+    "@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",
     "@storybook/test": "^8.6.18",
     "@tailwindcss/vite": "~4.1",
+    "@types/node": "^25.9.2",
     "@types/react": "^18.2.34",
     "@types/react-dom": "^18.2.14",
+    "@untitled-ui/icons-react": "^0.1.4",
     "@vitejs/plugin-react": "^5",
+    "ajv": "^8.20.0",
+    "eslint": "^10.0.3",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^16",
+    "i18next": "^23.7.7",
     "picocolors": "^1.1.1",
+    "prettier": "^3.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^15.0.0",
+    "react-router-dom": "^6.20.0",
     "storybook": "^8.6.18",
     "tailwindcss": "~4.1",
     "typescript": "~5.9",
+    "typescript-eslint": "^8",
     "vite": "^6",
     "vite-plugin-dts": "^4",
     "vite-plugin-svgr": "^4",

package/theme.css

@@ -1,4 +1,7 @@
-@source "./src";
+/* The published package ships dist/ (not src/), so consumers' Tailwind must
+   scan the built output for class names. Local dev tooling (storybook,
+   playwright) adds its own `@source` for src/. */
+@source "./dist";
 
 @layer base {
   button {
@@ -333,6 +336,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 {