@masaraxui/react 1.0.0

package/dist/components/card/card.js

@@ -0,0 +1,141 @@
+"use client";
+import { cardVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { SurfaceContext } from '../surface/surface.js';
+
+const CardContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardRoot = ({
+  children,
+  className,
+  variant = "default",
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => cardVariants({
+    variant
+  }), [variant]);
+  const content = /*#__PURE__*/jsx("div", {
+    className: slots.base({
+      className
+    }),
+    "data-slot": "card",
+    ...props,
+    children: children
+  });
+  return /*#__PURE__*/jsx(CardContext, {
+    value: {
+      slots
+    },
+    children: variant === "transparent" ? content :
+    /*#__PURE__*/
+    // Allows inner components to apply "on-surface" colors for proper contrast
+    jsx(SurfaceContext, {
+      value: {
+        variant: variant
+      },
+      children: content
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Header
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardHeader = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.header, className),
+    "data-slot": "card-header",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Title
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardTitle = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("h3", {
+    className: composeSlotClassName(slots?.title, className),
+    "data-slot": "card-title",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Description
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardDescription = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("p", {
+    className: composeSlotClassName(slots?.description, className),
+    "data-slot": "card-description",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardContent = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.content, className),
+    "data-slot": "card-content",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Card Footer
+ * -----------------------------------------------------------------------------------------------*/
+
+const CardFooter = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CardContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.footer, className),
+    "data-slot": "card-footer",
+    ...props
+  });
+};
+
+export { CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };

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

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle } from "./card";
+export declare const Card: (({ children, className, variant, ...props }: import("./card").CardRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, variant, ...props }: import("./card").CardRootProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ className, ...props }: import("./card").CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ children, className, ...props }: import("./card").CardTitleProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ children, className, ...props }: import("./card").CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ className, ...props }: import("./card").CardContentProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ className, ...props }: import("./card").CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Card = {
+    Props: ComponentProps<typeof CardRoot>;
+    RootProps: ComponentProps<typeof CardRoot>;
+    HeaderProps: ComponentProps<typeof CardHeader>;
+    TitleProps: ComponentProps<typeof CardTitle>;
+    DescriptionProps: ComponentProps<typeof CardDescription>;
+    ContentProps: ComponentProps<typeof CardContent>;
+    FooterProps: ComponentProps<typeof CardFooter>;
+};
+export { CardRoot, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
+export type { CardRootProps, CardRootProps as CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, } from "./card";
+export { cardVariants } from "@masaraxui/styles";
+export type { CardVariants } from "@masaraxui/styles";

package/dist/components/card/index.js

@@ -0,0 +1,17 @@
+"use strict";
+import { CardRoot, CardFooter, CardContent, CardDescription, CardTitle, CardHeader } from './card.js';
+export { cardVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Card = Object.assign(CardRoot, {
+  Root: CardRoot,
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+  Footer: CardFooter
+});
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,22 @@
+import type { CheckboxVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { CheckboxRenderProps } from "react-aria-components";
+import React from "react";
+import { Checkbox as CheckboxPrimitive } from "react-aria-components";
+interface CheckboxRootProps extends ComponentPropsWithRef<typeof CheckboxPrimitive>, CheckboxVariants {
+    /** The name of the checkbox, used when submitting an HTML form. */
+    name?: string;
+}
+declare const CheckboxRoot: ({ children, className, variant, ...props }: CheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
+interface CheckboxControlProps extends ComponentPropsWithRef<"span"> {
+}
+declare const CheckboxControl: ({ children, className, ...props }: CheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
+interface CheckboxIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode | ((props: CheckboxRenderProps) => React.ReactNode);
+}
+declare const CheckboxIndicator: ({ children, className, ...props }: CheckboxIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface CheckboxContentProps extends ComponentPropsWithRef<"div"> {
+}
+declare const CheckboxContent: ({ children, className, ...props }: CheckboxContentProps) => import("react/jsx-runtime").JSX.Element;
+export { CheckboxRoot, CheckboxControl, CheckboxIndicator, CheckboxContent };
+export type { CheckboxRootProps, CheckboxControlProps, CheckboxIndicatorProps, CheckboxContentProps };

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,124 @@
+"use client";
+import { checkboxVariants } from '@masaraxui/styles';
+import React__default, { useContext, createContext } from 'react';
+import { Checkbox } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { CheckboxGroupContext } from '../checkbox-group/checkbox-group.js';
+import { jsx } from 'react/jsx-runtime';
+
+const CheckboxContext = /*#__PURE__*/createContext({});
+const CheckboxRoot = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const checkboxGroupContext = useContext(CheckboxGroupContext);
+  const effectiveVariant = variant ?? checkboxGroupContext.variant;
+  const slots = React__default.useMemo(() => checkboxVariants({
+    variant: effectiveVariant
+  }), [effectiveVariant]);
+  return /*#__PURE__*/jsx(Checkbox, {
+    "data-slot": "checkbox",
+    ...props,
+    className: composeTwRenderProps(className, slots.base()),
+    children: values => /*#__PURE__*/jsx(CheckboxContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -----------------------------------------------------------------------------------------------*/
+
+const CheckboxControl = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CheckboxContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.control, className),
+    "data-slot": "checkbox-control",
+    ...props,
+    children: children
+  });
+};
+
+/* -----------------------------------------------------------------------------------------------*/
+
+const CheckboxIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(CheckboxContext);
+  const isSelected = state?.isSelected;
+  const isIndeterminate = state?.isIndeterminate;
+  const content = typeof children === "function" ? children(state ?? {}) : children ? children : isIndeterminate ? /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "checkbox-default-indicator--indeterminate",
+    fill: "none",
+    role: "presentation",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    viewBox: "0 0 24 24",
+    children: /*#__PURE__*/jsx("line", {
+      x1: "21",
+      x2: "3",
+      y1: "12",
+      y2: "12"
+    })
+  }) : /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "checkbox-default-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": "checkbox-indicator",
+    ...props,
+    children: content
+  });
+};
+
+/* -----------------------------------------------------------------------------------------------*/
+
+const CheckboxContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(CheckboxContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.content, className),
+    "data-slot": "checkbox-content",
+    ...props,
+    children: children
+  });
+};
+
+export { CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot };

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot } from "./checkbox";
+export declare const Checkbox: (({ children, className, variant, ...props }: import("./checkbox").CheckboxRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, variant, ...props }: import("./checkbox").CheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
+    Control: ({ children, className, ...props }: import("./checkbox").CheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...props }: import("./checkbox").CheckboxIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...props }: import("./checkbox").CheckboxContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Checkbox = {
+    Props: ComponentProps<typeof CheckboxRoot>;
+    RootProps: ComponentProps<typeof CheckboxRoot>;
+    ControlProps: ComponentProps<typeof CheckboxControl>;
+    IndicatorProps: ComponentProps<typeof CheckboxIndicator>;
+    ContentProps: ComponentProps<typeof CheckboxContent>;
+};
+export { CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot };
+export type { CheckboxRootProps, CheckboxRootProps as CheckboxProps, CheckboxControlProps, CheckboxIndicatorProps, CheckboxContentProps, } from "./checkbox";
+export { checkboxVariants } from "@masaraxui/styles";
+export type { CheckboxVariants } from "@masaraxui/styles";

