@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/ControlledPopover.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+import { TFloatingPlacement } from '../../hooks/useAnchoredFloating';
+export type TPopoverPlacement = TFloatingPlacement;
+interface IControlledPopoverRootProps {
+    children: React.ReactNode;
+    open?: boolean;
+    handler?: (open: boolean) => void;
+    placement?: TPopoverPlacement;
+    offsetPx?: number;
+    /** Sizes the content to the trigger width. Use it when the popover acts as a select dropdown. */
+    matchTriggerWidth?: boolean;
+}
+export declare const ControlledPopoverRoot: React.FC<IControlledPopoverRootProps>;
+/**
+ * Repassa ao filho o que ele recebe de fora, além do que injeta.
+ *
+ * O gatilho é o alvo natural de um `ControlledTooltip`, e o tooltip se prende clonando o filho e
+ * injetando `onPointerEnter`. Aceitando só `children`, este componente engolia essa injeção e o
+ * tooltip simplesmente nunca abria, mesmo com a ordem que a documentação manda usar
+ * (tooltip POR FORA do handler). Os `onClick` são encadeados: o de fora roda antes de abrir.
+ */
+export declare const ControlledPopoverHandler: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+interface IControlledPopoverContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration'> {
+    children: React.ReactNode;
+    className?: string;
+    /**
+     * Keyboard support for a panel of controls, which portals to the end of the page and is otherwise
+     * only reached after everything else: opening moves the focus inside, closing from inside gives it
+     * back to the trigger, and focus going anywhere else closes the panel. Off by default because a
+     * popover that opens while someone works in a field (a date input, the colour of a text selection)
+     * must not take the focus away from it.
+     */
+    manageFocus?: boolean;
+    /** Where the keyboard lands with `manageFocus`; the first control by default. */
+    initialFocus?: (panel: HTMLElement) => HTMLElement | null;
+}
+export declare const ControlledPopoverContent: React.FC<IControlledPopoverContentProps>;
+interface IControlledPopoverProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    triggerTooltip?: string;
+    placement?: TPopoverPlacement;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    contentClassName?: string;
+    tooltipClassName?: string;
+    matchTriggerWidth?: boolean;
+    manageFocus?: boolean;
+    initialFocus?: (panel: HTMLElement) => HTMLElement | null;
+}
+/**
+ * A tooltip on the trigger must sit OUTSIDE the handler: the handler clones its child to
+ * inject the click handler and the reference ref, and a tooltip in that position swallows
+ * both, so the popover stops opening.
+ */
+declare const ControlledPopover: React.FC<IControlledPopoverProps>;
+export default ControlledPopover;

package/dist/components/UI/ControlledPopover.js

