@skunkworksai/ui-kit 0.1.23 → 0.1.25-a

package/rules/dashboard.md

@@ -22,6 +22,7 @@ import { AppDashboard } from '@skunkworksai/ui-kit'
 | `background` | `ReactNode` | `<AppDashboardBackgroundWave />` | Background preset or custom component. Must render gradient. See Background presets section. |
 | `pageTitle` | `AppPageTitleProps \| false` | omitted | Page title bar below the header. Pass `false` to hide entirely. |
 | `brand` | `Omit<AppSidebarBrandProps, "className">` | `WhiteLogo` / `WhiteSymbol` | Props forwarded to `AppSidebarBrand`. Use to set a custom logo for expanded and collapsed sidebar states. |
+| `sidebarFooter` | `ReactNode` | `undefined` | Content rendered at the bottom of the sidebar inside `AppSidebarFooter`, before the rail. Omit to render no footer. |
 | `children` | `ReactNode` | required | Page content. |
 
 ## Customising the header
@@ -397,6 +398,45 @@ const nav = [
 </AppDashboard>
 ```
 
+## Sidebar footer
+
+Use the `sidebarFooter` prop to render content at the bottom of the sidebar (inside `AppSidebarFooter`, before the rail). The consumer owns the markup — pass any `ReactNode`.
+
+```tsx
+// Wallet-style footer card
+<AppDashboard
+  sidebarFooter={
+    <div className="rounded-lg bg-sidebar-accent p-3 group-data-[collapsible=icon]:hidden">
+      <p className="text-xs font-medium text-sidebar-foreground">Acme Corp</p>
+      <p className="text-xs text-sidebar-foreground/60">Free plan · 3 seats</p>
+    </div>
+  }
+>
+  <PageContent />
+</AppDashboard>
+```
+
+Omitting `sidebarFooter` renders no `AppSidebarFooter` element at all — no extra whitespace.
+
+### Auto-hiding on icon collapse
+
+When the sidebar collapses to icon mode, content that doesn't make sense at 40 px wide should be hidden. Use the `group-data-[collapsible=icon]:hidden` Tailwind class on any element inside `sidebarFooter`:
+
+```tsx
+// The entire card hides when collapsed; nothing renders in icon mode
+<div className="... group-data-[collapsible=icon]:hidden">
+  ...
+</div>
+
+// Hide only the text, keep an avatar visible
+<div className="flex items-center gap-2">
+  <Avatar className="size-7 shrink-0" />
+  <span className="group-data-[collapsible=icon]:hidden text-sm">Kevin Aton</span>
+</div>
+```
+
+`group-data-[collapsible=icon]` matches the `data-collapsible="icon"` attribute set on the sidebar group element by `AppSidebarProvider` when the sidebar is collapsed to icon mode.
+
 ## Rules
 
 - **Do** use `AppDashboard` as the layout for every page — do not compose the scaffold manually.

package/rules/header.md

@@ -108,7 +108,7 @@ Use these only when building a layout outside `AppDashboard`:
 |-----------|---------|
 | `AppHeaderContent` | Inner flex container with padding and gap. |
 | `AppHeaderTitle` | Optional page label. `shrink-0`, never compresses. |
-| `AppHeaderSearchbar` | `flex-1` slot for search input groups. |
+| `AppHeaderSearchbar` | `flex-1 max-w-sm` slot for search input groups. Hidden on mobile (`hidden md:flex`) by default. |
 | `AppHeaderActions` | `ml-auto` right-side slot for controls. |
 | `AppHeaderNetworkCombobox` | Standalone network combobox — use inside a custom `actions` slot. |
 
@@ -199,6 +199,8 @@ With custom slots:
 
 The `searchbar` slot accepts any `ReactNode`. Always fill it with an `App*` component — never a raw `<input>`.
 
+`AppHeaderSearchbar` defaults to `hidden md:flex min-w-0 flex-1 max-w-sm`. The `max-w-sm` (384px) cap prevents searchbar content from stretching full-width when the consumer does not supply an explicit width. To widen, pass `className="max-w-md"` (or larger). Hidden on mobile — the mobile search icon + Sheet handles that path automatically.
+
 ```tsx
 // ✅ Correct
 import { AppInput } from '@skunkworksai/ui-kit'

package/rules/sidebar.md

@@ -209,6 +209,27 @@ No background fill by default or on hover. The **primary brand color** backgroun
 | :--- | :--- | :--- | :--- |
 | `showIcon` | `boolean` | `false` | Show a skeleton icon placeholder. |
 
+## AppSidebarFooter
+
+Renders sticky content at the bottom of the sidebar column, below `AppSidebarContent` and above `AppSidebarRail`.
+
+**Used internally by `AppDashboard`:** when you pass the `sidebarFooter` prop to `AppDashboard`, the block wraps your content in `AppSidebarFooter` automatically. You do not need to add `AppSidebarFooter` yourself when using `AppDashboard`.
+
+**In custom layouts** (e.g. when composing `AppSidebar` directly without `AppDashboard`), place `AppSidebarFooter` as the last child of `AppSidebar` before `AppSidebarRail`:
+
+```tsx
+<AppSidebar collapsible="icon">
+  <AppSidebarHeader>...</AppSidebarHeader>
+  <AppSidebarContent>...</AppSidebarContent>
+  <AppSidebarFooter>
+    <span className="text-xs text-sidebar-foreground/50">v1.0.0</span>
+  </AppSidebarFooter>
+  <AppSidebarRail />
+</AppSidebar>
+```
+
+Use `group-data-[collapsible=icon]:hidden` on any child element to auto-hide it when the sidebar collapses to icon mode (see `rules/dashboard.md` for examples).
+
 ## useSidebar
 
 Returns `{ state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar }`.