@masaraxui/react 1.0.0

package/dist/components/input-otp/input-otp.js

@@ -0,0 +1,139 @@
+"use client";
+import { inputOTPVariants } from '@masaraxui/styles';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import React__default, { createContext, useContext } from 'react';
+import { FieldErrorContext } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const InputOTPContext = /*#__PURE__*/createContext({
+  isDisabled: false,
+  isInvalid: false
+});
+
+/* -------------------------------------------------------------------------------------------------
+ * Input OTP Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputOTPRoot = ({
+  className,
+  inputClassName,
+  isDisabled = false,
+  isInvalid = false,
+  validationDetails,
+  validationErrors = [],
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => inputOTPVariants({
+    variant
+  }), [variant]);
+  const validation = React__default.useMemo(() => ({
+    isInvalid,
+    validationErrors,
+    validationDetails
+  }), [isInvalid, validationErrors, validationDetails]);
+  return /*#__PURE__*/jsx(InputOTPContext, {
+    value: {
+      slots,
+      isDisabled,
+      isInvalid
+    },
+    children: /*#__PURE__*/jsx(FieldErrorContext, {
+      value: validation,
+      children: /*#__PURE__*/jsx(OTPInput
+      // OTP Input package uses the `className` prop for the actual `input` element which is not visible to the user so no need to pass it to the base container
+      , {
+        className: slots.input({
+          className: inputClassName
+        }),
+        containerClassName: slots.base({
+          className
+        }),
+        "data-disabled": dataAttr(isDisabled),
+        "data-invalid": dataAttr(isInvalid),
+        "data-slot": "input-otp",
+        disabled: isDisabled,
+        ...props
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Input OTP Group
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputOTPGroup = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(InputOTPContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.group, className),
+    "data-slot": "input-otp-group",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Input OTP Slot
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputOTPSlot = ({
+  className,
+  index,
+  ...props
+}) => {
+  const {
+    isDisabled,
+    isInvalid,
+    slots
+  } = useContext(InputOTPContext);
+  const inputOTPContext = useContext(OTPInputContext);
+  const {
+    char,
+    hasFakeCaret,
+    isActive
+  } = inputOTPContext?.slots[index] ?? {};
+  return /*#__PURE__*/jsxs("div", {
+    ...props,
+    className: composeSlotClassName(slots?.slot, className),
+    "data-active": dataAttr(isActive),
+    "data-disabled": dataAttr(isDisabled),
+    "data-filled": dataAttr(!!char),
+    "data-invalid": dataAttr(isInvalid),
+    "data-slot": "input-otp-slot",
+    children: [char ? /*#__PURE__*/jsx("div", {
+      className: slots?.slotValue(),
+      "data-slot": "input-otp-slot-value",
+      children: char
+    }) : null, hasFakeCaret && isActive ? /*#__PURE__*/jsx("div", {
+      className: slots?.caret(),
+      "data-slot": "input-otp-caret"
+    }) : null]
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Input OTP Separator
+ * -----------------------------------------------------------------------------------------------*/
+
+const InputOTPSeparator = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(InputOTPContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.separator, className),
+    "data-slot": "input-otp-separator",
+    ...props
+  });
+};
+
+export { InputOTPGroup, InputOTPRoot, InputOTPSeparator, InputOTPSlot };

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { KbdAbbr, KbdContent, KbdRoot } from "./kbd";
+export declare const Kbd: (({ children, className, variant, ...props }: import("./kbd").KbdRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, variant, ...props }: import("./kbd").KbdRootProps) => import("react/jsx-runtime").JSX.Element;
+    Abbr: ({ className, keyValue, ...props }: import("./kbd").KbdAbbrProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...props }: import("./kbd").KbdContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Kbd = {
+    Props: ComponentProps<typeof KbdRoot>;
+    RootProps: ComponentProps<typeof KbdRoot>;
+    AbbrProps: ComponentProps<typeof KbdAbbr>;
+    ContentProps: ComponentProps<typeof KbdContent>;
+};
+export { KbdRoot, KbdAbbr, KbdContent };
+export type { KbdRootProps, KbdAbbrProps, KbdContentProps, KbdRootProps as KbdProps } from "./kbd";
+export { kbdVariants } from "@masaraxui/styles";
+export type { KbdVariants } from "@masaraxui/styles";
+export { kbdKeysMap, kbdKeysLabelMap } from "./kbd.constants";
+export type { KbdKey } from "./kbd.constants";

package/dist/components/kbd/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { KbdRoot, KbdContent, KbdAbbr } from './kbd.js';
+export { kbdVariants } from '@masaraxui/styles';
+export { kbdKeysLabelMap, kbdKeysMap } from './kbd.constants.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Kbd = Object.assign(KbdRoot, {
+  Root: KbdRoot,
+  Abbr: KbdAbbr,
+  Content: KbdContent
+});
+
+export { Kbd, KbdAbbr, KbdContent, KbdRoot };

package/dist/components/kbd/kbd.constants.d.ts

@@ -0,0 +1,3 @@
+export type KbdKey = "command" | "shift" | "ctrl" | "option" | "enter" | "delete" | "escape" | "tab" | "capslock" | "up" | "right" | "down" | "left" | "pageup" | "pagedown" | "home" | "end" | "help" | "space" | "fn" | "win" | "alt";
+export declare const kbdKeysMap: Record<KbdKey, string>;
+export declare const kbdKeysLabelMap: Record<KbdKey, string>;

package/dist/components/kbd/kbd.constants.js

@@ -0,0 +1,51 @@
+"use strict";
+const kbdKeysMap = {
+  command: "⌘",
+  shift: "⇧",
+  ctrl: "⌃",
+  option: "⌥",
+  enter: "↵",
+  delete: "⌫",
+  escape: "⎋",
+  tab: "⇥",
+  capslock: "⇪",
+  up: "↑",
+  right: "→",
+  down: "↓",
+  left: "←",
+  pageup: "⇞",
+  pagedown: "⇟",
+  home: "↖",
+  end: "↘",
+  help: "?",
+  space: "␣",
+  fn: "Fn",
+  win: "⌘",
+  alt: "⌥"
+};
+const kbdKeysLabelMap = {
+  command: "Command",
+  shift: "Shift",
+  ctrl: "Control",
+  option: "Option",
+  enter: "Enter",
+  delete: "Delete",
+  escape: "Escape",
+  tab: "Tab",
+  capslock: "Caps Lock",
+  up: "Up",
+  right: "Right",
+  down: "Down",
+  left: "Left",
+  pageup: "Page Up",
+  pagedown: "Page Down",
+  home: "Home",
+  end: "End",
+  help: "Help",
+  space: "Space",
+  fn: "Fn",
+  win: "Win",
+  alt: "Alt"
+};
+
+export { kbdKeysLabelMap, kbdKeysMap };

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,24 @@
+import type { KbdKey } from "./kbd.constants";
+import type { KbdVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+interface KbdRootProps extends ComponentPropsWithRef<"kbd">, KbdVariants {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const KbdRoot: ({ children, className, variant, ...props }: KbdRootProps) => import("react/jsx-runtime").JSX.Element;
+interface KbdAbbrProps extends ComponentPropsWithRef<"abbr"> {
+    className?: string;
+    /**
+     * The keyboard key to display
+     */
+    keyValue: KbdKey;
+}
+declare const KbdAbbr: ({ className, keyValue, ...props }: KbdAbbrProps) => import("react/jsx-runtime").JSX.Element;
+interface KbdContentProps extends ComponentPropsWithRef<"span"> {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const KbdContent: ({ children, className, ...props }: KbdContentProps) => import("react/jsx-runtime").JSX.Element;
+export { KbdRoot, KbdAbbr, KbdContent };
+export type { KbdRootProps, KbdAbbrProps, KbdContentProps };

package/dist/components/kbd/kbd.js

@@ -0,0 +1,76 @@
+"use client";
+import { kbdVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { composeSlotClassName } from '../../utils/compose.js';
+import { kbdKeysMap, kbdKeysLabelMap } from './kbd.constants.js';
+import { jsx } from 'react/jsx-runtime';
+
+const KbdContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Kbd Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const KbdRoot = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => kbdVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(KbdContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx("kbd", {
+      ...props,
+      className: slots.base({
+        className
+      }),
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Kbd Abbr
+ * -----------------------------------------------------------------------------------------------*/
+
+const KbdAbbr = ({
+  className,
+  keyValue,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(KbdContext);
+  return /*#__PURE__*/jsx("abbr", {
+    className: composeSlotClassName(slots?.abbr, className),
+    title: kbdKeysLabelMap[keyValue],
+    ...props,
+    children: kbdKeysMap[keyValue]
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Kbd Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const KbdContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(KbdContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.content, className),
+    ...props,
+    children: children
+  });
+};
+
+export { KbdAbbr, KbdContent, KbdRoot };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { LabelRoot } from "./label";
+export declare const Label: (({ children, className, isDisabled, isInvalid, isRequired, ...rest }: import("./label").LabelRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, isDisabled, isInvalid, isRequired, ...rest }: import("./label").LabelRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Label = {
+    Props: ComponentProps<typeof LabelRoot>;
+    RootProps: ComponentProps<typeof LabelRoot>;
+};
+export { LabelRoot };
+export type { LabelRootProps, LabelRootProps as LabelProps } from "./label";
+export { labelVariants } from "@masaraxui/styles";
+export type { LabelVariants } from "@masaraxui/styles";

package/dist/components/label/index.js

@@ -0,0 +1,12 @@
+"use strict";
+import { LabelRoot } from './label.js';
+export { labelVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Label = Object.assign(LabelRoot, {
+  Root: LabelRoot
+});
+
+export { Label, LabelRoot };

package/dist/components/label/label.d.ts

@@ -0,0 +1,8 @@
+import type { LabelVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Label as LabelPrimitive } from "react-aria-components";
+interface LabelRootProps extends ComponentPropsWithRef<typeof LabelPrimitive>, LabelVariants {
+}
+declare const LabelRoot: ({ children, className, isDisabled, isInvalid, isRequired, ...rest }: LabelRootProps) => import("react/jsx-runtime").JSX.Element;
+export { LabelRoot };
+export type { LabelRootProps };

package/dist/components/label/label.js

@@ -0,0 +1,27 @@
+"use client";
+import { labelVariants } from '@masaraxui/styles';
+import { Label } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+const LabelRoot = ({
+  children,
+  className,
+  isDisabled,
+  isInvalid,
+  isRequired,
+  ...rest
+}) => {
+  return /*#__PURE__*/jsx(Label, {
+    className: labelVariants({
+      isRequired,
+      isDisabled,
+      isInvalid,
+      className
+    }),
+    "data-slot": "label",
+    ...rest,
+    children: children
+  });
+};
+
+export { LabelRoot };

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

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { LinkIcon, LinkRoot } from "./link";
+export declare const Link: (({ children, className, ...props }: import("./link").LinkRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, ...props }: import("./link").LinkRootProps) => import("react/jsx-runtime").JSX.Element;
+    Icon: ({ children, className, ...rest }: import("./link").LinkIconProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Link = {
+    Props: ComponentProps<typeof LinkRoot>;
+    RootProps: ComponentProps<typeof LinkRoot>;
+    IconProps: ComponentProps<typeof LinkIcon>;
+};
+export { LinkRoot, LinkIcon };
+export type { LinkRootProps, LinkIconProps, LinkRootProps as LinkProps } from "./link";
+export { linkVariants } from "@masaraxui/styles";
+export type { LinkVariants } from "@masaraxui/styles";

package/dist/components/link/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { LinkRoot, LinkIcon } from './link.js';
+export { linkVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Link = Object.assign(LinkRoot, {
+  Root: LinkRoot,
+  Icon: LinkIcon
+});
+
+export { Link, LinkIcon, LinkRoot };

package/dist/components/link/link.d.ts

@@ -0,0 +1,10 @@
+import type { LinkVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Link as LinkPrimitive } from "react-aria-components";
+interface LinkRootProps extends ComponentPropsWithRef<typeof LinkPrimitive>, LinkVariants {
+}
+declare const LinkRoot: ({ children, className, ...props }: LinkRootProps) => import("react/jsx-runtime").JSX.Element;
+type LinkIconProps = ComponentPropsWithRef<"span">;
+declare const LinkIcon: ({ children, className, ...rest }: LinkIconProps) => import("react/jsx-runtime").JSX.Element;
+export { LinkRoot, LinkIcon };
+export type { LinkRootProps, LinkIconProps };

package/dist/components/link/link.js

@@ -0,0 +1,59 @@
+"use client";
+import { linkVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { Link } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { ExternalLinkIcon } from '../icons.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const LinkContext = /*#__PURE__*/createContext({});
+
+/* ------------------------------------------------------------------------------------------------
+ * Link Root
+ * --------------------------------------------------------------------------------------------- */
+
+const LinkRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => linkVariants(), []);
+  return /*#__PURE__*/jsx(LinkContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(Link, {
+      ...props,
+      className: composeTwRenderProps(className, slots?.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* ------------------------------------------------------------------------------------------------
+ * Link Icon
+ * --------------------------------------------------------------------------------------------- */
+
+const LinkIcon = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const {
+    slots
+  } = useContext(LinkContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.icon, className),
+    "data-default-icon": dataAttr(!children),
+    "data-slot": "link-icon",
+    ...rest,
+    children: children ?? /*#__PURE__*/jsx(ExternalLinkIcon, {
+      "data-slot": "link-default-icon"
+    })
+  });
+};
+
+export { LinkIcon, LinkRoot };

package/dist/components/list-box/index.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { ListBoxItem } from "../list-box-item";
+import { ListBoxSection } from "../list-box-section";
+import { ListBoxRoot } from "./list-box";
+export declare const ListBox: typeof ListBoxRoot & {
+    Root: typeof ListBoxRoot;
+    Item: (({ children, className, variant, ...props }: import("..").ListBoxItemRootProps) => import("react/jsx-runtime").JSX.Element) & {
+        Root: ({ children, className, variant, ...props }: import("..").ListBoxItemRootProps) => import("react/jsx-runtime").JSX.Element;
+        Indicator: ({ children, className, ...props }: import("..").ListBoxItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    ItemIndicator: ({ children, className, ...props }: import("..").ListBoxItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Section: ({ children, className, ...props }: import("..").ListBoxSectionRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ListBox = {
+    Props: ComponentProps<typeof ListBoxRoot>;
+    RootProps: ComponentProps<typeof ListBoxRoot>;
+    ItemProps: ComponentProps<typeof ListBoxItem>;
+    SectionProps: ComponentProps<typeof ListBoxSection>;
+};
+export { ListBoxRoot };
+export type { ListBoxRootProps, ListBoxRootProps as ListBoxProps } from "./list-box";
+export { listboxVariants } from "@masaraxui/styles";
+export type { ListBoxVariants } from "@masaraxui/styles";

package/dist/components/list-box/index.js

@@ -0,0 +1,18 @@
+"use strict";
+import { ListBoxItem } from '../list-box-item/index.js';
+import { ListBoxSection } from '../list-box-section/index.js';
+import { ListBoxRoot } from './list-box.js';
+export { listboxVariants } from '@masaraxui/styles';
+import { ListBoxItemIndicator } from '../list-box-item/list-box-item.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ListBox = Object.assign(ListBoxRoot, {
+  Root: ListBoxRoot,
+  Item: ListBoxItem,
+  ItemIndicator: ListBoxItemIndicator,
+  Section: ListBoxSection
+});
+
+export { ListBox, ListBoxRoot };

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

@@ -0,0 +1,9 @@
+import type { ListBoxVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { ListBox as ListBoxPrimitive } from "react-aria-components";
+interface ListBoxRootProps<T extends object> extends ComponentPropsWithRef<typeof ListBoxPrimitive<T>>, ListBoxVariants {
+    className?: string;
+}
+declare function ListBoxRoot<T extends object>({ className, variant, ...props }: ListBoxRootProps<T>): import("react/jsx-runtime").JSX.Element;
+export { ListBoxRoot };
+export type { ListBoxRootProps };

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

@@ -0,0 +1,23 @@
+"use client";
+import { listboxVariants } from '@masaraxui/styles';
+import React__default from 'react';
+import { ListBox } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { composeTwRenderProps } from '../../utils/compose.js';
+
+function ListBoxRoot({
+  className,
+  variant,
+  ...props
+}) {
+  const styles = React__default.useMemo(() => listboxVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(ListBox, {
+    className: composeTwRenderProps(className, styles),
+    "data-slot": "list-box",
+    ...props
+  });
+}
+
+export { ListBoxRoot };

package/dist/components/list-box-item/index.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { ListBoxItemIndicator, ListBoxItemRoot } from "./list-box-item";
+export declare const ListBoxItem: (({ children, className, variant, ...props }: import("./list-box-item").ListBoxItemRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, variant, ...props }: import("./list-box-item").ListBoxItemRootProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...props }: import("./list-box-item").ListBoxItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ListBoxItem = {
+    Props: ComponentProps<typeof ListBoxItemRoot>;
+    RootProps: ComponentProps<typeof ListBoxItemRoot>;
+    IndicatorProps: ComponentProps<typeof ListBoxItemIndicator>;
+};
+export { ListBoxItemRoot, ListBoxItemIndicator };
+export type { ListBoxItemRootProps, ListBoxItemRootProps as ListBoxItemProps, ListBoxItemIndicatorProps, } from "./list-box-item";
+export { listboxItemVariants } from "@masaraxui/styles";
+export type { ListBoxItemVariants } from "@masaraxui/styles";

package/dist/components/list-box-item/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { ListBoxItemRoot, ListBoxItemIndicator } from './list-box-item.js';
+export { listboxItemVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ListBoxItem = Object.assign(ListBoxItemRoot, {
+  Root: ListBoxItemRoot,
+  Indicator: ListBoxItemIndicator
+});
+
+export { ListBoxItem, ListBoxItemIndicator, ListBoxItemRoot };

package/dist/components/list-box-item/list-box-item.d.ts

@@ -0,0 +1,15 @@
+import type { ListBoxItemVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { ListBoxItemRenderProps } from "react-aria-components";
+import React from "react";
+import { ListBoxItem as ListBoxItemPrimitive } from "react-aria-components";
+interface ListBoxItemRootProps extends ComponentPropsWithRef<typeof ListBoxItemPrimitive>, ListBoxItemVariants {
+    className?: string;
+}
+declare const ListBoxItemRoot: ({ children, className, variant, ...props }: ListBoxItemRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ListBoxItemIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode | ((props: ListBoxItemRenderProps) => React.ReactNode);
+}
+declare const ListBoxItemIndicator: ({ children, className, ...props }: ListBoxItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export { ListBoxItemRoot, ListBoxItemIndicator };
+export type { ListBoxItemRootProps, ListBoxItemIndicatorProps };