@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/styles/navigation.css

@@ -0,0 +1,293 @@
+/* navigation — component CSS owned by the navigation group. Tokens only. */
+
+/* ------------------------------------------------------------------ */
+/* Edge fade masks (Tabs overflow="scroll", ScrollArea fade)            */
+/* The scrolling element sets data-fade-start / data-fade-end while    */
+/* there is hidden content on that side; the mask disappears at edges. */
+/* ------------------------------------------------------------------ */
+
+[data-edge-fade] {
+  --fade-size: 1.5rem;
+  --fade-s: 0px;
+  --fade-e: 0px;
+}
+[data-edge-fade][data-fade-start] { --fade-s: var(--fade-size); }
+[data-edge-fade][data-fade-end] { --fade-e: var(--fade-size); }
+[data-edge-fade="x"] {
+  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
+}
+[dir="rtl"] [data-edge-fade="x"],
+[data-edge-fade="x"][dir="rtl"] {
+  mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
+}
+[data-edge-fade="y"] {
+  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
+}
+
+/* ------------------------------------------------------------------ */
+/* Scroll Area                                                         */
+/* ------------------------------------------------------------------ */
+
+[data-slot="scroll-area-thumb"] {
+  background: color-mix(in srgb, var(--fg) 25%, transparent);
+}
+[data-slot="scroll-area-bar"]:hover [data-slot="scroll-area-thumb"],
+[data-slot="scroll-area-thumb"]:active {
+  background: color-mix(in srgb, var(--fg) 42%, transparent);
+}
+.surface-nav [data-slot="scroll-area-thumb"] {
+  background: color-mix(in srgb, var(--nav-fg) 30%, transparent);
+}
+/* Radix sets display:table on the viewport child to measure width; let block content fill it. */
+[data-slot="scroll-area-viewport"] > div {
+  min-width: 100%;
+}
+[data-slot="scroll-area-viewport"][data-orientation="vertical"] > div {
+  display: block !important;
+}
+
+/* ------------------------------------------------------------------ */
+/* Resizable                                                           */
+/* While a handle is dragged, surfaces inside the group stop blurring  */
+/* (backdrop-filter recomputed every frame flickers and drops frames). */
+/* ------------------------------------------------------------------ */
+
+[data-slot="resizable-group"]:has([data-separator="active"]) {
+  --blur: 0px;
+  --overlay-blur: 0px;
+}
+[data-slot="resizable-group"]:has(> [data-separator="active"]) {
+  user-select: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* Navigation Menu — content slides between items                      */
+/* ------------------------------------------------------------------ */
+
+@keyframes ui-nav-from-start { from { opacity: 0; transform: translateX(calc(-12px * var(--dir))); } }
+@keyframes ui-nav-from-end { from { opacity: 0; transform: translateX(calc(12px * var(--dir))); } }
+@keyframes ui-nav-to-start { to { opacity: 0; transform: translateX(calc(-12px * var(--dir))); } }
+@keyframes ui-nav-to-end { to { opacity: 0; transform: translateX(calc(12px * var(--dir))); } }
+
+@layer components {
+  .ui-nav-content[data-motion="from-start"] { animation: ui-nav-from-start 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+  .ui-nav-content[data-motion="from-end"] { animation: ui-nav-from-end 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+  .ui-nav-content[data-motion="to-start"] { animation: ui-nav-to-start 140ms ease-in; }
+  .ui-nav-content[data-motion="to-end"] { animation: ui-nav-to-end 140ms ease-in; }
+  .ui-nav-viewport {
+    transition: width 200ms cubic-bezier(0.2, 0.8, 0.2, 1), height 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+}
+
+/* Glass budget: the floating pill already blurs, so its panel doesn't. */
+[data-slot="navigation-menu"][data-variant="floating"] [data-slot="navigation-menu-viewport"] {
+  --blur: 0px;
+  --popover: var(--popover-nested);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-nav-content,
+  .ui-nav-viewport {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Command palette — top-anchored dialog (fullscreen below 640px)      */
+/* ------------------------------------------------------------------ */
+
+@layer components {
+  .vui-dialog.vui-command-dialog {
+    inset-block-start: max(12dvh, 3rem);
+    translate: calc(-50% * var(--dir)) 0;
+    max-height: min(34rem, calc(100dvh - max(12dvh, 3rem) - 2rem));
+  }
+  .vui-dialog.vui-command-dialog[data-command-size="md"] { --dialog-w: 35rem; }
+  .vui-command-dialog [cmdk-list-sizer] { display: block; }
+  @media (max-width: 639px) {
+    .vui-dialog.vui-command-dialog {
+      inset: 0;
+      translate: none;
+      width: 100%;
+      max-width: none;
+      max-height: none;
+      border-radius: 0;
+    }
+    .vui-command-dialog [data-slot="command-list"] { max-height: none; flex: 1 1 auto; }
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Sidebar                                                             */
+/* ------------------------------------------------------------------ */
+
+@layer components {
+  .vui-sidebar {
+    --sidebar-item-h: calc(var(--control-h) * 0.9);
+    width: var(--sidebar-w);
+    transition: width 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+  [data-density="compact"] .vui-sidebar,
+  .vui-sidebar[data-density="compact"] {
+    --sidebar-w: 13.5rem;
+    --sidebar-w-rail: 3.25rem;
+  }
+  .vui-sidebar[data-collapsed] { width: var(--sidebar-w-rail); }
+  .vui-sidebar[data-mode="mobile"] { width: 100%; transition: none; }
+
+  /* The light "surface" variant (client portals, websites) uses content tokens instead of --nav*. */
+  .vui-sidebar[data-variant="surface"] {
+    --nav: var(--surface);
+    --nav-fg: var(--fg-muted);
+    --nav-fg-strong: var(--fg);
+    --nav-hover: var(--hover);
+    --nav-active: var(--selected);
+    --nav-line: var(--line);
+    --nav-sub: transparent;
+    --nav-popover: var(--popover-nested);
+    --nav-popover-border: var(--popover-border);
+    --ring: var(--accent-ink);
+  }
+
+  /* Flyouts: almost opaque, never blurred (hover would re-trigger backdrop-filter and flicker). */
+  .vui-sidebar-flyout {
+    background: var(--nav-popover);
+    border: 1px solid var(--nav-popover-border);
+    color: var(--nav-fg);
+    box-shadow: 0 18px 48px -12px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.18);
+    --blur: 0px;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    --ring: rgba(255, 255, 255, 0.85);
+  }
+  [data-variant="surface"] .vui-sidebar-flyout,
+  .vui-sidebar-flyout[data-variant="surface"] {
+    --nav-popover: var(--popover-nested);
+    --nav-popover-border: var(--popover-border);
+    --nav-fg: var(--fg-muted);
+    --nav-fg-strong: var(--fg);
+    --nav-hover: var(--hover);
+    --nav-line: var(--line);
+    --ring: var(--accent-ink);
+    box-shadow: var(--popover-shadow);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vui-sidebar { transition: none; }
+}
+
+/* ------------------------------------------------------------------ */
+/* App shell                                                           */
+/* ------------------------------------------------------------------ */
+
+@layer components {
+  .vui-app-shell { container: shell / inline-size; }
+  /* The skip link stays off-screen until focused. */
+  .vui-skip-link {
+    position: absolute;
+    inset-inline-start: 0.75rem;
+    inset-block-start: 0.75rem;
+    z-index: var(--z-toast);
+    translate: 0 calc(-100% - 1rem);
+  }
+  .vui-skip-link:focus-visible { translate: 0 0; }
+  /* Transparent top bar turns into the bar surface once the page scrolls. */
+  .vui-top-bar[data-variant="transparent"]:not([data-scrolled]) {
+    background: transparent;
+    border-bottom-color: transparent;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Record detail layout                                                */
+/* header · aside · main on narrow; header over main | aside from 42rem */
+/* ------------------------------------------------------------------ */
+
+.vui-record-grid {
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas: "header" "aside" "main";
+  align-items: start;
+}
+@container record (min-width: 42rem) {
+  .vui-record-grid {
+    column-gap: calc(var(--gap) * 1.4);
+    grid-template-columns: minmax(0, 1fr) min(var(--record-aside-w, 20rem), 40cqi);
+    grid-template-areas: "header header" "main aside";
+  }
+  .vui-record-grid[data-aside="start"] {
+    grid-template-columns: min(var(--record-aside-w, 20rem), 40cqi) minmax(0, 1fr);
+    grid-template-areas: "header header" "aside main";
+  }
+  .vui-record-grid > [data-slot="record-header"] {
+    padding-bottom: calc(var(--gap) * 0.4);
+    border-bottom: 1px solid var(--line);
+  }
+}
+.vui-pane-handle::before {
+  /* wider invisible hit area for touch */
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline: -4px;
+}
+.vui-pane-handle[data-dragging] { cursor: col-resize; }
+[data-material="glass"]:has(.vui-pane-handle[data-dragging]) .surface,
+[data-material="glass"]:has(.vui-pane-handle[data-dragging]) .surface-bar {
+  /* X10: no blur while resizing */
+  --blur: 0px;
+}
+
+/* ------------------------------------------------------------------ */
+/* Editor layout                                                       */
+/* ------------------------------------------------------------------ */
+
+.vui-editor-grid {
+  --editor-bar-h: 3.5rem;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas: "bar" "canvas";
+}
+[data-density="compact"] .vui-editor-grid { --editor-bar-h: 3rem; }
+.vui-editor-grid > [data-slot="editor-bar"] {
+  grid-area: bar;
+  position: sticky;
+  top: var(--editor-sticky-top, var(--topbar-h));
+  z-index: var(--z-sticky);
+  transition: opacity 400ms ease;
+}
+.vui-editor-grid > [data-slot="editor-canvas"] { grid-area: canvas; }
+.vui-editor-grid > [data-slot="editor-panel"] {
+  grid-area: panel;
+  position: sticky;
+  top: calc(var(--editor-sticky-top, var(--topbar-h)) + var(--editor-bar-h));
+  align-self: start;
+  max-height: calc(100dvh - var(--editor-sticky-top, var(--topbar-h)) - var(--editor-bar-h));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+@container editor (min-width: 44rem) {
+  .vui-editor-grid[data-panel="open"] {
+    grid-template-columns: minmax(0, 1fr) min(var(--editor-panel-w, 20rem), 42cqi);
+    grid-template-areas: "bar bar" "canvas panel";
+  }
+}
+/* "panes": fill the parent; canvas and panel scroll on their own. */
+.vui-editor-grid[data-scroll="panes"] {
+  height: 100%;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.vui-editor-grid[data-scroll="panes"] > [data-slot="editor-bar"] { position: relative; top: auto; }
+.vui-editor-grid[data-scroll="panes"] > [data-slot="editor-canvas"] { overflow-y: auto; overscroll-behavior: contain; }
+.vui-editor-grid[data-scroll="panes"] > [data-slot="editor-panel"] { position: relative; top: auto; max-height: none; height: 100%; }
+/* Focus mode: the bar fades after a pause, comes back on pointer move, hover or focus. */
+[data-slot="editor-layout"][data-focus-mode] [data-slot="editor-bar"][data-idle]:not(:hover):not(:focus-within) { opacity: 0.18; }
+[data-slot="editor-layout"][data-focus-mode] [data-slot="editor-canvas"] { background: transparent; }
+@media (prefers-reduced-motion: reduce) {
+  .vui-editor-grid > [data-slot="editor-bar"] { transition: none; }
+}

package/dist/styles/overlays.css

@@ -0,0 +1,244 @@
+/* overlays — component CSS owned by the overlays group. Tokens only. */
+
+@layer components {
+  /* ---------------------------------------------------------------- */
+  /* Overlay (Dialog, Alert Dialog, Sheet, Drawer)                     */
+  /* ---------------------------------------------------------------- */
+  .vui-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-overlay);
+    background: var(--overlay);
+  }
+  /* Only the first layer's overlay blurs (D5); the content above it then drops its own blur. */
+  .vui-overlay[data-overlay-blurred] {
+    -webkit-backdrop-filter: blur(var(--overlay-blur, 0px));
+    backdrop-filter: blur(var(--overlay-blur, 0px));
+  }
+
+  /* A layer panel sitting on a blurred overlay: no blur of its own, a little more opaque. */
+  [data-material="glass"] .vui-layer-panel,
+  .vui-layer-panel[data-material="glass"] {
+    --popover: color-mix(in srgb, var(--popover-nested) 94%, transparent);
+  }
+
+  /* ---------------------------------------------------------------- */
+  /* Dialog                                                            */
+  /* ---------------------------------------------------------------- */
+  .vui-dialog {
+    position: fixed;
+    z-index: var(--z-overlay);
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: calc(-50% * var(--dir)) -50%;
+    display: flex;
+    flex-direction: column;
+    width: calc(100vw - 24px);
+    max-width: var(--dialog-w, 32.5rem);
+    max-height: min(85dvh, var(--dialog-max-h));
+    border-radius: var(--radius-ui-lg);
+    outline: none;
+    overflow: hidden;
+  }
+  .vui-dialog[data-size="sm"] { --dialog-w: 25rem; }
+  .vui-dialog[data-size="md"] { --dialog-w: 32.5rem; }
+  .vui-dialog[data-size="lg"] { --dialog-w: 42.5rem; }
+  .vui-dialog[data-size="xl"] { --dialog-w: 55rem; }
+  .vui-dialog[data-size="full"] {
+    --dialog-w: none;
+    height: calc(100dvh - 24px);
+    max-height: calc(100dvh - 24px);
+  }
+
+  @media (max-width: 639px) {
+    .vui-dialog[data-mobile="sheet"] {
+      inset-block-start: auto;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      translate: none;
+      width: 100%;
+      max-width: none;
+      height: auto;
+      max-height: 92dvh;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+      border-bottom-width: 0;
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+    .vui-dialog[data-mobile="sheet"][data-state="open"] { animation: ui-sheet-bottom-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+    .vui-dialog[data-mobile="sheet"][data-state="closed"] { animation: ui-sheet-bottom-out 180ms ease-in; }
+    .vui-dialog[data-mobile="sheet"] .vui-layer-footer { flex-direction: column-reverse; align-items: stretch; }
+    .vui-dialog[data-mobile="sheet"] .vui-layer-footer > * { width: 100%; }
+
+    .vui-dialog[data-mobile="fullscreen"] {
+      inset: 0;
+      translate: none;
+      width: 100%;
+      max-width: none;
+      height: 100dvh;
+      max-height: 100dvh;
+      border-radius: 0;
+      border-width: 0;
+    }
+    /* The mobile sheet shows a grab line so it reads as a sheet (not draggable — use Drawer for that). */
+    .vui-dialog[data-mobile="sheet"]::before {
+      content: "";
+      align-self: center;
+      flex: none;
+      width: 2.25rem;
+      height: 4px;
+      margin-top: 8px;
+      border-radius: 999px;
+      background: var(--track);
+    }
+  }
+
+  /* ---------------------------------------------------------------- */
+  /* Layer header / body / footer (shared by Dialog, Sheet, Drawer…)   */
+  /* ---------------------------------------------------------------- */
+  .vui-layer-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  /* Hairline under the header only once the body has scrolled. */
+  .vui-layer-body[data-scrolled] { box-shadow: inset 0 1px 0 var(--line); }
+
+  /* ---------------------------------------------------------------- */
+  /* Sheet / Drawer                                                    */
+  /* ---------------------------------------------------------------- */
+  .vui-sheet {
+    position: fixed;
+    z-index: var(--z-overlay);
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    --sheet-gap: 0px;
+  }
+  .vui-sheet[data-inset] {
+    --sheet-gap: 8px;
+    border-radius: var(--radius-ui-lg);
+    overflow: hidden;
+  }
+  .vui-sheet[data-side="end"],
+  .vui-sheet[data-side="start"] {
+    inset-block: var(--sheet-gap);
+    width: calc(100vw - 2 * var(--sheet-gap) - 24px);
+    max-width: var(--sheet-w, 27.5rem);
+  }
+  .vui-sheet[data-side="end"] { inset-inline-end: var(--sheet-gap); }
+  .vui-sheet[data-side="start"] { inset-inline-start: var(--sheet-gap); }
+  .vui-sheet[data-side="end"]:not([data-inset]) { border-block-width: 0; border-inline-end-width: 0; }
+  .vui-sheet[data-side="start"]:not([data-inset]) { border-block-width: 0; border-inline-start-width: 0; }
+
+  .vui-sheet[data-side="top"],
+  .vui-sheet[data-side="bottom"] {
+    inset-inline: var(--sheet-gap);
+    max-height: var(--sheet-h, 85dvh);
+  }
+  .vui-sheet[data-side="top"] { inset-block-start: var(--sheet-gap); }
+  .vui-sheet[data-side="bottom"] { inset-block-end: var(--sheet-gap); padding-bottom: env(safe-area-inset-bottom); }
+  .vui-sheet[data-side="top"]:not([data-inset]) {
+    border-block-start-width: 0;
+    border-inline-width: 0;
+    border-end-start-radius: var(--radius-ui-lg);
+    border-end-end-radius: var(--radius-ui-lg);
+  }
+  .vui-sheet[data-side="bottom"]:not([data-inset]) {
+    border-block-end-width: 0;
+    border-inline-width: 0;
+    border-start-start-radius: var(--radius-ui-lg);
+    border-start-end-radius: var(--radius-ui-lg);
+  }
+
+  .vui-sheet[data-size="sm"] { --sheet-w: 22.5rem; --sheet-h: 40dvh; }
+  .vui-sheet[data-size="md"] { --sheet-w: 27.5rem; --sheet-h: 60dvh; }
+  .vui-sheet[data-size="lg"] { --sheet-w: 35rem; --sheet-h: 75dvh; }
+  .vui-sheet[data-size="xl"] { --sheet-w: 45rem; --sheet-h: 85dvh; }
+  .vui-sheet[data-size="full"] { --sheet-w: none; --sheet-h: none; }
+  .vui-sheet[data-size="full"][data-side="end"],
+  .vui-sheet[data-size="full"][data-side="start"] { width: calc(100vw - 2 * var(--sheet-gap)); }
+  .vui-sheet[data-size="full"][data-side="top"],
+  .vui-sheet[data-size="full"][data-side="bottom"] { height: calc(100dvh - 2 * var(--sheet-gap)); }
+  /* Top / bottom sheets: content-sized height, capped by --sheet-h; "full" fills. */
+
+  /* Drawer: drag follows the pointer through `translate`, so the close keyframes compose with it. */
+  .vui-drawer { touch-action: none; }
+  .vui-drawer [data-slot="drawer-body"] { touch-action: pan-y; }
+  .vui-drawer[data-dragging] { transition: none; user-select: none; }
+  .vui-drawer[data-settling] { transition: translate 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+  .vui-drawer-handle {
+    flex: none;
+    align-self: center;
+    width: 2.5rem;
+    height: 5px;
+    margin-block: 10px 2px;
+    border-radius: 999px;
+    background: var(--track);
+    cursor: grab;
+  }
+  .vui-drawer[data-dragging] .vui-drawer-handle { cursor: grabbing; background: var(--fg-subtle); }
+
+  /* ---------------------------------------------------------------- */
+  /* Toast (sonner, unstyled + tokens)                                 */
+  /* ---------------------------------------------------------------- */
+  .vui-toast {
+    width: var(--width, 22.25rem);
+  }
+  /* Only the front toast of the stack blurs; the ones behind it are opaque. */
+  .vui-toast:not([data-front="true"]) {
+    --blur: 0px;
+    --popover: var(--popover-nested);
+  }
+  .vui-toast[data-expanded="true"] { --popover: var(--popover-nested); }
+  .vui-toast[data-expanded="true"][data-front="true"] { --popover: var(--popover); }
+  .vui-toast [data-icon] { display: flex; }
+  .vui-toast [data-icon] > svg { width: 1rem; height: 1rem; }
+  .vui-toast [data-content] { min-width: 0; }
+  [data-sonner-toaster] { z-index: var(--z-toast); }
+
+  /* ---------------------------------------------------------------- */
+  /* Progress                                                          */
+  /* ---------------------------------------------------------------- */
+  .vui-progress-indicator { transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 200ms; }
+  .vui-progress[data-state="indeterminate"] .vui-progress-indicator {
+    width: 40%;
+    transform: none;
+    animation: ui-indeterminate 1.4s cubic-bezier(0.45, 0, 0.25, 1) infinite;
+  }
+  .vui-progress-circle[data-state="indeterminate"] .vui-progress-arc {
+    transform-origin: 50% 50%;
+    animation: ui-spin 0.9s linear infinite;
+  }
+
+  /* ---------------------------------------------------------------- */
+  /* Empty state                                                       */
+  /* ---------------------------------------------------------------- */
+  /* The icon well sits on two faint contour rings — a quiet "nothing here" mark. */
+  .vui-empty-well {
+    box-shadow:
+      0 0 0 6px color-mix(in srgb, var(--fg) 3.5%, transparent),
+      0 0 0 13px color-mix(in srgb, var(--fg) 2%, transparent);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vui-progress-indicator { transition: none; }
+  /* Indeterminate: a static half fill with fine diagonal hatching instead of a sliding bar. */
+  .vui-progress[data-state="indeterminate"] .vui-progress-indicator {
+    width: 50%;
+    animation: none;
+    background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--scene) 35%, transparent) 4px 6px);
+  }
+  .vui-progress-circle[data-state="indeterminate"] .vui-progress-arc { animation: none; }
+  .vui-drawer[data-settling] { transition: none; }
+  .vui-dialog[data-mobile="sheet"][data-state] { animation: none !important; }
+}
+
+/* Tooltip — never shown on touch-only devices (hover: none). It can't be the only source of information. */
+@media (hover: none) {
+  [data-slot="tooltip-content"] { display: none; }
+}
+/* Menus: the highlighted item of a parent menu stays tinted while its submenu is open. */
+[data-slot$="menu-sub-trigger"][data-state="open"] { background-color: var(--hover); }