@rovula/ui 0.1.22 → 0.1.24

package/dist/cjs/types/patterns/menu/Menu.d.ts

@@ -14,6 +14,8 @@ export type MenuOption = {
     danger?: boolean;
     checked?: boolean;
     onClick?: () => void;
+    /** data-testid attached to the item element */
+    testId?: string;
 };
 export type MenuItemType = {
     type: "item";
@@ -61,9 +63,11 @@ export type MenuProps = {
     side?: "top" | "right" | "bottom" | "left";
     sideOffset?: number;
     contentClassName?: string;
+    /** data-testid attached to the menu content element */
+    testId?: string;
 };
 export declare const Menu: {
-    ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, testId, }: MenuProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { DropdownMenuItem as MenuItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuLabel as MenuLabel, } from "../../components/DropdownMenu/DropdownMenu";

package/dist/cjs/types/patterns/menu/Menu.stories.d.ts

@@ -4,7 +4,7 @@ import { Menu, MenuItemType } from "./Menu";
 declare const meta: {
     title: string;
     component: {
-        ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, }: import("./Menu").MenuProps): import("react/jsx-runtime").JSX.Element;
+        ({ trigger, items, selectedValues, onSelect, header, open, onOpenChange, align, side, sideOffset, contentClassName, testId, }: import("./Menu").MenuProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     parameters: {
@@ -22,6 +22,7 @@ declare const meta: {
         side?: "top" | "right" | "bottom" | "left" | undefined;
         sideOffset?: number | undefined;
         contentClassName?: string | undefined;
+        testId?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/components/ActionButton/ActionButton.styles.js

@@ -1,22 +1,27 @@
 import { cva } from "class-variance-authority";
-export const actionButtonVariants = cva(["box-border flex items-center justify-center"], {
+export const actionButtonVariants = cva([
+    "box-border flex items-center justify-center outline-none focus-visible:outline-none",
+], {
     variants: {
         variant: {
             solid: [
                 "bg-action-button-solid-default border-action-button-solid-default text-action-button-solid-default fill-action-button-solid-default",
                 "hover:bg-action-button-solid-hover hover:border-action-button-solid-hover hover:text-action-button-solid-hover hover:fill-action-button-solid-hover",
                 "active:bg-action-button-solid-pressed active:border-action-button-solid-pressed active:text-action-button-solid-pressed active:fill-action-button-solid-pressed",
+                "focus-visible:ring-none focus-visible:ring-offset-2 focus-visible:ring-[var(--action-button-solid-default-border)]",
             ],
             outline: [
                 "ring-1 ring-inset",
                 "bg-action-button-outline-default text-action-button-outline-default fill-action-button-outline-default ring-[var(--action-button-outline-default-border)]",
                 "hover:bg-action-button-outline-hover hover:text-action-button-outline-hover hover:fill-action-button-outline-hover hover:ring-[var(--action-button-outline-hover-border)]",
                 "active:bg-action-button-outline-pressed active:text-action-button-outline-pressed active:fill-action-button-outline-pressed active:ring-[var(--action-button-outline-pressed-border)]",
+                "focus-visible:ring-none focus-visible:ring-[var(--action-button-outline-default-border)]",
             ],
             icon: [
                 "bg-action-button-icon-default border-action-button-icon-default text-action-button-icon-default fill-action-button-icon-default",
                 "hover:bg-action-button-icon-hover hover:border-action-button-icon-hover hover:text-action-button-icon-hover hover:fill-action-button-icon-hover",
                 "active:bg-action-button-icon-pressed active:border-action-button-icon-pressed active:text-action-button-icon-pressed active:fill-action-button-icon-pressed",
+                "focus-visible:ring-none focus-visible:ring-offset-2 focus-visible:ring-[var(--action-button-icon-default-border)]",
             ],
         },
         size: {
@@ -45,6 +50,7 @@ export const actionButtonVariants = cva(["box-border flex items-center justify-c
                 "bg-action-button-solid-active border-action-button-solid-active text-action-button-solid-active fill-action-button-solid-active",
                 "hover:bg-action-button-solid-active-hover hover:border-action-button-solid-active-hover hover:text-action-button-solid-active-hover hover:fill-action-button-solid-active-hover",
                 "active:bg-action-button-solid-active-pressed active:border-action-button-solid-active-pressed active:text-action-button-solid-active-pressed active:fill-action-button-solid-active-pressed",
+                "focus-visible:ring-[var(--action-button-solid-active-border)]",
             ],
         },
         {
@@ -54,6 +60,7 @@ export const actionButtonVariants = cva(["box-border flex items-center justify-c
                 "bg-action-button-outline-active text-action-button-outline-active fill-action-button-outline-active ring-[var(--action-button-outline-active-border)]",
                 "hover:bg-action-button-outline-active-hover hover:text-action-button-outline-active-hover hover:fill-action-button-outline-active-hover hover:ring-[var(--action-button-outline-active-hover-border)]",
                 "active:bg-action-button-outline-active-pressed active:text-action-button-outline-active-pressed active:fill-action-button-outline-active-pressed active:ring-[var(--action-button-outline-active-pressed-border)]",
+                "focus-visible:ring-[var(--action-button-outline-active-border)]",
             ],
         },
         {
@@ -63,6 +70,7 @@ export const actionButtonVariants = cva(["box-border flex items-center justify-c
                 "bg-action-button-icon-active border-action-button-icon-active text-action-button-icon-active fill-action-button-icon-active",
                 "hover:bg-action-button-icon-active-hover hover:border-action-button-icon-active-hover hover:text-action-button-icon-active-hover hover:fill-action-button-icon-active-hover",
                 "active:bg-action-button-icon-active-pressed active:border-action-button-icon-active-pressed active:text-action-button-icon-active-pressed active:fill-action-button-icon-active-pressed",
+                "focus-visible:ring-[var(--action-button-icon-active-border)]",
             ],
         },
         {

package/dist/components/Dropdown/Dropdown.js

@@ -83,7 +83,7 @@ const Dropdown = forwardRef((_a, ref) => {
                     "bg-[var(--dropdown-menu-hover-bg)] text-[var(--dropdown-menu-hover-text)]", optionItemClassName), children: ({ selected }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 size-4 flex items-center justify-center", children: (selected || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value) && (_jsx(Icon, { type: "heroicons", name: "check", className: "size-4 text-[var(--dropdown-menu-selected-text)]" })) }), option.label] })) }, option.value));
         });
     };
-    return (_jsx(Combobox, { value: selectedOption, onChange: handleSelect, immediate: true, by: "value", disabled: disabled, children: ({ open }) => (_jsxs("div", { className: cn("relative", fullwidth && "w-full"), children: [_jsx(ComboboxInput, Object.assign({ as: TextInput, ref: inputRef, hasClearIcon: false, endIcon: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ isFocus: open }) }), label: label, placeholder: " ", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: segmentedInput ? customInputVariant({ size }) : undefined, displayValue: (opt) => { var _a; return (_a = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _a !== void 0 ? _a : ""; }, readOnly: !filterMode, onChange: handleInputChange }, props)), _jsx(ComboboxOptions, { className: cn("absolute top-full left-0 w-full mt-1 z-[51]", "min-w-[154px] max-h-60 overflow-y-auto", "rounded-lg bg-modal-surface text-text-g-contrast-high", optionContainerClassName), style: { boxShadow: "var(--dropdown-menu-shadow)" }, children: renderOptionList() })] })) }));
+    return (_jsx(Combobox, { value: selectedOption, onChange: handleSelect, immediate: true, by: "value", disabled: disabled, children: ({ open }) => (_jsxs("div", { className: cn("relative", fullwidth && "w-full"), children: [_jsx(ComboboxInput, Object.assign({ as: TextInput, ref: inputRef, hasClearIcon: false, endIcon: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ isFocus: open }) }), label: label, placeholder: " ", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: segmentedInput ? customInputVariant({ size }) : undefined, displayValue: (opt) => { var _a; return (_a = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _a !== void 0 ? _a : ""; }, readOnly: !filterMode, onChange: handleInputChange }, props)), _jsx(ComboboxOptions, { className: cn("absolute top-full left-0 w-full -mt-3 z-[51]", "min-w-[154px] max-h-60 overflow-y-auto", "rounded-md bg-modal-dropdown-surface border border-bg-stroke3 text-text-g-contrast-high", optionContainerClassName), style: { boxShadow: "var(--dropdown-menu-shadow)" }, children: renderOptionList() })] })) }));
 });
 Dropdown.displayName = "Dropdown";
 export default Dropdown;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -29,13 +29,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-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: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })));
