@xenide-io/the-old-ui-theme 0.5.3 → 0.5.4

package/dist/ui.js

@@ -1252,7 +1252,12 @@ function SettingsNav(_a) {
       "a",
       {
         href: item.href,
-        className: cn("ph-settings-nav__item", item.active && "ph-settings-nav__item--active"),
+        id: `settings-nav-${item.id}`,
+        "data-test": `settings-nav-${item.id}`,
+        className: cn(
+          "ph-settings-nav__item",
+          item.active && "ph-settings-nav__item--active"
+        ),
         "aria-current": item.active ? "page" : void 0,
         children: [
           item.icon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ph-settings-nav__icon", children: item.icon }) : null,
@@ -1341,7 +1346,14 @@ function DropdownContent({
       sticky: "partial",
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Arrow, { className: "ph-dropdown-arrow", width: 12, height: 6 })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          DropdownPrimitive.Arrow,
+          {
+            className: "ph-dropdown-arrow",
+            width: 12,
+            height: 6
+          }
+        )
       ]
     }
   ) });
@@ -1349,6 +1361,8 @@ function DropdownContent({
 function DropdownMenu(_a) {
   var _b = _a, {
     trigger,
+    triggerId,
+    triggerDataTest,
     children,
     align,
     side,
@@ -1366,6 +1380,8 @@ function DropdownMenu(_a) {
     disabled
   } = _b, props = __objRest(_b, [
     "trigger",
+    "triggerId",
+    "triggerDataTest",
     "children",
     "align",
     "side",
@@ -1390,7 +1406,17 @@ function DropdownMenu(_a) {
       onOpenChange,
       modal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "ph-dropdown-trigger", "aria-label": ariaLabel, children: trigger }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "button",
+          {
+            type: "button",
+            id: triggerId,
+            "data-test": triggerDataTest,
+            className: "ph-dropdown-trigger",
+            "aria-label": ariaLabel,
+            children: trigger
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           DropdownContent,
           {
@@ -1478,7 +1504,15 @@ function DropdownButton(_a) {
               split && "ph-btn-split"
             ),
             "aria-label": ariaLabel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ButtonChrome, { label, icon, sideIcon: trailing, split })
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              ButtonChrome,
+              {
+                label,
+                icon,
+                sideIcon: trailing,
+                split
+              }
+            )
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -1499,7 +1533,15 @@ function DropdownButton(_a) {
   ) }));
 }
 function DropdownItem(_a) {
-  var _b = _a, { className, children, disabled } = _b, props = __objRest(_b, ["className", "children", "disabled"]);
+  var _b = _a, {
+    className,
+    children,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "disabled"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Item, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "button",
     __spreadProps(__spreadValues({
@@ -1515,11 +1557,24 @@ function DropdownRadioGroup(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.RadioGroup, __spreadValues({}, props));
 }
 function DropdownRadioItem(_a) {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DropdownPrimitive.RadioItem, __spreadProps(__spreadValues({ className: cn("ph-dropdown-item ph-dropdown-radio-item", className) }, props), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ph-dropdown-item-indicator", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconCheck, { className: "h-3.5 w-3.5" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children })
-  ] }));
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    DropdownPrimitive.RadioItem,
+    __spreadProps(__spreadValues({
+      className: cn("ph-dropdown-item ph-dropdown-radio-item", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ph-dropdown-item-indicator", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconCheck, { className: "h-3.5 w-3.5" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children })
+      ]
+    })
+  );
 }
 
 // src/components/ui/Input.tsx
@@ -2675,9 +2730,10 @@ function SegmentedControl({ options, value, onChange, className }) {
         "button",
         {
           type: "button",
+          "aria-pressed": value === option.value,
           onClick: () => onChange(option.value),
           className: cn(
-            "relative flex items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all",
+            "relative flex min-h-11 items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all sm:min-h-9",
             value === option.value ? "bg-ph-surface text-ph-ink shadow-ph" : "text-ph-subtle hover:text-ph-ink"
           ),
           children: [
@@ -2699,32 +2755,44 @@ function CommandPalette({
   isOpen,
   onClose,
   placeholder = "Type a command or search...",
-  className
+  className,
+  id,
+  dataTest,
+  inputId,
+  inputDataTest
 }) {
   const [query, setQuery] = (0, import_react17.useState)("");
   const [selectedIndex, setSelectedIndex] = (0, import_react17.useState)(0);
   const inputRef = (0, import_react17.useRef)(null);
+  const panelRef = (0, import_react17.useRef)(null);
+  const previousFocusRef = (0, import_react17.useRef)(null);
   const filtered = items.filter(
     (item) => item.label.toLowerCase().includes(query.toLowerCase())
   );
   (0, import_react17.useEffect)(() => {
     var _a;
-    if (isOpen) {
-      setQuery("");
-      setSelectedIndex(0);
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-    }
+    if (!isOpen) return;
+    previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    setQuery("");
+    setSelectedIndex(0);
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    return () => {
+      var _a2;
+      return (_a2 = previousFocusRef.current) == null ? void 0 : _a2.focus();
+    };
   }, [isOpen]);
   (0, import_react17.useEffect)(() => {
     const handleKeyDown = (e) => {
-      var _a;
+      var _a, _b;
       if (!isOpen) return;
       switch (e.key) {
         case "ArrowDown":
+          if (!filtered.length) break;
           e.preventDefault();
           setSelectedIndex((i) => (i + 1) % filtered.length);
           break;
         case "ArrowUp":
+          if (!filtered.length) break;
           e.preventDefault();
           setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
           break;
@@ -2736,62 +2804,98 @@ function CommandPalette({
         case "Escape":
           onClose();
           break;
+        case "Tab": {
+          const focusable = (_b = panelRef.current) == null ? void 0 : _b.querySelectorAll(
+            'input, button, [href], [tabindex]:not([tabindex="-1"])'
+          );
+          if (!(focusable == null ? void 0 : focusable.length)) break;
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+          break;
+        }
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, filtered, selectedIndex, onClose]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
-      className: cn(
-        "w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-            "input",
-            {
-              ref: inputRef,
-              type: "text",
-              value: query,
-              onChange: (e) => {
-                setQuery(e.target.value);
-                setSelectedIndex(0);
-              },
-              placeholder,
-              className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
-            }
+      id,
+      "data-test": dataTest,
+      className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm",
+      onMouseDown: (event) => {
+        if (event.target === event.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        "div",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Command palette",
+          className: cn(
+            "w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
+            className
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("kbd", { className: "rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext", children: "ESC" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              item.onSelect();
-              onClose();
-            },
-            onMouseEnter: () => setSelectedIndex(index),
-            className: cn(
-              "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
-              index === selectedIndex ? "bg-ph-muted text-ph-ink" : "text-ph-subtle"
-            ),
-            children: [
-              item.icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "h-5 w-5", children: item.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex-1", children: item.label }),
-              item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("kbd", { className: "rounded border border-ph-border bg-ph-surface px-1.5 py-0.5 text-xs text-ph-mutedtext", children: item.shortcut })
-            ]
-          },
-          item.id
-        )) })
-      ]
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                "input",
+                {
+                  ref: inputRef,
+                  id: inputId,
+                  "data-test": inputDataTest,
+                  type: "text",
+                  "aria-label": "Search commands",
+                  value: query,
+                  onChange: (e) => {
+                    setQuery(e.target.value);
+                    setSelectedIndex(0);
+                  },
+                  placeholder,
+                  className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("kbd", { className: "rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext", children: "ESC" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+              "button",
+              {
+                type: "button",
+                id: `command-${item.id}`,
+                "data-test": `command-${item.id}`,
+                onClick: () => {
+                  item.onSelect();
+                  onClose();
+                },
+                onMouseEnter: () => setSelectedIndex(index),
+                className: cn(
+                  "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
+                  index === selectedIndex ? "bg-ph-muted text-ph-ink" : "text-ph-subtle"
+                ),
+                children: [
+                  item.icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "h-5 w-5", children: item.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex-1", children: item.label }),
+                  item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("kbd", { className: "rounded border border-ph-border bg-ph-surface px-1.5 py-0.5 text-xs text-ph-mutedtext", children: item.shortcut })
+                ]
+              },
+              item.id
+            )) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 
 // src/components/ui/Calendar.tsx
@@ -5230,34 +5334,45 @@ var Chip = (0, import_react42.forwardRef)(function Chip2(_a, ref) {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+  const chipClassName = cn(
+    "ph-chip",
+    selected && "ph-chip--selected",
+    className
+  );
+  if (onRemove) {
+    const removeLabel = typeof children === "string" ? `Remove ${children}` : "Remove";
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: chipClassName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        "button",
+        __spreadProps(__spreadValues({
+          ref,
+          type: "button",
+          className: "min-w-0 bg-transparent p-0 text-inherit"
+        }, props), {
+          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ph-chip__text", children })
+        })
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onRemove,
+          disabled: props.disabled,
+          className: "ph-chip__remove",
+          "aria-label": removeLabel,
+          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("path", { d: "M2 2l6 6M8 2l-6 6" }) })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     "button",
     __spreadProps(__spreadValues({
       ref,
       type: "button",
-      className: cn(
-        "ph-chip",
-        selected && "ph-chip--selected",
-        className
-      )
+      className: chipClassName
     }, props), {
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ph-chip__text", children }),
-        onRemove && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-          "span",
-          {
-            role: "button",
-            tabIndex: -1,
-            onClick: (e) => {
-              e.stopPropagation();
-              onRemove();
-            },
-            className: "ph-chip__remove",
-            "aria-label": "Remove",
-            children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("path", { d: "M2 2l6 6M8 2l-6 6" }) })
-          }
-        )
-      ]
+      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ph-chip__text", children })
     })
   );
 });

package/dist/ui.mjs

@@ -108,7 +108,7 @@ import {
   ToggleButton,
   ToggleGroup,
   Widget
-} from "./chunk-VFTZXPXM.mjs";
+} from "./chunk-SBBKXV35.mjs";
 import {
   ButtonChrome,
   DropdownButton,
@@ -120,7 +120,7 @@ import {
   IconByName,
   Tooltip,
   TooltipProvider
-} from "./chunk-G53YLHVE.mjs";
+} from "./chunk-E5ZBQYEX.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Props-driven React components and theme tokens inspired by classic interface design \u2014 optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",
@@ -57,9 +57,9 @@
   },
   "files": [
     "dist",
+    "scripts",
     "src/app/globals.css",
     "src/components/ui",
-    "src/components/charts",
     "src/components/icons",
     "src/suite",
     "src/styles/themes.css",
@@ -87,14 +87,10 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "next": ">=16.2.7",
     "tailwindcss": "^3.4.0",
-    "d3-scale": "^4.0.2",
     "iconoir-react": ">=7.11.1",
     "motion": ">=12"
   },
   "peerDependenciesMeta": {
-    "d3-scale": {
-      "optional": true
-    },
     "iconoir-react": {
       "optional": true
     },

package/scripts/install-theme-dev.sh

@@ -0,0 +1,60 @@
+#!/bin/sh
+# Dev-only: copy this package tree into an app's node_modules so Next.js
+# Turbopack resolves CSS/exports from real files (not a broken file: link).
+#
+# Host must have built dist first: `bun run build:lib` in this repo.
+# Safe to skip when THEME_DIR is missing (production images).
+#
+# Usage (from an app directory, Docker or local):
+#   THEME_DIR=/the-old-ui TARGET=/app/node_modules/@xenide-io/the-old-ui-theme \
+#     sh /the-old-ui/scripts/install-theme-dev.sh
+# Or via each app's thin wrapper under scripts/install-theme-dev.sh.
+
+set -e
+
+SCRIPT_DIR=$(CDPATH= cd -- "$(dirname "$0")" && pwd)
+THEME_DIR=${THEME_DIR:-$(CDPATH= cd -- "$SCRIPT_DIR/.." && pwd)}
+
+if [ -z "${TARGET:-}" ]; then
+  if [ -d /app/node_modules ]; then
+    TARGET=/app/node_modules/@xenide-io/the-old-ui-theme
+  elif [ -d ./node_modules ]; then
+    TARGET=$(pwd)/node_modules/@xenide-io/the-old-ui-theme
+  else
+    echo "install-theme-dev: set TARGET=.../node_modules/@xenide-io/the-old-ui-theme" >&2
+    exit 1
+  fi
+fi
+
+if [ ! -d "$THEME_DIR" ]; then
+  echo "install-theme-dev: $THEME_DIR not found, skipping"
+  exit 0
+fi
+
+if [ ! -d "$THEME_DIR/dist" ]; then
+  echo "install-theme-dev: $THEME_DIR/dist is missing."
+  echo "Run: cd \"$THEME_DIR\" && bun run build:lib"
+  exit 1
+fi
+
+echo "install-theme-dev: copying $THEME_DIR -> $TARGET"
+
+rm -rf "$TARGET"
+mkdir -p "$TARGET"
+
+# tar preserves structure and is faster than cp for many small files.
+tar -C "$THEME_DIR" -cf - \
+  --exclude='.git' \
+  --exclude='.next' \
+  --exclude='node_modules' \
+  --exclude='test-results' \
+  --exclude='playwright-report' \
+  --exclude='coverage' \
+  --exclude='out' \
+  --exclude='*.log' \
+  --exclude='.DS_Store' \
+  --exclude='.turbo' \
+  --exclude='*.tsbuildinfo' \
+  . | tar -C "$TARGET" -xf -
+
+echo "install-theme-dev: done"

package/scripts/sync-posthog-icons.mjs

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+/**
+ * Compare local Lemon glyphs with PostHog open-source icons.tsx.
+ * Usage: node scripts/sync-posthog-icons.mjs
+ *
+ * Downloads: frontend/src/lib/lemon-ui/icons/icons.tsx
+ * Reports path mismatches — Material-only icons (bell, volume, …) are expected.
+ */
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const POSTHOG_URL =
+  "https://raw.githubusercontent.com/PostHog/posthog/master/frontend/src/lib/lemon-ui/icons/icons.tsx";
+const LOCAL = resolve("src/components/icons/icons.tsx");
+const CACHE = resolve("scripts/.posthog-icons.tsx");
+
+function extractPhBlock(source, name) {
+  const start = source.indexOf(`export function ${name}(`);
+  if (start < 0) return null;
+  const next = source.indexOf("\nexport function Icon", start + 10);
+  return source.slice(start, next > 0 ? next : start + 4000);
+}
+
+function extractOurBlock(source, name) {
+  const start = source.indexOf(`export const ${name} =`);
+  if (start < 0) return null;
+  const next = source.indexOf("\nexport const Icon", start + 10);
+  const nextFn = source.indexOf("\nexport function Icon", start + 10);
+  const end = [next, nextFn].filter((x) => x > 0).sort((a, b) => a - b)[0] || start + 4000;
+  return source.slice(start, end);
+}
+
+function normPaths(block) {
+  if (!block) return "";
+  const fills = [...block.matchAll(/fill\(\s*\n?\s*"([^"]+)"/g)].map((m) => m[1]);
+  const ds = [...block.matchAll(/<path d="([^"]+)"/g)].map((m) => m[1]);
+  const attrs = [...block.matchAll(/\sd="([^"]+)"/g)].map((m) => m[1]);
+  return [...fills, ...ds, ...attrs].join("|").replace(/\s/g, "");
+}
+
+async function main() {
+  const response = await fetch(POSTHOG_URL);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch PostHog icons: ${response.status}`);
+  }
+  const ph = await response.text();
+  writeFileSync(CACHE, ph);
+
+  const local = readFileSync(LOCAL, "utf8");
+  const phNames = new Set([...ph.matchAll(/export function (Icon\w+)/g)].map((m) => m[1]));
+  const ourNames = [...local.matchAll(/export const (Icon\w+)/g)]
+    .map((m) => m[1])
+    .filter((n) => n !== "IconSpinner");
+
+  const shared = ourNames.filter((n) => phNames.has(n));
+  const materialOnly = ourNames.filter((n) => !phNames.has(n));
+  const mismatches = shared.filter(
+    (n) => normPaths(extractPhBlock(ph, n)) !== normPaths(extractOurBlock(local, n)),
+  );
+
+  console.log(`Compared ${shared.length} shared icons with PostHog master.`);
+  if (mismatches.length) {
+    console.log("\nPath mismatches (update src/components/icons/icons.tsx):");
+    mismatches.forEach((n) => console.log(`  - ${n}`));
+  } else {
+    console.log("All shared PostHog icons match.");
+  }
+  console.log(`\nMaterial-only icons (${materialOnly.length}): ${materialOnly.join(", ")}`);
+}
+
+main().catch((error) => {
+  console.error(error.message);
+  process.exit(1);
+});

package/src/components/ui/Chip.tsx

@@ -14,31 +14,49 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip({
   className,
   ...props
 }, ref) {
+  const chipClassName = cn(
+    "ph-chip",
+    selected && "ph-chip--selected",
+    className
+  );
+
+  if (onRemove) {
+    const removeLabel =
+      typeof children === "string" ? `Remove ${children}` : "Remove";
+
+    return (
+      <span className={chipClassName}>
+        <button
+          ref={ref}
+          type="button"
+          className="min-w-0 bg-transparent p-0 text-inherit"
+          {...props}
+        >
+          <span className="ph-chip__text">{children}</span>
+        </button>
+        <button
+          type="button"
+          onClick={onRemove}
+          disabled={props.disabled}
+          className="ph-chip__remove"
+          aria-label={removeLabel}
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+            <path d="M2 2l6 6M8 2l-6 6" />
+          </svg>
+        </button>
+      </span>
+    );
+  }
+
   return (
     <button
       ref={ref}
       type="button"
-      className={cn(
-        "ph-chip",
-        selected && "ph-chip--selected",
-        className
-      )}
+      className={chipClassName}
       {...props}
     >
       <span className="ph-chip__text">{children}</span>
-      {onRemove && (
-        <span
-          role="button"
-          tabIndex={-1}
-          onClick={(e) => { e.stopPropagation(); onRemove(); }}
-          className="ph-chip__remove"
-          aria-label="Remove"
-        >
-          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <path d="M2 2l6 6M8 2l-6 6" />
-          </svg>
-        </span>
-      )}
     </button>
   );
 });