npm - @rozie-ui/popover-react - Versions diffs - 0.1.0 - Mend

@rozie-ui/popover-react 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/LICENSE +21 -0
package/README.md +92 -0
package/dist/Popover.css +28 -0
package/dist/index.cjs +307 -0
package/dist/index.d.cts +66 -0
package/dist/index.d.mts +66 -0
package/dist/index.mjs +302 -0
package/package.json +82 -0
package/rozie-manifest.json +112 -0
package/src/Popover.css +28 -0
package/src/Popover.d.ts +62 -0
package/src/Popover.tsx +349 -0
package/src/index.ts +5 -0
package/src/internal/middleware.ts +54 -0
package/src/themes/base.css +24 -0
package/src/themes/bootstrap.css +19 -0
package/src/themes/material.css +19 -0
package/src/themes/shadcn.css +23 -0

package/src/Popover.tsx ADDED Viewed

@@ -0,0 +1,349 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import type { ReactNode } from 'react';
+import { clsx, rozieAttr, useControllableState, useOutsideClick } from '@rozie/runtime-react';
+import './Popover.css';
+// The `offset` AND `arrow` middleware factories are ALIASED on import: both are
+// ALSO author PROP names (`offset`, `arrow`). A bare `offset`/`arrow` shorthand in
+// the buildMiddleware factories object resolves to the PROP — on Vue/Svelte the
+// destructured prop local shadows the import, and on Angular the emitter rewrites
+// the bare shorthand to the prop signal (`offset: this.offset()`, a number) instead
+// of the middleware function (TS2322). Aliasing both severs the import↔prop clash.
+// (The Cropper import-name==component-name class, applied to imports vs PROP names —
+// two collisions, not one.) computePosition/autoUpdate/flip/shift carry no clash.
+import { computePosition, autoUpdate, offset as offsetMiddleware, flip, shift, arrow as arrowMiddleware } from '@floating-ui/dom';
+import { buildMiddleware } from './internal/middleware';
+// null-lets so the bundled-leaf typeNeutralize pass annotates them `any`:
+//   anchorNode/floatingNode/arrowNode hold the resolved ref ELEMENTS (read ONLY in
+//   $onMount/handlers, ROZ123). They are deliberately named DIFFERENTLY from the
+//   `ref="anchorEl"` / `ref="floatingEl"` / `ref="arrowEl"` template ref names: the
+//   React/Svelte emitters declare a `const anchorEl = useRef(...)` for the ref, and a
+//   top-level `let anchorEl` hoisted to its own `useRef` would REDECLARE it (TS2451 —
+//   the local-name==ref-name self-shadow class, here in its `let X = null; X = $refs.X`
+//   variant, which deconflictRefShadows does NOT auto-rewrite since it only fires on the
+//   `const X = $refs.X` init shape).
+//   stopAutoUpdate is the autoUpdate teardown handle — a TOP-LEVEL `let` so the Solid
+//   onMount→onCleanup split (teardown is a separate closure) can still see it.
+//   lastFocusedEl (phase 72-06b) holds whatever had DOM focus at the moment a
+//   `trigger="click"` popover opened (natively the clicked trigger element itself,
+//   since a mousedown focuses a native `<button>` before its `click` fires) —
+//   restored on dismissal so Escape/click-outside don't drop focus to `<body>`.
+//   Same null-let convention as the others: read/written only in handlers, `any`
+//   via typeNeutralize.
+interface AnchorCtx { open: any; toggle: any; show: any; hide: any; }
+interface PopoverProps {
+  /**
+   * Whether the floating content is open. The sole `model: true` prop — two-way bind it (`r-model:open` / `v-model:open` / `bind:open` / `[(open)]`) and Popover writes the new state back whenever the trigger or a dismissal toggles it. Left unbound it falls back to an uncontrolled default.
+   */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Floating UI placement of the content relative to the anchor — one of `top`/`right`/`bottom`/`left`, each optionally suffixed `-start`/`-end` (e.g. `bottom-start`). With `disableFlip` off, the content may flip to the opposite side when it would overflow the viewport. Reconciled at runtime.
+   */
+  placement?: string;
+  /**
+   * How the anchor opens the content: `'click'` toggles on click, `'hover'` opens on pointer-enter and closes on pointer-leave (tooltip-style), `'focus'` opens on focus and closes on blur. Drives both the gesture handlers and the ARIA role (`'hover'`/`'focus'` → tooltip, `'click'` → popover dialog).
+   */
+  trigger?: string;
+  /**
+   * Distance in pixels between the anchor and the floating content (the Floating UI `offset` middleware). Reconciled at runtime.
+   */
+  offset?: number;
+  /**
+   * Disable the Floating UI `flip` middleware. By default the content flips to the opposite side of the anchor when it would overflow the viewport; set this to keep it pinned to `placement` regardless.
+   */
+  disableFlip?: boolean;
+  /**
+   * Disable the Floating UI `shift` middleware. By default the content shifts along its axis to stay within the viewport; set this to keep it strictly aligned to the anchor.
+   */
+  disableShift?: boolean;
+  /**
+   * Opt in to a positioned arrow element. When set, Popover renders an arrow `<div>` and runs the Floating UI `arrow` middleware against it so it points at the anchor. Style it via the `--rozie-popover-*` arrow CSS custom properties.
+   */
+  arrow?: boolean;
+  /**
+   * Disable the control entirely: the trigger no longer opens the content and any open content is suppressed.
+   */
+  disabled?: boolean;
+  /**
+   * Opt in to modal dialog semantics for a `click` popover. **Off by default:** a click popover is a non-modal, click-outside-dismissable layer, so its panel is rendered role-neutral (the slot content owns its own ARIA role — e.g. a `role="menu"`) and carries NO `aria-modal`. Set `modal` for a genuinely modal dialog popover: the panel then gets `role="dialog"` + `aria-modal="true"`. **Note:** Popover ships no focus trap (it stays a minimal headless primitive); if you set `modal`, provide your own focus containment so the `aria-modal` claim holds. Ignored for `hover`/`focus` triggers (always tooltip-flavored).
+   */
+  modal?: boolean;
+  /**
+   * Floating UI positioning strategy — 'absolute' (default) or 'fixed'. Use 'fixed' to escape a scrollable/overflow-clipping ancestor (e.g. a sticky table header). Reconciled at runtime.
+   */
+  strategy?: string;
+  onChange?: (...args: any[]) => void;
+  renderAnchor?: (ctx: AnchorCtx) => ReactNode;
+  children?: ReactNode;
+  slots?: Record<string, () => import('react').ReactNode>;
+}
+export interface PopoverHandle {
+  show: (...args: any[]) => any;
+  hide: (...args: any[]) => any;
+  toggle: (...args: any[]) => any;
+  reposition: (...args: any[]) => any;
+}
+const Popover = forwardRef<PopoverHandle, PopoverProps>(function Popover(_props: PopoverProps, ref): JSX.Element {
+  const props: Omit<PopoverProps, 'placement' | 'trigger' | 'offset' | 'disableFlip' | 'disableShift' | 'arrow' | 'disabled' | 'modal' | 'strategy'> & { placement: string; trigger: string; offset: number; disableFlip: boolean; disableShift: boolean; arrow: boolean; disabled: boolean; modal: boolean; strategy: string } = {
+    ..._props,
+    placement: _props.placement ?? 'bottom',
+    trigger: _props.trigger ?? 'click',
+    offset: _props.offset ?? 8,
+    disableFlip: _props.disableFlip ?? false,
+    disableShift: _props.disableShift ?? false,
+    arrow: _props.arrow ?? false,
+    disabled: _props.disabled ?? false,
+    modal: _props.modal ?? false,
+    strategy: _props.strategy ?? 'absolute',
+  };
+  const attrs: Record<string, unknown> = (() => {
+    const { open, placement, trigger, offset, disableFlip, disableShift, arrow, disabled, modal, strategy, defaultValue, onOpenChange, defaultOpen, ...rest } = _props as PopoverProps & Record<string, unknown>;
+    void open; void placement; void trigger; void offset; void disableFlip; void disableShift; void arrow; void disabled; void modal; void strategy; void defaultValue; void onOpenChange; void defaultOpen;
+    return rest;
+  })();
+  const anchorNode = useRef<any>(null);
+  const floatingNode = useRef<any>(null);
+  const arrowNode = useRef<any>(null);
+  const stopAutoUpdate = useRef<any>(null);
+  const lastFocusedEl = useRef<any>(null);
+  const [open, setOpen] = useControllableState({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onValueChange: props.onOpenChange,
+  });
+  const _openRef = useRef(open);
+  _openRef.current = open;
+  const anchorEl = useRef<HTMLDivElement | null>(null);
+  const floatingEl = useRef<HTMLDivElement | null>(null);
+  const arrowEl = useRef<HTMLDivElement | null>(null);
+  const _watch0First = useRef(true);
+  const _watch1First = useRef(true);
+  const _watch2First = useRef(true);
+  const _watch3First = useRef(true);
+  const _watch4First = useRef(true);
+  const _watch5First = useRef(true);
+  function deepActiveElement() {
+    let el = document.activeElement;
+    while (el && el.shadowRoot && el.shadowRoot.activeElement) {
+      el = el.shadowRoot.activeElement;
+    }
+    return el;
+  }
+  function requestOpen(next: any) {
+    if (open === next) return;
+    if (next && props.trigger === 'click') {
+      lastFocusedEl.current = deepActiveElement();
+    }
+    setOpen(next);
+    props.onChange && props.onChange(next);
+    if (!next && props.trigger === 'click' && lastFocusedEl.current && lastFocusedEl.current.isConnected && typeof lastFocusedEl.current.focus === 'function') {
+      lastFocusedEl.current.focus();
+    }
+    if (!next) {
+      lastFocusedEl.current = null;
+    }
+  }
+  function applyPosition(x: any, y: any, middlewareData: any) {
+    if (!floatingNode.current) return;
+    floatingNode.current.style.left = x + 'px';
+    floatingNode.current.style.top = y + 'px';
+    if (arrowNode.current && middlewareData && middlewareData.arrow) {
+      const ax = middlewareData.arrow.x;
+      const ay = middlewareData.arrow.y;
+      arrowNode.current.style.left = ax == null ? '' : ax + 'px';
+      arrowNode.current.style.top = ay == null ? '' : ay + 'px';
+    }
+  }
+  function position() {
+    if (!anchorNode.current || !floatingNode.current) return;
+    const middleware = buildMiddleware({
+      offset: offsetMiddleware,
+      flip,
+      shift,
+      arrow: arrowMiddleware
+    }, {
+      offset: props.offset,
+      disableFlip: props.disableFlip,
+      disableShift: props.disableShift,
+      arrow: props.arrow,
+      arrowEl: arrowNode.current
+    });
+    // 'fixed' inline position MUST be written before computePosition measures the
+    // floating element's offset parent (fixed vs absolute changes the containing
+    // block). Default 'absolute' explicitly CLEARS any inline position instead of
+    // writing `position: absolute` — so a never-fixed popover still writes no
+    // visible inline position (byte-identical-off preserved: `style.position = ''`
+    // is a no-op when the property was never set), while a live `strategy`
+    // reconcile (fixed → absolute, see the $watch below) correctly resets the
+    // stale inline `fixed` so the stylesheet's `position: absolute` rule re-takes
+    // over instead of positioning `fixed` with absolute-computed coordinates
+    // (72-REVIEW.md WR-01).
+    if (props.strategy === 'fixed') {
+      floatingNode.current.style.position = 'fixed';
+    } else {
+      floatingNode.current.style.position = '';
+    }
+    let opts: any = null;
+    opts = {
+      placement: props.placement,
+      strategy: props.strategy,
+      middleware
+    };
+    computePosition(anchorNode.current, floatingNode.current, opts).then((result: any) => {
+      applyPosition(result.x, result.y, result.middlewareData);
+    });
+  }
+  const startTracking = useCallback(() => {
+    if (!anchorNode.current || !floatingNode.current) return;
+    if (stopAutoUpdate.current) {
+      stopAutoUpdate.current();
+      stopAutoUpdate.current = null;
+    }
+    stopAutoUpdate.current = autoUpdate(anchorNode.current, floatingNode.current, position);
+  }, [position]);
+  const stopTracking = useCallback(() => {
+    if (stopAutoUpdate.current) {
+      stopAutoUpdate.current();
+      stopAutoUpdate.current = null;
+    }
+  }, []);
+  const onAnchorClick = useCallback(() => {
+    if (props.disabled) return;
+    requestOpen(!open);
+  }, [open, props.disabled, requestOpen]);
+  const onAnchorPointerEnter = useCallback(() => {
+    if (props.disabled) return;
+    requestOpen(true);
+  }, [props.disabled, requestOpen]);
+  const onAnchorPointerLeave = useCallback(() => {
+    if (props.disabled) return;
+    requestOpen(false);
+  }, [props.disabled, requestOpen]);
+  const onAnchorFocus = useCallback(() => {
+    if (props.disabled) return;
+    requestOpen(true);
+  }, [props.disabled, requestOpen]);
+  const onAnchorBlur = useCallback(() => {
+    if (props.disabled) return;
+    requestOpen(false);
+  }, [props.disabled, requestOpen]);
+  const dismiss = useCallback(() => {
+    requestOpen(false);
+  }, [requestOpen]);
+  function isTooltip() {
+    return props.trigger === 'hover' || props.trigger === 'focus';
+  }
+  function floatingRole() {
+    return isTooltip() ? 'tooltip' : props.modal ? 'dialog' : undefined;
+  }
+  // ─── imperative handle ($expose) ────────────────────────────────────────────────
+  // Verbs: show/hide/toggle/reposition. NOT `update` (reserved Lit lifecycle) → the
+  // reposition verb is `reposition`. None collide with the `change` emit, the `open`
+  // model, or its React `setOpen` setter, nor with inherited HTMLElement members.
+  function show() {
+    if (!props.disabled) requestOpen(true);
+  }
+  function hide() {
+    requestOpen(false);
+  }
+  function toggle() {
+    if (!props.disabled) requestOpen(!open);
+  }
+  function reposition() {
+    position();
+  }
+  useEffect(() => {
+    // $refs read ONLY here (ROZ123). The floating + arrow elements live behind r-if
+    // and may be null until open; startTracking re-reads via the watch path.
+    anchorNode.current = anchorEl.current;
+    if (_openRef.current && !props.disabled) {
+      // floatingNode is populated by its r-if having rendered; read it lazily inside
+      // the watch/handlers too. Position on next tick when it exists.
+      floatingNode.current = floatingEl.current;
+      arrowNode.current = arrowEl.current;
+      startTracking();
+    }
+    return () => {
+      stopTracking();
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (_watch0First.current) { _watch0First.current = false; return; }
+    const isOpen = open;
+    if (isOpen && !props.disabled) {
+      queueMicrotask(() => {
+        if (!open || props.disabled) return;
+        floatingNode.current = floatingEl.current;
+        arrowNode.current = arrowEl.current;
+        startTracking();
+      });
+    } else {
+      stopTracking();
+    }
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (_watch1First.current) { _watch1First.current = false; return; }
+    if (open) position();
+  }, [props.placement]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (_watch2First.current) { _watch2First.current = false; return; }
+    if (open) position();
+  }, [props.offset]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (_watch3First.current) { _watch3First.current = false; return; }
+    if (open) position();
+  }, [props.disableFlip]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (_watch4First.current) { _watch4First.current = false; return; }
+    if (open) position();
+  }, [props.disableShift]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (_watch5First.current) { _watch5First.current = false; return; }
+    if (open) position();
+  }, [props.strategy]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (!(open)) return;
+    const _rozieHandler = ($event: KeyboardEvent) => {
+      if ($event.key !== 'Escape') return;
+      ((dismiss) as ((...args: any[]) => any))($event);
+    };
+    document.addEventListener('keydown', _rozieHandler);
+    return () => document.removeEventListener('keydown', _rozieHandler);
+  }, [dismiss, open]);
+  useOutsideClick(
+    [anchorEl, floatingEl],
+    dismiss,
+    () => !!(open),
+  );
+  const _rozieExposeRef = useRef({ show, hide, toggle, reposition });
+  _rozieExposeRef.current = { show, hide, toggle, reposition };
+  useImperativeHandle(ref, () => ({ show: (...args: Parameters<typeof show>): ReturnType<typeof show> => _rozieExposeRef.current.show(...args), hide: (...args: Parameters<typeof hide>): ReturnType<typeof hide> => _rozieExposeRef.current.hide(...args), toggle: (...args: Parameters<typeof toggle>): ReturnType<typeof toggle> => _rozieExposeRef.current.toggle(...args), reposition: (...args: Parameters<typeof reposition>): ReturnType<typeof reposition> => _rozieExposeRef.current.reposition(...args) }), []);
+  return (
+    <>
+    <div {...attrs} className={clsx("rozie-popover", (attrs.className as string | undefined))} data-rozie-s-c6cf02ea="">
+      <div className={"rozie-popover-anchor"} ref={anchorEl} aria-haspopup="dialog" aria-expanded={!!open} aria-describedby={rozieAttr(isTooltip() && open ? 'rozie-popover-floating' : undefined)} onClick={($event) => { props.trigger === 'click' && onAnchorClick(); }} onPointerEnter={($event) => { props.trigger === 'hover' && onAnchorPointerEnter(); }} onPointerLeave={($event) => { props.trigger === 'hover' && onAnchorPointerLeave(); }} onFocus={($event) => { props.trigger === 'focus' && onAnchorFocus(); }} onBlur={($event) => { props.trigger === 'focus' && onAnchorBlur(); }} data-rozie-s-c6cf02ea="">
+        {(props.renderAnchor ?? props.slots?.['anchor'])?.({ open, toggle, show, hide })}
+      </div>
+      {!!(open && !props.disabled) && <div className={"rozie-popover-floating"} ref={floatingEl} id="rozie-popover-floating" role={rozieAttr(floatingRole())} aria-modal={!!(floatingRole() === 'dialog')} data-rozie-s-c6cf02ea="">
+        {!!(props.arrow) && <div className={"rozie-popover-arrow"} ref={arrowEl} data-rozie-s-c6cf02ea="" />}{(typeof (props.children ?? props.slots?.['']) === 'function' ? ((props.children ?? props.slots?.['']) as Function)() : (props.children ?? props.slots?.['']))}
+      </div>}</div>
+    </>
+  );
+});
+export default Popover;