+    return (_jsx(DropdownMenuPrimitive.SubContent, Object.assign({ 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) }, 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-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: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })) }));
+    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-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: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })) }));
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef((_a, ref) => {

package/dist/components/TextInput/TextInput.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo, useRef, } from "react";
 import { useStableMergedRef } from "@/utils/mergeRefs";
 import { helperTextVariant, iconActionVariant, inlineEndIconWrapperVariant, inlineStartIconWrapperVariant, inputVariant, labelVariant, searchIconVariant, segmentedIconWrapperVariant, } from "./TextInput.styles";
-import { CircleAlert, CircleX, Search, } from "lucide-react";
+import { CircleAlert, CircleX, Search } from "lucide-react";
 import { cn } from "@/utils/cn";
 export const TextInput = forwardRef((_a, ref) => {
     var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", iconMode = "solid", helperText, errorMessage, warningMessage, status, fullwidth = true, disabled = false, error = false, warning = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, keepFooterSpace = true, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickStartIcon, onClickEndIcon, renderStartIcon, renderEndIcon, classes, normalize, format, trimOnCommit, normalizeOnCommit } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "iconMode", "helperText", "errorMessage", "warningMessage", "status", "fullwidth", "disabled", "error", "warning", "required", "isFloatingLabel", "keepCloseIconOnValue", "keepFooterSpace", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickStartIcon", "onClickEndIcon", "renderStartIcon", "renderEndIcon", "classes", "normalize", "format", "trimOnCommit", "normalizeOnCommit"]);
@@ -186,7 +186,9 @@ export const TextInput = forwardRef((_a, ref) => {
         renderEndIcon,
         handleOnClickRightSectionIcon,
     ]);
-    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({}, props, { placeholder: " ", ref: stableRef, type: type, id: _id, disabled: disabled, value: displayValue, className: cn(inputClassname, props.className), onChange: normalize ? handleChange : props.onChange, onBlur: trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur, onKeyDown: trimOnCommit || normalizeOnCommit ? handleKeyDown : props.onKeyDown })), hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: cn(inlineStartIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx(Search, { className: cn(searchIconClassname, classes === null || classes === void 0 ? void 0 : classes.icon) }) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: cn(inlineEndIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconWrapper), style: {
+    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({}, props, { placeholder: " ", ref: stableRef, type: type, id: _id, disabled: disabled, value: displayValue, className: cn(inputClassname, props.className), onChange: normalize ? handleChange : props.onChange, onBlur: trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur, onKeyDown: trimOnCommit || normalizeOnCommit
+                            ? handleKeyDown
+                            : props.onKeyDown })), hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: cn(inlineStartIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx(Search, { className: cn(searchIconClassname, classes === null || classes === void 0 ? void 0 : classes.icon) }) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: cn(inlineEndIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconWrapper), style: {
                             display: keepCloseIconOnValue && props.value ? "flex" : undefined,
                         }, children: _jsx(CircleX, { className: cn(iconActionClassname, 
                             // 'fill-none stroke-current',

package/dist/esm/bundle.css

@@ -744,6 +744,9 @@ input[type=number] {
 .-mr-2{
   margin-right: -0.5rem;
 }
+.-mt-3{
+  margin-top: -0.75rem;
+}
 .-mt-\[30px\]{
   margin-top: -30px;
 }
@@ -1666,6 +1669,10 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--bg-stroke2) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
+.border-bg-stroke3{
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--bg-stroke3) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
 .border-blue-500{
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
@@ -2552,6 +2559,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--input-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
+.bg-modal-dropdown-surface{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--modal-dropdown-surface) calc(100% * var(--tw-bg-opacity, 1)), transparent);
+}
 .bg-modal-highlight{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--modal-highlight) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -5237,6 +5248,24 @@ input[type=number] {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.focus-visible\:ring-\[var\(--action-button-icon-active-border\)\]:focus-visible{
+  --tw-ring-color: var(--action-button-icon-active-border);
+}
+.focus-visible\:ring-\[var\(--action-button-icon-default-border\)\]:focus-visible{
+  --tw-ring-color: var(--action-button-icon-default-border);
+}
+.focus-visible\:ring-\[var\(--action-button-outline-active-border\)\]:focus-visible{
+  --tw-ring-color: var(--action-button-outline-active-border);
+}
+.focus-visible\:ring-\[var\(--action-button-outline-default-border\)\]:focus-visible{
+  --tw-ring-color: var(--action-button-outline-default-border);
+}
+.focus-visible\:ring-\[var\(--action-button-solid-active-border\)\]:focus-visible{
+  --tw-ring-color: var(--action-button-solid-active-border);
+}
+.focus-visible\:ring-\[var\(--action-button-solid-default-border\)\]:focus-visible{
+  --tw-ring-color: var(--action-button-solid-default-border);
+}
 .focus-visible\:ring-gray-500:focus-visible{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));