@fanvue/ui 3.3.0 → 3.4.0

package/dist/cjs/components/Tabs/TabsList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.cjs","sources":["../../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Breakpoint values for responsive props. */\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst alignLeftClasses: Record<Breakpoint | \"always\", string> = {\n  always: \"[&>[role=tab]]:flex-initial\",\n  sm: \"[&>[role=tab]]:sm:flex-initial\",\n  md: \"[&>[role=tab]]:md:flex-initial\",\n  lg: \"[&>[role=tab]]:lg:flex-initial\",\n  xl: \"[&>[role=tab]]:xl:flex-initial\",\n};\n\nfunction getLayoutClass(fullWidth: boolean, alignLeft?: boolean | Breakpoint): string {\n  if (!fullWidth) return \"inline-flex\";\n\n  const base = \"flex w-full [&>[role=tab]]:flex-1\";\n  if (alignLeft === true) return `${base} ${alignLeftClasses.always}`;\n  if (typeof alignLeft === \"string\") return `${base} ${alignLeftClasses[alignLeft]}`;\n  return base;\n}\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n  /** When `true` (the default), the tab list spans the full width of its container and each tab grows equally. Set to `false` for inline sizing. */\n  fullWidth?: boolean;\n  /**\n   * Controls tab alignment within a full-width container.\n   * - `false` (default): tabs spread evenly\n   * - `true`: tabs left-aligned, sized to content\n   * - `\"md\"` (breakpoint): spread on mobile, left-aligned at breakpoint and up\n   */\n  alignLeft?: boolean | Breakpoint;\n};\n\n/** Container for {@link TabsTrigger} elements. Renders a sliding active-tab indicator that animates between tabs. */\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, children, fullWidth = true, alignLeft, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const indicatorRef = React.useRef<HTMLSpanElement>(null);\n\n  React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);\n\n  const updateIndicator = React.useCallback(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    const activeTab = list.querySelector<HTMLElement>('[data-state=\"active\"]');\n    if (!activeTab) {\n      indicator.style.opacity = \"0\";\n      return;\n    }\n\n    const isVertical = list.dataset.orientation === \"vertical\";\n\n    indicator.style.opacity = \"1\";\n\n    if (isVertical) {\n      indicator.style.inset = `0 0 auto auto`;\n      indicator.style.width = \"4px\";\n      indicator.style.height = `${activeTab.offsetHeight}px`;\n      indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;\n    } else {\n      indicator.style.inset = `auto auto 0 0`;\n      indicator.style.height = \"4px\";\n      indicator.style.width = `${activeTab.offsetWidth}px`;\n      indicator.style.transform = `translateX(${activeTab.offsetLeft}px)`;\n    }\n  }, []);\n\n  React.useLayoutEffect(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    indicator.style.transitionDuration = \"0s\";\n    updateIndicator();\n    indicator.getBoundingClientRect();\n    indicator.style.transitionDuration = \"\";\n\n    const mutationObserver = new MutationObserver(updateIndicator);\n    mutationObserver.observe(list, {\n      attributes: true,\n      attributeFilter: [\"data-state\"],\n      childList: true,\n      subtree: true,\n    });\n\n    const resizeObserver = new ResizeObserver(updateIndicator);\n    resizeObserver.observe(list);\n\n    return () => {\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [updateIndicator]);\n\n  return (\n    <TabsPrimitive.List\n      ref={innerRef}\n      className={cn(\n        \"relative\",\n        getLayoutClass(fullWidth, alignLeft),\n        \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-alphas-200)]\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-alphas-200)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <span\n        ref={indicatorRef}\n        aria-hidden\n        className=\"pointer-events-none absolute rounded-full bg-brand-primary-default motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out\"\n        style={{ opacity: 0 }}\n      />\n    </TabsPrimitive.List>\n  );\n});\n\nTabsList.displayName = \"TabsList\";\n"],"names":["React","jsxs","TabsPrimitive","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,mBAA0D;AAAA,EAC9D,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,eAAe,WAAoB,WAA0C;AACpF,MAAI,CAAC,UAAW,QAAO;AAEvB,QAAM,OAAO;AACb,MAAI,cAAc,KAAM,QAAO,GAAG,IAAI,IAAI,iBAAiB,MAAM;AACjE,MAAI,OAAO,cAAc,SAAU,QAAO,GAAG,IAAI,IAAI,iBAAiB,SAAS,CAAC;AAChF,SAAO;AACT;AAgBO,MAAM,WAAWA,iBAAM,WAG5B,CAAC,EAAE,WAAW,UAAU,YAAY,MAAM,WAAW,GAAG,MAAA,GAAS,QAAQ;AACzE,QAAM,WAAWA,iBAAM,OAAuB,IAAI;AAClD,QAAM,eAAeA,iBAAM,OAAwB,IAAI;AAEvDA,mBAAM,oBAAoB,KAAK,MAAM,SAAS,OAAyB;AAEvE,QAAM,kBAAkBA,iBAAM,YAAY,MAAM;AAC9C,UAAM,OAAO,SAAS;AACtB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,QAAQ,CAAC,UAAW;AAEzB,UAAM,YAAY,KAAK,cAA2B,uBAAuB;AACzE,QAAI,CAAC,WAAW;AACd,gBAAU,MAAM,UAAU;AAC1B;AAAA,IACF;AAEA,UAAM,aAAa,KAAK,QAAQ,gBAAgB;AAEhD,cAAU,MAAM,UAAU;AAE1B,QAAI,YAAY;AACd,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,SAAS,GAAG,UAAU,YAAY;AAClD,gBAAU,MAAM,YAAY,cAAc,UAAU,SAAS;AAAA,IAC/D,OAAO;AACL,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,SAAS;AACzB,gBAAU,MAAM,QAAQ,GAAG,UAAU,WAAW;AAChD,gBAAU,MAAM,YAAY,cAAc,UAAU,UAAU;AAAA,IAChE;AAAA,EACF,GAAG,CAAA,CAAE;AAELA,mBAAM,gBAAgB,MAAM;AAC1B,UAAM,OAAO,SAAS;AACtB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,QAAQ,CAAC,UAAW;AAEzB,cAAU,MAAM,qBAAqB;AACrC,oBAAA;AACA,cAAU,sBAAA;AACV,cAAU,MAAM,qBAAqB;AAErC,UAAM,mBAAmB,IAAI,iBAAiB,eAAe;AAC7D,qBAAiB,QAAQ,MAAM;AAAA,MAC7B,YAAY;AAAA,MACZ,iBAAiB,CAAC,YAAY;AAAA,MAC9B,WAAW;AAAA,MACX,SAAS;AAAA,IAAA,CACV;AAED,UAAM,iBAAiB,IAAI,eAAe,eAAe;AACzD,mBAAe,QAAQ,IAAI;AAE3B,WAAO,MAAM;AACX,uBAAiB,WAAA;AACjB,qBAAe,WAAA;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,SACEC,2BAAAA;AAAAA,IAACC,yBAAc;AAAA,IAAd;AAAA,MACC,KAAK;AAAA,MACL,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA,eAAe,WAAW,SAAS;AAAA,QACnC;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACDC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,eAAW;AAAA,YACX,WAAU;AAAA,YACV,OAAO,EAAE,SAAS,EAAA;AAAA,UAAE;AAAA,QAAA;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAED,SAAS,cAAc;;"}
+{"version":3,"file":"TabsList.cjs","sources":["../../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Breakpoint values for responsive props. */\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst alignLeftClasses: Record<Breakpoint | \"always\", string> = {\n  always: \"[&>[role=tab]]:flex-initial\",\n  sm: \"[&>[role=tab]]:sm:flex-initial\",\n  md: \"[&>[role=tab]]:md:flex-initial\",\n  lg: \"[&>[role=tab]]:lg:flex-initial\",\n  xl: \"[&>[role=tab]]:xl:flex-initial\",\n};\n\nfunction getLayoutClass(fullWidth: boolean, alignLeft?: boolean | Breakpoint): string {\n  if (!fullWidth) return \"inline-flex\";\n\n  const base = \"flex w-full [&>[role=tab]]:flex-1\";\n  if (alignLeft === true) return `${base} ${alignLeftClasses.always}`;\n  if (typeof alignLeft === \"string\") return `${base} ${alignLeftClasses[alignLeft]}`;\n  return base;\n}\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n  /** When `true` (the default), the tab list spans the full width of its container and each tab grows equally. Set to `false` for inline sizing. */\n  fullWidth?: boolean;\n  /**\n   * Controls tab alignment within a full-width container.\n   * - `false` (default): tabs spread evenly\n   * - `true`: tabs left-aligned, sized to content\n   * - `\"md\"` (breakpoint): spread on mobile, left-aligned at breakpoint and up\n   */\n  alignLeft?: boolean | Breakpoint;\n};\n\n/** Container for {@link TabsTrigger} elements. Renders a sliding active-tab indicator that animates between tabs. */\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, children, fullWidth = true, alignLeft, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const indicatorRef = React.useRef<HTMLSpanElement>(null);\n\n  React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);\n\n  const updateIndicator = React.useCallback(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    const activeTab = list.querySelector<HTMLElement>('[data-state=\"active\"]');\n    if (!activeTab) {\n      indicator.style.opacity = \"0\";\n      return;\n    }\n\n    const isVertical = list.dataset.orientation === \"vertical\";\n\n    indicator.style.opacity = \"1\";\n\n    if (isVertical) {\n      indicator.style.inset = `0 0 auto auto`;\n      indicator.style.width = \"4px\";\n      indicator.style.height = `${activeTab.offsetHeight}px`;\n      indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;\n    } else {\n      indicator.style.inset = `auto auto 0 0`;\n      indicator.style.height = \"4px\";\n      indicator.style.width = `${activeTab.offsetWidth}px`;\n      indicator.style.transform = `translateX(${activeTab.offsetLeft}px)`;\n    }\n  }, []);\n\n  React.useLayoutEffect(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    indicator.style.transitionDuration = \"0s\";\n    updateIndicator();\n    indicator.getBoundingClientRect();\n    indicator.style.transitionDuration = \"\";\n\n    const mutationObserver = new MutationObserver(updateIndicator);\n    mutationObserver.observe(list, {\n      attributes: true,\n      attributeFilter: [\"data-state\"],\n      childList: true,\n      subtree: true,\n    });\n\n    const resizeObserver = new ResizeObserver(updateIndicator);\n    resizeObserver.observe(list);\n\n    let cancelled = false;\n    if (document.fonts?.status !== \"loaded\") {\n      document.fonts?.ready.then(() => {\n        if (!cancelled) updateIndicator();\n      });\n    }\n\n    return () => {\n      cancelled = true;\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [updateIndicator]);\n\n  return (\n    <TabsPrimitive.List\n      ref={innerRef}\n      className={cn(\n        \"relative\",\n        getLayoutClass(fullWidth, alignLeft),\n        \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-alphas-200)]\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-alphas-200)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <span\n        ref={indicatorRef}\n        aria-hidden\n        className=\"pointer-events-none absolute rounded-full bg-brand-primary-default motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out\"\n        style={{ opacity: 0 }}\n      />\n    </TabsPrimitive.List>\n  );\n});\n\nTabsList.displayName = \"TabsList\";\n"],"names":["React","jsxs","TabsPrimitive","cn","jsx"],"mappings":"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"}

package/dist/cjs/components/Tabs/TabsTrigger.cjs

