@masaraxui/react 1.0.0

package/dist/components/color-slider/color-slider.js

@@ -0,0 +1,205 @@
+"use client";
+import { colorSliderVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { ColorSlider, ColorThumb, SliderTrack, SliderOutput } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorSlider Validation Utilities
+ * -----------------------------------------------------------------------------------------------*/
+
+/** Maps channels to their required color space (for channels that are color-space specific) */
+const CHANNEL_TO_REQUIRED_COLORSPACE = {
+  red: "rgb",
+  green: "rgb",
+  blue: "rgb",
+  lightness: "hsl",
+  brightness: "hsb"
+};
+
+/** Channels that only work with HSL or HSB (not RGB) */
+const HSL_HSB_ONLY_CHANNELS = new Set(["hue", "saturation"]);
+
+/**
+ * Validates and returns a valid colorSpace for the given channel.
+ * If an invalid combination is detected, logs a warning and returns the correct colorSpace.
+ */
+function getValidColorSpace(channel, colorSpace) {
+  // Check if channel requires a specific color space (e.g., "red" requires "rgb")
+  const requiredSpace = CHANNEL_TO_REQUIRED_COLORSPACE[channel];
+  if (requiredSpace && colorSpace && colorSpace !== requiredSpace) {
+    // eslint-disable-next-line no-console
+    console.warn(`[MasaraxUI ColorSlider] Invalid combination: channel="${channel}" requires colorSpace="${requiredSpace}", ` + `but received colorSpace="${colorSpace}". Auto-correcting to "${requiredSpace}".`);
+    return requiredSpace;
+  }
+
+  // Check if channel is HSL/HSB only (hue, saturation) but RGB was specified
+  if (HSL_HSB_ONLY_CHANNELS.has(channel) && colorSpace === "rgb") {
+    // eslint-disable-next-line no-console
+    console.warn(`[MasaraxUI ColorSlider] Invalid combination: channel="${channel}" is not available in RGB color space. ` + `Use colorSpace="hsl" or colorSpace="hsb" instead. Auto-correcting to "hsl".`);
+    return "hsl";
+  }
+  return colorSpace;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorSlider Context
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorSliderContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorSlider Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorSliderRoot = ({
+  channel,
+  children,
+  className,
+  colorSpace,
+  orientation = "horizontal",
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => colorSliderVariants({}), []);
+
+  // Validate and auto-correct invalid channel/colorSpace combinations
+  const validColorSpace = getValidColorSpace(channel, colorSpace);
+  return /*#__PURE__*/jsx(ColorSlider, {
+    channel: channel,
+    colorSpace: validColorSpace,
+    "data-slot": "color-slider",
+    orientation: orientation,
+    ...props,
+    className: composeTwRenderProps(className, slots.base()),
+    children: values => /*#__PURE__*/jsx(ColorSliderContext, {
+      value: {
+        channel,
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorSlider Output
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorSliderOutput = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorSliderContext);
+  return /*#__PURE__*/jsx(SliderOutput, {
+    className: composeTwRenderProps(className, slots?.output()),
+    "data-slot": "color-slider-output",
+    ...props,
+    children: children ? values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    }) : ({
+      state
+    }) => state.getThumbValueLabel(0)
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorSlider Track
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorSliderTrack = ({
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const {
+    channel,
+    slots,
+    state
+  } = useContext(ColorSliderContext);
+  // Calculate start and end colors for the gradient edge caps
+  const displayColor = state?.state?.getDisplayColor();
+  const edgeColors = React__default.useMemo(() => {
+    // Access color through state.state.value (ColorSliderState.value)
+    if (!displayColor || !channel) {
+      return {
+        end: "transparent",
+        start: "transparent"
+      };
+    }
+    const range = displayColor.getChannelRange(channel);
+
+    // Get colors at min and max values of the channel
+    const startColor = displayColor.withChannelValue(channel, range.minValue);
+    const endColor = displayColor.withChannelValue(channel, range.maxValue);
+    return {
+      end: endColor.toString("css"),
+      start: startColor.toString("css")
+    };
+  }, [channel, displayColor]);
+  return /*#__PURE__*/jsx(SliderTrack, {
+    className: composeTwRenderProps(className, slots?.track()),
+    "data-slot": "color-slider-track",
+    style: ({
+      defaultStyle,
+      ...rest
+    }) => ({
+      // Add transparency checkerboard pattern for alpha channel
+      background: `${defaultStyle.background}, repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px`,
+      // Pass edge colors as CSS custom properties for ::before and ::after
+      "--track-end-color": edgeColors.end,
+      "--track-start-color": edgeColors.start,
+      ...(typeof style === "function" ? style({
+        defaultStyle,
+        ...rest
+      }) : style)
+    }),
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorSlider Thumb
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorSliderThumb = ({
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorSliderContext);
+  return /*#__PURE__*/jsx(ColorThumb, {
+    className: composeTwRenderProps(className, slots?.thumb()),
+    "data-slot": "color-slider-thumb",
+    style: ({
+      defaultStyle,
+      isDisabled,
+      ...rest
+    }) => ({
+      ...defaultStyle,
+      backgroundColor: isDisabled ? undefined : defaultStyle.backgroundColor,
+      ...(typeof style === "function" ? style({
+        defaultStyle,
+        isDisabled,
+        ...rest
+      }) : style)
+    }),
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+export { ColorSliderOutput, ColorSliderRoot, ColorSliderThumb, ColorSliderTrack };

package/dist/components/color-slider/index.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { ColorSliderOutput, ColorSliderRoot, ColorSliderThumb, ColorSliderTrack } from "./color-slider";
+export declare const ColorSlider: (({ channel, children, className, colorSpace, orientation, ...props }: import("./color-slider").ColorSliderRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ channel, children, className, colorSpace, orientation, ...props }: import("./color-slider").ColorSliderRootProps) => import("react/jsx-runtime").JSX.Element;
+    Output: ({ children, className, ...props }: import("./color-slider").ColorSliderOutputProps) => import("react/jsx-runtime").JSX.Element;
+    Track: ({ children, className, style, ...props }: import("./color-slider").ColorSliderTrackProps) => import("react/jsx-runtime").JSX.Element;
+    Thumb: ({ children, className, style, ...props }: import("./color-slider").ColorSliderThumbProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorSlider = {
+    Props: ComponentProps<typeof ColorSliderRoot>;
+    RootProps: ComponentProps<typeof ColorSliderRoot>;
+    OutputProps: ComponentProps<typeof ColorSliderOutput>;
+    TrackProps: ComponentProps<typeof ColorSliderTrack>;
+    ThumbProps: ComponentProps<typeof ColorSliderThumb>;
+};
+export { ColorSliderRoot, ColorSliderOutput, ColorSliderTrack, ColorSliderThumb };
+export type { ColorSliderRootProps, ColorSliderRootProps as ColorSliderProps, ColorSliderOutputProps, ColorSliderTrackProps, ColorSliderThumbProps, HSLChannel, HSBChannel, RGBChannel, HSLHSBSharedChannel, AlphaChannel, ColorSliderChannelProps, } from "./color-slider";
+export { colorSliderVariants } from "@masaraxui/styles";
+export type { ColorSliderVariants } from "@masaraxui/styles";

package/dist/components/color-slider/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { ColorSliderRoot, ColorSliderThumb, ColorSliderTrack, ColorSliderOutput } from './color-slider.js';
+export { colorSliderVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ColorSlider = Object.assign(ColorSliderRoot, {
+  Root: ColorSliderRoot,
+  Output: ColorSliderOutput,
+  Track: ColorSliderTrack,
+  Thumb: ColorSliderThumb
+});
+
+export { ColorSlider, ColorSliderOutput, ColorSliderRoot, ColorSliderThumb, ColorSliderTrack };

package/dist/components/color-swatch/color-swatch.d.ts

@@ -0,0 +1,8 @@
+import type { ColorSwatchVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { ColorSwatch as ColorSwatchPrimitive } from "react-aria-components";
+interface ColorSwatchRootProps extends ComponentPropsWithRef<typeof ColorSwatchPrimitive>, ColorSwatchVariants {
+}
+declare const ColorSwatchRoot: ({ className, shape, size, style, ...props }: ColorSwatchRootProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorSwatchRoot };
+export type { ColorSwatchRootProps };

package/dist/components/color-swatch/color-swatch.js

@@ -0,0 +1,31 @@
+"use client";
+import { colorSwatchVariants } from '@masaraxui/styles';
+import { ColorSwatch } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ColorSwatchRoot = ({
+  className,
+  shape,
+  size,
+  style,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx(ColorSwatch, {
+    ...props,
+    className: composeTwRenderProps(className, colorSwatchVariants({
+      shape,
+      size
+    })),
+    "data-slot": "color-swatch",
+    style: renderProps => {
+      const userStyle = typeof style === "function" ? style(renderProps) : style;
+      return {
+        "--color-swatch-current": renderProps.color.toString("css"),
+        ...userStyle
+      };
+    }
+  });
+};
+
+export { ColorSwatchRoot };

package/dist/components/color-swatch/index.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { ColorSwatchRoot } from "./color-swatch";
+export declare const ColorSwatch: (({ className, shape, size, style, ...props }: import("./color-swatch").ColorSwatchRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ className, shape, size, style, ...props }: import("./color-swatch").ColorSwatchRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorSwatch = {
+    Props: ComponentProps<typeof ColorSwatchRoot>;
+    RootProps: ComponentProps<typeof ColorSwatchRoot>;
+};
+export { ColorSwatchRoot };
+export type { ColorSwatchRootProps, ColorSwatchRootProps as ColorSwatchProps } from "./color-swatch";
+export { colorSwatchVariants } from "@masaraxui/styles";
+export type { ColorSwatchVariants } from "@masaraxui/styles";

package/dist/components/color-swatch/index.js

@@ -0,0 +1,12 @@
+"use strict";
+import { ColorSwatchRoot } from './color-swatch.js';
+export { colorSwatchVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ColorSwatch = Object.assign(ColorSwatchRoot, {
+  Root: ColorSwatchRoot
+});
+
+export { ColorSwatch, ColorSwatchRoot };

package/dist/components/color-swatch-picker/color-swatch-picker.d.ts

@@ -0,0 +1,20 @@
+import type { ColorSwatchPickerVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { ColorSwatchPickerItemRenderProps } from "react-aria-components";
+import React from "react";
+import { ColorSwatchPickerItem as ColorSwatchPickerItemPrimitive, ColorSwatchPicker as ColorSwatchPickerPrimitive, ColorSwatch as ColorSwatchPrimitive } from "react-aria-components";
+interface ColorSwatchPickerRootProps extends ComponentPropsWithRef<typeof ColorSwatchPickerPrimitive>, ColorSwatchPickerVariants {
+}
+declare const ColorSwatchPickerRoot: ({ children, className, layout, size, variant, ...props }: ColorSwatchPickerRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorSwatchPickerItemProps extends ComponentPropsWithRef<typeof ColorSwatchPickerItemPrimitive> {
+}
+declare const ColorSwatchPickerItem: ({ children, className, ...props }: ColorSwatchPickerItemProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorSwatchPickerSwatchProps extends ComponentPropsWithRef<typeof ColorSwatchPrimitive> {
+}
+declare const ColorSwatchPickerSwatch: ({ className, ...props }: ColorSwatchPickerSwatchProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorSwatchPickerIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode | ((props: ColorSwatchPickerItemRenderProps) => React.ReactNode);
+}
+declare const ColorSwatchPickerIndicator: ({ children, className, ...props }: ColorSwatchPickerIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorSwatchPickerRoot, ColorSwatchPickerItem, ColorSwatchPickerSwatch, ColorSwatchPickerIndicator, };
+export type { ColorSwatchPickerRootProps, ColorSwatchPickerItemProps, ColorSwatchPickerSwatchProps, ColorSwatchPickerIndicatorProps, };

package/dist/components/color-swatch-picker/color-swatch-picker.js

@@ -0,0 +1,149 @@
+"use client";
+import { colorSwatchPickerVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { ColorSwatchPicker, ColorSwatch, ColorSwatchPickerItem as ColorSwatchPickerItem$1 } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ColorSwatchPickerContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+| * ColorSwatchPickerItem Context
+| * -----------------------------------------------------------------------------------------------*/
+
+const ColorSwatchPickerItemContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+| * ColorSwatchPicker Root
+| * -----------------------------------------------------------------------------------------------*/
+
+const ColorSwatchPickerRoot = ({
+  children,
+  className,
+  layout,
+  size,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => colorSwatchPickerVariants({
+    layout,
+    size,
+    variant
+  }), [layout, size, variant]);
+  return /*#__PURE__*/jsx(ColorSwatchPickerContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(ColorSwatchPicker, {
+      "data-slot": "color-swatch-picker",
+      ...props,
+      className: composeTwRenderProps(className, slots.base()),
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+| * ColorSwatchPicker Item
+| * -----------------------------------------------------------------------------------------------*/
+
+const ColorSwatchPickerItem = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorSwatchPickerContext);
+  return /*#__PURE__*/jsx(ColorSwatchPickerItem$1, {
+    "data-slot": "color-swatch-picker-item",
+    ...props,
+    className: composeTwRenderProps(className, slots?.item()),
+    style: renderProps => ({
+      "--color-swatch-current": renderProps.color.toString("css")
+    }),
+    children: renderProps => /*#__PURE__*/jsx(ColorSwatchPickerItemContext, {
+      value: {
+        state: renderProps
+      },
+      children: typeof children === "function" ? children(renderProps) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+| * ColorSwatchPicker Swatch
+| * -----------------------------------------------------------------------------------------------*/
+
+const ColorSwatchPickerSwatch = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorSwatchPickerContext);
+  return /*#__PURE__*/jsx(ColorSwatch, {
+    className: composeTwRenderProps(className, slots?.swatch()),
+    "data-slot": "color-swatch-picker-swatch",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+| * ColorSwatchPicker Indicator
+| * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Calculate relative luminance of a color
+ * Uses the formula: L = 0.2126 * R + 0.7152 * G + 0.0722 * B
+ * Returns a value between 0 (black) and 1 (white)
+ */
+function getColorLuminance(color) {
+  // Get RGB values (0-255 range)
+  const r = color.getChannelValue("red");
+  const g = color.getChannelValue("green");
+  const b = color.getChannelValue("blue");
+
+  // Normalize to 0-1 and calculate luminance
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+}
+const ColorSwatchPickerIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorSwatchPickerContext);
+  const {
+    state
+  } = useContext(ColorSwatchPickerItemContext);
+
+  // Determine if the background color is light (luminance > 0.5)
+  // Use white checkmark on dark backgrounds, black on light backgrounds
+  const isLightColor = state?.color ? getColorLuminance(state.color) > 0.5 : false;
+  const content = typeof children === "function" ? children(state ?? {}) : children ? children : /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "color-swatch-picker-checkmark",
+    fill: "none",
+    role: "presentation",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.5,
+    viewBox: "0 0 12 12",
+    children: /*#__PURE__*/jsx("polyline", {
+      points: "2.5 6 5 8.5 9.5 3"
+    })
+  });
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-light-color": isLightColor ? "true" : undefined,
+    "data-slot": "color-swatch-picker-indicator",
+    ...props,
+    children: content
+  });
+};
+
+export { ColorSwatchPickerIndicator, ColorSwatchPickerItem, ColorSwatchPickerRoot, ColorSwatchPickerSwatch };

package/dist/components/color-swatch-picker/index.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { ColorSwatchPickerIndicator, ColorSwatchPickerItem, ColorSwatchPickerRoot, ColorSwatchPickerSwatch } from "./color-swatch-picker";
+export declare const ColorSwatchPicker: (({ children, className, layout, size, variant, ...props }: import("./color-swatch-picker").ColorSwatchPickerRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, layout, size, variant, ...props }: import("./color-swatch-picker").ColorSwatchPickerRootProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, className, ...props }: import("./color-swatch-picker").ColorSwatchPickerItemProps) => import("react/jsx-runtime").JSX.Element;
+    Swatch: ({ className, ...props }: import("./color-swatch-picker").ColorSwatchPickerSwatchProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...props }: import("./color-swatch-picker").ColorSwatchPickerIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorSwatchPicker = {
+    Props: ComponentProps<typeof ColorSwatchPickerRoot>;
+    RootProps: ComponentProps<typeof ColorSwatchPickerRoot>;
+    ItemProps: ComponentProps<typeof ColorSwatchPickerItem>;
+    SwatchProps: ComponentProps<typeof ColorSwatchPickerSwatch>;
+    IndicatorProps: ComponentProps<typeof ColorSwatchPickerIndicator>;
+};
+export { ColorSwatchPickerRoot, ColorSwatchPickerItem, ColorSwatchPickerSwatch, ColorSwatchPickerIndicator, };
+export type { ColorSwatchPickerRootProps, ColorSwatchPickerRootProps as ColorSwatchPickerProps, ColorSwatchPickerItemProps, ColorSwatchPickerSwatchProps, ColorSwatchPickerIndicatorProps, } from "./color-swatch-picker";
+export { colorSwatchPickerVariants } from "@masaraxui/styles";
+export type { ColorSwatchPickerVariants } from "@masaraxui/styles";

package/dist/components/color-swatch-picker/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { ColorSwatchPickerRoot, ColorSwatchPickerIndicator, ColorSwatchPickerSwatch, ColorSwatchPickerItem } from './color-swatch-picker.js';
+export { colorSwatchPickerVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+| * Compound Component
+| * -----------------------------------------------------------------------------------------------*/
+const ColorSwatchPicker = Object.assign(ColorSwatchPickerRoot, {
+  Root: ColorSwatchPickerRoot,
+  Item: ColorSwatchPickerItem,
+  Swatch: ColorSwatchPickerSwatch,
+  Indicator: ColorSwatchPickerIndicator
+});
+
+export { ColorSwatchPicker, ColorSwatchPickerIndicator, ColorSwatchPickerItem, ColorSwatchPickerRoot, ColorSwatchPickerSwatch };

package/dist/components/combo-box/combo-box.d.ts

@@ -0,0 +1,34 @@
+import type { ComboBoxVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { ButtonProps } from "react-aria-components";
+import { comboBoxVariants } from "@masaraxui/styles";
+import React from "react";
+import { ComboBox as ComboBoxPrimitive, Popover as PopoverPrimitive } from "react-aria-components";
+type ComboBoxContext = {
+    slots?: ReturnType<typeof comboBoxVariants>;
+    variant?: "primary" | "secondary";
+};
+declare const ComboBoxContext: React.Context<ComboBoxContext>;
+interface ComboBoxRootProps<T extends object> extends ComponentPropsWithRef<typeof ComboBoxPrimitive<T>>, ComboBoxVariants {
+    items?: Iterable<T>;
+    /**
+     * The variant of the combo box.
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary";
+}
+declare const ComboBoxRoot: <T extends object = object>({ children, className, fullWidth, menuTrigger, variant, ...props }: ComboBoxRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+interface ComboBoxInputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ComboBoxInputGroup: ({ children, className, ...props }: ComboBoxInputGroupProps) => import("react/jsx-runtime").JSX.Element;
+interface ComboBoxTriggerProps extends ButtonProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const ComboBoxTrigger: ({ children, className, ...rest }: ComboBoxTriggerProps) => import("react/jsx-runtime").JSX.Element;
+interface ComboBoxPopoverProps extends Omit<ComponentPropsWithRef<typeof PopoverPrimitive>, "children"> {
+    children: React.ReactNode;
+}
+declare const ComboBoxPopover: ({ children, className, placement, ...props }: ComboBoxPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export { ComboBoxRoot, ComboBoxInputGroup, ComboBoxTrigger, ComboBoxPopover, ComboBoxContext };
+export type { ComboBoxRootProps, ComboBoxInputGroupProps, ComboBoxTriggerProps, ComboBoxPopoverProps, };

package/dist/components/combo-box/combo-box.js

@@ -0,0 +1,116 @@
+"use client";
+import { comboBoxVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { ComboBox, Popover, ComboBoxStateContext, Button } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { IconChevronDown } from '../icons.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { SurfaceContext } from '../surface/surface.js';
+
+const ComboBoxContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ComboBox Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ComboBoxRoot = ({
+  children,
+  className,
+  fullWidth,
+  menuTrigger = "focus",
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => comboBoxVariants({
+    fullWidth
+  }), [fullWidth]);
+  return /*#__PURE__*/jsx(ComboBoxContext, {
+    value: {
+      slots,
+      variant
+    },
+    children: /*#__PURE__*/jsx(ComboBox, {
+      "data-slot": "combo-box",
+      menuTrigger: menuTrigger,
+      ...props,
+      className: composeTwRenderProps(className, slots?.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ComboBox InputGroup
+ * -----------------------------------------------------------------------------------------------*/
+
+const ComboBoxInputGroup = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ComboBoxContext);
+  const inputGroupClassName = composeSlotClassName(slots?.inputGroup, className);
+  return /*#__PURE__*/jsx("div", {
+    className: inputGroupClassName,
+    "data-slot": "combo-box-input-group",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ComboBox Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const ComboBoxTrigger = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(ComboBoxContext);
+  const state = useContext(ComboBoxStateContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.trigger()),
+    "data-open": dataAttr(state?.isOpen),
+    "data-slot": "combo-box-trigger",
+    ...rest,
+    children: children ?? /*#__PURE__*/jsx(IconChevronDown, {
+      "data-slot": "combo-box-trigger-default-icon"
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ComboBox Popover
+ * -----------------------------------------------------------------------------------------------*/
+
+const ComboBoxPopover = ({
+  children,
+  className,
+  placement = "bottom",
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ComboBoxContext);
+  return /*#__PURE__*/jsx(SurfaceContext, {
+    value: {
+      variant: "default"
+    },
+    children: /*#__PURE__*/jsx(Popover, {
+      ...props,
+      className: composeTwRenderProps(className, slots?.popover()),
+      placement: placement,
+      children: children
+    })
+  });
+};
+
+export { ComboBoxContext, ComboBoxInputGroup, ComboBoxPopover, ComboBoxRoot, ComboBoxTrigger };