@rovula/ui 0.1.18 → 0.1.21

package/dist/esm/types/components/DropdownMenu/DropdownMenu.stories.d.ts

@@ -15,40 +15,39 @@ declare const meta: {
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
-export declare const Default: {
-    args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+export declare const AllStates: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
 };
 export declare const WithIcon: {
-    args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
 };
-export declare const WithLabel: {
-    args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+export declare const WithCheckbox: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
 };
-export declare const Checkboxes: {
-    args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+export declare const WithSection: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithSearch: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const CanScroll: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const DoubleScroll: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
 };
 export declare const SubMenu: {
-    args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
-};
-export declare const OnIcon: {
-    args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
-};
-export declare const AsChild: {
-    args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
-};
-export declare const Position: {
-    args: {
-        side: string;
-        align: string;
-        sideOffset: number;
-        alignOffset: number;
-    };
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const TriggerVariants: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
 };

package/dist/esm/types/components/Form/Form.d.ts

@@ -1,5 +1,5 @@
 import React, { FormHTMLAttributes, ReactNode } from "react";
-import { DefaultValues, FieldValues, Mode, Resolver, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { DefaultValues, FieldValues, FormState, Mode, Resolver, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
 import * as yup from "yup";
 type FormChildren<TFieldValues extends FieldValues> = ReactNode | ((methods: UseFormReturn<TFieldValues>) => ReactNode);
 export type FormController<TFieldValues extends FieldValues> = {
@@ -16,6 +16,7 @@ export type FormProps<TFieldValues extends FieldValues> = Omit<FormHTMLAttribute
     controllerRef?: React.MutableRefObject<FormController<TFieldValues> | null>;
     onSubmit: SubmitHandler<TFieldValues>;
     onInvalidSubmit?: SubmitErrorHandler<TFieldValues>;
+    onFormStateChange?: (formState: FormState<TFieldValues>) => void;
     resolver?: Resolver<TFieldValues>;
     validationSchema?: yup.ObjectSchema<any>;
     mode?: Mode;

package/dist/esm/types/components/Form/Form.stories.d.ts

@@ -17,6 +17,10 @@ export declare const RenderPropsCodeControl: {
     args: {};
     render: () => import("react/jsx-runtime").JSX.Element;
 };
+export declare const FormStateChangeCallback: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
 export declare const HigherLayerCodeControl: {
     args: {};
     render: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+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";
+}
+/**
+ * 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 declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/types/components/ScrollArea/ScrollArea.stories.d.ts

@@ -0,0 +1,301 @@
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./ScrollArea").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        scrollbarSize?: import("./ScrollArea").ScrollbarSize | undefined;
+        direction?: "vertical" | "horizontal" | "both" | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        className?: string | undefined | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contextMenu?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        hidden?: boolean | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: React.CSSProperties | undefined;
+        tabIndex?: number | undefined | undefined;
+        title?: string | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radioGroup?: string | undefined | undefined;
+        role?: React.AriaRole | undefined;
+        about?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
+        children?: React.ReactNode;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+        onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onResize?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onResizeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+        ref?: React.LegacyRef<HTMLDivElement> | undefined;
+        key?: React.Key | null | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export declare const Sizes: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const VerticalScroll: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const HorizontalScroll: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const DoubleScroll: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithDropdownMenu: {
+    name: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/types/index.d.ts

@@ -42,6 +42,7 @@ 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";
 export * from "./patterns/confirm-dialog/ConfirmDialog";

package/dist/esm/types/patterns/confirm-dialog/ConfirmDialog.d.ts

@@ -4,6 +4,7 @@ export type ConfirmDialogProps = {
     onOpenChange?: (open: boolean) => void;
     title: string;
     description?: string;
+    children?: React.ReactNode;
     confirmLabel?: string;
     cancelLabel?: string;
     onConfirm?: () => void;

package/dist/esm/types/patterns/confirm-dialog/ConfirmDialog.stories.d.ts

@@ -13,6 +13,7 @@ declare const meta: {
         onOpenChange?: ((open: boolean) => void) | undefined;
         title: string;
         description?: string | undefined;
+        children?: React.ReactNode;
         confirmLabel?: string | undefined;
         cancelLabel?: string | undefined;
         onConfirm?: (() => void) | undefined;

package/dist/index.d.ts

@@ -17,7 +17,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import { ToastProviderProps } from '@radix-ui/react-toast';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { FieldValues, UseFormReturn, DefaultValues, SubmitHandler, SubmitErrorHandler, Resolver, Mode, FieldPath, RegisterOptions, FieldPathValue } from 'react-hook-form';
+import { FieldValues, UseFormReturn, DefaultValues, SubmitHandler, SubmitErrorHandler, FormState, Resolver, Mode, FieldPath, RegisterOptions, FieldPathValue } from 'react-hook-form';
 import * as yup from 'yup';
 import Button$1 from '@/components/Button/Button';
 import { ClassValue } from 'clsx';
@@ -1166,6 +1166,44 @@ type FocusedScrollViewProps = {
 };
 declare const FocusedScrollView: React__default.FC<FocusedScrollViewProps>;
 
+type ScrollbarSize = "m" | "s" | "xs";
+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";
+}
+/**
+ * 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>
+ * ```
+ */
+declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+
 declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
@@ -1184,6 +1222,7 @@ type FormProps<TFieldValues extends FieldValues> = Omit<FormHTMLAttributes<HTMLF
     controllerRef?: React__default.MutableRefObject<FormController<TFieldValues> | null>;
     onSubmit: SubmitHandler<TFieldValues>;
     onInvalidSubmit?: SubmitErrorHandler<TFieldValues>;
+    onFormStateChange?: (formState: FormState<TFieldValues>) => void;
     resolver?: Resolver<TFieldValues>;
     validationSchema?: yup.ObjectSchema<any>;
     mode?: Mode;
@@ -1287,6 +1326,7 @@ type ConfirmDialogProps = {
     onOpenChange?: (open: boolean) => void;
     title: string;
     description?: string;
+    children?: React.ReactNode;
     confirmLabel?: string;
     cancelLabel?: string;
     onConfirm?: () => void;
@@ -1788,4 +1828,4 @@ declare const srgbToHex: (color: string) => string;
  */
 declare function getLucideIconNames(): Promise<string[]>;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, ConfirmDialog, type ConfirmDialogProps, type ControlledFormFactoryOptions, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Field, FieldMessage, type FieldMessageProps, type FieldProps, FocusedScrollView, Footer, type FooterProps, type FooterVariant, Form, type FormController, FormDialog, type FormDialogAction, type FormDialogProps, type FormProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Menu, MenuItem, type MenuItemType, MenuLabel, type MenuOption, type MenuProps, MenuSeparator, Navbar, type NavbarProps, type NavbarVariant, NumberInput, type NumberInputProps, type OptionLike, type Options$1 as Options, OtpInput, OtpInputGroup, type OtpInputGroupProps, type OtpInputProps, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, THEME_COLOR_KEYS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, type ThemeColorKey, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, type UseControlledFormOptions, type UseOptionBridgeOptions, ValidationHintList, type ValidationHintListProps, type ValidationHintMode, type ValidationHintRule, type ValidationHintState, cn, createControlledForm, createYupResolver, getEndDateOfDay, getLucideIconNames, getStartDateOfDay, getStartEndTimestampOfDay, getThemeColor, getThemeColors, getTimestampUTC, reducer, resloveTimestamp, srgbToHex, toast, useControlledForm, useOptionBridge, usePrevious, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, ConfirmDialog, type ConfirmDialogProps, type ControlledFormFactoryOptions, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Field, FieldMessage, type FieldMessageProps, type FieldProps, FocusedScrollView, Footer, type FooterProps, type FooterVariant, Form, type FormController, FormDialog, type FormDialogAction, type FormDialogProps, type FormProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Menu, MenuItem, type MenuItemType, MenuLabel, type MenuOption, type MenuProps, MenuSeparator, Navbar, type NavbarProps, type NavbarVariant, NumberInput, type NumberInputProps, type OptionLike, type Options$1 as Options, OtpInput, OtpInputGroup, type OtpInputGroupProps, type OtpInputProps, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, ScrollArea, type ScrollAreaProps, type ScrollbarSize, Search, type SearchProps, Slider, type SliderProps, Switch, THEME_COLOR_KEYS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, type ThemeColorKey, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, type UseControlledFormOptions, type UseOptionBridgeOptions, ValidationHintList, type ValidationHintListProps, type ValidationHintMode, type ValidationHintRule, type ValidationHintState, cn, createControlledForm, createYupResolver, getEndDateOfDay, getLucideIconNames, getStartDateOfDay, getStartEndTimestampOfDay, getThemeColor, getThemeColors, getTimestampUTC, reducer, resloveTimestamp, srgbToHex, toast, useControlledForm, useOptionBridge, usePrevious, useToast };

package/dist/index.js

@@ -44,6 +44,7 @@ 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

package/dist/patterns/confirm-dialog/ConfirmDialog.js

@@ -5,7 +5,7 @@ import * as yup from "yup";
 import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel, AlertDialogTrigger, } from "@/components/AlertDialog/AlertDialog";
 import { useControlledForm, Field } from "@/components/Form";
 import { TextInput } from "@/components/TextInput/TextInput";
-export const ConfirmDialog = ({ open, onOpenChange, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onClose, trigger, typeToConfirm, hideCancelButton = false, testId, cancelClassName, confirmClassName, }) => {
+export const ConfirmDialog = ({ open, onOpenChange, title, description, children, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, onClose, trigger, typeToConfirm, hideCancelButton = false, testId, cancelClassName, confirmClassName, }) => {
     const formId = React.useId();
     const requiresInput = !!typeToConfirm;
     const validationSchema = React.useMemo(() => yup.object({
@@ -33,7 +33,7 @@ export const ConfirmDialog = ({ open, onOpenChange, title, description, confirmL
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    return (_jsxs(AlertDialog, { open: open, onOpenChange: handleOpenChange, children: [trigger && _jsx(AlertDialogTrigger, { asChild: true, children: trigger }), _jsxs(AlertDialogContent, { "data-testid": testId, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { "data-testid": testId && `${testId}-title`, children: title }), description && (_jsx(AlertDialogDescription, { "data-testid": testId && `${testId}-description`, children: description }))] }), requiresInput && (_jsxs(FormRoot, { id: formId, className: "flex flex-col gap-4 w-full", onSubmit: () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), children: [_jsxs("p", { className: "typography-small1 text-text-contrast-max", children: ["Type \u201C", typeToConfirm, "\u201D to proceed."] }), _jsx(Field, { name: "confirmInput", component: TextInput, componentProps: {
+    return (_jsxs(AlertDialog, { open: open, onOpenChange: handleOpenChange, children: [trigger && _jsx(AlertDialogTrigger, { asChild: true, children: trigger }), _jsxs(AlertDialogContent, { "data-testid": testId, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { "data-testid": testId && `${testId}-title`, children: title }), description && (_jsx(AlertDialogDescription, { "data-testid": testId && `${testId}-description`, children: description }))] }), children, requiresInput && (_jsxs(FormRoot, { id: formId, className: "flex flex-col gap-4 w-full", onSubmit: () => onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(), children: [_jsxs("p", { className: "typography-small1 text-text-contrast-max", children: ["Type \u201C", typeToConfirm, "\u201D to proceed."] }), _jsx(Field, { name: "confirmInput", component: TextInput, componentProps: {
                                     label: "Type to confirm",
                                     required: true,
                                     hasClearIcon: true,

package/dist/patterns/form-dialog/FormDialog.js

@@ -5,6 +5,6 @@ import Button from "@/components/Button/Button";
 export const FormDialog = ({ open, onOpenChange, title, description, children, trigger, confirmAction, cancelAction, extraAction, scrollable = false, className, formId, testId, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const hasFooter = confirmAction || cancelAction || extraAction;
-    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(DialogTrigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: className, "data-testid": testId, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { "data-testid": testId && `${testId}-title`, children: title }), description && (_jsx(DialogDescription, { "data-testid": testId && `${testId}-description`, children: description }))] }), children && (_jsx(DialogBody, { scrollable: scrollable, children: children })), hasFooter && (_jsxs(DialogFooter, { className: extraAction ? "justify-between" : undefined, children: [extraAction && (_jsx(Button, { type: (_a = extraAction.type) !== null && _a !== void 0 ? _a : "button", variant: (_b = extraAction.variant) !== null && _b !== void 0 ? _b : "outline", color: (_c = extraAction.color) !== null && _c !== void 0 ? _c : "secondary", fullwidth: false, disabled: extraAction.disabled, isLoading: extraAction.isLoading, onClick: extraAction.onClick, className: extraAction.className, "data-testid": testId && `${testId}-extra-button`, children: extraAction.label })), _jsxs("div", { className: "flex items-center gap-4", children: [cancelAction && (_jsx(Button, { type: (_d = cancelAction.type) !== null && _d !== void 0 ? _d : "button", variant: (_e = cancelAction.variant) !== null && _e !== void 0 ? _e : "outline", color: (_f = cancelAction.color) !== null && _f !== void 0 ? _f : "primary", fullwidth: false, disabled: cancelAction.disabled, isLoading: cancelAction.isLoading, onClick: cancelAction.onClick, className: cancelAction.className, "data-testid": testId && `${testId}-cancel-button`, children: cancelAction.label })), confirmAction && (_jsx(Button, { type: formId ? "submit" : (_g = confirmAction.type) !== null && _g !== void 0 ? _g : "button", form: formId, variant: (_h = confirmAction.variant) !== null && _h !== void 0 ? _h : "solid", color: (_j = confirmAction.color) !== null && _j !== void 0 ? _j : "primary", fullwidth: false, disabled: confirmAction.disabled, isLoading: confirmAction.isLoading, onClick: confirmAction.onClick, className: confirmAction.className, "data-testid": testId && `${testId}-confirm-button`, children: confirmAction.label }))] })] }))] })] }));
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(DialogTrigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: className, "data-testid": testId, children: [_jsxs(DialogHeader, { children: [title && (_jsx(DialogTitle, { "data-testid": testId && `${testId}-title`, children: title })), description && (_jsx(DialogDescription, { "data-testid": testId && `${testId}-description`, children: description }))] }), children && (_jsx(DialogBody, { scrollable: scrollable, children: children })), hasFooter && (_jsxs(DialogFooter, { className: extraAction ? "justify-between" : undefined, children: [extraAction && (_jsx(Button, { type: (_a = extraAction.type) !== null && _a !== void 0 ? _a : "button", variant: (_b = extraAction.variant) !== null && _b !== void 0 ? _b : "outline", color: (_c = extraAction.color) !== null && _c !== void 0 ? _c : "secondary", fullwidth: false, disabled: extraAction.disabled, isLoading: extraAction.isLoading, onClick: extraAction.onClick, className: extraAction.className, "data-testid": testId && `${testId}-extra-button`, children: extraAction.label })), _jsxs("div", { className: "flex items-center gap-4", children: [cancelAction && (_jsx(Button, { type: (_d = cancelAction.type) !== null && _d !== void 0 ? _d : "button", variant: (_e = cancelAction.variant) !== null && _e !== void 0 ? _e : "outline", color: (_f = cancelAction.color) !== null && _f !== void 0 ? _f : "primary", fullwidth: false, disabled: cancelAction.disabled, isLoading: cancelAction.isLoading, onClick: cancelAction.onClick, className: cancelAction.className, "data-testid": testId && `${testId}-cancel-button`, children: cancelAction.label })), confirmAction && (_jsx(Button, { type: formId ? "submit" : (_g = confirmAction.type) !== null && _g !== void 0 ? _g : "button", form: formId, variant: (_h = confirmAction.variant) !== null && _h !== void 0 ? _h : "solid", color: (_j = confirmAction.color) !== null && _j !== void 0 ? _j : "primary", fullwidth: false, disabled: confirmAction.disabled, isLoading: confirmAction.isLoading, onClick: confirmAction.onClick, className: confirmAction.className, "data-testid": testId && `${testId}-confirm-button`, children: confirmAction.label }))] })] }))] })] }));
 };
 FormDialog.displayName = "FormDialog";