@fanvue/ui 3.13.0 → 3.14.1

package/dist/components/Icons/ListViewIcon.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { BaseIcon } from "./BaseIcon.mjs";
+const VARIANTS = {
+  16: {
+    outlined: [
+      {
+        d: "M13.267 9H2.733c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.534c1 0 1.4-.427 1.4-1.487v-2.693c0-1.06-.4-1.487-1.4-1.487m0-7.667H2.733c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.534c1 0 1.4-.427 1.4-1.487V2.82c0-1.06-.4-1.487-1.4-1.487"
+      }
+    ]
+  },
+  24: {
+    outlined: [
+      {
+        d: "M19.9 13.5H4.1c-1.5 0-2.1.64-2.1 2.23v4.04C2 21.36 2.6 22 4.1 22h15.8c1.5 0 2.1-.64 2.1-2.23v-4.04c0-1.59-.6-2.23-2.1-2.23m0-11.5H4.1C2.6 2 2 2.64 2 4.23v4.04c0 1.59.6 2.23 2.1 2.23h15.8c1.5 0 2.1-.64 2.1-2.23V4.23C22 2.64 21.4 2 19.9 2"
+      }
+    ]
+  },
+  32: {
+    outlined: [
+      {
+        d: "M26.533 18H5.467c-2 0-2.8.853-2.8 2.973v5.387c0 2.12.8 2.973 2.8 2.973h21.066c2 0 2.8-.853 2.8-2.973v-5.387c0-2.12-.8-2.973-2.8-2.973m0-15.333H5.467c-2 0-2.8.853-2.8 2.973v5.387c0 2.12.8 2.973 2.8 2.973h21.066c2 0 2.8-.854 2.8-2.973V5.64c0-2.12-.8-2.973-2.8-2.973"
+      }
+    ]
+  }
+};
+const ListViewIcon = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(BaseIcon, { ref, variants: VARIANTS, ...props }));
+ListViewIcon.displayName = "ListViewIcon";
+export {
+  ListViewIcon
+};
+//# sourceMappingURL=ListViewIcon.mjs.map

package/dist/components/Icons/ListViewIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListViewIcon.mjs","sources":["../../../src/components/Icons/ListViewIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n  16: {\n    outlined: [\n      {\n        d: \"M13.267 9H2.733c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.534c1 0 1.4-.427 1.4-1.487v-2.693c0-1.06-.4-1.487-1.4-1.487m0-7.667H2.733c-1 0-1.4.427-1.4 1.487v2.693c0 1.06.4 1.487 1.4 1.487h10.534c1 0 1.4-.427 1.4-1.487V2.82c0-1.06-.4-1.487-1.4-1.487\",\n      },\n    ],\n  },\n  24: {\n    outlined: [\n      {\n        d: \"M19.9 13.5H4.1c-1.5 0-2.1.64-2.1 2.23v4.04C2 21.36 2.6 22 4.1 22h15.8c1.5 0 2.1-.64 2.1-2.23v-4.04c0-1.59-.6-2.23-2.1-2.23m0-11.5H4.1C2.6 2 2 2.64 2 4.23v4.04c0 1.59.6 2.23 2.1 2.23h15.8c1.5 0 2.1-.64 2.1-2.23V4.23C22 2.64 21.4 2 19.9 2\",\n      },\n    ],\n  },\n  32: {\n    outlined: [\n      {\n        d: \"M26.533 18H5.467c-2 0-2.8.853-2.8 2.973v5.387c0 2.12.8 2.973 2.8 2.973h21.066c2 0 2.8-.853 2.8-2.973v-5.387c0-2.12-.8-2.973-2.8-2.973m0-15.333H5.467c-2 0-2.8.853-2.8 2.973v5.387c0 2.12.8 2.973 2.8 2.973h21.066c2 0 2.8-.854 2.8-2.973V5.64c0-2.12-.8-2.973-2.8-2.973\",\n      },\n    ],\n  },\n};\n\n/** Props for {@link ListViewIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type ListViewIconProps = BaseIconProps;\n\n/**\n * List view icon. Renders at sizes 16, 24, or 32 px.\n *\n * @example\n * ```tsx\n * <ListViewIcon size={24} />\n * ```\n */\nexport const ListViewIcon = React.forwardRef<SVGSVGElement, ListViewIconProps>((props, ref) => (\n  <BaseIcon ref={ref} variants={VARIANTS} {...props} />\n));\n\nListViewIcon.displayName = \"ListViewIcon\";\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAaO,MAAM,eAAe,MAAM,WAA6C,CAAC,OAAO,QACrF,oBAAC,UAAA,EAAS,KAAU,UAAU,UAAW,GAAG,OAAO,CACpD;AAED,aAAa,cAAc;"}

package/dist/components/SegmentedControl/SegmentedControl.mjs

@@ -16,11 +16,47 @@ function warnMissingAccessibleName(ariaLabel, ariaLabelledBy) {
     }
   }
 }
