@stevederico/skateboard-ui 2.23.0 → 3.0.0

package/.claude/worktrees/strange-feistel-abc494/hooks/useAuthGate.js

@@ -0,0 +1,37 @@
+import { useCallback } from 'react';
+import { getState } from '../core/Context.jsx';
+
+/**
+ * Hook that gates actions behind authentication.
+ *
+ * If the user is authenticated, the callback runs immediately.
+ * If not, the auth overlay is shown and the callback runs after successful auth.
+ *
+ * @returns {Function} requireAuth - Call with a callback to gate behind auth
+ *
+ * @example
+ * import { useAuthGate } from '@stevederico/skateboard-ui/useAuthGate';
+ *
+ * function MyComponent() {
+ *   const requireAuth = useAuthGate();
+ *
+ *   function handleSave() {
+ *     requireAuth(() => {
+ *       saveThing();
+ *     });
+ *   }
+ * }
+ */
+export function useAuthGate() {
+  const { state, dispatch } = getState();
+
+  const requireAuth = useCallback((callback) => {
+    if (state.user) {
+      callback();
+    } else {
+      dispatch({ type: 'SHOW_AUTH_OVERLAY', payload: callback });
+    }
+  }, [state.user, dispatch]);
+
+  return requireAuth;
+}

package/.claude/worktrees/strange-feistel-abc494/index.js

@@ -0,0 +1,3 @@
+export { default as ProtectedRoute } from "./components/ProtectedRoute";
+export { isAuthenticated, getAppKey, getCSRFToken, getCurrentUser, useAppSetup } from "./core/Utilities";
+export { createSkateboardApp } from "./App.jsx";

package/.claude/worktrees/strange-feistel-abc494/jsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "paths": {
+        "@/*": ["./*"]
+      }
+    }
+  }
+  

package/.claude/worktrees/strange-feistel-abc494/layout/Header.jsx

@@ -0,0 +1,50 @@
+import { Separator } from "../shadcn/ui/separator.jsx";
+import { Button } from "../shadcn/ui/button.jsx";
+import { Badge } from "../shadcn/ui/badge.jsx";
+import { cn } from "../shadcn/lib/utils.js";
+
+/**
+ * App header bar built on shadcn primitives (Button, Separator, Badge).
+ *
+ * Renders page title and optional action button on the right.
+ * A shadcn Separator renders below the header instead of a border utility.
+ *
+ * @param {Object} props
+ * @param {string} props.title - Header title text
+ * @param {string} [props.buttonTitle] - Action button label (omit to hide button)
+ * @param {Function} [props.onButtonTitleClick] - Button click handler
+ * @param {string} [props.buttonClass] - Additional CSS classes for the button
+ * @param {string} [props.className] - Additional CSS classes for the header
+ * @param {React.ReactNode} [props.children] - Custom right-side content
+ * @returns {JSX.Element} Header bar with separator
+ */
+function Header({ title, buttonTitle, onButtonTitleClick, buttonClass, className, children, ...props }) {
+  return (
+    <>
+      <header
+        className={cn("flex h-(--header-height) shrink-0 items-center gap-2", className)}
+        {...props}
+      >
+        <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+          <h1 className="text-lg font-medium">{title}</h1>
+          <div className="ml-auto flex items-center gap-2">
+            {typeof buttonTitle !== "undefined" && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className={buttonClass || ""}
+                onClick={onButtonTitleClick}
+              >
+                {buttonTitle}
+              </Button>
+            )}
+            {children}
+          </div>
+        </div>
+      </header>
+      <Separator />
+    </>
+  );
+}
+
+export default Header;

package/.claude/worktrees/strange-feistel-abc494/layout/Layout.jsx