@@ -41,7 +41,7 @@ const TabsTrigger = React__namespace.forwardRef(({ className, children, ...props
       "data-disabled:pointer-events-none",
       "data-disabled:data-[state=active]:text-content-tertiary",
       "data-disabled:data-[state=inactive]:text-neutral-alphas-300",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary",
+      "focus-visible:shadow-focus-ring focus-visible:outline-none",
       className
     ),
     ...props,

package/dist/cjs/components/Tabs/TabsTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-body-default-16px-semibold cursor-pointer text-content-primary\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-buttons-primary-muted\",\n      \"data-[state=inactive]:hover:text-neutral-alphas-300\",\n      \"data-[state=active]:active:text-buttons-primary-muted\",\n      \"data-[state=inactive]:active:text-neutral-alphas-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-content-tertiary\",\n      \"data-disabled:data-[state=inactive]:text-neutral-alphas-300\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpCC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;;"}
+{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-body-default-16px-semibold cursor-pointer text-content-primary\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-buttons-primary-muted\",\n      \"data-[state=inactive]:hover:text-neutral-alphas-300\",\n      \"data-[state=active]:active:text-buttons-primary-muted\",\n      \"data-[state=inactive]:active:text-neutral-alphas-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-content-tertiary\",\n      \"data-disabled:data-[state=inactive]:text-neutral-alphas-300\",\n      \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpCC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;;"}

package/dist/components/Accordion/AccordionTrigger.mjs

@@ -18,7 +18,7 @@ const AccordionTrigger = React.forwardRef(({ className, children, icon, ...props
         "cursor-pointer",
         "motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out",
         "hover:bg-neutral-alphas-100",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary",
+        "focus-visible:shadow-focus-ring focus-visible:outline-none",
         "data-disabled:pointer-events-none data-disabled:opacity-50",
         className
       ),

package/dist/components/Accordion/AccordionTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTrigger.mjs","sources":["../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Props for the {@link AccordionTrigger} button component. */\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> & {\n  /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */\n  icon?: React.ReactNode | null;\n};\n\n/** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, icon, ...props }, ref) => {\n  const showIcon = icon !== null;\n  const iconElement =\n    icon === undefined ? (\n      <ChevronDownIcon className=\"size-4 shrink-0 text-content-secondary\" />\n    ) : (\n      icon\n    );\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex flex-1 items-center justify-between gap-3\",\n          \"rounded-sm px-3 py-3\",\n          \"typography-body-small-14px-semibold text-content-primary\",\n          \"cursor-pointer\",\n          \"motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out\",\n          \"hover:bg-neutral-alphas-100\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n        {showIcon && (\n          <span className=\"shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180\">\n            {iconElement}\n          </span>\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n});\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n"],"names":[],"mappings":";;;;;;AAcO,MAAM,mBAAmB,MAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,MAAM,GAAG,MAAA,GAAS,QAAQ;AAClD,QAAM,WAAW,SAAS;AAC1B,QAAM,cACJ,SAAS,6BACN,iBAAA,EAAgB,WAAU,0CAAyC,IAEpE;AAGJ,SACE,oBAAC,mBAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,qCAAqC,SAAA,CAAS;AAAA,QAC7D,YACC,oBAAC,QAAA,EAAK,WAAU,uGACb,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;AAED,iBAAiB,cAAc;"}
+{"version":3,"file":"AccordionTrigger.mjs","sources":["../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["import * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Props for the {@link AccordionTrigger} button component. */\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> & {\n  /** Custom icon element. Defaults to `ChevronDownIcon`. Pass `null` to suppress the icon entirely. */\n  icon?: React.ReactNode | null;\n};\n\n/** An interactive button that toggles the visibility of its associated {@link AccordionContent} panel. */\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, icon, ...props }, ref) => {\n  const showIcon = icon !== null;\n  const iconElement =\n    icon === undefined ? (\n      <ChevronDownIcon className=\"size-4 shrink-0 text-content-secondary\" />\n    ) : (\n      icon\n    );\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"flex flex-1 items-center justify-between gap-3\",\n          \"rounded-sm px-3 py-3\",\n          \"typography-body-small-14px-semibold text-content-primary\",\n          \"cursor-pointer\",\n          \"motion-safe:transition-colors motion-safe:duration-200 motion-safe:ease-in-out\",\n          \"hover:bg-neutral-alphas-100\",\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n        {showIcon && (\n          <span className=\"shrink-0 motion-safe:transition-transform motion-safe:duration-200 [[data-state=open]>&]:rotate-180\">\n            {iconElement}\n          </span>\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n});\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n"],"names":[],"mappings":";;;;;;AAcO,MAAM,mBAAmB,MAAM,WAGpC,CAAC,EAAE,WAAW,UAAU,MAAM,GAAG,MAAA,GAAS,QAAQ;AAClD,QAAM,WAAW,SAAS;AAC1B,QAAM,cACJ,SAAS,6BACN,iBAAA,EAAgB,WAAU,0CAAyC,IAEpE;AAGJ,SACE,oBAAC,mBAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,qCAAqC,SAAA,CAAS;AAAA,QAC7D,YACC,oBAAC,QAAA,EAAK,WAAU,uGACb,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;AAED,iBAAiB,cAAc;"}

package/dist/components/BottomNavigation/BottomNavigationAction.mjs

@@ -30,7 +30,7 @@ const BottomNavigationAction = React.forwardRef(({ className, value, icon, label
           "relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-1",
           isActive ? "text-icons-primary" : "text-icons-tertiary",
           "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary",
+          "focus-visible:shadow-focus-ring focus-visible:outline-none",
           className
         ),
         children: [
@@ -65,7 +65,7 @@ const BottomNavigationAction = React.forwardRef(({ className, value, icon, label
         "relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 overflow-hidden px-2 py-2",
         "text-content-primary",
         "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary",
+        "focus-visible:shadow-focus-ring focus-visible:outline-none",
         className
       ),
       onClick: handleClick,

package/dist/components/BottomNavigation/BottomNavigationAction.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavigationAction.mjs","sources":["../../../src/components/BottomNavigation/BottomNavigationAction.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useBottomNavigationContext } from \"./BottomNavigation\";\n\nexport interface BottomNavigationActionProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\"> {\n  /** Unique value that identifies this action. */\n  value: string;\n  /** Icon element displayed in the action. */\n  icon: React.ReactElement;\n  /** Accessible label applied as `aria-label`. */\n  label?: string;\n  /** Optional badge element (e.g. {@link Count}) rendered at the top-end corner of the icon. */\n  badge?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n}\n\nexport const BottomNavigationAction = React.forwardRef<\n  HTMLButtonElement,\n  BottomNavigationActionProps\n>(({ className, value, icon, label, badge, onClick, asChild = false, children, ...props }, ref) => {\n  const {\n    value: selectedValue,\n    onValueChange,\n    hasInformationArchitectureNav,\n  } = useBottomNavigationContext();\n\n  const isActive = selectedValue === value;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onValueChange?.(value);\n    onClick?.(e);\n  };\n\n  const Comp = asChild ? Slot : \"button\";\n\n  if (hasInformationArchitectureNav) {\n    return (\n      <Comp\n        ref={ref}\n        {...(!asChild && { type: \"button\" as const })}\n        aria-current={isActive ? (\"page\" as const) : undefined}\n        data-state={isActive ? \"active\" : \"inactive\"}\n        onClick={handleClick}\n        {...props}\n        className={cn(\n          \"relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-1\",\n          isActive ? \"text-icons-primary\" : \"text-icons-tertiary\",\n          \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary\",\n          className,\n        )}\n      >\n        {asChild && <Slottable>{children}</Slottable>}\n        <span className=\"relative inline-flex\">\n          <span className=\"flex items-center justify-center [&>svg]:size-6\" aria-hidden=\"true\">\n            {icon}\n          </span>\n          {badge && <span className=\"absolute -end-1 -top-2.5\">{badge}</span>}\n        </span>\n        {label && (\n          <span\n            className={cn(\n              \"typography-medium-caption-xs max-w-full truncate text-center motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n              isActive ? \"text-content-primary\" : \"text-content-tertiary\",\n            )}\n          >\n            {label}\n          </span>\n        )}\n      </Comp>\n    );\n  }\n\n  return (\n    <Comp\n      ref={ref}\n      {...(!asChild && { type: \"button\" as const })}\n      aria-current={isActive ? \"page\" : undefined}\n      aria-label={label}\n      data-state={isActive ? \"active\" : \"inactive\"}\n      className={cn(\n        \"relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 overflow-hidden px-2 py-2\",\n        \"text-content-primary\",\n        \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary\",\n        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {asChild && <Slottable>{children}</Slottable>}\n      <span className=\"relative inline-flex\">\n        <span className=\"flex items-center justify-center [&>svg]:size-7\" aria-hidden=\"true\">\n          {icon}\n        </span>\n        {badge && <span className=\"absolute -end-1 -top-2.5\">{badge}</span>}\n      </span>\n    </Comp>\n  );\n});\n\nBottomNavigationAction.displayName = \"BottomNavigationAction\";\n"],"names":[],"mappings":";;;;;;AAmBO,MAAM,yBAAyB,MAAM,WAG1C,CAAC,EAAE,WAAW,OAAO,MAAM,OAAO,OAAO,SAAS,UAAU,OAAO,UAAU,GAAG,MAAA,GAAS,QAAQ;AACjG,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EAAA,IACE,2BAAA;AAEJ,QAAM,WAAW,kBAAkB;AAEnC,QAAM,cAAc,CAAC,MAA2C;AAC9D,oBAAgB,KAAK;AACrB,cAAU,CAAC;AAAA,EACb;AAEA,QAAM,OAAO,UAAU,OAAO;AAE9B,MAAI,+BAA+B;AACjC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAI,CAAC,WAAW,EAAE,MAAM,SAAA;AAAA,QACzB,gBAAc,WAAY,SAAmB;AAAA,QAC7C,cAAY,WAAW,WAAW;AAAA,QAClC,SAAS;AAAA,QACR,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA,WAAW,uBAAuB;AAAA,UAClC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAA,WAAW,oBAAC,aAAW,SAAA,CAAS;AAAA,UACjC,qBAAC,QAAA,EAAK,WAAU,wBACd,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAK,WAAU,mDAAkD,eAAY,QAC3E,UAAA,MACH;AAAA,YACC,SAAS,oBAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,MAAA,CAAM;AAAA,UAAA,GAC9D;AAAA,UACC,SACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,WAAW,yBAAyB;AAAA,cAAA;AAAA,cAGrC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAI,CAAC,WAAW,EAAE,MAAM,SAAA;AAAA,MACzB,gBAAc,WAAW,SAAS;AAAA,MAClC,cAAY;AAAA,MACZ,cAAY,WAAW,WAAW;AAAA,MAClC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WAAW,oBAAC,aAAW,SAAA,CAAS;AAAA,QACjC,qBAAC,QAAA,EAAK,WAAU,wBACd,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,mDAAkD,eAAY,QAC3E,UAAA,MACH;AAAA,UACC,SAAS,oBAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,MAAA,CAAM;AAAA,QAAA,EAAA,CAC9D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAED,uBAAuB,cAAc;"}
+{"version":3,"file":"BottomNavigationAction.mjs","sources":["../../../src/components/BottomNavigation/BottomNavigationAction.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useBottomNavigationContext } from \"./BottomNavigation\";\n\nexport interface BottomNavigationActionProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\"> {\n  /** Unique value that identifies this action. */\n  value: string;\n  /** Icon element displayed in the action. */\n  icon: React.ReactElement;\n  /** Accessible label applied as `aria-label`. */\n  label?: string;\n  /** Optional badge element (e.g. {@link Count}) rendered at the top-end corner of the icon. */\n  badge?: React.ReactNode;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n}\n\nexport const BottomNavigationAction = React.forwardRef<\n  HTMLButtonElement,\n  BottomNavigationActionProps\n>(({ className, value, icon, label, badge, onClick, asChild = false, children, ...props }, ref) => {\n  const {\n    value: selectedValue,\n    onValueChange,\n    hasInformationArchitectureNav,\n  } = useBottomNavigationContext();\n\n  const isActive = selectedValue === value;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onValueChange?.(value);\n    onClick?.(e);\n  };\n\n  const Comp = asChild ? Slot : \"button\";\n\n  if (hasInformationArchitectureNav) {\n    return (\n      <Comp\n        ref={ref}\n        {...(!asChild && { type: \"button\" as const })}\n        aria-current={isActive ? (\"page\" as const) : undefined}\n        data-state={isActive ? \"active\" : \"inactive\"}\n        onClick={handleClick}\n        {...props}\n        className={cn(\n          \"relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-1\",\n          isActive ? \"text-icons-primary\" : \"text-icons-tertiary\",\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          className,\n        )}\n      >\n        {asChild && <Slottable>{children}</Slottable>}\n        <span className=\"relative inline-flex\">\n          <span className=\"flex items-center justify-center [&>svg]:size-6\" aria-hidden=\"true\">\n            {icon}\n          </span>\n          {badge && <span className=\"absolute -end-1 -top-2.5\">{badge}</span>}\n        </span>\n        {label && (\n          <span\n            className={cn(\n              \"typography-medium-caption-xs max-w-full truncate text-center motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n              isActive ? \"text-content-primary\" : \"text-content-tertiary\",\n            )}\n          >\n            {label}\n          </span>\n        )}\n      </Comp>\n    );\n  }\n\n  return (\n    <Comp\n      ref={ref}\n      {...(!asChild && { type: \"button\" as const })}\n      aria-current={isActive ? \"page\" : undefined}\n      aria-label={label}\n      data-state={isActive ? \"active\" : \"inactive\"}\n      className={cn(\n        \"relative flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 overflow-hidden px-2 py-2\",\n        \"text-content-primary\",\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        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {asChild && <Slottable>{children}</Slottable>}\n      <span className=\"relative inline-flex\">\n        <span className=\"flex items-center justify-center [&>svg]:size-7\" aria-hidden=\"true\">\n          {icon}\n        </span>\n        {badge && <span className=\"absolute -end-1 -top-2.5\">{badge}</span>}\n      </span>\n    </Comp>\n  );\n});\n\nBottomNavigationAction.displayName = \"BottomNavigationAction\";\n"],"names":[],"mappings":";;;;;;AAmBO,MAAM,yBAAyB,MAAM,WAG1C,CAAC,EAAE,WAAW,OAAO,MAAM,OAAO,OAAO,SAAS,UAAU,OAAO,UAAU,GAAG,MAAA,GAAS,QAAQ;AACjG,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EAAA,IACE,2BAAA;AAEJ,QAAM,WAAW,kBAAkB;AAEnC,QAAM,cAAc,CAAC,MAA2C;AAC9D,oBAAgB,KAAK;AACrB,cAAU,CAAC;AAAA,EACb;AAEA,QAAM,OAAO,UAAU,OAAO;AAE9B,MAAI,+BAA+B;AACjC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAI,CAAC,WAAW,EAAE,MAAM,SAAA;AAAA,QACzB,gBAAc,WAAY,SAAmB;AAAA,QAC7C,cAAY,WAAW,WAAW;AAAA,QAClC,SAAS;AAAA,QACR,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA,WAAW,uBAAuB;AAAA,UAClC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAA,WAAW,oBAAC,aAAW,SAAA,CAAS;AAAA,UACjC,qBAAC,QAAA,EAAK,WAAU,wBACd,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAK,WAAU,mDAAkD,eAAY,QAC3E,UAAA,MACH;AAAA,YACC,SAAS,oBAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,MAAA,CAAM;AAAA,UAAA,GAC9D;AAAA,UACC,SACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,WAAW,yBAAyB;AAAA,cAAA;AAAA,cAGrC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAI,CAAC,WAAW,EAAE,MAAM,SAAA;AAAA,MACzB,gBAAc,WAAW,SAAS;AAAA,MAClC,cAAY;AAAA,MACZ,cAAY,WAAW,WAAW;AAAA,MAClC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WAAW,oBAAC,aAAW,SAAA,CAAS;AAAA,QACjC,qBAAC,QAAA,EAAK,WAAU,wBACd,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,mDAAkD,eAAY,QAC3E,UAAA,MACH;AAAA,UACC,SAAS,oBAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,MAAA,CAAM;AAAA,QAAA,EAAA,CAC9D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAED,uBAAuB,cAAc;"}

package/dist/components/ChatInput/ChatInput.mjs

@@ -5,6 +5,7 @@ import { cn } from "../../utils/cn.mjs";
 import { IconButton } from "../IconButton/IconButton.mjs";
 import { AddIcon } from "../Icons/AddIcon.mjs";
 import { ArrowUpIcon } from "../Icons/ArrowUpIcon.mjs";
+import { CheckIcon } from "../Icons/CheckIcon.mjs";
 import { ChevronDownIcon } from "../Icons/ChevronDownIcon.mjs";
 import { CloseIcon } from "../Icons/CloseIcon.mjs";
 const LINE_HEIGHT = 18;
@@ -259,7 +260,8 @@ function InlineSelect({ options, value, onChange, disabled, selectedOption }) {
           "flex items-center gap-1 rounded-md px-2 py-2",
           "hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          "motion-safe:transition-colors"
+          "motion-safe:transition-colors",
+          open && "bg-neutral-alphas-50"
         ),
         children: [
           selectedOption?.icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center [&>svg]:size-4", children: selectedOption.icon }),
@@ -278,8 +280,8 @@ function InlineSelect({ options, value, onChange, disabled, selectedOption }) {
       {
         role: "listbox",
         className: cn(
-          "absolute right-0 bottom-full z-10 mb-1 min-w-[140px]",
-          "overflow-hidden rounded-xs border border-border-primary bg-surface-primary p-1 shadow-lg"
+          "absolute right-0 bottom-full z-10 mb-1 min-w-[180px]",
+          "overflow-hidden rounded-xs border border-border-primary bg-surface-primary p-1.5 shadow-lg"
         ),
         children: options.map((option) => /* @__PURE__ */ jsxs(
           "div",
@@ -288,10 +290,9 @@ function InlineSelect({ options, value, onChange, disabled, selectedOption }) {
             tabIndex: 0,
             "aria-selected": option.value === value,
             className: cn(
-              "typography-body-small-14px-regular flex cursor-pointer items-center gap-2 rounded-xs px-3 py-1.5",
+              "typography-body-small-14px-regular flex cursor-pointer items-center gap-2 rounded-xs py-2.5 pr-2 pl-3",
               "text-content-primary hover:bg-neutral-alphas-50",
-              "focus-visible:shadow-focus-ring focus-visible:outline-none",
-              option.value === value && "bg-neutral-alphas-50"
+              "focus-visible:shadow-focus-ring focus-visible:outline-none"
             ),
             onClick: () => {
               onChange?.(option.value);
@@ -306,7 +307,8 @@ function InlineSelect({ options, value, onChange, disabled, selectedOption }) {
             },
             children: [
               option.icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center [&>svg]:size-4", children: option.icon }),
-              option.label
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+              option.value === value && /* @__PURE__ */ jsx("span", { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 text-content-primary", "aria-hidden": "true" }) })
             ]
           },
           option.value

package/dist/components/ChatInput/ChatInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.mjs","sources":["../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { AddIcon } from \"../Icons/AddIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** A single image thumbnail in the built-in attachment strip. */\nexport interface ChatInputAttachmentItem {\n  /** Stable id passed to {@link ChatInputProps.onAttachmentRemove} and used as React `key`. */\n  id: string;\n  /** Image URL for the thumbnail. */\n  src: string;\n  /** Optional value passed to the remove control `aria-label`. */\n  ariaLabel?: string;\n}\n\n/** A single option for the inline model/dropdown selector. */\nexport interface ChatInputSelectOption {\n  /** Unique value for this option. */\n  value: string;\n  /** Display label. */\n  label: string;\n  /** Optional icon rendered to the left of the label. */\n  icon?: React.ReactNode;\n}\n\n/**\n * Props for {@link ChatInput}. Standard textarea HTML attributes are forwarded to the inner\n * `<textarea>` except `className` (applied to the outer container), `rows` (use `minRows`), and\n * `onSubmit` (replaced by the chat message submit callback).\n */\nexport interface ChatInputProps\n  extends Omit<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    \"className\" | \"rows\" | \"onSubmit\"\n  > {\n  /** Minimum number of visible rows. @default 1 */\n  minRows?: number;\n  /** Maximum number of visible rows before scrolling. @default 6 */\n  maxRows?: number;\n  /** Whether a submission is in progress (disables submit, shows visual feedback). @default false */\n  loading?: boolean;\n  /**\n   * Callback fired when the user submits (clicks the send button or presses Enter without Shift).\n   * Receives the current trimmed text value.\n   */\n  onSubmit?: (value: string) => void;\n  /**\n   * When `true`, renders an \"attach file\" button in the bottom-left toolbar.\n   * @default false\n   */\n  showFileButton?: boolean;\n  /** Callback fired when the attach-file button is clicked. Only relevant when `showFileButton` is `true`. */\n  onFileClick?: () => void;\n  /** Accessible label for the attach-file button. @default \"Attach file\" */\n  fileButtonAriaLabel?: string;\n  /** Accessible label for the submit button. @default \"Send message\" */\n  submitAriaLabel?: string;\n  /** Icon element for the submit button. @default `<ArrowUpIcon />` */\n  submitIcon?: React.ReactNode;\n  /**\n   * Optional content rendered in the bottom-right toolbar, to the left of the submit button.\n   * When provided, takes precedence over the built-in `selectOptions` dropdown.\n   */\n  toolbarRight?: React.ReactNode;\n  /**\n   * Options for the built-in inline dropdown selector (e.g. model picker).\n   * Ignored when `toolbarRight` is provided.\n   */\n  selectOptions?: ChatInputSelectOption[];\n  /** Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. */\n  selectValue?: string;\n  /** When `true`, disables only the built-in dropdown selector. @default false */\n  selectDisabled?: boolean;\n  /** Callback fired when the user picks a different dropdown option. */\n  onSelectChange?: (value: string) => void;\n  /**\n   * Image attachments shown in the built-in thumbnail strip. Ignored when {@link ChatInputProps.attachmentPreviews}\n   * is provided (including `null`).\n   */\n  attachments?: ChatInputAttachmentItem[];\n  /**\n   * Called when the user removes a built-in thumbnail. The remove button is disabled when this is\n   * omitted or the input is {@link ChatInputProps.disabled}.\n   */\n  onAttachmentRemove?: (id: string) => void;\n  /**\n   * Replaces the built-in attachment strip entirely. When set to any value other than `undefined`\n   * (including `null` or `[]`), {@link ChatInputProps.attachments} is ignored.\n   */\n  attachmentPreviews?: React.ReactNode;\n  /** Additional className applied to the outermost container. */\n  className?: string;\n}\n\nconst LINE_HEIGHT = 18;\nconst TEXTAREA_PY = 12;\n\nfunction calculateHeight(rows: number): number {\n  return LINE_HEIGHT * rows + TEXTAREA_PY * 2;\n}\n\ninterface ChatInputDefaultAttachmentThumbnailsProps {\n  attachments: ChatInputAttachmentItem[];\n  onAttachmentRemove?: (id: string) => void;\n  disabled?: boolean;\n}\n\nfunction ChatInputDefaultAttachmentThumbnails({\n  attachments,\n  onAttachmentRemove,\n  disabled = false,\n}: ChatInputDefaultAttachmentThumbnailsProps) {\n  return attachments.map((item) => (\n    <div\n      key={item.id}\n      className=\"relative size-16 shrink-0 overflow-hidden rounded-sm border border-neutral-200 bg-background-secondary\"\n    >\n      <img src={item.src} alt=\"\" className=\"size-full object-cover\" />\n      <IconButton\n        variant=\"tertiary\"\n        size=\"24\"\n        aria-label={item.ariaLabel ? `Remove ${item.ariaLabel}` : \"Remove attachment\"}\n        icon={<CloseIcon className=\"!size-3\" />}\n        disabled={disabled || !onAttachmentRemove}\n        onClick={() => onAttachmentRemove?.(item.id)}\n        className=\"absolute top-0.5 right-0.5 size-5 bg-neutral-900/40 p-1 text-white hover:bg-neutral-900/55\"\n      />\n    </div>\n  ));\n}\n\n/**\n * A chat-style multi-line input with an integrated toolbar containing an\n * optional file-attach button, optional right-side controls (e.g. a model\n * selector), and a submit button — all inside a single bordered container.\n *\n * Designed to behave like modern AI chat inputs: auto-grows with content,\n * submits on Enter (Shift+Enter for newlines), and keeps controls inline.\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Type a message...\"\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Ask the agent...\"\n *   showFileButton\n *   onFileClick={() => openFilePicker()}\n *   selectOptions={[\n *     { value: \"fanvue-ai\", label: \"Fanvue AI\", icon: <AIIcon className=\"size-4\" /> },\n *     { value: \"example\", label: \"Example\", icon: <BulbIcon className=\"size-4\" /> },\n *   ]}\n *   selectValue=\"fanvue-ai\"\n *   onSelectChange={(v) => setModel(v)}\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachments={files}\n *   onAttachmentRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachmentPreviews={<CustomVideoStrip items={items} />}\n * />\n * ```\n */\nexport const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(\n  (\n    {\n      className,\n      minRows = 1,\n      maxRows = 6,\n      disabled = false,\n      loading = false,\n      value,\n      defaultValue,\n      placeholder,\n      maxLength,\n      \"aria-label\": ariaLabel,\n      onChange,\n      onKeyDown,\n      onSubmit,\n      showFileButton = false,\n      onFileClick,\n      fileButtonAriaLabel = \"Attach file\",\n      submitAriaLabel = \"Send message\",\n      submitIcon,\n      toolbarRight,\n      selectOptions,\n      selectValue,\n      selectDisabled = false,\n      onSelectChange,\n      attachments,\n      onAttachmentRemove,\n      attachmentPreviews,\n      style,\n      ...textareaProps\n    },\n    ref,\n  ) => {\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n    const resolvedValue = value !== undefined ? value : internalValue;\n    const isControlled = value !== undefined;\n\n    const mergedRef = React.useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        }\n      },\n      [ref],\n    );\n\n    const adjustHeight = React.useCallback(() => {\n      const textarea = internalRef.current;\n      if (!textarea) return;\n\n      const minHeight = calculateHeight(minRows);\n      const maxHeight = calculateHeight(maxRows);\n\n      textarea.style.height = `${minHeight}px`;\n      const desired = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);\n      textarea.style.height = `${desired}px`;\n    }, [minRows, maxRows]);\n\n    React.useEffect(() => {\n      adjustHeight();\n    }, [resolvedValue, adjustHeight]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) {\n        setInternalValue(e.target.value);\n      }\n      onChange?.(e);\n    };\n\n    const canSubmit = !!String(resolvedValue).trim() && !disabled && !loading;\n\n    const handleSubmit = () => {\n      const text = String(resolvedValue).trim();\n      if (!text || !canSubmit) return;\n      onSubmit?.(text);\n      if (!isControlled) {\n        setInternalValue(\"\");\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n      onKeyDown?.(e);\n    };\n\n    const minHeight = calculateHeight(minRows);\n    const maxHeight = calculateHeight(maxRows);\n\n    const useCustomAttachmentPreviews = attachmentPreviews !== undefined;\n    const customAttachmentStrip = useCustomAttachmentPreviews ? attachmentPreviews : null;\n    const defaultAttachmentStrip =\n      !useCustomAttachmentPreviews && !!attachments?.length ? (\n        <ChatInputDefaultAttachmentThumbnails\n          attachments={attachments ?? []}\n          disabled={disabled}\n          onAttachmentRemove={onAttachmentRemove}\n        />\n      ) : null;\n    const resolvedAttachmentStrip = customAttachmentStrip ?? defaultAttachmentStrip;\n    const hasAttachmentStrip = resolvedAttachmentStrip != null;\n\n    const selectedOption =\n      selectOptions?.find((o) => o.value === selectValue) ?? selectOptions?.[0];\n    const resolvedToolbarRight =\n      toolbarRight ??\n      (selectOptions && selectOptions.length > 0 ? (\n        <InlineSelect\n          options={selectOptions}\n          value={selectValue}\n          onChange={onSelectChange}\n          disabled={disabled || selectDisabled}\n          selectedOption={selectedOption}\n        />\n      ) : null);\n\n    return (\n      <div\n        className={cn(\n          \"relative flex flex-col gap-6 rounded-lg border border-border-primary bg-surface-primary\",\n          \"has-focus-visible:outline-none\",\n          \"motion-safe:transition-colors\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        <div className=\"flex flex-col\">\n          {hasAttachmentStrip ? (\n            <div className=\"flex gap-2 overflow-x-auto px-4 pt-4 pb-2 [scrollbar-width:thin]\">\n              {resolvedAttachmentStrip}\n            </div>\n          ) : null}\n          <textarea\n            {...textareaProps}\n            ref={mergedRef}\n            value={isControlled ? value : internalValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            aria-label={ariaLabel ?? placeholder}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            rows={minRows}\n            className={cn(\n              \"w-full resize-none bg-transparent px-4\",\n              hasAttachmentStrip ? \"pt-0\" : \"pt-4\",\n              \"typography-body-small-14px-regular text-content-primary\",\n              \"placeholder:text-content-tertiary\",\n              \"focus:outline-none disabled:cursor-not-allowed\",\n              \"overflow-y-auto\",\n            )}\n            style={{\n              minHeight: `${minHeight}px`,\n              maxHeight: `${maxHeight}px`,\n              ...style,\n            }}\n          />\n        </div>\n\n        <div className=\"flex items-center justify-between gap-2 px-4 pb-4\">\n          <div className=\"flex items-center gap-1\">\n            {showFileButton && (\n              <IconButton\n                variant=\"tertiary\"\n                size=\"32\"\n                icon={<AddIcon />}\n                aria-label={fileButtonAriaLabel}\n                onClick={onFileClick}\n                disabled={disabled}\n                className=\"sm:border sm:border-border-primary max-sm:-ml-2\"\n              />\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-1\">\n            {resolvedToolbarRight}\n            <IconButton\n              variant=\"primary\"\n              size=\"32\"\n              icon={submitIcon ?? <ArrowUpIcon />}\n              aria-label={submitAriaLabel}\n              onClick={handleSubmit}\n              disabled={!canSubmit}\n              className=\"disabled:bg-surface-secondary disabled:opacity-100 disabled:text-icons-primary\"\n            />\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nChatInput.displayName = \"ChatInput\";\n\ninterface InlineSelectProps {\n  options: ChatInputSelectOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  selectedOption?: ChatInputSelectOption;\n}\n\nfunction InlineSelect({ options, value, onChange, disabled, selectedOption }: InlineSelectProps) {\n  const [open, setOpen] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleClick = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open]);\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Select model\"\n        disabled={disabled}\n        onClick={() => setOpen((prev) => !prev)}\n        className={cn(\n          \"typography-description-12px-semibold text-content-primary\",\n          \"flex items-center gap-1 rounded-md px-2 py-2\",\n          \"hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          \"motion-safe:transition-colors\",\n        )}\n      >\n        {selectedOption?.icon && (\n          <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{selectedOption.icon}</span>\n        )}\n        {selectedOption?.label ?? options[0]?.label ?? \"Select\"}\n        <ChevronDownIcon\n          className={cn(\"size-4 motion-safe:transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div\n          role=\"listbox\"\n          className={cn(\n            \"absolute right-0 bottom-full z-10 mb-1 min-w-[140px]\",\n            \"overflow-hidden rounded-xs border border-border-primary bg-surface-primary p-1 shadow-lg\",\n          )}\n        >\n          {options.map((option) => (\n            <div\n              key={option.value}\n              role=\"option\"\n              tabIndex={0}\n              aria-selected={option.value === value}\n              className={cn(\n                \"typography-body-small-14px-regular flex cursor-pointer items-center gap-2 rounded-xs px-3 py-1.5\",\n                \"text-content-primary hover:bg-neutral-alphas-50\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n                option.value === value && \"bg-neutral-alphas-50\",\n              )}\n              onClick={() => {\n                onChange?.(option.value);\n                setOpen(false);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault();\n                  onChange?.(option.value);\n                  setOpen(false);\n                }\n              }}\n            >\n              {option.icon && (\n                <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{option.icon}</span>\n              )}\n              {option.label}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["minHeight","maxHeight"],"mappings":"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"}
+{"version":3,"file":"ChatInput.mjs","sources":["../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { AddIcon } from \"../Icons/AddIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** A single image thumbnail in the built-in attachment strip. */\nexport interface ChatInputAttachmentItem {\n  /** Stable id passed to {@link ChatInputProps.onAttachmentRemove} and used as React `key`. */\n  id: string;\n  /** Image URL for the thumbnail. */\n  src: string;\n  /** Optional value passed to the remove control `aria-label`. */\n  ariaLabel?: string;\n}\n\n/** A single option for the inline model/dropdown selector. */\nexport interface ChatInputSelectOption {\n  /** Unique value for this option. */\n  value: string;\n  /** Display label. */\n  label: string;\n  /** Optional icon rendered to the left of the label. */\n  icon?: React.ReactNode;\n}\n\n/**\n * Props for {@link ChatInput}. Standard textarea HTML attributes are forwarded to the inner\n * `<textarea>` except `className` (applied to the outer container), `rows` (use `minRows`), and\n * `onSubmit` (replaced by the chat message submit callback).\n */\nexport interface ChatInputProps\n  extends Omit<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    \"className\" | \"rows\" | \"onSubmit\"\n  > {\n  /** Minimum number of visible rows. @default 1 */\n  minRows?: number;\n  /** Maximum number of visible rows before scrolling. @default 6 */\n  maxRows?: number;\n  /** Whether a submission is in progress (disables submit, shows visual feedback). @default false */\n  loading?: boolean;\n  /**\n   * Callback fired when the user submits (clicks the send button or presses Enter without Shift).\n   * Receives the current trimmed text value.\n   */\n  onSubmit?: (value: string) => void;\n  /**\n   * When `true`, renders an \"attach file\" button in the bottom-left toolbar.\n   * @default false\n   */\n  showFileButton?: boolean;\n  /** Callback fired when the attach-file button is clicked. Only relevant when `showFileButton` is `true`. */\n  onFileClick?: () => void;\n  /** Accessible label for the attach-file button. @default \"Attach file\" */\n  fileButtonAriaLabel?: string;\n  /** Accessible label for the submit button. @default \"Send message\" */\n  submitAriaLabel?: string;\n  /** Icon element for the submit button. @default `<ArrowUpIcon />` */\n  submitIcon?: React.ReactNode;\n  /**\n   * Optional content rendered in the bottom-right toolbar, to the left of the submit button.\n   * When provided, takes precedence over the built-in `selectOptions` dropdown.\n   */\n  toolbarRight?: React.ReactNode;\n  /**\n   * Options for the built-in inline dropdown selector (e.g. model picker).\n   * Ignored when `toolbarRight` is provided.\n   */\n  selectOptions?: ChatInputSelectOption[];\n  /** Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. */\n  selectValue?: string;\n  /** When `true`, disables only the built-in dropdown selector. @default false */\n  selectDisabled?: boolean;\n  /** Callback fired when the user picks a different dropdown option. */\n  onSelectChange?: (value: string) => void;\n  /**\n   * Image attachments shown in the built-in thumbnail strip. Ignored when {@link ChatInputProps.attachmentPreviews}\n   * is provided (including `null`).\n   */\n  attachments?: ChatInputAttachmentItem[];\n  /**\n   * Called when the user removes a built-in thumbnail. The remove button is disabled when this is\n   * omitted or the input is {@link ChatInputProps.disabled}.\n   */\n  onAttachmentRemove?: (id: string) => void;\n  /**\n   * Replaces the built-in attachment strip entirely. When set to any value other than `undefined`\n   * (including `null` or `[]`), {@link ChatInputProps.attachments} is ignored.\n   */\n  attachmentPreviews?: React.ReactNode;\n  /** Additional className applied to the outermost container. */\n  className?: string;\n}\n\nconst LINE_HEIGHT = 18;\nconst TEXTAREA_PY = 12;\n\nfunction calculateHeight(rows: number): number {\n  return LINE_HEIGHT * rows + TEXTAREA_PY * 2;\n}\n\ninterface ChatInputDefaultAttachmentThumbnailsProps {\n  attachments: ChatInputAttachmentItem[];\n  onAttachmentRemove?: (id: string) => void;\n  disabled?: boolean;\n}\n\nfunction ChatInputDefaultAttachmentThumbnails({\n  attachments,\n  onAttachmentRemove,\n  disabled = false,\n}: ChatInputDefaultAttachmentThumbnailsProps) {\n  return attachments.map((item) => (\n    <div\n      key={item.id}\n      className=\"relative size-16 shrink-0 overflow-hidden rounded-sm border border-neutral-200 bg-background-secondary\"\n    >\n      <img src={item.src} alt=\"\" className=\"size-full object-cover\" />\n      <IconButton\n        variant=\"tertiary\"\n        size=\"24\"\n        aria-label={item.ariaLabel ? `Remove ${item.ariaLabel}` : \"Remove attachment\"}\n        icon={<CloseIcon className=\"!size-3\" />}\n        disabled={disabled || !onAttachmentRemove}\n        onClick={() => onAttachmentRemove?.(item.id)}\n        className=\"absolute top-0.5 right-0.5 size-5 bg-neutral-900/40 p-1 text-white hover:bg-neutral-900/55\"\n      />\n    </div>\n  ));\n}\n\n/**\n * A chat-style multi-line input with an integrated toolbar containing an\n * optional file-attach button, optional right-side controls (e.g. a model\n * selector), and a submit button — all inside a single bordered container.\n *\n * Designed to behave like modern AI chat inputs: auto-grows with content,\n * submits on Enter (Shift+Enter for newlines), and keeps controls inline.\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Type a message...\"\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Ask the agent...\"\n *   showFileButton\n *   onFileClick={() => openFilePicker()}\n *   selectOptions={[\n *     { value: \"fanvue-ai\", label: \"Fanvue AI\", icon: <AIIcon className=\"size-4\" /> },\n *     { value: \"example\", label: \"Example\", icon: <BulbIcon className=\"size-4\" /> },\n *   ]}\n *   selectValue=\"fanvue-ai\"\n *   onSelectChange={(v) => setModel(v)}\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachments={files}\n *   onAttachmentRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachmentPreviews={<CustomVideoStrip items={items} />}\n * />\n * ```\n */\nexport const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(\n  (\n    {\n      className,\n      minRows = 1,\n      maxRows = 6,\n      disabled = false,\n      loading = false,\n      value,\n      defaultValue,\n      placeholder,\n      maxLength,\n      \"aria-label\": ariaLabel,\n      onChange,\n      onKeyDown,\n      onSubmit,\n      showFileButton = false,\n      onFileClick,\n      fileButtonAriaLabel = \"Attach file\",\n      submitAriaLabel = \"Send message\",\n      submitIcon,\n      toolbarRight,\n      selectOptions,\n      selectValue,\n      selectDisabled = false,\n      onSelectChange,\n      attachments,\n      onAttachmentRemove,\n      attachmentPreviews,\n      style,\n      ...textareaProps\n    },\n    ref,\n  ) => {\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n    const resolvedValue = value !== undefined ? value : internalValue;\n    const isControlled = value !== undefined;\n\n    const mergedRef = React.useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        }\n      },\n      [ref],\n    );\n\n    const adjustHeight = React.useCallback(() => {\n      const textarea = internalRef.current;\n      if (!textarea) return;\n\n      const minHeight = calculateHeight(minRows);\n      const maxHeight = calculateHeight(maxRows);\n\n      textarea.style.height = `${minHeight}px`;\n      const desired = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);\n      textarea.style.height = `${desired}px`;\n    }, [minRows, maxRows]);\n\n    React.useEffect(() => {\n      adjustHeight();\n    }, [resolvedValue, adjustHeight]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) {\n        setInternalValue(e.target.value);\n      }\n      onChange?.(e);\n    };\n\n    const canSubmit = !!String(resolvedValue).trim() && !disabled && !loading;\n\n    const handleSubmit = () => {\n      const text = String(resolvedValue).trim();\n      if (!text || !canSubmit) return;\n      onSubmit?.(text);\n      if (!isControlled) {\n        setInternalValue(\"\");\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n      onKeyDown?.(e);\n    };\n\n    const minHeight = calculateHeight(minRows);\n    const maxHeight = calculateHeight(maxRows);\n\n    const useCustomAttachmentPreviews = attachmentPreviews !== undefined;\n    const customAttachmentStrip = useCustomAttachmentPreviews ? attachmentPreviews : null;\n    const defaultAttachmentStrip =\n      !useCustomAttachmentPreviews && !!attachments?.length ? (\n        <ChatInputDefaultAttachmentThumbnails\n          attachments={attachments ?? []}\n          disabled={disabled}\n          onAttachmentRemove={onAttachmentRemove}\n        />\n      ) : null;\n    const resolvedAttachmentStrip = customAttachmentStrip ?? defaultAttachmentStrip;\n    const hasAttachmentStrip = resolvedAttachmentStrip != null;\n\n    const selectedOption =\n      selectOptions?.find((o) => o.value === selectValue) ?? selectOptions?.[0];\n    const resolvedToolbarRight =\n      toolbarRight ??\n      (selectOptions && selectOptions.length > 0 ? (\n        <InlineSelect\n          options={selectOptions}\n          value={selectValue}\n          onChange={onSelectChange}\n          disabled={disabled || selectDisabled}\n          selectedOption={selectedOption}\n        />\n      ) : null);\n\n    return (\n      <div\n        className={cn(\n          \"relative flex flex-col gap-6 rounded-lg border border-border-primary bg-surface-primary\",\n          \"has-focus-visible:outline-none\",\n          \"motion-safe:transition-colors\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        <div className=\"flex flex-col\">\n          {hasAttachmentStrip ? (\n            <div className=\"flex gap-2 overflow-x-auto px-4 pt-4 pb-2 [scrollbar-width:thin]\">\n              {resolvedAttachmentStrip}\n            </div>\n          ) : null}\n          <textarea\n            {...textareaProps}\n            ref={mergedRef}\n            value={isControlled ? value : internalValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            aria-label={ariaLabel ?? placeholder}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            rows={minRows}\n            className={cn(\n              \"w-full resize-none bg-transparent px-4\",\n              hasAttachmentStrip ? \"pt-0\" : \"pt-4\",\n              \"typography-body-small-14px-regular text-content-primary\",\n              \"placeholder:text-content-tertiary\",\n              \"focus:outline-none disabled:cursor-not-allowed\",\n              \"overflow-y-auto\",\n            )}\n            style={{\n              minHeight: `${minHeight}px`,\n              maxHeight: `${maxHeight}px`,\n              ...style,\n            }}\n          />\n        </div>\n\n        <div className=\"flex items-center justify-between gap-2 px-4 pb-4\">\n          <div className=\"flex items-center gap-1\">\n            {showFileButton && (\n              <IconButton\n                variant=\"tertiary\"\n                size=\"32\"\n                icon={<AddIcon />}\n                aria-label={fileButtonAriaLabel}\n                onClick={onFileClick}\n                disabled={disabled}\n                className=\"sm:border sm:border-border-primary max-sm:-ml-2\"\n              />\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-1\">\n            {resolvedToolbarRight}\n            <IconButton\n              variant=\"primary\"\n              size=\"32\"\n              icon={submitIcon ?? <ArrowUpIcon />}\n              aria-label={submitAriaLabel}\n              onClick={handleSubmit}\n              disabled={!canSubmit}\n              className=\"disabled:bg-surface-secondary disabled:opacity-100 disabled:text-icons-primary\"\n            />\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nChatInput.displayName = \"ChatInput\";\n\ninterface InlineSelectProps {\n  options: ChatInputSelectOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  selectedOption?: ChatInputSelectOption;\n}\n\nfunction InlineSelect({ options, value, onChange, disabled, selectedOption }: InlineSelectProps) {\n  const [open, setOpen] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleClick = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open]);\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Select model\"\n        disabled={disabled}\n        onClick={() => setOpen((prev) => !prev)}\n        className={cn(\n          \"typography-description-12px-semibold text-content-primary\",\n          \"flex items-center gap-1 rounded-md px-2 py-2\",\n          \"hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          \"motion-safe:transition-colors\",\n          open && \"bg-neutral-alphas-50\",\n        )}\n      >\n        {selectedOption?.icon && (\n          <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{selectedOption.icon}</span>\n        )}\n        {selectedOption?.label ?? options[0]?.label ?? \"Select\"}\n        <ChevronDownIcon\n          className={cn(\"size-4 motion-safe:transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div\n          role=\"listbox\"\n          className={cn(\n            \"absolute right-0 bottom-full z-10 mb-1 min-w-[180px]\",\n            \"overflow-hidden rounded-xs border border-border-primary bg-surface-primary p-1.5 shadow-lg\",\n          )}\n        >\n          {options.map((option) => (\n            <div\n              key={option.value}\n              role=\"option\"\n              tabIndex={0}\n              aria-selected={option.value === value}\n              className={cn(\n                \"typography-body-small-14px-regular flex cursor-pointer items-center gap-2 rounded-xs py-2.5 pr-2 pl-3\",\n                \"text-content-primary hover:bg-neutral-alphas-50\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n              )}\n              onClick={() => {\n                onChange?.(option.value);\n                setOpen(false);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault();\n                  onChange?.(option.value);\n                  setOpen(false);\n                }\n              }}\n            >\n              {option.icon && (\n                <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{option.icon}</span>\n              )}\n              <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n              {option.value === value && (\n                <span className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n                  <CheckIcon className=\"size-4 text-content-primary\" aria-hidden=\"true\" />\n                </span>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["minHeight","maxHeight"],"mappings":";;;;;;;;;;AAkGA,MAAM,cAAc;AACpB,MAAM,cAAc;AAEpB,SAAS,gBAAgB,MAAsB;AAC7C,SAAO,cAAc,OAAO,cAAc;AAC5C;AAQA,SAAS,qCAAqC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAA8C;AAC5C,SAAO,YAAY,IAAI,CAAC,SACtB;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,SAAI,KAAK,KAAK,KAAK,KAAI,IAAG,WAAU,0BAAyB;AAAA,QAC9D;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,cAAY,KAAK,YAAY,UAAU,KAAK,SAAS,KAAK;AAAA,YAC1D,MAAM,oBAAC,WAAA,EAAU,WAAU,UAAA,CAAU;AAAA,YACrC,UAAU,YAAY,CAAC;AAAA,YACvB,SAAS,MAAM,qBAAqB,KAAK,EAAE;AAAA,YAC3C,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,IAZK,KAAK;AAAA,EAAA,CAcb;AACH;AAqDO,MAAM,YAAY,MAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAc,MAAM,OAA4B,IAAI;AAC1D,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,gBAAgB,EAAE;AAC3E,UAAM,gBAAgB,UAAU,SAAY,QAAQ;AACpD,UAAM,eAAe,UAAU;AAE/B,UAAM,YAAY,MAAM;AAAA,MACtB,CAAC,SAAqC;AACnC,oBAAmE,UAAU;AAC9E,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,IAAI;AAAA,QACV,WAAW,KAAK;AACb,cAA2D,UAAU;AAAA,QACxE;AAAA,MACF;AAAA,MACA,CAAC,GAAG;AAAA,IAAA;AAGN,UAAM,eAAe,MAAM,YAAY,MAAM;AAC3C,YAAM,WAAW,YAAY;AAC7B,UAAI,CAAC,SAAU;AAEf,YAAMA,aAAY,gBAAgB,OAAO;AACzC,YAAMC,aAAY,gBAAgB,OAAO;AAEzC,eAAS,MAAM,SAAS,GAAGD,UAAS;AACpC,YAAM,UAAU,KAAK,IAAI,KAAK,IAAI,SAAS,cAAcA,UAAS,GAAGC,UAAS;AAC9E,eAAS,MAAM,SAAS,GAAG,OAAO;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,UAAM,UAAU,MAAM;AACpB,mBAAA;AAAA,IACF,GAAG,CAAC,eAAe,YAAY,CAAC;AAEhC,UAAM,eAAe,CAAC,MAA8C;AAClE,UAAI,CAAC,cAAc;AACjB,yBAAiB,EAAE,OAAO,KAAK;AAAA,MACjC;AACA,iBAAW,CAAC;AAAA,IACd;AAEA,UAAM,YAAY,CAAC,CAAC,OAAO,aAAa,EAAE,KAAA,KAAU,CAAC,YAAY,CAAC;AAElE,UAAM,eAAe,MAAM;AACzB,YAAM,OAAO,OAAO,aAAa,EAAE,KAAA;AACnC,UAAI,CAAC,QAAQ,CAAC,UAAW;AACzB,iBAAW,IAAI;AACf,UAAI,CAAC,cAAc;AACjB,yBAAiB,EAAE;AAAA,MACrB;AAAA,IACF;AAEA,UAAM,gBAAgB,CAAC,MAAgD;AACrE,UAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,UAAU;AACpC,UAAE,eAAA;AACF,qBAAA;AAAA,MACF;AACA,kBAAY,CAAC;AAAA,IACf;AAEA,UAAM,YAAY,gBAAgB,OAAO;AACzC,UAAM,YAAY,gBAAgB,OAAO;AAEzC,UAAM,8BAA8B,uBAAuB;AAC3D,UAAM,wBAAwB,8BAA8B,qBAAqB;AACjF,UAAM,yBACJ,CAAC,+BAA+B,CAAC,CAAC,aAAa,SAC7C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAa,eAAe,CAAA;AAAA,QAC5B;AAAA,QACA;AAAA,MAAA;AAAA,IAAA,IAEA;AACN,UAAM,0BAA0B,yBAAyB;AACzD,UAAM,qBAAqB,2BAA2B;AAEtD,UAAM,iBACJ,eAAe,KAAK,CAAC,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,CAAC;AAC1E,UAAM,uBACJ,iBACC,iBAAiB,cAAc,SAAS,IACvC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,UAAU,YAAY;AAAA,QACtB;AAAA,MAAA;AAAA,IAAA,IAEA;AAEN,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,iBACZ,UAAA;AAAA,YAAA,qBACC,oBAAC,OAAA,EAAI,WAAU,oEACZ,mCACH,IACE;AAAA,YACJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAG;AAAA,gBACJ,KAAK;AAAA,gBACL,OAAO,eAAe,QAAQ;AAAA,gBAC9B;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,cAAY,aAAa;AAAA,gBACzB,UAAU;AAAA,gBACV,WAAW;AAAA,gBACX,MAAM;AAAA,gBACN,WAAW;AAAA,kBACT;AAAA,kBACA,qBAAqB,SAAS;AAAA,kBAC9B;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,gBAEF,OAAO;AAAA,kBACL,WAAW,GAAG,SAAS;AAAA,kBACvB,WAAW,GAAG,SAAS;AAAA,kBACvB,GAAG;AAAA,gBAAA;AAAA,cACL;AAAA,YAAA;AAAA,UACF,GACF;AAAA,UAEA,qBAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA,kBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,0BAAO,SAAA,EAAQ;AAAA,gBACf,cAAY;AAAA,gBACZ,SAAS;AAAA,gBACT;AAAA,gBACA,WAAU;AAAA,cAAA;AAAA,YAAA,GAGhB;AAAA,YAEA,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA;AAAA,cACD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,MAAM,cAAc,oBAAC,aAAA,CAAA,CAAY;AAAA,kBACjC,cAAY;AAAA,kBACZ,SAAS;AAAA,kBACT,UAAU,CAAC;AAAA,kBACX,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ,EAAA,CACF;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,UAAU,cAAc;AAUxB,SAAS,aAAa,EAAE,SAAS,OAAO,UAAU,UAAU,kBAAqC;AAC/F,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,eAAe,MAAM,OAAuB,IAAI;AAEtD,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,KAAM;AACX,UAAM,cAAc,CAAC,MAAkB;AACrC,UAAI,aAAa,WAAW,CAAC,aAAa,QAAQ,SAAS,EAAE,MAAc,GAAG;AAC5E,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AACA,aAAS,iBAAiB,aAAa,WAAW;AAClD,WAAO,MAAM,SAAS,oBAAoB,aAAa,WAAW;AAAA,EACpE,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,KAAM;AACX,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,SAAU,SAAQ,KAAK;AAAA,IACvC;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,IAAI,CAAC;AAET,SACE,qBAAC,OAAA,EAAI,KAAK,cAAc,WAAU,YAChC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,cAAW;AAAA,QACX;AAAA,QACA,SAAS,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,QACtC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,QAAA;AAAA,QAGT,UAAA;AAAA,UAAA,gBAAgB,QACf,oBAAC,QAAA,EAAK,WAAU,6CAA6C,yBAAe,MAAK;AAAA,UAElF,gBAAgB,SAAS,QAAQ,CAAC,GAAG,SAAS;AAAA,UAC/C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,2CAA2C,QAAQ,YAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/E;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,QACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA,QAAQ,IAAI,CAAC,WACZ;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,UAAU;AAAA,YACV,iBAAe,OAAO,UAAU;AAAA,YAChC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,SAAS,MAAM;AACb,yBAAW,OAAO,KAAK;AACvB,sBAAQ,KAAK;AAAA,YACf;AAAA,YACA,WAAW,CAAC,MAAM;AAChB,kBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,kBAAE,eAAA;AACF,2BAAW,OAAO,KAAK;AACvB,wBAAQ,KAAK;AAAA,cACf;AAAA,YACF;AAAA,YAEC,UAAA;AAAA,cAAA,OAAO,QACN,oBAAC,QAAA,EAAK,WAAU,6CAA6C,iBAAO,MAAK;AAAA,cAE3E,oBAAC,QAAA,EAAK,WAAU,2BAA2B,iBAAO,OAAM;AAAA,cACvD,OAAO,UAAU,SAChB,oBAAC,QAAA,EAAK,WAAU,4DACd,UAAA,oBAAC,WAAA,EAAU,WAAU,+BAA8B,eAAY,QAAO,EAAA,CACxE;AAAA,YAAA;AAAA,UAAA;AAAA,UA5BG,OAAO;AAAA,QAAA,CA+Bf;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}

package/dist/components/Checkbox/Checkbox.mjs

@@ -84,7 +84,7 @@ const Checkbox = React.forwardRef(
                 "hover:ring-2 hover:ring-brand-primary-default group-hover:ring-2 group-hover:ring-brand-primary-default",
                 "not-disabled:active:ring-2 not-disabled:active:ring-brand-primary-default",
                 // Focus state
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary",
+                "focus-visible:shadow-focus-ring focus-visible:outline-none",
                 // Disabled state
                 "disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:ring-0 disabled:group-hover:ring-0",
                 "disabled:data-[state=checked]:border-neutral-alphas-600 disabled:data-[state=checked]:bg-neutral-alphas-600 disabled:data-[state=checked]:text-content-tertiary",

package/dist/components/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\n/**\n * Size variant for the checkbox.\n *\n * - `\"20\"` (default) — 20px box, body-lg label.\n * - `\"16\"` — 16px box, body-md label, used in compact contexts like data tables.\n * - `\"default\"` and `\"small\"` are legacy aliases retained for back-compat\n *   (`\"default\"` → `\"20\"`, `\"small\"` → `\"20\"` with smaller label typography).\n */\nexport type CheckboxSize =\n  | \"20\"\n  | \"16\"\n  /** @deprecated Use `\"20\"` instead. */\n  | \"default\"\n  /** @deprecated Use `\"20\"` (the smaller-typography variant remains via `\"small\"`). */\n  | \"small\";\n\nconst BOX_SIZE_CLASS: Record<\"20\" | \"16\", string> = {\n  \"20\": \"size-5\",\n  \"16\": \"size-4\",\n};\n\nconst INDICATOR_SIZE_CLASS: Record<\"20\" | \"16\", string> = {\n  \"20\": \"size-3\",\n  \"16\": \"size-2.5\",\n};\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n  /** Size variant. @default \"20\" */\n  size?: CheckboxSize;\n  /** Label text displayed next to the checkbox. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n}\n\n/**\n * A checkbox input with optional label and helper text. Supports checked,\n * unchecked, and indeterminate states.\n *\n * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for\n * form-library compatibility — libraries like react-hook-form call `register()`\n * which expects an `HTMLInputElement` ref. A hidden `<input>` is synced to the\n * Radix checkbox state via `useImperativeHandle`.\n *\n * @example\n * ```tsx\n * <Checkbox label=\"Accept terms\" helperText=\"Required to continue\" />\n * ```\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"20\", label, helperText, disabled, name, ...props }, ref) => {\n    const id = React.useId();\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n    const hasLabel = Boolean(label || helperText);\n    const boxSize: \"20\" | \"16\" = size === \"16\" ? \"16\" : \"20\";\n    const useSmallLabelTypography = size === \"small\";\n\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      !label &&\n      !props[\"aria-label\"] &&\n      !props[\"aria-labelledby\"]\n    ) {\n      console.warn(\n        \"Checkbox: No accessible name provided. Add a `label`, `aria-label`, or `aria-labelledby` prop so screen readers can announce this checkbox.\",\n      );\n    }\n\n    // Hidden input for form library compatibility (e.g. react-hook-form register)\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleCheckedChange = (value: boolean | \"indeterminate\") => {\n      const checked = value === true;\n      if (inputRef.current) {\n        inputRef.current.checked = checked;\n        inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      }\n      props.onCheckedChange?.(value);\n    };\n\n    const checkboxElement = (\n      <span\n        className={cn(\n          \"relative inline-flex shrink-0\",\n          BOX_SIZE_CLASS[boxSize],\n          // Alignment when used with label\n          label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          name={name}\n          disabled={disabled}\n          aria-hidden\n          tabIndex={-1}\n          onChange={() => {}}\n          className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n          style={{ clip: \"rect(0,0,0,0)\" }}\n        />\n        <CheckboxPrimitive.Root\n          id={id}\n          disabled={disabled}\n          aria-describedby={helperTextId}\n          data-testid=\"checkbox\"\n          {...props}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            // Base styles\n            \"flex items-center justify-center rounded border-2\",\n            BOX_SIZE_CLASS[boxSize],\n            \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n            // Default state\n            \"border-content-primary bg-transparent text-transparent\",\n            // Checked state\n            \"data-[state=checked]:border-content-primary data-[state=checked]:bg-content-primary data-[state=checked]:text-content-primary-inverted\",\n            // Indeterminate state\n            \"data-[state=indeterminate]:border-content-primary data-[state=indeterminate]:bg-content-primary data-[state=indeterminate]:text-content-primary-inverted\",\n            // Hover & active state\n            \"hover:ring-2 hover:ring-brand-primary-default group-hover:ring-2 group-hover:ring-brand-primary-default\",\n            \"not-disabled:active:ring-2 not-disabled:active:ring-brand-primary-default\",\n            // Focus state\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary\",\n            // Disabled state\n            \"disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:ring-0 disabled:group-hover:ring-0\",\n            \"disabled:data-[state=checked]:border-neutral-alphas-600 disabled:data-[state=checked]:bg-neutral-alphas-600 disabled:data-[state=checked]:text-content-tertiary\",\n            !hasLabel && className,\n          )}\n        >\n          <CheckboxPrimitive.Indicator\n            forceMount\n            className={cn(\n              \"flex items-center justify-center text-content-primary-inverted\",\n              INDICATOR_SIZE_CLASS[boxSize],\n              \"data-[state=unchecked]:invisible\",\n            )}\n          >\n            {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </span>\n    );\n\n    if (!hasLabel) {\n      return checkboxElement;\n    }\n\n    return (\n      <div\n        className={cn(\n          \"inline-flex flex-col gap-0.5\",\n          disabled && \"is-disabled cursor-not-allowed\",\n          className,\n        )}\n      >\n        <div className=\"group inline-flex items-start gap-2\">\n          {checkboxElement}\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-content-primary\",\n                \"group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                useSmallLabelTypography\n                  ? \"typography-body-small-14px-semibold\"\n                  : \"typography-body-default-16px-semibold\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"ml-7 text-content-secondary\",\n              \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-content-tertiary\",\n              useSmallLabelTypography\n                ? \"typography-description-12px-regular\"\n                : \"typography-body-small-14px-regular\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Checkbox.mjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\n/**\n * Size variant for the checkbox.\n *\n * - `\"20\"` (default) — 20px box, body-lg label.\n * - `\"16\"` — 16px box, body-md label, used in compact contexts like data tables.\n * - `\"default\"` and `\"small\"` are legacy aliases retained for back-compat\n *   (`\"default\"` → `\"20\"`, `\"small\"` → `\"20\"` with smaller label typography).\n */\nexport type CheckboxSize =\n  | \"20\"\n  | \"16\"\n  /** @deprecated Use `\"20\"` instead. */\n  | \"default\"\n  /** @deprecated Use `\"20\"` (the smaller-typography variant remains via `\"small\"`). */\n  | \"small\";\n\nconst BOX_SIZE_CLASS: Record<\"20\" | \"16\", string> = {\n  \"20\": \"size-5\",\n  \"16\": \"size-4\",\n};\n\nconst INDICATOR_SIZE_CLASS: Record<\"20\" | \"16\", string> = {\n  \"20\": \"size-3\",\n  \"16\": \"size-2.5\",\n};\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n  /** Size variant. @default \"20\" */\n  size?: CheckboxSize;\n  /** Label text displayed next to the checkbox. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n}\n\n/**\n * A checkbox input with optional label and helper text. Supports checked,\n * unchecked, and indeterminate states.\n *\n * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for\n * form-library compatibility — libraries like react-hook-form call `register()`\n * which expects an `HTMLInputElement` ref. A hidden `<input>` is synced to the\n * Radix checkbox state via `useImperativeHandle`.\n *\n * @example\n * ```tsx\n * <Checkbox label=\"Accept terms\" helperText=\"Required to continue\" />\n * ```\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"20\", label, helperText, disabled, name, ...props }, ref) => {\n    const id = React.useId();\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n    const hasLabel = Boolean(label || helperText);\n    const boxSize: \"20\" | \"16\" = size === \"16\" ? \"16\" : \"20\";\n    const useSmallLabelTypography = size === \"small\";\n\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      !label &&\n      !props[\"aria-label\"] &&\n      !props[\"aria-labelledby\"]\n    ) {\n      console.warn(\n        \"Checkbox: No accessible name provided. Add a `label`, `aria-label`, or `aria-labelledby` prop so screen readers can announce this checkbox.\",\n      );\n    }\n\n    // Hidden input for form library compatibility (e.g. react-hook-form register)\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleCheckedChange = (value: boolean | \"indeterminate\") => {\n      const checked = value === true;\n      if (inputRef.current) {\n        inputRef.current.checked = checked;\n        inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      }\n      props.onCheckedChange?.(value);\n    };\n\n    const checkboxElement = (\n      <span\n        className={cn(\n          \"relative inline-flex shrink-0\",\n          BOX_SIZE_CLASS[boxSize],\n          // Alignment when used with label\n          label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          name={name}\n          disabled={disabled}\n          aria-hidden\n          tabIndex={-1}\n          onChange={() => {}}\n          className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n          style={{ clip: \"rect(0,0,0,0)\" }}\n        />\n        <CheckboxPrimitive.Root\n          id={id}\n          disabled={disabled}\n          aria-describedby={helperTextId}\n          data-testid=\"checkbox\"\n          {...props}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            // Base styles\n            \"flex items-center justify-center rounded border-2\",\n            BOX_SIZE_CLASS[boxSize],\n            \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n            // Default state\n            \"border-content-primary bg-transparent text-transparent\",\n            // Checked state\n            \"data-[state=checked]:border-content-primary data-[state=checked]:bg-content-primary data-[state=checked]:text-content-primary-inverted\",\n            // Indeterminate state\n            \"data-[state=indeterminate]:border-content-primary data-[state=indeterminate]:bg-content-primary data-[state=indeterminate]:text-content-primary-inverted\",\n            // Hover & active state\n            \"hover:ring-2 hover:ring-brand-primary-default group-hover:ring-2 group-hover:ring-brand-primary-default\",\n            \"not-disabled:active:ring-2 not-disabled:active:ring-brand-primary-default\",\n            // Focus state\n            \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n            // Disabled state\n            \"disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:ring-0 disabled:group-hover:ring-0\",\n            \"disabled:data-[state=checked]:border-neutral-alphas-600 disabled:data-[state=checked]:bg-neutral-alphas-600 disabled:data-[state=checked]:text-content-tertiary\",\n            !hasLabel && className,\n          )}\n        >\n          <CheckboxPrimitive.Indicator\n            forceMount\n            className={cn(\n              \"flex items-center justify-center text-content-primary-inverted\",\n              INDICATOR_SIZE_CLASS[boxSize],\n              \"data-[state=unchecked]:invisible\",\n            )}\n          >\n            {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </span>\n    );\n\n    if (!hasLabel) {\n      return checkboxElement;\n    }\n\n    return (\n      <div\n        className={cn(\n          \"inline-flex flex-col gap-0.5\",\n          disabled && \"is-disabled cursor-not-allowed\",\n          className,\n        )}\n      >\n        <div className=\"group inline-flex items-start gap-2\">\n          {checkboxElement}\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-content-primary\",\n                \"group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                useSmallLabelTypography\n                  ? \"typography-body-small-14px-semibold\"\n                  : \"typography-body-default-16px-semibold\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"ml-7 text-content-secondary\",\n              \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-content-tertiary\",\n              useSmallLabelTypography\n                ? \"typography-description-12px-regular\"\n                : \"typography-body-small-14px-regular\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":[],"mappings":"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"}

package/dist/components/CyclingText/CyclingText.mjs

@@ -20,13 +20,28 @@ const CyclingText = React.forwardRef(
     className,
     labelClassName,
     announceChanges = false,
+    onActiveIndexChange,
     ...rest
   }, ref) => {
     const docVisible = usePageVisibility();
     const reducedMotion = usePrefersReducedMotion();
     const { sizingLabelRef, trackWidth } = useCyclingTextTrackWidth();
-    const { cycle, currentLabel, incomingLabel, sizingLabel, onOutgoingTransitionEnd } = useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transitionMs);
+    const {
+      cycle,
+      currentIndex,
+      currentLabel,
+      incomingLabel,
+      sizingLabel,
+      onOutgoingTransitionEnd
+    } = useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transitionMs);
     const itemCount = items.length;
+    const onActiveIndexChangeRef = React.useRef(onActiveIndexChange);
+    React.useEffect(() => {
+      onActiveIndexChangeRef.current = onActiveIndexChange;
+    }, [onActiveIndexChange]);
+    React.useEffect(() => {
+      onActiveIndexChangeRef.current?.(currentIndex);
+    }, [currentIndex]);
     const outgoingMotionStyle = React.useMemo(() => {
       const durMs = reducedMotion ? 0 : transitionMs;
       const exiting = cycle.transitioning;

package/dist/components/CyclingText/CyclingText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CyclingText.mjs","sources":["../../../src/components/CyclingText/CyclingText.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCyclingCycle } from \"./useCyclingCycle\";\nimport { useCyclingTextTrackWidth } from \"./useCyclingTextTrackWidth\";\nimport { usePageVisibility } from \"./usePageVisibility\";\nimport { usePrefersReducedMotion } from \"./usePrefersReducedMotion\";\n\nconst DEFAULT_INTERVAL_MS = 2100;\nconst DEFAULT_TRANSITION_MS = 200;\n\nconst SLIDE_OFFSET_PX = 18;\n\n/** How the wrapper should be sized to accommodate variable-length items. */\nexport type CyclingTextSizing = \"longest\" | \"current\";\n\nexport interface CyclingTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** Strings to cycle through, in order. Cycles back to the first after the last. */\n  items: readonly string[];\n  /**\n   * Milliseconds to wait after the previous transition finishes before starting the next one.\n   * @default 2100\n   */\n  intervalMs?: number;\n  /** Slide and cross-fade duration in milliseconds. @default 200 */\n  transitionMs?: number;\n  /** Direction the outgoing item slides. @default \"up\" */\n  direction?: \"up\" | \"down\";\n  /** When true, freezes on the current item — no further cycling until cleared. @default false */\n  paused?: boolean;\n  /**\n   * How the wrapper sizes itself horizontally.\n   * - `longest` reserves space for the longest item — no width jitter as items cycle.\n   * - `current` shrinks/grows with each item, animating width between cycles.\n   * @default \"longest\"\n   */\n  sizing?: CyclingTextSizing;\n  /**\n   * When `true`, updates are exposed to assistive technologies via `aria-live=\"polite\"`.\n   * Leave `false` for decorative or frequently changing copy so screen readers are not interrupted on every cycle.\n   * @default false\n   */\n  announceChanges?: boolean;\n  /**\n   * Class applied to each visible label span (current + incoming). Use this for\n   * effects that have to sit on the text element itself, e.g. `background-clip: text`.\n   */\n  labelClassName?: string;\n}\n\n/**\n * Cycles through a list of strings with a slide-in/slide-out animation. Lives\n * inline so it can sit inside divs, spans, buttons, or as a fake placeholder\n * overlay.\n *\n * @example\n * ```tsx\n * <CyclingText items={[\"Thinking\", \"Reading messages\", \"Drafting reply\"]} />\n * ```\n */\nexport const CyclingText = React.forwardRef<HTMLSpanElement, CyclingTextProps>(\n  (\n    {\n      items,\n      intervalMs = DEFAULT_INTERVAL_MS,\n      transitionMs = DEFAULT_TRANSITION_MS,\n      direction = \"up\",\n      paused = false,\n      sizing = \"longest\",\n      className,\n      labelClassName,\n      announceChanges = false,\n      ...rest\n    },\n    ref,\n  ) => {\n    const docVisible = usePageVisibility();\n    const reducedMotion = usePrefersReducedMotion();\n    const { sizingLabelRef, trackWidth } = useCyclingTextTrackWidth();\n    const { cycle, currentLabel, incomingLabel, sizingLabel, onOutgoingTransitionEnd } =\n      useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transitionMs);\n\n    const itemCount = items.length;\n\n    const outgoingMotionStyle = React.useMemo((): React.CSSProperties => {\n      const durMs = reducedMotion ? 0 : transitionMs;\n      const exiting = cycle.transitioning;\n      const yExit = direction === \"up\" ? -SLIDE_OFFSET_PX : SLIDE_OFFSET_PX;\n      return {\n        opacity: exiting ? 0 : 1,\n        transform: exiting ? `translate3d(0, ${yExit}px, 0)` : \"translate3d(0, 0, 0)\",\n        transition:\n          exiting && durMs > 0\n            ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)`\n            : \"none\",\n      };\n    }, [cycle.transitioning, direction, transitionMs, reducedMotion]);\n\n    const incomingMotionStyle = React.useMemo((): React.CSSProperties => {\n      const durMs = reducedMotion ? 0 : transitionMs;\n      const entered = cycle.incomingEntered;\n      const yEnter = direction === \"up\" ? SLIDE_OFFSET_PX : -SLIDE_OFFSET_PX;\n      return {\n        opacity: entered ? 1 : 0,\n        transform: entered ? \"translate3d(0, 0, 0)\" : `translate3d(0, ${yEnter}px, 0)`,\n        transition:\n          durMs > 0\n            ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)`\n            : \"none\",\n      };\n    }, [cycle.incomingEntered, direction, transitionMs, reducedMotion]);\n\n    if (itemCount === 0) {\n      return null;\n    }\n\n    const wrapperStyle = {\n      ...(trackWidth !== null ? { width: `${trackWidth}px` } : {}),\n      // paddingTop: SLIDE_OFFSET_PX,\n    } as React.CSSProperties;\n\n    const showIncoming = incomingLabel !== null && cycle.transitioning;\n\n    return (\n      <span\n        ref={ref}\n        data-testid=\"cycling-text\"\n        data-paused={paused ? \"true\" : undefined}\n        className={cn(\n          \"relative inline-flex items-center overflow-hidden align-middle leading-[inherit]\",\n          \"motion-safe:transition-[width] motion-safe:duration-300 motion-safe:ease-out\",\n          className,\n        )}\n        style={wrapperStyle}\n        {...rest}\n      >\n        <span\n          ref={sizingLabelRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none invisible inline-block select-none whitespace-nowrap leading-[inherit]\"\n        >\n          {sizingLabel}\n        </span>\n\n        <span\n          data-layer=\"current\"\n          aria-live={announceChanges ? \"polite\" : undefined}\n          aria-atomic={announceChanges ? true : undefined}\n          data-state={cycle.transitioning ? \"exit\" : \"idle\"}\n          onTransitionEnd={onOutgoingTransitionEnd}\n          className={cn(\n            \"absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]\",\n            labelClassName,\n          )}\n          style={outgoingMotionStyle}\n        >\n          {currentLabel}\n        </span>\n\n        {showIncoming ? (\n          <span\n            aria-hidden=\"true\"\n            data-layer=\"incoming\"\n            data-state={cycle.incomingEntered ? \"idle\" : \"enter\"}\n            className={cn(\n              \"absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]\",\n              labelClassName,\n            )}\n            style={incomingMotionStyle}\n          >\n            {incomingLabel}\n          </span>\n        ) : null}\n      </span>\n    );\n  },\n);\n\nCyclingText.displayName = \"CyclingText\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CyclingText.mjs","sources":["../../../src/components/CyclingText/CyclingText.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCyclingCycle } from \"./useCyclingCycle\";\nimport { useCyclingTextTrackWidth } from \"./useCyclingTextTrackWidth\";\nimport { usePageVisibility } from \"./usePageVisibility\";\nimport { usePrefersReducedMotion } from \"./usePrefersReducedMotion\";\n\nconst DEFAULT_INTERVAL_MS = 2100;\nconst DEFAULT_TRANSITION_MS = 200;\n\nconst SLIDE_OFFSET_PX = 18;\n\n/** How the wrapper should be sized to accommodate variable-length items. */\nexport type CyclingTextSizing = \"longest\" | \"current\";\n\nexport interface CyclingTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** Strings to cycle through, in order. Cycles back to the first after the last. */\n  items: readonly string[];\n  /**\n   * Milliseconds to wait after the previous transition finishes before starting the next one.\n   * @default 2100\n   */\n  intervalMs?: number;\n  /** Slide and cross-fade duration in milliseconds. @default 200 */\n  transitionMs?: number;\n  /** Direction the outgoing item slides. @default \"up\" */\n  direction?: \"up\" | \"down\";\n  /** When true, freezes on the current item — no further cycling until cleared. @default false */\n  paused?: boolean;\n  /**\n   * How the wrapper sizes itself horizontally.\n   * - `longest` reserves space for the longest item — no width jitter as items cycle.\n   * - `current` shrinks/grows with each item, animating width between cycles.\n   * @default \"longest\"\n   */\n  sizing?: CyclingTextSizing;\n  /**\n   * When `true`, updates are exposed to assistive technologies via `aria-live=\"polite\"`.\n   * Leave `false` for decorative or frequently changing copy so screen readers are not interrupted on every cycle.\n   * @default false\n   */\n  announceChanges?: boolean;\n  /**\n   * Class applied to each visible label span (current + incoming). Use this for\n   * effects that have to sit on the text element itself, e.g. `background-clip: text`.\n   */\n  labelClassName?: string;\n  /**\n   * Called with the index of the settled, fully-visible item — once on mount and\n   * again whenever it changes (after each transition completes). Lets a parent\n   * stay in lockstep with what is on screen (e.g. to act on the item the user is\n   * currently looking at) without running a second, drifting timer of its own.\n   */\n  onActiveIndexChange?: (index: number) => void;\n}\n\n/**\n * Cycles through a list of strings with a slide-in/slide-out animation. Lives\n * inline so it can sit inside divs, spans, buttons, or as a fake placeholder\n * overlay.\n *\n * @example\n * ```tsx\n * <CyclingText items={[\"Thinking\", \"Reading messages\", \"Drafting reply\"]} />\n * ```\n */\nexport const CyclingText = React.forwardRef<HTMLSpanElement, CyclingTextProps>(\n  (\n    {\n      items,\n      intervalMs = DEFAULT_INTERVAL_MS,\n      transitionMs = DEFAULT_TRANSITION_MS,\n      direction = \"up\",\n      paused = false,\n      sizing = \"longest\",\n      className,\n      labelClassName,\n      announceChanges = false,\n      onActiveIndexChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const docVisible = usePageVisibility();\n    const reducedMotion = usePrefersReducedMotion();\n    const { sizingLabelRef, trackWidth } = useCyclingTextTrackWidth();\n    const {\n      cycle,\n      currentIndex,\n      currentLabel,\n      incomingLabel,\n      sizingLabel,\n      onOutgoingTransitionEnd,\n    } = useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transitionMs);\n\n    const itemCount = items.length;\n\n    // Notify the parent of the settled active index without re-subscribing when\n    // an inline callback identity changes each render — the latest is always\n    // read from the ref.\n    const onActiveIndexChangeRef = React.useRef(onActiveIndexChange);\n    React.useEffect(() => {\n      onActiveIndexChangeRef.current = onActiveIndexChange;\n    }, [onActiveIndexChange]);\n    React.useEffect(() => {\n      onActiveIndexChangeRef.current?.(currentIndex);\n    }, [currentIndex]);\n\n    const outgoingMotionStyle = React.useMemo((): React.CSSProperties => {\n      const durMs = reducedMotion ? 0 : transitionMs;\n      const exiting = cycle.transitioning;\n      const yExit = direction === \"up\" ? -SLIDE_OFFSET_PX : SLIDE_OFFSET_PX;\n      return {\n        opacity: exiting ? 0 : 1,\n        transform: exiting ? `translate3d(0, ${yExit}px, 0)` : \"translate3d(0, 0, 0)\",\n        transition:\n          exiting && durMs > 0\n            ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)`\n            : \"none\",\n      };\n    }, [cycle.transitioning, direction, transitionMs, reducedMotion]);\n\n    const incomingMotionStyle = React.useMemo((): React.CSSProperties => {\n      const durMs = reducedMotion ? 0 : transitionMs;\n      const entered = cycle.incomingEntered;\n      const yEnter = direction === \"up\" ? SLIDE_OFFSET_PX : -SLIDE_OFFSET_PX;\n      return {\n        opacity: entered ? 1 : 0,\n        transform: entered ? \"translate3d(0, 0, 0)\" : `translate3d(0, ${yEnter}px, 0)`,\n        transition:\n          durMs > 0\n            ? `opacity ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${durMs}ms cubic-bezier(0.4, 0, 0.2, 1)`\n            : \"none\",\n      };\n    }, [cycle.incomingEntered, direction, transitionMs, reducedMotion]);\n\n    if (itemCount === 0) {\n      return null;\n    }\n\n    const wrapperStyle = {\n      ...(trackWidth !== null ? { width: `${trackWidth}px` } : {}),\n      // paddingTop: SLIDE_OFFSET_PX,\n    } as React.CSSProperties;\n\n    const showIncoming = incomingLabel !== null && cycle.transitioning;\n\n    return (\n      <span\n        ref={ref}\n        data-testid=\"cycling-text\"\n        data-paused={paused ? \"true\" : undefined}\n        className={cn(\n          \"relative inline-flex items-center overflow-hidden align-middle leading-[inherit]\",\n          \"motion-safe:transition-[width] motion-safe:duration-300 motion-safe:ease-out\",\n          className,\n        )}\n        style={wrapperStyle}\n        {...rest}\n      >\n        <span\n          ref={sizingLabelRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none invisible inline-block select-none whitespace-nowrap leading-[inherit]\"\n        >\n          {sizingLabel}\n        </span>\n\n        <span\n          data-layer=\"current\"\n          aria-live={announceChanges ? \"polite\" : undefined}\n          aria-atomic={announceChanges ? true : undefined}\n          data-state={cycle.transitioning ? \"exit\" : \"idle\"}\n          onTransitionEnd={onOutgoingTransitionEnd}\n          className={cn(\n            \"absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]\",\n            labelClassName,\n          )}\n          style={outgoingMotionStyle}\n        >\n          {currentLabel}\n        </span>\n\n        {showIncoming ? (\n          <span\n            aria-hidden=\"true\"\n            data-layer=\"incoming\"\n            data-state={cycle.incomingEntered ? \"idle\" : \"enter\"}\n            className={cn(\n              \"absolute inset-0 flex items-center whitespace-nowrap leading-[inherit]\",\n              labelClassName,\n            )}\n            style={incomingMotionStyle}\n          >\n            {incomingLabel}\n          </span>\n        ) : null}\n      </span>\n    );\n  },\n);\n\nCyclingText.displayName = \"CyclingText\";\n"],"names":[],"mappings":"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"}

package/dist/components/CyclingText/useCyclingCycle.mjs

@@ -183,6 +183,7 @@ function useCyclingCycle(items, sizing, intervalMs, paused, docVisible, transiti
   );
   return {
     cycle,
+    currentIndex: safeCurrentIndex,
     currentLabel,
     incomingLabel,
     sizingLabel,

package/dist/components/CyclingText/useCyclingCycle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCyclingCycle.mjs","sources":["../../../src/components/CyclingText/useCyclingCycle.ts"],"sourcesContent":["import * as React from \"react\";\n\ntype CyclingTextSizingOption = \"longest\" | \"current\";\n\ntype CycleState = {\n  currentIndex: number;\n  incomingIndex: number | null;\n  incomingEntered: boolean;\n  transitioning: boolean;\n};\n\ntype CycleAction =\n  | { type: \"tick\"; itemCount: number }\n  | { type: \"incoming_entered\" }\n  | { type: \"transition_complete\" }\n  | { type: \"pause_clear\" }\n  | { type: \"clamp_after_items_change\"; itemCount: number };\n\nconst initialCycleState: CycleState = {\n  currentIndex: 0,\n  incomingIndex: null,\n  incomingEntered: false,\n  transitioning: false,\n};\n\nfunction cycleReducer(state: CycleState, action: CycleAction): CycleState {\n  switch (action.type) {\n    case \"tick\": {\n      if (action.itemCount <= 1) return state;\n      const next = (state.currentIndex + 1) % action.itemCount;\n      return {\n        ...state,\n        incomingIndex: next,\n        incomingEntered: false,\n        transitioning: true,\n      };\n    }\n    case \"incoming_entered\":\n      return { ...state, incomingEntered: true };\n    case \"transition_complete\": {\n      if (!state.transitioning || state.incomingIndex === null) return state;\n      return {\n        currentIndex: state.incomingIndex,\n        incomingIndex: null,\n        incomingEntered: false,\n        transitioning: false,\n      };\n    }\n    case \"pause_clear\":\n      return {\n        ...state,\n        incomingIndex: null,\n        incomingEntered: false,\n        transitioning: false,\n      };\n    case \"clamp_after_items_change\": {\n      if (action.itemCount === 0) return state;\n      const idx = state.currentIndex >= action.itemCount ? 0 : state.currentIndex;\n      return {\n        currentIndex: idx,\n        incomingIndex: null,\n        incomingEntered: false,\n        transitioning: false,\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nexport function useCyclingCycle(\n  items: readonly string[],\n  sizing: CyclingTextSizingOption,\n  intervalMs: number,\n  paused: boolean,\n  docVisible: boolean,\n  transitionMs: number,\n) {\n  const [cycle, dispatch] = React.useReducer(cycleReducer, initialCycleState);\n\n  const enterOuterFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const enterInnerFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const fallbackTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const cycleTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearCycleTimeout = React.useCallback(() => {\n    if (cycleTimeoutRef.current !== null) {\n      clearTimeout(cycleTimeoutRef.current);\n      cycleTimeoutRef.current = null;\n    }\n  }, []);\n\n  const clearAnimationArtifacts = React.useCallback(() => {\n    if (enterOuterFrameRef.current !== null) {\n      cancelAnimationFrame(enterOuterFrameRef.current);\n      enterOuterFrameRef.current = null;\n    }\n    if (enterInnerFrameRef.current !== null) {\n      cancelAnimationFrame(enterInnerFrameRef.current);\n      enterInnerFrameRef.current = null;\n    }\n    if (fallbackTimerRef.current !== null) {\n      clearTimeout(fallbackTimerRef.current);\n      fallbackTimerRef.current = null;\n    }\n    clearCycleTimeout();\n  }, [clearCycleTimeout]);\n\n  const itemCount = items.length;\n\n  React.useEffect(() => {\n    if (itemCount === 0) return;\n    dispatch({ type: \"clamp_after_items_change\", itemCount });\n  }, [itemCount]);\n\n  const safeCurrentIndex = itemCount === 0 ? 0 : cycle.currentIndex % itemCount;\n  const safeIncomingIndex =\n    cycle.incomingIndex === null || itemCount === 0 ? null : cycle.incomingIndex % itemCount;\n\n  const currentLabel = itemCount === 0 ? \"\" : (items[safeCurrentIndex] ?? \"\");\n  const incomingLabel = safeIncomingIndex === null ? null : (items[safeIncomingIndex] ?? \"\");\n\n  const longestItem = React.useMemo(() => {\n    if (itemCount === 0) return \"\";\n    let longest = items[0] ?? \"\";\n    for (const item of items) {\n      if (item.length > longest.length) longest = item;\n    }\n    return longest;\n  }, [items, itemCount]);\n\n  const sizingLabel =\n    sizing === \"longest\"\n      ? longestItem\n      : incomingLabel && incomingLabel.length > currentLabel.length\n        ? incomingLabel\n        : currentLabel;\n\n  const shouldCycle = !paused && docVisible && itemCount > 1;\n\n  React.useEffect(() => {\n    if (!shouldCycle || itemCount <= 1) {\n      clearCycleTimeout();\n      return;\n    }\n\n    if (cycle.transitioning) {\n      return;\n    }\n\n    cycleTimeoutRef.current = setTimeout(() => {\n      cycleTimeoutRef.current = null;\n      dispatch({ type: \"tick\", itemCount });\n    }, intervalMs);\n\n    return () => {\n      clearCycleTimeout();\n    };\n  }, [shouldCycle, itemCount, intervalMs, cycle.transitioning, clearCycleTimeout]);\n\n  React.useEffect(() => {\n    if (paused) {\n      clearAnimationArtifacts();\n      dispatch({ type: \"pause_clear\" });\n    }\n  }, [paused, clearAnimationArtifacts]);\n\n  React.useEffect(() => {\n    return () => {\n      clearAnimationArtifacts();\n    };\n  }, [clearAnimationArtifacts]);\n\n  React.useEffect(() => {\n    if (!cycle.transitioning || cycle.incomingIndex === null || cycle.incomingEntered) {\n      return;\n    }\n\n    if (enterOuterFrameRef.current !== null) {\n      cancelAnimationFrame(enterOuterFrameRef.current);\n    }\n    if (enterInnerFrameRef.current !== null) {\n      cancelAnimationFrame(enterInnerFrameRef.current);\n    }\n\n    enterOuterFrameRef.current = requestAnimationFrame(() => {\n      enterOuterFrameRef.current = null;\n      enterInnerFrameRef.current = requestAnimationFrame(() => {\n        enterInnerFrameRef.current = null;\n        dispatch({ type: \"incoming_entered\" });\n      });\n    });\n\n    return () => {\n      if (enterOuterFrameRef.current !== null) {\n        cancelAnimationFrame(enterOuterFrameRef.current);\n        enterOuterFrameRef.current = null;\n      }\n      if (enterInnerFrameRef.current !== null) {\n        cancelAnimationFrame(enterInnerFrameRef.current);\n        enterInnerFrameRef.current = null;\n      }\n    };\n  }, [cycle.transitioning, cycle.incomingIndex, cycle.incomingEntered]);\n\n  React.useEffect(() => {\n    if (!cycle.transitioning) {\n      return;\n    }\n    if (fallbackTimerRef.current !== null) {\n      clearTimeout(fallbackTimerRef.current);\n    }\n    fallbackTimerRef.current = setTimeout(() => {\n      dispatch({ type: \"transition_complete\" });\n      fallbackTimerRef.current = null;\n    }, transitionMs);\n\n    return () => {\n      if (fallbackTimerRef.current !== null) {\n        clearTimeout(fallbackTimerRef.current);\n        fallbackTimerRef.current = null;\n      }\n    };\n  }, [cycle.transitioning, transitionMs]);\n\n  const onOutgoingTransitionEnd = React.useCallback(\n    (event: React.TransitionEvent<HTMLSpanElement>) => {\n      if (!cycle.transitioning) return;\n      if (event.propertyName !== \"opacity\") return;\n      if (fallbackTimerRef.current !== null) {\n        clearTimeout(fallbackTimerRef.current);\n        fallbackTimerRef.current = null;\n      }\n      dispatch({ type: \"transition_complete\" });\n    },\n    [cycle.transitioning],\n  );\n\n  return {\n    cycle,\n    currentLabel,\n    incomingLabel,\n    sizingLabel,\n    onOutgoingTransitionEnd,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCyclingCycle.mjs","sources":["../../../src/components/CyclingText/useCyclingCycle.ts"],"sourcesContent":["import * as React from \"react\";\n\ntype CyclingTextSizingOption = \"longest\" | \"current\";\n\ntype CycleState = {\n  currentIndex: number;\n  incomingIndex: number | null;\n  incomingEntered: boolean;\n  transitioning: boolean;\n};\n\ntype CycleAction =\n  | { type: \"tick\"; itemCount: number }\n  | { type: \"incoming_entered\" }\n  | { type: \"transition_complete\" }\n  | { type: \"pause_clear\" }\n  | { type: \"clamp_after_items_change\"; itemCount: number };\n\nconst initialCycleState: CycleState = {\n  currentIndex: 0,\n  incomingIndex: null,\n  incomingEntered: false,\n  transitioning: false,\n};\n\nfunction cycleReducer(state: CycleState, action: CycleAction): CycleState {\n  switch (action.type) {\n    case \"tick\": {\n      if (action.itemCount <= 1) return state;\n      const next = (state.currentIndex + 1) % action.itemCount;\n      return {\n        ...state,\n        incomingIndex: next,\n        incomingEntered: false,\n        transitioning: true,\n      };\n    }\n    case \"incoming_entered\":\n      return { ...state, incomingEntered: true };\n    case \"transition_complete\": {\n      if (!state.transitioning || state.incomingIndex === null) return state;\n      return {\n        currentIndex: state.incomingIndex,\n        incomingIndex: null,\n        incomingEntered: false,\n        transitioning: false,\n      };\n    }\n    case \"pause_clear\":\n      return {\n        ...state,\n        incomingIndex: null,\n        incomingEntered: false,\n        transitioning: false,\n      };\n    case \"clamp_after_items_change\": {\n      if (action.itemCount === 0) return state;\n      const idx = state.currentIndex >= action.itemCount ? 0 : state.currentIndex;\n      return {\n        currentIndex: idx,\n        incomingIndex: null,\n        incomingEntered: false,\n        transitioning: false,\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nexport function useCyclingCycle(\n  items: readonly string[],\n  sizing: CyclingTextSizingOption,\n  intervalMs: number,\n  paused: boolean,\n  docVisible: boolean,\n  transitionMs: number,\n) {\n  const [cycle, dispatch] = React.useReducer(cycleReducer, initialCycleState);\n\n  const enterOuterFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const enterInnerFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n  const fallbackTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const cycleTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearCycleTimeout = React.useCallback(() => {\n    if (cycleTimeoutRef.current !== null) {\n      clearTimeout(cycleTimeoutRef.current);\n      cycleTimeoutRef.current = null;\n    }\n  }, []);\n\n  const clearAnimationArtifacts = React.useCallback(() => {\n    if (enterOuterFrameRef.current !== null) {\n      cancelAnimationFrame(enterOuterFrameRef.current);\n      enterOuterFrameRef.current = null;\n    }\n    if (enterInnerFrameRef.current !== null) {\n      cancelAnimationFrame(enterInnerFrameRef.current);\n      enterInnerFrameRef.current = null;\n    }\n    if (fallbackTimerRef.current !== null) {\n      clearTimeout(fallbackTimerRef.current);\n      fallbackTimerRef.current = null;\n    }\n    clearCycleTimeout();\n  }, [clearCycleTimeout]);\n\n  const itemCount = items.length;\n\n  React.useEffect(() => {\n    if (itemCount === 0) return;\n    dispatch({ type: \"clamp_after_items_change\", itemCount });\n  }, [itemCount]);\n\n  const safeCurrentIndex = itemCount === 0 ? 0 : cycle.currentIndex % itemCount;\n  const safeIncomingIndex =\n    cycle.incomingIndex === null || itemCount === 0 ? null : cycle.incomingIndex % itemCount;\n\n  const currentLabel = itemCount === 0 ? \"\" : (items[safeCurrentIndex] ?? \"\");\n  const incomingLabel = safeIncomingIndex === null ? null : (items[safeIncomingIndex] ?? \"\");\n\n  const longestItem = React.useMemo(() => {\n    if (itemCount === 0) return \"\";\n    let longest = items[0] ?? \"\";\n    for (const item of items) {\n      if (item.length > longest.length) longest = item;\n    }\n    return longest;\n  }, [items, itemCount]);\n\n  const sizingLabel =\n    sizing === \"longest\"\n      ? longestItem\n      : incomingLabel && incomingLabel.length > currentLabel.length\n        ? incomingLabel\n        : currentLabel;\n\n  const shouldCycle = !paused && docVisible && itemCount > 1;\n\n  React.useEffect(() => {\n    if (!shouldCycle || itemCount <= 1) {\n      clearCycleTimeout();\n      return;\n    }\n\n    if (cycle.transitioning) {\n      return;\n    }\n\n    cycleTimeoutRef.current = setTimeout(() => {\n      cycleTimeoutRef.current = null;\n      dispatch({ type: \"tick\", itemCount });\n    }, intervalMs);\n\n    return () => {\n      clearCycleTimeout();\n    };\n  }, [shouldCycle, itemCount, intervalMs, cycle.transitioning, clearCycleTimeout]);\n\n  React.useEffect(() => {\n    if (paused) {\n      clearAnimationArtifacts();\n      dispatch({ type: \"pause_clear\" });\n    }\n  }, [paused, clearAnimationArtifacts]);\n\n  React.useEffect(() => {\n    return () => {\n      clearAnimationArtifacts();\n    };\n  }, [clearAnimationArtifacts]);\n\n  React.useEffect(() => {\n    if (!cycle.transitioning || cycle.incomingIndex === null || cycle.incomingEntered) {\n      return;\n    }\n\n    if (enterOuterFrameRef.current !== null) {\n      cancelAnimationFrame(enterOuterFrameRef.current);\n    }\n    if (enterInnerFrameRef.current !== null) {\n      cancelAnimationFrame(enterInnerFrameRef.current);\n    }\n\n    enterOuterFrameRef.current = requestAnimationFrame(() => {\n      enterOuterFrameRef.current = null;\n      enterInnerFrameRef.current = requestAnimationFrame(() => {\n        enterInnerFrameRef.current = null;\n        dispatch({ type: \"incoming_entered\" });\n      });\n    });\n\n    return () => {\n      if (enterOuterFrameRef.current !== null) {\n        cancelAnimationFrame(enterOuterFrameRef.current);\n        enterOuterFrameRef.current = null;\n      }\n      if (enterInnerFrameRef.current !== null) {\n        cancelAnimationFrame(enterInnerFrameRef.current);\n        enterInnerFrameRef.current = null;\n      }\n    };\n  }, [cycle.transitioning, cycle.incomingIndex, cycle.incomingEntered]);\n\n  React.useEffect(() => {\n    if (!cycle.transitioning) {\n      return;\n    }\n    if (fallbackTimerRef.current !== null) {\n      clearTimeout(fallbackTimerRef.current);\n    }\n    fallbackTimerRef.current = setTimeout(() => {\n      dispatch({ type: \"transition_complete\" });\n      fallbackTimerRef.current = null;\n    }, transitionMs);\n\n    return () => {\n      if (fallbackTimerRef.current !== null) {\n        clearTimeout(fallbackTimerRef.current);\n        fallbackTimerRef.current = null;\n      }\n    };\n  }, [cycle.transitioning, transitionMs]);\n\n  const onOutgoingTransitionEnd = React.useCallback(\n    (event: React.TransitionEvent<HTMLSpanElement>) => {\n      if (!cycle.transitioning) return;\n      if (event.propertyName !== \"opacity\") return;\n      if (fallbackTimerRef.current !== null) {\n        clearTimeout(fallbackTimerRef.current);\n        fallbackTimerRef.current = null;\n      }\n      dispatch({ type: \"transition_complete\" });\n    },\n    [cycle.transitioning],\n  );\n\n  return {\n    cycle,\n    currentIndex: safeCurrentIndex,\n    currentLabel,\n    incomingLabel,\n    sizingLabel,\n    onOutgoingTransitionEnd,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Radio/Radio.mjs

@@ -16,7 +16,7 @@ const Radio = React.forwardRef(({ className, size = "default", label, helperText
         "data-testid": "radio",
         "aria-describedby": helperText ? helperTextId : void 0,
         className: cn(
-          "relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-content-primary bg-transparent transition-colors hover:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary not-disabled:active:bg-brand-primary-muted disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:bg-transparent data-[state=checked]:border-content-primary data-[state=checked]:bg-transparent",
+          "relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-content-primary bg-transparent transition-colors hover:bg-brand-primary-muted focus-visible:shadow-focus-ring focus-visible:outline-none not-disabled:active:bg-brand-primary-muted disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:bg-transparent data-[state=checked]:border-content-primary data-[state=checked]:bg-transparent",
           helperText && "mt-1 self-start"
         ),
         ...props,

package/dist/components/Radio/Radio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.mjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface RadioProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"asChild\"> {\n  /** Size variant controlling label and helper text typography. @default \"default\" */\n  size?: \"default\" | \"small\";\n  /** Label text displayed next to the radio button. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n}\n\n/**\n * A single radio option within a {@link RadioGroup}. Includes an optional label\n * and helper text.\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <Radio value=\"a\" label=\"Option A\" />\n *   <Radio value=\"b\" label=\"Option B\" />\n * </RadioGroup>\n * ```\n */\nexport const Radio = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  RadioProps\n>(({ className, size = \"default\", label, helperText, id, ...props }, ref) => {\n  const generatedId = React.useId();\n  const inputId = id || generatedId;\n  const helperTextId = `${inputId}-helper`;\n\n  return (\n    <div className={cn(\"group inline-flex items-center gap-2\", className)}>\n      <RadioGroupPrimitive.Item\n        ref={ref}\n        id={inputId}\n        data-testid=\"radio\"\n        aria-describedby={helperText ? helperTextId : undefined}\n        className={cn(\n          \"relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-content-primary bg-transparent transition-colors hover:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary not-disabled:active:bg-brand-primary-muted disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:bg-transparent data-[state=checked]:border-content-primary data-[state=checked]:bg-transparent\",\n          helperText && \"mt-1 self-start\",\n        )}\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"absolute inset-0 flex items-center justify-center\">\n          <span className=\"size-2 rounded-full bg-content-primary group-has-disabled:bg-neutral-alphas-600\" />\n        </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n      {(label || helperText) && (\n        <div className=\"flex flex-col gap-0.5\">\n          {label && (\n            <label\n              htmlFor={inputId}\n              className={cn(\n                \"cursor-pointer select-none text-content-primary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                size === \"small\"\n                  ? \"typography-body-small-14px-semibold\"\n                  : \"typography-body-default-16px-semibold\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n          {helperText && (\n            <span\n              id={helperTextId}\n              className={cn(\n                \"text-content-secondary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                size === \"small\"\n                  ? \"typography-body-small-14px-semibold\"\n                  : \"typography-description-12px-regular\",\n              )}\n            >\n              {helperText}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\n\nRadio.displayName = \"Radio\";\n"],"names":[],"mappings":";;;;;AA0BO,MAAM,QAAQ,MAAM,WAGzB,CAAC,EAAE,WAAW,OAAO,WAAW,OAAO,YAAY,IAAI,GAAG,MAAA,GAAS,QAAQ;AAC3E,QAAM,cAAc,MAAM,MAAA;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,eAAe,GAAG,OAAO;AAE/B,8BACG,OAAA,EAAI,WAAW,GAAG,wCAAwC,SAAS,GAClE,UAAA;AAAA,IAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,eAAY;AAAA,QACZ,oBAAkB,aAAa,eAAe;AAAA,QAC9C,WAAW;AAAA,UACT;AAAA,UACA,cAAc;AAAA,QAAA;AAAA,QAEf,GAAG;AAAA,QAEJ,UAAA,oBAAC,oBAAoB,WAApB,EAA8B,WAAU,qDACvC,UAAA,oBAAC,QAAA,EAAK,WAAU,kFAAA,CAAkF,EAAA,CACpG;AAAA,MAAA;AAAA,IAAA;AAAA,KAEA,SAAS,eACT,qBAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,MAAA,SACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,SAAS,UACL,wCACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,cACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAW;AAAA,YACT;AAAA,YACA,SAAS,UACL,wCACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GAEJ;AAEJ,CAAC;AAED,MAAM,cAAc;"}
+{"version":3,"file":"Radio.mjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface RadioProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, \"asChild\"> {\n  /** Size variant controlling label and helper text typography. @default \"default\" */\n  size?: \"default\" | \"small\";\n  /** Label text displayed next to the radio button. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n}\n\n/**\n * A single radio option within a {@link RadioGroup}. Includes an optional label\n * and helper text.\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <Radio value=\"a\" label=\"Option A\" />\n *   <Radio value=\"b\" label=\"Option B\" />\n * </RadioGroup>\n * ```\n */\nexport const Radio = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  RadioProps\n>(({ className, size = \"default\", label, helperText, id, ...props }, ref) => {\n  const generatedId = React.useId();\n  const inputId = id || generatedId;\n  const helperTextId = `${inputId}-helper`;\n\n  return (\n    <div className={cn(\"group inline-flex items-center gap-2\", className)}>\n      <RadioGroupPrimitive.Item\n        ref={ref}\n        id={inputId}\n        data-testid=\"radio\"\n        aria-describedby={helperText ? helperTextId : undefined}\n        className={cn(\n          \"relative h-4 w-4 shrink-0 cursor-pointer appearance-none rounded-full border border-content-primary bg-transparent transition-colors hover:bg-brand-primary-muted focus-visible:shadow-focus-ring focus-visible:outline-none not-disabled:active:bg-brand-primary-muted disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:bg-transparent data-[state=checked]:border-content-primary data-[state=checked]:bg-transparent\",\n          helperText && \"mt-1 self-start\",\n        )}\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"absolute inset-0 flex items-center justify-center\">\n          <span className=\"size-2 rounded-full bg-content-primary group-has-disabled:bg-neutral-alphas-600\" />\n        </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n      {(label || helperText) && (\n        <div className=\"flex flex-col gap-0.5\">\n          {label && (\n            <label\n              htmlFor={inputId}\n              className={cn(\n                \"cursor-pointer select-none text-content-primary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                size === \"small\"\n                  ? \"typography-body-small-14px-semibold\"\n                  : \"typography-body-default-16px-semibold\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n          {helperText && (\n            <span\n              id={helperTextId}\n              className={cn(\n                \"text-content-secondary group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                size === \"small\"\n                  ? \"typography-body-small-14px-semibold\"\n                  : \"typography-description-12px-regular\",\n              )}\n            >\n              {helperText}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\n\nRadio.displayName = \"Radio\";\n"],"names":[],"mappings":";;;;;AA0BO,MAAM,QAAQ,MAAM,WAGzB,CAAC,EAAE,WAAW,OAAO,WAAW,OAAO,YAAY,IAAI,GAAG,MAAA,GAAS,QAAQ;AAC3E,QAAM,cAAc,MAAM,MAAA;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,eAAe,GAAG,OAAO;AAE/B,8BACG,OAAA,EAAI,WAAW,GAAG,wCAAwC,SAAS,GAClE,UAAA;AAAA,IAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,eAAY;AAAA,QACZ,oBAAkB,aAAa,eAAe;AAAA,QAC9C,WAAW;AAAA,UACT;AAAA,UACA,cAAc;AAAA,QAAA;AAAA,QAEf,GAAG;AAAA,QAEJ,UAAA,oBAAC,oBAAoB,WAApB,EAA8B,WAAU,qDACvC,UAAA,oBAAC,QAAA,EAAK,WAAU,kFAAA,CAAkF,EAAA,CACpG;AAAA,MAAA;AAAA,IAAA;AAAA,KAEA,SAAS,eACT,qBAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,MAAA,SACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,SAAS,UACL,wCACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,cACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAW;AAAA,YACT;AAAA,YACA,SAAS,UACL,wCACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GAEJ;AAEJ,CAAC;AAED,MAAM,cAAc;"}

package/dist/components/Slider/SliderThumb.mjs

@@ -40,7 +40,7 @@ function SliderThumb({
         "transition-shadow duration-150",
         "hover:ring-2 hover:ring-brand-primary-default",
         "not-data-disabled:active:ring-2 not-data-disabled:active:ring-brand-primary-default",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary",
+        "focus-visible:shadow-focus-ring focus-visible:outline-none",
         "data-disabled:cursor-not-allowed"
       ),
       children: [