+function warnMissingOptionAccessibleName(options) {
+  if (process.env.NODE_ENV !== "production") {
+    for (const option of options) {
+      if (option.icon && !option.label?.trim()) {
+        console.warn(
+          `SegmentedControl: icon-only segment "${option.value}" is missing a non-empty \`label\` to use as its accessible name.`
+        );
+      }
+    }
+  }
+}
+function getSegmentClassName({
+  appearance,
+  size,
+  variant,
+  isSelected,
+  disabled
+}) {
+  return cn(
+    "relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full",
+    "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
+    "focus-visible:shadow-focus-ring focus-visible:outline-none",
+    variant === "fill" ? "flex-1" : "shrink-0",
+    appearance === "plain" ? cn(
+      // Padding + negative margin enlarge the hit target without changing the
+      // visual footprint, which must stay glyph-only to match the design.
+      "-m-1 p-1",
+      isSelected ? "text-icons-primary" : "text-icons-tertiary hover:text-icons-primary"
+    ) : cn(
+      sizeClasses[size],
+      isSelected ? "bg-buttons-primary-default text-content-primary-inverted shadow-sm" : "text-content-primary hover:bg-buttons-switch-hover"
+    ),
+    disabled && "pointer-events-none"
+  );
+}
 const SegmentedControl = React.forwardRef(
   ({
     className,
     size = "32",
     variant = "hug",
+    appearance = "pill",
     options,
     value: controlledValue,
     defaultValue,
@@ -29,6 +65,7 @@ const SegmentedControl = React.forwardRef(
     ...props
   }, ref) => {
     warnMissingAccessibleName(props["aria-label"], props["aria-labelledby"]);
+    warnMissingOptionAccessibleName(options);
     const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0]?.value);
     const isControlled = controlledValue !== void 0;
     const currentValue = isControlled ? controlledValue : internalValue;
@@ -55,8 +92,9 @@ const SegmentedControl = React.forwardRef(
         ref,
         role: "radiogroup",
         className: cn(
-          "relative items-center rounded-full bg-surface-tertiary p-1",
+          "relative items-center rounded-full",
           variant === "fill" ? "flex w-full" : "inline-flex",
+          appearance === "plain" ? "gap-2" : "bg-surface-tertiary p-1",
           disabled && "cursor-not-allowed opacity-50",
           className
         ),
@@ -76,18 +114,11 @@ const SegmentedControl = React.forwardRef(
                 "aria-checked": isSelected,
                 tabIndex: isSelected || !anySelected && index === 0 ? 0 : -1,
                 disabled,
+                "aria-label": option.icon ? option.label : void 0,
                 onClick: () => handleSelect(option.value),
                 onKeyDown: (e) => handleKeyDown(e, index),
-                className: cn(
-                  "relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full",
-                  "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
-                  "focus-visible:shadow-focus-ring focus-visible:outline-none",
-                  variant === "fill" ? "flex-1" : "shrink-0",
-                  sizeClasses[size],
-                  isSelected ? "bg-buttons-primary-default text-content-primary-inverted shadow-sm" : "text-content-primary hover:bg-buttons-switch-hover",
-                  disabled && "pointer-events-none"
-                ),
-                children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label })
+                className: getSegmentClassName({ appearance, size, variant, isSelected, disabled }),
+                children: option.icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center justify-center", "aria-hidden": "true", children: option.icon }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label })
               },
               option.value
             )