package/src/index.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export { default as Popover } from './Popover';
+export { default } from './Popover';
+/** The `$expose` imperative handle received via `ref` — { show, hide, toggle, reposition }. */
+export type { PopoverHandle } from './Popover';

package/src/internal/middleware.ts ADDED Viewed

@@ -0,0 +1,54 @@
+/**
+ * middleware.ts — pure construction of the Floating UI middleware stack from the
+ * Popover's first-class props.
+ *
+ * This is the one piece of BRANCHY engine glue in Popover.rozie (offset always on,
+ * flip/shift opt-out via `disableFlip`/`disableShift`, arrow opt-in via `arrow` +
+ * an element). Extracted to `src/internal/` so it can be unit-tested in isolation
+ * (codegen vendors `src/internal/` into every leaf via copyInternal, excluding
+ * `*.test.ts`).
+ *
+ * It takes the Floating UI middleware FACTORIES as arguments (rather than importing
+ * `@floating-ui/dom` itself) so the unit test can pass lightweight stand-ins and
+ * assert ORDER + presence without pulling the real engine — and so the vendored
+ * copy in each leaf has zero engine import of its own (the leaf's Popover.* owns
+ * the single engine import).
+ *
+ * Floating UI ordering contract: offset → flip → shift → arrow. `offset` first so
+ * the gap is measured before collision detection; `arrow` last so it reads the
+ * final resolved placement.
+ */
+export interface MiddlewareFactories {
+  offset: (value: number) => unknown;
+  flip: () => unknown;
+  shift: () => unknown;
+  arrow: (opts: { element: Element }) => unknown;
+}
+export interface MiddlewareConfig {
+  offset: number;
+  disableFlip: boolean;
+  disableShift: boolean;
+  arrow: boolean;
+  arrowEl: Element | null;
+}
+/**
+ * Build the ordered middleware array for `computePosition`. Pure — no engine
+ * import, no DOM read beyond the passed-in arrow element.
+ */
+export function buildMiddleware(
+  factories: MiddlewareFactories,
+  config: MiddlewareConfig,
+): unknown[] {
+  const mw: unknown[] = [factories.offset(config.offset)];
+  if (!config.disableFlip) mw.push(factories.flip());
+  if (!config.disableShift) mw.push(factories.shift());
+  // The arrow middleware needs a real element to position; opt-in only when both
+  // the `arrow` prop is set AND the arrow element has mounted.
+  if (config.arrow && config.arrowEl) {
+    mw.push(factories.arrow({ element: config.arrowEl }));
+  }
+  return mw;
+}

