@particle-academy/react-fancy 4.17.1 → 4.19.0

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

@@ -9350,17 +9350,30 @@ var Accordion = Object.assign(AccordionRoot, {
 function BreadcrumbsItem({
   children,
   href,
+  as: As,
   active = false,
   onClick,
-  className
+  className,
+  ...rest
 }) {
   const baseClass = cn(
     "text-sm",
     active ? "font-medium text-zinc-900 dark:text-white" : "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300",
     className
   );
-  if (href && !active) {
-    return /* @__PURE__ */ jsxRuntime.jsx("a", { "data-react-fancy-breadcrumbs-item": "", href, className: baseClass, children });
+  if ((href || As) && !active) {
+    const Link = As ?? "a";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        "data-react-fancy-breadcrumbs-item": "",
+        ...href ? { href } : {},
+        onClick,
+        className: baseClass,
+        ...rest,
+        children
+      }
+    );
   }
   if (onClick && !active) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9370,11 +9383,12 @@ function BreadcrumbsItem({
         "data-react-fancy-breadcrumbs-item": "",
         onClick,
         className: cn(baseClass, "cursor-pointer border-0 bg-transparent p-0"),
+        ...rest,
         children
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-breadcrumbs-item": "", className: baseClass, "aria-current": active ? "page" : void 0, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-breadcrumbs-item": "", className: baseClass, "aria-current": active ? "page" : void 0, ...rest, children });
 }
 BreadcrumbsItem.displayName = "BreadcrumbsItem";
 function BreadcrumbsDropdown({ items, activeLabel }) {
@@ -9492,18 +9506,30 @@ NavbarItems.displayName = "NavbarItems";
 function NavbarItem({
   children,
   href,
+  as: As,
   active = false,
-  className
+  className,
+  ...rest
 }) {
   const baseClass = cn(
     "rounded-lg px-3 py-2 text-sm font-medium transition-colors",
     active ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-white" : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white",
     className
   );
-  if (href) {
-    return /* @__PURE__ */ jsxRuntime.jsx("a", { "data-react-fancy-navbar-item": "", href, className: baseClass, children });
+  if (href || As) {
+    const Link = As ?? "a";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        "data-react-fancy-navbar-item": "",
+        ...href ? { href } : {},
+        className: baseClass,
+        ...rest,
+        children
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-navbar-item": "", className: baseClass, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-navbar-item": "", className: baseClass, ...rest, children });
 }
 NavbarItem.displayName = "NavbarItem";
 function NavbarToggle({ className }) {
@@ -12320,21 +12346,25 @@ function useMenu() {
 function MenuItem({
   children,
   href,
+  as: As,
   icon,
   active = false,
   disabled = false,
   badge,
   onClick,
-  className
+  className,
+  ...rest
 }) {
   const { orientation } = useMenu();
   const isVertical = orientation === "vertical";
-  const Tag = href ? "a" : "button";
-  const tagProps = href ? { href } : { type: "button", onClick };
+  const isLink = Boolean(href || As);
+  const Tag = isLink ? As ?? "a" : "button";
+  const tagProps = isLink ? { ...href ? { href } : {}, onClick } : { type: "button", onClick };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag,
     {
       ...tagProps,
+      ...rest,
       "data-react-fancy-menu-item": "",
       "data-active": active || void 0,
       "aria-current": active ? "page" : void 0,
@@ -12485,16 +12515,19 @@ function getLetters(children) {
 function SidebarItem({
   children,
   href,
+  as: As,
   icon,
   active = false,
   disabled = false,
   badge,
   onClick,
-  className
+  className,
+  ...rest
 }) {
   const { collapsed, collapseMode } = useSidebar();
-  const Tag = href ? "a" : "button";
-  const tagProps = href ? { href } : { type: "button", onClick };
+  const isLink = Boolean(href || As);
+  const Tag = isLink ? As ?? "a" : "button";
+  const tagProps = isLink ? { ...href ? { href } : {}, onClick } : { type: "button", onClick };
   const showIconOnly = collapsed && collapseMode === "icons" && icon;
   const showLetters = collapsed && (collapseMode === "letters" || collapseMode === "icons" && !icon);
   const title = typeof children === "string" ? children : void 0;
@@ -12502,6 +12535,7 @@ function SidebarItem({
     Tag,
     {
       ...tagProps,
+      ...rest,
       "data-react-fancy-sidebar-item": "",
       "data-active": active || void 0,
       "aria-current": active ? "page" : void 0,
@@ -12754,22 +12788,26 @@ MobileMenuBottomBar.displayName = "MobileMenuBottomBar";
 function MobileMenuItem({
   children,
   href,
+  as: As,
   icon,
   active = false,
   disabled = false,
   badge,
   onClick,
-  className
+  className,
+  ...rest
 }) {
   const { variant } = useMobileMenu();
   const isBottomBar = variant === "bottom-bar";
-  const Tag = href ? "a" : "button";
-  const tagProps = href ? { href } : { type: "button", onClick };
+  const isLink = Boolean(href || As);
+  const Tag = isLink ? As ?? "a" : "button";
+  const tagProps = isLink ? { ...href ? { href } : {}, onClick } : { type: "button", onClick };
   if (isBottomBar) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Tag,
       {
         ...tagProps,
+        ...rest,
         "data-react-fancy-mobile-menu-item": "",
         "data-active": active || void 0,
         "aria-current": active ? "page" : void 0,
@@ -12793,6 +12831,7 @@ function MobileMenuItem({
     Tag,
     {
       ...tagProps,
+      ...rest,
       "data-react-fancy-mobile-menu-item": "",
       "data-active": active || void 0,
       "aria-current": active ? "page" : void 0,