@arobo/react 1.0.1 → 1.1.0

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

@@ -0,0 +1,15 @@
+import { NumberFieldRoot, NumberFieldDecrementButton, NumberFieldIncrementButton, NumberFieldInput, NumberFieldGroup } from './number-field.js';
+export { numberFieldVariants } from '../../packages/styles/src/components/number-field/number-field.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * 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 "@arobo/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,126 @@
+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';
+import { numberFieldVariants } from '../../packages/styles/src/components/number-field/number-field.styles.js';
+
+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,19 @@
+import type { ComponentProps } from "react";
+import { PaginationRoot } from "./pagination";
+export declare const Pagination: {
+    ({ "aria-label": ariaLabel, className, defaultPage, hideOnSinglePage, hideControlText, isCompact, isDisabled, labels, onChange, page, showControls, showEdges, showFullPages, showPages, size, total, variant, ...props }: import("./pagination").PaginationRootProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+} & {
+    Root: {
+        ({ "aria-label": ariaLabel, className, defaultPage, hideOnSinglePage, hideControlText, isCompact, isDisabled, labels, onChange, page, showControls, showEdges, showFullPages, showPages, size, total, variant, ...props }: import("./pagination").PaginationRootProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+};
+export type Pagination = {
+    Props: ComponentProps<typeof PaginationRoot>;
+    RootProps: ComponentProps<typeof PaginationRoot>;
+};
+export { PaginationRoot } from "./pagination";
+export type { PaginationChangeMeta, PaginationItemType, PaginationRootProps, PaginationRootProps as PaginationProps, } from "./pagination";
+export { paginationVariants } from "@arobo/styles";
+export type { PaginationVariants } from "@arobo/styles";

package/dist/components/pagination/index.js

@@ -0,0 +1,11 @@
+import { PaginationRoot } from './pagination.js';
+export { paginationVariants } from '../../packages/styles/src/components/pagination/pagination.styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Pagination = Object.assign(PaginationRoot, {
+  Root: PaginationRoot
+});
+
+export { Pagination, PaginationRoot };

package/dist/components/pagination/pagination-ellipsis.d.ts

@@ -0,0 +1,6 @@
+type PaginationEllipsisProps = {
+    className: string;
+};
+declare const PaginationEllipsis: ({ className }: PaginationEllipsisProps) => import("react/jsx-runtime").JSX.Element;
+export { PaginationEllipsis };
+export type { PaginationEllipsisProps };

package/dist/components/pagination/pagination-ellipsis.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+
+const PaginationEllipsis = ({
+  className
+}) => /*#__PURE__*/jsx("li", {
+  className: className,
+  "data-slot": "pagination-ellipsis",
+  children: "..."
+});
+
+export { PaginationEllipsis };

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

@@ -0,0 +1,15 @@
+import type { PaginationItemType } from "../../hooks/use-pagination";
+import React from "react";
+type PaginationItemProps = {
+    ariaLabel?: string;
+    buttonClassName: string;
+    content: React.ReactNode;
+    isDisabled: boolean;
+    itemClassName: string;
+    onPress: () => void;
+    selected: boolean;
+    type: PaginationItemType;
+};
+declare const PaginationItem: ({ buttonClassName, content, isDisabled, itemClassName, onPress, selected, type, ariaLabel, }: PaginationItemProps) => import("react/jsx-runtime").JSX.Element;
+export { PaginationItem };
+export type { PaginationItemProps };

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

@@ -0,0 +1,34 @@
+import { Button } from '../button/index.js';
+import { jsx } from 'react/jsx-runtime';
+
+const PaginationItem = ({
+  buttonClassName,
+  content,
+  isDisabled,
+  itemClassName,
+  onPress,
+  selected,
+  type,
+  ariaLabel
+}) => {
+  const commonProps = {
+    "aria-current": selected ? "page" : undefined,
+    "aria-label": ariaLabel,
+    "data-active": selected ? "true" : undefined,
+    "data-slot": "pagination-button",
+    "data-type": type,
+    className: buttonClassName
+  };
+  return /*#__PURE__*/jsx("li", {
+    className: itemClassName,
+    "data-slot": "pagination-item",
+    children: /*#__PURE__*/jsx(Button, {
+      ...commonProps,
+      isDisabled: isDisabled,
+      onPress: onPress,
+      children: content
+    })
+  });
+};
+
+export { PaginationItem };

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

@@ -0,0 +1,28 @@
+import type { PaginationVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+import { PaginationControl, type PaginationItemType } from "../../hooks/use-pagination";
+type PaginationControlLabels = Partial<Record<PaginationControl, string>>;
+type PaginationChangeMeta = {
+    isDisabled?: boolean;
+    type: PaginationItemType;
+};
+interface PaginationRootProps extends Omit<ComponentPropsWithRef<"nav">, "onChange">, PaginationVariants {
+    defaultPage?: number;
+    hideOnSinglePage?: boolean;
+    hideControlText?: boolean;
+    isDisabled?: boolean;
+    labels?: PaginationControlLabels;
+    onChange?: (page: number, meta: PaginationChangeMeta) => void;
+    page?: number;
+    showControls?: boolean;
+    showEdges?: boolean;
+    showFullPages?: boolean;
+    showPages?: boolean;
+    total: number;
+}
+declare const PaginationRoot: {
+    ({ "aria-label": ariaLabel, className, defaultPage, hideOnSinglePage, hideControlText, isCompact, isDisabled, labels, onChange, page, showControls, showEdges, showFullPages, showPages, size, total, variant, ...props }: PaginationRootProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { PaginationRoot };
+export type { PaginationChangeMeta, PaginationItemType, PaginationRootProps };

package/dist/components/pagination/pagination.js

@@ -0,0 +1,128 @@
+import { composeSlotClassName } from '../../utils/compose.js';
+import { IconChevronRight } from '../icons.js';
+import { PaginationEllipsis } from './pagination-ellipsis.js';
+import { PaginationItem } from './pagination-item.js';
+import { usePagination, FIRST_PAGE, ELLIPSIS, PAGE, usePaginationChange, PaginationControl } from '../../hooks/use-pagination.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { paginationVariants } from '../../packages/styles/src/components/pagination/pagination.styles.js';
+
+const DEFAULT_CONTROL_LABELS = {
+  [PaginationControl.Prev]: "Previous",
+  [PaginationControl.Next]: "Next",
+  [PaginationControl.First]: "First",
+  [PaginationControl.Last]: "Last"
+};
+const renderControl = (type, labels, hideControlText) => {
+  const text = labels[type];
+  if (type === PaginationControl.Prev) {
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(IconChevronRight, {
+        className: "rotate-180"
+      }), !hideControlText && text ? /*#__PURE__*/jsx("span", {
+        children: text
+      }) : null]
+    });
+  }
+  if (type === PaginationControl.Next) {
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [!hideControlText && text ? /*#__PURE__*/jsx("span", {
+        children: text
+      }) : null, /*#__PURE__*/jsx(IconChevronRight, {})]
+    });
+  }
+  if (hideControlText) return null;
+  return text;
+};
+const PaginationRoot = ({
+  "aria-label": ariaLabel,
+  className,
+  defaultPage = 1,
+  hideOnSinglePage = false,
+  hideControlText = false,
+  isCompact,
+  isDisabled = false,
+  labels,
+  onChange,
+  page,
+  showControls = true,
+  showEdges = false,
+  showFullPages = false,
+  showPages = true,
+  size,
+  total,
+  variant,
+  ...props
+}) => {
+  const {
+    controlItems,
+    currentPage,
+    isControlled,
+    pageItems,
+    setUncontrolledPage,
+    totalPages
+  } = usePagination({
+    defaultPage,
+    page,
+    showControls,
+    showEdges,
+    showFullPages,
+    showPages,
+    total
+  });
+  const slots = paginationVariants({
+    isCompact,
+    size,
+    variant
+  });
+  const controlLabels = {
+    ...DEFAULT_CONTROL_LABELS,
+    ...labels
+  };
+  const handleChange = usePaginationChange({
+    currentPage,
+    isControlled,
+    onChange,
+    setUncontrolledPage
+  });
+  const renderControlItems = position => controlItems.filter(item => item.position === position && item.show).map(item => {
+    const content = renderControl(item.type, controlLabels, hideControlText);
+    if (!content) return null;
+    const isItemDisabled = isDisabled || item.disabled;
+    return /*#__PURE__*/jsx(PaginationItem, {
+      ariaLabel: `${item.type === PaginationControl.Prev ? "Previous" : item.type === PaginationControl.Next ? "Next" : item.type === PaginationControl.First ? "First" : "Last"} page`,
+      buttonClassName: slots.button(),
+      content: content,
+      isDisabled: isItemDisabled,
+      itemClassName: slots.item(),
+      onPress: () => handleChange(item.page, item.type, isItemDisabled),
+      selected: false,
+      type: item.type
+    }, item.key);
+  });
+  if (hideOnSinglePage && totalPages === FIRST_PAGE) return null;
+  return /*#__PURE__*/jsx("nav", {
+    "aria-label": ariaLabel ?? "Pagination",
+    className: composeSlotClassName(slots.base, className),
+    "data-slot": "pagination",
+    ...props,
+    children: /*#__PURE__*/jsxs("ul", {
+      className: slots.list(),
+      "data-slot": "pagination-list",
+      children: [renderControlItems("leading"), pageItems.map((item, index) => item === ELLIPSIS ? /*#__PURE__*/jsx(PaginationEllipsis, {
+        className: slots.ellipsis()
+      }, `pagination-item-${index}`) : /*#__PURE__*/jsx(PaginationItem, {
+        ariaLabel: `Go to page ${item}`,
+        buttonClassName: slots.button(),
+        content: item,
+        isDisabled: isDisabled,
+        itemClassName: slots.item(),
+        onPress: () => handleChange(item, PAGE, isDisabled),
+        selected: item === currentPage,
+        type: PAGE
+      }, `pagination-item-${index}`)), renderControlItems("trailing")]
+    })
+  });
+};
+PaginationRoot.displayName = "Pagination";
+
+export { PaginationRoot };