package/src/themes/base.css ADDED Viewed

@@ -0,0 +1,24 @@
+/*
+ * @rozie-ui/popover — base token reference.
+ *
+ * Every visual value the component renders is a `--rozie-popover-*` custom
+ * property. The component ships with inline `var(token, fallback)` defaults, so
+ * importing this file is OPTIONAL — it simply makes the full token surface
+ * explicit in one place so you can copy/override exactly what you need.
+ *
+ * Override any token at any ancestor scope (`:root`, `.dark`, a wrapper, or the
+ * `.rozie-popover` element — custom properties inherit through `display:contents`).
+ * See themes/shadcn.css, themes/material.css and themes/bootstrap.css for
+ * design-system bridges.
+ */
+.rozie-popover {
+  --rozie-popover-z: 1000;
+  --rozie-popover-max-width: calc(100vw - 16px);
+  --rozie-popover-bg: #fff;
+  --rozie-popover-color: inherit;
+  --rozie-popover-border: 1px solid rgba(0, 0, 0, 0.12);
+  --rozie-popover-radius: 8px;
+  --rozie-popover-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --rozie-popover-padding: 8px 12px;
+  --rozie-popover-arrow-size: 8px;
+}

package/src/themes/bootstrap.css ADDED Viewed

@@ -0,0 +1,19 @@
+/*
+ * @rozie-ui/popover — Bootstrap 5 bridge.
+ *
+ * Maps the popover tokens onto Bootstrap's `--bs-*` CSS variables (Bootstrap
+ * 5.2+). Reading them live means the popover follows `data-bs-theme="dark"`
+ * and any custom `$primary` build automatically. Falls back to Bootstrap's
+ * default light palette when the vars are absent.
+ *
+ *   import '@rozie-ui/popover-react/themes/bootstrap.css';
+ *
+ * Colors-only scope — sizing tokens are left unset so the `.rozie-popover`
+ * defaults hold.
+ */
+.rozie-popover {
+  --rozie-popover-bg: var(--bs-body-bg, #fff);
+  --rozie-popover-color: var(--bs-body-color, #212529);
+  --rozie-popover-border: 1px solid var(--bs-border-color, #dee2e6);
+  --rozie-popover-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}

package/src/themes/material.css ADDED Viewed

@@ -0,0 +1,19 @@
+/*
+ * @rozie-ui/popover — Material Design 3 bridge.
+ *
+ * Maps the popover tokens onto the MD3 system color roles (`--md-sys-color-*`)
+ * emitted by material-web / @material/material-color-utilities theme builders.
+ * Falls back to the baseline M3 light palette when those vars are absent, so
+ * it renders correctly even without a generated theme.
+ *
+ *   import '@rozie-ui/popover-react/themes/material.css';
+ *
+ * Colors-only scope — sizing tokens are left unset so the `.rozie-popover`
+ * defaults hold.
+ */
+.rozie-popover {
+  --rozie-popover-bg: var(--md-sys-color-surface-container, #f3edf7);
+  --rozie-popover-color: var(--md-sys-color-on-surface, #1d1b20);
+  --rozie-popover-border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+  --rozie-popover-shadow: 0 2px 6px 2px rgb(0 0 0 / 0.15), 0 1px 2px rgb(0 0 0 / 0.3);
+}

package/src/themes/shadcn.css ADDED Viewed

@@ -0,0 +1,23 @@
+/*
+ * @rozie-ui/popover — shadcn/ui (Radix) bridge.
+ *
+ * Maps the popover tokens onto the shadcn/ui CSS variables defined on `:root`
+ * / `.dark` (the classic HSL-channel convention: `--popover: 0 0% 100%`
+ * consumed as `hsl(var(--popover))`). Because it reads those vars live, the
+ * popover panel automatically follows light/dark theme switches.
+ *
+ *   import '@rozie-ui/popover-react/themes/shadcn.css';
+ *
+ * If your shadcn setup predates the `hsl()`-wrapping convention (Tailwind v4 /
+ * oklch tokens emit pre-formed colors), drop the `hsl(...)` wrappers below.
+ *
+ * Only the color/shadow tokens are remapped here — sizing tokens (z,
+ * max-width, radius, padding, arrow-size) are left unset so the
+ * `.rozie-popover` defaults hold.
+ */
+.rozie-popover {
+  --rozie-popover-bg: hsl(var(--popover, 0 0% 100%));
+  --rozie-popover-color: hsl(var(--popover-foreground, 222.2 47.4% 11.2%));
+  --rozie-popover-border: 1px solid hsl(var(--border, 214.3 31.8% 91.4%));
+  --rozie-popover-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}