@duro-app/ui 5.11.0 → 5.12.0

package/src/shared/useOverlayOpenState.ts

@@ -0,0 +1,128 @@
+import {useCallback, useEffect, useRef, useState} from 'react'
+import {DURATION_MS, type DurationToken} from '@duro-app/tokens/keys'
+
+/**
+ * When the owner hears that the overlay closed.
+ * - `after-exit`: once the exit animation has played (Dialog, Drawer): the
+ *   overlay stays logically open while it animates out.
+ * - `at-once`: as soon as the close is asked for (DetailPanel); the panel
+ *   still animates out while `present`.
+ */
+export type CloseNotice = 'after-exit' | 'at-once'
+
+interface Options {
+  /** Controlled open state. */
+  open: boolean | undefined
+  /** Initial open state when uncontrolled. */
+  defaultOpen: boolean
+  onOpenChange: ((open: boolean) => void) | undefined
+  /** Motion token the exit animation lasts. */
+  exitDuration: DurationToken
+  closeNotice: CloseNotice
+}
+
+export interface OverlayOpenState {
+  /** Logically open (what `open` / the uncontrolled state says). */
+  open: boolean
+  /** Rendered: open, or animating out. */
+  present: boolean
+  /** Playing the exit animation. */
+  closing: boolean
+  requestOpen: () => void
+  /** Animated close. Does nothing while a close is already playing. */
+  requestClose: () => void
+  /** Close without the exit animation (a swipe that already moved the panel out). */
+  closeNow: () => void
+}
+
+/**
+ * Open, presence and exit-animation state shared by Dialog, Drawer and
+ * DetailPanel on both platforms. A controlled `open` that turns false from
+ * outside plays the exit animation too.
+ */
+export function useOverlayOpenState({
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  exitDuration,
+  closeNotice,
+}: Options): OverlayOpenState {
+  const isControlled = controlledOpen !== undefined
+  const [internalOpen, setInternalOpen] = useState(defaultOpen)
+  const open = isControlled ? controlledOpen : internalOpen
+  const [present, setPresent] = useState(open)
+  const [closing, setClosing] = useState(false)
+  const closingRef = useRef(false)
+  // The playing exit was started by the owner's `open` turning false (not by
+  // requestClose), so an `open` turning true again cancels it.
+  const outsideExitRef = useRef(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const cancelExit = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+    timerRef.current = null
+    closingRef.current = false
+    outsideExitRef.current = false
+    setClosing(false)
+  }, [])
+
+  const playExit = useCallback(
+    (afterExit?: () => void) => {
+      closingRef.current = true
+      outsideExitRef.current = afterExit === undefined
+      setClosing(true)
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null
+        closingRef.current = false
+        outsideExitRef.current = false
+        setClosing(false)
+        setPresent(false)
+        afterExit?.()
+      }, DURATION_MS[exitDuration])
+    },
+    [exitDuration],
+  )
+
+  const notifyClosed = useCallback(() => {
+    if (!isControlled) setInternalOpen(false)
+    onOpenChange?.(false)
+  }, [isControlled, onOpenChange])
+
+  const requestOpen = useCallback(() => {
+    cancelExit()
+    setPresent(true)
+    if (!isControlled) setInternalOpen(true)
+    onOpenChange?.(true)
+  }, [cancelExit, isControlled, onOpenChange])
+
+  const requestClose = useCallback(() => {
+    if (closingRef.current) return
+    if (closeNotice === 'after-exit') playExit(notifyClosed)
+    else notifyClosed()
+  }, [closeNotice, playExit, notifyClosed])
+
+  const closeNow = useCallback(() => {
+    cancelExit()
+    setPresent(false)
+    notifyClosed()
+  }, [cancelExit, notifyClosed])
+
+  // Presence follows the logical state: an open from outside shows the
+  // overlay, a close from outside (or an `at-once` close) animates it out.
+  useEffect(() => {
+    if (open && outsideExitRef.current) cancelExit()
+    else if (open && !present && !closingRef.current) setPresent(true)
+    else if (!open && present && !closingRef.current) playExit()
+  }, [open, present, playExit, cancelExit])
+
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    },
+    [],
+  )
+
+  // An open is rendered in the same commit (a consumer's effect on `open` can
+  // already reach the overlay's content); the state catches up in the effect.
+  return {open, present: open || present, closing, requestOpen, requestClose, closeNow}
+}

