@duro-app/ui 4.2.0 → 4.3.0

package/src/components/Popover/position.ts

@@ -0,0 +1,48 @@
+export interface PopoverRect {
+  top: number
+  left: number
+  width: number
+  height: number
+}
+
+export interface PopoverSize {
+  width: number
+  height: number
+}
+
+export type PopoverSide = 'top' | 'bottom'
+export type PopoverAlign = 'start' | 'center' | 'end'
+
+interface Input {
+  anchor: PopoverRect
+  popup: PopoverSize
+  viewport: PopoverSize
+  side: PopoverSide
+  align: PopoverAlign
+  offset: number
+}
+
+// Pure placement: puts the popup on the requested side of the anchor, flips to
+// the opposite side when it would overflow the viewport there (and the other
+// side fits), and clamps horizontally into the viewport.
+export function computePopoverPosition({anchor, popup, viewport, side, align, offset}: Input) {
+  const below = anchor.top + anchor.height + offset
+  const above = anchor.top - offset - popup.height
+  const fitsBelow = below + popup.height <= viewport.height
+  const fitsAbove = above >= 0
+
+  let resolved: PopoverSide = side
+  if (side === 'bottom' && !fitsBelow && fitsAbove) resolved = 'top'
+  else if (side === 'top' && !fitsAbove && fitsBelow) resolved = 'bottom'
+
+  const top = resolved === 'bottom' ? below : above
+
+  let left = anchor.left
+  if (align === 'center') left = anchor.left + (anchor.width - popup.width) / 2
+  else if (align === 'end') left = anchor.left + anchor.width - popup.width
+
+  const maxLeft = Math.max(0, viewport.width - popup.width)
+  left = Math.min(Math.max(0, left), maxLeft)
+
+  return {top, left, side: resolved}
+}

package/src/components/Popover/styles.css.ts

@@ -0,0 +1,75 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {duration} from '@duro-app/tokens/tokens/motion.css'
+
+export const styles = css.create({
+  trigger: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: radii.sm,
+    cursor: 'pointer',
+    transitionProperty: 'background-color, border-color',
+    transitionDuration: duration.fast,
+  },
+  popup: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    boxSizing: 'border-box',
+    backgroundColor: colors.bgCard,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: radii.sm,
+    boxShadow: shadows.md,
+    padding: spacing.md,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
+    zIndex: 50,
+    // The portal layer is pointer-events: none so clicks fall through it;
+    // the popup takes them back.
+    pointerEvents: 'auto',
+  },
+  close: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    borderWidth: 0,
+    borderRadius: radii.sm,
+    cursor: 'pointer',
+  },
+  // Dynamic position — applied at runtime from the measured anchor.
+  popupPosition: (top: number, left: number) => ({
+    top,
+    left,
+  }),
+})

package/src/components/Tooltip/Tooltip.meta.ts

@@ -9,7 +9,7 @@ export const meta: ComponentMeta = {
   ],
   whenNotToUse: [
     'Critical information that must always be visible — use Text or Callout',
-    'Interactive content (links, buttons) — tooltips are not interactive',
+    'Interactive content (links, buttons) — tooltips are not interactive — use Popover',
   ],
   anatomy: {
     required: ['Root', 'Trigger'],

package/src/index.ts

@@ -90,6 +90,8 @@ export {Text, type TextVariant, type TextColor} from './components/Text/Text'
 export {Toggle, type ToggleSize} from './components/Toggle/Toggle'
 export {ToggleGroup} from './components/ToggleGroup/ToggleGroup'
 export {Tooltip} from './components/Tooltip/Tooltip'
+export {Popover} from './components/Popover/Popover'
+export type {PopoverHandle} from './components/Popover/Popover'
 export {Switch} from './components/Switch/Switch'
 
 // Layout primitives