@rovula/ui 0.1.20 → 0.1.22

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { cn } from "@/utils/cn";
+
+export type ScrollbarSize = "m" | "s" | "xs";
+
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Scrollbar thickness.
+   * - `m`  — 12 px  (shows track border)
+   * - `s`  — 6 px   (default, shows no track border)
+   * - `xs` — 2 px   (shows no track border)
+   */
+  scrollbarSize?: ScrollbarSize;
+  /**
+   * Direction(s) the area can scroll.
+   * Defaults to `"vertical"`.
+   */
+  direction?: "vertical" | "horizontal" | "both";
+}
+
+const sizeClass: Record<ScrollbarSize, string> = {
+  m: "ui-scrollbar ui-scrollbar-m",
+  s: "ui-scrollbar ui-scrollbar-s",
+  xs: "ui-scrollbar ui-scrollbar-xs",
+};
+
+const directionClass: Record<NonNullable<ScrollAreaProps["direction"]>, string> = {
+  vertical: "overflow-y-auto overflow-x-hidden",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto",
+};
+
+/**
+ * ScrollArea
+ *
+ * A thin wrapper that applies the design-system scrollbar style to any
+ * scrollable container. Use `scrollbarSize` to pick the Figma size variant
+ * and `direction` to control which axis scrolls.
+ *
+ * **Client usage:**
+ * ```tsx
+ * <ScrollArea className="max-h-[270px]">
+ *   {items.map(item => <div key={item.id}>{item.label}</div>)}
+ * </ScrollArea>
+ * ```
+ *
+ * For a double-scroll layout (two independent sections inside one dropdown),
+ * wrap each section individually:
+ * ```tsx
+ * <ScrollArea className="max-h-[160px]">...section A items...</ScrollArea>
+ * <ScrollArea className="max-h-[160px]">...section B items...</ScrollArea>
+ * ```
+ */
+export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
+  (
+    { className, scrollbarSize = "s", direction = "vertical", children, ...props },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      className={cn(
+        directionClass[direction],
+        sizeClass[scrollbarSize],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
+ScrollArea.displayName = "ScrollArea";

package/src/components/TextInput/TextInput.tsx

@@ -2,13 +2,13 @@ import React, {
   ReactNode,
   forwardRef,
   useCallback,
-  useImperativeHandle,
   useMemo,
   useRef,
   FocusEvent,
   KeyboardEvent,
   ChangeEvent,
 } from "react";
+import { useStableMergedRef } from "@/utils/mergeRefs";
 import {
   helperTextVariant,
   iconActionVariant,
@@ -111,6 +111,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const _id = id || `${type}-${label}-input`;
+
+    // Stable merged ref — identity never changes so Headless UI (or any library
+    // that watches refs) won't trigger detach/re-attach loops.
+    const stableRef = useStableMergedRef(ref, inputRef);
     const hasLeftSectionIcon = !!startIcon || !!renderStartIcon;
     const hasRightSectionIcon = !!endIcon || !!renderEndIcon;
     const feedbackStatus =
@@ -183,7 +187,6 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       position: "end",
     });
 
-    useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
 
     const handleChange = useCallback(
       (e: ChangeEvent<HTMLInputElement>) => {
@@ -382,7 +385,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
           <input
             {...props}
             placeholder=" "
-            ref={inputRef}
+            ref={stableRef}
             type={type}
             id={_id}
             disabled={disabled}

package/src/index.ts

@@ -19,6 +19,7 @@ export { Navbar } from "./components/Navbar";
 export { Footer } from "./components/Footer";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
+export { Badge, SeverityBadge } from "./components/Badge";
 export { Collapsible } from "./components/Collapsible";
 export { Calendar } from "./components/Calendar";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
@@ -41,7 +42,6 @@ export * from "./components/InputFilter/InputFilter";
 export * from "./components/Slider/Slider";
 export * from "./components/Switch/Switch";
 export * from "./components/DropdownMenu/DropdownMenu";
-export * from "./components/Menu/Menu";
 export * from "./components/Tooltip/Tooltip";
 export * from "./components/Tooltip/TooltipSimple";
 export * from "./components/Toast/Toast";
@@ -49,12 +49,14 @@ export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
 export * from "./components/Tree";
 export * from "./components/FocusedScrollView/FocusedScrollView";
+export * from "./components/ScrollArea/ScrollArea";
 export * from "./components/RadioGroup/RadioGroup";
 export * from "./components/Form";
 
 // Patterns
 export * from "./patterns/confirm-dialog/ConfirmDialog";
 export * from "./patterns/form-dialog/FormDialog";
+export * from "./patterns/menu/Menu";
 
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";
@@ -73,6 +75,7 @@ export type { NavbarProps, NavbarVariant } from "./components/Navbar/Navbar";
 export type { FooterProps, FooterVariant } from "./components/Footer/Footer";
 export type { AvatarProps } from "./components/Avatar/Avatar";
 export type { AvatarGroupProps } from "./components/Avatar/AvatarGroup";
+export type { BadgeProps, BadgeColor, SeverityBadgeProps, SeverityLevel } from "./components/Badge/Badge";
 
 // UTILS
 export {