@rovula/ui 0.0.23 → 0.0.24

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/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.24",
   "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",