package/dist/components/popover/index.js

@@ -1,5 +1,5 @@
 import { PopoverRoot, PopoverHeading, PopoverContent, PopoverArrow, PopoverDialog, PopoverTrigger } from './popover.js';
-export { popoverVariants } from '../../styles/src/components/popover/popover.styles.js';
+export { popoverVariants } from '../../packages/styles/src/components/popover/popover.styles.js';
 
 /* -------------------------------------------------------------------------------------------------
  * Compound Component

package/dist/components/popover/popover.js

@@ -1,9 +1,9 @@
-import React, { createContext, useContext } from 'react';
+import React__default, { createContext, useContext } from 'react';
 import { DialogTrigger, Heading, Popover, OverlayArrow, Dialog, Pressable } from 'react-aria-components';
 import { Slot } from '@radix-ui/react-slot';
 import { composeSlotClassName, composeTwRenderProps } from '../../utils/compose.js';
 import { jsx } from 'react/jsx-runtime';
-import { popoverVariants } from '../../styles/src/components/popover/popover.styles.js';
+import { popoverVariants } from '../../packages/styles/src/components/popover/popover.styles.js';
 import { SurfaceContext } from '../surface/surface.js';
 
 const PopoverContext = /*#__PURE__*/createContext({});
@@ -16,7 +16,7 @@ const PopoverRoot = ({
   children,
   ...props
 }) => {
-  const slots = React.useMemo(() => popoverVariants(), []);
+  const slots = React__default.useMemo(() => popoverVariants(), []);
   return /*#__PURE__*/jsx(PopoverContext, {
     value: {
       slots
@@ -76,7 +76,7 @@ const PopoverArrow = ({
       d: "M0 0 L6 6 L12 0"
     })
   });
-  const arrow = /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
+  const arrow = /*#__PURE__*/React__default.isValidElement(children) ? /*#__PURE__*/React__default.cloneElement(children, {
     "data-slot": "popover-overlay-arrow"
   }) : defaultArrow;
   return /*#__PURE__*/jsx(OverlayArrow, {

package/dist/components/rac/components.d.ts

@@ -0,0 +1 @@
+export { Collection, ListBoxLoadMoreItem, RouterProvider, I18nProvider } from "react-aria-components";

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

@@ -0,0 +1,3 @@
+export { isRTL, useLocale, useFilter } from "react-aria-components";
+export { getLocalizationScript } from "react-aria-components/i18n";
+export type { Key, Direction, Orientation, PressEvent, PointerType, KeyboardEvent, HoverEvent, Selection, TimeValue, DateValue, DateRange, ValidationResult, RangeValue, RouterConfig, } from "./types";

package/dist/components/rac/index.js

@@ -0,0 +1,2 @@
+export { isRTL, useFilter, useLocale } from 'react-aria-components';
+export { getLocalizationScript } from '../../node_modules/.pnpm/react-aria-components@1.14.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria-components/i18n/index.js';

package/dist/components/rac/types.d.ts

@@ -0,0 +1,2 @@
+export type { Key, Direction, Orientation, PressEvent, PointerType, KeyboardEvent, HoverEvent, Selection, RangeValue, ValidationResult, RouterConfig, } from "@react-types/shared";
+export type { TimeValue, DateValue, DateRange } from "react-aria-components";

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { RadioContent, RadioControl, RadioIndicator, RadioRoot } from "./radio";
+export declare const Radio: (({ children, className, ...props }: import("./radio").RadioRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, ...props }: import("./radio").RadioRootProps) => import("react/jsx-runtime").JSX.Element;
+    Control: ({ children, className, ...props }: import("./radio").RadioControlProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...props }: import("./radio").RadioIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...props }: import("./radio").RadioContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Radio = {
+    Props: ComponentProps<typeof RadioRoot>;
+    RootProps: ComponentProps<typeof RadioRoot>;
+    ControlProps: ComponentProps<typeof RadioControl>;
+    IndicatorProps: ComponentProps<typeof RadioIndicator>;
+    ContentProps: ComponentProps<typeof RadioContent>;
+};
+export { RadioContent, RadioControl, RadioIndicator, RadioRoot };
+export type { RadioRootProps, RadioRootProps as RadioProps, RadioControlProps, RadioIndicatorProps, RadioContentProps, } from "./radio";

package/dist/components/radio/index.js

@@ -0,0 +1,13 @@
+import { RadioRoot, RadioContent, RadioIndicator, RadioControl } from './radio.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Radio = Object.assign(RadioRoot, {
+  Root: RadioRoot,
+  Control: RadioControl,
+  Indicator: RadioIndicator,
+  Content: RadioContent
+});
+
+export { Radio, RadioContent, RadioControl, RadioIndicator, RadioRoot };

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithRef } from "react";
+import type { RadioRenderProps } from "react-aria-components";
+import React from "react";
+import { Radio as RadioPrimitive } from "react-aria-components";
+interface RadioRootProps extends ComponentPropsWithRef<typeof RadioPrimitive> {
+    /** The name of the radio button, used when submitting an HTML form. */
+    name?: string;
+}
+declare const RadioRoot: ({ children, className, ...props }: RadioRootProps) => import("react/jsx-runtime").JSX.Element;
+interface RadioControlProps extends ComponentPropsWithRef<"span"> {
+}
+declare const RadioControl: ({ children, className, ...props }: RadioControlProps) => import("react/jsx-runtime").JSX.Element;
+interface RadioIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode | ((props: RadioRenderProps) => React.ReactNode);
+}
+declare const RadioIndicator: ({ children, className, ...props }: RadioIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface RadioContentProps extends ComponentPropsWithRef<"div"> {
+}
+declare const RadioContent: ({ children, className, ...props }: RadioContentProps) => import("react/jsx-runtime").JSX.Element;
+export { RadioRoot, RadioControl, RadioIndicator, RadioContent };
+export type { RadioRootProps, RadioControlProps, RadioIndicatorProps, RadioContentProps };

package/dist/components/radio/radio.js

@@ -0,0 +1,96 @@
+import React__default, { createContext, useContext } from 'react';
+import { Radio } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { radioVariants } from '../../packages/styles/src/components/radio/radio.styles.js';
+
+const RadioContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Radio Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const RadioRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => radioVariants(), []);
+  return /*#__PURE__*/jsx(Radio, {
+    "data-slot": "radio",
+    ...props,
+    className: composeTwRenderProps(className, slots.base()),
+    children: values => /*#__PURE__*/jsx(RadioContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Radio Control
+ * -----------------------------------------------------------------------------------------------*/
+
+const RadioControl = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RadioContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.control, className),
+    "data-slot": "radio-control",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Radio Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const RadioIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(RadioContext);
+  const content = typeof children === "function" ? children(state ?? {}) : children;
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-slot": "radio-indicator",
+    ...props,
+    children: content
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Radio Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const RadioContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(RadioContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.content, className),
+    "data-slot": "radio-content",
+    ...props,
+    children: children
+  });
+};
+
+export { RadioContent, RadioControl, RadioIndicator, RadioRoot };

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

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+import { RadioGroupRoot } from "./radio-group";
+export declare const RadioGroup: (({ children, className, variant, ...props }: import("./radio-group").RadioGroupRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, variant, ...props }: import("./radio-group").RadioGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type RadioGroup = {
+    Props: ComponentProps<typeof RadioGroupRoot>;
+    RootProps: ComponentProps<typeof RadioGroupRoot>;
+};
+export { RadioGroupRoot };
+export type { RadioGroupRootProps, RadioGroupRootProps as RadioGroupProps } from "./radio-group";

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

@@ -0,0 +1,10 @@
+import { RadioGroupRoot } from './radio-group.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const RadioGroup = Object.assign(RadioGroupRoot, {
+  Root: RadioGroupRoot
+});
+
+export { RadioGroup, RadioGroupRoot };