@rovula/ui 0.0.22 → 0.0.24

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/Slider/Slider.tsx

@@ -4,7 +4,6 @@ import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 
 import { cn } from "@/utils/cn";
-import ActionButton from "../ActionButton/ActionButton";
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,

package/src/components/Tabs/Tabs.tsx

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

package/src/components/Text/Text.tsx

@@ -1,8 +1,8 @@
 import { cn } from "@/utils/cn";
-import React, { FC, forwardRef } from "react";
+import React, { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 
-export type TextProps = {
+export type TextProps<T extends React.ElementType> = {
   variant?:
     | "h1"
     | "h2"
@@ -39,10 +39,15 @@ export type TextProps = {
     | "error";
   children?: React.ReactNode;
   className?: string;
-  tag?: keyof JSX.IntrinsicElements;
+  tag?: T;
   style?: React.CSSProperties;
   id?: string;
-};
+} & React.ComponentProps<T>;
+
+type TextComponent<T extends React.ElementType> =
+  React.ForwardRefExoticComponent<
+    TextProps<T> & React.RefAttributes<HTMLElement>
+  >;
 
 const textVariants = cva(["text-foreground"], {
   variants: {
@@ -58,29 +63,39 @@ const textVariants = cva(["text-foreground"], {
   },
 });
 
+// montserrat: ["Montserrat", "sans-serif"],
+// poppins: ["Poppins", "sans-serif"],  font-montserrat, font-poppins
 // TODO font, fontBold, elipt
-const Text = forwardRef<TextProps["tag"], TextProps>(
-  ({
+const Text = <T extends React.ElementType = "p">(
+  {
     variant = "body1",
     tag: Tag = "p",
     children,
     className = "",
     color,
     style,
-  }) => {
-    return (
-      <Tag
-        className={cn(
-          `typography-${variant}`,
-          textVariants({ color }),
-          className
-        )}
-        style={style}
-      >
-        {children}
-      </Tag>
-    );
-  }
-);
+    ...props
+  }: TextProps<T>,
+  ref: React.Ref<any>
+) => {
+  return (
+    <Tag
+      ref={ref}
+      className={cn(
+        `typography-${variant}`,
+        textVariants({ color }),
+        className
+      )}
+      style={style}
+      {...props}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+const ForwardedText = forwardRef(Text) as TextComponent<any>;
+
+ForwardedText.displayName = "Text";
 
-export default Text;
+export default ForwardedText;

package/src/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/src/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": {},
     },

package/src/theme/presets/colors.js

@@ -81,6 +81,12 @@ module.exports = {
           "--base-color-popup-foreground"
         ),
         "base-stroke": withColorMixin("--base-color-workspace-stroke"),
+        "base-workspace-stroke": withColorMixin(
+          "--base-color-workspace-stroke"
+        ),
+        "base-guideline-stroke": withColorMixin(
+          "--base-color-guideline-stroke"
+        ),
 
         "common-white": withColorMixin("--common-white"),
         "common-black": withColorMixin("--common-black"),

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);
 }

package/src/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/src/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/src/theme/tokens/color.css

@@ -23,6 +23,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);

package/src/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/src/theme/tokens/typography.css

@@ -147,6 +147,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;