@fileverse/ui 4.0.2 → 4.0.3

package/dist/index.css

@@ -661,6 +661,10 @@ video {
     background-color: hsl(var(--color-bg-brand));
   }
 
+  .\!color-bg-brand-hover {
+    background-color: hsl(var(--color-bg-brand-hover)) !important;
+  }
+
   .color-bg-brand-hover {
     background-color: hsl(var(--color-bg-brand-hover));
   }
@@ -1003,6 +1007,10 @@ video {
   left: 0px;
   right: 0px;
 }
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
 .-bottom-6 {
   bottom: -1.5rem;
 }
@@ -1030,6 +1038,9 @@ video {
 .bottom-5 {
   bottom: 1.25rem;
 }
+.left-0 {
+  left: 0px;
+}
 .left-1\/2 {
   left: 50%;
 }
@@ -1063,18 +1074,21 @@ video {
 .right-6 {
   right: 1.5rem;
 }
+.top-0 {
+  top: 0px;
+}
 .top-1\/2 {
   top: 50%;
 }
+.top-3 {
+  top: 0.75rem;
+}
 .top-5 {
   top: 1.25rem;
 }
 .top-6 {
   top: 1.5rem;
 }
-.top-8 {
-  top: 2rem;
-}
 .top-\[50\%\] {
   top: 50%;
 }
@@ -1084,6 +1098,9 @@ video {
 .z-50 {
   z-index: 50;
 }
+.z-\[999\] {
+  z-index: 999;
+}
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -1100,10 +1117,6 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-.my-10 {
-  margin-top: 2.5rem;
-  margin-bottom: 2.5rem;
-}
 .my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1186,6 +1199,9 @@ video {
 .h-12 {
   height: 3rem;
 }
+.h-16 {
+  height: 4rem;
+}
 .h-4 {
   height: 1rem;
 }
@@ -1201,9 +1217,6 @@ video {
 .h-9 {
   height: 2.25rem;
 }
-.h-\[156px\] {
-  height: 156px;
-}
 .h-\[16px\] {
   height: 16px;
 }
@@ -1259,9 +1272,6 @@ video {
 .min-h-9 {
   min-height: 2.25rem;
 }
-.min-h-\[156px\] {
-  min-height: 156px;
-}
 .min-h-\[2vh\] {
   min-height: 2vh;
 }
@@ -1286,6 +1296,9 @@ video {
 .w-24 {
   width: 6rem;
 }
+.w-3\/4 {
+  width: 75%;
+}
 .w-32 {
   width: 8rem;
 }
@@ -1298,6 +1311,9 @@ video {
 .w-6 {
   width: 1.5rem;
 }
+.w-72 {
+  width: 18rem;
+}
 .w-8 {
   width: 2rem;
 }
@@ -1374,6 +1390,9 @@ video {
 .min-w-\[200px\] {
   min-width: 200px;
 }
+.min-w-\[25\%\] {
+  min-width: 25%;
+}
 .min-w-\[30px\] {
   min-width: 30px;
 }
@@ -1418,6 +1437,9 @@ video {
 .flex-\[0\.8\] {
   flex: 0.8;
 }
+.flex-auto {
+  flex: 1 1 auto;
+}
 .flex-none {
   flex: none;
 }
@@ -1445,6 +1467,10 @@ video {
   --tw-translate-x: -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));
 }
+.translate-y-1\/4 {
+  --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-\[-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));
@@ -1489,6 +1515,9 @@ video {
      -moz-appearance: none;
           appearance: none;
 }
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
 .flex-row {
   flex-direction: row;
 }
@@ -1617,10 +1646,26 @@ video {
 .rounded-xl {
   border-radius: 0.75rem;
 }
+.rounded-b-lg {
+  border-bottom-right-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+}
+.rounded-l-lg {
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+}
+.rounded-r-lg {
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
 .rounded-t-\[10px\] {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 }
+.rounded-t-lg {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
 .border {
   border-width: 1px;
 }
@@ -1639,6 +1684,9 @@ video {
 .border-b-\[0\.5px\] {
   border-bottom-width: 0.5px;
 }
+.border-r {
+  border-right-width: 1px;
+}
 .border-t {
   border-top-width: 1px;
 }
@@ -1741,6 +1789,10 @@ video {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1846,6 +1898,11 @@ video {
 .opacity-50 {
   opacity: 0.5;
 }
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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);
@@ -1985,6 +2042,9 @@ video {
 .hover\:color-bg-disabled:hover {
     background-color: hsl(var(--color-bg-disabled));
   }
+.hover\:\!color-bg-brand-hover:hover {
+    background-color: hsl(var(--color-bg-brand-hover)) !important;
+  }
 .hover\:color-bg-brand-hover:hover {
     background-color: hsl(var(--color-bg-brand-hover));
   }
@@ -2226,6 +2286,12 @@ video {
 .data-\[state\=active\]\:bg-none[data-state=active] {
   background-image: none;
 }
+.data-\[state\=closed\]\:duration-300[data-state=closed] {
+  transition-duration: 300ms;
+}
+.data-\[state\=open\]\:duration-500[data-state=open] {
+  transition-duration: 500ms;
+}
 .data-\[state\=open\]\:animate-in[data-state=open] {
   animation-name: enter;
   animation-duration: 150ms;
@@ -2256,20 +2322,66 @@ video {
 .data-\[state\=open\]\:zoom-in-95[data-state=open] {
   --tw-enter-scale: .95;
 }
+.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
+  --tw-enter-translate-y: -0.5rem;
+}
+.data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
+  --tw-enter-translate-x: 0.5rem;
+}
+.data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
+  --tw-enter-translate-x: -0.5rem;
+}
+.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
+  --tw-enter-translate-y: 0.5rem;
+}
+.data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed] {
+  --tw-exit-translate-y: 100%;
+}
+.data-\[state\=closed\]\:slide-out-to-left[data-state=closed] {
+  --tw-exit-translate-x: -100%;
+}
 .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
   --tw-exit-translate-x: -50%;
 }
+.data-\[state\=closed\]\:slide-out-to-right[data-state=closed] {
+  --tw-exit-translate-x: 100%;
+}
+.data-\[state\=closed\]\:slide-out-to-top[data-state=closed] {
+  --tw-exit-translate-y: -100%;
+}
 .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
   --tw-exit-translate-y: -48%;
 }
+.data-\[state\=open\]\:slide-in-from-bottom[data-state=open] {
+  --tw-enter-translate-y: 100%;
+}
+.data-\[state\=open\]\:slide-in-from-left[data-state=open] {
+  --tw-enter-translate-x: -100%;
+}
 .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] {
   --tw-enter-translate-x: -50%;
 }
+.data-\[state\=open\]\:slide-in-from-right[data-state=open] {
+  --tw-enter-translate-x: 100%;
+}
+.data-\[state\=open\]\:slide-in-from-top[data-state=open] {
+  --tw-enter-translate-y: -100%;
+}
 .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
   --tw-enter-translate-y: -48%;
 }
+.data-\[state\=closed\]\:duration-300[data-state=closed] {
+  animation-duration: 300ms;
+}
+.data-\[state\=open\]\:duration-500[data-state=open] {
+  animation-duration: 500ms;
+}
 @media (min-width: 640px) {
 
+  .sm\:max-w-sm {
+    max-width: 24rem;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }

package/dist/index.es.d.ts

@@ -8,6 +8,7 @@ import { GridProps as GridProps_2 } from '@radix-ui/themes';
 import { icons } from 'lucide-react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import * as LabelPrimitive from '@radix-ui/react-label';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
@@ -190,6 +191,30 @@ export declare const DrawerTitle: React_2.ForwardRefExoticComponent<Omit<DialogP
 
 export declare const DrawerTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
+export declare const DynamicDrawer: ({ open, onOpenChange, title, titleIcon, content, className, headerClassName, side, noOverlay, rounded, dismissible, }: DynamicDrawerProps) => JSX_2.Element;
+
+export declare interface DynamicDrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    titleIcon?: string;
+    description?: string;
+    content?: default_2.ReactNode;
+    className?: string;
+    headerClassName?: string;
+    noOverlay?: boolean;
+    side?: "top" | "right" | "bottom" | "left";
+    rounded?: boolean;
+    dismissible?: boolean;
+}
+
+export declare const DynamicDropdown: ({ content, anchorTrigger, ...props }: DynamicDropdownProps) => JSX_2.Element;
+
+export declare interface DynamicDropdownProps {
+    content: default_2.ReactNode;
+    anchorTrigger?: default_2.ReactNode;
+}
+
 export declare const DynamicModal: ({ open, onOpenChange, title, description, content, primaryAction, secondaryAction, className, contentClassName, disableOutsideClick, hasCloseIcon, }: DynamicModalProps) => JSX_2.Element;
 
 export declare interface DynamicModalProps {
@@ -235,7 +260,7 @@ export declare type GridProps = GridProps_2;
 
 export declare const Icon: default_2.ForwardRefExoticComponent<Omit<IconProps, "ref"> & default_2.RefAttributes<SVGSVGElement>>;
 
-export declare const IconButton: ({ icon, variant, size, className, elevation, rounded, ...props }: IconButtonProps) => JSX_2.Element;
+export declare const IconButton: ({ icon, variant, size, className, elevation, rounded, isActive, ...props }: IconButtonProps) => JSX_2.Element;
 
 export declare interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Pick<ButtonProps, "variant"> {
     icon: keyof typeof UltimateIcons | string;
@@ -243,6 +268,7 @@ export declare interface IconButtonProps extends React.ButtonHTMLAttributes<HTML
     isLoading?: boolean;
     elevation?: number;
     rounded?: boolean;
+    isActive?: boolean;
 }
 
 export declare interface IconProps extends SvgProps_2, VariantProps<typeof iconVariants_2> {
@@ -321,6 +347,18 @@ export declare interface LucideIconProps extends SvgProps, VariantProps<typeof i
     strokeWidth?: number;
 }
 
+export declare const Popover: React_2.FC<PopoverPrimitive.PopoverProps>;
+
+export declare const PopoverAnchor: React_2.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const PopoverContent: React_2.ForwardRefExoticComponent<PopoverContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface PopoverContentProps extends React_2.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+    elevation?: number;
+}
+
+export declare const PopoverTrigger: React_2.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+
 export declare const RadioGroup: React_2.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare const RadioGroupItem: React_2.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & {
@@ -339,6 +377,41 @@ export declare interface SegmentedControlProps extends default_2.AllHTMLAttribut
     contentType?: "icon" | "text";
 }
 
+export declare const Sheet: React_2.FC<DialogPrimitive.DialogProps>;
+
+export declare const SheetClose: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare const SheetContent: React_2.ForwardRefExoticComponent<SheetContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+declare interface SheetContentProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+    overlayClasses?: string;
+    dismissible?: boolean;
+}
+
+export declare const SheetDescription: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React_2.RefAttributes<HTMLParagraphElement>, "ref"> & React_2.RefAttributes<HTMLParagraphElement>>;
+
+export declare const SheetFooter: {
+    ({ className, ...props }: React_2.HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+    displayName: string;
+};
+
+export declare const SheetHeader: {
+    ({ className, ...props }: React_2.HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+    displayName: string;
+};
+
+export declare const SheetOverlay: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const SheetPortal: React_2.FC<DialogPrimitive.DialogPortalProps>;
+
+export declare const SheetTitle: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React_2.RefAttributes<HTMLHeadingElement>, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
+
+export declare const SheetTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+declare const sheetVariants: (props?: ({
+    side?: "left" | "right" | "bottom" | "top" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare type SortState = {
     keyName: string | null;
     order: "default" | "asc" | "desc";
@@ -348,6 +421,30 @@ export declare const StaticLoader: ({ text }: {
     text?: string;
 }) => JSX_2.Element;
 
+export declare const Step: default_2.ForwardRefExoticComponent<StepProps & default_2.RefAttributes<HTMLElement>>;
+
+export declare const Stepper: default_2.ForwardRefExoticComponent<StepperProps & default_2.RefAttributes<HTMLElement>>;
+
+export declare interface StepperProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children?: default_2.ReactNode;
+    className?: string;
+    layout?: "horizontal" | "vertical";
+}
+
+export declare interface StepProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    isActive?: boolean;
+    isCompleted?: boolean;
+    firstStep?: boolean;
+    lastStep?: boolean;
+    stepNumber?: string;
+    title?: string;
+    className?: string;
+    type?: "solid" | "dashed";
+    layout?: "horizontal" | "vertical";
+    stepContent?: default_2.ReactNode;
+    isLoading?: boolean;
+}
+
 declare interface SvgProps extends default_2.SVGProps<SVGSVGElement> {
     fill?: string;
     stroke?: string;