@particle-academy/react-fancy 4.18.0 → 4.19.1

package/README.md

@@ -265,7 +265,16 @@ src/
 
 ## Demo Pages
 
-Component demos live in the monorepo at `resources/js/react-demos/pages/`. Each component has a `ComponentNameDemo.tsx` that exercises all props and states using the `DemoSection` wrapper component.
+Every component has a live demo page on the showcase site, at
+`https://ui.particle.academy/packages/react-fancy/<component>` — e.g.
+[`/packages/react-fancy/button`](https://ui.particle.academy/packages/react-fancy/button).
+Each one exercises the component's props and states, with the source for every
+example shown inline.
+
+Those pages are the demos: one file per component in the showcase repo
+([`Particle-Academy/pa-ux-sandbox`](https://github.com/Particle-Academy/pa-ux-sandbox))
+at `resources/js/Pages/Packages/ComponentDocs/<ComponentName>.tsx`. The older
+`resources/js/react-demos/pages/` tree they replaced no longer exists.
 
 ---
 
@@ -318,7 +327,7 @@ Purely visual primitives (labels, dividers, layout shells) only owe the first bu
 - tsup handles the build — ESM, CJS, and `.d.ts` generation.
 - `react`, `react-dom`, and `lucide-react` are external dependencies, never bundled.
 - After any change, verify with `pnpm --filter @particle-academy/react-fancy build` before considering the work done.
-- When updating a component, update its demo page in `resources/js/react-demos/pages/` to cover all new features.
+- When updating a component, update its demo page in the showcase repo — `resources/js/Pages/Packages/ComponentDocs/<ComponentName>.tsx` in [`Particle-Academy/pa-ux-sandbox`](https://github.com/Particle-Academy/pa-ux-sandbox) — to cover all new features. That page is what `/packages/react-fancy/<component>` renders.
 
 ---
 

package/dist/index.cjs

@@ -12542,7 +12542,13 @@ function SidebarItem({
       "aria-disabled": disabled || void 0,
       title: collapsed ? title : void 0,
       className: cn(
-        "flex items-center rounded-md text-sm font-medium transition-colors",
+        // `w-full` matters when the Tag is a <button>: form controls size to
+        // FIT-CONTENT, not to their parent, so a long label made the item wider
+        // than the sidebar and an ancestor clipped the overflow — which reads as
+        // a label cut off mid-word rather than an ellipsis. Without this,
+        // `min-w-0` on the label below can never engage, because the item is
+        // never under width pressure in the first place.
+        "flex w-full items-center rounded-md text-sm font-medium transition-colors",
         "outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
         collapsed ? "justify-center px-2 py-2" : "gap-2 px-3 py-2",
         active ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100" : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100",
@@ -12554,7 +12560,7 @@ function SidebarItem({
         showLetters && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase", children: getLetters(children) }),
         !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left", children }),
           badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge })
         ] })
       ]