zidane-ui 9.1.1 → 9.1.3

package/src/components/button.ts

@@ -1,120 +0,0 @@
-/*
- * The app's buttons: one quiet, consistent set for every surface (dock
- * cards, inbox, modals, Settings, panels). Compose with `buttonClass`, or
- * use the named constants.
- *
- *   secondary  a raised chip (`.zg-raised`), muted text; hover brightens
- *              the text.
- *   primary    soft accent wash (not a filled slab) with accent text;
- *              hover deepens the wash.
- *   solid      the accent fill (`.zg-fill`, lit like a raised chip), for
- *              the one committing action of a dialog footer (Create,
- *              Approve, Import).
- *   ghost      text only; hover adds the row wash. Leading a row, pass
- *              `flush: 'start'` so its text lines up with the content edge
- *              instead of sitting a padding inside it.
- *   danger     muted red on nothing; hover adds a soft red wash. For the
- *              step that only asks (Remove, Delete…, Reject…).
- *   danger-solid  the same fill as `solid`, in danger (`.zg-fill-danger`),
- *              for the destructive commit: a confirm dialog's Delete, an
- *              armed "Confirm …", Deny.
- *
- * Every wash sits on the press layer (`::before`), so a variant without a
- * fill of its own says `bg-transparent`: the reset keeps a <button>'s
- * native background, which would show grey under the wash.
- *
- * Sizes: `xs` in toolbars (h-6 / 11px), `sm` in rows (h-7 / 12px), `md`
- * for card actions, headers, form submits and dialog footers (h-8 / 13px),
- * `lg` for page-level calls to action (h-9 / 14px: the website's hero).
- */
-const BTN_BASE =
-  'zg-press inline-flex items-center justify-center gap-1.5 shrink-0 whitespace-nowrap rounded-zg-md cursor-pointer transition-colors disabled:opacity-zg-disabled disabled:cursor-default zg-focus-ring';
-const SIZE_ROW = 'h-7 px-2.5 text-zg-label';
-const SIZE_LG = 'h-8 px-3 text-zg-ui';
-const SIZE_XS = 'h-6 px-2 text-zg-meta';
-const SIZE_CTA = 'h-9 px-4 text-zg-body';
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-const SIZES: Record<ButtonSize, string> = { xs: SIZE_XS, sm: SIZE_ROW, md: SIZE_LG, lg: SIZE_CTA };
-/** Pulls a borderless button out by its own padding, so its text sits on the content edge. */
-const FLUSH: Record<ButtonSize, { start: string; end: string }> = {
-  xs: { start: '-ml-2', end: '-mr-2' },
-  sm: { start: '-ml-2.5', end: '-mr-2.5' },
-  md: { start: '-ml-3', end: '-mr-3' },
-  lg: { start: '-ml-4', end: '-mr-4' },
-};
-
-const SECONDARY = 'zg-raised border text-[var(--zg-text-muted)] hover:text-[var(--zg-text)]';
-const PRIMARY =
-  'font-medium border-0 bg-transparent before:bg-[var(--zg-accent-soft)] text-[var(--zg-accent-hover)] hover:before:bg-[var(--zg-accent-soft-strong)]';
-const SOLID = 'zg-fill font-medium border-0';
-const DANGER = 'border-0 bg-transparent text-zg-danger hover:before:bg-zg-danger/10';
-const DANGER_SOLID = 'zg-fill zg-fill-danger font-medium border-0';
-const GHOST =
-  'border-0 bg-transparent text-[var(--zg-text-muted)] hover:before:bg-[var(--zg-row-hover)] hover:text-[var(--zg-text)]';
-
-/**
- * Look of a button: `secondary` (raised chip), `primary` (soft accent wash), `solid` (accent fill
- * for the committing action of a dialog), `ghost` (text only), `danger` (muted red) and
- * `danger-solid` (danger fill for the destructive commit).
- */
-export type ButtonVariant = 'secondary' | 'primary' | 'solid' | 'ghost' | 'danger' | 'danger-solid';
-const VARIANTS: Record<ButtonVariant, string> = {
-  secondary: SECONDARY,
-  primary: PRIMARY,
-  solid: SOLID,
-  ghost: GHOST,
-  danger: DANGER,
-  'danger-solid': DANGER_SOLID,
-};
-
-/**
- * The button look as a class string, for `<button>`, `<a>` or a router link alike.
- *
- * @param options - The variant, size and flush alignment of the button. Defaults to a `secondary`,
- * `md` button.
- * @returns The class string for the button look.
- */
-export function buttonClass({
-  variant = 'secondary',
-  size = 'md',
-  flush,
-}: {
-  /**
-   * Button look.
-   * @default 'secondary'
-   */
-  variant?: ButtonVariant;
-  /**
-   * Button size: `xs` is 24px high, `sm` 28px, `md` 32px and `lg` 36px.
-   * @default 'md'
-   */
-  size?: ButtonSize;
-  /** Ghost / danger only (no fill to align): line the text up with the edge it leads or ends. */
-  flush?: 'start' | 'end';
-} = {}): string {
-  return `${BTN_BASE} ${SIZES[size]} ${VARIANTS[variant]} ${flush ? FLUSH[size][flush] : ''}`;
-}
-
-/** In-row secondary action (Edit / Update / Sign out / Keep / Cancel …). */
-export const BTN_SECONDARY = `${BTN_BASE} ${SIZE_ROW} ${SECONDARY}`;
-
-/** In-row primary action (Sign in / Retry / Import …): soft accent, not a slab. */
-export const BTN_PRIMARY = `${BTN_BASE} ${SIZE_ROW} ${PRIMARY}`;
-
-/** In-row destructive action (Remove / Delete / Clear): quiet until hovered. */
-export const BTN_DANGER = `${BTN_BASE} ${SIZE_ROW} ${DANGER}`;
-
-/** Armed destructive confirm (Confirm remove / Confirm delete): the danger fill. */
-export const BTN_DANGER_CONFIRM = `${BTN_BASE} ${SIZE_ROW} ${DANGER_SOLID}`;
-
-/** Secondary header / footer action (Refresh / Cancel …): the accent button stays rightmost. */
-export const BTN_LG_SECONDARY = `${BTN_BASE} ${SIZE_LG} ${SECONDARY}`;
-
-/** Primary header action or form submit, soft accent. */
-export const BTN_LG_PRIMARY = `${BTN_BASE} ${SIZE_LG} ${PRIMARY}`;
-
-/** The committing action of a dialog footer: accent fill. */
-export const BTN_LG_SOLID = `${BTN_BASE} ${SIZE_LG} ${SOLID}`;
-
-/** Destructive dialog footer action (Delete session, Deny): the danger fill. */
-export const BTN_LG_DANGER = `${BTN_BASE} ${SIZE_LG} ${DANGER_SOLID}`;

