@radui/ui 0.0.46 → 0.1.0

package/README.md

@@ -2,17 +2,25 @@
 
 # RAD UI
 
-Head over to [Storybook](https://main--657eda33d6033847be90aaf8.chromatic.com/) to check out latest components.
-
 ![RAD UI](./assets/images/rad-ui-poster.png)
 
+## Sponsored by
+
+<p align="center">
+  <img src="./docs/public/sponsorship/browserstack_light.png" alt="BrowserStack"  width="200" />
+  &nbsp;&nbsp;&nbsp;
+  <img src="./docs/public/sponsorship/code_rabbit_light.png" alt="CodeRabbit"  width="200" />
+</p>
+
 ## Introduction to Rad UI
 
 Rad UI is a React UI library designed to simplify and enhance the process of building user interfaces. With a focus on ease of use and flexibility, Rad UI empowers developers to create engaging and efficient user experiences. Whether you're starting a new project or improving an existing one, Rad UI provides a collection of components and utilities to streamline development.
 
+Head over to [Storybook](https://main--657eda33d6033847be90aaf8.chromatic.com/) to check out latest components.
+
 ## Documentation
 
-For full documentation, visit  [Documentation](https://www.rad-ui.com/docs/first-steps/introduction).
+For full documentation, visit [Documentation](https://www.rad-ui.com/docs/first-steps/introduction).
 
 ## Installation
 
@@ -67,7 +75,7 @@ For more details, you can read on how to contribute to development of Rad UI in
 
 ## Open source licensing info
 
-For Licensing info you can check out [LICENSE](LICENSE).
+For Licensing information you can check out [LICENSE](LICENSE).
 
 ## Dev Environment
 

package/dist/components/Accordion.d.ts

@@ -1,52 +1,35 @@
 import React from 'react';
 
-type AccordionHeaderProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-
-type AccordionItemProps = {
-    children: React.ReactNode;
-    className?: string;
-    value?: number | string;
-    disabled?: boolean;
-    asChild?: boolean;
-};
-
-type AccordionRootProps = {
-    children: React.ReactNode;
-    customRootClass?: string;
-    transitionDuration?: number;
-    transitionTimingFunction?: string;
-    orientation?: 'horizontal' | 'vertical';
-    asChild?: boolean;
-    loop?: boolean;
-    disableTabIndexing?: boolean;
-    openMultiple?: boolean;
-    value?: (number | string)[];
-    defaultValue?: (number | string)[];
-    onValueChange?: (value: (number | string)[]) => void;
-};
-
 type AccordionProps = React.HTMLAttributes<HTMLDivElement> & {
     children?: React.ReactNode;
 };
 declare const Accordion: {
     (): null;
-    Root: ({ children, orientation, disableTabIndexing, asChild, transitionDuration, transitionTimingFunction, customRootClass, loop, openMultiple, value, defaultValue, onValueChange }: AccordionRootProps) => React.JSX.Element;
-    Item: React.FC<AccordionItemProps>;
-    Header: React.FC<AccordionHeaderProps>;
-    Trigger: React.FC<{
-        children: React.ReactNode;
-        className?: string;
+    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue"> & {
+        customRootClass?: string;
+        transitionDuration?: number;
+        transitionTimingFunction?: string;
+        orientation?: "horizontal" | "vertical";
+        asChild?: boolean;
+        loop?: boolean;
+        disableTabIndexing?: boolean;
+        openMultiple?: boolean;
+        value?: (number | string)[];
+        defaultValue?: (number | string)[];
+        onValueChange?: (value: (number | string)[]) => void;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        value?: number | string;
+        disabled?: boolean;
+        asChild?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         index?: number;
-        handleClick?: (index: number) => void;
-    }>;
-    Content: React.FC<{
-        children: React.ReactNode;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         index: number;
-        className?: string;
-    }>;
+    } & React.RefAttributes<HTMLDivElement>>;
 };
 
 export { Accordion as default };

package/dist/components/Accordion.js

@@ -1 +1 @@
-'use client';import o from"./Accordion/fragments/AccordionRoot.js";import r from"./Accordion/fragments/AccordionItem.js";import c from"./Accordion/fragments/AccordionHeader.js";import n from"./Accordion/fragments/AccordionTrigger.js";import t from"./Accordion/fragments/AccordionContent.js";var e=function(){return console.warn("Direct usage of Accordion is not supported. Please use Accordion.Root, Accordion.Item, etc. instead. "),null};e.Root=o,e.Item=r,e.Header=c,e.Trigger=n,e.Content=t;export{e as default};
+'use client';import{_ as e,a as n,b as i}from"./tslib.es6-BtVxab8e.js";import t,{createContext as a,useRef as o,useState as r,useContext as l,useEffect as c,useId as s}from"react";import{c as d}from"./clsx-BaVHROc5.js";import{c as u}from"./index-BVxS3Ixi.js";import{u as m}from"./index-fkj4Fdgt.js";import{R as v}from"./index-BRmT6kl7.js";import{P as f}from"./index-Dc5Cm9z0.js";import{C as p}from"./index-XqbKa2D2.js";import{B as C}from"./index-DnCiOYxZ.js";var g=a({rootClass:"",activeItems:[],setActiveItems:function(){},accordionRef:void 0,transitionDuration:0,transitionTimingFunction:"ease-out",openMultiple:!1}),h="Accordion",b=t.forwardRef((function(i,a){var r=i.children,l=i.orientation,c=void 0===l?"vertical":l,s=i.disableTabIndexing,p=void 0===s||s,C=i.asChild,b=i.transitionDuration,N=void 0===b?0:b,x=i.transitionTimingFunction,I=void 0===x?"linear":x,R=i.customRootClass,E=i.loop,T=void 0===E||E,A=i.openMultiple,V=void 0!==A&&A,j=i.value,y=i.defaultValue,D=void 0===y?[]:y,w=i.onValueChange,F=e(i,["children","orientation","disableTabIndexing","asChild","transitionDuration","transitionTimingFunction","customRootClass","loop","openMultiple","value","defaultValue","onValueChange"]),M=o(null),P=u(R,h),k=void 0!==j?V?j:j.length>0?[j[0]]:[]:void 0,H=V?D:D.length>0?[D[0]]:[],B=m(k,H,w),G=B[0],O=B[1];return t.createElement(g.Provider,{value:{rootClass:P,activeItems:G,setActiveItems:O,accordionRef:M,transitionDuration:N,transitionTimingFunction:I,openMultiple:V}},t.createElement(v.Root,{orientation:c,loop:T,disableTabIndexing:p},t.createElement(v.Group,null,t.createElement(f.div,n({className:d("".concat(P,"-root")),ref:function(e){var n=e;M.current=n,"function"==typeof a?a(n):a&&(a.current=n)},asChild:C},F),r))))}));b.displayName=h;var N=a({itemValue:0,setItemValue:function(){},disabled:!1}),x=t.forwardRef((function(i,a){var u=i.children,m=i.value,v=i.className,C=void 0===v?"":v,h=i.disabled,b=void 0!==h&&h;i.asChild;var x=e(i,["children","value","className","disabled","asChild"]),I=o(null),R=r(null!=m?m:0),E=R[0],T=R[1],A=l(g),V=A.rootClass,j=A.activeItems,y=A.transitionDuration,D=A.transitionTimingFunction,w=r(j.includes(E)),F=w[0],M=w[1];c((function(){M(j.includes(E))}),[j,E]);var P=s();return c((function(){void 0!==m&&m!==E&&T(m)}),[m]),t.createElement(N.Provider,{value:{itemValue:E,setItemValue:T,disabled:b}},t.createElement(p.Root,{open:F,onOpenChange:M,disabled:b,transitionDuration:y,transitionTimingFunction:D,asChild:!0},t.createElement(f.div,n({ref:function(e){var n=e;I.current=n,"function"==typeof a?a(n):a&&(a.current=n)},className:d("".concat(V,"-item"),C)},x,{id:"accordion-data-item-".concat(P),role:"region","data-state":F?"open":"closed"}),u)))}));x.displayName="AccordionItem";var I=t.forwardRef((function(i,a){var o=i.children,r=i.className,c=void 0===r?"":r,s=e(i,["children","className"]),u=l(g).rootClass;return t.createElement("div",n({ref:a,className:d("".concat(u,"-header"),c)},s),o)}));I.displayName="AccordionHeader";var R=t.forwardRef((function(a,o){var r=a.children,c=a.index,s=a.className,u=void 0===s?"":s,m=a.onClick,f=e(a,["children","index","className","onClick"]),h=l(g),b=h.setActiveItems,x=h.rootClass,I=h.activeItems,R=h.openMultiple,E=l(N),T=E.itemValue,A=E.disabled;return t.createElement(v.Item,null,t.createElement(p.Trigger,{disabled:A,asChild:!0},t.createElement(C,n({className:d("".concat(x,"-trigger"),u),ref:o,"aria-disabled":A,onClick:function(e){var n;n=I||[],R?n.includes(T)?b(n.filter((function(e){return e!==T}))):b(i(i([],n,!0),[T],!1)):n.includes(T)?b([]):b([T]),null==m||m(e)},"aria-expanded":I.includes(T),"aria-controls":"content-".concat(c)},f),r)))}));R.displayName="AccordionTrigger";var E=t.forwardRef((function(i,a){var o=i.children,r=i.index,c=i.className,s=void 0===c?"":c,u=e(i,["children","index","className"]),m=l(g).rootClass;return t.createElement(p.Content,n({ref:a,asChild:!0,className:d("".concat(m,"-content"),s),id:"content-".concat(r),role:"region","aria-labelledby":"section-".concat(r)},u),o)}));E.displayName="AccordionContent";var T=function(){return console.warn("Direct usage of Accordion is not supported. Please use Accordion.Root, Accordion.Item, etc. instead. "),null};T.Root=b,T.Item=x,T.Header=I,T.Trigger=R,T.Content=E;export{T as default};

package/dist/components/AlertDialog.d.ts

@@ -1,62 +1,116 @@
 import * as React$1 from 'react';
 import React__default from 'react';
+import DialogPrimitive from '~/core/primitives/Dialog';
+import Primitive from '~/core/primitives/Primitive';
 
-type AlertDialogActionProps = {
+type DialogPrimitiveActionProps = {
     children: React__default.ReactNode;
-    asChild?: boolean;
     className?: string;
+    asChild?: boolean;
 };
 
-type AlertDialogCancelProps = {
+type DialogPrimitiveCancelProps = {
     children: React__default.ReactNode;
     asChild?: boolean;
     className?: string;
 };
 
-type AlertDialogContentProps = {
+type DialogPrimitiveContentProps = {
     children: React__default.ReactNode;
     className?: string;
+    asChild?: boolean;
+    forceMount?: boolean;
+    role?: string;
+    'aria-modal'?: boolean;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
 };
 
-type AlertDialogPortalProps = {
+type DialogPrimitiveRootProps$1 = {
     children: React__default.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onClickOutside?: () => void;
+    className?: string;
+};
+
+type DialogPrimitiveRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
+type AlertDialogRootProps = Omit<DialogPrimitiveRootProps, 'open' | 'onOpenChange'> & {
+    customRootClass?: string;
+    className?: string;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 };
 
-type AlertDialogTriggerProps = {
+type DialogPrimitiveTriggerProps = {
     children: React__default.ReactNode;
     asChild?: boolean;
     className?: string;
+    disabled?: boolean;
 };
 
-type AlertDialogRootProps = {
-    open?: boolean;
-    children: React__default.ReactNode;
-    customRootClass?: string;
+type DialogPrimitivePortalProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
+type AlertDialogPortalProps = DialogPrimitivePortalProps & {
+    container?: Element | null;
+    forceMount?: boolean;
+    keepMounted?: boolean;
+};
+
+type PrimitiveH2Props = React__default.ComponentPropsWithoutRef<typeof Primitive.h2>;
+type AlertDialogTitleProps = PrimitiveH2Props & {
+    className?: string;
+    asChild?: boolean;
+};
+
+type PrimitivePProps = React__default.ComponentPropsWithoutRef<typeof Primitive.p>;
+type AlertDialogDescriptionProps = PrimitivePProps & {
     className?: string;
+    asChild?: boolean;
 };
 
 declare const AlertDialog: {
     (): null;
-    Root: {
-        ({ children, className, customRootClass, open, ...props }: AlertDialogRootProps): React$1.JSX.Element;
+    Root: React$1.ForwardRefExoticComponent<Omit<Omit<DialogPrimitiveRootProps$1 & React$1.RefAttributes<HTMLDivElement>, "ref">, "open" | "onOpenChange"> & {
+        customRootClass?: string;
+        className?: string;
+        defaultOpen?: boolean;
+        open?: boolean;
+        onOpenChange?: (open: boolean) => void;
+    } & React$1.RefAttributes<HTMLDivElement>>;
+    Trigger: React$1.ForwardRefExoticComponent<Omit<DialogPrimitiveTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
+        className?: string;
+        disabled?: boolean;
+    } & React$1.RefAttributes<HTMLButtonElement>>;
+    Overlay: React$1.ForwardRefExoticComponent<Omit<{
+        className?: string;
+        asChild?: boolean;
+        forceMount?: boolean;
+        children?: React.ReactNode;
+    } & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+        className?: string;
+        asChild?: boolean;
+        forceMount?: boolean;
+        children?: React.ReactNode;
+    } & React$1.RefAttributes<HTMLDivElement>>;
+    Portal: {
+        ({ children, ...props }: AlertDialogPortalProps): React$1.JSX.Element;
         displayName: string;
     };
-    Trigger: ({ children, asChild, className, ...props }: AlertDialogTriggerProps) => React$1.JSX.Element;
-    Overlay: ({ className }: {
+    Content: React$1.ForwardRefExoticComponent<Omit<DialogPrimitiveContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
         className?: string;
-    }) => React$1.JSX.Element;
-    Portal: ({ children }: AlertDialogPortalProps) => React$1.JSX.Element;
-    Content: ({ children, className }: AlertDialogContentProps) => React$1.JSX.Element;
-    Title: ({ children, className }: {
-        children: React.ReactNode;
+        asChild?: boolean;
+        forceMount?: boolean;
+    } & React$1.RefAttributes<HTMLDivElement>>;
+    Title: React$1.ForwardRefExoticComponent<AlertDialogTitleProps & React$1.RefAttributes<HTMLElement>>;
+    Description: React$1.ForwardRefExoticComponent<AlertDialogDescriptionProps & React$1.RefAttributes<HTMLElement>>;
+    Cancel: React$1.ForwardRefExoticComponent<Omit<DialogPrimitiveCancelProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
         className?: string;
-    }) => React$1.JSX.Element;
-    Description: ({ children, className }: {
-        children: React.ReactNode;
+    } & React$1.RefAttributes<HTMLButtonElement>>;
+    Action: React$1.ForwardRefExoticComponent<Omit<DialogPrimitiveActionProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
         className?: string;
-    }) => React$1.JSX.Element;
-    Cancel: ({ children, asChild, className, ...props }: AlertDialogCancelProps) => React$1.JSX.Element;
-    Action: ({ children, asChild, className, ...props }: AlertDialogActionProps) => React$1.JSX.Element;
+    } & React$1.RefAttributes<HTMLButtonElement>>;
 };
 
 export { AlertDialog as default };
+export type { AlertDialogRootProps as __fix_types_1 };

package/dist/components/AlertDialog.js

@@ -1 +1 @@
-'use client';import r from"./AlertDialog/fragments/AlertDialogRoot.js";import t from"./AlertDialog/fragments/AlertDialogContent.js";import o from"./AlertDialog/fragments/AlertDialogTrigger.js";import e from"./AlertDialog/fragments/AlertDialogPortal.js";import l from"./AlertDialog/fragments/AlertDialogOverlay.js";import i from"./AlertDialog/fragments/AlertDialogCancel.js";import a from"./AlertDialog/fragments/AlertDialogAction.js";import g from"./AlertDialog/fragments/AlertDialogTitle.js";import n from"./AlertDialog/fragments/AlertDialogDescription.js";var s=function(){return console.warn("Direct usage of AlertDialog is not supported. Please use AlertDialog.Root, AlertDialog.Content, etc. instead."),null};s.Root=r,s.Trigger=o,s.Overlay=l,s.Portal=e,s.Content=t,s.Title=g,s.Description=n,s.Cancel=i,s.Action=a;export{s as default};
+'use client';import{_ as e,a}from"./tslib.es6-BtVxab8e.js";import t,{createContext as i,forwardRef as r,useState as o,useContext as l,useRef as n,useEffect as s}from"react";import{c}from"./index-BVxS3Ixi.js";import{c as d}from"./clsx-BaVHROc5.js";import{u as m}from"./index-fkj4Fdgt.js";import{D as u}from"./index-BtoPzkH9.js";import{F as v}from"./index-Di6TooPD.js";import{P as p}from"./index-Dc5Cm9z0.js";import"./index-DnCiOYxZ.js";import"./floating-ui.react-CLbXmKZY.js";import"react/jsx-runtime";import"react-dom";var f=i({rootClass:"",isOpen:!1,setIsOpen:function(){},titleId:void 0,descriptionId:void 0,setTitleId:function(){},setDescriptionId:function(){}}),h="AlertDialog",C=r((function(i,r){var l=i.children,n=i.className,s=void 0===n?"":n,v=i.customRootClass,p=void 0===v?"":v,C=i.defaultOpen,N=void 0!==C&&C,g=i.open,D=i.onOpenChange,I=e(i,["children","className","customRootClass","defaultOpen","open","onOpenChange"]),y=c(p,h),A=m(g,N,D),O=A[0],E=A[1],b=o(void 0),j=b[0],x=b[1],T=o(void 0),M={rootClass:y,isOpen:O,setIsOpen:E,titleId:j,descriptionId:T[0],setTitleId:x,setDescriptionId:T[1]};return t.createElement(u.Root,a({open:O,onOpenChange:E,className:d(y,s)},I),t.createElement(f.Provider,{value:M},t.createElement("div",{ref:r,className:d(y,s)},l)))}));C.displayName=h;var N=r((function(i,r){var o=i.children,n=i.className,s=void 0===n?"":n,c=i.asChild,m=void 0!==c&&c,v=i.forceMount,p=void 0!==v&&v,h=e(i,["children","className","asChild","forceMount"]),C=l(f),N=C.rootClass,g=C.titleId,D=C.descriptionId;return t.createElement(u.Content,a({ref:r,className:d("".concat(N,"-content"),s),asChild:m,forceMount:p,role:"alertdialog","aria-modal":!0,"aria-labelledby":g,"aria-describedby":D},h),o)}));N.displayName="AlertDialogContent";var g=r((function(i,r){var o=i.children,n=i.asChild,s=i.className,c=void 0===s?"":s,m=i.disabled,v=void 0!==m&&m,p=e(i,["children","asChild","className","disabled"]),h=l(f),C=h.rootClass,N=h.isOpen?"open":"closed",g=v?"":void 0;return t.createElement(u.Trigger,a({ref:r,className:d("".concat(C,"-trigger"),c),asChild:n,disabled:v,"data-state":N,"data-disabled":g},p),o)}));g.displayName="AlertDialogTrigger";var D=function(i){var r=i.children,o=e(i,["children"]);return t.createElement(u.Portal,a({},o),r)};D.displayName="AlertDialogPortal";var I=r((function(i,r){var o=i.className,n=void 0===o?"":o,s=i.asChild,c=void 0!==s&&s,m=i.forceMount,v=void 0!==m&&m,p=i.children,h=e(i,["className","asChild","forceMount","children"]),C=l(f).rootClass;return t.createElement(u.Overlay,a({ref:r,className:d("".concat(C,"-overlay"),n),asChild:c,forceMount:v},h),p)}));I.displayName="AlertDialogOverlay";var y=r((function(i,r){var o=i.children,n=i.asChild,s=i.className,c=void 0===s?"":s,d=e(i,["children","asChild","className"]),m=l(f).rootClass;return t.createElement(u.Cancel,a({ref:r,className:"".concat(m,"-cancel ").concat(c),asChild:n},d),o)}));y.displayName="AlertDialogCancel";var A=r((function(i,r){var o=i.children,n=i.asChild,s=i.className,c=void 0===s?"":s,d=e(i,["children","asChild","className"]),m=l(f).rootClass;return t.createElement(u.Action,a({ref:r,className:"".concat(m,"-action ").concat(c),asChild:n},d),o)}));A.displayName="AlertDialogAction";var O=r((function(i,r){var o=i.children,c=i.className,d=void 0===c?"":c,m=i.asChild,u=void 0!==m&&m,h=i.id,C=e(i,["children","className","asChild","id"]),N=l(f),g=N.rootClass,D=N.setTitleId,I=N.titleId,y=v.useId(),A=null!=h?h:y,O=n(A),E=n(I);return s((function(){E.current=I}),[I]),s((function(){return O.current=A,A&&D(A),function(){E.current===O.current&&D(void 0)}}),[A,D]),t.createElement(p.h2,a({ref:r,id:A,className:"".concat(g,"-title ").concat(d),asChild:u},C),o)}));O.displayName="AlertDialogTitle";var E=r((function(i,r){var o=i.children,c=i.className,d=void 0===c?"":c,m=i.asChild,u=void 0!==m&&m,h=i.id,C=e(i,["children","className","asChild","id"]),N=l(f),g=N.rootClass,D=N.setDescriptionId,I=N.descriptionId,y=v.useId(),A=null!=h?h:y,O=n(A),E=n(I);return s((function(){E.current=I}),[I]),s((function(){return O.current=A,A&&D(A),function(){E.current===O.current&&D(void 0)}}),[A,D]),t.createElement(p.p,a({ref:r,id:A,className:"".concat(g,"-description ").concat(d),asChild:u},C),o)}));E.displayName="AlertDialogDescription";var b=function(){return console.warn("Direct usage of AlertDialog is not supported. Please use AlertDialog.Root, AlertDialog.Content, etc. instead."),null};b.Root=C,b.Trigger=g,b.Overlay=I,b.Portal=D,b.Content=N,b.Title=O,b.Description=E,b.Cancel=y,b.Action=A;export{b as default};

package/dist/components/AspectRatio.d.ts

@@ -1,16 +1,13 @@
-import React from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 
-type AspectRatioProps = {
-    children: React.ReactNode;
+type AspectRatioProps = ComponentPropsWithoutRef<'div'> & {
     customRootClass?: string;
-    className?: string;
     ratio?: string;
-    props: Record<string, any>[];
-};
-declare const AspectRatio: {
-    ({ children, customRootClass, className, ratio, ...props }: AspectRatioProps): React.JSX.Element;
-    displayName: string;
 };
+declare const AspectRatio: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    customRootClass?: string;
+    ratio?: string;
+} & React.RefAttributes<HTMLDivElement>>;
 
 export { AspectRatio as default };
 export type { AspectRatioProps };

package/dist/components/AspectRatio.js

@@ -1 +1 @@
-'use client';import{__rest as s,__assign as t}from"./node_modules/tslib/tslib.es6.js";import e from"react";import{customClassSwitcher as o}from"./src/core/customClassSwitcher/index.js";import{clsx as a}from"./node_modules/clsx/dist/clsx.js";var r="AspectRatio",m=function(m){var i=m.children,c=m.customRootClass,l=m.className,d=m.ratio,u=void 0===d?"1":d,n=s(m,["children","customRootClass","className","ratio"]);isNaN(Number(u))&&!u.match(/^(\d+)\/(\d+)$/)&&(u="1"),Number(u)<=0&&(u="1");var p=o(c,r);return e.createElement("div",t({style:{aspectRatio:u},className:a(p,l)},n),i," ")};m.displayName=r;export{m as default};
+'use client';import{_ as a,a as s}from"./tslib.es6-BtVxab8e.js";import r from"react";import{c as t}from"./index-BVxS3Ixi.js";import{c as e}from"./clsx-BaVHROc5.js";var o="AspectRatio",m=r.forwardRef((function(m,i){var c=m.children,l=m.customRootClass,d=m.className,f=m.ratio,p=void 0===f?"1":f,N=a(m,["children","customRootClass","className","ratio"]);isNaN(Number(p))&&!p.match(/^(\d+)\/(\d+)$/)&&(p="1"),Number(p)<=0&&(p="1");var n=t(l,o);return r.createElement("div",s({ref:i,style:{aspectRatio:p},className:e(n,d)},N),c)}));m.displayName=o;export{m as default};

package/dist/components/Avatar.d.ts

@@ -1,15 +1,12 @@
 import * as React from 'react';
 import React__default from 'react';
-import { AvatarPrimitiveRootProps } from '~/core/primitives/Avatar/fragments/AvatarPrimitiveRoot';
-import { AvatarRootImageProps } from '~/core/primitives/Avatar/fragments/AvatarPrimitiveImage';
+import AvatarPrimitiveFallback from '~/core/primitives/Avatar/fragments/AvatarPrimitiveFallback';
+import AvatarPrimitiveRoot from '~/core/primitives/Avatar/fragments/AvatarPrimitiveRoot';
+import AvatarPrimitiveImage from '~/core/primitives/Avatar/fragments/AvatarPrimitiveImage';
 
-interface AvatarPrimitiveFallbackProps {
-    children: React__default.ReactNode;
-    asChild?: boolean;
-    className?: string;
-}
+type AvatarFallbackProps = React__default.ComponentPropsWithoutRef<typeof AvatarPrimitiveFallback>;
 
-type AvatarRootProps = AvatarPrimitiveRootProps & {
+type AvatarRootProps = React__default.ComponentPropsWithoutRef<typeof AvatarPrimitiveRoot> & {
     customRootClass?: string;
     className?: string;
     size?: string;
@@ -17,19 +14,14 @@ type AvatarRootProps = AvatarPrimitiveRootProps & {
     color?: string;
 };
 
-type AvatarImageProps = AvatarRootImageProps & {
-    src?: string;
-    alt?: string;
-};
+type AvatarImageProps = React__default.ComponentPropsWithoutRef<typeof AvatarPrimitiveImage>;
 
 declare const Avatar: {
     (): null;
     displayName: string;
-    Root: ({ children, customRootClass, className, size, variant, color, ...props }: AvatarRootProps) => React.JSX.Element;
-    Image: ({ src, alt, ...props }: AvatarImageProps) => React.JSX.Element;
-    Fallback: ({ children, className, ...props }: AvatarPrimitiveFallbackProps & {
-        className?: string;
-    }) => React.JSX.Element;
+    Root: React.ForwardRefExoticComponent<AvatarRootProps & React.RefAttributes<HTMLElement>>;
+    Image: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLElement>>;
+    Fallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLElement>>;
 };
 declare namespace AvatarProps {
     type Root = AvatarRootProps;

package/dist/components/Avatar.js

@@ -1 +1 @@
-'use client';import a from"./Avatar/fragments/AvatarRoot.js";import t from"./Avatar/fragments/AvatarImage.js";import r from"./Avatar/fragments/AvatarFallback.js";var o=function(){return console.warn("Direct usage of Avatar is not supported. Please use Avatar.Root, Avatar.Image, Avatar.Fallback instead."),null};o.displayName="Avatar",o.Root=a,o.Image=t,o.Fallback=r;export{o as default};
+'use client';import{_ as a,a as r}from"./tslib.es6-BtVxab8e.js";import e,{createContext as s,useContext as o}from"react";import{A as t,a as l,b as i}from"./AvatarPrimitiveFallback-BV0bK5Qg.js";import{c}from"./clsx-BaVHROc5.js";import{c as m}from"./index-BVxS3Ixi.js";import{u as n,a as v,b as d}from"./index-Bf4LVEjJ.js";import"./index-Dc5Cm9z0.js";var f=s({size:"",variant:"",color:"",rootClass:""}),u="Avatar",p=e.forwardRef((function(s,o){var l=s.children,i=s.customRootClass,p=void 0===i?"":i,N=s.className,A=void 0===N?"":N,b=s.size,R=void 0===b?"":b,j=s.variant,C=void 0===j?"":j,g=s.color,k=void 0===g?"":g,x=a(s,["children","customRootClass","className","size","variant","color"]),z=m(p,u),h=n("avatar",{variant:C,size:R}),w=v(k),y=d(h(),w());return e.createElement(f.Provider,{value:{size:R,variant:C,color:k,rootClass:z}},e.createElement(t,r({ref:o,className:c(z,A)},y(),x),l))}));p.displayName=u;var N=e.forwardRef((function(s,t){var i=s.src,m=void 0===i?"":i,n=s.alt,v=void 0===n?"":n,d=a(s,["src","alt"]),u=o(f).rootClass;return e.createElement(l,r({ref:t,className:c("".concat(u,"-image")),src:m,alt:v},d))}));N.displayName="AvatarImage";var A=e.forwardRef((function(s,t){var l=s.children,m=s.className,n=void 0===m?"":m,v=a(s,["children","className"]),d=o(f).rootClass;return e.createElement(i,r({ref:t,className:c("".concat(d,"-fallback"),n)},v),l)}));A.displayName="AvatarFallback";var b=function(){return console.warn("Direct usage of Avatar is not supported. Please use Avatar.Root, Avatar.Image, Avatar.Fallback instead."),null};b.displayName="Avatar",b.Root=p,b.Image=N,b.Fallback=A;export{b as default};

package/dist/components/AvatarGroup.d.ts

@@ -1,35 +1,39 @@
 import * as React from 'react';
 import React__default from 'react';
+import Primitive from '~/core/primitives/Primitive';
+import AvatarPrimitiveRoot from '~/core/primitives/Avatar/fragments/AvatarPrimitiveRoot';
+import { AvatarRootImageProps as AvatarRootImageProps$1 } from '~/core/primitives/Avatar/fragments/AvatarPrimitiveImage';
+import AvatarPrimitiveFallback from '~/core/primitives/Avatar/fragments/AvatarPrimitiveFallback';
 
-type AvatarGroupRootProps = {
+type AvatarRootImageProps = React__default.ComponentPropsWithoutRef<typeof Primitive.img> & {
+    src?: string;
+    alt?: string;
+};
+
+type AvatarGroupRootProps = React__default.ComponentPropsWithoutRef<'div'> & {
     customRootClass?: string | '';
     size?: string;
     variant?: string;
-    children: React__default.ReactNode;
-    className?: string;
 };
 
-type AvatarGroupItemProps = {
+type AvatarGroupItemProps = React__default.ComponentPropsWithoutRef<typeof AvatarPrimitiveRoot> & {
     color?: string;
-    children: React__default.ReactNode;
 };
 
-type AvatarGroupAvatarProps = {
-    src: string;
-    alt: string;
-};
+type AvatarGroupAvatarProps = AvatarRootImageProps$1;
 
-type AvatarGroupFallbackProps = {
-    children: React__default.ReactNode;
-    fallback?: string;
-};
+type AvatarGroupFallbackProps = React__default.ComponentPropsWithoutRef<typeof AvatarPrimitiveFallback>;
 
 declare const AvatarGroup: {
     (): null;
-    Root: ({ customRootClass, size, variant, children, className, ...props }: AvatarGroupRootProps) => React.JSX.Element;
-    Item: ({ color, children }: AvatarGroupItemProps) => React.JSX.Element;
-    Avatar: ({ src, alt }: AvatarGroupAvatarProps) => React.JSX.Element;
-    Fallback: ({ children }: AvatarGroupFallbackProps) => React.JSX.Element;
+    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        customRootClass?: string | "";
+        size?: string;
+        variant?: string;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<AvatarGroupItemProps & React.RefAttributes<HTMLElement>>;
+    Avatar: React.ForwardRefExoticComponent<AvatarRootImageProps & React.RefAttributes<HTMLElement>>;
+    Fallback: React.ForwardRefExoticComponent<AvatarGroupFallbackProps & React.RefAttributes<HTMLElement>>;
 };
 declare namespace AvatarGroupProps {
     type Root = AvatarGroupRootProps;

package/dist/components/AvatarGroup.js

@@ -1 +1 @@
-'use client';import a from"./AvatarGroup/fragments/AvatarGroupRoot.js";import r from"./AvatarGroup/fragments/AvatarGroupItem.js";import t from"./AvatarGroup/fragments/AvatarGroupAvatar.js";import o from"./AvatarGroup/fragments/AvatarGroupFallback.js";var p=function(){return console.warn("Direct usage of AvatarGroup is not supported. Please use AvatarGroup.Root, AvatarGroup.Item, AvatarGroup.Avatar, AvatarGroup.Fallback instead."),null};p.Root=a,p.Item=r,p.Avatar=t,p.Fallback=o;export{p as default};
+'use client';import{_ as a,a as r}from"./tslib.es6-BtVxab8e.js";import e,{createContext as t,useContext as s}from"react";import{c as o}from"./clsx-BaVHROc5.js";import{c as l}from"./index-BVxS3Ixi.js";import{u as i,b as c,a as n}from"./index-Bf4LVEjJ.js";import{A as m,a as v,b as d}from"./AvatarPrimitiveFallback-BV0bK5Qg.js";import"./index-Dc5Cm9z0.js";var u=t({rootClass:"",size:"",variant:""}),f="AvatarGroup",p=e.forwardRef((function(t,s){var n=t.customRootClass,m=void 0===n?"":n,v=t.size,d=void 0===v?"":v,p=t.variant,A=void 0===p?"":p,N=t.children,G=t.className,b=void 0===G?"":G,R=a(t,["customRootClass","size","variant","children","className"]),h=l(m,f),j=i("avatar",{variant:A,size:d}),C=c(j());return e.createElement(u.Provider,{value:{size:d,variant:A,rootClass:h}},e.createElement("div",r({ref:s,className:o(h,b)},C(),R),N))}));p.displayName=f;var A=e.forwardRef((function(t,l){var i=t.color,v=void 0===i?"":i,d=t.children,f=t.className,p=a(t,["color","children","className"]),A=s(u).rootClass,N=n(v),G=c(N());return e.createElement(m,r({ref:l,className:o("".concat(A,"-item"),f)},G(),p),d)}));A.displayName="AvatarGroupItem";var N=e.forwardRef((function(t,s){var o=t.src,l=t.alt,i=a(t,["src","alt"]);return e.createElement(v,r({ref:s,src:o,alt:l},i))}));N.displayName="AvatarGroupAvatar";var G=e.forwardRef((function(t,l){var i=t.children,c=t.className,n=a(t,["children","className"]),m=s(u).rootClass;return e.createElement(d,r({ref:l,className:o("".concat(m,"-fallback"),c)},n),i)}));G.displayName="AvatarGroupFallback";var b=function(){return console.warn("Direct usage of AvatarGroup is not supported. Please use AvatarGroup.Root, AvatarGroup.Item, AvatarGroup.Avatar, AvatarGroup.Fallback instead."),null};b.Root=p,b.Item=A,b.Avatar=N,b.Fallback=G;export{b as default};

package/dist/components/AvatarPrimitiveFallback-BV0bK5Qg.js

@@ -0,0 +1 @@
+'use client';import{_ as a,a as r}from"./tslib.es6-BtVxab8e.js";import e,{createContext as i,useState as o,useContext as s,useEffect as l}from"react";import{P as d}from"./index-Dc5Cm9z0.js";var n=i({}),t=e.forwardRef((function(i,s){var l=i.children,t=i.asChild,m=void 0!==t&&t,c=a(i,["children","asChild"]),v=o(!1),f=v[0],h=v[1],u=o(!1),E=u[0],p=u[1],g={isImageLoaded:f,hasError:E,setHasError:p,handleLoadImage:function(){h(!0),p(!1)},handleErrorImage:function(){h(!1),p(!0)}};return e.createElement(n.Provider,{value:g},e.createElement(d.span,r({ref:s,asChild:m},c),l))}));t.displayName="AvatarPrimitiveRoot";var m=e.forwardRef((function(i,o){var t=i.src,m=void 0===t?"":t,c=i.alt,v=void 0===c?"":c,f=a(i,["src","alt"]),h=s(n),u=h.handleErrorImage,E=h.handleLoadImage,p=h.hasError;return p?null:(l((function(){m||u()}),[m,u,p]),e.createElement(d.img,r({ref:o,src:m,alt:v,onError:u,onLoad:E},f)))}));m.displayName="AvatarPrimitiveImage";var c=e.forwardRef((function(i,o){var l=i.children,t=i.asChild,m=void 0!==t&&t,c=i.className,v=void 0===c?"":c,f=a(i,["children","asChild","className"]);return s(n).isImageLoaded?null:e.createElement(d.span,r({ref:o,asChild:m,className:v},f),l)}));c.displayName="AvatarPrimitiveFallback";export{t as A,m as a,c as b};

package/dist/components/Badge.d.ts

@@ -1,15 +1,17 @@
 import React from 'react';
 
-type BadgeProps = {
-    children?: React.ReactNode;
+type BadgeProps = React.ComponentPropsWithoutRef<'div'> & {
     customRootClass?: string;
-    className?: string;
     variant?: string;
     size?: string;
     color?: string;
-    props?: object[];
 };
-declare const Badge: ({ children, customRootClass, className, color, variant, size, ...props }: BadgeProps) => React.JSX.Element;
+declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    customRootClass?: string;
+    variant?: string;
+    size?: string;
+    color?: string;
+} & React.RefAttributes<HTMLDivElement>>;
 
 export { Badge as default };
 export type { BadgeProps };

package/dist/components/Badge.js

@@ -1 +1 @@
-'use client';import{__rest as o,__assign as s}from"./node_modules/tslib/tslib.es6.js";import e from"react";import{customClassSwitcher as r}from"./src/core/customClassSwitcher/index.js";import{clsx as t}from"./node_modules/clsx/dist/clsx.js";import{useCreateDataAttribute as i,useCreateDataAccentColorAttribute as a,useComposeAttributes as c}from"./src/core/hooks/createDataAttribute/index.js";var m=function(m){var d=m.children,l=m.customRootClass,n=void 0===l?"":l,v=m.className,u=void 0===v?"":v,f=m.color,p=void 0===f?"":f,x=m.variant,b=void 0===x?"":x,h=m.size,j=void 0===h?"":h,z=o(m,["children","customRootClass","className","color","variant","size"]),C=r(n,"Badge"),N=i("badge",{variant:b,size:j}),g=a(p),R=c(N(),g());return e.createElement("div",s({className:t(C,u)},R(),z),d)};export{m as default};
+'use client';import{_ as a,a as s}from"./tslib.es6-BtVxab8e.js";import o from"react";import{c as r}from"./index-BVxS3Ixi.js";import{c as e}from"./clsx-BaVHROc5.js";import{u as i,a as t,b as m}from"./index-Bf4LVEjJ.js";var d="Badge",c=o.forwardRef((function(c,l){var n=c.children,v=c.customRootClass,f=void 0===v?"":v,p=c.className,u=void 0===p?"":p,j=c.color,x=void 0===j?"":j,N=c.variant,b=void 0===N?"":N,z=c.size,R=void 0===z?"":z,g=a(c,["children","customRootClass","className","color","variant","size"]),h=r(f,d),C=i("badge",{variant:b,size:R}),w=t(x),y=m(C(),w());return o.createElement("div",s({ref:l,className:e(h,u)},y(),g),n)}));c.displayName=d;export{c as default};

package/dist/components/BlockQuote.d.ts

@@ -1,18 +1,17 @@
 import React from 'react';
 
-type BlockQuoteProps = {
-    children: React.ReactNode;
+type BlockQuoteProps = React.ComponentPropsWithoutRef<'blockquote'> & {
     customRootClass?: string;
-    className?: string;
     color?: string;
     variant?: string;
     size?: string;
-    props?: Record<string, any>[];
-};
-declare const BlockQuote: {
-    ({ children, customRootClass, className, color, variant, size, ...props }: BlockQuoteProps): React.JSX.Element;
-    displayName: string;
 };
+declare const BlockQuote: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, "ref"> & {
+    customRootClass?: string;
+    color?: string;
+    variant?: string;
+    size?: string;
+} & React.RefAttributes<HTMLQuoteElement>>;
 
 export { BlockQuote as default };
 export type { BlockQuoteProps };

package/dist/components/BlockQuote.js

@@ -1 +1 @@
-'use client';import{__rest as o,__assign as s}from"./node_modules/tslib/tslib.es6.js";import a from"react";import{clsx as t}from"./node_modules/clsx/dist/clsx.js";import{customClassSwitcher as e}from"./src/core/customClassSwitcher/index.js";var r="BlockQuote",c=function(c){var i=c.children,l=c.customRootClass,d=void 0===l?"":l,m=c.className,n=void 0===m?"":m,u=c.color,v=void 0===u?"":u,f=c.variant,p=void 0===f?"":f,b=c.size,k=void 0===b?"":b,x=o(c,["children","customRootClass","className","color","variant","size"]),N=e(d,r),h={};return p&&(h["data-block-quote-variant"]=p),k&&(h["data-block-quote-size"]=k),v&&(h["data-rad-ui-accent-color"]=v),a.createElement("blockquote",s({className:t(N,n)},x,h)," ",i)};c.displayName=r;export{c as default};
+'use client';import{_ as a,a as o}from"./tslib.es6-BtVxab8e.js";import r from"react";import{c as s}from"./clsx-BaVHROc5.js";import{c as t}from"./index-BVxS3Ixi.js";var e="BlockQuote",c=r.forwardRef((function(c,i){var l=c.children,d=c.customRootClass,m=void 0===d?"":d,n=c.className,u=void 0===n?"":n,v=c.color,f=void 0===v?"":v,p=c.variant,b=void 0===p?"":p,k=c.size,N=void 0===k?"":k,j=a(c,["children","customRootClass","className","color","variant","size"]),q=t(m,e),x={};return b&&(x["data-block-quote-variant"]=b),N&&(x["data-block-quote-size"]=N),f&&(x["data-rad-ui-accent-color"]=f),r.createElement("blockquote",o({ref:i,className:s(q,u)},j,x),l)}));c.displayName=e;export{c as default};

package/dist/components/Button.d.ts

@@ -1,15 +1,24 @@
-import React, { DetailedHTMLProps, ButtonHTMLAttributes, PropsWithChildren } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
+import ButtonPrimitive from '~/core/primitives/Button';
 
 type ButtonProps = {
     customRootClass?: string;
     variant?: string;
     size?: string;
     color?: string;
-} & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & PropsWithChildren;
-declare const Button: {
-    ({ children, type, customRootClass, className, variant, size, color, ...props }: ButtonProps): React.JSX.Element;
-    displayName: string;
-};
+} & ComponentPropsWithoutRef<typeof ButtonPrimitive>;
+declare const Button: React.ForwardRefExoticComponent<{
+    customRootClass?: string;
+    variant?: string;
+    size?: string;
+    color?: string;
+} & Omit<{
+    label?: string;
+    description?: string;
+    asChild?: boolean;
+    required?: boolean;
+    onChange?: any;
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
 export { Button as default };
 export type { ButtonProps };

package/dist/components/Button.js

@@ -1 +1 @@
-'use client';import{__rest as o,__assign as t}from"./node_modules/tslib/tslib.es6.js";import s from"react";import{customClassSwitcher as e}from"./src/core/customClassSwitcher/index.js";import{clsx as r}from"./node_modules/clsx/dist/clsx.js";import i from"./src/core/primitives/Button/index.js";import{useCreateDataAttribute as a,useCreateDataAccentColorAttribute as c,useComposeAttributes as m}from"./src/core/hooks/createDataAttribute/index.js";var l="Button",d=function(d){var n=d.children,u=d.type,p=void 0===u?"button":u,v=d.customRootClass,f=void 0===v?"":v,x=d.className,b=void 0===x?"":x,j=d.variant,h=void 0===j?"":j,y=d.size,N=void 0===y?"":y,z=d.color,C=void 0===z?"":z,B=o(d,["children","type","customRootClass","className","variant","size","color"]),R=e(f,l),_=a("button",{variant:h,size:N}),k=c(C),w=m(_(),k());return s.createElement(i,t({type:p,className:r(R,b)},w(),B),n)};d.displayName=l;export{d as default};
+'use client';import{_ as o,a}from"./tslib.es6-BtVxab8e.js";import i,{forwardRef as s}from"react";import{c as t}from"./index-BVxS3Ixi.js";import{c as e}from"./clsx-BaVHROc5.js";import{B as r}from"./index-DnCiOYxZ.js";import{u as d,a as n,b as l}from"./index-Bf4LVEjJ.js";import"./index-Dc5Cm9z0.js";var m="Button",c=s((function(s,c){var p=s.children,v=s.type,u=void 0===v?"button":v,f=s.customRootClass,b=void 0===f?"":f,j=s.className,x=void 0===j?"":j,C=s.variant,y=void 0===C?"":C,N=s.size,k=void 0===N?"":N,z=s.color,h=void 0===z?"":z,B=s.disabled,R=void 0!==B&&B,g=s.onClick,D=o(s,["children","type","customRootClass","className","variant","size","color","disabled","onClick"]),E=t(b,m),P=d("button",{variant:y,size:k}),_=n(h),q=l(P(),_());return i.createElement(r,a({ref:c,type:u,disabled:R,"data-disabled":R?"":void 0,className:e(E,x)},q(),{onClick:function(o){if(R)return o.preventDefault(),void o.stopPropagation();null==g||g(o)}},D),p)}));c.displayName=m;export{c as default};

package/dist/components/Callout.d.ts

@@ -1,35 +1,30 @@
-import * as React$1 from 'react';
-import React__default from 'react';
-
-type CalloutIconProps = {
-    children: React__default.ReactNode;
-    className?: string;
-};
-declare function CalloutIcon({ children, className, ...props }: CalloutIconProps): React__default.JSX.Element;
-
-type CalloutTextProps = {
-    children: React__default.ReactNode;
-    className?: string;
-};
-declare function CalloutText({ children, className, ...props }: CalloutTextProps): React__default.JSX.Element;
+import * as react from 'react';
 
 declare const Callout: {
     (): null;
-    Root: {
-        ({ children, asChild, className, color, variant, size, customRootClass, ...props }: {
-            children?: React.ReactNode;
-            className?: string | "";
-            color?: string;
-            variant?: string;
-            size?: string;
-            customRootClass?: string;
-            asChild?: boolean;
-            props?: Record<any, any>[];
-        }): React$1.JSX.Element;
-        displayName: string;
-    };
-    Icon: typeof CalloutIcon;
-    Text: typeof CalloutText;
+    Root: react.ForwardRefExoticComponent<((Omit<react.InputHTMLAttributes<HTMLInputElement> & {
+        asChild?: boolean;
+    } & react.RefAttributes<HTMLElement>, "ref"> | Omit<react.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+        children?: React.ReactNode;
+    } & react.RefAttributes<HTMLElement>, "ref">) & {
+        color?: string;
+        variant?: string;
+        size?: string;
+        customRootClass?: string;
+    }) & react.RefAttributes<HTMLElement>>;
+    Icon: react.ForwardRefExoticComponent<(Omit<react.InputHTMLAttributes<HTMLInputElement> & {
+        asChild?: boolean;
+    } & react.RefAttributes<HTMLElement>, "ref"> | Omit<react.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+        children?: React.ReactNode;
+    } & react.RefAttributes<HTMLElement>, "ref">) & react.RefAttributes<HTMLElement>>;
+    Text: react.ForwardRefExoticComponent<(Omit<react.InputHTMLAttributes<HTMLInputElement> & {
+        asChild?: boolean;
+    } & react.RefAttributes<HTMLElement>, "ref"> | Omit<react.HTMLAttributes<HTMLElement> & {
+        asChild?: boolean;
+        children?: React.ReactNode;
+    } & react.RefAttributes<HTMLElement>, "ref">) & react.RefAttributes<HTMLElement>>;
 };
 
 export { Callout as default };