@exsto/ds 0.0.1-rc.4 → 0.0.1-rc.5

package/dist/ui/src/lib/popup-list.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The one look for a list in a popup or a menu: the command palette, Select,
+ * Combobox, MultiSelect and the dropdown menus.
+ *
+ * These lists used to disagree with each other in every detail that shows:
+ * three different radii, two different paddings, a grey fill for the highlight
+ * in one and the accent in another, and the chosen item marked by a check on
+ * the left in Select and on the right in the menus. Picking something from one
+ * list then felt like a different product from picking something in the next.
+ *
+ * It lives here as classes rather than as a stylesheet so a caller's own
+ * className still wins: an unlayered rule would beat every utility, including
+ * the one someone passes for a single list.
+ *
+ * ONE ITEM: transparent at rest, 32px tall, 6px radius (--radius-sm), 6px by
+ * 8px of padding, text-sm, its own icons 16px and muted. Under the pointer or
+ * the keyboard it takes one translucent fill of the text colour, and its icons
+ * the text colour. Chosen is medium weight with a check at the END, never a
+ * fill, so "where I am" and "what I picked" can be told apart at a glance.
+ */
+/**
+ * Which primitive renders the item, because the two disagree about the same
+ * attribute names in a way that silently breaks the styling:
+ *
+ * - cmdk writes `data-selected="false"` and `data-disabled="false"` on items
+ *   that are neither, so a bare `data-selected:` variant matches EVERY item and
+ *   highlights the whole list. Its states have to be matched by value.
+ * - Base UI omits the attribute instead, so presence is the test there. That
+ *   needs the BRACKET form for `selected`: shadcn redefines the bare
+ *   `data-selected:` variant to match only data-selected="true" (for the
+ *   calendar), and Base UI writes it as an empty string, so the bare form
+ *   compiles and silently never applies. `highlighted` and `disabled` have no
+ *   such override, so those stay bare.
+ * - And the same name means different things: cmdk's `data-selected` is the
+ *   keyboard cursor, Base UI's is the chosen value. In cmdk the chosen state is
+ *   `data-checked`, which the DS's own CommandItem sets.
+ */
+export type TPopupItemFlavor = 'base-ui' | 'cmdk';
+/** The shared item look. `checkable` leaves room at the end for the check. */
+export declare const popupItemClass: (flavor?: TPopupItemFlavor, checkable?: boolean) => string;
+/**
+ * The check's slot, at the end of the item and the same size whether or not the
+ * check is in it, so a list does not shift as the choice moves.
+ */
+export declare const POPUP_ITEM_INDICATOR_CLASS = "pointer-events-none absolute right-2 flex size-4 items-center justify-center text-foreground";
+/** A group's heading in any of these lists. */
+export declare const POPUP_GROUP_LABEL_CLASS = "px-2 py-1.5 text-xs font-medium text-muted-foreground";

package/dist/ui/src/lib/popup-list.test.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The shared popup list style, and the trap it exists to keep closed.
+ *
+ * PATH TAKEN: the look itself is measured in a real browser across the lists and
+ * both themes (e2e/popup-lists.spec.ts), because computed padding and radius are
+ * the only honest proof of "one look". What is checked here is the part a
+ * stylesheet cannot: that each list takes its item look from one place, and that
+ * the two primitives' disagreeing attribute conventions are matched correctly.
+ */
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@exsto/ds",
-  "version": "0.0.1-rc.4",
-  "description": "The eDynamix design system: React components, design tokens, and optional web components.",
+  "version": "0.0.1-rc.5",
+  "description": "The eDynamix design system: React components and design tokens.",
   "license": "Apache-2.0",
   "keywords": [
     "exsto",
@@ -10,7 +10,6 @@
     "react",
     "components",
     "ui",
-    "web-components",
     "tailwind"
   ],
   "type": "module",
@@ -28,10 +27,6 @@
       "types": "./dist/ds/src/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./elements": {
-      "types": "./dist/ds/src/elements.d.ts",
-      "default": "./dist/elements.js"
-    },
     "./styles.css": {
       "types": "./dist/styles.css.d.ts",
       "default": "./dist/styles.css"
@@ -50,6 +45,7 @@
     "@base-ui/react": "~1.8.0",
     "@shadcn/react": "^0.3.1",
     "@tabler/icons-react": "^3.44.0",
+    "@tanstack/react-virtual": "^3.13.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -66,10 +62,9 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@edyn/dom": "workspace:*",
-    "@edyn/elements": "workspace:*",
     "@edyn/theme": "workspace:*",
     "@edyn/ui": "workspace:*",
+    "@tailwindcss/node": "catalog:",
     "@tailwindcss/vite": "catalog:",
     "@vitejs/plugin-react": "catalog:",
     "vite": "catalog:",