@rovula/ui 0.0.23 → 0.0.25

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

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

@@ -0,0 +1,54 @@
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.FC<import("@radix-ui/react-dropdown-menu").DropdownMenuProps>;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        children?: React.ReactNode;
+        dir?: ("ltr" | "rtl") | undefined;
+        open?: boolean | undefined;
+        defaultOpen?: boolean | undefined;
+        onOpenChange?: ((open: boolean) => void) | undefined;
+        modal?: boolean | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export declare const Default: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithIcon: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithLabel: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Checkboxes: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const SubMenu: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const OnIcon: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const AsChild: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Position: {
+    args: {
+        side: string;
+        align: string;
+        sideOffset: number;
+        alignOffset: number;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -25,6 +25,7 @@ export * from "./components/AlertDialog/AlertDialog";
 export * from "./components/Search/Search";
 export * from "./components/Slider/Slider";
 export * from "./components/Switch/Switch";
+export * from "./components/DropdownMenu/DropdownMenu";
 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

@@ -12,6 +12,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { ClassValue } from 'clsx';
 
 type ButtonProps = {
@@ -398,6 +399,31 @@ type SliderProps = React.ComponentProps<typeof Slider>;
 
 declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 declare const resloveTimestamp: (timestamp: number) => number;
 declare const getStartDateOfDay: (date: Date) => Date;
 declare const getEndDateOfDay: (date: Date) => Date;
@@ -409,4 +435,4 @@ declare const getTimestampUTC: (date: Date) => number;
 
 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, type DropdownProps, Icon, Input, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, ForwardedText as Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };
+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, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, ForwardedText as Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };

package/dist/index.js

@@ -27,6 +27,7 @@ export * from "./components/AlertDialog/AlertDialog";
 export * from "./components/Search/Search";
 export * from "./components/Slider/Slider";
 export * from "./components/Switch/Switch";
+export * from "./components/DropdownMenu/DropdownMenu";
 // UTILS
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 export { cn } from "./utils/cn";

package/dist/src/theme/global.css

@@ -1057,6 +1057,26 @@
   --navbar-text-color: var(--primary-foreground);
   --navbar-border-color: var(--primary-foreground);
   --navbar-gap: 16px;
+  /* ------------------------------------------------------------------ */
+  /* DropdownMenu Component Tokens                                      */
+  /* ------------------------------------------------------------------ */
+  /* Naming Convention: --[component]-[state]-[property]                */
+  /* Element: [default, hover, selected, disabled]                      */
+  /* ------------------------------------------------------------------ */
+  --dropdown-menu-seperator-bg: var(--base-color-workspace-stroke);
+  --dropdown-menu-shadow: 0px 2px 24px 0px rgba(145, 158, 171, 0.24);
+  /* Default State */
+  --dropdown-menu-default-bg: transparent;
+  --dropdown-menu-default-text: inherit;
+  /* Hover State */
+  --dropdown-menu-hover-bg: var(--state-color-primary-hover-bg);
+  --dropdown-menu-hover-text: inherit;
+  /* Selected State */
+  --dropdown-menu-selected-bg: transparent;
+  --dropdown-menu-selected-text: inherit;
+  /* Disabled State */
+  --dropdown-menu-disabled-bg: transparent;
+  --dropdown-menu-disabled-text: var(--state-color-disable-outline);
 }
 
 :root[data-theme="xspector"]{
@@ -1277,6 +1297,7 @@
   --base-color-bg2: #282c31;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
   --base-color-popup: #2d2e30;
   --base-color-popup-hightlight: #343638;
   --base-color-popup-curtain: rgba(0 0 0 / 0.6);
@@ -1310,7 +1331,7 @@
   --surface-foreground: var(--common-white);
   --primary-foreground: var(--common-white);
   --secondary-foreground: var(--common-white);
-  --base-color-popup-foreground: var(--common-white);
+  --base-color-popup-foreground: var(--text-grey-light);
   --main-transparency-primary-8: rgba(221 205 0 / 0.08);
   --main-transparency-primary-12: rgba(221 205 0 / 0.12);
   --main-transparency-primary-16: rgba(221 205 0 / 0.16);
@@ -1485,6 +1506,26 @@
   /* ------------------------------------------------------------------ */
   --loading-process-color: var(--primary);
   --loading-track-color: #9E9E9E7A;
+  /* ------------------------------------------------------------------ */
+  /* DropdownMenu Component Tokens                                      */
+  /* ------------------------------------------------------------------ */
+  /* Naming Convention: --[component]-[state]-[property]                */
+  /* Element: [default, hover, selected, disabled]                      */
+  /* ------------------------------------------------------------------ */
+  --dropdown-menu-seperator-bg: var(--other-transparency-white-08);
+  --dropdown-menu-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
+  /* Default State */
+  --dropdown-menu-default-bg: transparent;
+  --dropdown-menu-default-text: inherit;
+  /* Hover State */
+  --dropdown-menu-hover-bg: var(--other-transparency-white-08);
+  --dropdown-menu-hover-text: inherit;
+  /* Selected State */
+  --dropdown-menu-selected-bg: var(--grey-grey-150);
+  --dropdown-menu-selected-text: inherit;
+  /* Disabled State */
+  --dropdown-menu-disabled-bg: transparent;
+  --dropdown-menu-disabled-text: var(--grey-grey-140);
 }
 
 /* ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com */
