npm - @exxatdesignux/ui - Versions diffs - 0.0.5 - Mend

@exxatdesignux/ui 0.0.5

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 (59) hide show

package/package.json +72 -0
package/src/components/ui/avatar.tsx +384 -0
package/src/components/ui/badge.tsx +49 -0
package/src/components/ui/banner.tsx +364 -0
package/src/components/ui/breadcrumb.tsx +120 -0
package/src/components/ui/button.tsx +66 -0
package/src/components/ui/calendar.tsx +220 -0
package/src/components/ui/card.tsx +136 -0
package/src/components/ui/chart.tsx +378 -0
package/src/components/ui/checkbox.tsx +160 -0
package/src/components/ui/coach-mark.tsx +361 -0
package/src/components/ui/collapsible.tsx +33 -0
package/src/components/ui/command.tsx +232 -0
package/src/components/ui/date-picker-field.tsx +186 -0
package/src/components/ui/dialog.tsx +171 -0
package/src/components/ui/drag-handle-grip.tsx +10 -0
package/src/components/ui/drawer.tsx +134 -0
package/src/components/ui/dropdown-menu.tsx +422 -0
package/src/components/ui/field.tsx +238 -0
package/src/components/ui/form.tsx +137 -0
package/src/components/ui/input-group.tsx +156 -0
package/src/components/ui/input-mask.tsx +135 -0
package/src/components/ui/input.tsx +22 -0
package/src/components/ui/kbd.tsx +55 -0
package/src/components/ui/label.tsx +25 -0
package/src/components/ui/payment-card-fields.tsx +65 -0
package/src/components/ui/popover.tsx +46 -0
package/src/components/ui/radio-group.tsx +217 -0
package/src/components/ui/select.tsx +191 -0
package/src/components/ui/selection-tile-grid.tsx +246 -0
package/src/components/ui/separator.tsx +28 -0
package/src/components/ui/sheet.tsx +147 -0
package/src/components/ui/sidebar.tsx +716 -0
package/src/components/ui/skeleton.tsx +13 -0
package/src/components/ui/sonner.tsx +39 -0
package/src/components/ui/status-badge.tsx +109 -0
package/src/components/ui/table.tsx +117 -0
package/src/components/ui/tabs.tsx +90 -0
package/src/components/ui/textarea.tsx +18 -0
package/src/components/ui/tip.tsx +21 -0
package/src/components/ui/toggle-group.tsx +89 -0
package/src/components/ui/toggle-switch.tsx +31 -0
package/src/components/ui/toggle.tsx +48 -0
package/src/components/ui/tooltip.tsx +59 -0
package/src/components/ui/view-segmented-control.tsx +160 -0
package/src/globals.css +1795 -0
package/src/hooks/.gitkeep +0 -0
package/src/hooks/use-app-theme.ts +172 -0
package/src/hooks/use-coach-mark.ts +342 -0
package/src/hooks/use-mobile.ts +31 -0
package/src/hooks/use-mod-key-label.ts +29 -0
package/src/index.ts +55 -0
package/src/lib/compose-refs.ts +15 -0
package/src/lib/date-filter.ts +67 -0
package/src/lib/utils.ts +6 -0
package/src/theme/apply-windows-contrast-theme.ts +29 -0
package/src/theme/windows-contrast-theme.json +147 -0
package/src/theme.css +1130 -0
package/src/types/react-payment-inputs.d.ts +20 -0

package/src/hooks/.gitkeep ADDED Viewed

File without changes

package/src/hooks/use-app-theme.ts ADDED Viewed

