@arobo/react 1.0.1 → 1.1.0

package/dist/components/menu/menu.js

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { Menu } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { menuVariants } from '../../packages/styles/src/components/menu/menu.styles.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+function MenuRoot({
+  className,
+  ...props
+}) {
+  const styles = React__default.useMemo(() => menuVariants(), []);
+  return /*#__PURE__*/jsx(Menu, {
+    className: composeTwRenderProps(className, styles),
+    "data-slot": "menu",
+    ...props
+  });
+}
+
+export { MenuRoot };

package/dist/components/menu-item/index.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { MenuItemIndicator, MenuItemRoot, MenuItemSubmenuIndicator } from "./menu-item";
+export declare const MenuItem: (({ children, className, variant, ...props }: import("./menu-item").MenuItemRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, variant, ...props }: import("./menu-item").MenuItemRootProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, type, ...props }: import("./menu-item").MenuItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    SubmenuIndicator: ({ children, className, ...props }: import("./menu-item").MenuItemSubmenuIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export type MenuItem = {
+    Props: ComponentProps<typeof MenuItemRoot>;
+    RootProps: ComponentProps<typeof MenuItemRoot>;
+    IndicatorProps: ComponentProps<typeof MenuItemIndicator>;
+    SubmenuIndicatorProps: ComponentProps<typeof MenuItemSubmenuIndicator>;
+};
+export { MenuItemRoot, MenuItemIndicator, MenuItemSubmenuIndicator };
+export type { MenuItemRootProps, MenuItemRootProps as MenuItemProps, MenuItemIndicatorProps, MenuItemSubmenuIndicatorProps, } from "./menu-item";

package/dist/components/menu-item/index.js

@@ -0,0 +1,12 @@
+import { MenuItemRoot, MenuItemSubmenuIndicator, MenuItemIndicator } from './menu-item.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const MenuItem = Object.assign(MenuItemRoot, {
+  Root: MenuItemRoot,
+  Indicator: MenuItemIndicator,
+  SubmenuIndicator: MenuItemSubmenuIndicator
+});
+
+export { MenuItem, MenuItemIndicator, MenuItemRoot, MenuItemSubmenuIndicator };

package/dist/components/menu-item/menu-item.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithRef } from "react";
+import type { MenuItemRenderProps } from "react-aria-components";
+import React from "react";
+import { MenuItem as MenuItemPrimitive } from "react-aria-components";
+import { type MenuItemVariants } from "@arobo/styles";
+interface MenuItemRootProps extends ComponentPropsWithRef<typeof MenuItemPrimitive>, MenuItemVariants {
+    className?: string;
+}
+declare const MenuItemRoot: ({ children, className, variant, ...props }: MenuItemRootProps) => import("react/jsx-runtime").JSX.Element;
+interface MenuItemIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode | ((props: MenuItemRenderProps) => React.ReactNode);
+    type?: "checkmark" | "dot";
+}
+declare const MenuItemIndicator: ({ children, className, type, ...props }: MenuItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface MenuItemSubmenuIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode;
+}
+declare const MenuItemSubmenuIndicator: ({ children, className, ...props }: MenuItemSubmenuIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+export { MenuItemRoot, MenuItemIndicator, MenuItemSubmenuIndicator };
+export type { MenuItemRootProps, MenuItemIndicatorProps, MenuItemSubmenuIndicatorProps };

package/dist/components/menu-item/menu-item.js

@@ -0,0 +1,122 @@
+import React__default, { createContext, useContext } from 'react';
+import { MenuItem } from 'react-aria-components';
+import { IconChevronRight } from '../icons.js';
+import { jsx } from 'react/jsx-runtime';
+import { menuItemVariants } from '../../packages/styles/src/components/menu-item/menu-item.styles.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+
+const MenuItemContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Menu Item Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const MenuItemRoot = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => menuItemVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(MenuItem, {
+    className: composeTwRenderProps(className, slots.item()),
+    "data-slot": "menu-item",
+    ...props,
+    children: values => /*#__PURE__*/jsx(MenuItemContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Menu Item Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const MenuItemIndicator = ({
+  children,
+  className,
+  type = "checkmark",
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(MenuItemContext);
+  const isSelected = state?.isSelected;
+  const content = typeof children === "function" ? children(state ?? {}) : children ? children : type === "dot" ? /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "menu-item-indicator--dot",
+    fill: "currentColor",
+    fillRule: "evenodd",
+    role: "presentation",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/jsx("path", {
+      clipRule: "evenodd",
+      d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14",
+      fillRule: "evenodd"
+    })
+  }) : /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "menu-item-indicator--checkmark",
+    fill: "none",
+    role: "presentation",
+    stroke: "currentColor",
+    strokeDasharray: 22,
+    strokeDashoffset: isSelected ? 44 : 66,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    viewBox: "0 0 17 18",
+    children: /*#__PURE__*/jsx("polyline", {
+      points: "1 9 7 14 15 4"
+    })
+  });
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-slot": "menu-item-indicator",
+    "data-type": type,
+    "data-visible": isSelected || undefined,
+    ...props,
+    children: content
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Menu Item Submenu Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const MenuItemSubmenuIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(MenuItemContext);
+  const hasSubmenu = state?.hasSubmenu;
+
+  // Only render if hasSubmenu is true
+  if (!hasSubmenu) {
+    return null;
+  }
+  const defaultContent = /*#__PURE__*/jsx(IconChevronRight, {});
+  const content = children ?? defaultContent;
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.submenuIndicator, className),
+    "data-slot": "submenu-indicator",
+    ...props,
+    children: content
+  });
+};
+
+export { MenuItemIndicator, MenuItemRoot, MenuItemSubmenuIndicator };