@@ -0,0 +1,189 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React, { createContext, isValidElement, cloneElement, useContext, useId, useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { AnimatePresence, motion } from "motion/react";
+import { createPortal } from "react-dom";
+import { getTabbableElements } from "../Form/ControlledDialogPrimitives.js";
+import ControlledTooltip from "./ControlledTooltip.js";
+import { composeRefs } from "../../helpers/composeRefs.js";
+import { isPressOnLayeredSurface } from "../../helpers/layeredSurfaces.js";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+import { getPortalHost } from "../../helpers/portalHost.js";
+import { useAnchoredFloating } from "../../hooks/useAnchoredFloating.js";
+import { floatingVariants } from "../../motion/motionPresets.js";
+import "../../motion/motionTokens.js";
+const PopoverContext = createContext(null);
+const usePopoverContext = () => {
+  const context = useContext(PopoverContext);
+  if (!context) throw new Error("Popover parts must be rendered inside ControlledPopoverRoot");
+  return context;
+};
+const ControlledPopoverRoot = ({
+  children,
+  open,
+  handler,
+  placement = "bottom-start",
+  offsetPx = 6,
+  matchTriggerWidth = false
+}) => {
+  const contentId = useId();
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? Boolean(open) : uncontrolledOpen;
+  const setOpen = (next) => {
+    if (!isControlled) setUncontrolledOpen(next);
+    handler?.(next);
+  };
+  const { setReference, setFloating, floatingRef, referenceRef } = useAnchoredFloating({
+    open: isOpen,
+    placement,
+    offsetPx,
+    matchReferenceWidth: matchTriggerWidth
+  });
+  return /* @__PURE__ */ jsx(
+    PopoverContext.Provider,
+    {
+      value: {
+        open: isOpen,
+        setOpen,
+        placement,
+        offsetPx,
+        contentId,
+        setReference,
+        setFloating,
+        floatingRef,
+        referenceRef
+      },
+      children
+    }
+  );
+};
+const ControlledPopoverHandler = React.forwardRef(({ children, onClick: onOuterClick, ...rest }, forwardedRef) => {
+  const { open, setOpen, setReference, contentId } = usePopoverContext();
+  if (!isValidElement(children)) return /* @__PURE__ */ jsx(Fragment, { children });
+  const child = children;
+  return cloneElement(child, {
+    ...rest,
+    ref: composeRefs(setReference, forwardedRef, child.ref),
+    "aria-expanded": open,
+    "aria-controls": open ? contentId : void 0,
+    onClick: (event) => {
+      onOuterClick?.(event);
+      child.props.onClick?.(event);
+      setOpen(!open);
+    }
+  });
+});
+ControlledPopoverHandler.displayName = "ControlledPopoverHandler";
+const ControlledPopoverContent = ({
+  children,
+  className,
+  manageFocus = false,
+  initialFocus,
+  ...rest
+}) => {
+  const { open, setOpen, contentId, setFloating, floatingRef, referenceRef } = usePopoverContext();
+  const setOpenRef = useRef(setOpen);
+  setOpenRef.current = setOpen;
+  const initialFocusRef = useRef(initialFocus);
+  initialFocusRef.current = initialFocus;
+  useEffect(() => {
+    if (!open || !manageFocus) return void 0;
+    const frame = requestAnimationFrame(() => {
+      const panel = floatingRef.current;
+      if (!panel || panel.contains(document.activeElement)) return;
+      (initialFocusRef.current?.(panel) ?? getTabbableElements(panel)[0])?.focus();
+    });
+    const closeWhenFocusLeaves = (event) => {
+      const { target } = event;
+      if (!(target instanceof Node)) return;
+      if (floatingRef.current?.contains(target) || referenceRef.current?.contains(target)) return;
+      if (isPressOnLayeredSurface(target, floatingRef.current)) return;
+      setOpenRef.current(false);
+    };
+    document.addEventListener("focusin", closeWhenFocusLeaves);
+    return () => {
+      cancelAnimationFrame(frame);
+      document.removeEventListener("focusin", closeWhenFocusLeaves);
+      if (floatingRef.current?.contains(document.activeElement)) referenceRef.current?.focus();
+    };
+  }, [open, manageFocus, floatingRef, referenceRef]);
+  useEffect(() => {
+    if (!open) return void 0;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (floatingRef.current?.contains(target) || referenceRef.current?.contains(target)) return;
+      if (isPressOnLayeredSurface(target, floatingRef.current)) return;
+      setOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    };
+  }, [open, setOpen, floatingRef, referenceRef]);
+  const portalHost = getPortalHost();
+  if (portalHost === null) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        id: contentId,
+        ref: setFloating,
+        variants: floatingVariants,
+        initial: "hidden",
+        animate: "visible",
+        exit: "exit",
+        role: "dialog",
+        ...rest,
+        className: mergeClasses(
+          "fixed left-0 top-0 z-[9999] overflow-auto rounded-lg border border-border p-2 text-sm text-foreground glass",
+          className
+        ),
+        children
+      },
+      "popover-content"
+    ) }),
+    portalHost
+  );
+};
+const ControlledPopover = ({
+  trigger,
+  children,
+  triggerTooltip,
+  placement = "bottom-start",
+  open,
+  onOpenChange,
+  contentClassName,
+  tooltipClassName,
+  matchTriggerWidth,
+  manageFocus,
+  initialFocus
+}) => {
+  const handle = /* @__PURE__ */ jsx(ControlledPopoverHandler, { children: trigger });
+  return /* @__PURE__ */ jsxs(
+    ControlledPopoverRoot,
+    {
+      open,
+      handler: onOpenChange,
+      placement,
+      matchTriggerWidth,
+      children: [
+        triggerTooltip ? /* @__PURE__ */ jsx(ControlledTooltip, { content: triggerTooltip, className: classNames(tooltipClassName), children: handle }) : handle,
+        /* @__PURE__ */ jsx(ControlledPopoverContent, { className: contentClassName, manageFocus, initialFocus, children })
+      ]
+    }
+  );
+};
+export {
+  ControlledPopoverContent,
+  ControlledPopoverHandler,
+  ControlledPopoverRoot,
+  ControlledPopover as default
+};
+//# sourceMappingURL=ControlledPopover.js.map

