@fileverse/ui 4.1.4 → 4.1.6-patch-1

package/README.md

@@ -1,10 +1,10 @@
 # Getting Started with Fileverse UI System
 
-Welcome to the Fileverse UI System documentation. Here you'll find instructions and examples to help you get started quickly and efficiently.
+Welcome to the Fileverse UI System documentation. Here, you'll find instructions and examples to help you get started quickly and efficiently.
 
 ## What is Fileverse design system?
 
-Fileverse design system is the Figma library of UI components that our team’s at Fileverse use to design for experience for Fileverse. The components contained within match with what is available for developers.
+The Fileverse Design System is a Figma library of UI components used by the Fileverse team to create seamless user experiences. These components are designed to match what is available to developers, ensuring consistency between design and implementation.
 
 ## Installation
 

package/dist/index.css

@@ -416,6 +416,7 @@ video {
     --color-text-success: 127, 69%, 29%, 1; /* Green-700 */
     --color-text-inverse: 0, 0%, 100%, 1; /* White */
     --color-text-link: 260, 100%, 52%, 1; /* Blue-700 */
+    --color-text-on-brand: 207, 8%, 23%, 1; /* Gray-950 */
 
     /* Background */
     --color-bg-default: 0, 0%, 100%, 1; /* White */
@@ -444,13 +445,15 @@ 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 */
+    --color-icon-on-brand: 207, 8%, 23%, 1; /* Gray-900 */
 
     /* Utility */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
@@ -461,6 +464,68 @@ 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%, 36%, 1; /* Gray-600 */
+    --color-button-secondary: 0, 0%, 12%, 1; /* Gray-950 */
+    --color-button-secondary-hover: 0, 0%, 25%, 1; /* Gray-800 */
+    --color-button-disabled: 0, 0%, 25%, 1; /* Gray-800 */
+    --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: 126, 67%, 45%, 1; /* Green-500 */
+    --color-text-inverse: 0, 0%, 91%, 1; /* Gray-100 */
+    --color-text-link: 251, 100%, 83%, 1; /* Blue-700 */
+    --color-text-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
+
+    /* 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%, 36%, 1; /* Gray-600 */
+    --color-border-light: 0, 0%, 100%, 1; /* White */
+    --color-border-active: 0, 0%, 91%, 1; /* Gray-200 */
+    --color-border-focused: 254, 100%, 73%, 1; /* Blue-400 */
+    --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 */
+    --color-icon-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
+    /* Utility */
+    --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+  }
   * {
     border-color: hsl(var(--color-border-default));
   }
@@ -707,7 +772,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 +829,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 +845,7 @@ video {
   }
 
   .color-icon-inverse {
-    background-color: hsl(var(--color-icon-inverse));
+    color: hsl(var(--color-icon-inverse));
   }
 
   .color-utility-overlay {
@@ -1014,6 +1079,9 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: sticky;
+}
 .inset-0 {
   inset: 0px;
 }