package/dist/components/menu-section/index.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from "react";
+import { MenuSectionRoot } from "./menu-section";
+export declare const MenuSection: ({ children, className, ...props }: import("./menu-section").MenuSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+export type MenuSection = {
+    Props: ComponentProps<typeof MenuSectionRoot>;
+};
+export { MenuSectionRoot };
+export type { MenuSectionRootProps, MenuSectionRootProps as MenuSectionProps } from "./menu-section";

package/dist/components/menu-section/index.js

@@ -0,0 +1,8 @@
+import { MenuSectionRoot } from './menu-section.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const MenuSection = MenuSectionRoot;
+
+export { MenuSection, MenuSectionRoot };

package/dist/components/menu-section/menu-section.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from "react";
+import { MenuSection as MenuSectionPrimitive } from "react-aria-components";
+interface MenuSectionRootProps extends ComponentPropsWithRef<typeof MenuSectionPrimitive> {
+    className?: string;
+}
+declare const MenuSectionRoot: ({ children, className, ...props }: MenuSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+export { MenuSectionRoot };
+export type { MenuSectionRootProps };

package/dist/components/menu-section/menu-section.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { MenuSection } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { menuSectionVariants } from '../../packages/styles/src/components/menu-section/menu-section.styles.js';
+
+const MenuSectionRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const styles = React__default.useMemo(() => menuSectionVariants({
+    class: typeof className === "string" ? className : undefined
+  }), [className]);
+  return /*#__PURE__*/jsx(MenuSection, {
+    className: styles,
+    ...props,
+    children: children
+  });
+};
+
+export { MenuSectionRoot };

package/dist/components/modal/index.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "react";
+import { ModalBackdrop, ModalBody, ModalCloseTrigger, ModalContainer, ModalDialog, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalRoot, ModalTrigger } from "./modal";
+export declare const Modal: (({ children, state, ...props }: import("./modal").ModalRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, state, ...props }: import("./modal").ModalRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...props }: import("./modal").ModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Backdrop: ({ children, className, isDismissable, variant, ...props }: import("./modal").ModalBackdropProps) => import("react/jsx-runtime").JSX.Element;
+    Container: ({ children, className, placement, scroll, size, ...props }: import("./modal").ModalContainerProps) => import("react/jsx-runtime").JSX.Element;
+    Dialog: ({ children, className, ...props }: import("./modal").ModalDialogProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, className, ...props }: import("./modal").ModalHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Icon: ({ children, className, ...props }: import("./modal").ModalIconProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ children, className, ...props }: import("./modal").ModalHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, className, ...props }: import("./modal").ModalBodyProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className, ...props }: import("./modal").ModalFooterProps) => import("react/jsx-runtime").JSX.Element;
+    CloseTrigger: ({ className, ...rest }: import("./modal").ModalCloseTriggerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Modal = {
+    Props: ComponentProps<typeof ModalRoot>;
+    RootProps: ComponentProps<typeof ModalRoot>;
+    TriggerProps: ComponentProps<typeof ModalTrigger>;
+    BackdropProps: ComponentProps<typeof ModalBackdrop>;
+    ContainerProps: ComponentProps<typeof ModalContainer>;
+    DialogProps: ComponentProps<typeof ModalDialog>;
+    HeaderProps: ComponentProps<typeof ModalHeader>;
+    IconProps: ComponentProps<typeof ModalIcon>;
+    HeadingProps: ComponentProps<typeof ModalHeading>;
+    BodyProps: ComponentProps<typeof ModalBody>;
+    FooterProps: ComponentProps<typeof ModalFooter>;
+    CloseTriggerProps: ComponentProps<typeof ModalCloseTrigger>;
+};
+export { ModalRoot, ModalTrigger, ModalBackdrop, ModalContainer, ModalDialog, ModalHeader, ModalIcon, ModalHeading, ModalBody, ModalFooter, ModalCloseTrigger, };
+export type { ModalRootProps, ModalRootProps as ModalProps, ModalTriggerProps, ModalBackdropProps, ModalContainerProps, ModalDialogProps, ModalHeaderProps, ModalIconProps, ModalHeadingProps, ModalBodyProps, ModalFooterProps, ModalCloseTriggerProps, } from "./modal";

package/dist/components/modal/index.js

@@ -0,0 +1,20 @@
+import { ModalRoot, ModalCloseTrigger, ModalFooter, ModalBody, ModalHeading, ModalIcon, ModalHeader, ModalDialog, ModalContainer, ModalBackdrop, ModalTrigger } from './modal.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Modal = Object.assign(ModalRoot, {
+  Root: ModalRoot,
+  Trigger: ModalTrigger,
+  Backdrop: ModalBackdrop,
+  Container: ModalContainer,
+  Dialog: ModalDialog,
+  Header: ModalHeader,
+  Icon: ModalIcon,
+  Heading: ModalHeading,
+  Body: ModalBody,
+  Footer: ModalFooter,
+  CloseTrigger: ModalCloseTrigger
+});
+
+export { Modal, ModalBackdrop, ModalBody, ModalCloseTrigger, ModalContainer, ModalDialog, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalRoot, ModalTrigger };

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,53 @@
+import type { UseOverlayStateReturn } from "../../hooks/use-overlay-state";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Button as ButtonPrimitive, DialogProps as DialogPrimitiveProps } from "react-aria-components";
+import { Heading as HeadingPrimitive, ModalOverlay as ModalOverlayPrimitive, Modal as ModalPrimitive, DialogTrigger as ModalTriggerPrimitive } from "react-aria-components";
+import type { ModalVariants } from "@arobo/styles";
+type ModalPlacement = "auto" | "top" | "center" | "bottom";
+interface ModalRootProps extends ComponentPropsWithRef<typeof ModalTriggerPrimitive> {
+    state?: UseOverlayStateReturn;
+}
+declare const ModalRoot: ({ children, state, ...props }: ModalRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalTriggerProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ModalTrigger: ({ children, className, ...props }: ModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalBackdropProps extends ComponentPropsWithRef<typeof ModalOverlayPrimitive> {
+    variant?: ModalVariants["variant"];
+    /**
+     * Whether to close the modal when the user interacts outside it.
+     * @default true
+     */
+    isDismissable?: boolean;
+}
+declare const ModalBackdrop: ({ children, className, isDismissable, variant, ...props }: ModalBackdropProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalContainerProps extends Omit<ComponentPropsWithRef<typeof ModalPrimitive>, Exclude<keyof ModalBackdropProps, "children" | "className">> {
+    placement?: ModalPlacement;
+    scroll?: ModalVariants["scroll"];
+    size?: ModalVariants["size"];
+}
+declare const ModalContainer: ({ children, className, placement, scroll, size, ...props }: ModalContainerProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalDialogProps extends DialogPrimitiveProps {
+}
+declare const ModalDialog: ({ children, className, ...props }: ModalDialogProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalHeaderProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ModalHeader: ({ children, className, ...props }: ModalHeaderProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalBodyProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ModalBody: ({ children, className, ...props }: ModalBodyProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalFooterProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ModalFooter: ({ children, className, ...props }: ModalFooterProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalHeadingProps extends ComponentPropsWithRef<typeof HeadingPrimitive> {
+}
+declare const ModalHeading: ({ children, className, ...props }: ModalHeadingProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalIconProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ModalIcon: ({ children, className, ...props }: ModalIconProps) => import("react/jsx-runtime").JSX.Element;
+interface ModalCloseTriggerProps extends ComponentPropsWithRef<typeof ButtonPrimitive> {
+    className?: string;
+    children?: ReactNode;
+}
+declare const ModalCloseTrigger: ({ className, ...rest }: ModalCloseTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export { ModalRoot, ModalTrigger, ModalBackdrop, ModalContainer, ModalDialog, ModalHeader, ModalIcon, ModalHeading, ModalBody, ModalFooter, ModalCloseTrigger, };
+export type { ModalRootProps, ModalTriggerProps, ModalBackdropProps, ModalContainerProps, ModalDialogProps, ModalHeaderProps, ModalIconProps, ModalHeadingProps, ModalBodyProps, ModalFooterProps, ModalCloseTriggerProps, };

package/dist/components/modal/modal.js

@@ -0,0 +1,283 @@
+import { useMemo, createContext, useContext } from 'react';
+import { DialogTrigger, Heading, Dialog, Modal, ModalOverlay, Pressable } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { CloseButton } from '../close-button/index.js';
+import { mergeProps } from '../../utils/merge-props.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { modalVariants } from '../../packages/styles/src/components/modal/modal.styles.js';
+import { SurfaceContext } from '../surface/surface.js';
+
+const ModalContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalRoot = ({
+  children,
+  state,
+  ...props
+}) => {
+  const modalContext = useMemo(() => ({
+    slots: modalVariants(),
+    placement: undefined
+  }), []);
+  const controlledProps = useMemo(() => state ? {
+    isOpen: state.isOpen,
+    onOpenChange: state.setOpen
+  } : {}, [state]);
+  return /*#__PURE__*/jsx(ModalContext, {
+    value: modalContext,
+    children: /*#__PURE__*/jsx(DialogTrigger, {
+      "data-slot": "modal-root",
+      ...props,
+      ...mergeProps(controlledProps),
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx(Pressable, {
+    children: /*#__PURE__*/jsx("div", {
+      className: composeSlotClassName(slots?.trigger, className),
+      "data-slot": "modal-trigger",
+      role: "button",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Backdrop
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalBackdrop = ({
+  children,
+  className,
+  isDismissable = true,
+  variant,
+  ...props
+}) => {
+  const {
+    slots: contextSlots
+  } = useContext(ModalContext);
+  const updatedSlots = useMemo(() => modalVariants({
+    variant
+  }), [variant]);
+  const updatedModalContext = useMemo(() => ({
+    slots: {
+      ...contextSlots,
+      ...updatedSlots
+    }
+  }), [contextSlots, updatedSlots]);
+  return /*#__PURE__*/jsx(ModalOverlay, {
+    className: composeTwRenderProps(className, updatedSlots?.backdrop()),
+    "data-slot": "modal-backdrop",
+    isDismissable: isDismissable,
+    ...props,
+    children: renderProps => /*#__PURE__*/jsxs(ModalContext, {
+      value: updatedModalContext,
+      children: [typeof children === "function" ? children(renderProps) : children, " "]
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Container
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalContainer = ({
+  children,
+  className,
+  placement = "auto",
+  scroll,
+  size,
+  ...props
+}) => {
+  const {
+    slots: contextSlots
+  } = useContext(ModalContext);
+  const updatedSlots = useMemo(() => modalVariants({
+    scroll,
+    size
+  }), [scroll, size]);
+  const updatedModalContext = useMemo(() => ({
+    placement,
+    slots: {
+      ...contextSlots,
+      ...updatedSlots
+    }
+  }), [contextSlots, placement, updatedSlots]);
+  return /*#__PURE__*/jsx(Modal, {
+    className: composeTwRenderProps(className, updatedSlots?.container()),
+    "data-placement": placement,
+    "data-slot": "modal-container",
+    ...props,
+    children: renderProps => /*#__PURE__*/jsx(ModalContext, {
+      value: updatedModalContext,
+      children: typeof children === "function" ? children(renderProps) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Dialog
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalDialog = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    placement,
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx(SurfaceContext, {
+    value: {
+      variant: "default"
+    },
+    children: /*#__PURE__*/jsx(Dialog, {
+      className: composeSlotClassName(slots?.dialog, className),
+      "data-placement": placement,
+      "data-slot": "modal-dialog",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Header
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.header, className),
+    "data-slot": "modal-header",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Body
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalBody = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.body, className),
+    "data-slot": "modal-body",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Footer
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalFooter = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.footer, className),
+    "data-slot": "modal-footer",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Heading
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalHeading = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx(Heading, {
+    className: composeSlotClassName(slots?.heading, className),
+    "data-slot": "modal-heading",
+    slot: "title",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * AlertDialog Icon
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalIcon = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.icon, className),
+    "data-slot": "modal-icon",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Modal Close Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const ModalCloseTrigger = ({
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ModalContext);
+  return /*#__PURE__*/jsx(CloseButton, {
+    className: composeTwRenderProps(className, slots?.closeTrigger()),
+    "data-slot": "modal-close-trigger",
+    slot: "close",
+    ...rest
+  });
+};
+
+export { ModalBackdrop, ModalBody, ModalCloseTrigger, ModalContainer, ModalDialog, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalRoot, ModalTrigger };

package/dist/components/number-field/index.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { NumberFieldDecrementButton, NumberFieldGroup, NumberFieldIncrementButton, NumberFieldInput, NumberFieldRoot } from "./number-field";
+export declare const NumberField: (({ children, className, fullWidth, variant, ...props }: import("./number-field").NumberFieldRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, fullWidth, variant, ...props }: import("./number-field").NumberFieldRootProps) => import("react/jsx-runtime").JSX.Element;
+    Group: ({ children, className, ...props }: import("./number-field").NumberFieldGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ className, ...props }: import("./number-field").NumberFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+    IncrementButton: ({ children, className, ...props }: import("./number-field").NumberFieldIncrementButtonProps) => import("react/jsx-runtime").JSX.Element;
+    DecrementButton: ({ children, className, ...props }: import("./number-field").NumberFieldDecrementButtonProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type NumberField = {
+    Props: ComponentProps<typeof NumberFieldRoot>;
+    RootProps: ComponentProps<typeof NumberFieldRoot>;
+    GroupProps: ComponentProps<typeof NumberFieldGroup>;
+    InputProps: ComponentProps<typeof NumberFieldInput>;
+    IncrementButtonProps: ComponentProps<typeof NumberFieldIncrementButton>;
+    DecrementButtonProps: ComponentProps<typeof NumberFieldDecrementButton>;
+};
+export { NumberFieldDecrementButton, NumberFieldGroup, NumberFieldIncrementButton, NumberFieldInput, NumberFieldRoot, };
+export type { NumberFieldRootProps, NumberFieldRootProps as NumberFieldProps, NumberFieldGroupProps, NumberFieldInputProps, NumberFieldIncrementButtonProps, NumberFieldDecrementButtonProps, } from "./number-field";
+export { numberFieldVariants } from "@arobo/styles";
+export type { NumberFieldVariants } from "@arobo/styles";