package/dist/components/UI/ControlledPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledPopover.js","sources":["../../../src/components/UI/ControlledPopover.tsx"],"sourcesContent":["import React, {\n  cloneElement,\n  createContext,\n  isValidElement,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { createPortal } from 'react-dom';\n\nimport { getTabbableElements } from '@/components/Form/ControlledDialogPrimitives';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { composeRefs } from '@/helpers/composeRefs';\nimport { isPressOnLayeredSurface } from '@/helpers/layeredSurfaces';\nimport { mergeClasses } from '@/helpers/mergeClasses';\nimport { getPortalHost } from '@/helpers/portalHost';\nimport { TFloatingPlacement, useAnchoredFloating } from '@/hooks/useAnchoredFloating';\nimport { floatingVariants } from '@/motion';\n\nexport type TPopoverPlacement = TFloatingPlacement;\n\ninterface IPopoverContext {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  placement: TFloatingPlacement;\n  offsetPx: number;\n  contentId: string;\n  setReference: (node: HTMLElement | null) => void;\n  setFloating: (node: HTMLElement | null) => void;\n  floatingRef: React.MutableRefObject<HTMLElement | null>;\n  referenceRef: React.MutableRefObject<HTMLElement | null>;\n}\n\nconst PopoverContext = createContext<IPopoverContext | null>(null);\n\nconst usePopoverContext = (): IPopoverContext => {\n  const context = useContext(PopoverContext);\n  if (!context) throw new Error('Popover parts must be rendered inside ControlledPopoverRoot');\n  return context;\n};\n\ninterface IControlledPopoverRootProps {\n  children: React.ReactNode;\n  open?: boolean;\n  handler?: (open: boolean) => void;\n  placement?: TPopoverPlacement;\n  offsetPx?: number;\n  /** Sizes the content to the trigger width. Use it when the popover acts as a select dropdown. */\n  matchTriggerWidth?: boolean;\n}\n\nexport const ControlledPopoverRoot: React.FC<IControlledPopoverRootProps> = ({\n  children,\n  open,\n  handler,\n  placement = 'bottom-start',\n  offsetPx = 6,\n  matchTriggerWidth = false,\n}) => {\n  const contentId = useId();\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n\n  const isControlled = open !== undefined;\n  const isOpen = isControlled ? Boolean(open) : uncontrolledOpen;\n\n  const setOpen = (next: boolean) => {\n    if (!isControlled) setUncontrolledOpen(next);\n    handler?.(next);\n  };\n\n  const { setReference, setFloating, floatingRef, referenceRef } = useAnchoredFloating({\n    open: isOpen,\n    placement,\n    offsetPx,\n    matchReferenceWidth: matchTriggerWidth,\n  });\n\n  return (\n    <PopoverContext.Provider\n      value={{\n        open: isOpen,\n        setOpen,\n        placement,\n        offsetPx,\n        contentId,\n        setReference,\n        setFloating,\n        floatingRef,\n        referenceRef,\n      }}\n    >\n      {children}\n    </PopoverContext.Provider>\n  );\n};\n\ninterface IHandlerChildProps {\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  ref?: React.Ref<HTMLElement>;\n}\n\n/**\n * Repassa ao filho o que ele recebe de fora, além do que injeta.\n *\n * O gatilho é o alvo natural de um `ControlledTooltip`, e o tooltip se prende clonando o filho e\n * injetando `onPointerEnter`. Aceitando só `children`, este componente engolia essa injeção e o\n * tooltip simplesmente nunca abria, mesmo com a ordem que a documentação manda usar\n * (tooltip POR FORA do handler). Os `onClick` são encadeados: o de fora roda antes de abrir.\n */\nexport const ControlledPopoverHandler = React.forwardRef<\n  HTMLElement,\n  { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>\n>(({ children, onClick: onOuterClick, ...rest }, forwardedRef) => {\n  const { open, setOpen, setReference, contentId } = usePopoverContext();\n\n  if (!isValidElement(children)) return <>{children}</>;\n\n  const child = children as React.ReactElement<IHandlerChildProps>;\n\n  return cloneElement(child, {\n    ...rest,\n    ref: composeRefs<HTMLElement>(setReference, forwardedRef, (child as { ref?: React.Ref<HTMLElement> }).ref),\n    'aria-expanded': open,\n    'aria-controls': open ? contentId : undefined,\n    onClick: (event: React.MouseEvent<HTMLElement>) => {\n      onOuterClick?.(event);\n      child.props.onClick?.(event);\n      setOpen(!open);\n    },\n  } as IHandlerChildProps);\n});\n\nControlledPopoverHandler.displayName = 'ControlledPopoverHandler';\n\ninterface IControlledPopoverContentProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'className' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration'\n> {\n  children: React.ReactNode;\n  className?: string;\n  /**\n   * Keyboard support for a panel of controls, which portals to the end of the page and is otherwise\n   * only reached after everything else: opening moves the focus inside, closing from inside gives it\n   * back to the trigger, and focus going anywhere else closes the panel. Off by default because a\n   * popover that opens while someone works in a field (a date input, the colour of a text selection)\n   * must not take the focus away from it.\n   */\n  manageFocus?: boolean;\n  /** Where the keyboard lands with `manageFocus`; the first control by default. */\n  initialFocus?: (panel: HTMLElement) => HTMLElement | null;\n}\n\nexport const ControlledPopoverContent: React.FC<IControlledPopoverContentProps> = ({\n  children,\n  className,\n  manageFocus = false,\n  initialFocus,\n  ...rest\n}) => {\n  const { open, setOpen, contentId, setFloating, floatingRef, referenceRef } = usePopoverContext();\n\n  // Both change on every render of the root, and leaving the effect below re-runs would hand the\n  // focus back to the trigger each time.\n  const setOpenRef = useRef(setOpen);\n  setOpenRef.current = setOpen;\n  const initialFocusRef = useRef(initialFocus);\n  initialFocusRef.current = initialFocus;\n\n  useEffect(() => {\n    if (!open || !manageFocus) return undefined;\n\n    // The panel mounts with this update: wait for the frame that paints it.\n    const frame = requestAnimationFrame(() => {\n      const panel = floatingRef.current;\n      if (!panel || panel.contains(document.activeElement)) return;\n      (initialFocusRef.current?.(panel) ?? getTabbableElements(panel)[0])?.focus();\n    });\n\n    const closeWhenFocusLeaves = (event: FocusEvent) => {\n      const { target } = event;\n      if (!(target instanceof Node)) return;\n      if (floatingRef.current?.contains(target) || referenceRef.current?.contains(target)) return;\n      if (isPressOnLayeredSurface(target, floatingRef.current)) return;\n      setOpenRef.current(false);\n    };\n\n    document.addEventListener('focusin', closeWhenFocusLeaves);\n\n    return () => {\n      cancelAnimationFrame(frame);\n      document.removeEventListener('focusin', closeWhenFocusLeaves);\n      if (floatingRef.current?.contains(document.activeElement)) referenceRef.current?.focus();\n    };\n  }, [open, manageFocus, floatingRef, referenceRef]);\n\n  useEffect(() => {\n    if (!open) return undefined;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') setOpen(false);\n    };\n\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target as Node | null;\n      if (!target) return;\n      if (floatingRef.current?.contains(target) || referenceRef.current?.contains(target)) return;\n      if (isPressOnLayeredSurface(target, floatingRef.current)) return;\n      setOpen(false);\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('pointerdown', handlePointerDown, true);\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('pointerdown', handlePointerDown, true);\n    };\n  }, [open, setOpen, floatingRef, referenceRef]);\n\n  const portalHost = getPortalHost();\n  if (portalHost === null) return null;\n\n  return createPortal(\n    <AnimatePresence>\n      {open && (\n        <motion.div\n          key=\"popover-content\"\n          id={contentId}\n          ref={setFloating}\n          variants={floatingVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          exit=\"exit\"\n          role=\"dialog\"\n          {...rest}\n          className={mergeClasses(\n            'fixed left-0 top-0 z-[9999] overflow-auto rounded-lg border border-border p-2 text-sm text-foreground glass',\n            className,\n          )}\n        >\n          {children}\n        </motion.div>\n      )}\n    </AnimatePresence>,\n    portalHost,\n  );\n};\n\ninterface IControlledPopoverProps {\n  trigger: React.ReactNode;\n  children: React.ReactNode;\n  triggerTooltip?: string;\n  placement?: TPopoverPlacement;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  contentClassName?: string;\n  tooltipClassName?: string;\n  matchTriggerWidth?: boolean;\n  manageFocus?: boolean;\n  initialFocus?: (panel: HTMLElement) => HTMLElement | null;\n}\n\n/**\n * A tooltip on the trigger must sit OUTSIDE the handler: the handler clones its child to\n * inject the click handler and the reference ref, and a tooltip in that position swallows\n * both, so the popover stops opening.\n */\nconst ControlledPopover: React.FC<IControlledPopoverProps> = ({\n  trigger,\n  children,\n  triggerTooltip,\n  placement = 'bottom-start',\n  open,\n  onOpenChange,\n  contentClassName,\n  tooltipClassName,\n  matchTriggerWidth,\n  manageFocus,\n  initialFocus,\n}) => {\n  const handle = <ControlledPopoverHandler>{trigger}</ControlledPopoverHandler>;\n\n  return (\n    <ControlledPopoverRoot\n      open={open}\n      handler={onOpenChange}\n      placement={placement}\n      matchTriggerWidth={matchTriggerWidth}\n    >\n      {triggerTooltip ? (\n        <ControlledTooltip content={triggerTooltip} className={classNames(tooltipClassName)}>\n          {handle}\n        </ControlledTooltip>\n      ) : (\n        handle\n      )}\n\n      <ControlledPopoverContent className={contentClassName} manageFocus={manageFocus} initialFocus={initialFocus}>\n        {children}\n      </ControlledPopoverContent>\n    </ControlledPopoverRoot>\n  );\n};\n\nexport default ControlledPopover;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/ControlledProgress.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export type TProgressTone = 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+interface IControlledProgressProps {
+    value: number;
+    tone?: TProgressTone;
+    className?: string;
+    barClassName?: string;
+    /** A colour that is DATA (a stage colour the user picked), not a theme token. */
+    barColor?: string;
+    label?: string;
+}
+declare const ControlledProgress: React.FC<IControlledProgressProps>;
+export default ControlledProgress;

package/dist/components/UI/ControlledProgress.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const TONE_BAR_CLASS = {
+  brand: "bg-brand",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  info: "bg-info",
+  neutral: "bg-foreground-faint"
+};
+const ControlledProgress = ({
+  value,
+  tone = "brand",
+  className,
+  barClassName,
+  barColor,
+  label
+}) => {
+  const clamped = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuenow": Math.round(clamped),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: mergeClasses("h-1.5 w-full overflow-hidden rounded-full bg-muted", className),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: mergeClasses(
+            classNames("h-full rounded-full transition-interactive duration-slow", !barColor && TONE_BAR_CLASS[tone]),
+            barClassName
+          ),
+          style: { width: `${clamped}%`, backgroundColor: barColor }
+        }
+      )
+    }
+  );
+};
+export {
+  ControlledProgress as default
+};
+//# sourceMappingURL=ControlledProgress.js.map