package/dist/components/ThemeProvider/ThemeProvider.native.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-export type ThemeName = 'dark' | 'light' | 'high-contrast';
-interface ThemeProviderProps {
-    theme?: ThemeName;
-    children: ReactNode;
-}
-export declare function usePortalMount(): HTMLElement | null;
-export declare function ThemeProvider({ theme, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ThemeProvider.native.d.ts.map

package/dist/components/ThemeProvider/ThemeProvider.native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeProvider.native.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeProvider/ThemeProvider.native.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAgB,KAAK,SAAS,EAAa,MAAM,OAAO,CAAA;AAM/D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,eAAe,CAAA;AAE1D,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAwBD,wBAAgB,cAAc,IAAI,WAAW,GAAG,IAAI,CAEnD;AAED,wBAAgB,aAAa,CAAC,EAAC,KAAc,EAAE,QAAQ,EAAC,EAAE,kBAAkB,2CAI3E"}

package/dist/index.native.d.ts

@@ -1,33 +0,0 @@
-/**
- * Native (React Native / Expo) entry — resolved via the `react-native` export
- * condition (see package.json). Metro reads THIS instead of the web `index.ts`.
- *
- * Why a separate barrel: the web `index.ts` re-exports interactive/overlay
- * components (Dialog, Drawer, Menu, Tabs, Select, Combobox, Form, ScrollArea,
- * TagGroup, ThemeProvider's portal) that use web-only DOM APIs — and Combobox
- * imports `react-dom`, so pulling the full barrel crashes on Metro. This barrel
- * re-exports ONLY the components whose source is RN-safe (pure react-strict-dom
- * `html` + `css`, audited 2026-06-02). The rest get RN variants in a later pass.
- *
- * Tokens resolve fine on native already: @duro-app/tokens's subpath exports
- * (`./tokens/*.css`, `./themes/*.css`) point straight at their `.css.ts`
- * source, so Metro/StyleX-native compile them directly.
- */
-export { Badge, type BadgeVariant, type BadgeSize } from './components/Badge/Badge';
-export { Button, type ButtonVariant, type ButtonSize } from './components/Button/Button';
-export { Card, type CardVariant, type CardSize } from './components/Card/Card';
-export { Checkbox } from './components/Checkbox/Checkbox';
-export { Heading, type HeadingVariant } from './components/Heading/Heading';
-export { Input, type InputVariant } from './components/Input/Input';
-export { Switch } from './components/Switch/Switch';
-export { Text, type TextVariant, type TextColor } from './components/Text/Text';
-export { Textarea, type TextareaVariant } from './components/Textarea/Textarea';
-export { Field } from './components/Field/Field';
-export { InputGroup } from './components/InputGroup/InputGroup';
-export { Stack, type SpacingKey } from './components/Stack/Stack';
-export { Inline } from './components/Inline/Inline';
-export { Cluster } from './components/Cluster/Cluster';
-export { Grid } from './components/Grid/Grid';
-export type { GridTrack } from './shared/length';
-export { ThemeProvider, usePortalMount, type ThemeName, } from './components/ThemeProvider/ThemeProvider';
-//# sourceMappingURL=index.native.d.ts.map

package/dist/index.native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../src/index.native.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAC,MAAM,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAC,MAAM,4BAA4B,CAAA;AACtF,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAC,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EAAC,QAAQ,EAAC,MAAM,gCAAgC,CAAA;AACvD,OAAO,EAAC,OAAO,EAAE,KAAK,cAAc,EAAC,MAAM,8BAA8B,CAAA;AACzE,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAC7E,OAAO,EAAC,QAAQ,EAAE,KAAK,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAG7E,OAAO,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAA;AAC9C,OAAO,EAAC,UAAU,EAAC,MAAM,oCAAoC,CAAA;AAG7D,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,8BAA8B,CAAA;AACpD,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAC3C,YAAY,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAA;AAI9C,OAAO,EACL,aAAa,EACb,cAAc,EACd,KAAK,SAAS,GACf,MAAM,0CAA0C,CAAA"}

package/dist/platform.native.d.ts

@@ -1,2 +0,0 @@
-export declare const isNative: boolean;
-//# sourceMappingURL=platform.native.d.ts.map

package/dist/platform.native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"platform.native.d.ts","sourceRoot":"","sources":["../src/platform.native.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,EAAE,OAAc,CAAA"}