@fileverse/ui 4.1.4-patch-3 → 4.1.4-patch-4

package/dist/index.css

@@ -433,7 +433,7 @@ video {
     --color-bg-default-inverse: 0, 0%, 0%, 1; /* Black */
     --color-bg-tertiary: 195, 10%, 92%, 1; /* Tertiary */
     --color-bg-success-light: 124, 79%, 93%, 1; /* Green-100 */
-
+      
     /* Border */
     --color-border-default: 195, 10%, 92%, 1; /* Gray-200 */
     --color-border-hover: 0, 0%, 0%, 1; /* Black */
@@ -444,13 +444,14 @@ video {
     --color-border-disabled: 206, 9%, 66%, 1; /* Gray-500 */
 
     /* Icon */
-    --color-icon-default: 207, 8%, 23%, 1; /* Gray-950 */
+    --color-icon-default: 0, 0%, 100%, 1; /* White */
     --color-icon-default-hover: 207, 8%, 23%, 1; /* Gray-950 */
     --color-icon-brand: 52, 100%, 52%, 1; /* Yellow-400 */
     --color-icon-secondary: 208, 8%, 50%, 1; /* Gray-700 */
     --color-icon-disabled: 206, 9%, 66%, 1; /* Gray-500 */
     --color-icon-inverse: 0, 0%, 100%, 1; /* White */
     --color-icon-danger: 354, 96%, 59%, 1; /* Red-500 */
+    --color-icon-success: 127, 69%, 29%, 1; /* Green-700 */
 
     /* Utility */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
@@ -461,6 +462,67 @@ video {
     --shadow-elevation-3: 0px 4px 16px rgba (0,  0,  0,  0.15);
     --shadow-elevation-4: 0px 8px 32px rgba (0,  0,  0,  0.15);
   }
+
+  .dark {
+    /* Button */
+    --color-button-default: 0, 0%, 31%, 1; /* Gray-700 */
+    --color-button-default-hover: 0, 0%, 25%, 1; /* Gray-800 */
+    --color-button-secondary: 0, 0%, 12%, 1; /* Gray-950 */
+    --color-button-secondary-hover: 0, 0%, 25%, 1; /* Gray-800 */
+    --color-button-disabled: 0, 0%, 31%, 1; /* Gray-200 */
+    --color-button-danger: 354, 96%, 59%, 1; /* Red-500 */
+    --color-button-danger-hover: 354, 84%, 42%, 1; /* Red-700 */
+    --color-button-floating: 0, 0%, 31%, 1; /* Gray-700 */
+    --color-button-floating-hover: 0, 0%, 25%, 1; /* Gray-800 */
+
+    /* Text */
+    --color-text-default: 0, 0%, 91%, 1; /* Gray-100 */
+    --color-text-secondary: 0, 0%, 53%, 1; /* Gray-400 */
+    --color-text-disabled: 0, 0%, 43%, 1; /* Gray-500 */
+    --color-text-danger: 354, 100%, 70%, 1; /* Red-400 */
+    --color-text-success: 127, 69%, 29%, 1; /* Green-700 */
+    --color-text-inverse: 0, 0%, 91%, 1; /* Gray-100 */
+    --color-text-link: 251, 100%, 83%, 1; /* Blue-700 */
+
+    /* Background */
+    --color-bg-default: 0, 0%, 18%, 1; /* Gray-900 */
+    --color-bg-default-hover: 0, 0%, 25%, 1; /* Gray-800 */
+    --color-bg-default-active: 50, 74%, 54%, 1; /* Yellow-400 */
+    --color-bg-default-selected: 0, 0%, 25%, 1; /* Gray-800 */
+    --color-bg-secondary: 0, 0%, 12%, 1; /* Gray-950 */
+    --color-bg-secondary-hover: 0, 0%, 18%, 1; /* Gray-900 */
+    --color-bg-disabled: 0, 0%, 53%, 1; /* Gray-400 */
+    --color-bg-brand: 50, 74%, 54%, 1; /* Yellow-400 */
+    --color-bg-brand-hover: 50, 60%, 45%, 1; /* Yellow-500 */
+    --color-bg-brand-light: 57, 92%, 76%, 1; /* Yellow-100 */
+    --color-bg-danger: 354, 100%, 89%, 1; /* Red-200 */
+    --color-bg-danger-light: 356, 100%, 97%, 1; /* Red-50 */
+    --color-bg-default-inverse: 0, 0%, 100%, 1; /* White */
+    --color-bg-tertiary: 0, 0%, 25%, 1; /* Gray-800 */
+    --color-bg-success-light: 124, 79%, 93%, 1; /* Green-100 */
+
+    /* Border */
+    --color-border-default: 0, 0%, 25%, 1; /* Gray-800 */
+    --color-border-hover: 0, 0%, 0%, 1; /* Black */
+    --color-border-light: 0, 0%, 100%, 1; /* White */
+    --color-border-active: 0, 0%, 100%, 1; /* Black */
+    --color-border-focused: 260, 100%, 52%, 1; /* Blue-700 */
+    --color-border-danger: 354, 100%, 70%, 1; /* Red-400 */
+    --color-border-disabled: 0, 0%, 53%, 1; /* Gray-400  */
+
+    /* Icon */
+    --color-icon-default: 0, 0%, 100%, 1; /* White */
+    --color-icon-default-hover: 0, 0%, 12%, 1; /* Gray-900 */
+    --color-icon-brand: 50, 74%, 54%, 1; /* Yellow-400 */
+    --color-icon-secondary: 0, 0%, 53%, 1; /* Gray-400 */
+    --color-icon-disabled: 0, 0%, 25%, 1; /* Gray-800 */
+    --color-icon-inverse: 207, 8%, 23%, 1; /* Gray-100 */
+    --color-icon-danger: 354, 96%, 59%, 1; /* Red-500 */
+    --color-icon-success: 127, 69%, 29%, 1; /* Green-700 */
+
+    /* Utility */
+    --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+  }
   * {
     border-color: hsl(var(--color-border-default));
   }
@@ -707,7 +769,7 @@ video {
   }
 
   .color-button-secondary {
-    background-color: hsl(var(--color-button-secondary));
+    background-color: hsl(var(--color-button-ghost));
     border: 2px solid hsl(var(--color-border-active));
   }
 
@@ -764,15 +826,15 @@ video {
   }
 
   .color-icon-default-hover {
-    background-color: hsl(var(--color-icon-default-hover));
+    color: hsl(var(--color-icon-default-hover));
   }
 
   .color-icon-brand {
-    background-color: hsl(var(--color-icon-brand));
+    color: hsl(var(--color-icon-brand));
   }
 
   .color-icon-secondary {
-    background-color: hsl(var(--color-icon-secondary));
+    color: hsl(var(--color-icon-secondary));
   }
 
   .color-icon-disabled {
@@ -780,7 +842,7 @@ video {
   }
 
   .color-icon-inverse {
-    background-color: hsl(var(--color-icon-inverse));
+    color: hsl(var(--color-icon-inverse));
   }
 
   .color-utility-overlay {
@@ -1014,6 +1076,9 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: sticky;
+}
 .inset-0 {
   inset: 0px;
 }
@@ -1100,9 +1165,18 @@ video {
 .top-3 {
   top: 0.75rem;
 }
+.top-4 {
+  top: 1rem;
+}
+.top-\[4rem\] {
+  top: 4rem;
+}
 .top-\[50\%\] {
   top: 50%;
 }
+.\!z-40 {
+  z-index: 40 !important;
+}
 .z-10 {
   z-index: 10;
 }
@@ -1185,6 +1259,9 @@ video {
 .mt-4 {
   margin-top: 1rem;
 }
+.mt-5 {
+  margin-top: 1.25rem;
+}
 .line-clamp-5 {
   overflow: hidden;
   display: -webkit-box;
@@ -1263,9 +1340,15 @@ video {
 .h-9 {
   height: 2.25rem;
 }
+.h-\[120px\] {
+  height: 120px;
+}
 .h-\[18px\] {
   height: 18px;
 }
+.h-\[200px\] {
+  height: 200px;
+}
 .h-\[208px\] {
   height: 208px;
 }
@@ -1293,6 +1376,9 @@ video {
 .h-\[68px\] {
   height: 68px;
 }
+.h-\[85vh\] {
+  height: 85vh;
+}
 .h-\[calc\(100\%-1rem\)\] {
   height: calc(100% - 1rem);
 }
@@ -1357,12 +1443,18 @@ video {
 .\!w-\[95\%\] {
   width: 95% !important;
 }
+.\!w-full {
+  width: 100% !important;
+}
 .w-10 {
   width: 2.5rem;
 }
 .w-11 {
   width: 2.75rem;
 }
+.w-12 {
+  width: 3rem;
+}
 .w-16 {
   width: 4rem;
 }
@@ -1423,9 +1515,15 @@ video {
 .w-\[18px\] {
   width: 18px;
 }
+.w-\[200px\] {
+  width: 200px;
+}
 .w-\[20px\] {
   width: 20px;
 }
+.w-\[250px\] {
+  width: 250px;
+}
 .w-\[280px\] {
   width: 280px;
 }
@@ -1694,9 +1792,17 @@ video {
      -moz-user-select: none;
           user-select: none;
 }
+.select-text {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+}
 .resize-none {
   resize: none;
 }
+.list-disc {
+  list-style-type: disc;
+}
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -1711,6 +1817,9 @@ video {
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
 .flex-row {
   flex-direction: row;
 }
@@ -1863,6 +1972,9 @@ video {
 .\!rounded {
   border-radius: 0.25rem !important;
 }
+.\!rounded-lg {
+  border-radius: var(--radius) !important;
+}
 .\!rounded-none {
   border-radius: 0px !important;
 }
@@ -1939,9 +2051,6 @@ video {
 .border-b-2 {
   border-bottom-width: 2px;
 }
-.border-b-\[0\.5px\] {
-  border-bottom-width: 0.5px;
-}
 .border-r {
   border-right-width: 1px;
 }
@@ -1991,9 +2100,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
-}
 .bg-none {
   background-image: none;
 }
@@ -2011,12 +2117,18 @@ video {
 .p-0 {
   padding: 0px;
 }
+.p-0\.5 {
+  padding: 0.125rem;
+}
 .p-1 {
   padding: 0.25rem;
 }
 .p-2 {
   padding: 0.5rem;
 }
+.p-3 {
+  padding: 0.75rem;
+}
 .p-4 {
   padding: 1rem;
 }
@@ -2026,8 +2138,8 @@ video {
 .p-6 {
   padding: 1.5rem;
 }
-.p-\[2px\] {
-  padding: 2px;
+.p-\[4px\] {
+  padding: 4px;
 }
 .\!px-0 {
   padding-left: 0px !important;
@@ -2126,6 +2238,9 @@ video {
 .pl-2 {
   padding-left: 0.5rem;
 }
+.pl-6 {
+  padding-left: 1.5rem;
+}
 .pr-10 {
   padding-right: 2.5rem;
 }
@@ -2203,6 +2318,9 @@ video {
 .leading-6 {
   line-height: 1.5rem;
 }
+.leading-\[20px\] {
+  line-height: 20px;
+}
 .leading-none {
   line-height: 1;
 }
@@ -2213,6 +2331,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(119 129 138 / var(--tw-text-opacity));
 }
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -2282,6 +2404,10 @@ video {
 .ring-offset-white {
   --tw-ring-offset-color: #fff;
 }
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2488,10 +2614,6 @@ textarea:is(:-webkit-autofill, :autofill) {
     background-color: hsl(var(--color-bg-secondary-hover));
   }
 
-.hover\:color-bg-disabled:hover {
-    background-color: hsl(var(--color-bg-disabled));
-  }
-
 .hover\:\!color-bg-brand:hover {
     background-color: hsl(var(--color-bg-brand)) !important;
   }
@@ -2520,14 +2642,6 @@ textarea:is(:-webkit-autofill, :autofill) {
     border-color: hsl(var(--color-border-hover));
   }
 
-.focus\:color-text-default:focus {
-    color: hsl(var(--color-text-default));
-  }
-
-.focus\:color-bg-default-selected:focus {
-    background-color: hsl(var(--color-bg-default-selected));
-  }
-
 .focus-visible\:color-border-hover:focus-visible {
     border-color: hsl(var(--color-border-hover));
   }
@@ -2592,6 +2706,14 @@ textarea:is(:-webkit-autofill, :autofill) {
     border-color: hsl(var(--color-border-default));
   }
 
+.group.secondary .group-\[\.secondary\]\:color-border-default {
+    border-color: hsl(var(--color-border-default));
+  }
+
+.group.success .group-\[\.success\]\:color-border-default {
+    border-color: hsl(var(--color-border-default));
+  }
+
 .group.secondary .group-\[\.secondary\]\:color-border-hover {
     border-color: hsl(var(--color-border-hover));
   }
@@ -2644,6 +2766,10 @@ textarea:is(:-webkit-autofill, :autofill) {
     background-color: hsl(var(--color-bg-default-selected));
   }
 
+.data-\[highlighted\]\:color-text-default[data-highlighted] {
+    color: hsl(var(--color-text-default));
+  }
+
 .data-\[state\=active\]\:color-text-default[data-state=active] {
     color: hsl(var(--color-text-default));
   }
@@ -2652,16 +2778,24 @@ textarea:is(:-webkit-autofill, :autofill) {
     color: hsl(var(--color-text-default));
   }
 
+.data-\[disabled\]\:color-text-disabled[data-disabled] {
+    color: hsl(var(--color-text-disabled));
+  }
+
 .data-\[state\=unchecked\]\:color-bg-default-hover[data-state=unchecked] {
     background-color: hsl(var(--color-bg-default-hover));
   }
 
+.data-\[highlighted\]\:color-bg-default-selected[data-highlighted] {
+    background-color: hsl(var(--color-bg-default-selected));
+  }
+
 .data-\[state\=open\]\:color-bg-default-selected[data-state=open] {
     background-color: hsl(var(--color-bg-default-selected));
   }
 
-.data-\[state\=selected\]\:color-bg-disabled[data-state=selected] {
-    background-color: hsl(var(--color-bg-disabled));
+.data-\[state\=selected\]\:color-bg-default-selected[data-state=selected] {
+    background-color: hsl(var(--color-bg-default-selected));
   }
 
 .data-\[state\=checked\]\:color-bg-brand-hover[data-state=checked] {
@@ -2680,6 +2814,14 @@ textarea:is(:-webkit-autofill, :autofill) {
     background-color: hsl(var(--color-bg-brand-hover));
   }
 
+.dark\:color-bg-disabled:is(.dark *) {
+    background-color: hsl(var(--color-bg-disabled));
+  }
+
+.dark\:data-\[state\=active\]\:color-border-light[data-state=active]:is(.dark *) {
+    border-color: hsl(var(--color-border-light));
+  }
+
 @media (min-width: 1024px) {
 
   .lg\:\!text-heading-2xlg {
@@ -2716,6 +2858,10 @@ textarea:is(:-webkit-autofill, :autofill) {
     color: hsl(var(--color-text-disabled));
   }
 
+.\[\&_tr\]\:color-border-default tr {
+    border-color: hsl(var(--color-border-default));
+  }
+
 .data-\[state\=unchecked\]\:toggle-default[data-state=unchecked] {
     background-color: hsl(var(--color-bg-disabled));
   }
@@ -2756,10 +2902,6 @@ textarea:is(:-webkit-autofill, :autofill) {
   background-color: transparent;
 }
 
-.hover\:bg-opacity-50:hover {
-  --tw-bg-opacity: 0.5;
-}
-
 .hover\:opacity-90:hover {
   opacity: 0.9;
 }
@@ -2972,14 +3114,6 @@ textarea:is(:-webkit-autofill, :autofill) {
   border-color: transparent;
 }
 
-.data-\[state\=active\]\:bg-none[data-state=active] {
-  background-image: none;
-}
-
-.data-\[disabled\]\:opacity-50[data-disabled] {
-  opacity: 0.5;
-}
-
 .data-\[swipe\=move\]\:transition-none[data-swipe=move] {
   transition-property: none;
 }
@@ -3138,6 +3272,25 @@ textarea:is(:-webkit-autofill, :autofill) {
   animation-duration: 500ms;
 }
 
+.dark\:bg-\[\#000\]:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.dark\:stroke-black:is(.dark *) {
+  stroke: #000;
+}
+
+.dark\:\!text-\[\#363B3F\]:is(.dark *) {
+  --tw-text-opacity: 1 !important;
+  color: rgb(54 59 63 / var(--tw-text-opacity)) !important;
+}
+
+.dark\:text-\[\#363B3F\]:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(54 59 63 / var(--tw-text-opacity));
+}
+
 @media (min-width: 640px) {
 
   .sm\:max-w-fit {
@@ -3178,6 +3331,10 @@ textarea:is(:-webkit-autofill, :autofill) {
 
 @media (min-width: 768px) {
 
+  .md\:\!right-4 {
+    right: 1rem !important;
+  }
+
   .md\:block {
     display: block;
   }

package/dist/index.es.d.ts

@@ -371,7 +371,7 @@ export declare interface DynamicDrawerProps {
     dismissible?: boolean;
 }
 
-export declare const DynamicDrawerV2: default_2.FC<DynamicDrawerV2Props>;
+export declare const DynamicDrawerV2: ({ title, open, onOpenChange, content, className, headerClassName, contentClassName, side, rounded, dismissible, }: DynamicDrawerV2Props) => JSX_2.Element;
 
 export declare interface DynamicDrawerV2Props {
     title?: string;
@@ -596,6 +596,8 @@ 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 PopoverClose: React_2.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React_2.RefAttributes<HTMLButtonElement>>;
+
 export declare const PopoverContent: React_2.ForwardRefExoticComponent<PopoverContentProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface PopoverContentProps extends React_2.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
@@ -664,6 +666,7 @@ export declare const SheetContent: React_2.ForwardRefExoticComponent<SheetConten
 declare interface SheetContentProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
     overlayClasses?: string;
     dismissible?: boolean;
+    hideCloseButton?: boolean;
 }
 
 export declare const SheetDescription: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React_2.RefAttributes<HTMLParagraphElement>, "ref"> & React_2.RefAttributes<HTMLParagraphElement>>;
@@ -870,6 +873,17 @@ export declare interface TextFieldProps extends React_2.InputHTMLAttributes<HTML
     onChange?: (e: React_2.ChangeEvent<HTMLInputElement>) => void;
 }
 
+declare type Theme = "light" | "dark";
+
+export declare const ThemeProvider: ({ children, defaultTheme, }: ThemeProviderProps) => JSX_2.Element;
+
+declare type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+};
+
+export declare const ThemeToggle: () => JSX_2.Element;
+
 export declare const Toast: React_2.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React_2.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "danger" | "secondary" | "success" | null | undefined;
     position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "center-top" | "center-bottom" | null | undefined;
@@ -963,6 +977,11 @@ export declare function useSortableData(initialData: TableDataProps[], defaultSo
     sortData: (keyName: string) => void;
 };
 
+export declare const useTheme: () => {
+    theme: Theme;
+    toggleTheme: () => void;
+};
+
 export declare function useToast(): {
     toast: typeof toast;
     dismiss: (toastId?: string) => void;