package/dist/components/UI/ControlledProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledProgress.js","sources":["../../../src/components/UI/ControlledProgress.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nexport type TProgressTone = 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';\n\ninterface IControlledProgressProps {\n  value: number;\n  tone?: TProgressTone;\n  className?: string;\n  barClassName?: string;\n  /** A colour that is DATA (a stage colour the user picked), not a theme token. */\n  barColor?: string;\n  label?: string;\n}\n\nconst TONE_BAR_CLASS: Record<TProgressTone, string> = {\n  brand: 'bg-brand',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  danger: 'bg-danger',\n  info: 'bg-info',\n  neutral: 'bg-foreground-faint',\n};\n\nconst ControlledProgress: React.FC<IControlledProgressProps> = ({\n  value,\n  tone = 'brand',\n  className,\n  barClassName,\n  barColor,\n  label,\n}) => {\n  const clamped = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuenow={Math.round(clamped)}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      className={mergeClasses('h-1.5 w-full overflow-hidden rounded-full bg-muted', className)}\n    >\n      <div\n        className={mergeClasses(\n          classNames('h-full rounded-full transition-interactive duration-slow', !barColor && TONE_BAR_CLASS[tone]),\n          barClassName,\n        )}\n        style={{ width: `${clamped}%`, backgroundColor: barColor }}\n      />\n    </div>\n  );\n};\n\nexport default ControlledProgress;\n"],"names":[],"mappings":";;;AAiBA,MAAM,iBAAgD;AAAA,EACpD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,qBAAyD,CAAC;AAAA,EAC9D;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,UAAU,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,IAAI;AAE7E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,iBAAe,KAAK,MAAM,OAAO;AAAA,MACjC,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAW,aAAa,sDAAsD,SAAS;AAAA,MAEvF,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT,WAAW,4DAA4D,CAAC,YAAY,eAAe,IAAI,CAAC;AAAA,YACxG;AAAA,UAAA;AAAA,UAEF,OAAO,EAAE,OAAO,GAAG,OAAO,KAAK,iBAAiB,SAAA;AAAA,QAAS;AAAA,MAAA;AAAA,IAC3D;AAAA,EAAA;AAGN;"}

