@fanvue/ui 2.14.3 → 2.15.1

package/dist/index.d.ts

@@ -1166,6 +1166,12 @@ export declare interface ChipProps extends React_2.HTMLAttributes<HTMLElement> {
     disabled?: boolean;
     /** Whether to show a coloured status dot at the leading edge. @default false */
     leftDot?: boolean;
+    /**
+     * Whether the chip uses a dashed border for add/create affordances.
+     * Has no effect when `variant="dark"` or `selected` is `true`.
+     * @default false
+     */
+    dotted?: boolean;
     /** Icon element displayed before the label. */
     leftIcon?: React_2.ReactNode;
     /** Icon element displayed after the label. */
@@ -1630,8 +1636,14 @@ export declare const DialogTitle: React_2.ForwardRefExoticComponent<Omit<DialogP
 /** Props for the {@link DialogTitle} component. */
 export declare type DialogTitleProps = React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
 
-/** The element that opens the dialog when clicked. */
-export declare const DialogTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+/**
+ * The element that opens the dialog when clicked.
+ *
+ * On touch / pen, a press-and-release that crosses a small movement threshold
+ * is treated as a drag and the resulting synthetic click is suppressed —
+ * defends against Android Chrome opening the dialog on a scroll-drag-end.
+ */
+export declare const DialogTrigger: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
 
 /** Props for the {@link DialogTrigger} component. */
 export declare type DialogTriggerProps = React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
@@ -1867,14 +1879,20 @@ export declare const DrawerTitle: React_2.ForwardRefExoticComponent<DrawerTitleP
 export declare interface DrawerTitleProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
 }
 
-/** The element that opens the drawer when clicked. */
-export declare const DrawerTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+/**
+ * The element that opens the drawer when clicked.
+ *
+ * On touch / pen, a press-and-release that crosses a small movement threshold
+ * is treated as a drag and the resulting synthetic click is suppressed —
+ * defends against Android Chrome opening the drawer on a scroll-drag-end.
+ */
+export declare const DrawerTrigger: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
 
 /** Props for the {@link DrawerTrigger} component. */
 export declare type DrawerTriggerProps = React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
 
 /** Root component that manages open/close state for a dropdown menu. */
-export declare const DropdownMenu: React_2.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+export declare function DropdownMenu({ open: openProp, defaultOpen, onOpenChange, children, ...props }: DropdownMenuProps): JSX.Element;
 
 /**
  * The positioned content panel rendered inside a portal.
@@ -1958,8 +1976,15 @@ export declare const DropdownMenuSeparator: React_2.ForwardRefExoticComponent<Dr
 export declare interface DropdownMenuSeparatorProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {
 }
 
-/** The element that toggles the dropdown menu when clicked. */
-export declare const DropdownMenuTrigger: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+/**
+ * The element that toggles the dropdown menu when clicked.
+ *
+ * On touch devices, the menu only opens if the press-and-release stays within
+ * a small movement threshold. A drag that incidentally ends over the trigger
+ * (common when scrolling a feed on Android Chrome) is ignored. Mouse and
+ * keyboard interactions are unchanged.
+ */
+export declare const DropdownMenuTrigger: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
 
 /** Props for the {@link DropdownMenuTrigger} component. */
 export declare type DropdownMenuTriggerProps = React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>;
@@ -2397,8 +2422,14 @@ export declare interface InfoBoxProps extends React_2.ComponentPropsWithoutRef<t
     defaultOpen?: boolean;
 }
 
-/** The element that triggers the info box on click. */
-export declare const InfoBoxTrigger: React_2.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+/**
+ * The element that triggers the info box on click.
+ *
+ * On touch / pen, a press-and-release that crosses a small movement threshold
+ * is treated as a drag and the resulting synthetic click is suppressed —
+ * defends against Android Chrome opening the popover on a scroll-drag-end.
+ */
+export declare const InfoBoxTrigger: React_2.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
 
 /** Props for the {@link InfoBoxTrigger} component. */
 export declare type InfoBoxTriggerProps = React_2.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;