package/dist/components/SegmentedControl/SegmentedControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the segmented control in pixels. */\nexport type SegmentedControlSize = \"32\" | \"40\" | \"48\";\n\n/**\n * Segment layout.\n * - `\"hug\"`: each segment is sized to its content.\n * - `\"fill\"`: the control spans the full width of its container and each segment grows equally.\n */\nexport type SegmentedControlVariant = \"hug\" | \"fill\";\n\n/** Describes one selectable segment. */\nexport interface SegmentedControlOption {\n  /** Display label for the segment. */\n  label: string;\n  /** Value identifier returned via `onChange`. */\n  value: string;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Height of the control in pixels. @default \"32\" */\n  size?: SegmentedControlSize;\n  /** Segment layout. @default \"hug\" */\n  variant?: SegmentedControlVariant;\n  /** The selectable segments. Designed for two or three mutually exclusive options. */\n  options: SegmentedControlOption[];\n  /** Currently selected value (controlled). */\n  value?: string;\n  /** Initially selected value (uncontrolled). Defaults to the first option. */\n  defaultValue?: string;\n  /** Callback fired when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the control is disabled. @default false */\n  disabled?: boolean;\n}\n\n/** Padding and typography per size. Combined with the container's `p-1` these hit the 32/40/48px heights. */\nconst sizeClasses: Record<SegmentedControlSize, string> = {\n  \"32\": \"px-2 py-1 typography-description-12px-semibold\",\n  \"40\": \"px-3 py-1.75 typography-body-small-14px-semibold\",\n  \"48\": \"px-4 py-2 typography-body-default-16px-semibold\",\n};\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"SegmentedControl: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A compact selector for choosing between two or three mutually exclusive\n * options where the choice affects the content immediately below it. Use\n * instead of tabs when the options are more like settings or filters than\n * navigation, such as toggling a list/grid view or a monthly/annual price.\n *\n * Rendered as a `radiogroup` with roving-tabindex keyboard navigation. Supports\n * both controlled and uncontrolled usage.\n *\n * @example\n * ```tsx\n * <SegmentedControl\n *   options={[\n *     { label: \"Net\", value: \"net\" },\n *     { label: \"Gross\", value: \"gross\" },\n *   ]}\n *   value={amount}\n *   onChange={setAmount}\n *   aria-label=\"Amount type\"\n * />\n * ```\n */\nexport const SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  (\n    {\n      className,\n      size = \"32\",\n      variant = \"hug\",\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0]?.value);\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const anySelected = options.some((o) => o.value === currentValue);\n    const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled || optionValue === currentValue) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const nextIndex =\n        e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n          ? (index + 1) % options.length\n          : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n            ? (index - 1 + options.length) % options.length\n            : null;\n      if (nextIndex === null) return;\n      e.preventDefault();\n      const nextOption = options[nextIndex] as SegmentedControlOption;\n      handleSelect(nextOption.value);\n      buttonRefs.current[nextIndex]?.focus();\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        className={cn(\n          \"relative items-center rounded-full bg-surface-tertiary p-1\",\n          variant === \"fill\" ? \"flex w-full\" : \"inline-flex\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        {options.map((option, index) => {\n          const isSelected = currentValue === option.value;\n          return (\n            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n            <button\n              key={option.value}\n              ref={(el) => {\n                buttonRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              tabIndex={isSelected || (!anySelected && index === 0) ? 0 : -1}\n              disabled={disabled}\n              onClick={() => handleSelect(option.value)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              className={cn(\n                \"relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full\",\n                \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n                variant === \"fill\" ? \"flex-1\" : \"shrink-0\",\n                sizeClasses[size],\n                isSelected\n                  ? \"bg-buttons-primary-default text-content-primary-inverted shadow-sm\"\n                  : \"text-content-primary hover:bg-buttons-switch-hover\",\n                disabled && \"pointer-events-none\",\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSegmentedControl.displayName = \"SegmentedControl\";\n"],"names":[],"mappings":";;;;AAwCA,MAAM,cAAoD;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,SAAS,0BAA0B,WAAoB,gBAAyB;AAC9E,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,aAAa,CAAC,gBAAgB;AACjC,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AACF;AAwBO,MAAM,mBAAmB,MAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,GAEL,QACG;AACH,8BAA0B,MAAM,YAAY,GAAG,MAAM,iBAAiB,CAAC;AAGvE,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,gBAAgB,QAAQ,CAAC,GAAG,KAAK;AAC1F,UAAM,eAAe,oBAAoB;AACzC,UAAM,eAAe,eAAe,kBAAkB;AACtD,UAAM,cAAc,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,YAAY;AAChE,UAAM,aAAa,MAAM,OAAqC,EAAE;AAEhE,UAAM,eAAe,CAAC,gBAAwB;AAC5C,UAAI,YAAY,gBAAgB,aAAc;AAC9C,UAAI,CAAC,cAAc;AACjB,yBAAiB,WAAW;AAAA,MAC9B;AACA,iBAAW,WAAW;AAAA,IACxB;AAEA,UAAM,gBAAgB,CAAC,GAAwB,UAAkB;AAC/D,YAAM,YACJ,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,eAC/B,QAAQ,KAAK,QAAQ,SACtB,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAChC,QAAQ,IAAI,QAAQ,UAAU,QAAQ,SACvC;AACR,UAAI,cAAc,KAAM;AACxB,QAAE,eAAA;AACF,YAAM,aAAa,QAAQ,SAAS;AACpC,mBAAa,WAAW,KAAK;AAC7B,iBAAW,QAAQ,SAAS,GAAG,MAAA;AAAA,IACjC;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,YAAY,SAAS,gBAAgB;AAAA,UACrC,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,aAAa,iBAAiB,OAAO;AAC3C;AAAA;AAAA,YAEE;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,KAAK,CAAC,OAAO;AACX,6BAAW,QAAQ,KAAK,IAAI;AAAA,gBAC9B;AAAA,gBACA,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,gBAAc;AAAA,gBACd,UAAU,cAAe,CAAC,eAAe,UAAU,IAAK,IAAI;AAAA,gBAC5D;AAAA,gBACA,SAAS,MAAM,aAAa,OAAO,KAAK;AAAA,gBACxC,WAAW,CAAC,MAAM,cAAc,GAAG,KAAK;AAAA,gBACxC,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,YAAY,SAAS,WAAW;AAAA,kBAChC,YAAY,IAAI;AAAA,kBAChB,aACI,uEACA;AAAA,kBACJ,YAAY;AAAA,gBAAA;AAAA,gBAGd,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,iBAAO,MAAA,CAAM;AAAA,cAAA;AAAA,cAvB5C,OAAO;AAAA,YAAA;AAAA;AAAA,QA0BlB,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,iBAAiB,cAAc;"}
+{"version":3,"file":"SegmentedControl.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the segmented control in pixels. */\nexport type SegmentedControlSize = \"32\" | \"40\" | \"48\";\n\n/**\n * Segment layout.\n * - `\"hug\"`: each segment is sized to its content.\n * - `\"fill\"`: the control spans the full width of its container and each segment grows equally.\n */\nexport type SegmentedControlVariant = \"hug\" | \"fill\";\n\n/**\n * Visual style of the control.\n * - `\"pill\"`: the container has a muted background and the selected segment shows a filled pill (default).\n * - `\"plain\"`: no container or selected-pill background; segments are bare content and selection is\n *   communicated by color alone. Designed for icon-only toggles (e.g. a list/grid view switch).\n */\nexport type SegmentedControlAppearance = \"pill\" | \"plain\";\n\n/** Describes one selectable segment. */\nexport interface SegmentedControlOption {\n  /**\n   * Display label for the segment. When `icon` is provided, the segment renders icon-only and\n   * this value is used as its accessible name (applied as `aria-label`) instead of visible text.\n   */\n  label: string;\n  /** Value identifier returned via `onChange`. */\n  value: string;\n  /**\n   * Icon to render instead of the visible label. When set, the segment renders icon-only and\n   * `label` becomes required as its accessible name — it is applied as `aria-label` and no\n   * visible text is rendered.\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Height of the control in pixels. @default \"32\" */\n  size?: SegmentedControlSize;\n  /** Segment layout. @default \"hug\" */\n  variant?: SegmentedControlVariant;\n  /** Visual style of the control. @default \"pill\" */\n  appearance?: SegmentedControlAppearance;\n  /** The selectable segments. Designed for two or three mutually exclusive options. */\n  options: SegmentedControlOption[];\n  /** Currently selected value (controlled). */\n  value?: string;\n  /** Initially selected value (uncontrolled). Defaults to the first option. */\n  defaultValue?: string;\n  /** Callback fired when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the control is disabled. @default false */\n  disabled?: boolean;\n}\n\n/** Padding and typography per size. Combined with the container's `p-1` these hit the 32/40/48px heights. */\nconst sizeClasses: Record<SegmentedControlSize, string> = {\n  \"32\": \"px-2 py-1 typography-description-12px-semibold\",\n  \"40\": \"px-3 py-1.75 typography-body-small-14px-semibold\",\n  \"48\": \"px-4 py-2 typography-body-default-16px-semibold\",\n};\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"SegmentedControl: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction warnMissingOptionAccessibleName(options: SegmentedControlOption[]) {\n  if (process.env.NODE_ENV !== \"production\") {\n    for (const option of options) {\n      if (option.icon && !option.label?.trim()) {\n        console.warn(\n          `SegmentedControl: icon-only segment \"${option.value}\" is missing a non-empty \\`label\\` to use as its accessible name.`,\n        );\n      }\n    }\n  }\n}\n\nfunction getSegmentClassName({\n  appearance,\n  size,\n  variant,\n  isSelected,\n  disabled,\n}: {\n  appearance: SegmentedControlAppearance;\n  size: SegmentedControlSize;\n  variant: SegmentedControlVariant;\n  isSelected: boolean;\n  disabled: boolean;\n}) {\n  return cn(\n    \"relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full\",\n    \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n    \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n    variant === \"fill\" ? \"flex-1\" : \"shrink-0\",\n    appearance === \"plain\"\n      ? cn(\n          // Padding + negative margin enlarge the hit target without changing the\n          // visual footprint, which must stay glyph-only to match the design.\n          \"-m-1 p-1\",\n          isSelected ? \"text-icons-primary\" : \"text-icons-tertiary hover:text-icons-primary\",\n        )\n      : cn(\n          sizeClasses[size],\n          isSelected\n            ? \"bg-buttons-primary-default text-content-primary-inverted shadow-sm\"\n            : \"text-content-primary hover:bg-buttons-switch-hover\",\n        ),\n    disabled && \"pointer-events-none\",\n  );\n}\n\n/**\n * A compact selector for choosing between two or three mutually exclusive\n * options where the choice affects the content immediately below it. Use\n * instead of tabs when the options are more like settings or filters than\n * navigation, such as toggling a list/grid view or a monthly/annual price.\n *\n * Rendered as a `radiogroup` with roving-tabindex keyboard navigation. Supports\n * both controlled and uncontrolled usage.\n *\n * @example\n * ```tsx\n * <SegmentedControl\n *   options={[\n *     { label: \"Net\", value: \"net\" },\n *     { label: \"Gross\", value: \"gross\" },\n *   ]}\n *   value={amount}\n *   onChange={setAmount}\n *   aria-label=\"Amount type\"\n * />\n * ```\n *\n * @example Icon-only segments (e.g. a list/grid view toggle)\n * ```tsx\n * <SegmentedControl\n *   appearance=\"plain\"\n *   options={[\n *     { label: \"List view\", value: \"list\", icon: <ListViewIcon size={16} /> },\n *     { label: \"Grid view\", value: \"grid\", icon: <GridViewIcon size={16} /> },\n *   ]}\n *   value={view}\n *   onChange={setView}\n *   aria-label=\"View\"\n * />\n * ```\n */\nexport const SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  (\n    {\n      className,\n      size = \"32\",\n      variant = \"hug\",\n      appearance = \"pill\",\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n    warnMissingOptionAccessibleName(options);\n\n    // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0]?.value);\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const anySelected = options.some((o) => o.value === currentValue);\n    const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled || optionValue === currentValue) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const nextIndex =\n        e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n          ? (index + 1) % options.length\n          : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n            ? (index - 1 + options.length) % options.length\n            : null;\n      if (nextIndex === null) return;\n      e.preventDefault();\n      const nextOption = options[nextIndex] as SegmentedControlOption;\n      handleSelect(nextOption.value);\n      buttonRefs.current[nextIndex]?.focus();\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        className={cn(\n          \"relative items-center rounded-full\",\n          variant === \"fill\" ? \"flex w-full\" : \"inline-flex\",\n          appearance === \"plain\" ? \"gap-2\" : \"bg-surface-tertiary p-1\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        {options.map((option, index) => {\n          const isSelected = currentValue === option.value;\n          return (\n            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n            <button\n              key={option.value}\n              ref={(el) => {\n                buttonRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              tabIndex={isSelected || (!anySelected && index === 0) ? 0 : -1}\n              disabled={disabled}\n              aria-label={option.icon ? option.label : undefined}\n              onClick={() => handleSelect(option.value)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              className={getSegmentClassName({ appearance, size, variant, isSelected, disabled })}\n            >\n              {option.icon ? (\n                <span className=\"flex shrink-0 items-center justify-center\" aria-hidden=\"true\">\n                  {option.icon}\n                </span>\n              ) : (\n                <span className=\"min-w-0 truncate\">{option.label}</span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSegmentedControl.displayName = \"SegmentedControl\";\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -332,6 +332,54 @@ export declare interface AudioFileRejection {
     errors: AudioValidationError[];
 }
 
+/**
+ * A compact playback control for a single audio clip: a play/pause toggle, a
+ * static amplitude waveform that doubles as a seek scrubber, and elapsed/total
+ * timestamps. Designed to sit as an overlay on media thumbnails (Vault cards)
+ * as well as inline rows (the AI Voice Message "Generated Audio" row).
+ *
+ * The waveform is seeded from the decoded audio when possible, falling back
+ * to a deterministic (not random) placeholder derived from `src` so the
+ * result is stable across renders, SSR, and Chromatic snapshots.
+ *
+ * @example
+ * ```tsx
+ * <AudioPlayer src="https://example.com/clip.mp3" duration={5} />
+ * ```
+ */
+export declare const AudioPlayer: React_2.ForwardRefExoticComponent<AudioPlayerProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface AudioPlayerProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "onPlay" | "onPause" | "onEnded"> {
+    /** URL of the audio file to play. */
+    src: string;
+    /**
+     * Total duration in seconds, used to render the timestamp before the
+     * media's own metadata has loaded (and as a fallback if it never does).
+     */
+    duration?: number;
+    /**
+     * Whether playback is active (controlled). Note: once `onEnded` fires, the
+     * browser has already stopped native playback. To loop or replay under
+     * controlled usage, toggle this prop `false` then `true` (rather than
+     * leaving it `true`) — the sync effect only calls `play()` again when this
+     * value actually changes.
+     */
+    playing?: boolean;
+    /** Initial playback state (uncontrolled). @default false */
+    defaultPlaying?: boolean;
+    /** Called when playback starts. */
+    onPlay?: () => void;
+    /** Called when playback is paused. */
+    onPause?: () => void;
+    /** Called when playback reaches the end of the media. */
+    onEnded?: () => void;
+    /** Height of the player row, in pixels. @default "40" */
+    size?: AudioPlayerSize;
+}
+
+/** Height of the audio player row, in pixels. Matches both the Vault card overlay and the "Generated Audio" modal row in Figma — both use an identical 32px play button and 40px row. */
+export declare type AudioPlayerSize = "40";
+
 /**
  * Audio file upload with drag-and-drop and optional in-browser recording.
  * Supports file validation, multiple files, and real-time waveform visualization during recording.
@@ -1812,6 +1860,8 @@ export declare interface DialogContentProps extends React_2.ComponentPropsWithou
      * @default "sheet"
      */
     mobilePresentation?: "sheet" | "card";
+    /** Props forwarded to the default {@link DialogOverlay} when `overlay` is `true`. */
+    overlayProps?: DialogOverlayProps;
 }
 
 /** Accessible description for the dialog. Rendered as secondary text. */
@@ -2603,6 +2653,30 @@ export declare const FlashIcon: React_2.ForwardRefExoticComponent<BaseIconProps
 /** Props for {@link FlashIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type FlashIconProps = BaseIconProps;
 
+/**
+ * A circular, elevated button for the single most important action on a
+ * screen (e.g. creating new content). Unlike {@link IconButton}, it always
+ * floats above page content with a drop shadow and is meant to be
+ * positioned by the consumer (e.g. `fixed bottom-6 right-6`) rather than
+ * inline in a toolbar or action row.
+ *
+ * Requires an accessible name — pass `aria-label` or `aria-labelledby`, since
+ * the icon alone doesn't convey the action to screen readers.
+ *
+ * @example
+ * ```tsx
+ * <FloatingActionButton aria-label="Add content" className="fixed right-6 bottom-6">
+ *   <AddIcon />
+ * </FloatingActionButton>
+ * ```
+ */
+export declare const FloatingActionButton: React_2.ForwardRefExoticComponent<FloatingActionButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface FloatingActionButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Icon to render inside the button. Pass an icon component (e.g. `<AddIcon />`). */
+    children: React_2.ReactNode;
+}
+
 /**
  * Folder icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -2705,6 +2779,19 @@ export declare const GoogleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAt
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * Grid view icon. Renders at sizes 16, 24, or 32 px.
+ *
+ * @example
+ * ```tsx
+ * <GridViewIcon size={24} />
+ * ```
+ */
+export declare const GridViewIcon: React_2.ForwardRefExoticComponent<BaseIconProps & React_2.RefAttributes<SVGSVGElement>>;
+
+/** Props for {@link GridViewIcon}. See {@link BaseIconProps} for the shared shape. */
+export declare type GridViewIconProps = BaseIconProps;
+
 /**
  * Health icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -3054,6 +3141,19 @@ export declare type LinkSize = "16" | "14";
 /** Visual style variant of the link. */
 export declare type LinkVariant = "primary" | "brand";
 