package/dist/components/UI/ControlledSlider.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+interface IControlledSliderProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    className?: string;
+    label?: string;
+    /** Reaches the field itself, so a `FieldLabel` can point at it. */
+    id?: string;
+}
+declare const ControlledSlider: React.FC<IControlledSliderProps>;
+export default ControlledSlider;

package/dist/components/UI/ControlledSlider.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const ControlledSlider = ({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  className,
+  label,
+  id
+}) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    id,
+    type: "range",
+    min,
+    max,
+    step,
+    value: Number.isFinite(value) ? value : 0,
+    disabled,
+    "aria-label": label,
+    onChange: (event) => onChange(Number(event.target.value)),
+    className: mergeClasses(
+      "h-1.5 w-full cursor-pointer appearance-none rounded-full bg-muted accent-brand",
+      className
+    )
+  }
+);
+export {
+  ControlledSlider as default
+};
+//# sourceMappingURL=ControlledSlider.js.map

package/dist/components/UI/ControlledSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledSlider.js","sources":["../../../src/components/UI/ControlledSlider.tsx"],"sourcesContent":["import React from 'react';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\ninterface IControlledSliderProps {\n  value: number;\n  onChange: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  className?: string;\n  label?: string;\n  /** Reaches the field itself, so a `FieldLabel` can point at it. */\n  id?: string;\n}\n\nconst ControlledSlider: React.FC<IControlledSliderProps> = ({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  className,\n  label,\n  id,\n}) => (\n  <input\n    id={id}\n    type=\"range\"\n    min={min}\n    max={max}\n    step={step}\n    value={Number.isFinite(value) ? value : 0}\n    disabled={disabled}\n    aria-label={label}\n    onChange={(event) => onChange(Number(event.target.value))}\n    className={mergeClasses(\n      'h-1.5 w-full cursor-pointer appearance-none rounded-full bg-muted accent-brand',\n      className,\n    )}\n  />\n);\n\nexport default ControlledSlider;\n"],"names":[],"mappings":";;AAiBA,MAAM,mBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,OAAO,SAAS,KAAK,IAAI,QAAQ;AAAA,IACxC;AAAA,IACA,cAAY;AAAA,IACZ,UAAU,CAAC,UAAU,SAAS,OAAO,MAAM,OAAO,KAAK,CAAC;AAAA,IACxD,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AACF;"}

package/dist/components/UI/ControlledTooltip.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { TFloatingPlacement } from '../../hooks/useAnchoredFloating';
+export interface IControlledTooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    className?: string;
+    placement?: TFloatingPlacement;
+    offset?: number;
+    /** Lifts the touch block: a click-to-open tooltip is a deliberate mobile pattern. */
+    interactive?: boolean;
+    open?: boolean;
+    handler?: (open: boolean) => void;
+}
+/**
+ * Owns the open state instead of delegating to the positioning library, because a raw
+ * hover interaction opens on touch (the browser's compatibility `mouseenter`) and never
+ * closes when the trigger stops receiving `mouseleave`: detached from the DOM, covered by
+ * a dialog, or re-rendered. Both leave a bubble parked on the screen.
+ */
+declare const ControlledTooltip: React.FC<IControlledTooltipProps>;
+export default ControlledTooltip;

package/dist/components/UI/ControlledTooltip.js

