@rovula/ui 0.0.68 → 0.0.70

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

@@ -359,10 +359,12 @@ declare const meta: {
         placeholder?: string | undefined | undefined;
         readOnly?: boolean | undefined | undefined;
         src?: string | undefined | undefined;
+        iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
         labelClassName?: string | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;

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

@@ -0,0 +1,12 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+type ScrollAlign = "start" | "center" | "end";
+type FocusedScrollViewProps = {
+    selectedKey?: string;
+    children: ReactNode;
+    direction?: "vertical" | "horizontal";
+    className?: string;
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    scrollAlign?: ScrollAlign;
+};
+export declare const FocusedScrollView: React.FC<FocusedScrollViewProps>;
+export {};

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FocusedScrollView } from "./FocusedScrollView";
+declare const meta: Meta<typeof FocusedScrollView>;
+export default meta;
+type Story = StoryObj<typeof FocusedScrollView>;
+export declare const VerticalScroll: Story;
+export declare const HorizontalScroll: Story;

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

@@ -349,10 +349,12 @@ declare const meta: {
         placeholder?: string | undefined | undefined;
         readOnly?: boolean | undefined | undefined;
         src?: string | undefined | undefined;
+        iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
         labelClassName?: string | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;

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

@@ -310,11 +310,13 @@ declare const meta: {
         required?: boolean | undefined;
         src?: string | undefined | undefined;
         label?: string | undefined;
+        iconMode?: "flat" | "solid" | undefined;
         helperText?: string | undefined;
         errorMessage?: string | undefined;
         labelClassName?: string | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
         modal?: boolean | undefined;
         optionContainerClassName?: string | undefined;

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

@@ -5,6 +5,7 @@ export type InputProps = {
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    iconMode?: "flat" | "solid";
     type?: React.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
@@ -22,6 +23,7 @@ export type InputProps = {
     labelClassName?: string;
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
+    renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 export declare const TextInput: React.ForwardRefExoticComponent<{
@@ -30,6 +32,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    iconMode?: "flat" | "solid";
     type?: React.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
@@ -47,6 +50,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     labelClassName?: string;
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
+    renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
 export default TextInput;

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

@@ -7,6 +7,7 @@ declare const meta: {
         size?: "sm" | "md" | "lg";
         rounded?: "none" | "normal" | "full";
         variant?: "flat" | "outline" | "underline";
+        iconMode?: "flat" | "solid";
         type?: React.HTMLInputTypeAttribute;
         helperText?: string;
         errorMessage?: string;
@@ -24,6 +25,7 @@ declare const meta: {
         labelClassName?: string;
         onClickStartIcon?: () => void;
         onClickEndIcon?: () => void;
+        renderStartIcon?: () => React.ReactNode;
         renderEndIcon?: () => React.ReactNode;
     } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
@@ -36,6 +38,7 @@ declare const meta: {
         size?: "sm" | "md" | "lg" | undefined;
         rounded?: "none" | "normal" | "full" | undefined;
         variant?: "flat" | "outline" | "underline" | undefined;
+        iconMode?: "flat" | "solid" | undefined;
         type?: React.HTMLInputTypeAttribute | undefined;
         helperText?: string | undefined;
         errorMessage?: string | undefined;
@@ -53,6 +56,7 @@ declare const meta: {
         labelClassName?: string | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
         suppressHydrationWarning?: boolean | undefined | undefined;
         color?: string | undefined | undefined;
@@ -371,3 +375,10 @@ export declare const FuctionInput: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const CustomIcon: {
+    args: {
+        label: string;
+        disabled: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/types/components/TextInput/TextInput.styles.d.ts

@@ -15,6 +15,7 @@ export declare const labelVariant: (props?: ({
     disabled?: boolean | null | undefined;
     error?: boolean | null | undefined;
     hasSearchIcon?: boolean | null | undefined;
+    hasLeftSectionIcon?: boolean | null | undefined;
     isFloatingLabel?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const helperTextVariant: (props?: ({

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

@@ -33,6 +33,7 @@ export * from "./components/Toast/Toast";
 export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
 export * from "./components/Tree";
+export * from "./components/FocusedScrollView/FocusedScrollView";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactElement, ReactNode, CSSProperties, FC, ComponentPropsWithoutRef } from 'react';
+import React__default, { ReactElement, ReactNode, CSSProperties, FC, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -49,6 +49,7 @@ type InputProps = {
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    iconMode?: "flat" | "solid";
     type?: React__default.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
@@ -66,6 +67,7 @@ type InputProps = {
     labelClassName?: string;
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
+    renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size">;
 declare const TextInput: React__default.ForwardRefExoticComponent<{
@@ -74,6 +76,7 @@ declare const TextInput: React__default.ForwardRefExoticComponent<{
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    iconMode?: "flat" | "solid";
     type?: React__default.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
@@ -91,6 +94,7 @@ declare const TextInput: React__default.ForwardRefExoticComponent<{
     labelClassName?: string;
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
+    renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & React__default.RefAttributes<HTMLInputElement>>;
 
@@ -732,6 +736,17 @@ declare const Tree: FC<TreeProps>;
 
 declare const TreeItem: FC<TreeItemProps>;
 
+type ScrollAlign = "start" | "center" | "end";
+type FocusedScrollViewProps = {
+    selectedKey?: string;
+    children: ReactNode;
+    direction?: "vertical" | "horizontal";
+    className?: string;
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    scrollAlign?: ScrollAlign;
+};
+declare const FocusedScrollView: React__default.FC<FocusedScrollViewProps>;
+
 declare const resloveTimestamp: (timestamp: number) => number;
 declare const getStartDateOfDay: (date: Date) => Date;
 declare const getEndDateOfDay: (date: Date) => Date;
@@ -745,4 +760,4 @@ declare function usePrevious<T>(value: T): T | undefined;
 
 declare function cn(...inputs: ClassValue[]): 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, DataTable, type DataTableProps, DatePicker, Dialog, 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, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, 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, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, 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, DataTable, type DataTableProps, DatePicker, Dialog, 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, FocusedScrollView, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, 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, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, usePrevious, useToast };

package/dist/index.js

@@ -35,6 +35,7 @@ export * from "./components/Toast/Toast";
 export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
 export * from "./components/Tree";
+export * from "./components/FocusedScrollView/FocusedScrollView";
 // UTILS
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 // Hooks

package/dist/src/theme/global.css

@@ -2284,10 +2284,22 @@ input[type=number] {
   left: 2.25rem;
 }
 
+.left-\[38px\] {
+  left: 38px;
+}
+
+.left-\[46px\] {
+  left: 46px;
+}
+
 .left-\[50\%\] {
   left: 50%;
 }
 
+.left-\[72px\] {
+  left: 72px;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -2349,6 +2361,11 @@ input[type=number] {
   margin-right: -0.5rem;
 }
 
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -2440,6 +2457,10 @@ input[type=number] {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .flex {
   display: flex;
 }
@@ -2651,6 +2672,10 @@ input[type=number] {
   width: 0.5rem;
 }
 
+.w-28 {
+  width: 7rem;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -2741,6 +2766,10 @@ input[type=number] {
   min-width: fit-content;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -3015,6 +3044,10 @@ input[type=number] {
   text-overflow: ellipsis;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -3047,6 +3080,21 @@ input[type=number] {
   border-radius: var(--radius-radius-xs);
 }
 
+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
+.rounded-l-none {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.rounded-l-xl {
+  border-top-left-radius: var(--radius-radius-xl);
+  border-bottom-left-radius: var(--radius-radius-xl);
+}
+
 .rounded-r-full {
   border-top-right-radius: 9999px;
   border-bottom-right-radius: 9999px;
@@ -3094,6 +3142,10 @@ input[type=number] {
   border-left-width: 1px;
 }
 
+.border-r {
+  border-right-width: 1px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -3359,6 +3411,16 @@ input[type=number] {
   border-left-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-r-input-default-stroke {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.border-r-input-error {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .border-t-secondary {
   --tw-border-opacity: 1;
   border-top-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -4848,6 +4910,11 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--other-transparency-warning-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
 .bg-white-transparent-12 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--other-transparency-white-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -5504,6 +5571,10 @@ input[type=number] {
   text-transform: capitalize;
 }
 
+.leading-\[3rem\] {
+  line-height: 3rem;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -7977,6 +8048,11 @@ input[type=number] {
   border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.peer:hover ~ .peer-hover\:border-r-input-active-stroke {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .peer:hover ~ .peer-hover\:fill-input-filled-text {
   fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
 }
@@ -8006,6 +8082,11 @@ input[type=number] {
   border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.peer:focus ~ .peer-focus\:border-r-input-active-stroke {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .peer:focus ~ .peer-focus\:bg-input-label-bg {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--input-color-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -8062,6 +8143,11 @@ input[type=number] {
   border-left-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.peer:disabled ~ .peer-disabled\:border-r-input-disable-stroke {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .peer:disabled ~ .peer-disabled\:fill-input-disable-stroke {
   fill: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/FocusedScrollView/FocusedScrollView.stories.tsx

@@ -0,0 +1,114 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import { FocusedScrollView } from "./FocusedScrollView";
+
+const meta: Meta<typeof FocusedScrollView> = {
+  title: "Components/FocusedScrollView",
+  component: FocusedScrollView,
+  args: {
+    direction: "vertical",
+    scrollAlign: "center",
+    className: "border border-input-default-stroke rounded",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FocusedScrollView>;
+
+const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`);
+
+export const VerticalScroll: Story = {
+  render: (args) => {
+    const [selected, setSelected] = useState("item-5");
+
+    return (
+      <div className="p-6 space-y-4">
+        <div className="flex gap-2">
+          <button
+            onClick={() => setSelected("item-5")}
+            className="px-3 py-1 bg-primary text-white rounded"
+          >
+            Scroll to Item 5
+          </button>
+          <button
+            onClick={() => setSelected("item-20")}
+            className="px-3 py-1 bg-primary text-white rounded"
+          >
+            Scroll to Item 20
+          </button>
+          <button
+            onClick={() => setSelected("item-29")}
+            className="px-3 py-1 bg-primary text-white rounded"
+          >
+            Scroll to Item 30
+          </button>
+        </div>
+
+        <FocusedScrollView {...args} selectedKey={selected}>
+          {items.map((item, index) => (
+            <div
+              key={`item-${index + 1}`}
+              className={`px-4 py-2 ${
+                selected === `item-${index + 1}`
+                  ? "bg-secondary text-secondary-foreground"
+                  : "bg-white"
+              }`}
+            >
+              {item}
+            </div>
+          ))}
+        </FocusedScrollView>
+      </div>
+    );
+  },
+};
+
+export const HorizontalScroll: Story = {
+  args: {
+    direction: "horizontal",
+  },
+  render: (args) => {
+    const [selected, setSelected] = useState("item-15");
+
+    return (
+      <div className="p-6 space-y-4">
+        <div className="flex gap-2">
+          <button
+            onClick={() => setSelected("item-5")}
+            className="px-3 py-1 bg-primary text-white rounded"
+          >
+            Scroll to Item 5
+          </button>
+          <button
+            onClick={() => setSelected("item-15")}
+            className="px-3 py-1 bg-primary text-white rounded"
+          >
+            Scroll to Item 15
+          </button>
+          <button
+            onClick={() => setSelected("item-25")}
+            className="px-3 py-1 bg-primary text-white rounded"
+          >
+            Scroll to Item 25
+          </button>
+        </div>
+
+        <FocusedScrollView {...args} selectedKey={selected}>
+          {items.map((item, index) => (
+            <div
+              key={`item-${index + 1}`}
+              className={`inline-block w-28 h-12 mx-2 text-center leading-[3rem] rounded ${
+                selected === `item-${index + 1}`
+                  ? "bg-secondary text-secondary-foreground"
+                  : "bg-gray-200"
+              }`}
+            >
+              {item}
+            </div>
+          ))}
+        </FocusedScrollView>
+      </div>
+    );
+  },
+};

package/src/components/FocusedScrollView/FocusedScrollView.tsx

@@ -0,0 +1,112 @@
+import React, {
+  useRef,
+  useEffect,
+  cloneElement,
+  ReactNode,
+  isValidElement,
+  HTMLAttributes,
+} from "react";
+
+type ScrollAlign = "start" | "center" | "end";
+
+type FocusedScrollViewProps = {
+  selectedKey?: string;
+  children: ReactNode;
+  direction?: "vertical" | "horizontal";
+  className?: string;
+  containerProps?: HTMLAttributes<HTMLDivElement>;
+  scrollAlign?: ScrollAlign;
+};
+
+export const FocusedScrollView: React.FC<FocusedScrollViewProps> = ({
+  selectedKey,
+  children,
+  direction = "vertical",
+  className,
+  containerProps,
+  scrollAlign = "center",
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  const scrollToItem = (key: string) => {
+    const container = containerRef.current;
+    const item = itemRefs.current[key];
+
+    if (container && item) {
+      if (direction === "vertical") {
+        const containerTop = container.getBoundingClientRect().top;
+        const itemTop = item.getBoundingClientRect().top;
+        const offset = itemTop - containerTop + container.scrollTop;
+
+        const containerHeight = container.clientHeight;
+        const itemHeight = item.offsetHeight;
+
+        let targetTop = offset;
+
+        if (scrollAlign === "center") {
+          targetTop = offset - (containerHeight / 2 - itemHeight / 2);
+        } else if (scrollAlign === "end") {
+          targetTop = offset + (itemHeight - containerHeight);
+        }
+
+        container.scrollTo({
+          top: targetTop,
+          behavior: "smooth",
+        });
+      } else if (direction === "horizontal") {
+        const containerLeft = container.getBoundingClientRect().left;
+        const itemLeft = item.getBoundingClientRect().left;
+        const offset = itemLeft - containerLeft + container.scrollLeft;
+
+        const containerWidth = container.clientWidth;
+        const itemWidth = item.offsetWidth;
+
+        let targetLeft = offset;
+
+        if (scrollAlign === "center") {
+          targetLeft = offset - (containerWidth / 2 - itemWidth / 2);
+        } else if (scrollAlign === "end") {
+          targetLeft = offset + (itemWidth - containerWidth);
+        }
+
+        container.scrollTo({
+          left: targetLeft,
+          behavior: "smooth",
+        });
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (selectedKey) {
+      scrollToItem(selectedKey);
+    }
+  }, [selectedKey, direction, scrollAlign]);
+
+  const enhancedChildren = Array.isArray(children)
+    ? children.map((child) => {
+        if (isValidElement(child) && child.key) {
+          return cloneElement(child, {
+            // @ts-ignore
+            ref: (el: HTMLDivElement) => {
+              itemRefs.current[String(child.key)] = el;
+            },
+          });
+        }
+        return child;
+      })
+    : children;
+
+  return (
+    <div
+      ref={containerRef}
+      className={`overflow-auto ${
+        direction === "vertical" ? "max-h-60" : "max-w-full whitespace-nowrap"
+      } ${className ?? ""}`}
+      {...containerProps}
+    >
+      {enhancedChildren}
+    </div>
+  );
+};