@masaraxui/react 1.0.0

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

@@ -0,0 +1,33 @@
+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, onClick, 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";
+export { modalVariants } from "@masaraxui/styles";
+export type { ModalVariants } from "@masaraxui/styles";

package/dist/components/modal/index.js

@@ -0,0 +1,22 @@
+"use strict";
+import { ModalRoot, ModalCloseTrigger, ModalFooter, ModalBody, ModalHeading, ModalIcon, ModalHeader, ModalDialog, ModalContainer, ModalBackdrop, ModalTrigger } from './modal.js';
+export { modalVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * 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 { ModalVariants } from "@masaraxui/styles";
+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";
+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, onClick, 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,288 @@
+"use client";
+import { modalVariants } from '@masaraxui/styles';
+import { mergeProps } from '@react-aria/utils';
+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 { jsx, jsxs } from 'react/jsx-runtime';
+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",
+      ...mergeProps(props, 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,
+  onClick,
+  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,
+    onClick: e => {
+      e.stopPropagation();
+      onClick?.(e);
+    },
+    ...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 "@masaraxui/styles";
+export type { NumberFieldVariants } from "@masaraxui/styles";

package/dist/components/number-field/index.js

@@ -0,0 +1,16 @@
+"use strict";
+import { NumberFieldRoot, NumberFieldDecrementButton, NumberFieldIncrementButton, NumberFieldInput, NumberFieldGroup } from './number-field.js';
+export { numberFieldVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const NumberField = Object.assign(NumberFieldRoot, {
+  Root: NumberFieldRoot,
+  Group: NumberFieldGroup,
+  Input: NumberFieldInput,
+  IncrementButton: NumberFieldIncrementButton,
+  DecrementButton: NumberFieldDecrementButton
+});
+
+export { NumberField, NumberFieldDecrementButton, NumberFieldGroup, NumberFieldIncrementButton, NumberFieldInput, NumberFieldRoot };

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

@@ -0,0 +1,20 @@
+import type { NumberFieldVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Button as ButtonPrimitive, Group as GroupPrimitive, Input as InputPrimitive, NumberField as NumberFieldPrimitive } from "react-aria-components";
+interface NumberFieldRootProps extends ComponentPropsWithRef<typeof NumberFieldPrimitive>, NumberFieldVariants {
+}
+declare const NumberFieldRoot: ({ children, className, fullWidth, variant, ...props }: NumberFieldRootProps) => import("react/jsx-runtime").JSX.Element;
+interface NumberFieldGroupProps extends ComponentPropsWithRef<typeof GroupPrimitive> {
+}
+declare const NumberFieldGroup: ({ children, className, ...props }: NumberFieldGroupProps) => import("react/jsx-runtime").JSX.Element;
+interface NumberFieldInputProps extends ComponentPropsWithRef<typeof InputPrimitive> {
+}
+declare const NumberFieldInput: ({ className, ...props }: NumberFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+interface NumberFieldIncrementButtonProps extends ComponentPropsWithRef<typeof ButtonPrimitive> {
+}
+declare const NumberFieldIncrementButton: ({ children, className, ...props }: NumberFieldIncrementButtonProps) => import("react/jsx-runtime").JSX.Element;
+interface NumberFieldDecrementButtonProps extends ComponentPropsWithRef<typeof ButtonPrimitive> {
+}
+declare const NumberFieldDecrementButton: ({ children, className, ...props }: NumberFieldDecrementButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { NumberFieldRoot, NumberFieldGroup, NumberFieldInput, NumberFieldIncrementButton, NumberFieldDecrementButton, };
+export type { NumberFieldRootProps, NumberFieldGroupProps, NumberFieldInputProps, NumberFieldIncrementButtonProps, NumberFieldDecrementButtonProps, };

package/dist/components/number-field/number-field.js

@@ -0,0 +1,127 @@
+"use client";
+import { numberFieldVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { NumberField, Button, Input, Group } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { IconMinus, IconPlus } from '../icons.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const NumberFieldContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * NumberField Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const NumberFieldRoot = ({
+  children,
+  className,
+  fullWidth,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => numberFieldVariants({
+    fullWidth,
+    variant
+  }), [fullWidth, variant]);
+  return /*#__PURE__*/jsx(NumberFieldContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(NumberField, {
+      "data-slot": "number-field",
+      ...props,
+      className: composeTwRenderProps(className, slots?.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * NumberField Group
+ * -----------------------------------------------------------------------------------------------*/
+
+const NumberFieldGroup = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(NumberFieldContext);
+  return /*#__PURE__*/jsx(Group, {
+    className: composeTwRenderProps(className, slots?.group()),
+    "data-slot": "number-field-group",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * NumberField Input
+ * -----------------------------------------------------------------------------------------------*/
+
+const NumberFieldInput = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(NumberFieldContext);
+  return /*#__PURE__*/jsx(Input, {
+    className: composeTwRenderProps(className, slots?.input()),
+    "data-slot": "number-field-input",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * NumberField Increment Button
+ * -----------------------------------------------------------------------------------------------*/
+
+const NumberFieldIncrementButton = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(NumberFieldContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.incrementButton()),
+    "data-slot": "number-field-increment-button",
+    slot: "increment",
+    ...props,
+    children: children && /*#__PURE__*/React__default.isValidElement(children) ? children : /*#__PURE__*/jsx(IconPlus, {
+      "data-slot": "number-field-increment-button-icon"
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * NumberField Decrement Button
+ * -----------------------------------------------------------------------------------------------*/
+
+const NumberFieldDecrementButton = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(NumberFieldContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.decrementButton()),
+    "data-slot": "number-field-decrement-button",
+    slot: "decrement",
+    ...props,
+    children: children && /*#__PURE__*/React__default.isValidElement(children) ? children : /*#__PURE__*/jsx(IconMinus, {
+      "data-slot": "number-field-decrement-button-icon"
+    })
+  });
+};
+
+export { NumberFieldDecrementButton, NumberFieldGroup, NumberFieldIncrementButton, NumberFieldInput, NumberFieldRoot };

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

@@ -0,0 +1,64 @@
+import type { ComponentProps } from "react";
+import { PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextIcon, PaginationPrevious, PaginationPreviousIcon, PaginationRoot, PaginationSummary } from "./pagination";
+export declare const Pagination: {
+    ({ children, className, size, ...props }: import("./pagination").PaginationRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Content: {
+        ({ children, className, ...props }: import("./pagination").PaginationContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Ellipsis: {
+        ({ className, ...props }: import("./pagination").PaginationEllipsisProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ children, className, ...props }: import("./pagination").PaginationItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Link: {
+        ({ children, className, isActive, ...props }: import("./pagination").PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Next: {
+        ({ children, className, ...props }: import("./pagination").PaginationNextProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    NextIcon: {
+        ({ children, className, ...props }: import("./pagination").PaginationNextIconProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Previous: {
+        ({ children, className, ...props }: import("./pagination").PaginationPreviousProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    PreviousIcon: {
+        ({ children, className, ...props }: import("./pagination").PaginationPreviousIconProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Root: {
+        ({ children, className, size, ...props }: import("./pagination").PaginationRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Summary: {
+        ({ children, className, ...props }: import("./pagination").PaginationSummaryProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type Pagination = {
+    ContentProps: ComponentProps<typeof PaginationContent>;
+    EllipsisProps: ComponentProps<typeof PaginationEllipsis>;
+    ItemProps: ComponentProps<typeof PaginationItem>;
+    LinkProps: ComponentProps<typeof PaginationLink>;
+    NextIconProps: ComponentProps<typeof PaginationNextIcon>;
+    NextProps: ComponentProps<typeof PaginationNext>;
+    PreviousIconProps: ComponentProps<typeof PaginationPreviousIcon>;
+    PreviousProps: ComponentProps<typeof PaginationPrevious>;
+    Props: ComponentProps<typeof PaginationRoot>;
+    RootProps: ComponentProps<typeof PaginationRoot>;
+    SummaryProps: ComponentProps<typeof PaginationSummary>;
+};
+export { PaginationRoot, PaginationSummary, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationPreviousIcon, PaginationNext, PaginationNextIcon, PaginationEllipsis, };
+export type { PaginationRootProps, PaginationRootProps as PaginationProps, PaginationSummaryProps, PaginationContentProps, PaginationItemProps, PaginationLinkProps, PaginationPreviousProps, PaginationPreviousIconProps, PaginationNextProps, PaginationNextIconProps, PaginationEllipsisProps, } from "./pagination";
+export { paginationVariants } from "@masaraxui/styles";
+export type { PaginationVariants } from "@masaraxui/styles";

package/dist/components/pagination/index.js

@@ -0,0 +1,21 @@
+"use strict";
+import { PaginationRoot, PaginationSummary, PaginationPreviousIcon, PaginationPrevious, PaginationNextIcon, PaginationNext, PaginationLink, PaginationItem, PaginationEllipsis, PaginationContent } from './pagination.js';
+export { paginationVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Pagination = Object.assign(PaginationRoot, {
+  Content: PaginationContent,
+  Ellipsis: PaginationEllipsis,
+  Item: PaginationItem,
+  Link: PaginationLink,
+  Next: PaginationNext,
+  NextIcon: PaginationNextIcon,
+  Previous: PaginationPrevious,
+  PreviousIcon: PaginationPreviousIcon,
+  Root: PaginationRoot,
+  Summary: PaginationSummary
+});
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextIcon, PaginationPrevious, PaginationPreviousIcon, PaginationRoot, PaginationSummary };