@@ -0,0 +1,146 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, isValidElement, cloneElement } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { createPortal } from "react-dom";
+import { composeRefs } from "../../helpers/composeRefs.js";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+import { getPortalHost } from "../../helpers/portalHost.js";
+import { useAnchoredFloating } from "../../hooks/useAnchoredFloating.js";
+import { tooltipVariants } from "../../motion/motionPresets.js";
+import "../../motion/motionTokens.js";
+const ORPHAN_TOOLTIP_CHECK_INTERVAL_MS = 250;
+const isTouchFirstDevice = () => window.matchMedia("(hover: none), (pointer: coarse)").matches;
+const ControlledTooltip = ({
+  content,
+  children,
+  className,
+  placement = "top",
+  offset = 6,
+  interactive,
+  open,
+  handler
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const triggerPointerTypeRef = useRef(null);
+  const pointerPositionRef = useRef(null);
+  const isControlledByHost = open !== void 0;
+  const opensOnHover = !interactive;
+  const resolvedOpen = isControlledByHost ? Boolean(open) : isOpen;
+  const { setReference, setFloating } = useAnchoredFloating({
+    open: resolvedOpen,
+    placement,
+    offsetPx: offset,
+    constrainToViewport: false
+  });
+  const closeTooltip = useCallback(() => {
+    setIsOpen(false);
+    handler?.(false);
+  }, [handler]);
+  const openTooltip = useCallback(() => {
+    const pointerType = triggerPointerTypeRef.current;
+    const openedByTouch = pointerType === null ? isTouchFirstDevice() : pointerType !== "mouse";
+    if (opensOnHover && openedByTouch) return;
+    setIsOpen(true);
+    handler?.(true);
+  }, [handler, opensOnHover]);
+  useEffect(() => {
+    if (isControlledByHost || !resolvedOpen || !opensOnHover) return void 0;
+    const belongsToTooltip = (element) => {
+      const trigger2 = triggerRef.current;
+      if (!element || !trigger2) return false;
+      if (trigger2.contains(element)) return true;
+      return element instanceof Element && element.closest('[role="tooltip"]') !== null;
+    };
+    const closeWhenPointerLeftTrigger = (event) => {
+      pointerPositionRef.current = { x: event.clientX, y: event.clientY };
+      if (!triggerRef.current) return;
+      if (belongsToTooltip(event.target instanceof Node ? event.target : null)) return;
+      closeTooltip();
+    };
+    const closeWhenPageIsHidden = () => {
+      if (document.hidden) closeTooltip();
+    };
+    const orphanTooltipCheck = window.setInterval(() => {
+      const trigger2 = triggerRef.current;
+      if (!trigger2) return;
+      if (!trigger2.isConnected) {
+        closeTooltip();
+        return;
+      }
+      const pointerPosition = pointerPositionRef.current;
+      if (!pointerPosition) return;
+      if (!belongsToTooltip(document.elementFromPoint(pointerPosition.x, pointerPosition.y))) closeTooltip();
+    }, ORPHAN_TOOLTIP_CHECK_INTERVAL_MS);
+    document.addEventListener("pointermove", closeWhenPointerLeftTrigger, { capture: true, passive: true });
+    document.addEventListener("pointerdown", closeTooltip, { capture: true, passive: true });
+    document.addEventListener("visibilitychange", closeWhenPageIsHidden);
+    window.addEventListener("blur", closeTooltip);
+    return () => {
+      window.clearInterval(orphanTooltipCheck);
+      document.removeEventListener("pointermove", closeWhenPointerLeftTrigger, { capture: true });
+      document.removeEventListener("pointerdown", closeTooltip, { capture: true });
+      document.removeEventListener("visibilitychange", closeWhenPageIsHidden);
+      window.removeEventListener("blur", closeTooltip);
+    };
+  }, [closeTooltip, isControlledByHost, resolvedOpen, opensOnHover]);
+  if (!isValidElement(children)) return /* @__PURE__ */ jsx(Fragment, { children });
+  const trigger = children;
+  const triggerWithTracking = cloneElement(trigger, {
+    ref: composeRefs(
+      (node) => {
+        triggerRef.current = node;
+      },
+      setReference,
+      trigger.ref
+    ),
+    onPointerEnter: (event) => {
+      triggerPointerTypeRef.current = event.pointerType || null;
+      triggerRef.current = event.currentTarget;
+      pointerPositionRef.current = { x: event.clientX, y: event.clientY };
+      trigger.props.onPointerEnter?.(event);
+      if (!isControlledByHost) openTooltip();
+    },
+    onPointerDown: (event) => {
+      trigger.props.onPointerDown?.(event);
+      if (!isControlledByHost && opensOnHover) closeTooltip();
+    },
+    onMouseEnter: (event) => {
+      triggerRef.current = event.currentTarget;
+      pointerPositionRef.current = { x: event.clientX, y: event.clientY };
+      trigger.props.onMouseEnter?.(event);
+    },
+    onFocus: (event) => {
+      triggerRef.current = event.currentTarget;
+      trigger.props.onFocus?.(event);
+    }
+  });
+  const portalHost = getPortalHost();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerWithTracking,
+    portalHost !== null && createPortal(
+      /* @__PURE__ */ jsx(AnimatePresence, { children: resolvedOpen && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          ref: setFloating,
+          variants: tooltipVariants,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          role: "tooltip",
+          className: mergeClasses(
+            "fixed left-0 top-0 z-[9999] max-w-xs rounded-lg bg-ink px-3 py-2 text-xs font-normal text-ink-fg shadow-lg",
+            className
+          ),
+          children: content
+        },
+        "tooltip-bubble"
+      ) }),
+      portalHost
+    )
+  ] });
+};
+export {
+  ControlledTooltip as default
+};
+//# sourceMappingURL=ControlledTooltip.js.map