package/src/components/floating/FloatingSurface.tsx

@@ -1,158 +0,0 @@
-/**
- * The one floating surface: overlay tone, float shadow, one radius, enter /
- * exit motion. Portaled to `document.body` and fixed-positioned against its
- * anchor (`useAnchoredPosition`), so no ancestor's overflow can clip it.
- *
- * Motion (motion.dev, the `menu` tween): grows out of its anchor, scale
- * 0.96 → 1 from the placement's `transform-origin` plus a 4px slide from
- * the anchor's side (any of the four), opacity landing first; leaves on
- * `menu-exit` (fade, scale to 0.98, no slide), unmounting when that
- * finishes (`AnimatePresence`). Reduced: an 80ms fade, no movement. Off: instant.
- * `data-state` (open / closed) stays for styling and tests.
- *
- * Presses inside are stopped from bubbling through the React tree: the
- * composer routes stray clicks to its editor, and a menu row press must not
- * reach it.
- */
-import { AnimatePresence, domAnimation, LazyMotion, m } from 'motion/react';
-import { forwardRef, useCallback, useRef, type CSSProperties, type ReactNode, useSyncExternalStore } from 'react';
-import { createPortal } from 'react-dom';
-
-import { menuTransition, useMotionPrefs } from '../../motion/springs';
-import { anchorNudge, useAnchoredPosition, type Align, type Anchor, type Side } from './useAnchoredPosition';
-
-/** Props of {@link FloatingSurface}. */
-export interface FloatingSurfaceProps {
-  /** Whether the surface is shown. It stays mounted until its exit finishes. */
-  open: boolean;
-  /** The element or point the surface is placed against. */
-  anchor: Anchor;
-  /**
-   * Preferred side of the anchor. It flips when it does not fit.
-   * @default 'bottom'
-   */
-  side?: Side;
-  /**
-   * How the surface lines up along the anchor's edge.
-   * @default 'start'
-   */
-  align?: Align;
-  /**
-   * Gap between anchor and surface, in px.
-   * @default 6
-   */
-  offset?: number;
-  /** Fixed width in px; otherwise sized by content. */
-  width?: number;
-  /** Extra classes on the surface. */
-  className?: string;
-  /** Inline styles, merged over the computed position. */
-  style?: CSSProperties;
-  /** For a trigger's `aria-controls`. */
-  id?: string;
-  /** ARIA role of the surface, such as `menu` or `dialog`. */
-  role?: string;
-  /** Accessible name of the surface. */
-  'aria-label'?: string;
-  /** Test id for the surface element. */
-  'data-testid'?: string;
-  /** A hover card stays open while the pointer is on it. */
-  onPointerEnter?: () => void;
-  /** Called when the pointer leaves the surface. A hover card closes on it. */
-  onPointerLeave?: () => void;
-  /** A hover card closes when focus leaves it. */
-  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
-  /** Menu navigation when the surface itself is the menu. */
-  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-  /** The surface's content. */
-  children: ReactNode;
-}
-
-const noop = () => () => {};
-const isClient = () => true;
-const isServer = () => false;
-
-/**
- * Renders the one floating surface: overlay tone, float shadow and one radius, portaled to
- * `document.body` and fixed-positioned against its anchor so no ancestor's overflow clips it.
- * It grows out of its anchor on enter and fades out on exit. Presses inside do not bubble
- * through the React tree. The ref goes to the surface element.
- */
-export const FloatingSurface = forwardRef<HTMLDivElement, FloatingSurfaceProps>(
-  function FloatingSurface(props, forwardedRef) {
-    // No document on the server: the portal mounts after hydration.
-    const client = useSyncExternalStore(noop, isClient, isServer);
-    if (!client) return null;
-    return createPortal(
-      // `m` with the DOM animation features only (see Overlay).
-      <LazyMotion features={domAnimation}>
-        <AnimatePresence>
-          {props.open && <Surface key="surface" {...props} forwardedRef={forwardedRef} />}
-        </AnimatePresence>
-      </LazyMotion>,
-      document.body,
-    );
-  },
-);
-
-function Surface({
-  anchor,
-  side = 'bottom',
-  align = 'start',
-  offset,
-  width,
-  className = '',
-  style,
-  children,
-  open: _open,
-  forwardedRef,
-  ...rest
-}: FloatingSurfaceProps & { forwardedRef: React.ForwardedRef<HTMLDivElement> }) {
-  const localRef = useRef<HTMLDivElement | null>(null);
-  const placement = useAnchoredPosition(true, anchor, localRef, { side, align, offset });
-  const prefs = useMotionPrefs();
-  const placedSide = placement?.side ?? side;
-  // Below full motion only the opacity plays: no scale, no slide.
-  const moves = prefs.level === 'full';
-  const hidden = moves ? { opacity: 0, scale: 0.96, ...anchorNudge(placedSide, 4) } : { opacity: 0 };
-  const leave = moves ? { opacity: 0, scale: 0.98 } : { opacity: 0 };
-
-  // Stable as long as the caller's ref is (an object, or a memoised callback): an inline
-  // callback would change every render, and React would detach and reattach it each time.
-  const setRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      localRef.current = node;
-      if (typeof forwardedRef === 'function') forwardedRef(node);
-      else if (forwardedRef) forwardedRef.current = node;
-    },
-    [forwardedRef],
-  );
-
-  // Hold the enter until the first placement exists, so it grows from the anchor, not the corner.
-  // The placement is measured in a layout effect after the ref attaches, so it lands before paint.
-  const placed = placement !== null;
-
-  return (
-    <m.div
-      ref={setRef}
-      {...rest}
-      data-state={placed ? 'open' : 'closed'}
-      data-side={placedSide}
-      className={`zg-float fixed z-zg-float ${className}`}
-      initial={hidden}
-      animate={placed ? { opacity: 1, scale: 1, x: 0, y: 0, transition: menuTransition(prefs) } : hidden}
-      exit={{ ...leave, pointerEvents: 'none', transition: menuTransition(prefs, true) }}
-      style={{
-        top: placement?.top ?? -9999,
-        left: placement?.left ?? -9999,
-        width,
-        transformOrigin: placement?.origin,
-        ...style,
-      }}
-      onMouseDown={(e) => e.stopPropagation()}
-      onClick={(e) => e.stopPropagation()}
-    >
-      {children}
-    </m.div>
-  );
-}

