@rovula/ui 0.1.20 → 0.1.22

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -27,14 +27,13 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      // "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-primary data-[state=open]:bg-primary",
-      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-4 pr-4 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
       "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
       "active:opacity-75",
       "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
       "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
@@ -52,8 +51,8 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      "z-50 min-w-[154px] overflow-hidden rounded-lg bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
     )}
     {...props}
     style={{
@@ -74,8 +73,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        "z-50 min-w-[154px] overflow-hidden rounded-lg bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
       )}
       {...props}
       style={{
@@ -91,45 +90,88 @@ const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
+    selected?: boolean;
+    icon?: React.ReactNode;
   }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
-      "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
-      "active:opacity-75",
-      "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
-      "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-));
+>(({ className, inset, selected, icon, children, ...props }, ref) => {
+  const hasIcon = !!icon;
+  return (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        "relative flex cursor-pointer select-none box-border items-center py-4 pl-4 pr-8 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
+        "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
+        "active:opacity-75",
+        "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
+        selected &&
+          "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitle5",
+        "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
+        inset && "pl-8",
+        className,
+        hasIcon ? "gap-4" : "gap-1",
+      )}
+      {...props}
+    >
+      <div className="flex shrink-0 flex-row gap-1">
+        <span className="size-4 flex items-center justify-center">
+          {selected && (
+            <Icon
+              type="heroicons"
+              name="check"
+              className="size-4 text-[var(--dropdown-menu-selected-text)]"
+            />
+          )}
+        </span>
+        {icon}
+      </div>
+      {children}
+    </DropdownMenuPrimitive.Item>
+  );
+});
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+>(({ className, children, checked, disabled, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-4 pr-8 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
       "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
       "active:opacity-75",
       "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
-      "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitle5",
+      "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]",
       "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
-      className
+      className,
     )}
     checked={checked}
+    disabled={disabled}
     {...props}
   >
-    <span className="absolute left-4 flex items-center justify-center">
+    <span
+      className={cn(
+        "shrink-0 size-4 rounded-[2px] border flex items-center justify-center transition-all overflow-hidden",
+        checked &&
+          !disabled &&
+          "bg-[var(--dropdown-menu-checkbox-checked-bg)] border-[var(--dropdown-menu-checkbox-checked-bg)]",
+        checked &&
+          disabled &&
+          "bg-[var(--dropdown-menu-checkbox-disabled-checked-bg)] border-transparent",
+        !checked &&
+          disabled &&
+          "border-[var(--dropdown-menu-checkbox-disabled-border)]",
+        !checked &&
+          !disabled &&
+          "border-[var(--dropdown-menu-checkbox-border)]",
+      )}
+    >
       <DropdownMenuPrimitive.ItemIndicator>
-        <Icon type="heroicons" name="check" className="size-4" />
+        <Icon
+          type="heroicons"
+          name="check"
+          className="size-3 text-[var(--dropdown-menu-checkbox-checked-icon)]"
+        />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -140,29 +182,50 @@ DropdownMenuCheckboxItem.displayName =
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
-      "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
-      "active:opacity-75",
-      "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
-      "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitle5",
-      "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-4 flex items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Icon type="heroicons" name="circle" className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    icon?: React.ReactNode;
+  }
+>(({ className, children, disabled, icon, ...props }, ref) => {
+  const hasIconSlot = !!icon;
+
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        "relative flex cursor-pointer select-none box-border items-center py-4 pl-4 pr-8 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
+        "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
+        "active:opacity-75",
+        "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
+        "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]",
+        "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-radio-disabled-text)]",
+        "data-[state='checked']:data-[disabled]:!text-[var(--dropdown-menu-radio-selected-disabled-text)]",
+        className,
+        hasIconSlot ? "gap-4" : "gap-1",
+      )}
+      {...props}
+      disabled={disabled}
+    >
+      <div className="flex shrink-0 flex-row gap-1">
+        <span className="size-4">
+          <DropdownMenuPrimitive.ItemIndicator className="shrink-0">
+            <Icon
+              type="heroicons"
+              name="check"
+              className={cn(
+                "size-4",
+                disabled
+                  ? "text-[var(--dropdown-menu-radio-selected-disabled-text)]"
+                  : "text-[var(--dropdown-menu-selected-text)]",
+              )}
+            />
+          </DropdownMenuPrimitive.ItemIndicator>
+        </span>
+        {icon}
+      </div>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+});
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
@@ -174,9 +237,9 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-3 py-2 typography-small4 text-text-g-contrast-medium",
+      "px-3 py-2 typography-small4 text-text-g-contrast-high",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -190,8 +253,8 @@ const DropdownMenuSeparator = React.forwardRef<
   <DropdownMenuPrimitive.Separator
     ref={ref}
     className={cn(
-      "-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]",
-      className
+      "h-px bg-[var(--dropdown-menu-seperator-bg)]",
+      className,
     )}
     {...props}
   />

package/src/components/Form/Form.stories.tsx

@@ -362,6 +362,76 @@ export const RenderPropsCodeControl = {
   },
 } satisfies Story;
 
