@fileverse/ui 5.0.1 → 5.1.0

package/dist/index.css

@@ -567,6 +567,10 @@ video {
     --color-icon-success: 127, 69%, 29%, 1; /* Green-700 */
     --color-icon-on-brand: 207, 8%, 23%, 1; /* Gray-900 */
 
+    /* Tooltip */
+    --color-bg-tooltip: 0, 0%, 0%, 1; /* Black */
+    --color-text-tooltip: 0, 0%, 100%, 1; /* White */
+
     /* Utility */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
 
@@ -641,6 +645,157 @@ video {
     --color-icon-info: 254, 100%, 73%, 1;
     --color-icon-success: 126, 74%, 73%, 1;
     --color-icon-on-brand: 0, 0%, 18%, 1; /* Gray-950 */
+
+    /* Tooltip */
+    --color-bg-tooltip: 0, 0%, 100%, 1; /* White */
+    --color-text-tooltip: 0, 0%, 0%, 1; /* Black */
+
+    /* Utility */
+    --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+  }
+
+  .theme-sepia {
+    /* Button */
+    --color-button-default: 28, 16%, 21%, 1; /* #3E352D */
+    --color-button-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
+    --color-button-secondary: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-button-secondary-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
+    --color-button-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
+    --color-button-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-button-danger-hover: 0, 71%, 42%, 1; /* #B71F1F */
+    --color-button-floating: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-button-floating-hover: 28, 16%, 21%, 0.06; /* #3E352D 6% */
+
+    /* Text */
+    --color-text-default: 28, 16%, 21%, 1; /* #3E352D */
+    --color-text-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
+    --color-text-disabled: 31, 29%, 64%, 1; /* #BEA489 */
+    --color-text-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-text-success: 77, 23%, 35%, 1; /* #616C44 */
+    --color-text-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-text-link: 199, 100%, 29%, 1; /* #006494 */
+    --color-text-on-brand: 28, 16%, 21%, 1; /* #3E352D */
+
+    /* Background */
+    --color-bg-default: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-bg-default-hover: 28, 16%, 21%, 0.08; /* #3E352D 8% */
+    --color-bg-default-active: 46, 88%, 56%, 1; /* #F2C42D */
+    --color-bg-default-selected: 28, 16%, 21%, 0.1; /* #3E352D 10% */
+    --color-bg-secondary: 41, 61%, 80%, 1; /* #EBD7AD */
+    --color-bg-secondary-hover: 28, 16%, 21%, 0.12; /* #3E352D 12% */
+    --color-bg-disabled: 28, 16%, 21%, 0.04; /* #3E352D 4% */
+    --color-bg-brand: 46, 88%, 56%, 1; /* #F2C42D */
+    --color-bg-brand-hover: 40, 84%, 50%, 1; /* #EBA515 */
+    --color-bg-brand-light: 47, 87%, 88%, 1; /* #FBEFC5 */
+    --color-bg-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-bg-danger-light: 0, 71%, 42%, 0.06; /* #B71F1F 6% */
+    --color-bg-default-inverse: 28, 16%, 21%, 1; /* #3E352D */
+    --color-bg-tertiary: 44, 32%, 86%, 1; /* #E7E1D0 */
+    --color-bg-success: 77, 23%, 35%, 1; /* #616C44 */
+    --color-bg-success-light: 76, 23%, 64%, 1; /* #ADB88E */
+
+    /* Border */
+    --color-border-default: 41, 49%, 76%, 1; /* #E0CDA4 */
+    --color-border-hover: 41, 50%, 68%, 1; /* #D6BC85 */
+    --color-border-light: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-border-active: 28, 16%, 21%, 1; /* #3E352D */
+    --color-border-focused: 199, 100%, 29%, 1; /* #006494 */
+    --color-border-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-border-warning: 12, 85%, 60%, 1; /* #F06543 */
+    --color-border-success: 77, 23%, 35%, 1; /* #616C44 */
+    --color-border-info: 199, 100%, 29%, 1; /* #006494 */
+    --color-border-disabled: 31, 29%, 64%, 1; /* #BEA489 */
+
+    /* Icon */
+    --color-icon-default: 28, 16%, 21%, 1; /* #3E352D */
+    --color-icon-default-hover: 29, 16%, 26%, 1; /* #4D4238 */
+    --color-icon-brand: 46, 88%, 56%, 1; /* #F2C42D */
+    --color-icon-secondary: 31, 17%, 42%, 1; /* #7D6B58 */
+    --color-icon-disabled: 31, 29%, 64%, 1; /* #BEA489 */
+    --color-icon-inverse: 41, 61%, 84%, 1; /* #EFDFBD */
+    --color-icon-danger: 0, 71%, 38%, 1; /* #A61C1C */
+    --color-icon-warning: 12, 85%, 60%, 1; /* #F06543 */
+    --color-icon-info: 199, 100%, 29%, 1; /* #006494 */
+    --color-icon-success: 77, 23%, 35%, 1; /* #616C44 */
+    --color-icon-on-brand: 28, 16%, 21%, 1; /* #3E352D */
+
+    /* Tooltip */
+    --color-bg-tooltip: 28, 16%, 21%, 1; /* #3E352D */
+    --color-text-tooltip: 41, 61%, 84%, 1; /* #EFDFBD */
+
+    /* Utility */
+    --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
+  }
+
+  .theme-pink {
+    /* Button */
+    --color-button-default: 349, 25%, 13%, 1; /* #2A191C */
+    --color-button-default-hover: 349, 25%, 22%, 1; /* #462A2F */
+    --color-button-secondary: 346, 100%, 95%, 1; /* #FFE6EC */
+    --color-button-secondary-hover: 24, 16%, 21%, 0.06; /* #3E352D 6% */
+    --color-button-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
+    --color-button-danger: 2, 79%, 56%, 1; /* #E73D36 */
+    --color-button-danger-hover: 2, 79%, 48%, 1; /* #DB221A */
+    --color-button-floating: 346, 100%, 95%, 1; /* #FFE6EC */
+    --color-button-floating-hover: 24, 16%, 21%, 0.06; /* #3E352D 6% */
+
+    /* Text */
+    --color-text-default: 3, 88%, 26%, 1; /* #7C0E08 */
+    --color-text-secondary: 3, 39%, 59%, 1; /* #C0736F */
+    --color-text-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
+    --color-text-danger: 2, 79%, 56%, 1; /* #E73D36 */
+    --color-text-success: 139, 35%, 42%, 1; /* #46905E */
+    --color-text-inverse: 346, 100%, 95%, 1; /* #FFE6EC */
+    --color-text-link: 209, 89%, 39%, 1; /* #0B67BD */
+    --color-text-on-brand: 3, 88%, 26%, 1; /* #7C0E08 */
+
+    /* Background */
+    --color-bg-default: 346, 100%, 95%, 1; /* #FFE6EC */
+    --color-bg-default-hover: 3, 88%, 26%, 0.08; /* #7C0E08 8% */
+    --color-bg-default-active: 45, 100%, 65%, 1; /* #FFD24D */
+    --color-bg-default-selected: 3, 88%, 26%, 0.06; /* #7C0E08 6% */
+    --color-bg-secondary: 345, 100%, 92%, 1; /* #FFD6E0 */
+    --color-bg-secondary-hover: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
+    --color-bg-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
+    --color-bg-brand: 45, 100%, 65%, 1; /* #FFD24D */
+    --color-bg-brand-hover: 45, 100%, 56%, 1; /* #FFC61F */
+    --color-bg-brand-light: 45, 100%, 90%, 1; /* #FFF2CC */
+    --color-bg-danger: 2, 79%, 56%, 1; /* #E73D36 */
+    --color-bg-danger-light: 2, 79%, 56%, 0.14; /* #E73D36 14% */
+    --color-bg-default-inverse: 28, 16%, 21%, 1; /* #3E352D */
+    --color-bg-tertiary: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
+    --color-bg-success: 139, 35%, 42%, 1; /* #46905E */
+    --color-bg-success-light: 140, 34%, 88%, 1; /* #D6EBDD */
+
+    /* Border */
+    --color-border-default: 346, 100%, 90%, 1; /* #FFCCD8 */
+    --color-border-hover: 346, 100%, 86%, 1; /* #FFB8C9 */
+    --color-border-light: 348, 100%, 96%, 1; /* #FFEBEF */
+    --color-border-active: 3, 88%, 26%, 1; /* #7C0E08 */
+    --color-border-focused: 209, 89%, 39%, 1; /* #0B67BD */
+    --color-border-danger: 2, 79%, 56%, 1; /* #E73D36 */
+    --color-border-warning: 19, 83%, 53%, 1; /* #EB6424 */
+    --color-border-success: 139, 35%, 42%, 1; /* #46905E */
+    --color-border-info: 209, 89%, 39%, 1; /* #0B67BD */
+    --color-border-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
+
+    /* Icon */
+    --color-icon-default: 3, 88%, 26%, 1; /* #7C0E08 */
+    --color-icon-default-hover: 3, 88%, 32%, 1; /* #99110A */
+    --color-icon-brand: 45, 100%, 65%, 1; /* #FFD24D */
+    --color-icon-secondary: 3, 39%, 59%, 1; /* #C0736F */
+    --color-icon-disabled: 3, 43%, 76%, 1; /* #DCABA8 */
+    --color-icon-inverse: 346, 100%, 95%, 1; /* #FFE6EC */
+    --color-icon-danger: 2, 79%, 56%, 1; /* #E73D36 */
+    --color-icon-warning: 19, 83%, 53%, 1; /* #EB6424 */
+    --color-icon-info: 209, 89%, 39%, 1; /* #0B67BD */
+    --color-icon-success: 140, 35%, 45%, 1; /* #4B9B65 */
+    --color-icon-on-brand: 3, 88%, 26%, 1; /* #7C0E08 */
+
+    /* Tooltip */
+    --color-bg-tooltip: 3, 88%, 26%, 1; /* #7C0E08 */
+    --color-text-tooltip: 346, 100%, 95%, 1; /* #FFE6EC */
+
     /* Utility */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
   }
@@ -1282,6 +1437,9 @@ video {
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1381,6 +1539,12 @@ video {
 .h-12 {
   height: 3rem;
 }
+.h-14 {
+  height: 3.5rem;
+}
+.h-3 {
+  height: 0.75rem;
+}
 .h-3\.5 {
   height: 0.875rem;
 }
@@ -1472,6 +1636,9 @@ video {
 .max-h-40 {
   max-height: 10rem;
 }
+.max-h-7 {
+  max-height: 1.75rem;
+}
 .max-h-96 {
   max-height: 24rem;
 }
@@ -1545,6 +1712,9 @@ video {
 .w-24 {
   width: 6rem;
 }
+.w-3 {
+  width: 0.75rem;
+}
 .w-3\.5 {
   width: 0.875rem;
 }
@@ -2231,6 +2401,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
+.border-black\/10 {
+  border-color: rgb(0 0 0 / 0.1);
+}
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
@@ -2238,12 +2411,15 @@ video {
 .border-transparent {
   border-color: transparent;
 }
-.border-l-\[hsl\(var\(--color-border-default\)\)\] {
-  border-left-color: hsl(var(--color-border-default));
+.border-l-\[hsl\(var\(--color-border-active\)\)\] {
+  border-left-color: hsl(var(--color-border-active));
 }
 .\!bg-transparent {
   background-color: transparent !important;
 }
+.bg-black\/5 {
+  background-color: rgb(0 0 0 / 0.05);
+}
 .bg-green-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
@@ -2261,8 +2437,8 @@ video {
 .bg-none {
   background-image: none;
 }
-.stroke-white {
-  stroke: #fff;
+.stroke-\[hsl\(var\(--color-bg-default\)\)\] {
+  stroke: hsl(var(--color-bg-default));
 }
 .object-contain {
   -o-object-fit: contain;
@@ -2281,6 +2457,9 @@ video {
 .p-1 {
   padding: 0.25rem;
 }
+.p-1\.5 {
+  padding: 0.375rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -2312,6 +2491,10 @@ video {
   padding-left: 0px;
   padding-right: 0px;
 }
+.px-0\.5 {
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -2340,6 +2523,10 @@ video {
   padding-left: 2rem;
   padding-right: 2rem;
 }
+.px-\[3px\] {
+  padding-left: 3px;
+  padding-right: 3px;
+}
 .px-px {
   padding-left: 1px;
   padding-right: 1px;
@@ -2387,6 +2574,9 @@ video {
 .pb-2 {
   padding-bottom: 0.5rem;
 }
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -2506,6 +2696,12 @@ video {
   --tw-text-opacity: 1;
   color: rgb(119 129 138 / var(--tw-text-opacity, 1));
 }
+.text-\[hsl\(var\(--color-bg-default\)\)\] {
+  color: hsl(var(--color-bg-default));
+}
+.text-\[hsl\(var\(--color-icon-secondary\)\)\] {
+  color: hsl(var(--color-icon-secondary));
+}
 .text-\[hsl\(var\(--color-text-inverse\)\)\] {
   color: hsl(var(--color-text-inverse));
 }
@@ -2562,10 +2758,27 @@ video {
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.outline {
+  outline-style: solid;
+}
+.outline-1 {
+  outline-width: 1px;
+}
+.outline-offset-\[-1px\] {
+  outline-offset: -1px;
+}
+.outline-\[hsl\(var\(--color-border-default\)\)\] {
+  outline-color: hsl(var(--color-border-default));
+}
 .ring-0 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3070,12 +3283,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=checked\]\:hover\:enabled\:color-bg-brand-hover:enabled:hover[data-state="checked"] {
     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 {
@@ -3139,9 +3346,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .hover\:\!border-transparent:hover {
   border-color: transparent !important;
 }
-.hover\:bg-\[rgba\(0\2c 0\2c 0\2c 0\.1\)\]:hover {
-  background-color: rgba(0,0,0,0.1);
-}
 .hover\:bg-inherit:hover {
   background-color: inherit;
 }
@@ -3448,16 +3652,10 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=open\]\:duration-500[data-state="open"] {
   animation-duration: 500ms;
 }
-.dark\:border-l-\[hsl\(var\(--color-border-active\)\)\]:is(.dark *) {
-  border-left-color: hsl(var(--color-border-active));
-}
 .dark\:bg-\[\#000\]:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
-.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, 1)) !important;
@@ -3466,9 +3664,6 @@ textarea:is(:-webkit-autofill, :autofill) {
   --tw-text-opacity: 1;
   color: rgb(54 59 63 / var(--tw-text-opacity, 1));
 }
-.dark\:hover\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.2\)\]:hover:is(.dark *) {
-  background-color: rgba(255,255,255,0.2);
-}
 @media (min-width: 640px) {
 
   .sm\:max-w-fit {

package/dist/index.es.d.ts

@@ -907,7 +907,7 @@ export declare interface TextFieldProps extends React_2.InputHTMLAttributes<HTML
     icon?: LucideIconProps["name"];
 }
 
-declare type Theme = "light" | "dark";
+declare type Theme = "light" | "dark" | "theme-sepia" | "theme-pink";
 
 export declare const ThemeProvider: ({ children, defaultTheme, }: ThemeProviderProps) => JSX_2.Element;
 
@@ -1057,6 +1057,7 @@ export declare function useSortableData(initialData: TableDataProps[], defaultSo
 
 export declare const useTheme: () => {
     theme: Theme;
+    setTheme: (theme: Theme) => void;
     toggleTheme: () => void;
 };