@rovula/ui 0.0.69 → 0.0.70

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/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';
@@ -736,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;
@@ -749,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

@@ -2361,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;
@@ -2452,6 +2457,10 @@ input[type=number] {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .flex {
   display: flex;
 }
@@ -2663,6 +2672,10 @@ input[type=number] {
   width: 0.5rem;
 }
 
+.w-28 {
+  width: 7rem;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -2753,6 +2766,10 @@ input[type=number] {
   min-width: fit-content;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -3027,6 +3044,10 @@ input[type=number] {
   text-overflow: ellipsis;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -4889,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);
@@ -5545,6 +5571,10 @@ input[type=number] {
   text-transform: capitalize;
 }
 
+.leading-\[3rem\] {
+  line-height: 3rem;
+}
+
 .leading-none {
   line-height: 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.69",
+  "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>
+  );
+};

package/src/index.ts

@@ -40,6 +40,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 component types
 export type { ButtonProps } from "./components/Button/Button";