@@ -1100,9 +1168,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 +1262,9 @@ video {
 .mt-4 {
   margin-top: 1rem;
 }
+.mt-5 {
+  margin-top: 1.25rem;
+}
 .line-clamp-5 {
   overflow: hidden;
   display: -webkit-box;
@@ -1257,15 +1337,24 @@ video {
 .h-6 {
   height: 1.5rem;
 }
+.h-7 {
+  height: 1.75rem;
+}
 .h-8 {
   height: 2rem;
 }
 .h-9 {
   height: 2.25rem;
 }
+.h-\[120px\] {
+  height: 120px;
+}
 .h-\[18px\] {
   height: 18px;
 }
+.h-\[200px\] {
+  height: 200px;
+}
 .h-\[208px\] {
   height: 208px;
 }
@@ -1293,6 +1382,9 @@ video {
 .h-\[68px\] {
   height: 68px;
 }
+.h-\[85vh\] {
+  height: 85vh;
+}
 .h-\[calc\(100\%-1rem\)\] {
   height: calc(100% - 1rem);
 }
@@ -1318,6 +1410,9 @@ video {
 .h-screen {
   height: 100vh;
 }
+.max-h-10 {
+  max-height: 2.5rem;
+}
 .max-h-40 {
   max-height: 10rem;
 }
@@ -1336,6 +1431,9 @@ video {
 .min-h-10 {
   min-height: 2.5rem;
 }
+.min-h-7 {
+  min-height: 1.75rem;
+}
 .min-h-9 {
   min-height: 2.25rem;
 }
@@ -1354,15 +1452,24 @@ 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;
 }
+.w-20 {
+  width: 5rem;
+}
 .w-24 {
   width: 6rem;
 }
@@ -1390,6 +1497,9 @@ video {
 .w-64 {
   width: 16rem;
 }
+.w-7 {
+  width: 1.75rem;
+}
 .w-72 {
   width: 18rem;
 }
@@ -1417,9 +1527,15 @@ video {
 .w-\[18px\] {
   width: 18px;
 }
+.w-\[200px\] {
+  width: 200px;
+}
 .w-\[20px\] {
   width: 20px;
 }
+.w-\[250px\] {
+  width: 250px;
+}
 .w-\[280px\] {
   width: 280px;
 }
@@ -1490,6 +1606,9 @@ video {
 .min-w-5 {
   min-width: 1.25rem;
 }
+.min-w-7 {
+  min-width: 1.75rem;
+}
 .min-w-9 {
   min-width: 2.25rem;
 }
@@ -1529,6 +1648,9 @@ video {
 .min-w-\[60\%\] {
   min-width: 60%;
 }
+.min-w-\[80px\] {
+  min-width: 80px;
+}
 .min-w-\[92vw\] {
   min-width: 92vw;
 }
@@ -1685,9 +1807,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;
@@ -1702,6 +1832,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;
 }
@@ -1854,6 +1987,9 @@ video {
 .\!rounded {
   border-radius: 0.25rem !important;
 }
+.\!rounded-lg {
+  border-radius: var(--radius) !important;
+}
 .\!rounded-none {
   border-radius: 0px !important;
 }
@@ -1930,9 +2066,6 @@ video {
 .border-b-2 {
   border-bottom-width: 2px;
 }
-.border-b-\[0\.5px\] {
-  border-bottom-width: 0.5px;
-}
 .border-r {
   border-right-width: 1px;
 }
@@ -1958,6 +2091,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
 .border-transparent {
   border-color: transparent;
 }
@@ -1978,9 +2115,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;
 }
@@ -1998,12 +2132,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;
 }
@@ -2013,8 +2153,8 @@ video {
 .p-6 {
   padding: 1.5rem;
 }
-.p-\[2px\] {
-  padding: 2px;
+.p-\[4px\] {
+  padding: 4px;
 }
 .\!px-0 {
   padding-left: 0px !important;
@@ -2092,6 +2232,9 @@ video {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+.\!pt-4 {
+  padding-top: 1rem !important;
+}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2110,6 +2253,9 @@ video {
 .pl-2 {
   padding-left: 0.5rem;
 }
+.pl-6 {
+  padding-left: 1.5rem;
+}
 .pr-10 {
   padding-right: 2.5rem;
 }
@@ -2128,9 +2274,6 @@ video {
 .pt-4 {
   padding-top: 1rem;
 }
-.pt-6 {
-  padding-top: 1.5rem;
-}
 .text-left {
   text-align: left;
 }
@@ -2161,10 +2304,18 @@ video {
 .text-\[32px\] {
   font-size: 32px;
 }
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
 .\!font-bold {
   font-weight: 700 !important;
 }
@@ -2177,6 +2328,15 @@ video {
 .font-normal {
   font-weight: 400;
 }
+.leading-5 {
+  line-height: 1.25rem;
+}
+.leading-6 {
+  line-height: 1.5rem;
+}
+.leading-\[20px\] {
+  line-height: 20px;
+}
 .leading-none {
   line-height: 1;
 }
@@ -2187,6 +2347,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));
@@ -2256,6 +2420,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);
 }
@@ -2462,10 +2630,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;
   }
@@ -2494,14 +2658,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));
   }
@@ -2566,6 +2722,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));
   }
@@ -2618,6 +2782,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));
   }
@@ -2626,16 +2794,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] {
@@ -2654,6 +2830,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 {
@@ -2690,6 +2874,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));
   }
@@ -2730,10 +2918,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;
 }
@@ -2946,14 +3130,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;
 }
@@ -3112,6 +3288,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 {
@@ -3152,6 +3347,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

@@ -88,7 +88,7 @@ declare const avatarVariants: (props?: ({
     content?: "image" | "text" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare const BottomDrawer: ({ open, onOpenChange, title, description, content, primaryAction, secondaryAction, className, contentClassName, hasCloseIcon, headerClassName, footerClassName, }: BottomDrawerProps) => JSX_2.Element;
+export declare const BottomDrawer: ({ open, onOpenChange, title, description, content, primaryAction, secondaryAction, className, contentClassName, hasCloseIcon, headerClassName, footerClassName, overlayClasses, noOverlay, }: BottomDrawerProps) => JSX_2.Element;
 
 export declare interface BottomDrawerProps extends DynamicModalProps {
     headerClassName?: string;
@@ -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;
@@ -933,7 +947,7 @@ declare const toggleVariants: (props?: ({
 export declare const Tooltip: React_2.ForwardRefExoticComponent<TooltipProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface TooltipProps extends React_2.HTMLAttributes<HTMLElement>, VariantProps<typeof tooltipVariants> {
-    text: string;
+    text: string | React_2.ReactNode;
     sideOffset?: number;
 }
 
@@ -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;