@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.60

package/src/overlays/tooltip/Tooltip.tsx

@@ -45,13 +45,14 @@ import {
   useMemo,
   useRef,
   useState,
+  type MouseEvent,
   type ReactElement,
 } from "react";
 import { Icon } from "../../components/icon/Icon";
 import { useIsRtl } from "../../hooks/useIsRtl";
 import { type RefProp, type TooltipType } from "../../types";
 import { CoreIcons } from "../../types/icons";
-import classes from "./Tooltip.module.css";
+import { getColor } from "../../utils";
 
 export interface TooltipProps extends TooltipType, RefProp {
   /**
@@ -63,7 +64,7 @@ export interface TooltipProps extends TooltipType, RefProp {
    */
   copyContent?: boolean | string;
   disabled?: boolean;
-  children: ReactElement;
+  children: ReactElement<KeyValue>;
 }
 
 export const getTooltipProps = (
@@ -82,6 +83,7 @@ export const Tooltip = ({
   ref,
   children,
   color,
+  textColor,
   content,
   open,
   copyContent,
@@ -125,7 +127,7 @@ export const Tooltip = ({
   });
 
   const hover = useHover(context, {
-    restMs: 250,
+    restMs: 500,
     delay: { open: 1000 },
     handleClose: copyContent ? safePolygon({ buffer: 1 }) : undefined,
   });
@@ -146,14 +148,15 @@ export const Tooltip = ({
   const copyEl = useMemo(() => {
     if (copyContent) {
       const copyText: AnyObject = isString(copyContent) ? copyContent : content;
-      const handler = () => {
+      const handler = (e: MouseEvent) => {
         setIsOpen(false);
+        e.stopPropagation();
         void navigator.clipboard.writeText(copyText.toString());
       };
       return (
         <span
           role="none"
-          className="ms-2 cursor-pointer text-invert flex-content opacity-75 hover:opacity-90 active:opacity-60"
+          className="ms-2 cursor-pointer text-dimmed flex-content opacity-75 hover:opacity-90 active:opacity-60"
           onClick={handler}
         >
           <Icon icon={CoreIcons.copy} />
@@ -173,25 +176,47 @@ export const Tooltip = ({
         <FloatingPortal>
           <dfn
             data-ref="tooltip"
-            data-color={color}
             className={classNames(
-              classes.tooltip,
-              "select-none text-sm not-italic flex py-1 px-2 rounded shadow-md bg-current",
+              "fabric-tooltip z-(--z-tooltip)",
+              "select-none text-sm not-italic flex py-1 px-2 max-w-lg! rounded shadow-md bg-muted",
             )}
             ref={refs.setFloating}
-            style={floatingStyles}
+            style={{
+              color: textColor ? getColor(textColor) : undefined,
+              backgroundColor: color ? getColor(color) : undefined,
+              ...floatingStyles,
+            }}
             {...getFloatingProps()}
           >
-            <span
-              className={classNames(
-                "font-medium text-invert flex-1",
-                isString(content) && "whitespace-pre-wrap",
-              )}
-            >
-              {content}
-            </span>
+            {isValidElement(content) && content}
+            {isString(content) && (
+              <span
+                className={classNames(
+                  "font-medium flex-1 break-all whitespace-pre-wrap mixed-lang",
+                  !textColor && "contrast",
+                )}
+                style={{
+                  color: textColor
+                    ? undefined
+                    : color
+                      ? getColor(color)
+                      : "var(--bg-color-muted)",
+                }}
+              >
+                {content}
+              </span>
+            )}
             {copyEl}
-            <FloatingArrow ref={arrowRef} context={context} />
+            <FloatingArrow
+              ref={arrowRef}
+              context={context}
+              strokeWidth={0.5}
+              className="fill-muted stroke-dimmed"
+              style={{
+                stroke: color ? getColor(color) : undefined,
+                fill: color ? getColor(color) : undefined,
+              }}
+            />
           </dfn>
         </FloatingPortal>
       )}

package/src/types/global.d.ts

@@ -45,6 +45,14 @@ declare module "*.png" {
   const content: any;
   export default content;
 }
+declare module "*.jpg" {
+  const content: any;
+  export default content;
+}
+declare module "*.jpeg" {
+  const content: any;
+  export default content;
+}
 declare module "*.svg" {
   const content: any;
   export default content;

package/src/types/icons.ts

@@ -22,9 +22,13 @@
  */
 
 /* istanbul ignore file */
-/* eslint-disable @typescript-eslint/no-namespace */
+ 
 
-export module CoreIcons {
+/**
+ * Core icons used in the application.
+ * These icons are typically used for navigation, actions, and other UI elements.
+ */
+export namespace CoreIcons {
   /**
    * carets
    */
@@ -100,6 +104,11 @@ export module CoreIcons {
   export const colapseAll =
     "M18.707 21.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM5.293 2.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
 
+  export const expandAllVar =
+    "M13,9V15H16L12,19L8,15H11V9H8L12,5L16,9H13M4,2H20V4H4V2M4,20H20V22H4V20Z";
+  export const colapseAllVar =
+    "M4,12H20V14H4V12M4,9H20V11H4V9M16,4L12,8L8,4H11V1H13V4H16M8,19L12,15L16,19H13V22H11V19H8Z";
+
   export const folderClosed =
     "M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z";
   export const folderOpen =
@@ -119,11 +128,13 @@ export module CoreIcons {
     "M19.547 14.667c-0.736 2.083-2.245 3.67-4.094 4.553s-4.031 1.061-6.114 0.325-3.67-2.245-4.553-4.094-1.061-4.031-0.325-6.114 2.245-3.67 4.094-4.553 4.031-1.061 6.114-0.325c1.188 0.42 2.209 1.088 2.987 1.882l2.824 2.659h-3.48c-0.552 0-1 0.448-1 1s0.448 1 1 1h5.997c0.004 0 0.009 0 0.013 0 0.137-0.001 0.267-0.030 0.386-0.082 0.119-0.051 0.229-0.126 0.324-0.225 0.012-0.012 0.023-0.025 0.034-0.038 0.076-0.087 0.134-0.184 0.175-0.287s0.065-0.213 0.069-0.328c0.002-0.014 0.002-0.028 0.002-0.042v-5.998c0-0.552-0.448-1-1-1s-1 0.448-1 1v3.685l-2.916-2.745c-0.993-1.012-2.274-1.846-3.748-2.366-2.604-0.921-5.336-0.698-7.644 0.405s-4.197 3.088-5.117 5.692-0.696 5.335 0.406 7.643 3.088 4.197 5.692 5.117 5.335 0.697 7.643-0.406 4.197-3.088 5.117-5.692c0.184-0.521-0.089-1.092-0.61-1.276s-1.092 0.089-1.276 0.61z";
   export const search =
     "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
+  export const ellipsis =
+    "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
   export const filter = "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z";
   export const funnel =
     "M19.845 4l-6.609 7.814c-0.147 0.173-0.236 0.399-0.236 0.646v6.922l-2-1v-5.922c0.001-0.227-0.077-0.457-0.236-0.646l-6.609-7.814zM22 2h-20c-0.552 0-1 0.448-1 1 0 0.247 0.089 0.473 0.236 0.646l7.764 9.18v6.174c0 0.389 0.222 0.727 0.553 0.894l4 2c0.494 0.247 1.095 0.047 1.342-0.447 0.072-0.146 0.106-0.301 0.105-0.447v-8.174l7.764-9.18c0.357-0.422 0.304-1.053-0.118-1.409-0.189-0.16-0.419-0.238-0.646-0.237z";
-  export const ellipsis =
-    "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
+  export const funnelFull =
+    "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z";
   export const funnelPlus =
     "M15 17H18V14H20V17H23V19H20V22H18V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";
   export const funnelRemove =
@@ -249,6 +260,7 @@ export module CoreIcons {
     "M5.541 2.159c-0.153-0.1-0.34-0.159-0.541-0.159-0.552 0-1 0.448-1 1v18c-0.001 0.182 0.050 0.372 0.159 0.541 0.299 0.465 0.917 0.599 1.382 0.3l14-9c0.114-0.072 0.219-0.174 0.3-0.3 0.299-0.465 0.164-1.083-0.3-1.382zM6 4.832l11.151 7.168-11.151 7.168z";
   export const pause =
     "M6 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM7 5h2v14h-2zM14 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM15 5h2v14h-2z";
+  export const stop = "M18,18H6V6H18V18Z";
   export const volumeOn =
     "M10 7.081v9.839l-3.375-2.7c-0.17-0.137-0.388-0.22-0.625-0.22h-3v-4h3c0.218 0.001 0.439-0.071 0.625-0.219zM10.375 4.219l-4.726 3.781h-3.649c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h3.649l4.726 3.781c0.431 0.345 1.061 0.275 1.406-0.156 0.148-0.185 0.22-0.407 0.219-0.625v-14c0-0.552-0.448-1-1-1-0.237 0-0.455 0.083-0.625 0.219zM18.363 5.637c1.757 1.758 2.635 4.059 2.635 6.364 0 2.304-0.878 4.605-2.635 6.362-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c2.147-2.147 3.22-4.963 3.221-7.776s-1.074-5.63-3.221-7.778c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM14.833 9.167c0.781 0.781 1.171 1.803 1.171 2.828s-0.39 2.047-1.171 2.828c-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c1.171-1.171 1.757-2.708 1.757-4.242s-0.586-3.071-1.757-4.242c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
   export const volumeOff =
@@ -348,6 +360,9 @@ export module CoreIcons {
   export const colorPicker =
     "M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z";
 
+  export const list =
+    "M11 15H17V17H11V15M9 7H7V9H9V7M11 13H17V11H11V13M11 9H17V7H11V9M9 11H7V13H9V11M21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5M19 5H5V19H19V5M9 15H7V17H9V15Z";
+
   /**
    * alert icons
    */
@@ -382,7 +397,7 @@ export module CoreIcons {
   export const mediaOrient =
     "M7.34,6.41L0.86,12.9L7.35,19.38L13.84,12.9L7.34,6.41M3.69,12.9L7.35,9.24L11,12.9L7.34,16.56L3.69,12.9M19.36,6.64C17.61,4.88 15.3,4 13,4V0.76L8.76,5L13,9.24V6C14.79,6 16.58,6.68 17.95,8.05C20.68,10.78 20.68,15.22 17.95,17.95C16.58,19.32 14.79,20 13,20C12.03,20 11.06,19.79 10.16,19.39L8.67,20.88C10,21.62 11.5,22 13,22C15.3,22 17.61,21.12 19.36,19.36C22.88,15.85 22.88,10.15 19.36,6.64Z";
   export const mediaCrop =
-    "M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z";
+    "M13,17H17V13H19V17H23V19H19V23H17V19H13V17M11,17V19H9V17H11M7,17V19H5V17H7M19,9V11H17V9H19M19,5V7H17V5H19M15,5V7H13V5H15M11,5V7H9V5H11M7,5V7H5V5H7M7,13V15H5V13H7M7,9V11H5V9H7Z";
   export const mediaImage =
     "M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13.96,12.29L11.21,15.83L9.25,13.47L6.5,17H17.5L13.96,12.29Z";
   export const mediaVideo =
@@ -402,7 +417,7 @@ export module CoreIcons {
   export const mediaPlay = "M8,5.14V19.14L19,12.14L8,5.14Z";
   export const mediaPause = "M14,19H18V5H14M6,19H10V5H6V19Z";
   export const mediaContrast =
-    "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
+    "M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z";
   export const mediaEqs =
     "M7 3H5V9H7V3M19 3H17V13H19V3M3 13H5V21H7V13H9V11H3V13M15 7H13V3H11V7H9V9H15V7M11 21H13V11H11V21M15 15V17H17V21H19V17H21V15H15Z";
   export const mediaCaptionOff =
@@ -422,4 +437,15 @@ export module CoreIcons {
     "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
   export const mediaCommentAdd =
     "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+  export const mediaCapture =
+    "M12,10L11.06,12.06L9,13L11.06,13.94L12,16L12.94,13.94L15,13L12.94,12.06L12,10M20,5H16.83L15,3H9L7.17,5H4A2,2 0 0,0 2,7V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V7A2,2 0 0,0 20,5M20,19H4V7H8.05L8.64,6.35L9.88,5H14.12L15.36,6.35L15.95,7H20V19M12,8A5,5 0 0,0 7,13A5,5 0 0,0 12,18A5,5 0 0,0 17,13A5,5 0 0,0 12,8M12,16A3,3 0 0,1 9,13A3,3 0 0,1 12,10A3,3 0 0,1 15,13A3,3 0 0,1 12,16Z";
+
+  export const mediaLightness =
+    "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
+  export const mediaColor =
+    "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
+  export const mediaInvert =
+    "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";
+  export const mediaSaturate =
+    "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
 }

package/src/types/index.ts

@@ -25,11 +25,15 @@
 import { type Placement } from "@floating-ui/react";
 import { type JSXElementConstructor, type Ref } from "react";
 
+export type ModalProps<P = unknown> = P & {
+  onClose: (...args: AnyObject) => void;
+};
+
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
 
-export type ColorType =
+export type ColorState =
   | "primary"
   | "accent"
   | "info"
@@ -37,21 +41,240 @@ export type ColorType =
   | "success"
   | "warning";
 
+export type ColorType =
+  | "primary-50"
+  | "primary-100"
+  | "primary-200"
+  | "primary-300"
+  | "primary-400"
+  | "primary-500"
+  | "primary-600"
+  | "primary-700"
+  | "primary-800"
+  | "primary-900"
+  | "primary-950"
+  | "accent-50"
+  | "accent-100"
+  | "accent-200"
+  | "accent-300"
+  | "accent-400"
+  | "accent-500"
+  | "accent-600"
+  | "accent-700"
+  | "accent-800"
+  | "accent-900"
+  | "accent-950"
+  | "info-50"
+  | "info-100"
+  | "info-200"
+  | "info-300"
+  | "info-400"
+  | "info-500"
+  | "info-600"
+  | "info-700"
+  | "info-800"
+  | "info-900"
+  | "info-950"
+  | "danger-50"
+  | "danger-100"
+  | "danger-200"
+  | "danger-300"
+  | "danger-400"
+  | "danger-500"
+  | "danger-600"
+  | "danger-700"
+  | "danger-800"
+  | "danger-900"
+  | "danger-950"
+  | "success-50"
+  | "success-100"
+  | "success-200"
+  | "success-300"
+  | "success-400"
+  | "success-500"
+  | "success-600"
+  | "success-700"
+  | "success-800"
+  | "success-900"
+  | "success-950"
+  | "warning-50"
+  | "warning-100"
+  | "warning-200"
+  | "warning-300"
+  | "warning-400"
+  | "warning-500"
+  | "warning-600"
+  | "warning-700"
+  | "warning-800"
+  | "warning-900"
+  | "warning-950";
+
 export type PaletteType =
-  | "scarlet"
-  | "pumpkin"
-  | "marigold"
-  | "avacado"
-  | "jade"
-  | "denim"
-  | "iris"
-  | "lilac"
-  | "coral"
-  | "wood"
-  | "silver"
-  | "steel"
-  | "olive"
-  | "sand";
+  | "scarlet-50"
+  | "scarlet-100"
+  | "scarlet-200"
+  | "scarlet-300"
+  | "scarlet-400"
+  | "scarlet-500"
+  | "scarlet-600"
+  | "scarlet-700"
+  | "scarlet-800"
+  | "scarlet-900"
+  | "scarlet-950"
+  | "pumpkin-50"
+  | "pumpkin-100"
+  | "pumpkin-200"
+  | "pumpkin-300"
+  | "pumpkin-400"
+  | "pumpkin-500"
+  | "pumpkin-600"
+  | "pumpkin-700"
+  | "pumpkin-800"
+  | "pumpkin-900"
+  | "pumpkin-950"
+  | "marigold-50"
+  | "marigold-100"
+  | "marigold-200"
+  | "marigold-300"
+  | "marigold-400"
+  | "marigold-500"
+  | "marigold-600"
+  | "marigold-700"
+  | "marigold-800"
+  | "marigold-900"
+  | "marigold-950"
+  | "avacado-50"
+  | "avacado-100"
+  | "avacado-200"
+  | "avacado-300"
+  | "avacado-400"
+  | "avacado-500"
+  | "avacado-600"
+  | "avacado-700"
+  | "avacado-800"
+  | "avacado-900"
+  | "avacado-950"
+  | "jade-50"
+  | "jade-100"
+  | "jade-200"
+  | "jade-300"
+  | "jade-400"
+  | "jade-500"
+  | "jade-600"
+  | "jade-700"
+  | "jade-800"
+  | "jade-900"
+  | "jade-950"
+  | "denim-50"
+  | "denim-100"
+  | "denim-200"
+  | "denim-300"
+  | "denim-400"
+  | "denim-500"
+  | "denim-600"
+  | "denim-700"
+  | "denim-800"
+  | "denim-900"
+  | "denim-950"
+  | "iris-50"
+  | "iris-100"
+  | "iris-200"
+  | "iris-300"
+  | "iris-400"
+  | "iris-500"
+  | "iris-600"
+  | "iris-700"
+  | "iris-800"
+  | "iris-900"
+  | "iris-950"
+  | "lilac-50"
+  | "lilac-100"
+  | "lilac-200"
+  | "lilac-300"
+  | "lilac-400"
+  | "lilac-500"
+  | "lilac-600"
+  | "lilac-700"
+  | "lilac-800"
+  | "lilac-900"
+  | "lilac-950"
+  | "coral-50"
+  | "coral-100"
+  | "coral-200"
+  | "coral-300"
+  | "coral-400"
+  | "coral-500"
+  | "coral-600"
+  | "coral-700"
+  | "coral-800"
+  | "coral-900"
+  | "coral-950"
+  | "wood-50"
+  | "wood-100"
+  | "wood-200"
+  | "wood-300"
+  | "wood-400"
+  | "wood-500"
+  | "wood-600"
+  | "wood-700"
+  | "wood-800"
+  | "wood-900"
+  | "wood-950"
+  | "silver-50"
+  | "silver-100"
+  | "silver-200"
+  | "silver-300"
+  | "silver-400"
+  | "silver-500"
+  | "silver-600"
+  | "silver-700"
+  | "silver-800"
+  | "silver-900"
+  | "silver-950"
+  | "steel-50"
+  | "steel-100"
+  | "steel-200"
+  | "steel-300"
+  | "steel-400"
+  | "steel-500"
+  | "steel-600"
+  | "steel-700"
+  | "steel-800"
+  | "steel-900"
+  | "steel-950"
+  | "olive-50"
+  | "olive-100"
+  | "olive-200"
+  | "olive-300"
+  | "olive-400"
+  | "olive-500"
+  | "olive-600"
+  | "olive-700"
+  | "olive-800"
+  | "olive-900"
+  | "olive-950"
+  | "sand-50"
+  | "sand-100"
+  | "sand-200"
+  | "sand-300"
+  | "sand-400"
+  | "sand-500"
+  | "sand-600"
+  | "sand-700"
+  | "sand-800"
+  | "sand-900"
+  | "sand-950"
+  | "tint-50"
+  | "tint-100"
+  | "tint-200"
+  | "tint-300"
+  | "tint-400"
+  | "tint-500"
+  | "tint-600"
+  | "tint-700"
+  | "tint-800"
+  | "tint-900"
+  | "tint-950";
 
 export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
 
@@ -78,7 +301,11 @@ export interface TooltipType {
   /**
    * tooltip color
    */
-  color?: ColorType;
+  color?: ColorType | PaletteType | string;
+  /**
+   * text color
+   */
+  textColor?: ColorType | PaletteType | string;
   /**
    * tooltip placement
    */
@@ -109,6 +336,10 @@ export interface CssProp {
    * css classname(s)
    */
   className?: string;
+  /**
+   * direction
+   */
+  dir?: "ltr" | "rtl";
 }
 
 export interface TestProps {
@@ -122,15 +353,7 @@ export interface TestProps {
   "data-test-value"?: AnyObject;
 }
 
-export type Elements<T> =
-  | React.ReactElement<T>
-  | React.ReactPortal
-  | React.ReactNode
-  | string
-  | number
-  | boolean
-  | null
-  | undefined;
+export type Elements<T> = React.ReactElement<T> | React.ReactNode;
 
 export type AriaProps = React.AriaAttributes;
 
@@ -144,7 +367,6 @@ export interface RefProp<T = HTMLElement> {
 
 /* *********** */
 
-// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
 export type CallbackReturn<T = unknown> =
   | undefined
   | T
@@ -167,25 +389,6 @@ export type PolymorphicProps<AsTag extends ReactTag> = Omit<
   as?: AsTag;
 };
 
-export interface IconProps {
-  /**
-   * svg path / image url
-   */
-  icon?: string;
-  /**
-   * flip icon in rtl
-   */
-  rtlFlip?: boolean;
-  /**
-   * icon background color
-   */
-  iconBg?: ColorType | string;
-  /**
-   * icon color
-   */
-  iconColor?: ColorType | string;
-}
-
 export interface CollapseProps {
   /**
    * Allow collapsing
@@ -244,3 +447,16 @@ export interface ScrollObject extends PositionObject, SizeObject {
   scrollWidth?: number;
   scrollHeight: number;
 }
+
+export type ArrayType<T extends readonly any[] | ArrayLike<any> | undefined> =
+  T extends readonly any[]
+    ? T[number]
+    : T extends ArrayLike<any>
+      ? T[number]
+      : undefined;
+
+export type Complete<T> = {
+  [P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>>
+    ? T[P]
+    : T[P] | undefined;
+};