@rovula/ui 0.0.22 → 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/esm/types/components/Text/Text.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
-export type TextProps = {
+export type TextProps<T extends React.ElementType> = {
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "label1" | "label2" | "buttonL" | "buttonMS";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
     children?: React.ReactNode;
     className?: string;
-    tag?: keyof JSX.IntrinsicElements;
+    tag?: T;
     style?: React.CSSProperties;
     id?: string;
-};
-declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<keyof JSX.IntrinsicElements | undefined>>;
-export default Text;
+} & React.ComponentProps<T>;
+type TextComponent<T extends React.ElementType> = React.ForwardRefExoticComponent<TextProps<T> & React.RefAttributes<HTMLElement>>;
+declare const ForwardedText: TextComponent<any>;
+export default ForwardedText;

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

@@ -1,21 +1,13 @@
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./Text").TextProps & React.RefAttributes<keyof JSX.IntrinsicElements | undefined>>;
+    component: React.ForwardRefExoticComponent<any>;
     tags: string[];
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "label1" | "label2" | "buttonL" | "buttonMS" | undefined;
-        color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "warning" | "error" | undefined;
-        children?: React.ReactNode;
-        className?: string | undefined;
-        tag?: keyof JSX.IntrinsicElements | undefined;
-        style?: React.CSSProperties | undefined;
-        id?: string | undefined;
-        ref?: React.LegacyRef<keyof JSX.IntrinsicElements | undefined> | undefined;
-        key?: React.Key | null | undefined;
+        [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/index.d.ts

@@ -80,16 +80,17 @@ declare const TextInput: React__default.ForwardRefExoticComponent<{
     labelClassName?: string | undefined;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & React__default.RefAttributes<HTMLInputElement>>;
 
-type TextProps = {
+type TextProps<T extends React__default.ElementType> = {
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "label1" | "label2" | "buttonL" | "buttonMS";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
     children?: React__default.ReactNode;
     className?: string;
-    tag?: keyof JSX.IntrinsicElements;
+    tag?: T;
     style?: React__default.CSSProperties;
     id?: string;
-};
-declare const Text: React__default.ForwardRefExoticComponent<TextProps & React__default.RefAttributes<keyof JSX.IntrinsicElements | undefined>>;
+} & React__default.ComponentProps<T>;
+type TextComponent<T extends React__default.ElementType> = React__default.ForwardRefExoticComponent<TextProps<T> & React__default.RefAttributes<HTMLElement>>;
+declare const ForwardedText: TextComponent<any>;
 
 type Tab = {
     label: string;
@@ -408,4 +409,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, 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, 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/src/theme/global.css

@@ -217,6 +217,7 @@
   --base-color-bg2: #f5f5f5;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
   --base-color-popup: #ffffff;
   --base-color-popup-hightlight: #343638;
   --base-color-popup-curtain: rgba(0 0 0 / 0.6);
@@ -488,6 +489,27 @@
   --small5-style: normal;
   --small5-line-height: 12px;
   --small5-line-height-rem: 0.75rem;
+  --small6-family: "Montserrat";
+  --small6-size: 10px;
+  --small6-size-rem: 0.625rem;
+  --small6-weight: 600;
+  --small6-style: normal;
+  --small6-line-height: 12px;
+  --small6-line-height-rem: 0.75rem;
+  --small7-family: "Montserrat";
+  --small7-size: 8px;
+  --small7-size-rem: 0.5rem;
+  --small7-weight: 600;
+  --small7-style: normal;
+  --small7-line-height: 10px;
+  --small7-line-height-rem: 0.625rem;
+  --small8-family: "Montserrat";
+  --small8-size: 8px;
+  --small8-size-rem: 0.5rem;
+  --small8-weight: 700;
+  --small8-style: normal;
+  --small8-line-height: 10px;
+  --small8-line-height-rem: 0.625rem;
   --label-label1-family: "Montserrat";
   --label-label1-size: 12px;
   --label-label1-size-rem: 0.75rem;
@@ -1035,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"]{
@@ -1255,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);
@@ -1288,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);
@@ -1463,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 */
@@ -2167,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;
 }