@@ -0,0 +1,172 @@
+"use client"
+/**
+ * useAppTheme — Manages theme dimensions beyond light/dark:
+ *   • Brand      : "one" (Lavender) | "prism" (Rose)
+ *   • Contrast   : "system" | "normal" | "high" | "windows" (JSON-driven palette)
+ *   • Text size  : "compact" | "default" | "large" — root rem scale (industry pattern:
+ *                  iOS “Larger Text”, Android font scale, Gmail/Slack density). Default keeps
+ *                  16px root; compact/large adjust modestly with xs clamped to 11px in CSS.
+ *
+ * Persists to localStorage; applies class / data-* on <html>.
+ * Use alongside `useTheme()` from next-themes for light / dark / system.
+ */
+import { useCallback, useEffect, useState } from "react"
+import {
+  applyWindowsContrastTheme,
+  clearWindowsContrastTheme,
+} from "../theme/apply-windows-contrast-theme"
+export type Brand = "one" | "prism"
+const CONTRAST_PREFS = ["system", "normal", "high", "windows"] as const
+/** What the user explicitly picks (or "system" to follow OS). */
+export type ContrastPreference = (typeof CONTRAST_PREFS)[number]
+/** The resolved mode actually applied to the DOM. */
+export type ContrastMode = "normal" | "high" | "windows"
+/** UI text scale at the document root (rem-based UI tracks together). */
+export type TextSizePreference = "compact" | "default" | "large"
+const BRAND_KEY      = "exxat-brand"
+const CONTRAST_KEY   = "exxat-contrast"
+const TEXT_SIZE_KEY  = "exxat-text-size"
+const MQ = "(prefers-contrast: more)"
+function getOsContrast(): ContrastMode {
+  if (typeof window === "undefined") return "normal"
+  return window.matchMedia(MQ).matches ? "high" : "normal"
+}
+function resolveContrast(pref: ContrastPreference): ContrastMode {
+  if (pref === "system") return getOsContrast()
+  return pref
+}
+function normalizeContrastPref(raw: string | null): ContrastPreference {
+  if (raw && (CONTRAST_PREFS as readonly string[]).includes(raw)) {
+    return raw as ContrastPreference
+  }
+  return "system"
+}
+function applyBrand(brand: Brand) {
+  const html = document.documentElement
+  html.classList.remove("theme-one", "theme-prism")
+  html.classList.add(`theme-${brand}`)
+}
+function applyContrast(mode: ContrastMode) {
+  if (mode === "windows") {
+    document.documentElement.setAttribute("data-contrast", "windows")
+    applyWindowsContrastTheme()
+    return
+  }
+  clearWindowsContrastTheme()
+  document.documentElement.setAttribute(
+    "data-contrast",
+    mode === "high" ? "high" : "off",
+  )
+}
+function applyTextSize(pref: TextSizePreference) {
+  const html = document.documentElement
+  if (pref === "default") {
+    html.removeAttribute("data-text-size")
+  } else {
+    html.setAttribute("data-text-size", pref)
+  }
+}
+export function useAppTheme() {
+  const [brand, setBrandState] = useState<Brand>("one")
+  const [contrastPref, setContrastPrefState] = useState<ContrastPreference>("system")
+  const [resolvedContrast, setResolvedContrast] = useState<ContrastMode>("normal")
+  const [textSizePref, setTextSizePrefState] = useState<TextSizePreference>("default")
+  const [mounted, setMounted] = useState(false)
+  /* Hydrate from localStorage on first client render */
+  useEffect(() => {
+    setMounted(true)
+    const storedBrand = (localStorage.getItem(BRAND_KEY) as Brand) ?? "one"
+    const storedPref = normalizeContrastPref(localStorage.getItem(CONTRAST_KEY))
+    const storedText =
+      (localStorage.getItem(TEXT_SIZE_KEY) as TextSizePreference | null) ?? "default"
+    setBrandState(storedBrand)
+    setContrastPrefState(storedPref)
+    setTextSizePrefState(storedText)
+    applyBrand(storedBrand)
+    const resolved = resolveContrast(storedPref)
+    setResolvedContrast(resolved)
+    applyContrast(resolved)
+    applyTextSize(storedText)
+  }, [])
+  /* Listen for OS contrast changes when preference is "system" */
+  useEffect(() => {
+    if (contrastPref !== "system") return
+    const mql = window.matchMedia(MQ)
+    function onChange() {
+      const resolved = getOsContrast()
+      setResolvedContrast(resolved)
+      applyContrast(resolved)
+    }
+    mql.addEventListener("change", onChange)
+    return () => mql.removeEventListener("change", onChange)
+  }, [contrastPref])
+  /* Re-apply Windows JSON palette when light/dark class toggles (next-themes). */
+  useEffect(() => {
+    if (resolvedContrast !== "windows") return
+    applyWindowsContrastTheme()
+    const html = document.documentElement
+    const obs = new MutationObserver(() => {
+      applyWindowsContrastTheme()
+    })
+    obs.observe(html, { attributes: true, attributeFilter: ["class"] })
+    return () => obs.disconnect()
+  }, [resolvedContrast])
+  const setBrand = useCallback((b: Brand) => {
+    setBrandState(b)
+    localStorage.setItem(BRAND_KEY, b)
+    applyBrand(b)
+  }, [])
+  const setContrast = useCallback((pref: ContrastPreference) => {
+    setContrastPrefState(pref)
+    localStorage.setItem(CONTRAST_KEY, pref)
+    const resolved = resolveContrast(pref)
+    setResolvedContrast(resolved)
+    applyContrast(resolved)
+  }, [])
+  const setTextSize = useCallback((pref: TextSizePreference) => {
+    setTextSizePrefState(pref)
+    localStorage.setItem(TEXT_SIZE_KEY, pref)
+    applyTextSize(pref)
+  }, [])
+  return {
+    brand,
+    setBrand,
+    /** The user's preference: "system" | "normal" | "high" | "windows" */
+    contrastPref,
+    /** The resolved contrast mode actually applied to the DOM. */
+    contrast: resolvedContrast,
+    /** Set the contrast preference. */
+    setContrast,
+    /** Text scale: "compact" | "default" | "large" */
+    textSizePref,
+    setTextSize,
+    mounted,
+  }
+}