package/dist/components/checkbox/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { CheckboxRoot, CheckboxContent, CheckboxIndicator, CheckboxControl } from './checkbox.js';
+export { checkboxVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Checkbox = Object.assign(CheckboxRoot, {
+  Root: CheckboxRoot,
+  Control: CheckboxControl,
+  Indicator: CheckboxIndicator,
+  Content: CheckboxContent
+});
+
+export { Checkbox, CheckboxContent, CheckboxControl, CheckboxIndicator, CheckboxRoot };

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

@@ -0,0 +1,14 @@
+import type { CheckboxVariants } from "../checkbox";
+import type { CheckboxGroupVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { CheckboxGroup as CheckboxGroupPrimitive } from "react-aria-components";
+interface CheckboxGroupContext {
+    variant?: CheckboxVariants["variant"];
+}
+declare const CheckboxGroupContext: React.Context<CheckboxGroupContext>;
+interface CheckboxGroupProps extends ComponentPropsWithRef<typeof CheckboxGroupPrimitive>, CheckboxGroupVariants {
+}
+declare const CheckboxGroup: ({ children, className, variant, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export { CheckboxGroup, CheckboxGroupContext };
+export type { CheckboxGroupProps };

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

@@ -0,0 +1,33 @@
+"use client";
+import { checkboxGroupVariants } from '@masaraxui/styles';
+import React__default, { createContext } from 'react';
+import { CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const CheckboxGroupContext = /*#__PURE__*/createContext({});
+const CheckboxGroup = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const styles = React__default.useMemo(() => checkboxGroupVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(CheckboxGroupContext.Provider, {
+    value: {
+      variant
+    },
+    children: /*#__PURE__*/jsx(CheckboxGroup$1, {
+      className: composeTwRenderProps(className, styles),
+      "data-slot": "checkbox-group",
+      ...props,
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+export { CheckboxGroup, CheckboxGroupContext };

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

@@ -0,0 +1,3 @@
+export { CheckboxGroup } from "./checkbox-group";
+export type { CheckboxGroupProps } from "./checkbox-group";
+export { checkboxGroupVariants, type CheckboxGroupVariants } from "@masaraxui/styles";

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

@@ -0,0 +1,3 @@
+"use strict";
+export { CheckboxGroup } from './checkbox-group.js';
+export { checkboxGroupVariants } from '@masaraxui/styles';

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,14 @@
+import type { ChipVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+interface ChipRootProps extends Omit<ComponentPropsWithRef<"div">, "type" | "color">, ChipVariants {
+    className?: string;
+    children: React.ReactNode;
+}
+declare const ChipRoot: ({ children, className, color, size, variant, ...props }: ChipRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ChipLabelProps extends ComponentPropsWithRef<"span"> {
+    className?: string;
+}
+declare const ChipLabel: ({ children, className, ...props }: ChipLabelProps) => import("react/jsx-runtime").JSX.Element;
+export { ChipRoot, ChipLabel };
+export type { ChipRootProps, ChipLabelProps };

package/dist/components/chip/chip.js

@@ -0,0 +1,67 @@
+"use client";
+import { chipVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ChipContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Chip Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ChipRoot = ({
+  children,
+  className,
+  color,
+  size,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => chipVariants({
+    color,
+    size,
+    variant
+  }), [color, size, variant]);
+  const chipChildren = React__default.useMemo(() => {
+    if (typeof children === "string" || typeof children === "number") {
+      return /*#__PURE__*/jsx(ChipLabel, {
+        children: children
+      });
+    }
+    return children;
+  }, [children]);
+  return /*#__PURE__*/jsx(ChipContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx("span", {
+      ...props,
+      className: composeSlotClassName(slots.base, className),
+      "data-slot": "chip",
+      children: chipChildren
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Chip Label
+ * -----------------------------------------------------------------------------------------------*/
+
+const ChipLabel = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ChipContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.label, className),
+    "data-slot": "chip-label",
+    ...props,
+    children: children
+  });
+};
+
+export { ChipLabel, ChipRoot };

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

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { ChipLabel, ChipRoot } from "./chip";
+export declare const Chip: (({ children, className, color, size, variant, ...props }: import("./chip").ChipRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, color, size, variant, ...props }: import("./chip").ChipRootProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ children, className, ...props }: import("./chip").ChipLabelProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Chip = {
+    Props: ComponentProps<typeof ChipRoot>;
+    RootProps: ComponentProps<typeof ChipRoot>;
+    LabelProps: ComponentProps<typeof ChipLabel>;
+};
+export { ChipRoot, ChipLabel };
+export type { ChipRootProps, ChipRootProps as ChipProps, ChipLabelProps } from "./chip";
+export { chipVariants } from "@masaraxui/styles";
+export type { ChipVariants } from "@masaraxui/styles";

package/dist/components/chip/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { ChipRoot, ChipLabel } from './chip.js';
+export { chipVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Chip = Object.assign(ChipRoot, {
+  Root: ChipRoot,
+  Label: ChipLabel
+});
+
+export { Chip, ChipLabel, ChipRoot };

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

@@ -0,0 +1,8 @@
+import type { CloseButtonVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Button as ButtonPrimitive } from "react-aria-components";
+interface CloseButtonRootProps extends ComponentPropsWithRef<typeof ButtonPrimitive>, CloseButtonVariants {
+}
+declare const CloseButtonRoot: ({ children, className, slot, style, variant, ...rest }: CloseButtonRootProps) => import("react/jsx-runtime").JSX.Element;
+export { CloseButtonRoot };
+export type { CloseButtonRootProps };

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

@@ -0,0 +1,33 @@
+"use client";
+import { closeButtonVariants } from '@masaraxui/styles';
+import { useMemo } from 'react';
+import { Button } from 'react-aria-components';
+import { CloseIcon } from '../icons.js';
+import { jsx } from 'react/jsx-runtime';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+const CloseButtonRoot = ({
+  children,
+  className,
+  slot,
+  style,
+  variant,
+  ...rest
+}) => {
+  const styles = useMemo(() => closeButtonVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(Button, {
+    "aria-label": "Close",
+    className: composeTwRenderProps(className, styles),
+    "data-slot": "close-button",
+    slot: slot,
+    style: style,
+    ...rest,
+    children: renderProps => typeof children === "function" ? children(renderProps) : children ?? /*#__PURE__*/jsx(CloseIcon, {
+      "data-slot": "close-button-icon"
+    })
+  });
+};
+
+export { CloseButtonRoot };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { CloseButtonRoot } from "./close-button";
+export declare const CloseButton: (({ children, className, slot, style, variant, ...rest }: import("./close-button").CloseButtonRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, slot, style, variant, ...rest }: import("./close-button").CloseButtonRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type CloseButton = {
+    Props: ComponentProps<typeof CloseButtonRoot>;
+    RootProps: ComponentProps<typeof CloseButtonRoot>;
+};
+export { CloseButtonRoot };
+export type { CloseButtonRootProps, CloseButtonRootProps as CloseButtonProps } from "./close-button";
+export { closeButtonVariants } from "@masaraxui/styles";
+export type { CloseButtonVariants } from "@masaraxui/styles";

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

@@ -0,0 +1,12 @@
+"use strict";
+import { CloseButtonRoot } from './close-button.js';
+export { closeButtonVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const CloseButton = Object.assign(CloseButtonRoot, {
+  Root: CloseButtonRoot
+});
+
+export { CloseButton, CloseButtonRoot };

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

@@ -0,0 +1,11 @@
+import type { ColorAreaVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { ColorArea as ColorAreaPrimitive, ColorThumb as ColorThumbPrimitive } from "react-aria-components";
+interface ColorAreaRootProps extends ComponentPropsWithRef<typeof ColorAreaPrimitive>, ColorAreaVariants {
+}
+declare const ColorAreaRoot: ({ children, className, showDots, style, ...props }: ColorAreaRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorAreaThumbProps extends ComponentPropsWithRef<typeof ColorThumbPrimitive> {
+}
+declare const ColorAreaThumb: ({ className, style, ...props }: ColorAreaThumbProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorAreaRoot, ColorAreaThumb };
+export type { ColorAreaRootProps, ColorAreaThumbProps };