@fileverse/ui 4.0.7 → 4.0.9

package/dist/index.css

@@ -1127,6 +1127,10 @@ video {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 .my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1260,6 +1264,9 @@ video {
 .h-\[38px\] {
   height: 38px;
 }
+.h-\[400px\] {
+  height: 400px;
+}
 .h-\[440px\] {
   height: 440px;
 }
@@ -1541,6 +1548,10 @@ video {
   --tw-translate-y: 25%;
   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));
 }
+.translate-y-12 {
+  --tw-translate-y: 3rem;
+  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));
+}
 .translate-y-\[-50\%\] {
   --tw-translate-y: -50%;
   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));
@@ -1629,6 +1640,9 @@ video {
 .justify-between {
   justify-content: space-between;
 }
+.\!gap-1 {
+  gap: 0.25rem !important;
+}
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1653,6 +1667,21 @@ video {
 .gap-8 {
   gap: 2rem;
 }
+.-space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.-space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-1rem * var(--tw-space-x-reverse));
+  margin-left: calc(-1rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-x-0 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0px * var(--tw-space-x-reverse));
@@ -1678,6 +1707,11 @@ video {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1709,6 +1743,9 @@ video {
 .\!rounded {
   border-radius: 0.25rem !important;
 }
+.\!rounded-none {
+  border-radius: 0px !important;
+}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1786,6 +1823,9 @@ video {
 .border-dashed {
   border-style: dashed;
 }
+.\!border-none {
+  border-style: none !important;
+}
 .border-none {
   border-style: none;
 }
@@ -1799,16 +1839,16 @@ video {
 .\!bg-transparent {
   background-color: transparent !important;
 }
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
 .bg-inherit {
   background-color: inherit;
 }
 .bg-transparent {
   background-color: transparent;
 }
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -1922,6 +1962,9 @@ video {
 .pb-2 {
   padding-bottom: 0.5rem;
 }
+.pb-4 {
+  padding-bottom: 1rem;
+}
 .pb-5 {
   padding-bottom: 1.25rem;
 }
@@ -2004,10 +2047,6 @@ video {
 .tracking-widest {
   letter-spacing: 0.1em;
 }
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -2152,6 +2191,74 @@ textarea:is(:-webkit-autofill, :autofill) {
     color 0s 600000s !important;
 }
 
+.epr-emoji-category-label {
+  font-family: system-ui !important;
+  font-size: 14px !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 20px !important;
+}
+
+.epr-search-container > input {
+  display: flex;
+  height: 2.25rem; /* h-9 */
+  width: 100%; /* w-full */
+  border-radius: 4px; /* rounded-md */
+  border: 1px solid hsl(214.3, 31.8%, 91.4%); /* border border-input */
+  background-color: transparent !important; /* bg-transparent */
+  font-size: 14px; /* text-sm */
+  transition: colors 0.15s ease-in-out;
+  color: #000;
+  font-family: system-ui, "Roboto";
+}
+
+/* For hover state */
+.epr-search-container > input:hover {
+  border-color: #000; /* hover:border-border-hover */
+}
+
+/* For focus-visible state */
+.epr-search-container > input:focus-visible {
+  outline: none; /* focus-visible:outline-none */
+  border-color: #000; /* focus-visible:border-border-hover */
+}
+
+/* For placeholder text */
+.epr-search-container > input::-moz-placeholder {
+  color: hsl(var(--color-text-disabled));
+  font-family: system-ui, "Roboto";
+  font-size: 14px;
+}
+.epr-search-container > input::placeholder {
+  color: hsl(var(--color-text-disabled));
+  font-family: system-ui, "Roboto";
+  font-size: 14px;
+}
+
+.epr_-bbny0t > button {
+  border-radius: 50% !important;
+}
+
+.epr_-6kfaby.epr-active {
+  background-color: #ffdf0a !important;
+  color: #000 !important;
+  border-radius: 4px !important;
+  border: none !important;
+}
+
+.epr_-f1jbax:focus:before {
+  border: none !important;
+  border-radius: 4px !important;
+}
+
+.epr_-8ygbw8 {
+  padding: 0.5rem 1rem !important;
+}
+
+.epr-body {
+  margin: 0 0.5rem !important;
+}
+
 .file\:text-body-sm::file-selector-button {
     font-family: system-ui;
     font-size: 14px;
@@ -2580,6 +2687,10 @@ textarea:is(:-webkit-autofill, :autofill) {
   border-bottom-width: 2px;
 }
 
+.data-\[state\=inactive\]\:border-transparent[data-state=inactive] {
+  border-color: transparent;
+}
+
 .data-\[state\=active\]\:bg-none[data-state=active] {
   background-image: none;
 }
@@ -2807,6 +2918,10 @@ textarea:is(:-webkit-autofill, :autofill) {
     width: 452px;
   }
 
+  .lg\:w-auto {
+    width: auto;
+  }
+
   .lg\:w-fit {
     width: -moz-fit-content;
     width: fit-content;
@@ -2820,6 +2935,11 @@ textarea:is(:-webkit-autofill, :autofill) {
     min-width: 420px;
   }
 
+  .lg\:\!max-w-fit {
+    max-width: -moz-fit-content !important;
+    max-width: fit-content !important;
+  }
+
   .lg\:text-wrap {
     text-wrap: wrap;
   }

package/dist/index.es.d.ts

@@ -4,6 +4,7 @@ import { ClassValue } from 'clsx';
 import { default as default_2 } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Drawer as Drawer_2 } from 'vaul';
+import { EmojiClickData } from 'emoji-picker-react';
 import { ForwardRefExoticComponent } from 'react';
 import { GridProps as GridProps_2 } from '@radix-ui/themes';
 import { icons } from 'lucide-react';
@@ -50,9 +51,30 @@ export declare const AnimatedLoader: ({ text }: {
 
 export declare const Avatar: default_2.ForwardRefExoticComponent<AvatarProps & default_2.RefAttributes<HTMLImageElement>>;
 
+export declare const AvatarGroup: default_2.ForwardRefExoticComponent<AvatarGroupProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface AvatarGroupProps {
+    avatars: Array<AvatarProps>;
+    size?: AvatarProps["size"];
+    variant?: AvatarProps["variant"];
+    bordered?: AvatarProps["bordered"];
+    className?: string;
+    content?: "image" | "text";
+    showCounter?: boolean;
+}
+
 export declare interface AvatarProps extends Omit<default_2.ImgHTMLAttributes<HTMLImageElement>, "content">, VariantProps<typeof avatarVariants> {
 }
 
+export declare const AvatarSelector: default_2.ForwardRefExoticComponent<AvatarSelectorProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface AvatarSelectorProps {
+    handleEmojiClick: (emoji: EmojiClickData) => void;
+    handleAvatarInput: (e: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onRemove?: () => void;
+    className?: string;
+}
+
 declare const avatarVariants: (props?: ({
     variant?: "rounded" | "square" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
@@ -243,6 +265,10 @@ export declare const DynamicDropdown: ({ content, anchorTrigger, ...props }: Dyn
 export declare interface DynamicDropdownProps {
     content: default_2.ReactNode;
     anchorTrigger?: default_2.ReactNode;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    alignOffset?: number;
 }
 
 export declare const DynamicModal: ({ open, onOpenChange, title, description, content, primaryAction, secondaryAction, className, contentClassName, disableOutsideClick, hasCloseIcon, }: DynamicModalProps) => JSX_2.Element;
@@ -301,6 +327,8 @@ export declare interface DynamicSelectProps {
     alignOffset?: number;
 }
 
+export { EmojiClickData }
+
 export declare type FileType = "dDoc" | "dPage" | "whiteboard" | "note" | "link" | "media";
 
 export declare const FloatingToolbar: default_2.ForwardRefExoticComponent<FloatingToolbarProps & default_2.RefAttributes<HTMLDivElement>>;