@rovula/ui 0.0.69 → 0.0.71

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

@@ -2,7 +2,6 @@ export declare const iconWrapperVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const dropdownIconVariant: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
     disabled?: boolean | null | undefined;
     isFocus?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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;
 }
@@ -5936,12 +5966,6 @@ input[type=number] {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-\[0px_2px_24px_0px_rgba\(145\2c _158\2c _171\2c _0\.24\)\] {
-  --tw-shadow: 0px 2px 24px 0px rgba(145, 158, 171, 0.24);
-  --tw-shadow-colored: 0px 2px 24px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -5954,11 +5978,6 @@ input[type=number] {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-\[var\(--dropdown-menu-shadow\)\] {
-  --tw-shadow-color: var(--dropdown-menu-shadow);
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;

package/package.json

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

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -141,6 +141,8 @@ export const CustomOption = {
     fullwidth: true,
     options: customOptions,
     filterMode: true,
+
+    // iconMode: "flat",
   },
   render: (args) => {
     console.log("args ", args);

package/src/components/Dropdown/Dropdown.styles.ts

@@ -19,11 +19,12 @@ export const iconWrapperVariant = cva(
 
 export const dropdownIconVariant = cva(["transition-all"], {
   variants: {
-    size: {
-      sm: "size-[14px]",
-      md: "size-5",
-      lg: "size-6",
-    },
+    // Controll by text-input
+    // size: {
+    //   sm: "size-[14px]",
+    //   md: "size-5",
+    //   lg: "size-6",
+    // },
     disabled: {
       true: "fill-input-text-disabled",
       false: "fill-inherit",
@@ -34,7 +35,6 @@ export const dropdownIconVariant = cva(["transition-all"], {
     },
   },
   defaultVariants: {
-    size: "md",
     disabled: false,
     isFocus: false,
   },

package/src/components/Dropdown/Dropdown.tsx

@@ -12,11 +12,7 @@ import React, {
 } from "react";
 import * as Portal from "@radix-ui/react-portal";
 import TextInput, { InputProps } from "../TextInput/TextInput";
-import {
-  customInputVariant,
-  dropdownIconVariant,
-  iconWrapperVariant,
-} from "./Dropdown.styles";
+import { customInputVariant, dropdownIconVariant } from "./Dropdown.styles";
 
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
@@ -339,11 +335,9 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         <TextInput
           hasClearIcon={false}
           endIcon={
-            <div className={iconWrapperVariant({ size })}>
-              <ChevronDownIcon
-                className={dropdownIconVariant({ size, isFocus: isFocused })}
-              />
-            </div>
+            <ChevronDownIcon
+              className={dropdownIconVariant({ isFocus: isFocused })}
+            />
           }
           {...props}
           ref={inputRef}

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -52,10 +52,14 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground shadow-[var(--dropdown-menu-shadow)] 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",
+      "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground 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={{
+      boxShadow: "var(--dropdown-menu-shadow)",
+      ...props.style,
+    }}
   />
 ));
 DropdownMenuSubContent.displayName =
@@ -70,10 +74,14 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground shadow-[0px_2px_24px_0px_rgba(145,_158,_171,_0.24)] 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",
+        "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground 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={{
+        boxShadow: "var(--dropdown-menu-shadow)",
+        ...props.style,
+      }}
     />
   </DropdownMenuPrimitive.Portal>
 ));

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";