package/src/components/floating/HoverCard.tsx

@@ -1,143 +0,0 @@
-/**
- * A card that opens while its trigger is hovered: after a short intent delay
- * (sweeping the pointer across a list opens nothing), and it stays open while
- * the pointer moves onto it, so what it lists can be clicked. Leaving both
- * closes it after a beat; Escape closes it at once (and stops there, so App's
- * global Esc does not also fire). Keyboard focus on the trigger opens it the
- * same way, and it stays while focus moves into the card.
- */
-import { useCallback, useEffect, useRef, useState, type FocusEvent, type ReactNode } from 'react';
-
-import { FloatingSurface } from './FloatingSurface';
-import type { Align, Side } from './useAnchoredPosition';
-
-const OPEN_MS = 250;
-const CLOSE_MS = 150;
-
-/** Props {@link HoverCard} passes to its `trigger` function, to spread onto the trigger element. */
-export interface HoverCardTriggerProps {
-  /** Ref callback that registers the trigger as the card's anchor. */
-  ref: (node: HTMLElement | null) => void;
-  /** Starts the open delay when the pointer enters the trigger. */
-  onPointerEnter: () => void;
-  /** Starts the close delay when the pointer leaves the trigger. */
-  onPointerLeave: () => void;
-  /** Optional in the type so callers that build these props themselves still compile. */
-  onFocus?: () => void;
-  /** Starts the close delay when focus leaves the trigger, unless it moves into the card. */
-  onBlur?: (event: FocusEvent<HTMLElement>) => void;
-}
-
-/** Props for {@link HoverCard}. */
-export interface HoverCardProps {
-  /**
-   * Renders the trigger. Spread the received props onto the element; `open` is whether the card is
-   * shown.
-   */
-  trigger: (props: HoverCardTriggerProps, open: boolean) => ReactNode;
-  /** The card's content. */
-  children: ReactNode;
-  /**
-   * Preferred side of the trigger. It flips when it does not fit.
-   * @default 'right'
-   */
-  side?: Side;
-  /**
-   * How the card lines up along the trigger's edge.
-   * @default 'start'
-   */
-  align?: Align;
-  /** Fixed width of the card in px. Sized by its content when omitted. */
-  width?: number;
-  /** Accessible name of the card, which has the `dialog` role. */
-  ariaLabel: string;
-  /** Test id for the card element. */
-  testId?: string;
-  /**
-   * Position against another element than the trigger (a sidebar badge's
-   * card against its whole row, so it opens beside the list instead of over
-   * the rows below). `null`: the trigger.
-   */
-  anchorTo?: (trigger: HTMLElement) => HTMLElement | null;
-}
-
-/**
- * Renders a trigger and a card that opens while the trigger is hovered or focused. The card
- * opens after 250 ms, so sweeping the pointer across a list opens nothing, and stays open
- * while the pointer or focus is on it. It closes 150 ms after both leave, and Esc closes it
- * at once.
- *
- * @param props - Component props.
- */
-export function HoverCard({
-  trigger,
-  children,
-  side = 'right',
-  align = 'start',
-  width,
-  ariaLabel,
-  testId,
-  anchorTo,
-}: HoverCardProps) {
-  const [open, setOpen] = useState(false);
-  const anchor = useRef<HTMLElement | null>(null);
-  const surface = useRef<HTMLDivElement | null>(null);
-  const timer = useRef<number | undefined>(undefined);
-  const schedule = useCallback((next: boolean) => {
-    window.clearTimeout(timer.current);
-    timer.current = window.setTimeout(() => setOpen(next), next ? OPEN_MS : CLOSE_MS);
-  }, []);
-  const stay = useCallback(() => window.clearTimeout(timer.current), []);
-  useEffect(() => () => window.clearTimeout(timer.current), []);
-  useEffect(() => {
-    if (!open) return undefined;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key !== 'Escape') return;
-      e.preventDefault();
-      e.stopPropagation();
-      window.clearTimeout(timer.current);
-      setOpen(false);
-    };
-    window.addEventListener('keydown', onKey, true);
-    return () => window.removeEventListener('keydown', onKey, true);
-  }, [open]);
-
-  return (
-    <>
-      {trigger(
-        {
-          ref: (node) => {
-            anchor.current = node;
-          },
-          onPointerEnter: () => schedule(true),
-          onPointerLeave: () => schedule(false),
-          onFocus: () => schedule(true),
-          onBlur: (e) => {
-            if (!surface.current?.contains(e.relatedTarget as Node | null)) schedule(false);
-          },
-        },
-        open,
-      )}
-      <FloatingSurface
-        ref={surface}
-        open={open}
-        anchor={{ element: anchor.current && anchorTo ? (anchorTo(anchor.current) ?? anchor.current) : anchor.current }}
-        side={side}
-        align={align}
-        width={width}
-        role="dialog"
-        aria-label={ariaLabel}
-        data-testid={testId}
-        className="overflow-hidden"
-        onPointerEnter={stay}
-        onPointerLeave={() => schedule(false)}
-        onBlur={(e) => {
-          const to = e.relatedTarget as Node | null;
-          if (!e.currentTarget.contains(to) && !anchor.current?.contains(to)) schedule(false);
-        }}
-      >
-        {children}
-      </FloatingSurface>
-    </>
-  );
-}