package/src/hooks/use-coach-mark.ts ADDED Viewed

@@ -0,0 +1,342 @@
+"use client"
+import * as React from "react"
+/* ═══════════════════════════════════════════════════════════════════════════
+   useCoachMark — Flow & single-step coach-mark state manager
+   ═══════════════════════════════════════════════════════════════════════════
+   Handles:
+     • Multi-step flows (next / prev / skip / complete)
+     • Single coach marks (show / dismiss)
+     • Per-step CSS selector targeting — scrolls element into view
+     • localStorage persistence so dismissed marks don't reappear
+     • Delay before first show (avoids layout flash)
+   ═══════════════════════════════════════════════════════════════════════════ */
+const STORAGE_PREFIX = "exxat-coach-mark:"
+export interface CoachMarkStep {
+  /** Unique key — also used for localStorage persistence */
+  id: string
+  /** CSS selector for the target element this step attaches to */
+  target: string
+  /** Popover placement side for this step */
+  side?: "top" | "bottom" | "left" | "right"
+  /** Popover alignment for this step */
+  align?: "start" | "center" | "end"
+  /** Title shown in the coach mark */
+  title: string
+  /** Body text / description */
+  description: string
+  /** Optional image URL shown above the content */
+  image?: string
+  /** Image alt text (required when image is provided) */
+  imageAlt?: string
+}
+/** Fired on `window` when any coach flow completes (skip or last step). `detail.flowId` is the completed flow. */
+export const COACH_MARK_FLOW_COMPLETED_EVENT = "exxat-coach-mark-flow-completed" as const
+export interface UseCoachMarkOptions {
+  /** Unique ID for the entire flow (used as localStorage key) */
+  flowId: string
+  /** Steps in order — single-item array for a standalone coach mark */
+  steps: CoachMarkStep[]
+  /** Delay in ms before the coach mark appears (default 500) */
+  delay?: number
+  /** Called when the entire flow is completed or skipped */
+  onComplete?: () => void
+  /** If true, always show even if previously dismissed (dev mode) */
+  force?: boolean
+  /**
+   * When false, the auto-open timer does not run (e.g. until the user switches to a view where the target exists).
+   * Default true.
+   */
+  enabled?: boolean
+  /**
+   * If set, auto-open only runs after this flow id is dismissed (localStorage) or completes (same-tab via
+   * `COACH_MARK_FLOW_COMPLETED_EVENT`). Used to run a follow-up tour after another flow finishes.
+   */
+  dependsOnDismissedFlowId?: string
+}
+export interface CoachMarkState {
+  /** Whether the coach mark is currently visible */
+  isOpen: boolean
+  /** Current step index (0-based) */
+  currentStep: number
+  /** Total number of steps */
+  totalSteps: number
+  /** The current step data */
+  step: CoachMarkStep | null
+  /** The resolved target element for the current step */
+  targetEl: HTMLElement | null
+  /** Virtual anchor rect for Radix positioning */
+  anchorRect: { x: number; y: number; width: number; height: number } | null
+  /** Whether this is a multi-step flow */
+  isFlow: boolean
+  /** Whether we're on the first step */
+  isFirst: boolean
+  /** Whether we're on the last step */
+  isLast: boolean
+  /** Advance to the next step (or complete if last) */
+  next: () => void
+  /** Go back to the previous step */
+  prev: () => void
+  /** Skip/dismiss the entire flow */
+  skip: () => void
+  /** Programmatically open the coach mark */
+  open: () => void
+  /** Reset the flow (clears persistence and starts over) */
+  reset: () => void
+}
+function isDismissed(flowId: string): boolean {
+  if (typeof window === "undefined") return false
+  try {
+    return localStorage.getItem(`${STORAGE_PREFIX}${flowId}`) === "dismissed"
+  } catch {
+    return false
+  }
+}
+function setDismissed(flowId: string) {
+  if (typeof window === "undefined") return
+  try {
+    localStorage.setItem(`${STORAGE_PREFIX}${flowId}`, "dismissed")
+  } catch {
+    /* storage full or blocked — silently ignore */
+  }
+}
+function clearDismissed(flowId: string) {
+  if (typeof window === "undefined") return
+  try {
+    localStorage.removeItem(`${STORAGE_PREFIX}${flowId}`)
+  } catch {
+    /* ignore */
+  }
+}
+/** Exported for the Settings page — list all coach mark keys in localStorage */
+export function getAllCoachMarkKeys(): string[] {
+  if (typeof window === "undefined") return []
+  const keys: string[] = []
+  try {
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i)
+      if (key?.startsWith(STORAGE_PREFIX)) {
+        keys.push(key.replace(STORAGE_PREFIX, ""))
+      }
+    }
+  } catch { /* ignore */ }
+  return keys
+}
+/** Exported for the Settings page — reset a specific flow */
+export function resetCoachMarkFlow(flowId: string) {
+  clearDismissed(flowId)
+}
+/** Exported for the Settings page — reset ALL coach marks */
+export function resetAllCoachMarks() {
+  if (typeof window === "undefined") return
+  try {
+    const toRemove: string[] = []
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i)
+      if (key?.startsWith(STORAGE_PREFIX)) toRemove.push(key)
+    }
+    toRemove.forEach((k) => localStorage.removeItem(k))
+  } catch { /* ignore */ }
+}
+export function useCoachMark({
+  flowId,
+  steps,
+  delay = 500,
+  onComplete,
+  force = false,
+  enabled = true,
+  dependsOnDismissedFlowId,
+}: UseCoachMarkOptions): CoachMarkState {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [currentStep, setCurrentStep] = React.useState(0)
+  const [targetEl, setTargetEl] = React.useState<HTMLElement | null>(null)
+  const [anchorRect, setAnchorRect] = React.useState<{
+    x: number; y: number; width: number; height: number
+  } | null>(null)
+  const [prereqMet, setPrereqMet] = React.useState(() => {
+    if (!dependsOnDismissedFlowId) return true
+    return isDismissed(dependsOnDismissedFlowId)
+  })
+  React.useEffect(() => {
+    if (!dependsOnDismissedFlowId) {
+      setPrereqMet(true)
+      return
+    }
+    setPrereqMet(isDismissed(dependsOnDismissedFlowId))
+  }, [dependsOnDismissedFlowId])
+  React.useEffect(() => {
+    if (!dependsOnDismissedFlowId) return
+    const handler = (e: Event) => {
+      const d = (e as CustomEvent<{ flowId?: string }>).detail
+      if (d?.flowId === dependsOnDismissedFlowId) setPrereqMet(true)
+    }
+    window.addEventListener(COACH_MARK_FLOW_COMPLETED_EVENT, handler as EventListener)
+    return () => window.removeEventListener(COACH_MARK_FLOW_COMPLETED_EVENT, handler as EventListener)
+  }, [dependsOnDismissedFlowId])
+  const totalSteps = steps.length
+  const isFlow = totalSteps > 1
+  const step = steps[currentStep] ?? null
+  const isFirst = currentStep === 0
+  const isLast = currentStep === totalSteps - 1
+  /* Auto-show after delay (unless previously dismissed) */
+  React.useEffect(() => {
+    if (enabled === false) return
+    if (dependsOnDismissedFlowId && !prereqMet) return
+    if (!force && isDismissed(flowId)) return
+    const timer = setTimeout(() => setIsOpen(true), delay)
+    return () => clearTimeout(timer)
+  }, [flowId, delay, force, enabled, dependsOnDismissedFlowId, prereqMet])
+  /* Resolve target element + scroll into view when step changes.
+     Retries: toolbar controls (e.g. last tour step on “Properties”) often mount after layout;
+     a single query was easy to miss → no anchorRect → coach UI vanished on that step. */
+  React.useEffect(() => {
+    if (!isOpen || !step?.target) {
+      return
+    }
+    let cancelled = false
+    const timeouts: ReturnType<typeof setTimeout>[] = []
+    const schedule = (fn: () => void, ms: number) => {
+      const id = setTimeout(fn, ms)
+      timeouts.push(id)
+      return id
+    }
+    setAnchorRect(null)
+    setTargetEl(null)
+    let attempts = 0
+    const maxAttempts = 30
+    const intervalMs = 100
+    const tryResolve = () => {
+      if (cancelled) return
+      const el = document.querySelector<HTMLElement>(step.target)
+      if (!el) {
+        attempts += 1
+        if (attempts < maxAttempts) schedule(tryResolve, intervalMs)
+        return
+      }
+      el.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" })
+      schedule(() => {
+        if (cancelled) return
+        const rect = el.getBoundingClientRect()
+        setAnchorRect({
+          x: rect.left,
+          y: rect.top,
+          width: rect.width,
+          height: rect.height,
+        })
+        setTargetEl(el)
+      }, 350)
+    }
+    schedule(tryResolve, 100)
+    return () => {
+      cancelled = true
+      timeouts.forEach(clearTimeout)
+    }
+  }, [isOpen, step?.target, currentStep])
+  /* Re-measure on scroll/resize while open */
+  React.useEffect(() => {
+    if (!isOpen || !targetEl) return
+    const measure = () => {
+      if (!targetEl.isConnected) return
+      const rect = targetEl.getBoundingClientRect()
+      setAnchorRect({
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height,
+      })
+    }
+    window.addEventListener("scroll", measure, { passive: true, capture: true })
+    window.addEventListener("resize", measure, { passive: true })
+    return () => {
+      window.removeEventListener("scroll", measure, true)
+      window.removeEventListener("resize", measure)
+    }
+  }, [isOpen, targetEl])
+  const complete = React.useCallback(() => {
+    setIsOpen(false)
+    setTargetEl(null)
+    setAnchorRect(null)
+    setDismissed(flowId)
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent(COACH_MARK_FLOW_COMPLETED_EVENT, { detail: { flowId } }),
+      )
+    }
+    onComplete?.()
+  }, [flowId, onComplete])
+  const next = React.useCallback(() => {
+    if (isLast) {
+      complete()
+    } else {
+      setCurrentStep((s) => s + 1)
+    }
+  }, [isLast, complete])
+  const prev = React.useCallback(() => {
+    setCurrentStep((s) => Math.max(0, s - 1))
+  }, [])
+  const skip = React.useCallback(() => {
+    complete()
+  }, [complete])
+  const open = React.useCallback(() => {
+    setCurrentStep(0)
+    setIsOpen(true)
+  }, [])
+  const reset = React.useCallback(() => {
+    clearDismissed(flowId)
+    setCurrentStep(0)
+    setIsOpen(true)
+  }, [flowId])
+  return {
+    isOpen,
+    currentStep,
+    totalSteps,
+    step,
+    targetEl,
+    anchorRect,
+    isFlow,
+    isFirst,
+    isLast,
+    next,
+    prev,
+    skip,
+    open,
+    reset,
+  }
+}

