@stevederico/skateboard-ui 4.3.0 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # CHANGELOG
 
+4.6.0
+
+  SettingsView uses ThemeToggle
+
+4.5.0
+
+  Toggle uses resolvedTheme
+  ThemeProvider owns dark
+  Drop dark-mode stripping
+  Slot render child fallback
+
+4.4.0
+
+  Document a11y releases
+  Fix peer-dep naming
+
 4.3.0
 
   Submenu aria-controls wiring

package/README.md

@@ -6,6 +6,8 @@ React component library for rapid application development. Built with TypeScript
 
 **Self-contained components (v4.0).** Every component is now hand-written with no primitive framework underneath — the previously-vendored `@base-ui/react` bundle (~31k lines) is gone. Floating positioning, focus trapping, dismiss layers, and animations are small in-house hooks; modals use the native `<dialog>` element. The legacy `shadcn/ui/*` import paths still work — they re-export the new `ui/*` components — so existing apps need no changes.
 
+**Accessibility-hardened (v4.1–4.3).** The self-contained tier was put through three rounds of a11y work: menu/select typeahead, correct keyboard focus management and tab-stops (menus, tabs, radios, popovers, navigation menu), ARIA wiring (`aria-controls`, labelled-by, indeterminate checkbox mixed state, named popover/slider dialogs), scroll-lock and exit-animation fixes, plus matching DOMException error names. Each release adds to a Playwright a11y regression suite that runs `workers: 1`.
+
 **TypeScript with full type declarations.** Source is TypeScript, compiled to plain JavaScript + `.d.ts` in `dist/` (`npm run build`). JavaScript apps consume the compiled JS exactly as before — import paths are unchanged — and TypeScript apps get real types for every export (`SkateboardConstants`, `User`, component props, `VariantProps`, typed icons).
 
 **Node.js 24+** is required in the app repo for build tooling and backend (see `engines` in `package.json`). The UI package itself runs in the browser.
@@ -1309,7 +1311,7 @@ All components support dark mode automatically and accept a `className` prop for
 ### Required peer dependencies
 - React 19.1+
 - react-dom 19.1+
-- react-router-dom 7.0+
+- react-router 7.0+
 
 ### Hard dependencies
 

package/dist/components/ThemeToggle.js

