@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.51

package/dist/types/types/icons.d.ts

@@ -38,6 +38,8 @@ export declare namespace CoreIcons {
     const collapseActive = "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
     const expandAll = "M5.293 16.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.414zM18.707 7.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.414z";
     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";
+    const expandAllVar = "M13,9V15H16L12,19L8,15H11V9H8L12,5L16,9H13M4,2H20V4H4V2M4,20H20V22H4V20Z";
+    const colapseAllVar = "M4,12H20V14H4V12M4,9H20V11H4V9M16,4L12,8L8,4H11V1H13V4H16M8,19L12,15L16,19H13V22H11V19H8Z";
     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";
     const folderOpen = "M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z";
     const zoomIn = "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.414zM8 12h2v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
@@ -46,9 +48,10 @@ export declare namespace CoreIcons {
     const sortAsc = "M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z";
     const refresh = "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";
     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";
+    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";
     const filter = "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z";
     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";
-    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";
+    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";
     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";
     const funnelRemove = "M14.73,20.83L17.58,18L14.73,15.17L16.15,13.76L19,16.57L21.8,13.76L23.22,15.17L20.41,18L23.22,20.83L21.8,22.24L19,19.4L16.15,22.24L14.73,20.83M13,19.88C13.04,20.18 12.94,20.5 12.71,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.06V15.58L11,17.58V10.05L14.96,5H5.04Z";
     const funnelMinus = "M15 17H23V19H15V17M13 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";
@@ -105,6 +108,7 @@ export declare namespace CoreIcons {
     const mic = "M12 2c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v8c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414v-8c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586zM12 0c-1.104 0-2.106 0.449-2.828 1.172s-1.172 1.724-1.172 2.828v8c0 1.104 0.449 2.106 1.172 2.828s1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828v-8c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172zM8 24h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-2.062c1.809-0.226 3.432-1.056 4.657-2.281 1.446-1.447 2.343-3.448 2.343-5.657v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2c0 1.657-0.67 3.156-1.757 4.243s-2.586 1.757-4.243 1.757-3.156-0.67-4.243-1.757-1.757-2.586-1.757-4.243v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2c0 2.209 0.897 4.21 2.343 5.657 1.225 1.225 2.847 2.055 4.657 2.281v2.062h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
     const play = "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";
     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";
+    const stop = "M18,18H6V6H18V18Z";
     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";
     const volumeOff = "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.219zM16.293 9.707l2.293 2.293-2.293 2.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l2.293-2.293 2.293 2.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-2.293-2.293 2.293-2.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
     const alignLeft = "M3,3H21V5H3V3M3,7H15V9H3V7M3,11H21V13H3V11M3,15H15V17H3V15M3,19H21V21H3V19Z";
@@ -152,6 +156,7 @@ export declare namespace CoreIcons {
     const radioOn = "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,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,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z";
     const colorSwatch = "M16 14V12H17.61C17.85 12.71 18 13.39 18 14H16M15.58 8C15.12 7.29 14.65 6.61 14.2 6H14V8H15.58M16 12V10H14V12H16M16 8.68V10H16.74C16.5 9.56 16.26 9.11 16 8.68M12 16V14H14V12H12V10H14V8H12V6H14V5.73C12.9 4.26 12 3.25 12 3.25S6 10 6 14C6 17.31 8.69 20 12 20V18H14V16H12M14 19.65C14.75 19.39 15.42 19 16 18.46V18H14V19.65M14 16H16V14H14V16M16 18H16.46C17 17.42 17.39 16.75 17.65 16H16V18Z";
     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";
+    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
      */

package/dist/types/types/index.d.ts

@@ -1,9 +1,13 @@
 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 = "primary" | "accent" | "info" | "danger" | "success" | "warning";
-export type PaletteType = "scarlet" | "pumpkin" | "marigold" | "avacado" | "jade" | "denim" | "iris" | "lilac" | "coral" | "wood" | "silver" | "steel" | "olive" | "sand";
+export type ColorState = "primary" | "accent" | "info" | "danger" | "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-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";
 export declare const ThemeColors: string[];
 export interface TooltipType {
@@ -14,7 +18,11 @@ export interface TooltipType {
     /**
      * tooltip color
      */
-    color?: ColorType;
+    color?: ColorType | PaletteType | string;
+    /**
+     * text color
+     */
+    textColor?: ColorType | PaletteType | string;
     /**
      * tooltip placement
      */
@@ -43,6 +51,10 @@ export interface CssProp {
      * css classname(s)
      */
     className?: string;
+    /**
+     * direction
+     */
+    dir?: "ltr" | "rtl";
 }
 export interface TestProps {
     /**
@@ -54,7 +66,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;
 /**
  * For wrapping components
@@ -84,11 +96,11 @@ export interface IconProps {
     /**
      * icon background color
      */
-    iconBg?: ColorType | string;
+    iconBg?: ColorType | PaletteType | string;
     /**
      * icon color
      */
-    iconColor?: ColorType | string;
+    iconColor?: ColorType | PaletteType | string;
 }
 export interface CollapseProps {
     /**
@@ -138,3 +150,11 @@ export interface SizeObject {
     width: number;
     height: number;
 }
+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;
+};

package/dist/types/typography/Abbr.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { type ChildProp, type ColorType, type CssProp } from "../types";
+import { type ChildProp, type ColorType, type CssProp, type PaletteType } from "../types";
 export interface AbbrProps extends ChildProp<string>, CssProp {
     /**
      * content to copy using the tooltip copy action
@@ -10,7 +9,11 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
      *
      * [textPart, tooltip, color (class name or color string)]
      */
-    abbr: Array<[textPart: string, tooltip: string, color?: ColorType | string]>;
+    abbr: Array<[
+        textPart: string,
+        tooltip: string,
+        color?: ColorType | PaletteType | string
+    ]>;
     /**
      * renderer callback
      */

package/dist/types/typography/Anchor.d.ts

@@ -0,0 +1,25 @@
+import { type MouseEventHandler } from "react";
+import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type PaletteType, type PolymorphicProps, type RefProp, type SizeType } from "../types";
+export interface AnchorProps extends ChildrenProp, CssProp, RefProp, AriaProps {
+    /**
+     * link background (CSS color / tailwind color)
+     */
+    bg?: ColorType | PaletteType | string;
+    /**
+     * link color (CSS color / tailwind color)
+     */
+    color?: ColorType | PaletteType | string;
+    /**
+     * link size
+     */
+    size?: SizeType | number | string;
+    /**
+     * font family
+     */
+    family?: "sans" | "serif" | "mono";
+    onClick?: MouseEventHandler;
+}
+/**
+ * Typography link component
+ */
+export declare const Anchor: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "a">({ ref, as, children, className, bg, color, family, size, ...aria }: AnchorProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Mark.d.ts

@@ -1,12 +1,11 @@
-/// <reference types="react" />
-import { type ChildProp, type ColorType } from "../types";
+import { type ChildProp, type ColorType, type PaletteType } from "../types";
 export interface MarkProps extends ChildProp<string> {
     /**
      * texts to match and abbreviate within
      *
      * [textPart, color (class name or color string)]
      */
-    mark: Array<[textPart: string, color?: ColorType | string]>;
+    mark: Array<[textPart: string, color?: ColorType | PaletteType | string]>;
     /**
      * renderer callback
      */

package/dist/types/typography/index.d.ts

@@ -1,6 +1,6 @@
 export { Abbr } from "./Abbr";
+export { Anchor } from "./Anchor";
 export { Copy } from "./Copy";
-export { Link } from "./Link";
 export { Mark } from "./Mark";
 export { Text } from "./Text";
 export { Title } from "./Title";

package/dist/types/utils/cloneElement.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from "react";
+export declare const cloneChildren: (children: ReactNode, callback: (child: ReactNode, index: number) => ReactNode) => ReactNode;

package/dist/types/utils/getColor.d.ts

@@ -1,4 +1 @@
-export declare const getColor: (color: string) => string | undefined;
-export declare const getBgClass: (bg: string) => string | undefined;
-export declare const getColorClass: (color: string) => string | undefined;
-export declare const getBorderClass: (color: string) => string | undefined;
+export declare const getColor: (color: string) => string;

package/dist/types/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./calculateDimensions";
+export * from "./cloneElement";
 export * from "./getColor";
 export * from "./nodeCheck";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.51",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,26 +35,24 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.5",
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.13",
-    "boring-avatars": "^1.10.2",
+    "@floating-ui/react": "^0.27.12",
+    "@react-fabric/utilities": "^1.0.0-beta.50",
+    "@tailwindcss/postcss": "~4.1.8",
+    "boring-avatars": "^1.11.2",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "resize-observer-polyfill": "^1.5.1",
-    "tailwindcss": "^3.4.4"
+    "tailwindcss": "^4.1.8"
   },
   "peerDependencies": {
-    "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
-    "react-i18next": "^15.0.2"
+    "i18next": "^25.2.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^15.5.2"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "7d4a7ed1ea9890652826bef58d01c31280d761c8"
+  "gitHead": "a1b04de4663045f82992bff2aef8db26608eac74"
 }

package/src/components/actionLabel/ActionLabel.tsx

@@ -22,12 +22,20 @@
  */
 
 import classNames from "classnames";
-import { type ReactElement, useCallback } from "react";
-import { type AriaProps, type ChildProp, type CssProp } from "../../types";
+import { useCallback, type ReactElement } from "react";
+import {
+  type AriaProps,
+  type ChildProp,
+  type CssProp,
+  type TestProps,
+} from "../../types";
 import { ButtonGroup } from "../button/ButtonGroup";
-import classes from "./ActionLabel.module.css";
 
-export interface ActionLabelProps extends AriaProps, CssProp, ChildProp {
+export interface ActionLabelProps
+  extends AriaProps,
+    CssProp,
+    ChildProp,
+    TestProps {
   /**
    * action buttons aligment
    */
@@ -75,7 +83,7 @@ export const ActionLabel = ({
     <div
       className={classNames(
         className,
-        classes.actionLabel,
+        "fabric-actionLabel",
         "flex overflow-hidden gap-1 items-center cursor-default select-none",
       )}
       data-disabled={disabled}
@@ -83,8 +91,9 @@ export const ActionLabel = ({
     >
       <ButtonGroup
         ref={calculateBasis}
+        data-inner-clickable
         className={classNames(
-          classes.actions,
+          "fabric-actions",
           "overflow-hidden flex-content",
           align === "end" && "order-2",
         )}

package/src/components/animations/Animations.tsx

@@ -30,19 +30,18 @@ import {
   type CssProp,
   type PaletteType,
 } from "../../types";
-import { getColor, getColorClass } from "../../utils";
-import classes from "./Animations.module.css";
+import { getColor } from "../../utils";
 
 export interface AnimationProps extends CssProp, AriaProps {
   type?: "info" | "check" | "cross" | "question" | "exclaim";
   /**
    * icon color
    */
-  color?: ColorType | PaletteType;
+  color?: ColorType | PaletteType | string;
   /**
    * icon mark color
    */
-  strokeColor?: ColorType | PaletteType;
+  strokeColor?: ColorType | PaletteType | string;
 }
 
 export const AnimationIndicator = ({
@@ -80,10 +79,9 @@ export const AnimationIndicator = ({
     <svg
       data-ref="animated-indicator"
       className={classNames(
-        classes.checkAnimation,
+        "fabric-checkAnimation",
         className,
         "inline-block rounded-full",
-        color && getColorClass(color),
       )}
       style={styles}
       xmlns="http://www.w3.org/2000/svg"
@@ -91,12 +89,14 @@ export const AnimationIndicator = ({
       aria-hidden="true"
       {...aria}
     >
-      <circle className={classes.circlePart} cx="26" cy="26" r="25" />
+      <circle className={"fabric-circlePart"} cx="26" cy="26" r="25" />
       <path
-        className={classNames(
-          classes.iconPart,
-          getColorClass(strokeColor ?? "invert"),
-        )}
+        className={classNames("fabric-iconPart")}
+        style={{
+          color: strokeColor
+            ? getColor(strokeColor)
+            : "var(--text-color-invert)",
+        }}
         d={path}
       />
     </svg>
@@ -104,10 +104,10 @@ export const AnimationIndicator = ({
 };
 
 export const AnimationBars = ({
-  color = "tint",
+  color = "tint-500",
   size = "2rem",
 }: {
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   size?: number | string;
 }) => {
   return (
@@ -118,12 +118,12 @@ export const AnimationBars = ({
     >
       <div
         className={classNames(
-          "outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded",
+          "outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded",
         )}
       >
         <div
-          className={classNames(classes.bars, getColorClass(color + "-500/50"))}
-          style={{ width: size }}
+          className={classNames("fabric-bars")}
+          style={{ width: size, color: getColor(color) }}
         />
       </div>
     </div>
@@ -134,7 +134,7 @@ export const AnimationSpinner = ({
   color = "tint-700",
   size = "2rem",
 }: {
-  color?: ColorType | string;
+  color?: ColorType | PaletteType | string;
   size?: number | string;
 }) => {
   return (
@@ -142,15 +142,16 @@ export const AnimationSpinner = ({
       className={classNames(
         "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
       )}
+      data-ref="spinner"
     >
       <div
         className={classNames(
-          "outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded",
+          "outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded",
         )}
       >
         <div
-          className={classNames(classes.spinner, getColorClass(color))}
-          style={{ width: size }}
+          className={classNames("fabric-spinner")}
+          style={{ width: size, color: getColor(color) }}
         />
       </div>
     </div>
@@ -161,18 +162,23 @@ export const Loading = () => {
   return (
     <div
       className={classNames(
-        classes.loader,
+        "fabric-loader",
         "area-[loader] relative overflow-x-clip",
       )}
+      data-ref="loading"
     >
       <div className="absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500" />
     </div>
   );
 };
 
-export const Skeleton = () => {
+export const Skeleton = ({ className, ...rest }: CssProp) => {
   return (
-    <div className={classNames("p-2 animate-pulse flex gap-2 max-w-lg")}>
+    <div
+      className={classNames(className, "p-2 animate-pulse flex gap-2 max-w-lg")}
+      data-ref="skeleton"
+      {...rest}
+    >
       <div className="bg-tint-100 rounded aspect-square h-12" />
       <div className="flex-1 flex flex-col gap-2">
         <div className="bg-tint-100 h-3 rounded-full" />