+/**
+ * List view icon. Renders at sizes 16, 24, or 32 px.
+ *
+ * @example
+ * ```tsx
+ * <ListViewIcon size={24} />
+ * ```
+ */
+export declare const ListViewIcon: React_2.ForwardRefExoticComponent<BaseIconProps & React_2.RefAttributes<SVGSVGElement>>;
+
+/** Props for {@link ListViewIcon}. See {@link BaseIconProps} for the shared shape. */
+export declare type ListViewIconProps = BaseIconProps;
+
 /**
  * A layout-aware loading indicator that renders a centered `SpinnerIcon` inside
  * a relatively-positioned container. Drop-in replacement for the Olympus `Loader`.
@@ -4071,15 +4171,46 @@ export declare type SearchIconProps = BaseIconProps;
  *   aria-label="Amount type"
  * />
  * ```
+ *
+ * @example Icon-only segments (e.g. a list/grid view toggle)
+ * ```tsx
+ * <SegmentedControl
+ *   appearance="plain"
+ *   options={[
+ *     { label: "List view", value: "list", icon: <ListViewIcon size={16} /> },
+ *     { label: "Grid view", value: "grid", icon: <GridViewIcon size={16} /> },
+ *   ]}
+ *   value={view}
+ *   onChange={setView}
+ *   aria-label="View"
+ * />
+ * ```
  */
 export declare const SegmentedControl: React_2.ForwardRefExoticComponent<SegmentedControlProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Visual style of the control.