@@ -2189,11 +2230,21 @@ body {
   margin: 0px;
 }
 
+.-mx-2 {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -2206,6 +2257,10 @@ body {
   margin-left: 1rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -2413,6 +2468,10 @@ body {
   height: 100%;
 }
 
+.h-px {
+  height: 1px;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -2429,6 +2488,10 @@ body {
   width: 2.5rem;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -2493,6 +2556,10 @@ body {
   min-width: 18rem;
 }
 
+.min-w-\[154px\] {
+  min-width: 154px;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -2550,6 +2617,10 @@ body {
   animation: spin 1s linear infinite;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -3024,6 +3095,18 @@ body {
   background-color: rgb(var(--navbar-bg-color));
 }
 
+.bg-\[var\(--dropdown-menu-default-bg\)\] {
+  background-color: var(--dropdown-menu-default-bg);
+}
+
+.bg-\[var\(--dropdown-menu-selected-bg\)\] {
+  background-color: var(--dropdown-menu-selected-bg);
+}
+
+.bg-\[var\(--dropdown-menu-seperator-bg\)\] {
+  background-color: var(--dropdown-menu-seperator-bg);
+}
+
 .bg-action-button-icon-active {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3462,6 +3545,11 @@ body {
   padding-right: 0.25rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -3527,6 +3615,11 @@ body {
   padding-bottom: 0.25rem;
 }
 
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
 .py-14 {
   padding-top: 3.5rem;
   padding-bottom: 3.5rem;
@@ -3601,6 +3694,22 @@ body {
   padding-inline-end: 72px;
 }
 
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pl-9 {
+  padding-left: 2.25rem;
+}
+
+.pr-4 {
+  padding-right: 1rem;
+}
+
+.pr-xxl {
+  padding-right: var(--spacing-spacing-xxl);
+}
+
 .ps-11 {
   padding-inline-start: 2.75rem;
 }
@@ -3641,6 +3750,10 @@ body {
   vertical-align: middle;
 }
 
+.font-poppins {
+  font-family: Poppins, sans-serif;
+}
+
 .text-body1 {
   font-size: var(--body1-size, 16px);
   line-height: var(--body1-line-height, 20px);
@@ -3819,6 +3932,11 @@ body {
   line-height: 1.75rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -3843,6 +3961,10 @@ body {
   letter-spacing: -0.025em;
 }
 
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
+
 .\!text-primary-foreground {
   --tw-text-opacity: 1 !important;
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent) !important;
@@ -3852,6 +3974,14 @@ body {
   color: rgb(var(--navbar-text-color));
 }
 
+.text-\[var\(--dropdown-menu-default-text\)\] {
+  color: var(--dropdown-menu-default-text);
+}
+
+.text-\[var\(--dropdown-menu-selected-text\)\] {
+  color: var(--dropdown-menu-selected-text);
+}
+
 .text-\[var\(--loading-process-color\)\] {
   color: var(--loading-process-color);
 }
@@ -4160,10 +4290,20 @@ body {
   caret-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
 
+.opacity-60 {
+  opacity: 0.6;
+}
+
 .opacity-70 {
   opacity: 0.7;
 }
 
+.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);
@@ -4176,6 +4316,11 @@ body {
   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;
@@ -5073,6 +5218,15 @@ body {
   border-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
+.focus\:\!bg-\[var\(--dropdown-menu-hover-bg\)\]:focus {
+  background-color: var(--dropdown-menu-hover-bg) !important;
+}
+
+.focus\:bg-primary:focus {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .focus\:pe-10:focus {
   padding-inline-end: 2.5rem;
 }
@@ -5085,6 +5239,10 @@ body {
   padding-inline-end: 2rem;
 }
 
+.focus\:\!text-\[var\(--dropdown-menu-hover-text\)\]:focus {
+  color: var(--dropdown-menu-hover-text) !important;
+}
+
 .focus\:text-input-filled-text:focus {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -5692,6 +5850,10 @@ body {
   color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
+.active\:opacity-75:active {
+  opacity: 0.75;
+}
+
 .active\:ring-input-disable-stroke:active {
   --tw-ring-opacity: 1;
   --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity)), transparent);
@@ -6261,6 +6423,10 @@ body {
   opacity: 0.7;
 }
 
+.data-\[disabled\]\:pointer-events-none[data-disabled] {
+  pointer-events: none;
+}
+
 .data-\[state\=checked\]\:translate-x-4[data-state=checked] {
   --tw-translate-x: 1rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -6381,6 +6547,10 @@ body {
   border-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-border-opacity)), transparent);
 }
 
+.data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled] {
+  background-color: var(--dropdown-menu-disabled-bg) !important;
+}
+
 .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading=true] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--button-error-flat-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -6486,6 +6656,10 @@ body {
   background-color: color-mix(in srgb, var(--button-warning-solid-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.data-\[state\=\'checked\'\]\:bg-\[var\(--dropdown-menu-selected-bg\)\][data-state='checked'] {
+  background-color: var(--dropdown-menu-selected-bg);
+}
+
 .data-\[state\=checked\]\:bg-primary[data-state=checked] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -6598,6 +6772,10 @@ body {
   fill: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * 1), transparent);
 }
 
+.data-\[disabled\]\:\!text-\[var\(--dropdown-menu-disabled-text\)\][data-disabled] {
+  color: var(--dropdown-menu-disabled-text) !important;
+}
+
 .data-\[loading\=true\]\:text-button-error-flat-active[data-loading=true] {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--button-error-flat-active-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -6703,6 +6881,10 @@ body {
   color: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
+.data-\[state\=\'checked\'\]\:text-\[var\(--dropdown-menu-selected-text\)\][data-state='checked'] {
+  color: var(--dropdown-menu-selected-text);
+}
+
 .data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
@@ -6713,6 +6895,12 @@ body {
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
 
+.data-\[state\=\'checked\'\]\:typography-subtitile5[data-state='checked'] {
+  font-size: var(--subtitle5-size, 14px);
+  line-height: var(--subtitle5-line-height, 22px);
+  font-weight: var(--subtitle5-weight, 500);
+}
+
 @media (min-width: 640px) {
   .sm\:mt-0 {
     margin-top: 0px;

package/dist/theme/themes/xspector/baseline.css

@@ -4,4 +4,5 @@
 @import url(transparent.css);
 @import url(typography.css);
 @import url(components/action-button.css);
-@import url(components/loading.css);
+@import url(components/loading.css);
+@import url(components/dropdown-menu.css);

package/dist/theme/themes/xspector/color.css

@@ -23,6 +23,7 @@
   --base-color-bg2: #282c31;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
   --base-color-popup: #2d2e30;
   --base-color-popup-hightlight: #343638;
   --base-color-popup-curtain: rgba(0 0 0 / 0.6);
@@ -63,5 +64,5 @@
   --primary-foreground: var(--common-white);
   --secondary-foreground: var(--common-white);
 
-  --base-color-popup-foreground: var(--common-white);
+  --base-color-popup-foreground: var(--text-grey-light);
 }

package/dist/theme/themes/xspector/components/dropdown-menu.css

@@ -0,0 +1,28 @@
+:root[data-theme="xspector"] {
+  /* ------------------------------------------------------------------ */
+  /* DropdownMenu Component Tokens                                      */
+  /* ------------------------------------------------------------------ */
+  /* Naming Convention: --[component]-[state]-[property]                */
+  /* Element: [default, hover, selected, disabled]                      */
+  /* ------------------------------------------------------------------ */
+
+  --dropdown-menu-seperator-bg: var(--other-transparency-white-08);
+  --dropdown-menu-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
+  
+  /* Default State */
+  --dropdown-menu-default-bg: transparent;
+  --dropdown-menu-default-text: inherit;
+  
+  /* Hover State */
+  --dropdown-menu-hover-bg: var(--other-transparency-white-08);
+  --dropdown-menu-hover-text: inherit;
+  
+  /* Selected State */
+  --dropdown-menu-selected-bg: var(--grey-grey-150);
+  --dropdown-menu-selected-text: inherit;
+  
+  /* Disabled State */
+  --dropdown-menu-disabled-bg: transparent;
+  --dropdown-menu-disabled-text: var(--grey-grey-140);
+  
+}

package/dist/theme/tokens/baseline.css

@@ -7,4 +7,5 @@
 @import url(components/button.css);
 @import url(components/action-button.css);
 @import url(components/loading.css);
-@import url(components/navbar.css);
+@import url(components/navbar.css);
+@import url(components/dropdown-menu.css);

package/dist/theme/tokens/components/dropdown-menu.css

@@ -0,0 +1,27 @@
+:root {
+  /* ------------------------------------------------------------------ */
+  /* DropdownMenu Component Tokens                                      */
+  /* ------------------------------------------------------------------ */
+  /* Naming Convention: --[component]-[state]-[property]                */
+  /* Element: [default, hover, selected, disabled]                      */
+  /* ------------------------------------------------------------------ */
+  
+  --dropdown-menu-seperator-bg: var(--base-color-workspace-stroke);
+  --dropdown-menu-shadow: 0px 2px 24px 0px rgba(145, 158, 171, 0.24);
+
+  /* Default State */
+  --dropdown-menu-default-bg: transparent;
+  --dropdown-menu-default-text: inherit;
+
+  /* Hover State */
+  --dropdown-menu-hover-bg: var(--state-color-primary-hover-bg);
+  --dropdown-menu-hover-text: inherit;
+
+  /* Selected State */
+  --dropdown-menu-selected-bg: transparent;
+  --dropdown-menu-selected-text: inherit;
+
+  /* Disabled State */
+  --dropdown-menu-disabled-bg: transparent;
+  --dropdown-menu-disabled-text: var(--state-color-disable-outline);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -15,14 +15,17 @@
     "public": "npm run build:package && npm publish --access=public",
     "storybook:serve-css": "npx tailwindcss -i ./src/theme/global.css -o ./dist/src/theme/global.css",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_cee098dd3b9b3ee"
   },
   "files": [
     "dist/**/*",
     "src/**/*"
   ],
   "keywords": [],
-  "author": "NuttapongSa",
+  "author": {
+    "name": "NuttapongSa"
+  },
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.24.5",
@@ -50,6 +53,7 @@
     "@types/node": "^20.12.12",
     "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
+    "chromatic": "^11.7.1",
     "copyfiles": "^2.4.1",
     "css-loader": "^7.1.2",
     "postcss": "^8.4.38",
@@ -72,6 +76,7 @@
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.1.3",