@@ -0,0 +1,60 @@
+import { Outlet } from 'react-router-dom';
+import TabBar from './TabBar.jsx'
+import { SidebarProvider, SidebarInset } from "../shadcn/ui/sidebar"
+import Sidebar from "./Sidebar"
+import { getState } from '../core/Context.jsx';
+
+/**
+ * Page layout wrapper with sidebar and tab bar.
+ *
+ * Renders Sidebar (desktop) and TabBar (mobile) based on constants
+ * configuration and programmatic visibility state. Uses SidebarInset
+ * for proper shadcn sidebar layout with inset variant.
+ *
+ * Set `constants.hideSidebarInsetRounding` to true to remove the
+ * rounded corners on the main content area.
+ *
+ * Set `constants.sidebarCollapsed` to true to start the sidebar
+ * in its collapsed (icon-only) state.
+ *
+ * @param {Object} props
+ * @param {React.ReactNode} [props.children] - Child content (unused, Outlet renders routes)
+ * @returns {JSX.Element} Layout with sidebar, main content, and tab bar
+ *
+ * @example
+ * import Layout from '@stevederico/skateboard-ui/Layout';
+ *
+ * // Used internally by createSkateboardApp route config
+ * <Route element={<Layout />}>
+ *   <Route path="home" element={<HomeView />} />
+ * </Route>
+ */
+export default function Layout({ children }) {
+  const { state } = getState();
+  const { sidebarVisible, tabBarVisible } = state.ui;
+  const constants = state.constants;
+
+  // Combine constants (static config) with context state (programmatic control)
+  const showSidebar = !constants.hideSidebar && sidebarVisible;
+  const showTabBar = !constants.hideTabBar && tabBarVisible;
+
+  return (
+    <div className="min-h-screen flex flex-col pt-[env(safe-area-inset-top)] pb-[calc(5rem+env(safe-area-inset-bottom))] md:pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
+      <a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-background focus:text-foreground focus:rounded-md focus:ring-2 focus:ring-ring">
+        Skip to content
+      </a>
+      <SidebarProvider
+        defaultOpen={!constants.sidebarCollapsed}
+        style={{
+          '--sidebar-width': '12rem',
+          '--header-height': '3.5rem',
+        }}>
+        {showSidebar && <Sidebar variant="inset" />}
+        <SidebarInset id="main" className={`border border-border/50 ${constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}`}>
+          <Outlet />
+        </SidebarInset>
+      </SidebarProvider>
+      {showTabBar && <TabBar className="md:hidden" />}
+    </div>
+  );
+}

