@masaraxui/react 1.0.0

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

@@ -0,0 +1,15 @@
+import type { AvatarVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+interface AvatarRootProps extends Omit<ComponentPropsWithRef<typeof AvatarPrimitive.Root>, "color">, AvatarVariants {
+}
+declare const AvatarRoot: ({ children, className, color, size, variant, ...props }: AvatarRootProps) => import("react/jsx-runtime").JSX.Element;
+interface AvatarImageProps extends ComponentPropsWithRef<typeof AvatarPrimitive.Image> {
+}
+declare const AvatarImage: ({ className, crossOrigin, loading, onError, onLoad, sizes, src, srcSet, ...props }: AvatarImageProps) => import("react/jsx-runtime").JSX.Element;
+interface AvatarFallbackProps extends ComponentPropsWithRef<typeof AvatarPrimitive.Fallback> {
+    color?: AvatarVariants["color"];
+}
+declare const AvatarFallback: ({ className, color, ...props }: AvatarFallbackProps) => import("react/jsx-runtime").JSX.Element;
+export { AvatarRoot, AvatarImage, AvatarFallback };
+export type { AvatarRootProps, AvatarImageProps, AvatarFallbackProps };

package/dist/components/avatar/avatar.js

@@ -0,0 +1,93 @@
+"use client";
+import { avatarVariants } from '@masaraxui/styles';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import React__default, { createContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+
+const AvatarContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Avatar Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const AvatarRoot = ({
+  children,
+  className,
+  color,
+  size,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => avatarVariants({
+    color,
+    size,
+    variant
+  }), [color, size, variant]);
+  return /*#__PURE__*/jsx(AvatarContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(AvatarPrimitive.Root, {
+      className: slots.base({
+        className
+      }),
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Avatar Image
+ * -----------------------------------------------------------------------------------------------*/
+
+const AvatarImage = ({
+  className,
+  crossOrigin,
+  loading,
+  onError,
+  onLoad,
+  sizes,
+  src,
+  srcSet,
+  ...props
+}) => {
+  const {
+    slots
+  } = React__default.useContext(AvatarContext);
+  return /*#__PURE__*/jsx(AvatarPrimitive.Image, {
+    className: composeSlotClassName(slots?.image, className),
+    crossOrigin: crossOrigin,
+    loading: loading,
+    sizes: sizes,
+    src: src,
+    srcSet: srcSet,
+    onError: onError,
+    onLoad: onLoad,
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Avatar Fallback
+ * -----------------------------------------------------------------------------------------------*/
+
+const AvatarFallback = ({
+  className,
+  color,
+  ...props
+}) => {
+  const {
+    slots
+  } = React__default.useContext(AvatarContext);
+  return /*#__PURE__*/jsx(AvatarPrimitive.Fallback, {
+    className: composeSlotClassName(slots?.fallback, className, {
+      color
+    }),
+    "data-slot": "avatar-fallback",
+    ...props
+  });
+};
+
+export { AvatarFallback, AvatarImage, AvatarRoot };

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { AvatarFallback, AvatarImage, AvatarRoot } from "./avatar";
+export declare const Avatar: (({ children, className, color, size, variant, ...props }: import("./avatar").AvatarRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, color, size, variant, ...props }: import("./avatar").AvatarRootProps) => import("react/jsx-runtime").JSX.Element;
+    Image: ({ className, crossOrigin, loading, onError, onLoad, sizes, src, srcSet, ...props }: import("./avatar").AvatarImageProps) => import("react/jsx-runtime").JSX.Element;
+    Fallback: ({ className, color, ...props }: import("./avatar").AvatarFallbackProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Avatar = {
+    Props: ComponentProps<typeof AvatarRoot>;
+    RootProps: ComponentProps<typeof AvatarRoot>;
+    ImageProps: ComponentProps<typeof AvatarImage>;
+    FallbackProps: ComponentProps<typeof AvatarFallback>;
+};
+export { AvatarRoot, AvatarImage, AvatarFallback };
+export type { AvatarRootProps, AvatarRootProps as AvatarProps, AvatarImageProps, AvatarFallbackProps, } from "./avatar";
+export { avatarVariants } from "@masaraxui/styles";
+export type { AvatarVariants } from "@masaraxui/styles";

package/dist/components/avatar/index.js

@@ -0,0 +1,14 @@
+"use strict";
+import { AvatarRoot, AvatarFallback, AvatarImage } from './avatar.js';
+export { avatarVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Avatar = Object.assign(AvatarRoot, {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+});
+
+export { Avatar, AvatarFallback, AvatarImage, AvatarRoot };

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,19 @@
+import type { BadgeVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+interface BadgeAnchorProps extends ComponentPropsWithRef<"span"> {
+    className?: string;
+    children: React.ReactNode;
+}
+declare const BadgeAnchor: ({ children, className, ...props }: BadgeAnchorProps) => import("react/jsx-runtime").JSX.Element;
+interface BadgeRootProps extends Omit<ComponentPropsWithRef<"span">, "color">, BadgeVariants {
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const BadgeRoot: ({ children, className, color, placement, size, variant, ...props }: BadgeRootProps) => import("react/jsx-runtime").JSX.Element;
+interface BadgeLabelProps extends ComponentPropsWithRef<"span"> {
+    className?: string;
+}
+declare const BadgeLabel: ({ children, className, ...props }: BadgeLabelProps) => import("react/jsx-runtime").JSX.Element;
+export { BadgeRoot, BadgeLabel, BadgeAnchor };
+export type { BadgeRootProps, BadgeLabelProps, BadgeAnchorProps };

package/dist/components/badge/badge.js

@@ -0,0 +1,87 @@
+"use client";
+import { badgeVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { cx } from 'tailwind-variants';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+
+const BadgeContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Badge Anchor
+ * -----------------------------------------------------------------------------------------------*/
+
+const BadgeAnchor = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx("span", {
+    ...props,
+    className: cx("badge-anchor", className) ?? undefined,
+    "data-slot": "badge-anchor",
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Badge Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const BadgeRoot = ({
+  children,
+  className,
+  color,
+  placement,
+  size,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => badgeVariants({
+    color,
+    placement,
+    size,
+    variant
+  }), [color, placement, size, variant]);
+  const badgeChildren = React__default.useMemo(() => {
+    if (typeof children === "string" || typeof children === "number") {
+      return /*#__PURE__*/jsx(BadgeLabel, {
+        children: children
+      });
+    }
+    return children;
+  }, [children]);
+  return /*#__PURE__*/jsx(BadgeContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx("span", {
+      ...props,
+      className: composeSlotClassName(slots.base, className),
+      "data-slot": "badge",
+      children: badgeChildren
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Badge Label
+ * -----------------------------------------------------------------------------------------------*/
+
+const BadgeLabel = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(BadgeContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.label, className),
+    "data-slot": "badge-label",
+    ...props,
+    children: children
+  });
+};
+
+export { BadgeAnchor, BadgeLabel, BadgeRoot };

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { BadgeAnchor, BadgeLabel, BadgeRoot } from "./badge";
+export declare const Badge: (({ children, className, color, placement, size, variant, ...props }: import("./badge").BadgeRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Anchor: ({ children, className, ...props }: import("./badge").BadgeAnchorProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ children, className, ...props }: import("./badge").BadgeLabelProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, color, placement, size, variant, ...props }: import("./badge").BadgeRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Badge = {
+    AnchorProps: ComponentProps<typeof BadgeAnchor>;
+    LabelProps: ComponentProps<typeof BadgeLabel>;
+    Props: ComponentProps<typeof BadgeRoot>;
+    RootProps: ComponentProps<typeof BadgeRoot>;
+};
+export { BadgeRoot, BadgeLabel, BadgeAnchor };
+export type { BadgeRootProps, BadgeRootProps as BadgeProps, BadgeLabelProps, BadgeAnchorProps, } from "./badge";
+export { badgeVariants } from "@masaraxui/styles";
+export type { BadgeVariants } from "@masaraxui/styles";

package/dist/components/badge/index.js

@@ -0,0 +1,14 @@
+"use strict";
+import { BadgeRoot, BadgeLabel, BadgeAnchor } from './badge.js';
+export { badgeVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Badge = Object.assign(BadgeRoot, {
+  Anchor: BadgeAnchor,
+  Label: BadgeLabel,
+  Root: BadgeRoot
+});
+
+export { Badge, BadgeAnchor, BadgeLabel, BadgeRoot };

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,14 @@
+import type { LinkProps } from "../link";
+import type { BreadcrumbsVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { Breadcrumb as BreadcrumbPrimitive, Breadcrumbs as BreadcrumbsPrimitive } from "react-aria-components";
+interface BreadcrumbsRootProps extends ComponentPropsWithRef<typeof BreadcrumbsPrimitive>, BreadcrumbsVariants {
+    separator?: React.ReactNode;
+}
+declare const BreadcrumbsRoot: ({ children, className, separator, ...props }: BreadcrumbsRootProps) => import("react/jsx-runtime").JSX.Element;
+interface BreadcrumbsItemProps extends ComponentPropsWithRef<typeof BreadcrumbPrimitive> {
+}
+declare const BreadcrumbsItem: ({ children, className, ...props }: BreadcrumbsItemProps & Omit<LinkProps, "className">) => import("react/jsx-runtime").JSX.Element;
+export { BreadcrumbsRoot, BreadcrumbsItem };
+export type { BreadcrumbsRootProps, BreadcrumbsItemProps };

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,84 @@
+"use client";
+import { breadcrumbsVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { Breadcrumbs, Breadcrumb } from 'react-aria-components';
+import { composeSlotClassName, composeTwRenderProps } from '../../utils/compose.js';
+import { IconChevronRight } from '../icons.js';
+import { Link } from '../link/index.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+const BreadcrumbsContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Breadcrumbs Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const BreadcrumbsRoot = ({
+  children,
+  className,
+  separator,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => breadcrumbsVariants({}), []);
+  return /*#__PURE__*/jsx(BreadcrumbsContext.Provider, {
+    value: {
+      slots,
+      separator
+    },
+    children: /*#__PURE__*/jsx(Breadcrumbs, {
+      "data-slot": "breadcrumbs",
+      ...props,
+      className: composeSlotClassName(slots.base, className),
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Breadcrumbs Item
+ * -----------------------------------------------------------------------------------------------*/
+
+const BreadcrumbsItem = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    separator,
+    slots
+  } = useContext(BreadcrumbsContext);
+  const renderSeparator = () => {
+    if (!separator) return /*#__PURE__*/jsx(IconChevronRight, {
+      className: slots?.separator(),
+      "data-slot": "breadcrumbs-separator"
+    });
+    if (/*#__PURE__*/React__default.isValidElement(separator)) {
+      return /*#__PURE__*/React__default.cloneElement(separator, {
+        className: slots?.separator(),
+        "data-slot": "breadcrumbs-separator"
+      });
+    }
+    return separator;
+  };
+  return /*#__PURE__*/jsx(Breadcrumb, {
+    className: composeTwRenderProps(className, slots?.item()),
+    "data-slot": "breadcrumbs-item",
+    ...props,
+    children: ({
+      isCurrent
+    }) => {
+      if (typeof children === "function") {
+        return children({});
+      }
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Link, {
+          className: slots?.link(),
+          ...props,
+          children: children
+        }), !isCurrent && renderSeparator()]
+      });
+    }
+  });
+};
+
+export { BreadcrumbsItem, BreadcrumbsRoot };

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

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { BreadcrumbsItem, BreadcrumbsRoot } from "./breadcrumbs";
+export declare const Breadcrumbs: (({ children, className, separator, ...props }: import("./breadcrumbs").BreadcrumbsRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, separator, ...props }: import("./breadcrumbs").BreadcrumbsRootProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, className, ...props }: import("./breadcrumbs").BreadcrumbsItemProps & Omit<import("..").LinkRootProps, "className">) => import("react/jsx-runtime").JSX.Element;
+};
+export type Breadcrumbs = {
+    Props: ComponentProps<typeof BreadcrumbsRoot>;
+    RootProps: ComponentProps<typeof BreadcrumbsRoot>;
+    ItemProps: ComponentProps<typeof BreadcrumbsItem>;
+};
+export { BreadcrumbsRoot, BreadcrumbsItem };
+export type { BreadcrumbsRootProps, BreadcrumbsRootProps as BreadcrumbsProps, BreadcrumbsItemProps, } from "./breadcrumbs";
+export { breadcrumbsVariants } from "@masaraxui/styles";
+export type { BreadcrumbsVariants } from "@masaraxui/styles";

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { BreadcrumbsRoot, BreadcrumbsItem } from './breadcrumbs.js';
+export { breadcrumbsVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+  Root: BreadcrumbsRoot,
+  Item: BreadcrumbsItem
+});
+
+export { Breadcrumbs, BreadcrumbsItem, BreadcrumbsRoot };

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

@@ -0,0 +1,10 @@
+import type { ButtonVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Button as ButtonPrimitive } from "react-aria-components";
+import { BUTTON_GROUP_CHILD } from "../button-group";
+interface ButtonRootProps extends ComponentPropsWithRef<typeof ButtonPrimitive>, ButtonVariants {
+    [BUTTON_GROUP_CHILD]?: boolean;
+}
+declare const ButtonRoot: ({ children, className, fullWidth, isDisabled, isIconOnly, size, slot, style, variant, [BUTTON_GROUP_CHILD]: isButtonGroupChild, ...rest }: ButtonRootProps) => import("react/jsx-runtime").JSX.Element;
+export { ButtonRoot };
+export type { ButtonRootProps };

package/dist/components/button/button.js

@@ -0,0 +1,49 @@
+"use client";
+import { buttonVariants } from '@masaraxui/styles';
+import { useContext } from 'react';
+import { Button } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { ButtonGroupContext, BUTTON_GROUP_CHILD } from '../button-group/button-group.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+const ButtonRoot = ({
+  children,
+  className,
+  fullWidth,
+  isDisabled,
+  isIconOnly,
+  size,
+  slot,
+  style,
+  variant,
+  [BUTTON_GROUP_CHILD]: isButtonGroupChild,
+  ...rest
+}) => {
+  const buttonGroupContext = useContext(ButtonGroupContext);
+
+  // Only use context if this button is a direct child of ButtonGroup
+  const shouldUseContext = isButtonGroupChild === true;
+
+  // Merge props with precedence: direct props > context props
+  const finalSize = size ?? (shouldUseContext ? buttonGroupContext?.size : undefined);
+  const finalVariant = variant ?? (shouldUseContext ? buttonGroupContext?.variant : undefined);
+  const finalIsDisabled = isDisabled ?? (shouldUseContext ? buttonGroupContext?.isDisabled : undefined);
+  const finalFullWidth = fullWidth ?? (shouldUseContext ? buttonGroupContext?.fullWidth : undefined);
+  const styles = buttonVariants({
+    fullWidth: finalFullWidth,
+    isIconOnly,
+    size: finalSize,
+    variant: finalVariant
+  });
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, styles),
+    "data-slot": "button",
+    isDisabled: finalIsDisabled,
+    slot: slot,
+    style: style,
+    ...rest,
+    children: renderProps => typeof children === "function" ? children(renderProps) : children
+  });
+};
+
+export { ButtonRoot };

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

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { BUTTON_GROUP_CHILD } from "../button-group";
+import { ButtonRoot } from "./button";
+export declare const Button: (({ children, className, fullWidth, isDisabled, isIconOnly, size, slot, style, variant, [BUTTON_GROUP_CHILD]: isButtonGroupChild, ...rest }: import("./button").ButtonRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, fullWidth, isDisabled, isIconOnly, size, slot, style, variant, [BUTTON_GROUP_CHILD]: isButtonGroupChild, ...rest }: import("./button").ButtonRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Button = {
+    Props: ComponentProps<typeof ButtonRoot>;
+    RootProps: ComponentProps<typeof ButtonRoot>;
+};
+export { ButtonRoot };
+export type { ButtonRootProps, ButtonRootProps as ButtonProps } from "./button";
+export { BUTTON_GROUP_CHILD };
+export { buttonVariants } from "@masaraxui/styles";
+export type { ButtonVariants } from "@masaraxui/styles";

package/dist/components/button/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { ButtonRoot } from './button.js';
+export { buttonVariants } from '@masaraxui/styles';
+export { BUTTON_GROUP_CHILD } from '../button-group/button-group.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Button = Object.assign(ButtonRoot, {
+  Root: ButtonRoot
+});
+
+export { Button, ButtonRoot };

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

@@ -0,0 +1,26 @@
+import type { ButtonProps } from "../button";
+import type { ButtonGroupVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { buttonGroupVariants } from "@masaraxui/styles";
+import React from "react";
+import { Group } from "react-aria-components";
+type ButtonGroupContext = {
+    slots?: ReturnType<typeof buttonGroupVariants>;
+    size?: ButtonProps["size"];
+    variant?: ButtonProps["variant"];
+    isDisabled?: ButtonProps["isDisabled"];
+    fullWidth?: ButtonProps["fullWidth"];
+};
+declare const ButtonGroupContext: React.Context<ButtonGroupContext>;
+export declare const BUTTON_GROUP_CHILD = "__button_group_child";
+interface ButtonGroupRootProps extends ComponentPropsWithRef<typeof Group>, Pick<ButtonProps, "size" | "variant">, ButtonGroupVariants {
+    /** The orientation of the button group */
+    orientation?: "horizontal" | "vertical";
+}
+declare const ButtonGroupRoot: ({ children, className, fullWidth, isDisabled, orientation: orientationProp, size, variant, ...rest }: ButtonGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ButtonGroupSeparatorProps extends ComponentPropsWithRef<"span"> {
+    className?: string;
+}
+declare const ButtonGroupSeparator: ({ className, ...props }: ButtonGroupSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export { ButtonGroupRoot, ButtonGroupSeparator, ButtonGroupContext };
+export type { ButtonGroupRootProps, ButtonGroupSeparatorProps };

package/dist/components/button-group/button-group.js

@@ -0,0 +1,82 @@
+"use client";
+import { buttonGroupVariants } from '@masaraxui/styles';
+import React__default, { Children, isValidElement, createContext, useContext } from 'react';
+import { useSlottedContext, ToggleButtonGroupContext, Group } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+
+const ButtonGroupContext = /*#__PURE__*/createContext({});
+
+// Property name to mark direct children of ButtonGroup
+const BUTTON_GROUP_CHILD = "__button_group_child";
+
+/* -------------------------------------------------------------------------------------------------
+ * ButtonGroup Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ButtonGroupRoot = ({
+  children,
+  className,
+  fullWidth,
+  isDisabled,
+  orientation: orientationProp,
+  size,
+  variant,
+  ...rest
+}) => {
+  const racContext = useSlottedContext(ToggleButtonGroupContext);
+  const orientation = orientationProp ?? racContext?.orientation ?? "horizontal";
+  const slots = React__default.useMemo(() => buttonGroupVariants({
+    fullWidth,
+    orientation
+  }), [fullWidth, orientation]);
+
+  // Wrap only direct children with context provider
+  const wrappedChildren = Children.map(children, child => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return child;
+    }
+
+    // Clone the child and add the special prop
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      [BUTTON_GROUP_CHILD]: true
+    });
+  });
+  return /*#__PURE__*/jsx(ButtonGroupContext, {
+    value: {
+      slots,
+      size,
+      variant,
+      isDisabled,
+      fullWidth
+    },
+    children: /*#__PURE__*/jsx(Group, {
+      className: composeTwRenderProps(className, slots.base()),
+      "data-slot": "button-group",
+      isDisabled: isDisabled,
+      ...rest,
+      children: wrappedChildren
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ButtonGroup Separator
+ * -----------------------------------------------------------------------------------------------*/
+
+const ButtonGroupSeparator = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ButtonGroupContext);
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.separator, className),
+    "data-slot": "button-group-separator",
+    ...props
+  });
+};
+
+export { BUTTON_GROUP_CHILD, ButtonGroupContext, ButtonGroupRoot, ButtonGroupSeparator };

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps } from "react";
+import { ButtonGroupRoot, ButtonGroupSeparator } from "./button-group";
+export declare const ButtonGroup: (({ children, className, fullWidth, isDisabled, orientation: orientationProp, size, variant, ...rest }: import("./button-group").ButtonGroupRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, fullWidth, isDisabled, orientation: orientationProp, size, variant, ...rest }: import("./button-group").ButtonGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ className, ...props }: import("./button-group").ButtonGroupSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ButtonGroup = {
+    Props: ComponentProps<typeof ButtonGroupRoot>;
+    RootProps: ComponentProps<typeof ButtonGroupRoot>;
+    SeparatorProps: ComponentProps<typeof ButtonGroupSeparator>;
+};
+export { ButtonGroupRoot, ButtonGroupSeparator };
+export type { ButtonGroupRootProps, ButtonGroupRootProps as ButtonGroupProps, ButtonGroupSeparatorProps, } from "./button-group";
+export { ButtonGroupContext, BUTTON_GROUP_CHILD } from "./button-group";
+export { buttonGroupVariants } from "@masaraxui/styles";
+export type { ButtonGroupVariants } from "@masaraxui/styles";

package/dist/components/button-group/index.js

@@ -0,0 +1,14 @@
+"use strict";
+import { ButtonGroupRoot, ButtonGroupSeparator } from './button-group.js';
+export { BUTTON_GROUP_CHILD, ButtonGroupContext } from './button-group.js';
+export { buttonGroupVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ButtonGroup = Object.assign(ButtonGroupRoot, {
+  Root: ButtonGroupRoot,
+  Separator: ButtonGroupSeparator
+});
+
+export { ButtonGroup, ButtonGroupRoot, ButtonGroupSeparator };