@justanarthur/modo-ui 0.6.0-canary.9 → 0.6.0

package/components/navigation/sidebar/sidebar.css

@@ -1,74 +0,0 @@
-/*
- * 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

@@ -1,55 +0,0 @@
-// 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

@@ -1,89 +0,0 @@
-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>