@@ -2184,6 +2257,10 @@ body {
   margin-left: 1rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -2391,6 +2468,10 @@ body {
   height: 100%;
 }
 
+.h-px {
+  height: 1px;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -2407,6 +2488,10 @@ body {
   width: 2.5rem;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -2471,6 +2556,10 @@ body {
   min-width: 18rem;
 }
 
+.min-w-\[154px\] {
+  min-width: 154px;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -2528,6 +2617,10 @@ body {
   animation: spin 1s linear infinite;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -3002,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);
@@ -3440,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;
@@ -3505,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;
@@ -3579,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;
 }
@@ -3619,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);
@@ -3738,6 +3873,24 @@ body {
   font-weight: var(--small5-weight, 500);
 }
 
+.text-small6 {
+  font-size: var(--small5-size, 10px);
+  line-height: var(--small6-line-height, 12px);
+  font-weight: var(--small6-weight, 600);
+}
+
+.text-small7 {
+  font-size: var(--small7-size, 8px);
+  line-height: var(--small7-line-height, 10px);
+  font-weight: var(--small7-weight, 600);
+}
+
+.text-small8 {
+  font-size: var(--small8-size, 8px);
+  line-height: var(--small8-line-height, 10px);
+  font-weight: var(--small8-weight, 700);
+}
+
 .text-subtitile1 {
   font-size: var(--subtitle1-size, 16px);
   line-height: var(--subtitle1-line-height, 24px);
@@ -3779,6 +3932,11 @@ body {
   line-height: 1.75rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -3803,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;
@@ -3812,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);
 }
@@ -4120,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);
@@ -4136,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;
@@ -4377,6 +4562,24 @@ body {
   font-weight: var(--small5-weight, 500);
 }
 
+.typography-small6 {
+  font-size: var(--small5-size, 10px);
+  line-height: var(--small6-line-height, 12px);
+  font-weight: var(--small6-weight, 600);
+}
+
+.typography-small7 {
+  font-size: var(--small7-size, 8px);
+  line-height: var(--small7-line-height, 10px);
+  font-weight: var(--small7-weight, 600);
+}
+
+.typography-small8 {
+  font-size: var(--small8-size, 8px);
+  line-height: var(--small8-line-height, 10px);
+  font-weight: var(--small8-weight, 700);
+}
+
 .typography-label1 {
   font-size: var(--label-label1-size, 12px);
   line-height: var(--label-label1-line-height, 12px);
@@ -5015,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;
 }
@@ -5027,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);
@@ -5634,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);
@@ -6203,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));
@@ -6323,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);
@@ -6428,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);
@@ -6540,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);
@@ -6645,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);
@@ -6655,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/main-preset.js

@@ -180,6 +180,30 @@ module.exports = {
             fontFamily: "var(--small5-family, 'Poppins')",
           },
         ],
+        small6: [
+          "var(--small5-size, 10px)",
+          {
+            lineHeight: "var(--small6-line-height, 12px)",
+            fontWeight: "var(--small6-weight, 600)",
+            fontFamily: "var(--small6-family, 'Poppins')",
+          },
+        ],
+        small7: [
+          "var(--small7-size, 8px)",
+          {
+            lineHeight: "var(--small7-line-height, 10px)",
+            fontWeight: "var(--small7-weight, 600)",
+            fontFamily: "var(--small7-family, 'Poppins')",
+          },
+        ],
+        small8: [
+          "var(--small8-size, 8px)",
+          {
+            lineHeight: "var(--small8-line-height, 10px)",
+            fontWeight: "var(--small8-weight, 700)",
+            fontFamily: "var(--small8-family, 'Poppins')",
+          },
+        ],
         label1: [
           "var(--label-label1-size, 12px)",
           {

package/dist/theme/plugins/utilities/typography.js

@@ -65,6 +65,15 @@ module.exports = plugin(function ({ addUtilities }) {
     ".typography-small5": {
       "@apply text-small5": {},
     },
+    ".typography-small6": {
+      "@apply text-small6": {},
+    },
+    ".typography-small7": {
+      "@apply text-small7": {},
+    },
+    ".typography-small8": {
+      "@apply text-small8": {},
+    },
     ".typography-label1": {
       "@apply text-label1": {},
     },