+export const FormStateChangeCallback = {
+  args: {},
+  render: () => {
+    const [isFormValid, setIsFormValid] = useState(false);
+    const [isDirty, setIsDirty] = useState(false);
+    const [submitCount, setSubmitCount] = useState(0);
+
+    const schema = yup.object({
+      title: yup.string().required("Title is required"),
+      description: yup
+        .string()
+        .required("Description is required")
+        .min(10, "Description must be at least 10 characters"),
+    });
+
+    return (
+      <div className="flex flex-col gap-4">
+        {/* Simulates a parent component (e.g. modal footer) that controls the submit button */}
+        <div className="rounded-md border border-bg-stroke1 bg-bg-bg2 p-3 text-xs text-text-g-contrast-medium space-y-1">
+          <div>
+            Validity:{" "}
+            <span className={isFormValid ? "text-state-success-default" : "text-state-error-default"}>
+              {isFormValid ? "valid" : "invalid"}
+            </span>
+          </div>
+          <div>Dirty: {isDirty ? "yes" : "no"}</div>
+          <div>Submit count: {submitCount}</div>
+        </div>
+
+        <Form<CodeControlFormValues>
+          className="flex flex-col gap-3"
+          defaultValues={{ title: "", description: "" }}
+          mode="onTouched"
+          reValidateMode="onChange"
+          validationSchema={schema}
+          onSubmit={(values) => {
+            setSubmitCount((prev) => prev + 1);
+            // eslint-disable-next-line no-console
+            console.log("Submitted:", values);
+          }}
+          onFormStateChange={(formState) => {
+            setIsFormValid(formState.isValid);
+            setIsDirty(formState.isDirty);
+          }}
+        >
+          <Field<CodeControlFormValues, "title">
+            name="title"
+            component={TextInput}
+            componentProps={{ label: "Title", required: true }}
+          />
+          <Field<CodeControlFormValues, "description">
+            name="description"
+            component={TextInput}
+            componentProps={{
+              label: "Description",
+              helperText: "At least 10 characters",
+              required: true,
+            }}
+          />
+
+          {/* Submit button lives inside Form — receives isFormValid from parent state */}
+          <Button type="submit" disabled={!isFormValid}>
+            Submit
+          </Button>
+        </Form>
+      </div>
+    );
+  },
+} satisfies Story;
+
 export const HigherLayerCodeControl = {
   args: {},
   render: () => {

package/src/components/Form/Form.tsx

@@ -3,11 +3,13 @@ import {
   DefaultValues,
   FieldValues,
   FormProvider,
+  FormState,
   Mode,
   Resolver,
   SubmitErrorHandler,
   SubmitHandler,
   useForm,
+  useFormContext,
   UseFormReturn,
 } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -35,6 +37,7 @@ export type FormProps<TFieldValues extends FieldValues> = Omit<
   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;
@@ -132,6 +135,20 @@ export const useControlledForm = <TFieldValues extends FieldValues>({
   };
 };
 
+const FormStateObserver = <TFieldValues extends FieldValues>({
+  onFormStateChange,
+}: {
+  onFormStateChange: (formState: FormState<TFieldValues>) => void;
+}) => {
+  const { formState } = useFormContext<TFieldValues>();
+
+  React.useEffect(() => {
+    onFormStateChange(formState);
+  }, [formState, onFormStateChange]);
+
+  return null;
+};
+
 const FormInner = <TFieldValues extends FieldValues>(
   {
     children,
@@ -140,6 +157,7 @@ const FormInner = <TFieldValues extends FieldValues>(
     controllerRef,
     onSubmit,
     onInvalidSubmit,
+    onFormStateChange,
     resolver,
     validationSchema,
     mode = "onSubmit",
@@ -195,6 +213,11 @@ const FormInner = <TFieldValues extends FieldValues>(
         noValidate={noValidate}
         onSubmit={methods.handleSubmit(onSubmit, onInvalidSubmit)}
       >
+        {onFormStateChange && (
+          <FormStateObserver<TFieldValues>
+            onFormStateChange={onFormStateChange}
+          />
+        )}
         {typeof children === "function" ? children(methods) : children}
       </form>
     </FormProvider>

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -0,0 +1,229 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ScrollArea } from "./ScrollArea";
+
+const meta = {
+  title: "Components/ScrollArea",
+  component: ScrollArea,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-10 flex gap-8 flex-wrap bg-workspace-surface min-h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+
+const ITEMS = Array.from({ length: 12 }, (_, i) => `Option Description ${i + 1}`);
+
+// ---------------------------------------------------------------------------
+// Size variants  (Figma: Size=M / S / XS)
+// ---------------------------------------------------------------------------
+export const Sizes = {
+  name: "Size Variants",
+  render: () => (
+    <div className="flex gap-10 items-start">
+      {(["m", "s", "xs"] as const).map((size) => (
+        <div key={size}>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2 uppercase">
+            Size {size}
+          </p>
+          <ScrollArea
+            scrollbarSize={size}
+            className="max-h-[270px] w-[200px] rounded-lg bg-modal-surface"
+          >
+            {ITEMS.map((label) => (
+              <div
+                key={label}
+                className="px-4 py-3 typography-subtitle4 text-text-g-contrast-high"
+              >
+                {label}
+              </div>
+            ))}
+          </ScrollArea>
+        </div>
+      ))}
+    </div>
+  ),
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Vertical scroll  (Figma: Can Scroll)
+// ---------------------------------------------------------------------------
+export const VerticalScroll = {
+  name: "Vertical Scroll",
+  render: () => (
+    <div>
+      <p className="typography-small4 text-text-g-contrast-medium mb-2">
+        Single scrollable list — use{" "}
+        <code className="text-xs">&lt;ScrollArea className="max-h-[...]"&gt;</code>
+      </p>
+      <ScrollArea className="max-h-[270px] w-[230px] rounded-lg bg-modal-surface">
+        {ITEMS.map((label) => (
+          <div
+            key={label}
+            className="px-4 py-3 typography-subtitle4 text-text-g-contrast-high"
+          >
+            {label}
+          </div>
+        ))}
+      </ScrollArea>
+    </div>
+  ),
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Horizontal scroll  (Figma: Horizontal=Yes)
+// ---------------------------------------------------------------------------
+export const HorizontalScroll = {
+  name: "Horizontal Scroll",
+  render: () => (
+    <div>
+      <p className="typography-small4 text-text-g-contrast-medium mb-2">
+        Horizontal — pass{" "}
+        <code className="text-xs">direction="horizontal"</code>
+      </p>
+      <ScrollArea
+        direction="horizontal"
+        className="max-w-[300px] rounded-lg bg-modal-surface"
+      >
+        <div className="flex">
+          {ITEMS.map((label) => (
+            <div
+              key={label}
+              className="shrink-0 w-[140px] px-4 py-3 typography-subtitle4 text-text-g-contrast-high border-r border-[var(--dropdown-menu-seperator-bg)]"
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  ),
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Double scroll  (Figma: Double Scroll — two independent sections)
+// ---------------------------------------------------------------------------
+export const DoubleScroll = {
+  name: "Double Scroll",
+  render: () => (
+    <div>
+      <p className="typography-small4 text-text-g-contrast-medium mb-4">
+        Two independent scrollable sections inside one container.
+        <br />
+        Wrap each section in its own{" "}
+        <code className="text-xs">&lt;ScrollArea&gt;</code>.
+      </p>
+      <div className="w-[230px] rounded-lg bg-modal-surface overflow-hidden">
+        {/* Section A */}
+        <div className="px-3 pt-4 pb-2 typography-small4 text-text-g-contrast-high">
+          Section A
+        </div>
+        <ScrollArea className="max-h-[160px]">
+          {ITEMS.slice(0, 8).map((label) => (
+            <div
+              key={label}
+              className="px-4 py-3 typography-subtitle4 text-text-g-contrast-high"
+            >
+              {label}
+            </div>
+          ))}
+        </ScrollArea>
+
+        {/* Separator */}
+        <div className="h-px bg-[var(--dropdown-menu-seperator-bg)] my-2" />
+
+        {/* Section B */}
+        <div className="px-3 pt-2 pb-2 typography-small4 text-text-g-contrast-high">
+          Section B
+        </div>
+        <ScrollArea className="max-h-[160px]">
+          {ITEMS.slice(0, 8).map((label) => (
+            <div
+              key={label}
+              className="px-4 py-3 typography-subtitle4 text-text-g-contrast-high"
+            >
+              {label}
+            </div>
+          ))}
+        </ScrollArea>
+      </div>
+    </div>
+  ),
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Usage with DropdownMenu  (Figma: Can Scroll / Double Scroll in dropdown)
+// ---------------------------------------------------------------------------
+export const WithDropdownMenu = {
+  name: "Usage with DropdownMenu",
+  render: () => {
+    // Inline-import to avoid circular storybook deps — client should import from "@core/ui"
+    const {
+      DropdownMenu,
+      DropdownMenuContent,
+      DropdownMenuItem,
+      DropdownMenuLabel,
+      DropdownMenuSeparator,
+      DropdownMenuTrigger,
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+    } = require("../DropdownMenu/DropdownMenu");
+    const Button = require("../Button/Button").default;
+
+    return (
+      <div className="flex gap-8 items-start flex-wrap">
+        {/* Single scrollable dropdown */}
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Can Scroll
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open Menu</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <ScrollArea className="max-h-[270px]">
+                {ITEMS.map((label) => (
+                  <DropdownMenuItem key={label}>{label}</DropdownMenuItem>
+                ))}
+              </ScrollArea>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {/* Double scroll dropdown */}
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Double Scroll
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open Menu</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuLabel>Section A</DropdownMenuLabel>
+              <ScrollArea className="max-h-[160px]">
+                {ITEMS.slice(0, 8).map((label) => (
+                  <DropdownMenuItem key={label}>{label}</DropdownMenuItem>
+                ))}
+              </ScrollArea>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Section B</DropdownMenuLabel>
+              <ScrollArea className="max-h-[160px]">
+                {ITEMS.slice(0, 8).map((label) => (
+                  <DropdownMenuItem key={label}>{label}</DropdownMenuItem>
+                ))}
+              </ScrollArea>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;