@@ -2421,6 +2452,55 @@ export declare const InfoIcon: React_2.ForwardRefExoticComponent<BaseIconProps &
 /** Props for {@link InfoIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type InfoIconProps = BaseIconProps;
 
+/**
+ * A chip-styled inline edit field. Renders as a dashed-border button that
+ * swaps to a text input on click, allowing the value to be edited in place.
+ *
+ * Enter and blur commit the draft via `onSubmit`. Escape reverts to `value`
+ * and calls `onCancel`. Drafts that fail `validate` are reverted.
+ *
+ * The forwarded ref points at the underlying `<input>` and is only populated
+ * while the field is in edit mode — it resolves to `null` in display mode.
+ *
+ * Consumers may pass `onChange`, `onBlur`, and `onKeyDown` to participate in
+ * input events. The component's own handlers run after the consumer's, and
+ * keyboard handling is skipped if the consumer calls `event.preventDefault()`.
+ *
+ * @example
+ * ```tsx
+ * const [name, setName] = useState("New folder");
+ * <InlineEdit value={name} onSubmit={setName} />
+ * ```
+ */
+export declare const InlineEdit: React_2.ForwardRefExoticComponent<InlineEditProps & React_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface InlineEditProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "size" | "onSubmit"> {
+    /** Current value displayed in the chip and used as the starting draft when editing. */
+    value: string;
+    /** Called with the trimmed draft when the user commits an edit (Enter or blur). */
+    onSubmit: (value: string) => void;
+    /** Called when the user cancels an edit with Escape. */
+    onCancel?: () => void;
+    /** Height of the field in pixels. @default "40" */
+    size?: InlineEditSize;
+    /** Whether the field is disabled — prevents entering edit mode. @default false */
+    disabled?: boolean;
+    /** Accessible label for the edit input. @default "Edit" */
+    editLabel?: string;
+    /** Icon rendered before the value in display mode. Hidden when editing. */
+    leftIcon?: React_2.ReactNode;
+    /**
+     * Validator for the trimmed draft on commit. Returning `false` reverts to
+     * the previous value without calling `onSubmit`. @default rejects empty drafts
+     */
+    validate?: (draft: string) => boolean;
+    /** Additional class name applied to the root element. */
+    className?: string;
+}
+
+/** Height of the inline edit field in pixels. */
+export declare type InlineEditSize = "32" | "40";
+
 /**
  * Language icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -2536,6 +2616,8 @@ export declare interface LogoProps extends React_2.HTMLAttributes<HTMLDivElement
     variant?: LogoVariant;
     /** Colour scheme of the logo. @default "fullColour" */
     color?: LogoColor;