package/src/hooks/use-mobile.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import * as React from "react"
+const MOBILE_BREAKPOINT = 768
+/** Matches Tailwind `max-md` / desktop branch `md:` (min-width: 768px). */
+const MOBILE_MQ = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  React.useLayoutEffect(() => {
+    const read = () => {
+      setIsMobile(window.matchMedia(MOBILE_MQ).matches)
+    }
+    const mql = window.matchMedia(MOBILE_MQ)
+    mql.addEventListener("change", read)
+    window.addEventListener("resize", read)
+    const vv = window.visualViewport
+    vv?.addEventListener("resize", read)
+    read()
+    return () => {
+      mql.removeEventListener("change", read)
+      window.removeEventListener("resize", read)
+      vv?.removeEventListener("resize", read)
+    }
+  }, [])
+  return !!isMobile
+}

package/src/hooks/use-mod-key-label.ts ADDED Viewed

@@ -0,0 +1,29 @@
+"use client"
+import * as React from "react"
+/** "⌘" on Apple platforms, "Ctrl" elsewhere — for `Kbd` tooltips. */
+export function useModKeyLabel() {
+  const [mod, setMod] = React.useState("⌘")
+  React.useEffect(() => {
+    setMod(
+      typeof navigator !== "undefined" && /Mac|iPhone|iPod|iPad/i.test(navigator.platform)
+        ? "⌘"
+        : "Ctrl",
+    )
+  }, [])
+  return mod
+}
+/** "⌥" on Apple platforms, "Alt" elsewhere — pair with `useModKeyLabel` for ⌘⌥ / Ctrl+Alt chords. */
+export function useAltKeyLabel() {
+  const [alt, setAlt] = React.useState("⌥")
+  React.useEffect(() => {
+    setAlt(
+      typeof navigator !== "undefined" && /Mac|iPhone|iPod|iPad/i.test(navigator.platform)
+        ? "⌥"
+        : "Alt",
+    )
+  }, [])
+  return alt
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,55 @@
+// Components
+export * from "./components/ui/avatar"
+export * from "./components/ui/badge"
+export * from "./components/ui/banner"
+export * from "./components/ui/breadcrumb"
+export * from "./components/ui/button"
+export * from "./components/ui/calendar"
+export * from "./components/ui/card"
+export * from "./components/ui/chart"
+export * from "./components/ui/checkbox"
+export * from "./components/ui/coach-mark"
+export * from "./components/ui/collapsible"
+export * from "./components/ui/command"
+export * from "./components/ui/date-picker-field"
+export * from "./components/ui/dialog"
+export * from "./components/ui/drag-handle-grip"
+export * from "./components/ui/drawer"
+export * from "./components/ui/dropdown-menu"
+export * from "./components/ui/field"
+export * from "./components/ui/form"
+export * from "./components/ui/input-group"
+export * from "./components/ui/input"
+export * from "./components/ui/input-mask"
+export * from "./components/ui/payment-card-fields"
+export * from "./components/ui/kbd"
+export * from "./components/ui/label"
+export * from "./components/ui/popover"
+export * from "./components/ui/radio-group"
+export * from "./components/ui/select"
+export * from "./components/ui/selection-tile-grid"
+export * from "./components/ui/separator"
+export * from "./components/ui/sheet"
+export * from "./components/ui/sidebar"
+export * from "./components/ui/skeleton"
+export * from "./components/ui/sonner"
+export * from "./components/ui/status-badge"
+export * from "./components/ui/table"
+export * from "./components/ui/tabs"
+export * from "./components/ui/textarea"
+export * from "./components/ui/tip"
+export * from "./components/ui/toggle-group"
+export * from "./components/ui/toggle-switch"
+export * from "./components/ui/toggle"
+export * from "./components/ui/tooltip"
+export * from "./components/ui/view-segmented-control"
+// Hooks
+export * from "./hooks/use-app-theme"
+export * from "./hooks/use-coach-mark"
+export * from "./hooks/use-mobile"
+export * from "./hooks/use-mod-key-label"
+// Utilities
+export * from "./lib/utils"
+export * from "./lib/date-filter"

package/src/lib/compose-refs.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import * as React from "react"
+/** Merges multiple refs (callback or object) for the same DOM node — e.g. RHF `field.ref` + mask ref. */
+export function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {
+  return node => {
+    for (const ref of refs) {
+      if (ref == null) continue
+      if (typeof ref === "function") {
+        ref(node)
+      } else {
+        ;(ref as React.MutableRefObject<T | null>).current = node
+      }
+    }
+  }
+}