@flamingo-stack/openframe-frontend-core 0.0.222 → 0.0.223

package/src/components/ui/actions-menu.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { Check } from "lucide-react";
 import Link from "../../embed-shims/next-link";
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import { Chevron02RightIcon, Ellipsis01Icon } from "../icons-v2-generated";
 import { cn } from "../../utils/cn";
 import { Button } from "./button";
@@ -31,6 +32,8 @@ export interface ActionsMenuItem {
 	type?: "item" | "checkbox" | "submenu" | "separator";
 	checked?: boolean;
 	submenu?: ActionsMenuItem[];
+	/** Render the row in the error/destructive color (label + icon). */
+	danger?: boolean;
 	/** Optional URL for navigation items */
 	href?: string;
 	/**
@@ -59,12 +62,12 @@ interface MenuItemProps {
 }
 
 const ROW_CLASSES =
-	"flex flex-1 min-w-0 items-center gap-2 px-3 py-3 cursor-pointer transition-colors bg-ods-bg outline-none";
+	"flex flex-1 min-w-0 items-center gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-s)] cursor-pointer transition-colors bg-ods-bg outline-none";
 const WRAPPER_CLASSES =
 	"relative flex items-stretch border-b border-ods-border last:border-b-0";
 
 const SECONDARY_ACTION_CLASSES =
-	"flex w-10 shrink-0 items-center justify-center self-stretch border-l border-ods-border transition-colors hover:bg-ods-bg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus";
+	"flex p-[var(--spacing-system-s)] shrink-0 items-center justify-center self-stretch border-l border-ods-border transition-colors hover:bg-ods-bg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus [&_svg]:w-4 [&_svg]:h-4 md:[&_svg]:w-6 md:[&_svg]:h-6";
 
 const SecondaryAction: React.FC<{ action: ActionsMenuItemIconAction }> = ({ action }) => {
 	const handleClick = useCallback(
@@ -173,7 +176,7 @@ const MenuItem: React.FC<MenuItemProps> = ({ item, onItemClick }) => {
 
 	const subTriggerClasses = cn(
 		itemClasses,
-		"data-[state=open]:bg-[#2b2b2b] focus:bg-ods-bg-hover",
+		"data-[state=open]:bg-ods-bg-active focus:bg-ods-bg-hover",
 	);
 
 	const renderAsLink =
@@ -184,7 +187,8 @@ const MenuItem: React.FC<MenuItemProps> = ({ item, onItemClick }) => {
 			{item.icon && (
 				<div
 					className={cn(
-						"w-6 h-6 flex-shrink-0 flex items-center justify-center",
+						"w-4 h-4 md:w-6 md:h-6 flex-shrink-0 flex items-center justify-center",
+						item.danger && "text-ods-error",
 						item.disabled && "opacity-50",
 					)}
 				>
@@ -194,8 +198,12 @@ const MenuItem: React.FC<MenuItemProps> = ({ item, onItemClick }) => {
 
 			<span
 				className={cn(
-					"flex-1 text-[18px] font-medium leading-6",
-					item.disabled ? "text-ods-text-secondary" : "text-ods-text-primary",
+					"flex-1 text-h4 font-medium leading-6",
+					item.disabled
+						? "text-ods-text-secondary"
+						: item.danger
+							? "text-ods-error"
+							: "text-ods-text-primary",
 				)}
 			>
 				{item.label}
@@ -204,20 +212,20 @@ const MenuItem: React.FC<MenuItemProps> = ({ item, onItemClick }) => {
 			{item.type === "checkbox" && (
 				<div
 					className={cn(
-						"w-6 h-6 flex items-center justify-center rounded-md transition-colors",
+						"w-4 h-4 md:w-6 md:h-6 flex items-center justify-center rounded-md transition-colors",
 						item.checked
-							? "bg-[#ffc008]"
+							? "bg-ods-accent"
 							: "border-2 border-ods-border bg-transparent",
 					)}
 				>
 					{item.checked && (
-						<Check className="w-4 h-4 text-black" strokeWidth={3} />
+						<Check className="w-3 h-3 md:w-4 md:h-4 text-ods-text-on-accent" strokeWidth={3} />
 					)}
 				</div>
 			)}
 
 			{item.type === "submenu" && (
-				<Chevron02RightIcon className="w-6 h-6 text-ods-text-secondary" />
+				<Chevron02RightIcon className="w-4 h-4 md:w-6 md:h-6 text-ods-text-secondary" />
 			)}
 		</>
 	);
@@ -331,6 +339,13 @@ export interface ActionsMenuDropdownProps extends ActionsMenuProps {
 	align?: "start" | "center" | "end";
 	side?: "top" | "right" | "bottom" | "left";
 	sideOffset?: number;
+	/** Controlled open state. Pair with `onOpenChange`. Uncontrolled by default. */
+	open?: boolean;
+	/** Open-state change handler (also fires when an item closes the menu). */
+	onOpenChange?: (open: boolean) => void;
+	/** Forwarded to the dropdown content — e.g. `e.preventDefault()` to stop
+	 *  Radix returning focus (and its focus ring) to the trigger on close. */
+	onCloseAutoFocus?: (event: Event) => void;
 }
 
 export const ActionsMenuDropdown: React.FC<ActionsMenuDropdownProps> = ({
@@ -345,8 +360,15 @@ export const ActionsMenuDropdown: React.FC<ActionsMenuDropdownProps> = ({
 	align = "end",
 	side = "bottom",
 	sideOffset = 6,
+	open: openProp,
+	onOpenChange,
+	onCloseAutoFocus,
 }) => {
-	const [open, setOpen] = useState(false);
+	const [open = false, setOpen] = useControllableState({
+		prop: openProp,
+		defaultProp: false,
+		onChange: onOpenChange,
+	});
 
 	const handleItemClick = useCallback(
 		(item: ActionsMenuItem) => {
@@ -355,7 +377,7 @@ export const ActionsMenuDropdown: React.FC<ActionsMenuDropdownProps> = ({
 				setOpen(false);
 			}
 		},
-		[onItemClick],
+		[onItemClick, setOpen],
 	);
 
 	return (
@@ -382,6 +404,7 @@ export const ActionsMenuDropdown: React.FC<ActionsMenuDropdownProps> = ({
 				align={align}
 				side={side}
 				sideOffset={sideOffset}
+				onCloseAutoFocus={onCloseAutoFocus}
 				className={cn(
 					"p-0 border-0 bg-transparent shadow-none overflow-visible",
 					contentClassName,

package/src/components/ui/allowed-domains-input.tsx

@@ -88,7 +88,7 @@ const AllowedDomainsInput = React.forwardRef<HTMLDivElement, AllowedDomainsInput
             <Input
               value={domain}
               disabled
-              className="bg-[#212121] border-[#3a3a3a] rounded-[6px] flex-1"
+              className="bg-ods-card border-ods-border rounded-[6px] flex-1"
             />
             <Button
               type="button"
@@ -114,7 +114,7 @@ const AllowedDomainsInput = React.forwardRef<HTMLDivElement, AllowedDomainsInput
             onKeyDown={handleKeyDown}
             placeholder={placeholder}
             disabled={disabled}
-            className="bg-[#212121] border-[#3a3a3a] rounded-[6px] flex-1"
+            className="bg-ods-card border-ods-border rounded-[6px] flex-1"
           />
         </div>
 
@@ -128,7 +128,7 @@ const AllowedDomainsInput = React.forwardRef<HTMLDivElement, AllowedDomainsInput
           onClick={addDomain}
           disabled={disabled}
         >
-          <PlusCircle className="h-5 w-5 text-[#888888]" />
+          <PlusCircle className="h-5 w-5 text-ods-text-secondary" />
           <span className="font-['DM_Sans'] font-bold text-base">Add Domain</span>
         </button>
 

package/src/components/ui/cursor-pagination.tsx

@@ -92,7 +92,7 @@ export function CursorPagination({
     >
       {/* Info text */}
       {showInfo && (
-        <div className="text-sm text-[#888888]">
+        <div className="text-sm text-ods-text-secondary">
           {displayText || <span>&nbsp;</span>}
         </div>
       )}

package/src/components/ui/dropdown-button.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { cn } from '../../utils/cn'
 import { Chevron02DownIcon } from '../icons-v2-generated'
-import { MoreActionsMenu, type MoreActionsItem } from './more-actions-menu'
+import { ActionsMenuDropdown, type ActionsMenuItem } from './actions-menu'
 
 export interface DropdownButtonProps {
   /** Button label rendered next to the chevron. */
@@ -11,7 +11,7 @@ export interface DropdownButtonProps {
   /** Optional leading icon rendered before the label. */
   icon?: React.ReactNode
   /** Items shown in the dropdown. */
-  items: MoreActionsItem[]
+  items: ActionsMenuItem[]
   disabled?: boolean
   className?: string
   ariaLabel?: string
@@ -49,14 +49,14 @@ export function DropdownButton({
   )
 
   return (
-    <MoreActionsMenu
-      items={items}
+    <ActionsMenuDropdown
+      groups={[{ items }]}
       open={open}
       onOpenChange={handleOpenChange}
       align={align}
       side={side}
-      ariaLabel={ariaLabel || label}
-      trigger={
+      triggerAriaLabel={ariaLabel || label}
+      customTrigger={
         <button
           type="button"
           disabled={disabled}

package/src/components/ui/info-row.tsx

@@ -9,11 +9,11 @@ interface InfoRowProps {
 export function InfoRow({ label, value, icon }: InfoRowProps) {
   return (
     <div className="flex gap-2 items-center w-full">
-      <div className="text-h4 text-[#fafafa] overflow-hidden text-ellipsis whitespace-nowrap">
+      <div className="text-h4 text-ods-text-primary overflow-hidden text-ellipsis whitespace-nowrap">
         {label}
       </div>
       <div className="flex-1 bg-[#3a3a3a] h-px min-h-px min-w-px" />
-      <div className="text-h4 text-[#fafafa] overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-1">
+      <div className="text-h4 text-ods-text-primary overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-1">
         {value}
         {icon}
       </div>

package/src/components/ui/modal-v2.tsx

@@ -82,7 +82,11 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
             "absolute inset-0 bg-black/50 backdrop-blur-[2px] md:backdrop-blur-none",
             "duration-200",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
+            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+            // Hold the hidden end-state until unmount so the backdrop doesn't
+            // flash back to full opacity when the animation finishes a frame
+            // before the unmount timeout fires.
+            "data-[state=closed]:fill-mode-forwards"
           )}
           onClick={onClose}
           aria-hidden="true"
@@ -102,6 +106,9 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
             "data-[state=open]:slide-in-from-bottom-4 md:data-[state=open]:slide-in-from-bottom-0 md:data-[state=open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "data-[state=closed]:slide-out-to-bottom-4 md:data-[state=closed]:slide-out-to-bottom-0 md:data-[state=closed]:zoom-out-95",
+            // Hold the hidden end-state until unmount so the panel doesn't snap
+            // back to opacity/scale 1 for a frame before it unmounts.
+            "data-[state=closed]:fill-mode-forwards",
             className
           )}
           role="dialog"

package/src/components/ui/more-actions-menu.tsx

@@ -12,6 +12,11 @@ import {
   DropdownMenuTrigger
 } from './dropdown-menu'
 
+/**
+ * @deprecated Use `ActionsMenuItem` from `./actions-menu` with
+ * `ActionsMenuDropdown` instead. `MoreActionsMenu` is being phased out in favor
+ * of the `ActionsMenu*` family.
+ */
 export type MoreActionsItem = {
   label: string
   /** Click handler. Optional when `href` is provided. */
@@ -25,6 +30,9 @@ export type MoreActionsItem = {
   danger?: boolean
 }
 
+/**
+ * @deprecated Use `ActionsMenuDropdownProps` from `./actions-menu` instead.
+ */
 export interface MoreActionsMenuProps {
   items: MoreActionsItem[]
   align?: 'start' | 'center' | 'end'
@@ -50,6 +58,11 @@ export interface MoreActionsMenuProps {
 /**
  * Compact, reusable menu triggered by an ellipsis icon button.
  * Built on top of Radix DropdownMenu used in the UI Kit.
+ *
+ * @deprecated Use `ActionsMenuDropdown` from `./actions-menu` instead — it
+ * supports the same trigger override (`customTrigger`), controlled `open` /
+ * `onOpenChange`, `onCloseAutoFocus`, and `danger` items, plus grouped items,
+ * checkboxes, and submenus. This component will be removed in a future release.
  */
 export function MoreActionsMenu({
   items,

package/src/components/ui/square-avatar.tsx

@@ -11,10 +11,14 @@ interface SquareAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: 'sm' | 'md' | 'lg' | 'xl';
   fallback?: string;
   variant?: 'square' | 'round';
+  /** Override the initials-fallback styling (font size/color). Merged over the
+   *  defaults (`text-xs font-medium text-ods-text-primary`) via tailwind-merge,
+   *  so callers can shrink/recolor the initials for compact avatars. */
+  initialsClassName?: string;
 }
 
 const SquareAvatar = React.memo(React.forwardRef<HTMLDivElement, SquareAvatarProps>(
-  ({ className, src, alt, size = 'md', fallback, variant = 'square', ...props }, ref) => {
+  ({ className, src, alt, size = 'md', fallback, variant = 'square', initialsClassName, ...props }, ref) => {
     const sizeClasses = {
       sm: 'h-8 w-8',
       md: 'h-10 w-10',
@@ -55,6 +59,7 @@ const SquareAvatar = React.memo(React.forwardRef<HTMLDivElement, SquareAvatarPro
           // (#fafafa) on the same pink yields ~3.5:1 (AA Large) and on the
           // dark default bg yields ~15:1.
           'flex items-center justify-center text-xs font-medium text-ods-text-primary',
+          initialsClassName,
           src && 'hidden'
         )}>
           {getFirstLastInitials(fallback || alt) || '?'}

package/src/components/ui/tags-input.tsx

@@ -79,7 +79,7 @@ export function TagsInput({
           placeholder={placeholder}
           disabled={disabled || (maxTags ? value.length >= maxTags : false)}
           className={cn(
-            "flex-1 bg-[#161616] border-ods-border text-ods-text-primary",
+            "flex-1 bg-ods-bg border-ods-border text-ods-text-primary",
             inputClassName
           )}
         />

package/src/components/ui/textarea.tsx

@@ -69,7 +69,12 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           // to the bottom-right when the textarea grows multi-line. Vertical
           // padding lives here (not on the textarea) so both children share
           // the same bottom baseline at any height.
-          "flex w-full items-end gap-2 rounded-[6px] border px-3 py-2.5 md:py-3 min-h-11 md:min-h-12 cursor-text",
+          //
+          // Padding is sized so the single-line height matches `Input` exactly
+          // (44px mobile / 48px desktop): line `leading-6` (24px) + 2× padding
+          // + 1px border top/bottom. `min-h-11 md:min-h-12` is the matching
+          // floor; with symmetric padding the single line stays centered.
+          "flex w-full items-end gap-2 rounded-[6px] border px-3 py-[9px] md:py-[11px] min-h-11 md:min-h-12 cursor-text",
           "has-[:focus-visible]:outline-none",
           "group",
           "transition-colors duration-200",
@@ -88,7 +93,12 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             // JS needed to size to content. Falls back to `rows={1}` natural
             // height on older browsers.
             "[field-sizing:content]",
-            "text-h4 text-ods-text-primary placeholder:text-ods-text-secondary leading-6",
+            // `!leading-6` (not plain `leading-6`): on mobile `text-h4` sets a
+            // 20px line-height of its own that otherwise overrides the leading,
+            // leaving the 20px text box short of the 24px icon box and dropping
+            // the text below center under `items-end`. Forcing 24px keeps text
+            // and icon co-centered and the single-line height at 44px.
+            "text-h4 text-ods-text-primary placeholder:text-ods-text-secondary !leading-6",
             // Hard cap on growth: beyond `max-h` the textarea scrolls
             // internally instead of pushing the icon out of frame.
             "max-h-[160px] overflow-y-auto",
@@ -105,7 +115,11 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             aria-label={endIconButtonProps?.['aria-label'] ?? 'Submit'}
             {...endIconButtonProps}
             className={cn(
-              "flex shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
+              // `h-6` matches the textarea's `leading-6` line box so the icon's
+              // visual center lines up with the text on the first line. Without
+              // it, `items-end` bottom-aligns the smaller mobile icon (size-4)
+              // against the 24px text line and drops it below the text center.
+              "flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
               "group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error",
               "[&_svg]:size-4 md:[&_svg]:size-6",
               "cursor-pointer hover:text-ods-text-primary",
@@ -119,7 +133,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         ) : (
           <span
             className={cn(
-              "flex shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
+              "flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
               "group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error",
               "[&_svg]:size-4 md:[&_svg]:size-6",
             )}

package/src/components/vendor-icon.tsx

@@ -38,7 +38,7 @@ const imageSizeMap = {
 }
 
 const backgroundClasses = {
-  dark: 'bg-[#161616] border border-ods-border',
+  dark: 'bg-ods-bg border border-ods-border',
   light: 'bg-ods-card border border-ods-border',
   white: 'bg-white border border-[#E5E5E5]'
 }

package/src/components/vendor-tag.tsx

@@ -24,7 +24,7 @@ export function VendorTag({
 }: VendorTagProps) {
   // Base classes for the tag container
   const baseClasses = cn(
-    "flex items-center gap-1.5 bg-[#161616] border border-ods-border rounded whitespace-nowrap",
+    "flex items-center gap-1.5 bg-ods-bg border border-ods-border rounded whitespace-nowrap",
     size === 'sm' ? "px-2 py-1" : "px-2.5 py-1.5"
   )
 

package/src/components/why-it-matters.tsx

@@ -59,7 +59,7 @@ const WhyItMatters = () => {
   ];
 
   return (
-    <section className="bg-[#161616]">
+    <section className="bg-ods-bg">
       <div className="w-full max-w-[1920px] mx-auto px-6 md:px-20">
         <h2 className="text-h1 text-center text-ods-text-primary tracking-[-0.02em] mb-6">
           Why It Matters

package/src/hooks/ui/use-auto-limit-tags.ts

@@ -9,6 +9,12 @@ export interface UseAutoLimitTagsOptions {
   limitTags?: number | "auto"
   /** Placeholder text used to reserve input width (only used in "auto" mode) */
   placeholder?: string
+  /**
+   * Reserve trailing space for a text input (the autocomplete combobox). Set
+   * `false` for a pure chip row that has no input — then only the chips and the
+   * "+N" / "⋯" overflow badge compete for the available width. Default `true`.
+   */
+  reserveInputWidth?: boolean
 }
 
 export interface UseAutoLimitTagsReturn {
@@ -41,6 +47,7 @@ export function useAutoLimitTags({
   count,
   limitTags = "auto",
   placeholder = "",
+  reserveInputWidth = true,
 }: UseAutoLimitTagsOptions): UseAutoLimitTagsReturn {
   const middleRef = useRef<HTMLDivElement>(null)
   const measureRef = useRef<HTMLDivElement>(null)
@@ -74,15 +81,22 @@ export function useAutoLimitTags({
     const gap = parseFloat(cs.gap) || 0
     const middleW = middle.clientWidth
 
-    // Reserve space for the input based on placeholder width
-    const textW = textMeasureRef.current?.offsetWidth ?? 60
-    const inputMinW = inputRef.current
-      ? parseFloat(getComputedStyle(inputRef.current).minWidth) || 60
-      : 60
-    const inputReservedW = Math.max(textW + 8, inputMinW)
+    // Reserve trailing space for the input (autocomplete only). A pure chip row
+    // (`reserveInputWidth: false`) has no input, so nothing — and no gap before
+    // it — is reserved.
+    let inputReservedW = 0
+    let trailingGap = 0
+    if (reserveInputWidth) {
+      const textW = textMeasureRef.current?.offsetWidth ?? 60
+      const inputMinW = inputRef.current
+        ? parseFloat(getComputedStyle(inputRef.current).minWidth) || 60
+        : 60
+      inputReservedW = Math.max(textW + 8, inputMinW)
+      trailingGap = gap
+    }
 
     // Available = middle zone − padding − input reserved − gap before input
-    const available = middleW - padL - padR - inputReservedW - gap
+    const available = middleW - padL - padR - inputReservedW - trailingGap
 
     // Measure every tag from the off-screen container
     const tagEls = Array.from(measure.children) as HTMLElement[]
@@ -112,7 +126,7 @@ export function useAutoLimitTags({
     }
 
     setVisibleCount(Math.max(0, fitCount))
-  }, [count, limitTags, placeholder])
+  }, [count, limitTags, placeholder, reserveInputWidth])
 
   // Recalculate when inputs change
   useEffect(() => {