package/.claude/worktrees/strange-feistel-abc494/layout/Sidebar.jsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import DynamicIcon from "../core/DynamicIcon.jsx";
+import { getState } from "../core/Context.jsx";
+import {
+  Sidebar as SidebarRoot,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  useSidebar,
+} from "../shadcn/ui/sidebar";
+import { Settings } from 'lucide-react';
+
+/**
+ * Desktop navigation sidebar using shadcn primitives.
+ *
+ * Renders app pages from constants.pages with DynamicIcon icons,
+ * tooltip support when collapsed, and settings pushed to the footer.
+ *
+ * @returns {JSX.Element} Sidebar navigation
+ *
+ * @example
+ * import Sidebar from '@stevederico/skateboard-ui/Sidebar';
+ *
+ * <Sidebar />
+ */
+export default function Sidebar({ variant = "inset", ...props }) {
+  const { open } = useSidebar();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const currentPage = (location.pathname.split("/")[2] || "").toLowerCase();
+  const { state } = getState();
+  const constants = state.constants;
+
+  return (
+    <SidebarRoot collapsible="icon" variant={variant} {...props}>
+      {/* Header: App icon + name */}
+      {!constants.hideSidebarHeader && (
+        <SidebarHeader className="p-2">
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                size="sm"
+                onClick={() => navigate("/app")}
+                tooltip={constants.appName}
+                className="hover:bg-transparent active:bg-transparent"
+              >
+                <div className="bg-app flex items-center justify-center shrink-0 rounded-lg size-8 -ml-2">
+                  <DynamicIcon
+                    name={constants.appIcon}
+                    strokeWidth={2}
+                    className="text-white"
+                  />
+                </div>
+                <span className="font-semibold text-lg shrink min-w-0 truncate">
+                  {constants.appName}
+                </span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+      )}
+
+      {/* Main navigation from constants.pages */}
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {constants.pages.map((item) => {
+                const isActive = currentPage === item.url.toLowerCase();
+                return (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton
+                      isActive={isActive}
+                      tooltip={item.title}
+                      size="sm"
+                      className="data-active:font-normal"
+                      onClick={() =>
+                        navigate(`/app/${item.url.toLowerCase()}`)
+                      }
+                    >
+                      <DynamicIcon
+                        name={item.icon}
+                        size={20}
+                        strokeWidth={2}
+                      />
+                      <span>{item.title}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      {/* Footer: Settings */}
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              isActive={location.pathname.toLowerCase().includes("settings")}
+              tooltip="Settings"
+              size="sm"
+              className="data-active:font-normal"
+              onClick={() => navigate("/app/settings")}
+            >
+              <Settings size={20} strokeWidth={2} />
+              <span>Settings</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+
+      <SidebarRail />
+    </SidebarRoot>
+  );
+}

package/.claude/worktrees/strange-feistel-abc494/layout/TabBar.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import DynamicIcon from '../core/DynamicIcon';
+import { getState } from '../core/Context.jsx';
+import { cn } from '../shadcn/lib/utils.js';
+
+/**
+ * Mobile bottom tab bar navigation.
+ *
+ * Renders page icons from constants.pages plus a settings tab.
+ * Only visible on mobile (hidden on md+ screens via Layout).
+ *
+ * @param {Object} props
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {JSX.Element} Bottom tab bar
+ *
+ * @example
+ * import TabBar from '@stevederico/skateboard-ui/TabBar';
+ *
+ * // Used internally by Layout component
+ * <TabBar />
+ */
+export default function TabBar({ className, ...props }) {
+  const location = useLocation();
+  const { state } = getState();
+  const constants = state.constants;
+
+  const tabs = [
+    ...(constants?.pages || []).map((item) => ({
+      title: item.title,
+      icon: item.icon,
+      to: `/app/${item.url.toLowerCase()}`,
+      match: item.url.toLowerCase(),
+    })),
+    { title: 'Settings', icon: 'settings', to: '/app/settings', match: 'settings' },
+  ];
+
+  return (
+    <nav
+      className={cn(
+        "fixed md:hidden bottom-0 inset-x-0 bg-background border-t border-border z-50",
+        className
+      )}
+      role="navigation"
+      aria-label="Main navigation"
+      {...props}
+    >
+      <div className="flex justify-around items-center pt-2 pb-4">
+        {tabs.map((tab) => {
+          const isActive = location.pathname.includes(tab.match);
+          return (
+            <Link
+              key={tab.title}
+              to={tab.to}
+              className={cn(
+                "flex flex-col items-center gap-0.5 px-3 transition-colors",
+                isActive ? "text-foreground" : "text-muted-foreground"
+              )}
+              aria-label={tab.title}
+              aria-current={isActive ? 'page' : undefined}
+            >
+              <DynamicIcon name={tab.icon} size={24} strokeWidth={isActive ? 2 : 1.5} />
+              <span className="text-xs">{tab.title}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}

package/.claude/worktrees/strange-feistel-abc494/package.json

@@ -0,0 +1,146 @@
+{
+  "name": "@stevederico/skateboard-ui",
+  "private": false,
+  "version": "2.23.0",
+  "type": "module",
+  "exports": {
+    "./Sidebar": {
+      "import": "./layout/Sidebar.jsx",
+      "default": "./layout/Sidebar.jsx"
+    },
+    "./DynamicIcon": {
+      "import": "./core/DynamicIcon.jsx",
+      "default": "./core/DynamicIcon.jsx"
+    },
+    "./ErrorBoundary": {
+      "import": "./components/ErrorBoundary.jsx",
+      "default": "./components/ErrorBoundary.jsx"
+    },
+    "./Header": {
+      "import": "./layout/Header.jsx",
+      "default": "./layout/Header.jsx"
+    },
+    "./LandingView": {
+      "import": "./views/LandingView.jsx",
+      "default": "./views/LandingView.jsx"
+    },
+    "./Layout": {
+      "import": "./layout/Layout.jsx",
+      "default": "./layout/Layout.jsx"
+    },
+    "./NotFound": {
+      "import": "./views/NotFound.jsx",
+      "default": "./views/NotFound.jsx"
+    },
+    "./SettingsView": {
+      "import": "./views/SettingsView.jsx",
+      "default": "./views/SettingsView.jsx"
+    },
+    "./Sheet": {
+      "import": "./components/Sheet.jsx",
+      "default": "./components/Sheet.jsx"
+    },
+    "./SignInView": {
+      "import": "./views/SignInView.jsx",
+      "default": "./views/SignInView.jsx"
+    },
+    "./SignUpView": {
+      "import": "./views/SignUpView.jsx",
+      "default": "./views/SignUpView.jsx"
+    },
+    "./SignOutView": {
+      "import": "./views/SignOutView.jsx",
+      "default": "./views/SignOutView.jsx"
+    },
+    "./PaymentView": {
+      "import": "./views/PaymentView.jsx",
+      "default": "./views/PaymentView.jsx"
+    },
+    "./TabBar": {
+      "import": "./layout/TabBar.jsx",
+      "default": "./layout/TabBar.jsx"
+    },
+    "./TextView": {
+      "import": "./views/TextView.jsx",
+      "default": "./views/TextView.jsx"
+    },
+    "./ThemeToggle": {
+      "import": "./components/ThemeToggle.jsx",
+      "default": "./components/ThemeToggle.jsx"
+    },
+    "./UpgradeSheet": {
+      "import": "./components/UpgradeSheet.jsx",
+      "default": "./components/UpgradeSheet.jsx"
+    },
+    "./Utilities": {
+      "import": "./core/Utilities.js",
+      "default": "./core/Utilities.js"
+    },
+    "./ProtectedRoute": {
+      "import": "./components/ProtectedRoute.jsx",
+      "default": "./components/ProtectedRoute.jsx"
+    },
+    "./styles.css": {
+      "import": "./styles.css",
+      "default": "./styles.css"
+    },
+    "./Context": {
+      "import": "./core/Context.jsx",
+      "default": "./core/Context.jsx"
+    },
+    "./App": {
+      "import": "./App.jsx",
+      "default": "./App.jsx"
+    },
+    "./AuthOverlay": {
+      "import": "./components/AuthOverlay.jsx",
+      "default": "./components/AuthOverlay.jsx"
+    },
+    "./useAuthGate": {
+      "import": "./hooks/useAuthGate.js",
+      "default": "./hooks/useAuthGate.js"
+    },
+    "./shadcn/ui/*": "./shadcn/ui/*.jsx",
+    "./shadcn/lib/utils": {
+      "import": "./shadcn/lib/utils.js",
+      "default": "./shadcn/lib/utils.js"
+    },
+    "./shadcn/hooks/use-mobile": {
+      "import": "./shadcn/hooks/use-mobile.js",
+      "default": "./shadcn/hooks/use-mobile.js"
+    }
+  },
+  "scripts": {
+    "prod": "npm publish"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stevederico/skateboard-ui.git"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.4.1",
+    "use-sync-external-store": "^1.6.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "lucide-react": "^1.11.0",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^9.14.0",
+    "react-resizable-panels": "^4.10.0",
+    "recharts": "^3.8.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.0.0"
+  }
+}

package/.claude/worktrees/strange-feistel-abc494/shadcn/hooks/use-mobile.js

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange);
+  }, [])
+
+  return !!isMobile
+}

package/.claude/worktrees/strange-feistel-abc494/shadcn/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

package/.claude/worktrees/strange-feistel-abc494/shadcn/ui/accordion.jsx

@@ -0,0 +1,77 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "../lib/utils.js"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({
+  className,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props} />
+  );
+}
+
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props} />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "cursor-pointer focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+          className
+        )}
+        {...props}>
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
+      {...props}>
+      <div
+        className={cn(
+          "pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+          className
+        )}>
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }