@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/components/navigation/sidebar/sidebar.css

@@ -0,0 +1,74 @@
+/*
+ * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
+ * `app/globals.css` (`.scroll-divider`) @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
+ * Local modifications: none (modo injects this file beside the Sidebar).
+ */
+
+/* ── scroll-divider — a hairline marking a scroll edge ──────────────────────
+   Pairs with .scroll-fade on a descendant viewport: where the fade dissolves
+   content, this draws the line that says "the region continues". The line
+   can't live inside the scroller — the fade's own mask would erase it at
+   exactly the edge it belongs on — so it rides the parent's pseudo-elements
+   and borrows the scroller's timeline by name. Browsers without scroll-driven
+   timelines simply get the fade, as before. */
+@keyframes sf-divider-start {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes sf-divider-end {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@supports (timeline-scope: --sf) {
+  .scroll-divider {
+    position: relative;
+    timeline-scope: --sf-scroller;
+    --scroll-divider-size: 48px;
+  }
+  .scroll-divider .scroll-fade {
+    scroll-timeline-name: --sf-scroller;
+  }
+  .scroll-divider::before,
+  .scroll-divider::after {
+    content: "";
+    position: absolute;
+    /* Inset so the line can hug the content's own gutter rather than the
+       panel edge — the sidebar's inset variant sets this to 8px. */
+    left: var(--scroll-divider-inset, 0px);
+    right: var(--scroll-divider-inset, 0px);
+    height: 1px;
+    background-color: var(--border);
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0;
+  }
+  /* Top edge: absent at rest, fading in as content passes above. */
+  .scroll-divider::before {
+    top: 0;
+    animation: sf-divider-start both linear;
+    animation-timeline: --sf-scroller;
+    animation-range: 0 var(--scroll-divider-size);
+  }
+  /* A region flush with the panel's own top edge has nothing above for
+     content to pass under, so the start line would read as a stray border. */
+  .scroll-divider:first-child::before {
+    content: none;
+  }
+  /* Bottom edge: present while content continues below, gone at the end. */
+  .scroll-divider::after {
+    bottom: 0;
+    animation: sf-divider-end both linear;
+    animation-timeline: --sf-scroller;
+    animation-range: calc(100% - var(--scroll-divider-size)) 100%;
+  }
+}

package/components/navigation/sidebar/variants.ts

@@ -0,0 +1,55 @@
+// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
+/*
+ * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
+ * `registry/default/sidebar-menu.tsx` and `registry/default/sidebar-core.tsx`
+ * @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
+ * Local modifications: `sidebarMenuButtonVariants`, split out of
+ * `sidebar-menu.tsx` unchanged, and the `SIDEBAR_*` constants, as they stand
+ * in `sidebar-core.tsx`, moved into a module with no JSX, hooks or contexts,
+ * so server code can build the row classes and read the sizes; both files
+ * re-export them.
+ */
+
+import { cva } from 'class-variance-authority'
+
+export const sidebarMenuButtonVariants = cva(
+  // The trailing gutter is an exact reservation published by the row (see
+  // rowGutter): --row-gutter at rest, --row-gutter-hover once hover-revealed
+  // actions are showing. One rule per state instead of a class per
+  // count/badge/reveal combination.
+  // Disabled stays in the layout, and pointer events pass through it to the
+  // row, since a browser sends no mouse events to a disabled button: the
+  // container keeps seeing the moves, and fluid hover simply never lights it.
+  'peer/menu-button relative z-10 flex w-full cursor-pointer select-none items-center gap-2 pl-2 text-left outline-none disabled:opacity-50 disabled:pointer-events-none transition-[padding] duration-fast pr-[var(--row-gutter)] group-hover/menu-item:pr-[var(--row-gutter-hover)] group-focus-within/menu-item:pr-[var(--row-gutter-hover)] group-hover/menu-sub-item:pr-[var(--row-gutter-hover)] group-focus-within/menu-sub-item:pr-[var(--row-gutter-hover)] group-has-[[data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/menu-item:pr-[var(--row-gutter-hover)] group-has-[[data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/menu-sub-item:pr-[var(--row-gutter-hover)]',
+  {
+    variants: {
+      variant: {
+        default: '',
+        outline: 'border border-border bg-background',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+)
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+/** Bare-key toggle defaults: "[" for a left sidebar, "]" for a right one.
+ *  Bare (no ⌘/Ctrl) so the browser's history shortcuts stay untouched. */
+export const SIDEBAR_KEYBOARD_SHORTCUT = '['
+export const SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = ']'
+/** Drag-resize clamp for the built-in rail handle (px). */
+export const SIDEBAR_MIN_WIDTH = 160
+export const SIDEBAR_MAX_WIDTH = 360
+/** Dragging this far past the minimum width collapses the sidebar instead of
+ *  bottoming out — the same "throw it at the edge to dismiss" affordance
+ *  native apps use. */
+export const SIDEBAR_COLLAPSE_SLOP = 56
+/** Open on hover: the strip past the sidebar's inner edge that opens it, and
+ *  how close a trigger must sit to that edge to widen the strip to its own
+ *  far side (px). */
+export const SIDEBAR_HOVER_STRIP = 12
+export const SIDEBAR_HOVER_TRIGGER_GAP = 24

package/components/navigation/tabs/examples.mdx

@@ -0,0 +1,89 @@
+import Tabs from './index'
+import Badge from '../../badge'
+import { Clock, Settings, SquareLibrary, Star } from 'lucide-react'
+
+# Basic
+
+The indicator slides to the clicked tab; the hover pill previews the next one.
+
+<div className="flex flex-col gap-4 w-full">
+  <Tabs defaultValue="library">
+    <Tabs.List>
+      <Tabs.Item value="library" label="Library" />
+      <Tabs.Item value="recents" label="Recents" />
+      <Tabs.Item value="favorites" label="Favorites" />
+      <Tabs.Item value="settings" label="Settings" />
+    </Tabs.List>
+    <Tabs.Panel value="library"><p className="text-body text-muted-foreground pt-3">Library content.</p></Tabs.Panel>
+    <Tabs.Panel value="recents"><p className="text-body text-muted-foreground pt-3">Recents content.</p></Tabs.Panel>
+    <Tabs.Panel value="favorites"><p className="text-body text-muted-foreground pt-3">Favorites content.</p></Tabs.Panel>
+    <Tabs.Panel value="settings"><p className="text-body text-muted-foreground pt-3">Settings content.</p></Tabs.Panel>
+  </Tabs>
+</div>
+
+# With Icons
+
+A leading `icon` thickens its stroke while its tab is hovered or active.
+
+<div className="flex flex-col gap-4 w-full">
+  <Tabs defaultValue="library">
+    <Tabs.List>
+      <Tabs.Item value="library" icon={SquareLibrary} label="Library" />
+      <Tabs.Item value="recents" icon={Clock} label="Recents" />
+      <Tabs.Item value="favorites" icon={Star} label="Favorites" />
+      <Tabs.Item value="settings" icon={Settings} label="Settings" />
+    </Tabs.List>
+    <Tabs.Panel value="library"><p className="text-body text-muted-foreground pt-3">Library content.</p></Tabs.Panel>
+    <Tabs.Panel value="recents"><p className="text-body text-muted-foreground pt-3">Recents content.</p></Tabs.Panel>
+    <Tabs.Panel value="favorites"><p className="text-body text-muted-foreground pt-3">Favorites content.</p></Tabs.Panel>
+    <Tabs.Panel value="settings"><p className="text-body text-muted-foreground pt-3">Settings content.</p></Tabs.Panel>
+  </Tabs>
+</div>
+
+# Uncontrolled
+
+FF's Controlled section, without the state: `defaultValue` picks the first
+active tab and the tabs keep their own state. To control them, pass `value`
++ `onValueChange` (or `selectedIndex` + `onSelect`) instead.
+
+<div className="flex flex-col gap-4 w-full">
+  <Tabs defaultValue="recents">
+    <Tabs.List>
+      <Tabs.Item value="library" label="Library" />
+      <Tabs.Item value="recents" label="Recents" />
+      <Tabs.Item value="favorites" label="Favorites" />
+    </Tabs.List>
+    <Tabs.Panel value="library"><p className="text-body text-muted-foreground pt-3">Library content.</p></Tabs.Panel>
+    <Tabs.Panel value="recents"><p className="text-body text-muted-foreground pt-3">Recents content.</p></Tabs.Panel>
+    <Tabs.Panel value="favorites"><p className="text-body text-muted-foreground pt-3">Favorites content.</p></Tabs.Panel>
+  </Tabs>
+</div>
+
+# With counters
+
+A `label` can be any node: text with a counter or a Badge. It still holds its width as the tab turns semibold.
+
+<div className="flex flex-col gap-4 w-full">
+  <Tabs defaultValue="open">
+    <Tabs.List>
+      <Tabs.Item value="open" label={<>Open <Badge size="compact">12</Badge></>} />
+      <Tabs.Item value="review" label={<>In review <Badge size="compact">3</Badge></>} />
+      <Tabs.Item value="closed" label={<>Closed <span className="tabular-nums text-muted-foreground">148</span></>} />
+    </Tabs.List>
+    <Tabs.Panel value="open"><p className="text-body text-muted-foreground pt-3">Twelve open requests.</p></Tabs.Panel>
+    <Tabs.Panel value="review"><p className="text-body text-muted-foreground pt-3">Three waiting for review.</p></Tabs.Panel>
+    <Tabs.Panel value="closed"><p className="text-body text-muted-foreground pt-3">Closed requests.</p></Tabs.Panel>
+  </Tabs>
+</div>
+
+# Link tabs
+
+`href` renders a tab as an anchor, for tabs that are pages: set the root's `value` from the current route and the indicator sits on it.
+
+<Tabs defaultValue="overview">
+  <Tabs.List>
+    <Tabs.Item value="overview" label="Overview" href="#overview" />
+    <Tabs.Item value="activity" label="Activity" href="#activity" />
+    <Tabs.Item value="settings" label="Settings" href="#settings" />
+  </Tabs.List>
+</Tabs>