+ * - `"pill"`: the container has a muted background and the selected segment shows a filled pill (default).
+ * - `"plain"`: no container or selected-pill background; segments are bare content and selection is
+ *   communicated by color alone. Designed for icon-only toggles (e.g. a list/grid view switch).
+ */
+export declare type SegmentedControlAppearance = "pill" | "plain";
+
 /** Describes one selectable segment. */
 export declare interface SegmentedControlOption {
-    /** Display label for the segment. */
+    /**
+     * Display label for the segment. When `icon` is provided, the segment renders icon-only and
+     * this value is used as its accessible name (applied as `aria-label`) instead of visible text.
+     */
     label: string;
     /** Value identifier returned via `onChange`. */
     value: string;
+    /**
+     * Icon to render instead of the visible label. When set, the segment renders icon-only and
+     * `label` becomes required as its accessible name — it is applied as `aria-label` and no
+     * visible text is rendered.
+     */
+    icon?: React_2.ReactNode;
 }
 
 export declare interface SegmentedControlProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "onChange"> {
@@ -4087,6 +4218,8 @@ export declare interface SegmentedControlProps extends Omit<React_2.HTMLAttribut
     size?: SegmentedControlSize;
     /** Segment layout. @default "hug" */
     variant?: SegmentedControlVariant;
+    /** Visual style of the control. @default "pill" */
+    appearance?: SegmentedControlAppearance;
     /** The selectable segments. Designed for two or three mutually exclusive options. */
     options: SegmentedControlOption[];
     /** Currently selected value (controlled). */

package/dist/index.mjs

@@ -5,6 +5,7 @@ import { AccordionContent } from "./components/Accordion/AccordionContent.mjs";
 import { AccordionItem } from "./components/Accordion/AccordionItem.mjs";
 import { AccordionTrigger } from "./components/Accordion/AccordionTrigger.mjs";
 import { Alert } from "./components/Alert/Alert.mjs";
+import { AudioPlayer } from "./components/AudioPlayer/AudioPlayer.mjs";
 import { AudioUpload } from "./components/AudioUpload/AudioUpload.mjs";
 import { useAudioRecorder } from "./components/AudioUpload/useAudioRecorder.mjs";
 import { Autocomplete } from "./components/Autocomplete/Autocomplete.mjs";
@@ -30,6 +31,7 @@ import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, Dr
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./components/DropdownMenu/DropdownMenu.mjs";
 import { EmptyState } from "./components/EmptyState/EmptyState.mjs";
 import { FanFollowerCount } from "./components/FanFollowerCount/FanFollowerCount.mjs";
+import { FloatingActionButton } from "./components/FloatingActionButton/FloatingActionButton.mjs";
 import { IconButton } from "./components/IconButton/IconButton.mjs";
 import { AddIcon } from "./components/Icons/AddIcon.mjs";
 import { AffiliatesIcon } from "./components/Icons/AffiliatesIcon.mjs";
@@ -103,6 +105,7 @@ import { GenderIcon } from "./components/Icons/GenderIcon.mjs";
 import { GifIcon } from "./components/Icons/GifIcon.mjs";
 import { GiftIcon } from "./components/Icons/GiftIcon.mjs";
 import { GoogleIcon } from "./components/Icons/GoogleIcon.mjs";
+import { GridViewIcon } from "./components/Icons/GridViewIcon.mjs";
 import { HealthIcon } from "./components/Icons/HealthIcon.mjs";
 import { HeartIcon } from "./components/Icons/HeartIcon.mjs";
 import { HelpIcon } from "./components/Icons/HelpIcon.mjs";
@@ -115,6 +118,7 @@ import { InfoCircleIcon } from "./components/Icons/InfoCircleIcon.mjs";
 import { InfoIcon } from "./components/Icons/InfoIcon.mjs";
 import { LanguageIcon } from "./components/Icons/LanguageIcon.mjs";
 import { LinkIcon } from "./components/Icons/LinkIcon.mjs";
+import { ListViewIcon } from "./components/Icons/ListViewIcon.mjs";
 import { LocationIcon } from "./components/Icons/LocationIcon.mjs";
 import { LockerIcon } from "./components/Icons/LockerIcon.mjs";
 import { LockerOffIcon } from "./components/Icons/LockerOffIcon.mjs";
@@ -262,6 +266,7 @@ export {
   ArrowUpIcon,
   ArrowUpRightIcon,
   AtSignIcon,
+  AudioPlayer,
   AudioUpload,
   AutoMessageIcon,
   Autocomplete,
@@ -375,6 +380,7 @@ export {
   FlagIcon,
   FlameIcon,
   FlashIcon,
+  FloatingActionButton,
   FolderIcon,
   ForwardIcon,
   GalleryIcon,
@@ -383,6 +389,7 @@ export {
   GifIcon,
   GiftIcon,
   GoogleIcon,
+  GridViewIcon,
   HealthIcon,
   HeartIcon,
   HelpIcon,
@@ -401,6 +408,7 @@ export {
   LanguageIcon,
   Link,
   LinkIcon,
+  ListViewIcon,
   Loader,
   LocationIcon,
   LockerIcon,

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/styles/base.css

@@ -136,6 +136,21 @@
   animation: accordion-collapse 200ms ease-out;
 }
 
+/*
+ * `dvh` reflects the browser chrome actually on screen (e.g. iOS in-app browsers
+ * like Instagram, which report a `vh` taller than what's visible once chrome +
+ * home-indicator inset are subtracted). `dvh` support is what's missing on older
+ * engines, not `vh`, so the fallback must be declared second: an unsupported unit
+ * makes only that declaration invalid, and the browser keeps the prior valid one.
+ * This has to stay a single CSS rule with two declarations — two separate Tailwind
+ * utility classes (`max-h-[85vh] max-h-[85dvh]`) share one `tailwind-merge` conflict
+ * group, so `cn()`/`twMerge` would drop the `vh` one and destroy the fallback.
+ */
+@utility dialog-max-h-dynamic {
+  max-height: 85vh;
+  max-height: 85dvh;
+}
+
 /* Static tokens not in Figma — manually maintained for now */
 @utility typography-medium-caption-xs {
   font-size: 0.625rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "3.13.0",
+  "version": "3.14.1",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",