package/src/components/floating/Popover.tsx

@@ -1,166 +0,0 @@
-/**
- * A trigger that opens a floating surface. The trigger is rendered by the
- * caller (it gets the props to spread: ref, aria-haspopup / -expanded /
- * -controls, onClick), so any control (a segment item, an icon button, a
- * pill) can open one.
- *
- * A surface that is (or holds) a menu or listbox takes focus on open: the
- * current choice, else the first row, unless its content already focused
- * something (a search field). The arrows then move between rows; Esc and a
- * pick hand focus back to the trigger (`usePopover`).
- */
-import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
-
-import { focusMenuRow, handleMenuKeyDown } from '../Menu';
-import { FloatingSurface } from './FloatingSurface';
-import type { Align, Side } from './useAnchoredPosition';
-import { usePopover } from './usePopover';
-
-/** Props {@link Popover} passes to its `trigger` function, to spread onto the trigger element. */
-export interface PopoverTriggerProps {
-  /** Ref callback that registers the trigger as the surface's anchor. */
-  ref: (node: HTMLElement | null) => void;
-  /** Kind of popup the trigger opens, from the `role` prop. */
-  'aria-haspopup': 'dialog' | 'menu' | 'listbox';
-  /** Whether the surface is open. */
-  'aria-expanded': boolean;
-  /** The surface's id while it is open. */
-  'aria-controls'?: string;
-  /** Toggles the surface. */
-  onClick: () => void;
-}
-
-/** Props for {@link Popover}. */
-export interface PopoverProps {
-  /**
-   * Renders the trigger. Spread the received props onto the element; `open` is whether the surface
-   * is shown.
-   */
-  trigger: (props: PopoverTriggerProps, open: boolean) => ReactNode;
-  /**
-   * Renders the surface content. `close` closes the surface and returns focus to the trigger, for
-   * use after a pick.
-   */
-  children: (close: () => void) => ReactNode;
-  /**
-   * Preferred side of the trigger. It flips when it does not fit.
-   * @default 'top'
-   */
-  side?: Side;
-  /**
-   * How the surface lines up along the trigger's edge.
-   * @default 'start'
-   */
-  align?: Align;
-  /** Fixed width of the surface in px. Sized by its content when omitted. */
-  width?: number;
-  /**
-   * ARIA role of the surface, also reported on the trigger as `aria-haspopup`. A `menu` or
-   * `listbox` takes keyboard navigation between rows.
-   * @default 'dialog'
-   */
-  role?: 'dialog' | 'menu' | 'listbox';
-  /** Accessible name of the surface. */
-  ariaLabel: string;
-  /**
-   * Called when an outside press, Esc or the trigger closes the surface. Not called for a close
-   * from `children`.
-   */
-  onDismiss?: () => void;
-  /** Called when the surface opens or closes, however it does (to load what it shows on each opening). */
-  onOpenChange?: (open: boolean) => void;
-  /** Extra classes on the surface. */
-  className?: string;
-}
-
-/**
- * Renders a trigger that opens a floating surface. The caller draws the trigger from the props
- * it receives, so any control can open one. A surface that is or holds a menu or listbox takes
- * focus on open; Esc and a pick hand focus back to the trigger.
- *
- * @param props - Component props.
- */
-export function Popover({
-  trigger,
-  children,
-  side = 'top',
-  align = 'start',
-  width,
-  role = 'dialog',
-  ariaLabel,
-  onDismiss,
-  onOpenChange,
-  className = '',
-}: PopoverProps) {
-  const popover = usePopover({ onDismiss });
-  const { open, triggerRef, surfaceRef } = popover;
-  const surfaceId = useId();
-  // Stable, so FloatingSurface's forwarded ref (and the trigger's) is not detached and reattached every render.
-  const setTriggerRef = useCallback(
-    (node: HTMLElement | null) => {
-      triggerRef.current = node;
-    },
-    [triggerRef],
-  );
-  const setSurfaceRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      surfaceRef.current = node;
-    },
-    [surfaceRef],
-  );
-
-  useEffect(() => {
-    const surface = surfaceRef.current;
-    if (!open || !surface || surface.contains(document.activeElement)) return;
-    if (role !== 'dialog' || surface.querySelector('[role="menu"], [role="listbox"]')) focusMenuRow(surface);
-  }, [open, role, surfaceRef]);
-
-  const openChange = useRef(onOpenChange);
-  useLayoutEffect(() => {
-    openChange.current = onOpenChange;
-  });
-  const reported = useRef(open);
-  useEffect(() => {
-    if (reported.current === open) return;
-    reported.current = open;
-    openChange.current?.(open);
-  }, [open]);
-
-  // The surface from the first open on (kept for its exit and the next open):
-  // lists carry a popover per row or group, and a closed one cost a portal,
-  // a presence and its content's elements each.
-  const [armed, setArmed] = useState(open);
-  if (open && !armed) setArmed(true);
-
-  const triggerProps: PopoverTriggerProps = {
-    ref: setTriggerRef,
-    'aria-haspopup': role,
-    'aria-expanded': open,
-    'aria-controls': open ? surfaceId : undefined,
-    onClick: popover.toggle,
-  };
-  return (
-    <>
-      {trigger(triggerProps, open)}
-      {armed && (
-        <FloatingSurface
-          ref={setSurfaceRef}
-          id={surfaceId}
-          open={open}
-          anchor={{ element: triggerRef.current }}
-          side={side}
-          align={align}
-          width={width}
-          role={role}
-          aria-label={ariaLabel}
-          className={`overflow-hidden ${className}`}
-          // A surface that is itself the menu (rows in a `Menu role="group"`) navigates here.
-          onKeyDown={role === 'dialog' ? undefined : handleMenuKeyDown}
-        >
-          {/* FloatingSurface keeps this mounted through its exit (motion), then drops it. */}
-          {children(popover.close)}
-        </FloatingSurface>
-      )}
-    </>
-  );
-}