package/dist/components/UI/ControlledTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledTooltip.js","sources":["../../../src/components/UI/ControlledTooltip.tsx"],"sourcesContent":["import { cloneElement, isValidElement, useCallback, useEffect, useRef, useState } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport type { FocusEvent, MouseEvent, PointerEvent, ReactElement, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { composeRefs } from '@/helpers/composeRefs';\nimport { mergeClasses } from '@/helpers/mergeClasses';\nimport { getPortalHost } from '@/helpers/portalHost';\nimport { TFloatingPlacement, useAnchoredFloating } from '@/hooks/useAnchoredFloating';\nimport { tooltipVariants } from '@/motion';\n\nexport interface IControlledTooltipProps {\n  content: ReactNode;\n  children: ReactNode;\n  className?: string;\n  placement?: TFloatingPlacement;\n  offset?: number;\n  /** Lifts the touch block: a click-to-open tooltip is a deliberate mobile pattern. */\n  interactive?: boolean;\n  open?: boolean;\n  handler?: (open: boolean) => void;\n}\n\ntype TTooltipTriggerProps = {\n  onPointerEnter?: (event: PointerEvent<HTMLElement>) => void;\n  onPointerDown?: (event: PointerEvent<HTMLElement>) => void;\n  onMouseEnter?: (event: MouseEvent<HTMLElement>) => void;\n  onFocus?: (event: FocusEvent<HTMLElement>) => void;\n  ref?: React.Ref<HTMLElement>;\n};\n\nconst ORPHAN_TOOLTIP_CHECK_INTERVAL_MS = 250;\n\nconst isTouchFirstDevice = (): boolean => window.matchMedia('(hover: none), (pointer: coarse)').matches;\n\n/**\n * Owns the open state instead of delegating to the positioning library, because a raw\n * hover interaction opens on touch (the browser's compatibility `mouseenter`) and never\n * closes when the trigger stops receiving `mouseleave`: detached from the DOM, covered by\n * a dialog, or re-rendered. Both leave a bubble parked on the screen.\n */\nconst ControlledTooltip: React.FC<IControlledTooltipProps> = ({\n  content,\n  children,\n  className,\n  placement = 'top',\n  offset = 6,\n  interactive,\n  open,\n  handler,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const triggerPointerTypeRef = useRef<string | null>(null);\n  const pointerPositionRef = useRef<{ x: number; y: number } | null>(null);\n\n  const isControlledByHost = open !== undefined;\n  const opensOnHover = !interactive;\n  const resolvedOpen = isControlledByHost ? Boolean(open) : isOpen;\n\n  const { setReference, setFloating } = useAnchoredFloating({\n    open: resolvedOpen,\n    placement,\n    offsetPx: offset,\n    constrainToViewport: false,\n  });\n\n  const closeTooltip = useCallback(() => {\n    setIsOpen(false);\n    handler?.(false);\n  }, [handler]);\n\n  const openTooltip = useCallback(() => {\n    const pointerType = triggerPointerTypeRef.current;\n    const openedByTouch = pointerType === null ? isTouchFirstDevice() : pointerType !== 'mouse';\n    if (opensOnHover && openedByTouch) return;\n\n    setIsOpen(true);\n    handler?.(true);\n  }, [handler, opensOnHover]);\n\n  useEffect(() => {\n    if (isControlledByHost || !resolvedOpen || !opensOnHover) return undefined;\n\n    const belongsToTooltip = (element: Node | null): boolean => {\n      const trigger = triggerRef.current;\n      if (!element || !trigger) return false;\n      if (trigger.contains(element)) return true;\n      return element instanceof Element && element.closest('[role=\"tooltip\"]') !== null;\n    };\n\n    const closeWhenPointerLeftTrigger = (event: globalThis.PointerEvent) => {\n      pointerPositionRef.current = { x: event.clientX, y: event.clientY };\n      if (!triggerRef.current) return;\n      if (belongsToTooltip(event.target instanceof Node ? event.target : null)) return;\n      closeTooltip();\n    };\n\n    const closeWhenPageIsHidden = () => {\n      if (document.hidden) closeTooltip();\n    };\n\n    const orphanTooltipCheck = window.setInterval(() => {\n      const trigger = triggerRef.current;\n      if (!trigger) return;\n      if (!trigger.isConnected) {\n        closeTooltip();\n        return;\n      }\n\n      const pointerPosition = pointerPositionRef.current;\n      if (!pointerPosition) return;\n      if (!belongsToTooltip(document.elementFromPoint(pointerPosition.x, pointerPosition.y))) closeTooltip();\n    }, ORPHAN_TOOLTIP_CHECK_INTERVAL_MS);\n\n    document.addEventListener('pointermove', closeWhenPointerLeftTrigger, { capture: true, passive: true });\n    document.addEventListener('pointerdown', closeTooltip, { capture: true, passive: true });\n    document.addEventListener('visibilitychange', closeWhenPageIsHidden);\n    window.addEventListener('blur', closeTooltip);\n\n    return () => {\n      window.clearInterval(orphanTooltipCheck);\n      document.removeEventListener('pointermove', closeWhenPointerLeftTrigger, { capture: true });\n      document.removeEventListener('pointerdown', closeTooltip, { capture: true });\n      document.removeEventListener('visibilitychange', closeWhenPageIsHidden);\n      window.removeEventListener('blur', closeTooltip);\n    };\n  }, [closeTooltip, isControlledByHost, resolvedOpen, opensOnHover]);\n\n  if (!isValidElement(children)) return <>{children}</>;\n\n  const trigger = children as ReactElement<TTooltipTriggerProps>;\n\n  const triggerWithTracking = cloneElement(trigger, {\n    ref: composeRefs<HTMLElement>(\n      (node) => {\n        triggerRef.current = node;\n      },\n      setReference,\n      (trigger as { ref?: React.Ref<HTMLElement> }).ref,\n    ),\n    onPointerEnter: (event: PointerEvent<HTMLElement>) => {\n      triggerPointerTypeRef.current = event.pointerType || null;\n      triggerRef.current = event.currentTarget;\n      pointerPositionRef.current = { x: event.clientX, y: event.clientY };\n      trigger.props.onPointerEnter?.(event);\n      if (!isControlledByHost) openTooltip();\n    },\n    onPointerDown: (event: PointerEvent<HTMLElement>) => {\n      trigger.props.onPointerDown?.(event);\n      // Not left to the document listener above, which only exists after the effect of the render\n      // that opened the bubble: a press right behind the hover finds nobody listening, and the\n      // bubble stays on the screen under whatever the press opened.\n      if (!isControlledByHost && opensOnHover) closeTooltip();\n    },\n    onMouseEnter: (event: MouseEvent<HTMLElement>) => {\n      triggerRef.current = event.currentTarget;\n      pointerPositionRef.current = { x: event.clientX, y: event.clientY };\n      trigger.props.onMouseEnter?.(event);\n    },\n    onFocus: (event: FocusEvent<HTMLElement>) => {\n      triggerRef.current = event.currentTarget;\n      trigger.props.onFocus?.(event);\n    },\n  } as TTooltipTriggerProps);\n\n  const portalHost = getPortalHost();\n\n  return (\n    <>\n      {triggerWithTracking}\n\n      {portalHost !== null &&\n        createPortal(\n          <AnimatePresence>\n            {resolvedOpen && (\n              <motion.div\n                key=\"tooltip-bubble\"\n                ref={setFloating}\n                variants={tooltipVariants}\n                initial=\"hidden\"\n                animate=\"visible\"\n                exit=\"exit\"\n                role=\"tooltip\"\n                className={mergeClasses(\n                  'fixed left-0 top-0 z-[9999] max-w-xs rounded-lg bg-ink px-3 py-2 text-xs font-normal text-ink-fg shadow-lg',\n                  className,\n                )}\n              >\n                {content}\n              </motion.div>\n            )}\n          </AnimatePresence>,\n          portalHost,\n        )}\n    </>\n  );\n};\n\nexport default ControlledTooltip;\n"],"names":["trigger"],"mappings":"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"}

package/dist/components/UI/CustomBadge.d.ts

@@ -0,0 +1,15 @@
+export type TCustomBadgeTone = 'brand' | 'danger' | 'success' | 'warning' | 'info';
+interface ICustomBadgeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content'> {
+    content?: string | number;
+    children?: React.ReactNode;
+    tone?: TCustomBadgeTone;
+    invisible?: boolean;
+    className?: string;
+    containerClassName?: string;
+}
+/**
+ * Forwards its ref and spreads the DOM props onto the wrapper, so it can sit directly under a
+ * `ControlledTooltip` (which clones its child and injects a ref plus pointer handlers).
+ */
+declare const CustomBadge: import('react').ForwardRefExoticComponent<ICustomBadgeProps & import('react').RefAttributes<HTMLDivElement>>;
+export default CustomBadge;

package/dist/components/UI/CustomBadge.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const TONE_CLASS = {
+  brand: "bg-brand text-brand-fg",
+  danger: "bg-danger text-danger-fg",
+  success: "bg-success text-success-fg",
+  warning: "bg-warning text-warning-fg",
+  info: "bg-info text-info-fg"
+};
+const CustomBadge = forwardRef(
+  ({ content, children, tone = "brand", invisible, className, containerClassName, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: mergeClasses("relative inline-flex", containerClassName), children: [
+      children,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: mergeClasses(
+            "pointer-events-none absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-xxs font-bold leading-none",
+            TONE_CLASS[tone],
+            invisible && "hidden",
+            className
+          ),
+          children: content
+        }
+      )
+    ] });
+  }
+);
+CustomBadge.displayName = "CustomBadge";
+export {
+  CustomBadge as default
+};
+//# sourceMappingURL=CustomBadge.js.map