@stevederico/skateboard-ui 3.6.1 → 3.7.1

package/App.jsx

@@ -6,7 +6,7 @@ import {
   Navigate,
   useLocation,
   useNavigate,
-} from 'react-router-dom';
+} from 'react-router';
 import { useEffect } from 'react';
 import { getState } from './components/core/Context.jsx';
 import { ThemeProvider } from './components/core/ThemeProvider.jsx';

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+3.7.1
+
+  Fix: `Button` now bridges shadcn-style `asChild` onto Base UI's `render` prop instead of leaking it onto the DOM `<button>` — removes the "React does not recognize the `asChild` prop" warning for `<Button asChild><a/></Button>` (e.g. LandingSpecSheet "Learn more")
+
+3.7.0
+
+  Breaking (peer dep rename): `react-router-dom` → `react-router`
+  In react-router v7 `react-router-dom` is just a re-export of `react-router`; consumers must install `react-router@^7.0.0` instead of `react-router-dom`
+  All internal imports rewritten (App, ProtectedRoute, Layout, Sidebar, TabBar, Utilities, Landing/Payment/Settings/SignOut views)
+
 3.6.1
 
   Fix: restore `icons/` in files allowlist (regressed in 3.6.0 — `@stevederico/skateboard-ui/icons` import was unresolvable in published tarball)

package/components/ProtectedRoute.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Navigate, Outlet } from 'react-router-dom';
+import { Navigate, Outlet } from 'react-router';
 import { isAuthenticated, apiRequest, getAppKey, getConstants } from './core/Utilities';
 import { Spinner } from '../shadcn/ui/spinner.jsx';
 

package/components/core/Utilities.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useInRouterContext, useNavigate } from 'react-router-dom';
+import { useInRouterContext, useNavigate } from 'react-router';
 import { getDispatch } from './Context.jsx';
 
 // Constants will be initialized by the app shell

package/components/layout/Layout.jsx

@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import TabBar from './TabBar.jsx'
 import { SidebarProvider, SidebarInset } from "../../shadcn/ui/sidebar"
 import Sidebar from "./Sidebar"

package/components/layout/Sidebar.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router";
 import DynamicIcon from "../core/DynamicIcon.jsx";
 import { getState } from "../core/Context.jsx";
 import {

package/components/layout/TabBar.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import DynamicIcon from '../core/DynamicIcon';
 import { getState } from '../core/Context.jsx';
 import { cn } from '../../shadcn/lib/utils.js';

package/components/views/LandingView.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { useTheme } from '../core/ThemeProvider.jsx';
 import { getState } from "../core/Context.jsx";
 import DynamicIcon from '../core/DynamicIcon.jsx';

package/components/views/PaymentView.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 import { getState } from '../core/Context.jsx';
 import { getCurrentUser, getAppKey } from '../core/Utilities.js'
 import { Spinner } from '../../shadcn/ui/spinner.jsx';

package/components/views/SettingsView.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { getState } from '../core/Context.jsx';
 import { useTheme } from '../core/ThemeProvider.jsx';
 import { Sun, Moon } from '../../icons';

package/components/views/SignOutView.jsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { getBackendURL, getCSRFToken } from '../core/Utilities';
 import { Spinner } from '../../shadcn/ui/spinner.jsx';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "3.6.1",
+  "version": "3.7.1",
   "type": "module",
   "exports": {
     "./Sidebar": {
@@ -145,6 +145,6 @@
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.0.0"
+    "react-router": "^7.0.0"
   }
 }

package/shadcn/ui/button.jsx

@@ -1,3 +1,4 @@
+import { Children } from "react";
 import { Button as ButtonPrimitive } from "../lib/base-ui/button.js"
 import { cva } from "../lib/cva.js";
 
@@ -42,19 +43,37 @@ const buttonVariants = cva(
  * @param {string} [props.className] - Additional CSS classes
  * @param {"default"|"outline"|"secondary"|"ghost"|"destructive"|"link"|"gradient"} [props.variant="default"] - Visual style
  * @param {"default"|"xs"|"sm"|"lg"|"icon"|"icon-xs"|"icon-sm"|"icon-lg"|"cta"} [props.size="default"] - Button size
+ * @param {boolean} [props.asChild=false] - Render the single child element styled as a button (shadcn-style). Bridged onto Base UI's `render` prop.
  * @returns {JSX.Element}
  */
 function Button({
   className,
   variant = "default",
   size = "default",
+  asChild = false,
+  children,
   ...props
 }) {
+  const classes = cn(buttonVariants({ variant, size, className }));
+  // Base UI has no `asChild` — it uses a `render` prop. Bridge the shadcn-style
+  // `asChild` API so `<Button asChild><a .../></Button>` renders the child element
+  // (merged with button props) instead of leaking `asChild` onto the DOM <button>.
+  if (asChild) {
+    return (
+      <ButtonPrimitive
+        data-slot="button"
+        className={classes}
+        render={Children.only(children)}
+        {...props} />
+    );
+  }
   return (
     <ButtonPrimitive
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props} />
+      className={classes}
+      {...props}>
+      {children}
+    </ButtonPrimitive>
   );
 }