@astroapps/aria-base 1.3.2 → 1.5.0

package/lib/Button.d.ts

@@ -1,5 +1,5 @@
-import { AriaButtonProps } from "react-aria";
+import { ButtonProps as RACButtonProps } from "react-aria-components";
 import React from "react";
-export declare function Button({ children, className, ...props }: AriaButtonProps<"button"> & {
+export declare function Button({ children, className, ...props }: RACButtonProps & {
     className?: string;
 }): React.JSX.Element;

package/lib/Field.d.ts

@@ -0,0 +1,73 @@
+import React from "react";
+import { FieldErrorProps, GroupProps, InputProps, LabelProps, TextProps } from "react-aria-components";
+export declare function Label(props: LabelProps): React.JSX.Element;
+export declare function Description(props: TextProps): React.JSX.Element;
+export declare function FieldError(props: FieldErrorProps): React.JSX.Element;
+export declare const fieldBorderStyles: import("tailwind-variants").TVReturnType<{
+    isFocusWithin: {
+        false: string;
+        true: string;
+    };
+    isInvalid: {
+        true: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+}, undefined, "transition", {
+    isFocusWithin: {
+        false: string;
+        true: string;
+    };
+    isInvalid: {
+        true: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isFocusWithin: {
+        false: string;
+        true: string;
+    };
+    isInvalid: {
+        true: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+}, undefined, "transition", unknown, unknown, undefined>>;
+export declare const fieldGroupStyles: import("tailwind-variants").TVReturnType<{
+    isFocusWithin: {
+        false: string;
+        true: string;
+    };
+    isInvalid: {
+        true: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+}, undefined, "group flex items-center h-9 box-border bg-white dark:bg-neutral-900 forced-colors:bg-[Field] border rounded-lg overflow-hidden transition", {
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, "outline outline-secondary-600 dark:outline-secondary-500 forced-colors:outline-[Highlight] outline-offset-2", {
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, "outline outline-secondary-600 dark:outline-secondary-500 forced-colors:outline-[Highlight] outline-offset-2", unknown, unknown, undefined>>>;
+export declare function FieldGroup(props: GroupProps): React.JSX.Element;
+export declare function Input(props: InputProps): React.JSX.Element;

package/lib/ListBox.d.ts

@@ -0,0 +1,76 @@
+import React from "react";
+import { ListBoxProps as AriaListBoxProps, ListBoxItemProps, SectionProps } from "react-aria-components";
+interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, "layout" | "orientation"> {
+}
+export declare function ListBox<T extends object>({ children, ...props }: ListBoxProps<T>): React.JSX.Element;
+export declare const itemStyles: import("tailwind-variants").TVReturnType<{
+    isSelected: {
+        false: string;
+        true: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+}, undefined, "group relative flex items-center gap-8 cursor-default select-none py-1.5 px-2.5 rounded-md will-change-transform text-sm forced-color-adjust-none", {
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, "outline outline-secondary-600 dark:outline-secondary-500 forced-colors:outline-[Highlight] outline-offset-2", {
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, "outline outline-secondary-600 dark:outline-secondary-500 forced-colors:outline-[Highlight] outline-offset-2", unknown, unknown, undefined>>>;
+export declare function ListBoxItem(props: ListBoxItemProps): React.JSX.Element;
+export declare const dropdownItemStyles: import("tailwind-variants").TVReturnType<{
+    isDisabled: {
+        false: string;
+        true: string;
+    };
+    isPressed: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+}, undefined, "group flex items-center gap-4 cursor-default select-none py-2 pl-3 pr-3 selected:pr-1 rounded-lg outline outline-0 text-sm forced-color-adjust-none no-underline [&[href]]:cursor-pointer [-webkit-tap-highlight-color:transparent]", {
+    isDisabled: {
+        false: string;
+        true: string;
+    };
+    isPressed: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isDisabled: {
+        false: string;
+        true: string;
+    };
+    isPressed: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+}, undefined, "group flex items-center gap-4 cursor-default select-none py-2 pl-3 pr-3 selected:pr-1 rounded-lg outline outline-0 text-sm forced-color-adjust-none no-underline [&[href]]:cursor-pointer [-webkit-tap-highlight-color:transparent]", unknown, unknown, undefined>>;
+export declare function DropdownItem(props: ListBoxItemProps): React.JSX.Element;
+export interface DropdownSectionProps<T> extends SectionProps<T> {
+    title?: string;
+    items?: any;
+}
+export declare function DropdownSection<T extends object>(props: DropdownSectionProps<T>): React.JSX.Element;
+export {};

package/lib/Modal.d.ts

@@ -12,6 +12,7 @@ export declare const DefaultModalDialogClasses: ModalDialogClasses;
 export interface ModalProps extends AriaModalOverlayProps, ModalClasses {
     state: OverlayTriggerState;
     children: React.ReactElement;
+    portalContainer?: Element;
 }
 export interface ModalDialogTriggerProps extends OverlayTriggerProps, AriaModalOverlayProps {
     trigger: React.ReactElement;
@@ -20,6 +21,6 @@ export interface ModalDialogTriggerProps extends OverlayTriggerProps, AriaModalO
 export interface ModalDialogProps extends ModalDialogTriggerProps, Omit<DialogProps, "children">, ModalDialogClasses {
     footer?: React.ReactNode;
 }
-export declare function Modal({ state, children, isDismissable, isKeyboardDismissDisabled, shouldCloseOnInteractOutside, ...props }: ModalProps): React.JSX.Element;
+export declare function Modal({ state, children, isDismissable, isKeyboardDismissDisabled, shouldCloseOnInteractOutside, portalContainer, ...props }: ModalProps): React.JSX.Element;
 export declare function ModalTrigger({ trigger, children, ...props }: ModalDialogTriggerProps): React.JSX.Element;
 export declare function ModalDialog({ children, footer, defaultOpen, isDismissable, titleClass, ...props }: ModalDialogProps): React.JSX.Element;

package/lib/Popover.d.ts

@@ -1,22 +1,19 @@
-import type { AriaPopoverProps } from "react-aria";
-import type { OverlayTriggerState } from "react-stately";
-import React, { ReactNode } from "react";
-import { DOMAttributes } from "@react-types/shared";
+import { PopoverProps as AriaPopoverProps } from "react-aria-components";
+import React from "react";
+import { OverlayTriggerState } from "react-stately";
+export interface PopoverProps extends Omit<AriaPopoverProps, "children"> {
+    showArrow?: boolean;
+    children: React.ReactNode;
+}
+export declare function Popover({ children, showArrow, className, ...props }: PopoverProps): React.JSX.Element;
 export interface PopoverClasses {
     underlayClass?: string;
     popoverClass?: string;
 }
-export interface PopoverProps extends Omit<AriaPopoverProps, "popoverRef">, PopoverClasses {
-    children: React.ReactNode;
-    state: OverlayTriggerState;
-    portalContainer?: Element;
-    renderArrow?: (props: DOMAttributes) => ReactNode;
-}
 export declare const DefaultPopoverClasses: {
     underlayClass: string;
     popoverClass: string;
 };
-export declare function Popover({ children, state, renderArrow, portalContainer, ...props }: PopoverProps): React.JSX.Element;
 export declare function createOverlayState(ref: {
     value: boolean;
 }): OverlayTriggerState;

package/lib/Select.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { SelectProps as AriaSelectProps, ListBoxItemProps, ValidationResult } from "react-aria-components";
+import { DropdownSectionProps } from "./ListBox";
+export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, "children"> {
+    label?: string;
+    description?: string;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    items?: Iterable<T>;
+    children: React.ReactNode | ((item: T) => React.ReactNode);
+}
+export declare function Select<T extends object>({ label, description, errorMessage, children, items, ...props }: SelectProps<T>): React.JSX.Element;
+export declare function SelectItem(props: ListBoxItemProps): React.JSX.Element;
+export declare function SelectSection<T extends object>(props: DropdownSectionProps<T>): React.JSX.Element;

package/lib/index.d.ts

@@ -2,3 +2,6 @@ export * from "./Button";
 export * from "./Dialog";
 export * from "./Popover";
 export * from "./Modal";
+export * from "./Select";
+export * from "./utils";
+export * from "./Field";

package/lib/index.js

@@ -1,6 +1,9 @@
-var reactAria = require('react-aria');
+var reactAriaComponents = require('react-aria-components');
 var React = require('react');
+var reactAria = require('react-aria');
+var tailwindVariants = require('tailwind-variants');
 var reactStately = require('react-stately');
+var tailwindMerge = require('tailwind-merge');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -19,32 +22,30 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
 }
 
-var _excluded$3 = ["children", "className"];
+var _excluded$4 = ["children", "className"];
 function Button(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var ref = React.useRef(null);
-  var _useButton = reactAria.useButton(props, ref),
-    buttonProps = _useButton.buttonProps;
-  return /*#__PURE__*/React__default["default"].createElement("button", _extends({}, buttonProps, {
-    className: className,
-    children: children
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Button, _extends({}, props, {
+    className: className
+  }), reactAriaComponents.composeRenderProps(children, function (children, _ref2) {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children);
   }));
 }
 
-var _excluded$2 = ["title", "children"];
+var _excluded$3 = ["title", "children"];
 var DefaultDialogClasses = {};
 function Dialog(_ref) {
   var title = _ref.title,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var ref = React.useRef(null);
   var _DefaultDialogClasses = _extends({}, DefaultDialogClasses, props),
     className = _DefaultDialogClasses.className,
@@ -60,41 +61,47 @@ function Dialog(_ref) {
   }), title), children);
 }
 
-var _excluded$1 = ["children", "state", "renderArrow", "portalContainer"];
+var _excluded$2 = ["children", "showArrow", "className"];
+var styles$1 = tailwindVariants.tv({
+  base: "font-sans bg-white dark:bg-neutral-900/70 dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas] shadow-2xl rounded-xl bg-clip-padding border border-black/10 dark:border-white/10 text-neutral-700 dark:text-neutral-300 outline-0",
+  variants: {
+    isEntering: {
+      "true": "animate-in fade-in placement-bottom:slide-in-from-top-1 placement-top:slide-in-from-bottom-1 placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 ease-out duration-200"
+    },
+    isExiting: {
+      "true": "animate-out fade-out placement-bottom:slide-out-to-top-1 placement-top:slide-out-to-bottom-1 placement-left:slide-out-to-right-1 placement-right:slide-out-to-left-1 ease-in duration-150"
+    }
+  }
+});
+function Popover(_ref) {
+  var children = _ref.children,
+    showArrow = _ref.showArrow,
+    className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var offset = showArrow ? 12 : 8;
+  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Popover, _extends({
+    offset: offset
+  }, props, {
+    className: reactAriaComponents.composeRenderProps(className, function (className, renderProps) {
+      return styles$1(_extends({}, renderProps, {
+        className: className
+      }));
+    })
+  }), showArrow && /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.OverlayArrow, {
+    className: "group"
+  }, /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    className: "block fill-white dark:fill-[#1f1f21] forced-colors:fill-[Canvas] stroke-1 stroke-black/10 dark:stroke-neutral-700 forced-colors:stroke-[ButtonBorder] group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M0 0 L6 6 L12 0"
+  }))), children);
+}
 var DefaultPopoverClasses = {
   underlayClass: "fixed inset-0",
   popoverClass: "bg-white"
 };
-function Popover(_ref) {
-  var children = _ref.children,
-    state = _ref.state,
-    renderArrow = _ref.renderArrow,
-    portalContainer = _ref.portalContainer,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var popoverRef = React.useRef(null);
-  var _DefaultPopoverClasse = _extends({}, DefaultPopoverClasses, props),
-    popoverClass = _DefaultPopoverClasse.popoverClass,
-    underlayClass = _DefaultPopoverClasse.underlayClass;
-  var _usePopover = reactAria.usePopover(_extends({}, props, {
-      popoverRef: popoverRef
-    }), state),
-    popoverProps = _usePopover.popoverProps,
-    underlayProps = _usePopover.underlayProps,
-    arrowProps = _usePopover.arrowProps;
-  return /*#__PURE__*/React__default["default"].createElement(reactAria.Overlay, {
-    portalContainer: portalContainer
-  }, /*#__PURE__*/React__default["default"].createElement("div", _extends({}, underlayProps, {
-    className: underlayClass
-  })), /*#__PURE__*/React__default["default"].createElement("div", _extends({}, popoverProps, {
-    ref: popoverRef,
-    className: popoverClass,
-    style: popoverProps.style
-  }), renderArrow == null ? void 0 : renderArrow(arrowProps), /*#__PURE__*/React__default["default"].createElement(reactAria.DismissButton, {
-    onDismiss: state.close
-  }), children, /*#__PURE__*/React__default["default"].createElement(reactAria.DismissButton, {
-    onDismiss: state.close
-  })));
-}
 function createOverlayState(ref) {
   return {
     isOpen: ref.value,
@@ -113,7 +120,7 @@ function createOverlayState(ref) {
   };
 }
 
-var _excluded = ["state", "children", "isDismissable", "isKeyboardDismissDisabled", "shouldCloseOnInteractOutside"],
+var _excluded$1 = ["state", "children", "isDismissable", "isKeyboardDismissDisabled", "shouldCloseOnInteractOutside", "portalContainer"],
   _excluded2 = ["trigger", "children"],
   _excluded3 = ["onPress"],
   _excluded4 = ["children", "footer", "defaultOpen", "isDismissable", "titleClass"];
@@ -127,7 +134,8 @@ function Modal(_ref) {
     isDismissable = _ref.isDismissable,
     isKeyboardDismissDisabled = _ref.isKeyboardDismissDisabled,
     shouldCloseOnInteractOutside = _ref.shouldCloseOnInteractOutside,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    portalContainer = _ref.portalContainer,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var ref = React__default["default"].useRef(null);
   var _useModalOverlay = reactAria.useModalOverlay({
       isDismissable: isDismissable,
@@ -139,7 +147,9 @@ function Modal(_ref) {
   var _DefaultModalDialogCl = _extends({}, DefaultModalDialogClasses, props),
     underlayClass = _DefaultModalDialogCl.underlayClass,
     containerClass = _DefaultModalDialogCl.containerClass;
-  return /*#__PURE__*/React__default["default"].createElement(reactAria.Overlay, null, /*#__PURE__*/React__default["default"].createElement("div", _extends({
+  return /*#__PURE__*/React__default["default"].createElement(reactAria.Overlay, {
+    portalContainer: portalContainer
+  }, /*#__PURE__*/React__default["default"].createElement("div", _extends({
     className: underlayClass
   }, underlayProps), /*#__PURE__*/React__default["default"].createElement("div", _extends({}, modalProps, {
     ref: ref,
@@ -158,7 +168,7 @@ function ModalTrigger(_ref2) {
     overlayProps = _useOverlayTrigger.overlayProps;
   var onPress = triggerProps.onPress,
     otherTriggerProps = _objectWithoutPropertiesLoose(triggerProps, _excluded3);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].cloneElement(trigger, _extends({}, otherTriggerProps, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "// TODO: react-19", React__default["default"].cloneElement(trigger, _extends({}, otherTriggerProps, {
     onClick: onPress
   })), state.isOpen && /*#__PURE__*/React__default["default"].createElement(Modal, _extends({
     state: state
@@ -182,14 +192,196 @@ function ModalDialog(_ref3) {
   }, props), children, footer));
 }
 
+var focusRing = tailwindVariants.tv({
+  base: "outline outline-secondary-600 dark:outline-secondary-500 forced-colors:outline-[Highlight] outline-offset-2",
+  variants: {
+    isFocusVisible: {
+      "false": "outline-0",
+      "true": "outline-2"
+    }
+  }
+});
+function composeTailwindRenderProps(className, tw) {
+  return reactAriaComponents.composeRenderProps(className, function (className) {
+    return tailwindMerge.twMerge(tw, className);
+  });
+}
+
+function Label(props) {
+  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Label, _extends({}, props, {
+    className: tailwindMerge.twMerge("font-sans text-sm text-neutral-600 dark:text-neutral-300 font-medium cursor-default w-fit", props.className)
+  }));
+}
+function Description(props) {
+  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Text, _extends({}, props, {
+    slot: "description",
+    className: tailwindMerge.twMerge("text-sm text-neutral-600", props.className)
+  }));
+}
+function FieldError(props) {
+  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.FieldError, _extends({}, props, {
+    className: composeTailwindRenderProps(props.className, "text-sm text-red-600 forced-colors:text-[Mark]")
+  }));
+}
+var fieldBorderStyles = tailwindVariants.tv({
+  base: "transition",
+  variants: {
+    isFocusWithin: {
+      "false": "border-neutral-300 hover:border-neutral-400 dark:border-neutral-600 dark:hover:border-neutral-500 forced-colors:border-[ButtonBorder]",
+      "true": "border-neutral-600 dark:border-neutral-300 forced-colors:border-[Highlight]"
+    },
+    isInvalid: {
+      "true": "border-red-600 dark:border-red-600 forced-colors:border-[Mark]"
+    },
+    isDisabled: {
+      "true": "border-neutral-200 dark:border-neutral-700 forced-colors:border-[GrayText]"
+    }
+  }
+});
+var fieldGroupStyles = tailwindVariants.tv({
+  extend: focusRing,
+  base: "group flex items-center h-9 box-border bg-white dark:bg-neutral-900 forced-colors:bg-[Field] border rounded-lg overflow-hidden transition",
+  variants: fieldBorderStyles.variants
+});
+function FieldGroup(props) {
+  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Group, _extends({}, props, {
+    className: reactAriaComponents.composeRenderProps(props.className, function (className, renderProps) {
+      return fieldGroupStyles(_extends({}, renderProps, {
+        className: className
+      }));
+    })
+  }));
+}
+function Input(props) {
+  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Input, _extends({}, props, {
+    className: composeTailwindRenderProps(props.className, "px-3 py-0 min-h-9 flex-1 min-w-0 border-0 outline outline-0 bg-white dark:bg-neutral-900 font-sans text-sm text-neutral-800 dark:text-neutral-200 placeholder:text-neutral-600 dark:placeholder:text-neutral-400 disabled:text-neutral-200 dark:disabled:text-neutral-600 disabled:placeholder:text-neutral-200 dark:disabled:placeholder:text-neutral-600 [-webkit-tap-highlight-color:transparent]")
+  }));
+}
+
+tailwindVariants.tv({
+  extend: focusRing,
+  base: "group relative flex items-center gap-8 cursor-default select-none py-1.5 px-2.5 rounded-md will-change-transform text-sm forced-color-adjust-none",
+  variants: {
+    isSelected: {
+      "false": "text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 pressed:bg-neutral-100 dark:hover:bg-neutral-800 dark:pressed:bg-neutral-800 -outline-offset-2",
+      "true": "bg-secondary-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] [&:has(+[data-selected])]:rounded-b-none [&+[data-selected]]:rounded-t-none -outline-offset-4 outline-white dark:outline-white forced-colors:outline-[HighlightText]"
+    },
+    isDisabled: {
+      "true": "text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]"
+    }
+  }
+});
+var dropdownItemStyles = tailwindVariants.tv({
+  base: "group flex items-center gap-4 cursor-default select-none py-2 pl-3 pr-3 selected:pr-1 rounded-lg outline outline-0 text-sm forced-color-adjust-none no-underline [&[href]]:cursor-pointer [-webkit-tap-highlight-color:transparent]",
+  variants: {
+    isDisabled: {
+      "false": "text-neutral-900 dark:text-neutral-100",
+      "true": "text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]"
+    },
+    isPressed: {
+      "true": "bg-neutral-100 dark:bg-neutral-800"
+    },
+    isFocused: {
+      "true": "bg-secondary-600 dark:bg-secondary-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
+    }
+  },
+  compoundVariants: [{
+    isFocused: false,
+    isOpen: true,
+    className: "bg-neutral-100 dark:bg-neutral-700/60"
+  }]
+});
+function DropdownItem(props) {
+  var textValue = props.textValue || (typeof props.children === "string" ? props.children : undefined);
+  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.ListBoxItem, _extends({}, props, {
+    textValue: textValue,
+    className: dropdownItemStyles
+  }), reactAriaComponents.composeRenderProps(props.children, function (children, _ref2) {
+    var isSelected = _ref2.isSelected;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "flex items-center flex-1 gap-2 font-normal truncate group-selected:font-semibold"
+    }, children), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "flex items-center w-5"
+    }, isSelected && /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "w-4 h-4 fa fa-check"
+    })));
+  }));
+}
+function DropdownSection(props) {
+  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.ListBoxSection, {
+    className: "first:-mt-[5px] after:content-[''] after:block after:h-[5px] last:after:hidden"
+  }, /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Header, {
+    className: "text-sm font-semibold text-neutral-500 dark:text-neutral-300 px-4 py-1 truncate sticky -top-[5px] -mt-px -mx-1 z-10 bg-neutral-100/60 dark:bg-neutral-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-neutral-100 border-y border-y-neutral-200 dark:border-y-neutral-700 [&+*]:mt-1"
+  }, props.title), /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Collection, {
+    items: props.items
+  }, props.children));
+}
+
+var _excluded = ["label", "description", "errorMessage", "children", "items"];
+var styles = tailwindVariants.tv({
+  extend: focusRing,
+  base: "flex items-center text-start gap-4 w-full font-sans border border-black/10 dark:border-white/10 cursor-default rounded-lg pl-3 pr-2 h-9 min-w-[64px] transition bg-neutral-50 dark:bg-neutral-700 [-webkit-tap-highlight-color:transparent]",
+  variants: {
+    isDisabled: {
+      "false": "text-neutral-800 dark:text-neutral-300 hover:bg-neutral-100 pressed:bg-neutral-200 dark:hover:bg-neutral-600 dark:pressed:bg-neutral-500 group-invalid:outline group-invalid:outline-red-600 forced-colors:group-invalid:outline-[Mark]",
+      "true": "border-transparent dark:border-transparent text-neutral-200 dark:text-neutral-600 forced-colors:text-[GrayText] bg-neutral-100 dark:bg-neutral-800"
+    }
+  }
+});
+function Select(_ref) {
+  var label = _ref.label,
+    description = _ref.description,
+    errorMessage = _ref.errorMessage,
+    children = _ref.children,
+    items = _ref.items,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Select, _extends({}, props, {
+    className: composeTailwindRenderProps(props.className, "group flex flex-col gap-1 relative font-sans")
+  }), label && /*#__PURE__*/React__default["default"].createElement(Label, null, label), /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Button, {
+    className: styles
+  }, /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.SelectValue, {
+    className: "flex-1 text-sm"
+  }, function (_ref2) {
+    var selectedText = _ref2.selectedText,
+      defaultChildren = _ref2.defaultChildren;
+    return selectedText || defaultChildren;
+  }), /*#__PURE__*/React__default["default"].createElement("i", {
+    "aria-hidden": true,
+    className: "w-4 h-4 fa fa-chevron-down text-neutral-600 dark:text-neutral-400 forced-colors:text-[ButtonText] group-disabled:text-neutral-200 dark:group-disabled:text-neutral-600 forced-colors:group-disabled:text-[GrayText]"
+  })), description && /*#__PURE__*/React__default["default"].createElement(Description, null, description), /*#__PURE__*/React__default["default"].createElement(FieldError, null, errorMessage), /*#__PURE__*/React__default["default"].createElement(Popover, {
+    className: "min-w-(--trigger-width)"
+  }, /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.ListBox, {
+    items: items,
+    className: "outline-hidden box-border p-1 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]"
+  }, children)));
+}
+function SelectItem(props) {
+  return /*#__PURE__*/React__default["default"].createElement(DropdownItem, props);
+}
+function SelectSection(props) {
+  return /*#__PURE__*/React__default["default"].createElement(DropdownSection, props);
+}
+
 exports.Button = Button;
 exports.DefaultDialogClasses = DefaultDialogClasses;
 exports.DefaultModalDialogClasses = DefaultModalDialogClasses;
 exports.DefaultPopoverClasses = DefaultPopoverClasses;
+exports.Description = Description;
 exports.Dialog = Dialog;
+exports.FieldError = FieldError;
+exports.FieldGroup = FieldGroup;
+exports.Input = Input;
+exports.Label = Label;
 exports.Modal = Modal;
 exports.ModalDialog = ModalDialog;
 exports.ModalTrigger = ModalTrigger;
 exports.Popover = Popover;
+exports.Select = Select;
+exports.SelectItem = SelectItem;
+exports.SelectSection = SelectSection;
+exports.composeTailwindRenderProps = composeTailwindRenderProps;
 exports.createOverlayState = createOverlayState;
+exports.fieldBorderStyles = fieldBorderStyles;
+exports.fieldGroupStyles = fieldGroupStyles;
+exports.focusRing = focusRing;
 //# sourceMappingURL=index.js.map