@@ -5,14 +5,14 @@ import { Sun, Moon } from '../icons/index.js';
 import { Button } from '../shadcn/ui/button.js';
 import { cn } from '../shadcn/lib/utils.js';
 export default function ThemeToggle({ className = "", iconSize = 16, variant = "settings", ...props }) {
-    const { theme, setTheme } = useTheme();
+    const { resolvedTheme, setTheme } = useTheme();
     const [mounted, setMounted] = React.useState(false);
     React.useEffect(() => {
         setMounted(true);
     }, []);
     if (!mounted)
         return null;
-    const isDarkMode = theme === 'dark';
+    const isDarkMode = resolvedTheme === 'dark';
     const toggleTheme = () => setTheme(isDarkMode ? 'light' : 'dark');
     return (_jsx(Button, { variant: variant === "landing" ? "outline" : "ghost", size: "icon", onClick: toggleTheme, className: cn(className), "aria-label": "Toggle dark mode", ...props, children: isDarkMode
             ? _jsx(Sun, { size: iconSize })

package/dist/components/core/Utilities.d.ts

@@ -321,7 +321,8 @@ export declare function showUpgradeSheet(upgradeSheetRef: RefObject<{
  */
 export declare function timestampToString(input: number | Date, format?: string): string | number | Date;
 /**
- * Hook that sets the document title and removes dark mode on non-app pages.
+ * Hook that sets the document title on navigation.
+ * Dark mode is owned by ThemeProvider — never touch the class here.
  *
  * @param {Object} location - react-router location object
  */

package/dist/components/core/Utilities.js

@@ -657,17 +657,14 @@ export function timestampToString(input, format = "DOB") {
     }
 }
 /**
- * Hook that sets the document title and removes dark mode on non-app pages.
+ * Hook that sets the document title on navigation.
+ * Dark mode is owned by ThemeProvider — never touch the class here.
  *
  * @param {Object} location - react-router location object
  */
 export function useAppSetup(location) {
     useEffect(() => {
         document.title = getConstants().appName;
-        if (!location.pathname.toLowerCase().includes('app')) {
-            document.documentElement.classList.remove('dark');
-            document.body.classList.remove('dark');
-        }
     }, [location.pathname]);
 }
 // ===== API REQUEST UTILITIES =====

package/dist/components/views/SettingsView.js

@@ -2,8 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useNavigate } from 'react-router';
 import { getState } from '../core/Context.js';
-import { useTheme } from '../core/ThemeProvider.js';
-import { Sun, Moon } from '../../icons/index.js';
+import ThemeToggle from '../ThemeToggle.js';
 import Header from '../layout/Header.js';
 import { Avatar, AvatarFallback } from '../../shadcn/ui/avatar.js';
 import { Badge } from '../../shadcn/ui/badge.js';
@@ -29,8 +28,6 @@ export default function SettingsView() {
     const { state, dispatch } = getState();
     const constants = state.constants;
     const navigate = useNavigate();
-    const { theme, setTheme } = useTheme();
-    const isDarkMode = theme === 'dark';
     const user = state.user;
     const subscription = user?.subscription;
     const showAuth = (constants.noLogin === false || typeof constants.noLogin === 'undefined') && user;
@@ -49,7 +46,7 @@ export default function SettingsView() {
             return `Ends ${new Date(subscription.expires * 1000).toLocaleDateString('en-US')}`;
         return `Plan ${status}`;
     }
-    return (_jsxs("div", { className: "flex-1", children: [_jsx(Header, { title: "Settings", children: _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setTheme(isDarkMode ? 'light' : 'dark'), "aria-label": "Toggle dark mode", children: isDarkMode ? _jsx(Sun, { size: 20 }) : _jsx(Moon, { size: 20 }) }) }), _jsxs("div", { className: "flex flex-col items-center p-4 gap-4", children: [!user && constants.noLogin !== true && (_jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Account" }), _jsx(CardDescription, { children: "Sign in to access your account settings." }), _jsx(CardAction, { children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+    return (_jsxs("div", { className: "flex-1", children: [_jsx(Header, { title: "Settings", children: _jsx(ThemeToggle, { iconSize: 20 }) }), _jsxs("div", { className: "flex flex-col items-center p-4 gap-4", children: [!user && constants.noLogin !== true && (_jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Account" }), _jsx(CardDescription, { children: "Sign in to access your account settings." }), _jsx(CardAction, { children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
                                             if (isAuthOverlayEnabled()) {
                                                 dispatch({ type: 'SHOW_AUTH_OVERLAY' });
                                             }

package/dist/ui/slot.d.ts

@@ -19,6 +19,10 @@ declare function Slot({ children, className, style, ref, ...props }: SlotProps):
  * element to `render` to control the rendered element; here that maps onto the
  * `asChild` + Slot mechanism. Returns whether to use the Slot and what child to
  * render through it, so `render={<Button/>}` keeps working on the new components.
+ * Matching Base UI's render-prop semantics, the component's children become the
+ * render element's children when the element has none of its own — so
+ * `<Trigger render={<Button/>}>Columns</Trigger>` renders the label, while
+ * `render={<Button>Sign Out</Button>}` keeps the element's own children.
  */
 declare function resolveRender(asChild: boolean | undefined, render: React.ReactElement | undefined, children: React.ReactNode): {
     useSlot: boolean;

package/dist/ui/slot.js

@@ -53,10 +53,28 @@ function Slot({ children, className, style, ref, ...props }) {
  * element to `render` to control the rendered element; here that maps onto the
  * `asChild` + Slot mechanism. Returns whether to use the Slot and what child to
  * render through it, so `render={<Button/>}` keeps working on the new components.
+ * Matching Base UI's render-prop semantics, the component's children become the
+ * render element's children when the element has none of its own — so
+ * `<Trigger render={<Button/>}>Columns</Trigger>` renders the label, while
+ * `render={<Button>Sign Out</Button>}` keeps the element's own children.
  */
 function resolveRender(asChild, render, children) {
-    if (React.isValidElement(render))
+    if (React.isValidElement(render)) {
+        const renderProps = render.props;
+        const ownChildren = typeof renderProps === "object" &&
+            renderProps !== null &&
+            "children" in renderProps
+            ? renderProps.children
+            : undefined;
+        // != null, not truthiness: 0 and "" are renderable children to keep.
+        if (ownChildren == null && children != null) {
+            return {
+                useSlot: true,
+                slotChild: React.cloneElement(render, undefined, children),
+            };
+        }
         return { useSlot: true, slotChild: render };
+    }
     return { useSlot: !!asChild, slotChild: children };
 }
 export { Slot, mergeRefs, resolveRender };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "4.3.0",
+  "version": "4.6.0",
   "type": "module",
   "exports": {
     ".": {