@cerberus-design/react 1.2.0 → 1.3.0-rc.1

package/dist/components/admonition/primitives.js

@@ -1,4 +1,4 @@
-import { cerberus, createCerberusPrimitive } from "../../system/index.js";
+import { createCerberusPrimitive } from "../../system/index.js";
 import { admonition } from "styled-system/recipes";
 //#region src/components/admonition/primitives.tsx
 /**
@@ -9,35 +9,35 @@ var { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(admonition);
 /**
 * The `AdmonitionRoot` component is the container for the Admonition.
 */
-var AdmonitionRoot = withSlotRecipe(cerberus.aside, "root", { defaultProps: {
+var AdmonitionRoot = withSlotRecipe("animateMotion", "root", { defaultProps: {
 	"data-scope": "admonition",
 	"data-part": "root"
 } });
 /**
 * The `AdmonitionIndicator` component is the indicator for the Admonition.
 */
-var AdmonitionIndicator = withNoRecipe(cerberus.span, { defaultProps: {
+var AdmonitionIndicator = withNoRecipe("span", { defaultProps: {
 	"data-scope": "admonition",
 	"data-part": "indicator"
 } });
 /**
 * The `AdmonitionContent` component is the content for the Admonition.
 */
-var AdmonitionContent = withNoRecipe(cerberus.div, { defaultProps: {
+var AdmonitionContent = withNoRecipe("div", { defaultProps: {
 	"data-scope": "admonition",
 	"data-part": "content"
 } });
 /**
 * The `AdmonitionHeading` component is the heading title for the Admonition.
 */
-var AdmonitionHeading = withSlotRecipe(cerberus.p, "heading", { defaultProps: {
+var AdmonitionHeading = withSlotRecipe("p", "heading", { defaultProps: {
 	"data-scope": "admonition",
 	"data-part": "heading"
 } });
 /**
 * The `AdmonitionDescription` component is the description for the Admonition.
 */
-var AdmonitionDescription = withSlotRecipe(cerberus.p, "description", { defaultProps: {
+var AdmonitionDescription = withSlotRecipe("p", "description", { defaultProps: {
 	"data-scope": "admonition",
 	"data-part": "description"
 } });

package/dist/components/avatar/primitives.d.cts

@@ -1,28 +1,19 @@
 import { Avatar, AvatarFallbackProps as ArkAvatarFallbackProps, AvatarImageProps as ArkAvatarImageProps, AvatarRootProps as ArkAvatarRootProps } from '@ark-ui/react/avatar';
 import { AvatarVariantProps } from 'styled-system/recipes';
 import { CerberusPrimitiveProps } from '../../system/index';
-import { RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /**
  * The root component of the Avatar.
  */
-export declare const AvatarRoot: {
-    (internalProps: CerberusPrimitiveProps<Avatar.RootProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const AvatarRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Avatar.RootProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type AvatarRootProps = CerberusPrimitiveProps<ArkAvatarRootProps & AvatarVariantProps>;
 /**
  * The image component of the Avatar.
  */
-export declare const AvatarImage: {
-    (internalProps: CerberusPrimitiveProps<Avatar.ImageProps & RefAttributes<HTMLImageElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const AvatarImage: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Avatar.ImageProps & RefAttributes<HTMLImageElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type AvatarImageProps = CerberusPrimitiveProps<ArkAvatarImageProps>;
 /**
  * The fallback component of the Avatar.
  */
-export declare const AvatarFallback: {
-    (internalProps: CerberusPrimitiveProps<Avatar.FallbackProps & RefAttributes<HTMLSpanElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const AvatarFallback: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Avatar.FallbackProps & RefAttributes<HTMLSpanElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type AvatarFallbackProps = CerberusPrimitiveProps<ArkAvatarFallbackProps>;

package/dist/components/avatar/primitives.d.ts

@@ -1,28 +1,19 @@
 import { Avatar, AvatarFallbackProps as ArkAvatarFallbackProps, AvatarImageProps as ArkAvatarImageProps, AvatarRootProps as ArkAvatarRootProps } from '@ark-ui/react/avatar';
 import { AvatarVariantProps } from 'styled-system/recipes';
 import { CerberusPrimitiveProps } from '../../system/index';
-import { RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /**
  * The root component of the Avatar.
  */
-export declare const AvatarRoot: {
-    (internalProps: CerberusPrimitiveProps<Avatar.RootProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const AvatarRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Avatar.RootProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type AvatarRootProps = CerberusPrimitiveProps<ArkAvatarRootProps & AvatarVariantProps>;
 /**
  * The image component of the Avatar.
  */
-export declare const AvatarImage: {
-    (internalProps: CerberusPrimitiveProps<Avatar.ImageProps & RefAttributes<HTMLImageElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const AvatarImage: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Avatar.ImageProps & RefAttributes<HTMLImageElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type AvatarImageProps = CerberusPrimitiveProps<ArkAvatarImageProps>;
 /**
  * The fallback component of the Avatar.
  */
-export declare const AvatarFallback: {
-    (internalProps: CerberusPrimitiveProps<Avatar.FallbackProps & RefAttributes<HTMLSpanElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const AvatarFallback: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Avatar.FallbackProps & RefAttributes<HTMLSpanElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type AvatarFallbackProps = CerberusPrimitiveProps<ArkAvatarFallbackProps>;

package/dist/components/button/button.cjs

@@ -1,9 +1,11 @@
 "use client";
+const require_index = require("../../system/index.cjs");
 const require_show = require("../show/show.cjs");
 const require_spinner = require("../spinner/spinner.cjs");
-const require_primitives = require("./primitives.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
+let styled_system_recipes = require("styled-system/recipes");
 let react = require("react");
+let styled_system_css = require("styled-system/css");
+let react_jsx_runtime = require("react/jsx-runtime");
 let styled_system_jsx = require("styled-system/jsx");
 //#region src/components/button/button.tsx
 var ButtonContext = (0, react.createContext)({ pending: false });
@@ -11,16 +13,19 @@ var ButtonContext = (0, react.createContext)({ pending: false });
 * A component that allows the user to perform actions
 * @see https://cerberus.digitalu.design/react/button
 */
-function Button(props) {
-	const { pending = false, ...nativeProps } = props;
+function ButtonEl(props) {
+	const [variantProps, elProps] = styled_system_recipes.button.splitVariantProps(props);
+	const { pending = false, ...nativeProps } = elProps;
+	const styles = (0, styled_system_recipes.button)(variantProps);
 	const value = (0, react.useMemo)(() => ({ pending }), [pending]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonContext.Provider, {
 		value,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.ButtonRoot, {
-			...nativeProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.cerberus.button, {
 			"data-scope": "button",
 			"data-part": "root",
-			disabled: pending || nativeProps.disabled
+			...nativeProps,
+			disabled: pending || nativeProps.disabled,
+			className: (0, styled_system_css.cx)(elProps.className, styles, (0, styled_system_css.css)(elProps.css))
 		})
 	});
 }
@@ -36,11 +41,18 @@ function ButtonIcon(props) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Box, {
 			"data-scope": "button",
 			"data-part": "button-spinner",
+			ref: props.ref,
 			w: "4",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_spinner.Spinner, {})
 		})
 	});
 }
+function Button(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonEl, { ...props });
+}
+Button.displayName = "Button";
+Button.Icon = ButtonIcon;
+ButtonIcon.displayName = "ButtonIcon";
 //#endregion
 exports.Button = Button;
 exports.ButtonIcon = ButtonIcon;

package/dist/components/button/button.d.cts

@@ -6,13 +6,16 @@ export interface ButtonProps extends ButtonRootProps {
      */
     pending?: boolean;
 }
-/**
- * A component that allows the user to perform actions
- * @see https://cerberus.digitalu.design/react/button
- */
-export declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
 /**
  * An icon to display in a button that utilizes the pending state to display
  * a loading spinner.
  */
 export declare function ButtonIcon(props: CerberusProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ButtonIcon {
+    var displayName: string;
+}
+export declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Button {
+    var displayName: string;
+    var Icon: typeof ButtonIcon;
+}

package/dist/components/button/button.d.ts

@@ -6,13 +6,16 @@ export interface ButtonProps extends ButtonRootProps {
      */
     pending?: boolean;
 }
-/**
- * A component that allows the user to perform actions
- * @see https://cerberus.digitalu.design/react/button
- */
-export declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
 /**
  * An icon to display in a button that utilizes the pending state to display
  * a loading spinner.
  */
 export declare function ButtonIcon(props: CerberusProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ButtonIcon {
+    var displayName: string;
+}
+export declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Button {
+    var displayName: string;
+    var Icon: typeof ButtonIcon;
+}

package/dist/components/button/button.js

@@ -1,9 +1,11 @@
 "use client";
+import { cerberus } from "../../system/index.js";
 import { Show } from "../show/show.js";
 import { Spinner } from "../spinner/spinner.js";
-import { ButtonRoot } from "./primitives.js";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { button } from "styled-system/recipes";
 import { createContext, useContext, useMemo } from "react";
+import { css, cx } from "styled-system/css";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { Box } from "styled-system/jsx";
 //#region src/components/button/button.tsx
 var ButtonContext = createContext({ pending: false });
@@ -11,16 +13,19 @@ var ButtonContext = createContext({ pending: false });
 * A component that allows the user to perform actions
 * @see https://cerberus.digitalu.design/react/button
 */
-function Button(props) {
-	const { pending = false, ...nativeProps } = props;
+function ButtonEl(props) {
+	const [variantProps, elProps] = button.splitVariantProps(props);
+	const { pending = false, ...nativeProps } = elProps;
+	const styles = button(variantProps);
 	const value = useMemo(() => ({ pending }), [pending]);
 	return /* @__PURE__ */ jsx(ButtonContext.Provider, {
 		value,
-		children: /* @__PURE__ */ jsx(ButtonRoot, {
-			...nativeProps,
+		children: /* @__PURE__ */ jsx(cerberus.button, {
 			"data-scope": "button",
 			"data-part": "root",
-			disabled: pending || nativeProps.disabled
+			...nativeProps,
+			disabled: pending || nativeProps.disabled,
+			className: cx(elProps.className, styles, css(elProps.css))
 		})
 	});
 }
@@ -36,10 +41,17 @@ function ButtonIcon(props) {
 		children: /* @__PURE__ */ jsx(Box, {
 			"data-scope": "button",
 			"data-part": "button-spinner",
+			ref: props.ref,
 			w: "4",
 			children: /* @__PURE__ */ jsx(Spinner, {})
 		})
 	});
 }
+function Button(props) {
+	return /* @__PURE__ */ jsx(ButtonEl, { ...props });
+}
+Button.displayName = "Button";
+Button.Icon = ButtonIcon;
+ButtonIcon.displayName = "ButtonIcon";
 //#endregion
 export { Button, ButtonIcon };

package/dist/components/button/index.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_primitives = require("./primitives.cjs");
 const require_button = require("./button.cjs");
 const require_parts = require("./parts.cjs");
+const require_primitives = require("./primitives.cjs");
 exports.Button = require_button.Button;
 exports.ButtonGroup = require_primitives.ButtonGroup;
 exports.ButtonIcon = require_button.ButtonIcon;

package/dist/components/button/index.js

@@ -1,4 +1,4 @@
-import { ButtonGroup } from "./primitives.js";
 import { Button, ButtonIcon } from "./button.js";
 import { ButtonParts } from "./parts.js";
+import { ButtonGroup } from "./primitives.js";
 export { Button, ButtonGroup, ButtonIcon, ButtonParts };

package/dist/components/button/primitives.cjs

@@ -1,6 +1,5 @@
 const require_index = require("../../system/index.cjs");
 let styled_system_recipes = require("styled-system/recipes");
-let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/button/primitives.tsx
 /**
@@ -9,11 +8,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 */
 var { withRecipe } = require_index.createCerberusPrimitive(styled_system_recipes.button);
 var { withRecipe: withGroupRecipe } = require_index.createCerberusPrimitive(styled_system_recipes.buttonGroup);
-/**
-* The root element of the Button component.
-*/
-var ButtonRoot = withRecipe(_ark_ui_react_factory.ark.button);
-var ButtonGroupEl = withGroupRecipe(_ark_ui_react_factory.ark.div);
+withRecipe("button");
+var ButtonGroupEl = withGroupRecipe("div");
 /**
 * The ButtonGroup component is a wrapper that groups multiple Button
 * components together.
@@ -23,4 +19,3 @@ function ButtonGroup(props) {
 }
 //#endregion
 exports.ButtonGroup = ButtonGroup;
-exports.ButtonRoot = ButtonRoot;

package/dist/components/button/primitives.d.cts

@@ -1,15 +1,11 @@
-import { ButtonHTMLAttributes, HTMLAttributes, ClassAttributes } from 'react';
+import { HTMLAttributes, ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
 import { ButtonVariantProps, ButtonGroupVariantProps } from 'styled-system/recipes';
-import { CerberusPrimitiveProps } from '../../system/index';
-import { PolymorphicProps } from '@ark-ui/react';
+import { CerberusProps, CerberusPrimitiveProps } from '../../system/index';
 /**
  * The root element of the Button component.
  */
-export declare const ButtonRoot: {
-    (internalProps: CerberusPrimitiveProps< ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & PolymorphicProps>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type ButtonRootProps = CerberusPrimitiveProps<ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariantProps>;
+export declare const ButtonRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps< DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type ButtonRootProps = CerberusProps<'button'> & ButtonVariantProps;
 export type ButtonGroupProps = CerberusPrimitiveProps<HTMLAttributes<HTMLDivElement> & ButtonGroupVariantProps>;
 /**
  * The ButtonGroup component is a wrapper that groups multiple Button

package/dist/components/button/primitives.d.ts

@@ -1,15 +1,11 @@
-import { ButtonHTMLAttributes, HTMLAttributes, ClassAttributes } from 'react';
+import { HTMLAttributes, ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
 import { ButtonVariantProps, ButtonGroupVariantProps } from 'styled-system/recipes';
-import { CerberusPrimitiveProps } from '../../system/index';
-import { PolymorphicProps } from '@ark-ui/react';
+import { CerberusProps, CerberusPrimitiveProps } from '../../system/index';
 /**
  * The root element of the Button component.
  */
-export declare const ButtonRoot: {
-    (internalProps: CerberusPrimitiveProps< ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & PolymorphicProps>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type ButtonRootProps = CerberusPrimitiveProps<ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariantProps>;
+export declare const ButtonRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps< DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type ButtonRootProps = CerberusProps<'button'> & ButtonVariantProps;
 export type ButtonGroupProps = CerberusPrimitiveProps<HTMLAttributes<HTMLDivElement> & ButtonGroupVariantProps>;
 /**
  * The ButtonGroup component is a wrapper that groups multiple Button

package/dist/components/button/primitives.js

@@ -1,6 +1,5 @@
 import { createCerberusPrimitive } from "../../system/index.js";
 import { button, buttonGroup } from "styled-system/recipes";
-import { ark } from "@ark-ui/react/factory";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/button/primitives.tsx
 /**
@@ -9,11 +8,8 @@ import { jsx } from "react/jsx-runtime";
 */
 var { withRecipe } = createCerberusPrimitive(button);
 var { withRecipe: withGroupRecipe } = createCerberusPrimitive(buttonGroup);
-/**
-* The root element of the Button component.
-*/
-var ButtonRoot = withRecipe(ark.button);
-var ButtonGroupEl = withGroupRecipe(ark.div);
+withRecipe("button");
+var ButtonGroupEl = withGroupRecipe("div");
 /**
 * The ButtonGroup component is a wrapper that groups multiple Button
 * components together.
@@ -22,4 +18,4 @@ function ButtonGroup(props) {
 	return /* @__PURE__ */ jsx(ButtonGroupEl, { ...props });
 }
 //#endregion
-export { ButtonGroup, ButtonRoot };
+export { ButtonGroup };

package/dist/components/carousel/primitives.d.cts

@@ -1,44 +1,20 @@
 import { Carousel, CarouselRootProps as ArkRootProps, CarouselControlProps as ArkControlProps, CarouselPrevTriggerProps as ArkPrevTriggerProps, CarouselNextTriggerProps as ArkNextTriggerProps, CarouselIndicatorGroupProps as ArkIndicatorGroupProps, CarouselIndicatorProps as ArkIndicatorProps, CarouselItemGroupProps as ArkItemGroupProps, CarouselItemProps as ArkItemProps } from '@ark-ui/react/carousel';
 import { CarouselVariantProps } from 'styled-system/recipes';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { CerberusPrimitiveProps } from '../..';
-import { RefAttributes } from 'react';
 export type CarouselRootProps = CarouselVariantProps & ArkRootProps;
-export declare const CarouselRoot: {
-    (internalProps: CerberusPrimitiveProps<Carousel.RootProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselRoot: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.RootProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselControlProps = CarouselVariantProps & ArkControlProps;
-export declare const CarouselControl: {
-    (internalProps: CerberusPrimitiveProps<Carousel.ControlProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselControl: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.ControlProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselPrevTriggerProps = CarouselVariantProps & ArkPrevTriggerProps;
-export declare const CarouselPrevTrigger: {
-    (internalProps: CerberusPrimitiveProps<Carousel.PrevTriggerProps & RefAttributes<HTMLButtonElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselPrevTrigger: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.PrevTriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselNextTriggerProps = CarouselVariantProps & ArkNextTriggerProps;
-export declare const CarouselNextTrigger: {
-    (internalProps: CerberusPrimitiveProps<Carousel.NextTriggerProps & RefAttributes<HTMLButtonElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselNextTrigger: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.NextTriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselIndicatorGroupProps = CarouselVariantProps & ArkIndicatorGroupProps;
-export declare const CarouselIndicatorGroup: {
-    (internalProps: CerberusPrimitiveProps<Carousel.IndicatorGroupProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselIndicatorGroup: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.IndicatorGroupProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselIndicatorProps = CarouselVariantProps & ArkIndicatorProps;
-export declare const CarouselIndicator: {
-    (internalProps: CerberusPrimitiveProps<Carousel.IndicatorProps & RefAttributes<HTMLButtonElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselIndicator: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.IndicatorProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselItemGroupProps = CarouselVariantProps & ArkItemGroupProps;
-export declare const CarouselItemGroup: {
-    (internalProps: CerberusPrimitiveProps<Carousel.ItemGroupProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselItemGroup: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.ItemGroupProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselItemProps = CarouselVariantProps & ArkItemProps;
-export declare const CarouselItem: {
-    (internalProps: CerberusPrimitiveProps<Carousel.ItemProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselItem: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.ItemProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;

package/dist/components/carousel/primitives.d.ts

@@ -1,44 +1,20 @@
 import { Carousel, CarouselRootProps as ArkRootProps, CarouselControlProps as ArkControlProps, CarouselPrevTriggerProps as ArkPrevTriggerProps, CarouselNextTriggerProps as ArkNextTriggerProps, CarouselIndicatorGroupProps as ArkIndicatorGroupProps, CarouselIndicatorProps as ArkIndicatorProps, CarouselItemGroupProps as ArkItemGroupProps, CarouselItemProps as ArkItemProps } from '@ark-ui/react/carousel';
 import { CarouselVariantProps } from 'styled-system/recipes';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { CerberusPrimitiveProps } from '../..';
-import { RefAttributes } from 'react';
 export type CarouselRootProps = CarouselVariantProps & ArkRootProps;
-export declare const CarouselRoot: {
-    (internalProps: CerberusPrimitiveProps<Carousel.RootProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselRoot: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.RootProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselControlProps = CarouselVariantProps & ArkControlProps;
-export declare const CarouselControl: {
-    (internalProps: CerberusPrimitiveProps<Carousel.ControlProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselControl: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.ControlProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselPrevTriggerProps = CarouselVariantProps & ArkPrevTriggerProps;
-export declare const CarouselPrevTrigger: {
-    (internalProps: CerberusPrimitiveProps<Carousel.PrevTriggerProps & RefAttributes<HTMLButtonElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselPrevTrigger: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.PrevTriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselNextTriggerProps = CarouselVariantProps & ArkNextTriggerProps;
-export declare const CarouselNextTrigger: {
-    (internalProps: CerberusPrimitiveProps<Carousel.NextTriggerProps & RefAttributes<HTMLButtonElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselNextTrigger: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.NextTriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselIndicatorGroupProps = CarouselVariantProps & ArkIndicatorGroupProps;
-export declare const CarouselIndicatorGroup: {
-    (internalProps: CerberusPrimitiveProps<Carousel.IndicatorGroupProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselIndicatorGroup: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.IndicatorGroupProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselIndicatorProps = CarouselVariantProps & ArkIndicatorProps;
-export declare const CarouselIndicator: {
-    (internalProps: CerberusPrimitiveProps<Carousel.IndicatorProps & RefAttributes<HTMLButtonElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselIndicator: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.IndicatorProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselItemGroupProps = CarouselVariantProps & ArkItemGroupProps;
-export declare const CarouselItemGroup: {
-    (internalProps: CerberusPrimitiveProps<Carousel.ItemGroupProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselItemGroup: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.ItemGroupProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CarouselItemProps = CarouselVariantProps & ArkItemProps;
-export declare const CarouselItem: {
-    (internalProps: CerberusPrimitiveProps<Carousel.ItemProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CarouselItem: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps<Carousel.ItemProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;

package/dist/components/checkbox/primitives.d.cts

@@ -1,57 +1,42 @@
 import { Checkbox, CheckboxControlProps as ArkCheckboxControlProps, CheckboxGroupProps as ArkCheckboxGroupProps, CheckboxIndicatorProps as ArkCheckboxIndicatorProps, CheckboxLabelProps as ArkCheckboxLabelProps, CheckboxRootProps as ArkCheckboxRootProps, CheckboxHiddenInputProps as ArkCheckboxHiddenInputProps } from '@ark-ui/react';
 import { CheckboxVariantProps } from 'styled-system/recipes';
 import { CerberusPrimitiveProps } from '../../system/index';
-import { RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /**
  * Checkbox Root component used to provide the context to all other checkbox
  * primitives.
  * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
  * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
  */
-export declare const CheckboxRoot: {
-    (internalProps: CerberusPrimitiveProps<Checkbox.RootProps & RefAttributes<HTMLLabelElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CheckboxRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Checkbox.RootProps & RefAttributes<HTMLLabelElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CheckboxRootProps = CerberusPrimitiveProps<ArkCheckboxRootProps>;
 /**
  * Checkbox Label component used to display the label of the checkbox.
  * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
  * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
  */
-export declare const CheckboxLabel: {
-    (internalProps: CerberusPrimitiveProps<Checkbox.LabelProps & RefAttributes<HTMLSpanElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CheckboxLabel: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Checkbox.LabelProps & RefAttributes<HTMLSpanElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CheckboxLabelProps = CerberusPrimitiveProps<ArkCheckboxLabelProps & CheckboxVariantProps>;
 /**
  * Checkbox Control component used to display the control of the checkbox.
  * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
  * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
  */
-export declare const CheckboxControl: {
-    (internalProps: CerberusPrimitiveProps<Checkbox.ControlProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CheckboxControl: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Checkbox.ControlProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CheckboxControlProps = CerberusPrimitiveProps<ArkCheckboxControlProps & CheckboxVariantProps>;
 /**
  * Checkbox Indicator component used to display the indicator of the checkbox.
  * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
  * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
  */
-export declare const CheckboxIndicator: {
-    (internalProps: CerberusPrimitiveProps<Checkbox.IndicatorProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CheckboxIndicator: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Checkbox.IndicatorProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CheckboxIndicatorProps = CerberusPrimitiveProps<ArkCheckboxIndicatorProps>;
 /**
  * Checkbox HiddenInput component used to provide the native checkbox input.
  * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
  * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
  */
-export declare const CheckboxHiddenInput: {
-    (props: CerberusPrimitiveProps<Checkbox.HiddenInputProps & RefAttributes<HTMLInputElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CheckboxHiddenInput: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Checkbox.HiddenInputProps & RefAttributes<HTMLInputElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CheckboxHiddenInputProps = CerberusPrimitiveProps<ArkCheckboxHiddenInputProps>;
 /**
  * Checkbox Group is used to group checkboxes together in a consistently styled
@@ -59,8 +44,5 @@ export type CheckboxHiddenInputProps = CerberusPrimitiveProps<ArkCheckboxHiddenI
  * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
  * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
  */
-export declare const CheckboxGroup: {
-    (internalProps: CerberusPrimitiveProps<Checkbox.GroupProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CheckboxGroup: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Checkbox.GroupProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
 export type CheckboxGroupProps = CerberusPrimitiveProps<ArkCheckboxGroupProps>;