@rovula/ui 0.0.70 → 0.0.71

package/dist/esm/types/components/Dropdown/Dropdown.styles.d.ts

@@ -2,7 +2,6 @@ export declare const iconWrapperVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const dropdownIconVariant: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
     disabled?: boolean | null | undefined;
     isFocus?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/src/theme/global.css

@@ -5966,12 +5966,6 @@ input[type=number] {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.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);
@@ -5984,11 +5978,6 @@ input[type=number] {
   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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -141,6 +141,8 @@ export const CustomOption = {
     fullwidth: true,
     options: customOptions,
     filterMode: true,
+
+    // iconMode: "flat",
   },
   render: (args) => {
     console.log("args ", args);

package/src/components/Dropdown/Dropdown.styles.ts

@@ -19,11 +19,12 @@ export const iconWrapperVariant = cva(
 
 export const dropdownIconVariant = cva(["transition-all"], {
   variants: {
-    size: {
-      sm: "size-[14px]",
-      md: "size-5",
-      lg: "size-6",
-    },
+    // Controll by text-input
+    // size: {
+    //   sm: "size-[14px]",
+    //   md: "size-5",
+    //   lg: "size-6",
+    // },
     disabled: {
       true: "fill-input-text-disabled",
       false: "fill-inherit",
@@ -34,7 +35,6 @@ export const dropdownIconVariant = cva(["transition-all"], {
     },
   },
   defaultVariants: {
-    size: "md",
     disabled: false,
     isFocus: false,
   },

package/src/components/Dropdown/Dropdown.tsx

@@ -12,11 +12,7 @@ import React, {
 } from "react";
 import * as Portal from "@radix-ui/react-portal";
 import TextInput, { InputProps } from "../TextInput/TextInput";
-import {
-  customInputVariant,
-  dropdownIconVariant,
-  iconWrapperVariant,
-} from "./Dropdown.styles";
+import { customInputVariant, dropdownIconVariant } from "./Dropdown.styles";
 
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
@@ -339,11 +335,9 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         <TextInput
           hasClearIcon={false}
           endIcon={
-            <div className={iconWrapperVariant({ size })}>
-              <ChevronDownIcon
-                className={dropdownIconVariant({ size, isFocus: isFocused })}
-              />
-            </div>
+            <ChevronDownIcon
+              className={dropdownIconVariant({ isFocus: isFocused })}
+            />
           }
           {...props}
           ref={inputRef}

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -52,10 +52,14 @@ const DropdownMenuSubContent = React.forwardRef<
   <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",
+      "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground 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}
+    style={{
+      boxShadow: "var(--dropdown-menu-shadow)",
+      ...props.style,
+    }}
   />
 ));
 DropdownMenuSubContent.displayName =
@@ -70,10 +74,14 @@ const DropdownMenuContent = React.forwardRef<
       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",
+        "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground 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}
+      style={{
+        boxShadow: "var(--dropdown-menu-shadow)",
+        ...props.style,
+      }}
     />
   </DropdownMenuPrimitive.Portal>
 ));