@rovula/ui 0.0.23 → 0.0.25

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,394 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./DropdownMenu";
+import Button from "../Button/Button";
+import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
+import Icon from "../Icon/Icon";
+import ActionButton from "../ActionButton/ActionButton";
+
+const meta = {
+  title: "Components/DropdownMenu",
+  component: DropdownMenu,
+  // tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem disabled>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>
+                <Icon type="heroicons" name="check" className="size-4" />
+                Option Description
+              </DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const WithIcon = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem disabled>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const WithLabel = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Sort by</DropdownMenuLabel>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Checkboxes = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    type Checked = DropdownMenuCheckboxItemProps["checked"];
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuCheckboxItem>
+                Option Description
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked>
+                Option Description
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem disabled>
+                Option Description
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked disabled>
+                Option Description
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem disabled>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem checked disabled>
+                <Icon
+                  type="heroicons"
+                  name="rocket-launch"
+                  className="size-4"
+                />
+                <span>Option Description</span>
+              </DropdownMenuCheckboxItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const SubMenu = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuLabel>My Account</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>Profile</DropdownMenuItem>
+              <DropdownMenuItem>Billing</DropdownMenuItem>
+              <DropdownMenuItem>Team</DropdownMenuItem>
+              <DropdownMenuItem>Subscription</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <span>Invite users</span>
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                      <DropdownMenuItem>
+                        <span>Email</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <span>Message</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>
+                        <span>More...</span>
+                      </DropdownMenuItem>
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+                <DropdownMenuCheckboxItem>Panel</DropdownMenuCheckboxItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const OnIcon = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Icon type="heroicons" name="ellipsis-vertical" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const AsChild = {
+  args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <ActionButton variant="icon">
+                <Icon type="heroicons" name="ellipsis-vertical" />
+              </ActionButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Position = {
+  args: {
+    side: "bottom",
+    align: "center",
+    sideOffset: 5,
+    alignOffset: 0,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <div className="flex flex-1 justify-center items-center space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <ActionButton variant="icon">
+                <Icon type="heroicons" name="ellipsis-vertical" />
+              </ActionButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              {...args}
+              side="bottom" // controls the side (top, bottom, left, right)
+              align="start" // controls the alignment (start, center, end)
+              sideOffset={5} // offset from the side
+              alignOffset={0} // offset from the alignment
+            >
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+              <DropdownMenuItem>Option Description</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+import { cn } from "@/utils/cn";
+import Icon from "../Icon/Icon";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      // "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-primary data-[state=open]:bg-primary",
+      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
+      "active:opacity-75",
+      "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
+      "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <Icon type="heroicons" name="chevron-right" className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground shadow-[var(--dropdown-menu-shadow)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground shadow-[0px_2px_24px_0px_rgba(145,_158,_171,_0.24)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
+      "active:opacity-75",
+      "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
+      "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
+      "active:opacity-75",
+      "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
+      "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitile5",
+      "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-4 flex items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Icon type="heroicons" name="check" className="size-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
+      "active:opacity-75",
+      "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
+      "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitile5",
+      "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-4 flex items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Icon type="heroicons" name="circle" className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-3 py-2 typography-small4 text-text-grey-medium",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn(
+      "-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,3 @@
-("");
 import React, { useState, useRef, useEffect } from "react";
 import { cn } from "@/utils/cn";
 

package/src/components/Text/Text.tsx

@@ -63,6 +63,8 @@ const textVariants = cva(["text-foreground"], {
   },
 });
 
+// montserrat: ["Montserrat", "sans-serif"],
+// poppins: ["Poppins", "sans-serif"],  font-montserrat, font-poppins
 // TODO font, fontBold, elipt
 const Text = <T extends React.ElementType = "p">(
   {

package/src/index.ts

@@ -32,6 +32,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 component types
 export type { ButtonProps } from "./components/Button/Button";

package/src/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/src/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);
 }