+    /** Height of the logo in pixels. @default "32" (or "40" when `variant="icon"`) */
+    size?: LogoSize;
     /**
      * Accessible label for the logo. Required when `type` is `"icon"` and
      * the logo is used inside interactive contexts (links, buttons).
@@ -2545,6 +2627,9 @@ export declare interface LogoProps extends React_2.HTMLAttributes<HTMLDivElement
     "aria-label"?: string;
 }
 
+/** Height of the logo in pixels. Both icon and wordmark scale proportionally. */
+export declare type LogoSize = "16" | "20" | "24" | "32" | "40" | "48" | "64";
+
 /**
  * Logout icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *

package/dist/index.mjs

@@ -183,6 +183,7 @@ import { WifiOffIcon } from "./components/Icons/WifiOffIcon.mjs";
 import { WifiOnIcon } from "./components/Icons/WifiOnIcon.mjs";
 import { WrenchIcon } from "./components/Icons/WrenchIcon.mjs";
 import { InfoBox, InfoBoxContent, InfoBoxTrigger } from "./components/InfoBox/InfoBox.mjs";
+import { InlineEdit } from "./components/InlineEdit/InlineEdit.mjs";
 import { Loader } from "./components/Loader/Loader.mjs";
 import { Logo } from "./components/Logo/Logo.mjs";
 import { MobileStepper } from "./components/MobileStepper/MobileStepper.mjs";
@@ -357,6 +358,7 @@ export {
   InfoBoxTrigger,
   InfoCircleIcon,
   InfoIcon,
+  InlineEdit,
   LanguageIcon,
   LinkIcon,
   Loader,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/useSuppressClickAfterDrag.mjs

@@ -0,0 +1,54 @@
+"use client";
+import * as React from "react";
+const TAP_MOVEMENT_THRESHOLD_PX = 10;
+function useSuppressClickAfterDrag(props) {
+  const tapRef = React.useRef(null);
+  return {
+    ...props,
+    onPointerDown(event) {
+      props.onPointerDown?.(event);
+      if (event.pointerType === "mouse") {
+        tapRef.current = null;
+        return;
+      }
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+      tapRef.current = {
+        pointerId: event.pointerId,
+        x: event.clientX,
+        y: event.clientY,
+        movedPastThreshold: false
+      };
+    },
+    onPointerMove(event) {
+      props.onPointerMove?.(event);
+      const tap = tapRef.current;
+      if (tap === null || event.pointerId !== tap.pointerId || tap.movedPastThreshold) return;
+      const dx = event.clientX - tap.x;
+      const dy = event.clientY - tap.y;
+      if (Math.hypot(dx, dy) > TAP_MOVEMENT_THRESHOLD_PX) {
+        tap.movedPastThreshold = true;
+      }
+    },
+    onPointerCancel(event) {
+      props.onPointerCancel?.(event);
+      const tap = tapRef.current;
+      if (tap !== null && event.pointerId === tap.pointerId) {
+        tapRef.current = null;
+      }
+    },
+    onClick(event) {
+      const tap = tapRef.current;
+      tapRef.current = null;
+      if (tap?.movedPastThreshold) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      props.onClick?.(event);
+    }
+  };
+}
+export {
+  useSuppressClickAfterDrag
+};
+//# sourceMappingURL=useSuppressClickAfterDrag.mjs.map

package/dist/utils/useSuppressClickAfterDrag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSuppressClickAfterDrag.mjs","sources":["../../src/utils/useSuppressClickAfterDrag.ts"],"sourcesContent":["import * as React from \"react\";\n\nconst TAP_MOVEMENT_THRESHOLD_PX = 10;\n\ntype ActiveTap = {\n  pointerId: number;\n  x: number;\n  y: number;\n  movedPastThreshold: boolean;\n};\n\ntype GatedHandlers = {\n  onPointerDown?: React.PointerEventHandler;\n  onPointerMove?: React.PointerEventHandler;\n  onPointerCancel?: React.PointerEventHandler;\n  onClick?: React.MouseEventHandler;\n};\n\n/**\n * Composes the consumer's pointer/click handlers with a touch-drag tracker\n * that suppresses the synthetic click an Android Chrome scroll-drag-end can\n * dispatch on a click-based Radix trigger (Popover / Dialog / Drawer).\n *\n * On touch / pen input, if the press-and-release crosses a movement threshold,\n * the subsequent `click` is preventDefault'd — short-circuiting Radix's own\n * `onOpenToggle` via `composeEventHandlers` — and stopPropagation'd so it\n * doesn't bubble to ancestors. Mouse input passes through unchanged because\n * mouse never triggers the Android scroll-drag bug class.\n *\n * Related: radix-ui/primitives#1912 (DropdownMenu pointerdown variant) and\n * #2702 (DismissableLayer touch dismiss). For the DropdownMenu pointerdown\n * variant see `components/DropdownMenu/DropdownMenu.tsx`.\n */\nexport function useSuppressClickAfterDrag<P extends GatedHandlers>(props: P): P {\n  const tapRef = React.useRef<ActiveTap | null>(null);\n\n  return {\n    ...props,\n    onPointerDown(event) {\n      props.onPointerDown?.(event);\n      if (event.pointerType === \"mouse\") {\n        tapRef.current = null;\n        return;\n      }\n      // Keep pointermove on this element if the finger drifts off.\n      // Optional because jsdom (used in tests) doesn't implement it.\n      event.currentTarget.setPointerCapture?.(event.pointerId);\n      tapRef.current = {\n        pointerId: event.pointerId,\n        x: event.clientX,\n        y: event.clientY,\n        movedPastThreshold: false,\n      };\n    },\n    onPointerMove(event) {\n      props.onPointerMove?.(event);\n      const tap = tapRef.current;\n      if (tap === null || event.pointerId !== tap.pointerId || tap.movedPastThreshold) return;\n      const dx = event.clientX - tap.x;\n      const dy = event.clientY - tap.y;\n      if (Math.hypot(dx, dy) > TAP_MOVEMENT_THRESHOLD_PX) {\n        tap.movedPastThreshold = true;\n      }\n    },\n    onPointerCancel(event) {\n      props.onPointerCancel?.(event);\n      const tap = tapRef.current;\n      if (tap !== null && event.pointerId === tap.pointerId) {\n        tapRef.current = null;\n      }\n    },\n    onClick(event) {\n      const tap = tapRef.current;\n      tapRef.current = null;\n      if (tap?.movedPastThreshold) {\n        // preventDefault stops Radix's onClick → onOpenToggle via\n        // composeEventHandlers. stopPropagation prevents the synthetic click\n        // from bubbling to ancestor click handlers.\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n      props.onClick?.(event);\n    },\n  };\n}\n"],"names":[],"mappings":";;AAEA,MAAM,4BAA4B;AA+B3B,SAAS,0BAAmD,OAAa;AAC9E,QAAM,SAAS,MAAM,OAAyB,IAAI;AAElD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,cAAc,OAAO;AACnB,YAAM,gBAAgB,KAAK;AAC3B,UAAI,MAAM,gBAAgB,SAAS;AACjC,eAAO,UAAU;AACjB;AAAA,MACF;AAGA,YAAM,cAAc,oBAAoB,MAAM,SAAS;AACvD,aAAO,UAAU;AAAA,QACf,WAAW,MAAM;AAAA,QACjB,GAAG,MAAM;AAAA,QACT,GAAG,MAAM;AAAA,QACT,oBAAoB;AAAA,MAAA;AAAA,IAExB;AAAA,IACA,cAAc,OAAO;AACnB,YAAM,gBAAgB,KAAK;AAC3B,YAAM,MAAM,OAAO;AACnB,UAAI,QAAQ,QAAQ,MAAM,cAAc,IAAI,aAAa,IAAI,mBAAoB;AACjF,YAAM,KAAK,MAAM,UAAU,IAAI;AAC/B,YAAM,KAAK,MAAM,UAAU,IAAI;AAC/B,UAAI,KAAK,MAAM,IAAI,EAAE,IAAI,2BAA2B;AAClD,YAAI,qBAAqB;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,gBAAgB,OAAO;AACrB,YAAM,kBAAkB,KAAK;AAC7B,YAAM,MAAM,OAAO;AACnB,UAAI,QAAQ,QAAQ,MAAM,cAAc,IAAI,WAAW;AACrD,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AAAA,IACA,QAAQ,OAAO;AACb,YAAM,MAAM,OAAO;AACnB,aAAO,UAAU;AACjB,UAAI,KAAK,oBAAoB;AAI3B,cAAM,eAAA;AACN,cAAM,gBAAA;AACN;AAAA,MACF;AACA,YAAM,UAAU,KAAK;AAAA,IACvB;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "2.14.3",
+  "version": "2.15.1",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -105,6 +105,7 @@
     "@radix-ui/react-tabs": "1.1.13",
     "@radix-ui/react-toast": "1.2.15",
     "@radix-ui/react-tooltip": "1.2.8",
+    "@radix-ui/react-use-controllable-state": "1.2.2",
     "clsx": "2.1.1",
     "tailwind-merge": "3.4.0"
   },
@@ -140,7 +141,7 @@
     "jsdom": "27.4.0",
     "lint-staged": "16.2.7",
     "playwright": "^1.58.1",
-    "postcss": "8.5.6",
+    "postcss": "8.5.12",
     "react": "19.2.3",
     "react-day-picker": "9.13.1",
     "react-dom": "19.2.3",
@@ -161,13 +162,11 @@
     "overrides": {
       "lodash": ">=4.18.0",
       "lodash-es": ">=4.18.0",
-      "@isaacs/brace-expansion": ">=5.0.1",
-      "qs": ">=6.14.2",
       "minimatch": ">=10.2.3",
-      "rollup": ">=4.59.0",
-      "storybook": ">=10.2.10",
-      "picomatch": ">=4.0.4",
-      "micromatch>picomatch": "2.3.2"
+      "ajv": ">=8.18.0",
+      "brace-expansion": ">=5.0.5",
+      "yaml": ">=2.8.3",
+      "postcss": ">=8.5.10"
     }
   },
   "size-limit": [