@rovula/ui 0.0.69 → 0.0.71

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/components/Dropdown/Dropdown.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import * as Portal from "@radix-ui/react-portal";
 import TextInput 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";
 const Dropdown = forwardRef((_a, ref) => {
@@ -170,7 +170,7 @@ const Dropdown = forwardRef((_a, ref) => {
         keyCode.current = e.code;
         (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }, [props === null || props === void 0 ? void 0 : props.onKeyDown]);
-    return (_jsxs("div", { className: `relative  ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx("div", { className: iconWrapperVariant({ size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size, isFocus: isFocused }) }) }) }, props, { ref: inputRef, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused &&
+    return (_jsxs("div", { className: `relative  ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ isFocus: isFocused }) }) }, props, { ref: inputRef, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused &&
                 (usePortal ? (_jsx(Portal.Root, { container: document.body, children: renderOptions() })) : (renderOptions()))] }));
 });
 export default Dropdown;

package/dist/components/Dropdown/Dropdown.stories.js

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

package/dist/components/Dropdown/Dropdown.styles.js

@@ -13,11 +13,12 @@ export const iconWrapperVariant = cva(["absolute inset-y-0 right-0 flex items-ce
 });
 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",
@@ -28,7 +29,6 @@ export const dropdownIconVariant = cva(["transition-all"], {
         },
     },
     defaultVariants: {
-        size: "md",
         disabled: false,
         isFocus: false,
     },

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -31,13 +31,13 @@ DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DropdownMenuPrimitive.SubContent, Object.assign({ 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", className) }, props)));
+    return (_jsx(DropdownMenuPrimitive.SubContent, Object.assign({ ref: ref, className: cn("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: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })));
 });
 DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef((_a, ref) => {
     var { className, sideOffset = 4 } = _a, props = __rest(_a, ["className", "sideOffset"]);
-    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ 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", className) }, props)) }));
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn("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: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })) }));
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef((_a, ref) => {

package/dist/components/FocusedScrollView/FocusedScrollView.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, cloneElement, isValidElement, } from "react";
+export const FocusedScrollView = ({ selectedKey, children, direction = "vertical", className, containerProps, scrollAlign = "center", }) => {
+    const containerRef = useRef(null);
+    const itemRefs = useRef({});
+    const scrollToItem = (key) => {
+        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) => {
+                        itemRefs.current[String(child.key)] = el;
+                    },
+                });
+            }
+            return child;
+        })
+        : children;
+    return (_jsx("div", Object.assign({ ref: containerRef, className: `overflow-auto ${direction === "vertical" ? "max-h-60" : "max-w-full whitespace-nowrap"} ${className !== null && className !== void 0 ? className : ""}` }, containerProps, { children: enhancedChildren })));
+};

package/dist/components/FocusedScrollView/FocusedScrollView.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FocusedScrollView } from "./FocusedScrollView";
+const meta = {
+    title: "Components/FocusedScrollView",
+    component: FocusedScrollView,
+    args: {
+        direction: "vertical",
+        scrollAlign: "center",
+        className: "border border-input-default-stroke rounded",
+    },
+};
+export default meta;
+const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`);
+export const VerticalScroll = {
+    render: (args) => {
+        const [selected, setSelected] = useState("item-5");
+        return (_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => setSelected("item-5"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 5" }), _jsx("button", { onClick: () => setSelected("item-20"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 20" }), _jsx("button", { onClick: () => setSelected("item-29"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 30" })] }), _jsx(FocusedScrollView, Object.assign({}, args, { selectedKey: selected, children: items.map((item, index) => (_jsx("div", { className: `px-4 py-2 ${selected === `item-${index + 1}`
+                            ? "bg-secondary text-secondary-foreground"
+                            : "bg-white"}`, children: item }, `item-${index + 1}`))) }))] }));
+    },
+};
+export const HorizontalScroll = {
+    args: {
+        direction: "horizontal",
+    },
+    render: (args) => {
+        const [selected, setSelected] = useState("item-15");
+        return (_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => setSelected("item-5"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 5" }), _jsx("button", { onClick: () => setSelected("item-15"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 15" }), _jsx("button", { onClick: () => setSelected("item-25"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 25" })] }), _jsx(FocusedScrollView, Object.assign({}, args, { selectedKey: selected, children: items.map((item, index) => (_jsx("div", { 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"}`, children: item }, `item-${index + 1}`))) }))] }));
+    },
+};

package/dist/esm/bundle.css

@@ -675,6 +675,10 @@ input[type=number] {
   margin-left: -0.5rem;
   margin-right: -0.5rem;
 }
+.mx-2{
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
 .mx-4{
   margin-left: 1rem;
   margin-right: 1rem;
@@ -744,6 +748,9 @@ input[type=number] {
 .block{
   display: block;
 }
+.inline-block{
+  display: inline-block;
+}
 .flex{
   display: flex;
 }
@@ -906,6 +913,9 @@ input[type=number] {
 .w-2{
   width: 0.5rem;
 }
+.w-28{
+  width: 7rem;
+}
 .w-3{
   width: 0.75rem;
 }
@@ -974,6 +984,9 @@ input[type=number] {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
+.max-w-full{
+  max-width: 100%;
+}
 .max-w-lg{
   max-width: 32rem;
 }
@@ -1185,6 +1198,9 @@ input[type=number] {
 .text-ellipsis{
   text-overflow: ellipsis;
 }
+.whitespace-nowrap{
+  white-space: nowrap;
+}
 .rounded{
   border-radius: 0.25rem;
 }
@@ -2669,6 +2685,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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);
@@ -3184,6 +3204,9 @@ input[type=number] {
 .capitalize{
   text-transform: capitalize;
 }
+.leading-\[3rem\]{
+  line-height: 3rem;
+}
 .leading-none{
   line-height: 1;
 }
@@ -3494,11 +3517,6 @@ input[type=number] {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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-\[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);
@@ -3509,10 +3527,6 @@ input[type=number] {
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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-\[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;