@astroapps/aria-base 1.4.0 → 1.5.0

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 }; }
 
@@ -25,26 +28,24 @@ function _objectWithoutPropertiesLoose(r, e) {
   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", "portalContainer"],
+var _excluded$1 = ["state", "children", "isDismissable", "isKeyboardDismissDisabled", "shouldCloseOnInteractOutside", "portalContainer"],
   _excluded2 = ["trigger", "children"],
   _excluded3 = ["onPress"],
   _excluded4 = ["children", "footer", "defaultOpen", "isDismissable", "titleClass"];
@@ -128,7 +135,7 @@ function Modal(_ref) {
     isKeyboardDismissDisabled = _ref.isKeyboardDismissDisabled,
     shouldCloseOnInteractOutside = _ref.shouldCloseOnInteractOutside,
     portalContainer = _ref.portalContainer,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var ref = React__default["default"].useRef(null);
   var _useModalOverlay = reactAria.useModalOverlay({
       isDismissable: isDismissable,
@@ -185,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

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/Button.tsx","../src/Dialog.tsx","../src/Popover.tsx","../src/Modal.tsx"],"sourcesContent":["import { AriaButtonProps, useButton } from \"react-aria\";\nimport React, { useRef } from \"react\";\n\nexport function Button({\n  children,\n  className,\n  ...props\n}: AriaButtonProps<\"button\"> & { className?: string }) {\n  const ref = useRef(null);\n  const { buttonProps } = useButton(props, ref);\n  return <button {...buttonProps} className={className} children={children} />;\n}\n","import type { AriaDialogProps } from \"react-aria\";\nimport { useDialog } from \"react-aria\";\nimport React, { useRef } from \"react\";\n\nexport interface DialogClasses {\n  className?: string;\n  titleClass?: string;\n}\nexport interface DialogProps extends AriaDialogProps, DialogClasses {\n  title?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nexport const DefaultDialogClasses: DialogClasses = {};\nexport function Dialog({ title, children, ...props }: DialogProps) {\n  let ref = useRef(null);\n  const { className, titleClass } = {\n    ...DefaultDialogClasses,\n    ...props,\n  };\n  let { dialogProps, titleProps } = useDialog(props, ref);\n\n  return (\n    <div {...dialogProps} ref={ref} className={className}>\n      {title && (\n        <h3 {...titleProps} className={titleClass}>\n          {title}\n        </h3>\n      )}\n      {children}\n    </div>\n  );\n}\n","import type { AriaPopoverProps } from \"react-aria\";\nimport { DismissButton, Overlay, usePopover } from \"react-aria\";\nimport type { OverlayTriggerState } from \"react-stately\";\nimport React, { ReactNode, useRef } from \"react\";\nimport { DOMAttributes } from \"@react-types/shared\";\n\nexport interface PopoverClasses {\n  underlayClass?: string;\n  popoverClass?: string;\n}\nexport interface PopoverProps\n  extends Omit<AriaPopoverProps, \"popoverRef\">,\n    PopoverClasses {\n  children: React.ReactNode;\n  state: OverlayTriggerState;\n  portalContainer?: Element;\n  renderArrow?: (props: DOMAttributes) => ReactNode;\n}\n\nexport const DefaultPopoverClasses = {\n  underlayClass: \"fixed inset-0\",\n  popoverClass: \"bg-white\",\n};\n\nexport function Popover({\n  children,\n  state,\n  renderArrow,\n  portalContainer,\n  ...props\n}: PopoverProps) {\n  let popoverRef = useRef(null);\n  const { popoverClass, underlayClass } = {\n    ...DefaultPopoverClasses,\n    ...props,\n  };\n  let { popoverProps, underlayProps, arrowProps } = usePopover(\n    {\n      ...props,\n      popoverRef,\n    },\n    state,\n  );\n\n  return (\n    <Overlay portalContainer={portalContainer}>\n      <div {...underlayProps} className={underlayClass} />\n      <div\n        {...popoverProps}\n        ref={popoverRef}\n        className={popoverClass}\n        style={popoverProps.style}\n      >\n        {renderArrow?.(arrowProps)}\n        <DismissButton onDismiss={state.close} />\n        {children}\n        <DismissButton onDismiss={state.close} />\n      </div>\n    </Overlay>\n  );\n}\n\nexport function createOverlayState(ref: {\n  value: boolean;\n}): OverlayTriggerState {\n  return {\n    isOpen: ref.value,\n    setOpen: (o) => (ref.value = o),\n    open: () => (ref.value = true),\n    close: () => (ref.value = false),\n    toggle: () => (ref.value = !ref.value),\n  };\n}\n","import React from \"react\";\nimport {\n  AriaModalOverlayProps,\n  Overlay,\n  useModalOverlay,\n  useOverlayTrigger,\n} from \"react-aria\";\nimport {\n  OverlayTriggerProps,\n  OverlayTriggerState,\n  useOverlayTriggerState,\n} from \"react-stately\";\nimport { Dialog, DialogProps, DialogClasses } from \"./Dialog\";\n\nexport interface ModalClasses {\n  underlayClass?: string;\n  containerClass?: string;\n}\n\nexport interface ModalDialogClasses extends DialogClasses, ModalClasses {}\n\nexport const DefaultModalDialogClasses: ModalDialogClasses = {\n  underlayClass:\n    \"fixed z-[100] inset-0 bg-black bg-opacity-50 flex items-center justify-center backdrop-blur-[2px]\",\n  containerClass:\n    \"relative m-4 p-4 w-3/5 min-w-[400px] max-w-[80%] rounded-lg bg-white shadow-sm\",\n};\n\nexport interface ModalProps extends AriaModalOverlayProps, ModalClasses {\n  state: OverlayTriggerState;\n  children: React.ReactElement;\n  portalContainer?: Element;\n}\n\nexport interface ModalDialogTriggerProps\n  extends OverlayTriggerProps,\n    AriaModalOverlayProps {\n  trigger: React.ReactElement;\n  children: React.ReactElement;\n}\n\nexport interface ModalDialogProps\n  extends ModalDialogTriggerProps,\n    Omit<DialogProps, \"children\">,\n    ModalDialogClasses {\n  footer?: React.ReactNode;\n}\n\nexport function Modal({\n  state,\n  children,\n  isDismissable,\n  isKeyboardDismissDisabled,\n  shouldCloseOnInteractOutside,\n  portalContainer,\n  ...props\n}: ModalProps) {\n  let ref = React.useRef(null);\n  let { modalProps, underlayProps } = useModalOverlay(\n    { isDismissable, isKeyboardDismissDisabled, shouldCloseOnInteractOutside },\n    state,\n    ref,\n  );\n\n  const { underlayClass, containerClass } = {\n    ...DefaultModalDialogClasses,\n    ...props,\n  };\n\n  return (\n    <Overlay portalContainer={portalContainer}>\n      <div className={underlayClass} {...underlayProps}>\n        <div {...modalProps} ref={ref} className={containerClass}>\n          {children}\n        </div>\n      </div>\n    </Overlay>\n  );\n}\n\nexport function ModalTrigger({\n  trigger,\n  children,\n  ...props\n}: ModalDialogTriggerProps) {\n  let state = useOverlayTriggerState({ ...props });\n  let { triggerProps, overlayProps } = useOverlayTrigger(\n    { type: \"dialog\" },\n    state,\n  );\n\n  const { onPress, ...otherTriggerProps } = triggerProps;\n  return (\n    <>\n      // TODO: react-19\n      {React.cloneElement(trigger, {\n        ...otherTriggerProps,\n        onClick: onPress,\n      } as any)}\n      {state.isOpen && (\n        <Modal state={state} {...props}>\n          {React.cloneElement(children, overlayProps)}\n        </Modal>\n      )}\n    </>\n  );\n}\n\nexport function ModalDialog({\n  children,\n  footer,\n  defaultOpen = false,\n  isDismissable = true,\n  titleClass = \"text-2xl font-bold\",\n  ...props\n}: ModalDialogProps) {\n  const { className } = {\n    ...DefaultModalDialogClasses,\n    ...props,\n  };\n\n  return (\n    <ModalTrigger\n      defaultOpen={defaultOpen}\n      isDismissable={isDismissable}\n      {...props}\n    >\n      <Dialog className={className} {...props}>\n        {children}\n        {footer}\n      </Dialog>\n    </ModalTrigger>\n  );\n}\n"],"names":["Button","_ref","children","className","props","_objectWithoutPropertiesLoose","_excluded","ref","useRef","_useButton","useButton","buttonProps","React","createElement","_extends","DefaultDialogClasses","Dialog","title","_DefaultDialogClasses","titleClass","_useDialog","useDialog","dialogProps","titleProps","DefaultPopoverClasses","underlayClass","popoverClass","Popover","state","renderArrow","portalContainer","popoverRef","_DefaultPopoverClasse","_usePopover","usePopover","popoverProps","underlayProps","arrowProps","Overlay","style","DismissButton","onDismiss","close","createOverlayState","isOpen","value","setOpen","o","open","toggle","DefaultModalDialogClasses","containerClass","Modal","isDismissable","isKeyboardDismissDisabled","shouldCloseOnInteractOutside","_useModalOverlay","useModalOverlay","modalProps","_DefaultModalDialogCl","ModalTrigger","_ref2","trigger","_excluded2","useOverlayTriggerState","_useOverlayTrigger","useOverlayTrigger","type","triggerProps","overlayProps","onPress","otherTriggerProps","_excluded3","Fragment","cloneElement","onClick","ModalDialog","_ref3","footer","_ref3$defaultOpen","defaultOpen","_ref3$isDismissable","_excluded4","_DefaultModalDialogCl2"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGM,SAAUA,MAAMA,CAAAC,IAAA,EAI+B;AAAA,EAAA,IAHnDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,SAAS,GAAAF,IAAA,CAATE,SAAS;AACNC,IAAAA,KAAK,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,WAAA,CAAA,CAAA;AAER,EAAA,IAAMC,GAAG,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAA;AACxB,EAAA,IAAAC,UAAA,GAAwBC,mBAAS,CAACN,KAAK,EAAEG,GAAG,CAAC;IAArCI,WAAW,GAAAF,UAAA,CAAXE,WAAW,CAAA;AACnB,EAAA,oBAAOC,yBAAA,CAAAC,aAAA,CAAAC,QAAAA,EAAAA,QAAA,KAAYH,WAAW,EAAA;AAAER,IAAAA,SAAS,EAAEA,SAAU;AAACD,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,EAAG,CAAA;AAC9E;;;ACEaa,IAAAA,oBAAoB,GAAkB,GAAE;AAC/C,SAAUC,MAAMA,CAAAf,IAAA,EAA2C;AAAA,EAAA,IAAxCgB,KAAK,GAAAhB,IAAA,CAALgB,KAAK;IAAEf,QAAQ,GAAAD,IAAA,CAARC,QAAQ;AAAKE,IAAAA,KAAK,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,WAAA,CAAA,CAAA;AAChD,EAAA,IAAIC,GAAG,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAA;AACtB,EAAA,IAAAU,qBAAA,GAAAJ,QAAA,CACKC,EAAAA,EAAAA,oBAAoB,EACpBX,KAAK,CAAA;IAFFD,SAAS,GAAAe,qBAAA,CAATf,SAAS;IAAEgB,UAAU,GAAAD,qBAAA,CAAVC,UAAU,CAAA;AAI7B,EAAA,IAAAC,UAAA,GAAkCC,mBAAS,CAACjB,KAAK,EAAEG,GAAG,CAAC;IAAjDe,WAAW,GAAAF,UAAA,CAAXE,WAAW;IAAEC,UAAU,GAAAH,UAAA,CAAVG,UAAU,CAAA;AAE7B,EAAA,oBACEX,yBAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,QAAA,KAASQ,WAAW,EAAA;AAAEf,IAAAA,GAAG,EAAEA,GAAI;AAACJ,IAAAA,SAAS,EAAEA,SAAAA;GACxCc,CAAAA,EAAAA,KAAK,iBACJL,yBAAA,CAAAC,aAAA,CAAAC,IAAAA,EAAAA,QAAA,KAAQS,UAAU,EAAA;AAAEpB,IAAAA,SAAS,EAAEgB,UAAAA;AAAW,GAAA,CAAA,EACvCF,KACC,CACL,EACAf,QACE,CAAC,CAAA;AAEV;;;ACbO,IAAMsB,qBAAqB,GAAG;AACnCC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,YAAY,EAAE,UAAA;EACf;AAEe,SAAAC,OAAOA,CAAA1B,IAAA,EAMR;AAAA,EAAA,IALbC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACR0B,KAAK,GAAA3B,IAAA,CAAL2B,KAAK;IACLC,WAAW,GAAA5B,IAAA,CAAX4B,WAAW;IACXC,eAAe,GAAA7B,IAAA,CAAf6B,eAAe;AACZ1B,IAAAA,KAAK,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,WAAA,CAAA,CAAA;AAER,EAAA,IAAIyB,UAAU,GAAGvB,YAAM,CAAC,IAAI,CAAC,CAAA;AAC7B,EAAA,IAAAwB,qBAAA,GAAAlB,QAAA,CACKU,EAAAA,EAAAA,qBAAqB,EACrBpB,KAAK,CAAA;IAFFsB,YAAY,GAAAM,qBAAA,CAAZN,YAAY;IAAED,aAAa,GAAAO,qBAAA,CAAbP,aAAa,CAAA;AAInC,EAAA,IAAAQ,WAAA,GAAkDC,oBAAU,CAAApB,QAAA,KAErDV,KAAK,EAAA;AACR2B,MAAAA,UAAU,EAAVA,UAAAA;AAAU,KAAA,CAAA,EAEZH,KAAK,CACN;IANKO,YAAY,GAAAF,WAAA,CAAZE,YAAY;IAAEC,aAAa,GAAAH,WAAA,CAAbG,aAAa;IAAEC,UAAU,GAAAJ,WAAA,CAAVI,UAAU,CAAA;AAQ7C,EAAA,oBACEzB,yBAAA,CAAAC,aAAA,CAACyB,iBAAO,EAAA;AAACR,IAAAA,eAAe,EAAEA,eAAAA;AAAgB,GAAA,eACxClB,yBAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,QAAA,KAASsB,aAAa,EAAA;AAAEjC,IAAAA,SAAS,EAAEsB,aAAAA;GACnC,CAAA,CAAA,eAAAb,yBAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,QAAA,KACMqB,YAAY,EAAA;AAChB5B,IAAAA,GAAG,EAAEwB,UAAW;AAChB5B,IAAAA,SAAS,EAAEuB,YAAa;IACxBa,KAAK,EAAEJ,YAAY,CAACI,KAAAA;GAEnBV,CAAAA,EAAAA,WAAW,IAAXA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,WAAW,CAAGQ,UAAU,CAAC,eAC1BzB,yBAAA,CAAAC,aAAA,CAAC2B,uBAAa,EAAA;IAACC,SAAS,EAAEb,KAAK,CAACc,KAAAA;GAChC,CAAA,EAACxC,QAAQ,eACTU,yBAAA,CAAAC,aAAA,CAAC2B,uBAAa,EAAA;IAACC,SAAS,EAAEb,KAAK,CAACc,KAAAA;GAClC,CAAK,CACE,CAAC,CAAA;AAEd,CAAA;AAEM,SAAUC,kBAAkBA,CAACpC,GAElC,EAAA;EACC,OAAO;IACLqC,MAAM,EAAErC,GAAG,CAACsC,KAAK;AACjBC,IAAAA,OAAO,EAAE,SAATA,OAAOA,CAAGC,CAAC,EAAA;AAAA,MAAA,OAAMxC,GAAG,CAACsC,KAAK,GAAGE,CAAC,CAAA;KAAC;IAC/BC,IAAI,EAAE,SAANA,IAAIA,GAAA;AAAA,MAAA,OAASzC,GAAG,CAACsC,KAAK,GAAG,IAAI,CAAA;KAAC;IAC9BH,KAAK,EAAE,SAAPA,KAAKA,GAAA;AAAA,MAAA,OAASnC,GAAG,CAACsC,KAAK,GAAG,KAAK,CAAA;KAAC;IAChCI,MAAM,EAAE,SAARA,MAAMA,GAAA;AAAA,MAAA,OAAS1C,GAAG,CAACsC,KAAK,GAAG,CAACtC,GAAG,CAACsC,KAAK,CAAA;AAAA,KAAA;GACtC,CAAA;AACH;;;;;;ACnDO,IAAMK,yBAAyB,GAAuB;AAC3DzB,EAAAA,aAAa,EACX,mGAAmG;AACrG0B,EAAAA,cAAc,EACZ,gFAAA;EACH;SAsBeC,KAAKA,CAAAnD,IAAA,EAQR;AAAA,EAAA,IAPX2B,KAAK,GAAA3B,IAAA,CAAL2B,KAAK;IACL1B,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRmD,aAAa,GAAApD,IAAA,CAAboD,aAAa;IACbC,yBAAyB,GAAArD,IAAA,CAAzBqD,yBAAyB;IACzBC,4BAA4B,GAAAtD,IAAA,CAA5BsD,4BAA4B;IAC5BzB,eAAe,GAAA7B,IAAA,CAAf6B,eAAe;AACZ1B,IAAAA,KAAK,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;AAER,EAAA,IAAIC,GAAG,GAAGK,yBAAK,CAACJ,MAAM,CAAC,IAAI,CAAC,CAAA;EAC5B,IAAAgD,gBAAA,GAAoCC,yBAAe,CACjD;AAAEJ,MAAAA,aAAa,EAAbA,aAAa;AAAEC,MAAAA,yBAAyB,EAAzBA,yBAAyB;AAAEC,MAAAA,4BAA4B,EAA5BA,4BAAAA;AAA8B,KAAA,EAC1E3B,KAAK,EACLrB,GAAG,CACJ;IAJKmD,UAAU,GAAAF,gBAAA,CAAVE,UAAU;IAAEtB,aAAa,GAAAoB,gBAAA,CAAbpB,aAAa,CAAA;AAM/B,EAAA,IAAAuB,qBAAA,GAAA7C,QAAA,CACKoC,EAAAA,EAAAA,yBAAyB,EACzB9C,KAAK,CAAA;IAFFqB,aAAa,GAAAkC,qBAAA,CAAblC,aAAa;IAAE0B,cAAc,GAAAQ,qBAAA,CAAdR,cAAc,CAAA;AAKrC,EAAA,oBACEvC,yBAAA,CAAAC,aAAA,CAACyB,iBAAO,EAAA;AAACR,IAAAA,eAAe,EAAEA,eAAAA;AAAgB,GAAA,eACxClB,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AAAKX,IAAAA,SAAS,EAAEsB,aAAAA;GAAmBW,EAAAA,aAAa,gBAC9CxB,yBAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,QAAA,KAAS4C,UAAU,EAAA;AAAEnD,IAAAA,GAAG,EAAEA,GAAI;AAACJ,IAAAA,SAAS,EAAEgD,cAAAA;GACvCjD,CAAAA,EAAAA,QACE,CACF,CACE,CAAC,CAAA;AAEd,CAAA;AAEM,SAAU0D,YAAYA,CAAAC,KAAA,EAIF;AAAA,EAAA,IAHxBC,OAAO,GAAAD,KAAA,CAAPC,OAAO;IACP5D,QAAQ,GAAA2D,KAAA,CAAR3D,QAAQ;AACLE,IAAAA,KAAK,GAAAC,6BAAA,CAAAwD,KAAA,EAAAE,UAAA,CAAA,CAAA;EAER,IAAInC,KAAK,GAAGoC,mCAAsB,CAAAlD,QAAA,CAAMV,EAAAA,EAAAA,KAAK,CAAE,CAAC,CAAA;EAChD,IAAA6D,kBAAA,GAAqCC,2BAAiB,CACpD;AAAEC,MAAAA,IAAI,EAAE,QAAA;KAAU,EAClBvC,KAAK,CACN;IAHKwC,YAAY,GAAAH,kBAAA,CAAZG,YAAY;IAAEC,YAAY,GAAAJ,kBAAA,CAAZI,YAAY,CAAA;AAKhC,EAAA,IAAQC,OAAO,GAA2BF,YAAY,CAA9CE,OAAO;AAAKC,IAAAA,iBAAiB,GAAAlE,6BAAA,CAAK+D,YAAY,EAAAI,UAAA,CAAA,CAAA;AACtD,EAAA,oBACE5D,yBAAA,CAAAC,aAAA,CAAAD,yBAAA,CAAA6D,QAAA,EAEE,IAAA,EAAA,mBAAA,EAAC7D,yBAAK,CAAC8D,YAAY,CAACZ,OAAO,EAAAhD,QAAA,KACtByD,iBAAiB,EAAA;AACpBI,IAAAA,OAAO,EAAEL,OAAAA;AAAO,GAAA,CACV,CAAC,EACR1C,KAAK,CAACgB,MAAM,iBACXhC,yBAAA,CAAAC,aAAA,CAACuC,KAAK,EAAAtC,QAAA,CAAA;AAACc,IAAAA,KAAK,EAAEA,KAAAA;GAAWxB,EAAAA,KAAK,CAC3BQ,EAAAA,yBAAK,CAAC8D,YAAY,CAACxE,QAAQ,EAAEmE,YAAY,CACrC,CAEX,CAAG,CAAA;AAEP,CAAA;AAEM,SAAUO,WAAWA,CAAAC,KAAA,EAOR;AAAA,EAAA,IANjB3E,QAAQ,GAAA2E,KAAA,CAAR3E,QAAQ,CAAA;IACR4E,MAAM,GAAAD,KAAA,CAANC,MAAM,CAAA;IAAAC,iBAAA,GAAAF,KAAA,CACNG,WAAW,CAAA;AAAXA,IAAAA,WAAW,GAAAD,iBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,iBAAA,CAAA;IAAAE,mBAAA,GAAAJ,KAAA,CACnBxB,aAAa,CAAA;AAAbA,IAAAA,aAAa,GAAA4B,mBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,mBAAA,CAAA;IAEjB7E,KAAK,GAAAC,6BAAA,CAAAwE,KAAA,EAAAK,UAAA,EAAA;AAER,EAAA,IAAAC,sBAAA,GAAArE,QAAA,CACKoC,EAAAA,EAAAA,yBAAyB,EACzB9C,KAAK,CAAA;IAFFD,SAAS,GAAAgF,sBAAA,CAAThF,SAAS,CAAA;AAKjB,EAAA,oBACES,yBAAA,CAAAC,aAAA,CAAC+C,YAAY,EAAA9C,QAAA,CAAA;AACXkE,IAAAA,WAAW,EAAEA,WAAY;AACzB3B,IAAAA,aAAa,EAAEA,aAAAA;GACXjD,EAAAA,KAAK,gBAETQ,yBAAA,CAAAC,aAAA,CAACG,MAAM,EAAAF,QAAA,CAAA;AAACX,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAAKC,KAAK,CACpCF,EAAAA,QAAQ,EACR4E,MACK,CACI,CAAC,CAAA;AAEnB;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/Button.tsx","../src/Dialog.tsx","../src/Popover.tsx","../src/Modal.tsx","../src/utils.ts","../src/Field.tsx","../src/ListBox.tsx","../src/Select.tsx"],"sourcesContent":["import {\n  composeRenderProps,\n  Button as RACButton,\n  ButtonProps as RACButtonProps,\n} from \"react-aria-components\";\nimport React from \"react\";\n\nexport function Button({\n  children,\n  className,\n  ...props\n}: RACButtonProps & { className?: string }) {\n  return (\n    <RACButton {...props} className={className}>\n      {composeRenderProps(children, (children, { isPending }) => (\n        <>{children}</>\n      ))}\n    </RACButton>\n  );\n}\n","import type { AriaDialogProps } from \"react-aria\";\nimport { useDialog } from \"react-aria\";\nimport React, { useRef } from \"react\";\n\nexport interface DialogClasses {\n  className?: string;\n  titleClass?: string;\n}\nexport interface DialogProps extends AriaDialogProps, DialogClasses {\n  title?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nexport const DefaultDialogClasses: DialogClasses = {};\nexport function Dialog({ title, children, ...props }: DialogProps) {\n  let ref = useRef(null);\n  const { className, titleClass } = {\n    ...DefaultDialogClasses,\n    ...props,\n  };\n  let { dialogProps, titleProps } = useDialog(props, ref);\n\n  return (\n    <div {...dialogProps} ref={ref} className={className}>\n      {title && (\n        <h3 {...titleProps} className={titleClass}>\n          {title}\n        </h3>\n      )}\n      {children}\n    </div>\n  );\n}\n","import {\n  OverlayArrow,\n  Popover as AriaPopover,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps,\n} from \"react-aria-components\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { OverlayTriggerState } from \"react-stately\";\n\nexport interface PopoverProps extends Omit<AriaPopoverProps, \"children\"> {\n  showArrow?: boolean;\n  children: React.ReactNode;\n}\n\nconst styles = tv({\n  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\",\n  variants: {\n    isEntering: {\n      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\",\n    },\n    isExiting: {\n      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\",\n    },\n  },\n});\n\nexport function Popover({\n  children,\n  showArrow,\n  className,\n  ...props\n}: PopoverProps) {\n  let offset = showArrow ? 12 : 8;\n  return (\n    <AriaPopover\n      offset={offset}\n      {...props}\n      className={composeRenderProps(className, (className, renderProps) =>\n        styles({ ...renderProps, className }),\n      )}\n    >\n      {showArrow && (\n        <OverlayArrow className=\"group\">\n          <svg\n            width={12}\n            height={12}\n            viewBox=\"0 0 12 12\"\n            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\"\n          >\n            <path d=\"M0 0 L6 6 L12 0\" />\n          </svg>\n        </OverlayArrow>\n      )}\n      {children}\n    </AriaPopover>\n  );\n}\n\nexport interface PopoverClasses {\n  underlayClass?: string;\n  popoverClass?: string;\n}\n\nexport const DefaultPopoverClasses = {\n  underlayClass: \"fixed inset-0\",\n  popoverClass: \"bg-white\",\n};\n\nexport function createOverlayState(ref: {\n  value: boolean;\n}): OverlayTriggerState {\n  return {\n    isOpen: ref.value,\n    setOpen: (o) => (ref.value = o),\n    open: () => (ref.value = true),\n    close: () => (ref.value = false),\n    toggle: () => (ref.value = !ref.value),\n  };\n}\n","import React from \"react\";\nimport {\n  AriaModalOverlayProps,\n  Overlay,\n  useModalOverlay,\n  useOverlayTrigger,\n} from \"react-aria\";\nimport {\n  OverlayTriggerProps,\n  OverlayTriggerState,\n  useOverlayTriggerState,\n} from \"react-stately\";\nimport { Dialog, DialogProps, DialogClasses } from \"./Dialog\";\n\nexport interface ModalClasses {\n  underlayClass?: string;\n  containerClass?: string;\n}\n\nexport interface ModalDialogClasses extends DialogClasses, ModalClasses {}\n\nexport const DefaultModalDialogClasses: ModalDialogClasses = {\n  underlayClass:\n    \"fixed z-[100] inset-0 bg-black bg-opacity-50 flex items-center justify-center backdrop-blur-[2px]\",\n  containerClass:\n    \"relative m-4 p-4 w-3/5 min-w-[400px] max-w-[80%] rounded-lg bg-white shadow-sm\",\n};\n\nexport interface ModalProps extends AriaModalOverlayProps, ModalClasses {\n  state: OverlayTriggerState;\n  children: React.ReactElement;\n  portalContainer?: Element;\n}\n\nexport interface ModalDialogTriggerProps\n  extends OverlayTriggerProps,\n    AriaModalOverlayProps {\n  trigger: React.ReactElement;\n  children: React.ReactElement;\n}\n\nexport interface ModalDialogProps\n  extends ModalDialogTriggerProps,\n    Omit<DialogProps, \"children\">,\n    ModalDialogClasses {\n  footer?: React.ReactNode;\n}\n\nexport function Modal({\n  state,\n  children,\n  isDismissable,\n  isKeyboardDismissDisabled,\n  shouldCloseOnInteractOutside,\n  portalContainer,\n  ...props\n}: ModalProps) {\n  let ref = React.useRef(null);\n  let { modalProps, underlayProps } = useModalOverlay(\n    { isDismissable, isKeyboardDismissDisabled, shouldCloseOnInteractOutside },\n    state,\n    ref,\n  );\n\n  const { underlayClass, containerClass } = {\n    ...DefaultModalDialogClasses,\n    ...props,\n  };\n\n  return (\n    <Overlay portalContainer={portalContainer}>\n      <div className={underlayClass} {...underlayProps}>\n        <div {...modalProps} ref={ref} className={containerClass}>\n          {children}\n        </div>\n      </div>\n    </Overlay>\n  );\n}\n\nexport function ModalTrigger({\n  trigger,\n  children,\n  ...props\n}: ModalDialogTriggerProps) {\n  let state = useOverlayTriggerState({ ...props });\n  let { triggerProps, overlayProps } = useOverlayTrigger(\n    { type: \"dialog\" },\n    state,\n  );\n\n  const { onPress, ...otherTriggerProps } = triggerProps;\n  return (\n    <>\n      // TODO: react-19\n      {React.cloneElement(trigger, {\n        ...otherTriggerProps,\n        onClick: onPress,\n      } as any)}\n      {state.isOpen && (\n        <Modal state={state} {...props}>\n          {React.cloneElement(children, overlayProps)}\n        </Modal>\n      )}\n    </>\n  );\n}\n\nexport function ModalDialog({\n  children,\n  footer,\n  defaultOpen = false,\n  isDismissable = true,\n  titleClass = \"text-2xl font-bold\",\n  ...props\n}: ModalDialogProps) {\n  const { className } = {\n    ...DefaultModalDialogClasses,\n    ...props,\n  };\n\n  return (\n    <ModalTrigger\n      defaultOpen={defaultOpen}\n      isDismissable={isDismissable}\n      {...props}\n    >\n      <Dialog className={className} {...props}>\n        {children}\n        {footer}\n      </Dialog>\n    </ModalTrigger>\n  );\n}\n","import { composeRenderProps } from \"react-aria-components\";\nimport { twMerge } from \"tailwind-merge\";\nimport { tv } from \"tailwind-variants\";\n\nexport const focusRing = tv({\n  base: \"outline outline-secondary-600 dark:outline-secondary-500 forced-colors:outline-[Highlight] outline-offset-2\",\n  variants: {\n    isFocusVisible: {\n      false: \"outline-0\",\n      true: \"outline-2\",\n    },\n  },\n});\n\nexport function composeTailwindRenderProps<T>(\n  className: string | ((v: T) => string) | undefined,\n  tw: string,\n): string | ((v: T) => string) {\n  return composeRenderProps(className, (className) => twMerge(tw, className));\n}\n","import React from \"react\";\nimport {\n  FieldErrorProps,\n  Group,\n  GroupProps,\n  InputProps,\n  LabelProps,\n  FieldError as RACFieldError,\n  Input as RACInput,\n  Label as RACLabel,\n  Text,\n  TextProps,\n  composeRenderProps,\n} from \"react-aria-components\";\nimport { twMerge } from \"tailwind-merge\";\nimport { tv } from \"tailwind-variants\";\nimport { composeTailwindRenderProps, focusRing } from \"./utils\";\n\nexport function Label(props: LabelProps) {\n  return (\n    <RACLabel\n      {...props}\n      className={twMerge(\n        \"font-sans text-sm text-neutral-600 dark:text-neutral-300 font-medium cursor-default w-fit\",\n        props.className,\n      )}\n    />\n  );\n}\n\nexport function Description(props: TextProps) {\n  return (\n    <Text\n      {...props}\n      slot=\"description\"\n      className={twMerge(\"text-sm text-neutral-600\", props.className)}\n    />\n  );\n}\n\nexport function FieldError(props: FieldErrorProps) {\n  return (\n    <RACFieldError\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        \"text-sm text-red-600 forced-colors:text-[Mark]\",\n      )}\n    />\n  );\n}\n\nexport const fieldBorderStyles = tv({\n  base: \"transition\",\n  variants: {\n    isFocusWithin: {\n      false:\n        \"border-neutral-300 hover:border-neutral-400 dark:border-neutral-600 dark:hover:border-neutral-500 forced-colors:border-[ButtonBorder]\",\n      true: \"border-neutral-600 dark:border-neutral-300 forced-colors:border-[Highlight]\",\n    },\n    isInvalid: {\n      true: \"border-red-600 dark:border-red-600 forced-colors:border-[Mark]\",\n    },\n    isDisabled: {\n      true: \"border-neutral-200 dark:border-neutral-700 forced-colors:border-[GrayText]\",\n    },\n  },\n});\n\nexport const fieldGroupStyles = tv({\n  extend: focusRing,\n  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\",\n  variants: fieldBorderStyles.variants,\n});\n\nexport function FieldGroup(props: GroupProps) {\n  return (\n    <Group\n      {...props}\n      className={composeRenderProps(props.className, (className, renderProps) =>\n        fieldGroupStyles({ ...renderProps, className }),\n      )}\n    />\n  );\n}\n\nexport function Input(props: InputProps) {\n  return (\n    <RACInput\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        \"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]\",\n      )}\n    />\n  );\n}\n","import React from \"react\";\nimport {\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  ListBoxProps as AriaListBoxProps,\n  Collection,\n  Header,\n  ListBoxItemProps,\n  ListBoxSection,\n  SectionProps,\n  composeRenderProps,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\nimport { composeTailwindRenderProps, focusRing } from \"./utils\";\n\ninterface ListBoxProps<T>\n  extends Omit<AriaListBoxProps<T>, \"layout\" | \"orientation\"> {}\n\nexport function ListBox<T extends object>({\n  children,\n  ...props\n}: ListBoxProps<T>) {\n  return (\n    <AriaListBox\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        \"outline-0 p-1 w-[200px] bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg font-sans\",\n      )}\n    >\n      {children}\n    </AriaListBox>\n  );\n}\n\nexport const itemStyles = tv({\n  extend: focusRing,\n  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\",\n  variants: {\n    isSelected: {\n      false:\n        \"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\",\n      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]\",\n    },\n    isDisabled: {\n      true: \"text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]\",\n    },\n  },\n});\n\nexport function ListBoxItem(props: ListBoxItemProps) {\n  let textValue =\n    props.textValue ||\n    (typeof props.children === \"string\" ? props.children : undefined);\n  return (\n    <AriaListBoxItem {...props} textValue={textValue} className={itemStyles}>\n      {composeRenderProps(props.children, (children) => (\n        <>\n          {children}\n          <div className=\"absolute left-4 right-4 bottom-0 h-px bg-white/20 forced-colors:bg-[HighlightText] hidden [.group[data-selected]:has(+[data-selected])_&]:block\" />\n        </>\n      ))}\n    </AriaListBoxItem>\n  );\n}\n\nexport const dropdownItemStyles = tv({\n  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]\",\n  variants: {\n    isDisabled: {\n      false: \"text-neutral-900 dark:text-neutral-100\",\n      true: \"text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]\",\n    },\n    isPressed: {\n      true: \"bg-neutral-100 dark:bg-neutral-800\",\n    },\n    isFocused: {\n      true: \"bg-secondary-600 dark:bg-secondary-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]\",\n    },\n  },\n  compoundVariants: [\n    {\n      isFocused: false,\n      isOpen: true,\n      className: \"bg-neutral-100 dark:bg-neutral-700/60\",\n    },\n  ],\n});\n\nexport function DropdownItem(props: ListBoxItemProps) {\n  let textValue =\n    props.textValue ||\n    (typeof props.children === \"string\" ? props.children : undefined);\n  return (\n    <AriaListBoxItem\n      {...props}\n      textValue={textValue}\n      className={dropdownItemStyles}\n    >\n      {composeRenderProps(props.children, (children, { isSelected }) => (\n        <>\n          <span className=\"flex items-center flex-1 gap-2 font-normal truncate group-selected:font-semibold\">\n            {children}\n          </span>\n          <span className=\"flex items-center w-5\">\n            {isSelected && <i className=\"w-4 h-4 fa fa-check\" />}\n          </span>\n        </>\n      ))}\n    </AriaListBoxItem>\n  );\n}\n\nexport interface DropdownSectionProps<T> extends SectionProps<T> {\n  title?: string;\n  items?: any;\n}\n\nexport function DropdownSection<T extends object>(\n  props: DropdownSectionProps<T>,\n) {\n  return (\n    <ListBoxSection className=\"first:-mt-[5px] after:content-[''] after:block after:h-[5px] last:after:hidden\">\n      <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\">\n        {props.title}\n      </Header>\n      <Collection items={props.items}>{props.children}</Collection>\n    </ListBoxSection>\n  );\n}\n","import React from \"react\";\nimport {\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  Button,\n  ListBox,\n  ListBoxItemProps,\n  SelectValue,\n  ValidationResult,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\nimport { Description, FieldError, Label } from \"./Field\";\nimport { DropdownItem, DropdownSection, DropdownSectionProps } from \"./ListBox\";\nimport { Popover } from \"./Popover\";\nimport { composeTailwindRenderProps, focusRing } from \"./utils\";\n\nconst styles = tv({\n  extend: focusRing,\n  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]\",\n  variants: {\n    isDisabled: {\n      false:\n        \"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]\",\n      true: \"border-transparent dark:border-transparent text-neutral-200 dark:text-neutral-600 forced-colors:text-[GrayText] bg-neutral-100 dark:bg-neutral-800\",\n    },\n  },\n});\n\nexport interface SelectProps<T extends object>\n  extends Omit<AriaSelectProps<T>, \"children\"> {\n  label?: string;\n  description?: string;\n  errorMessage?: string | ((validation: ValidationResult) => string);\n  items?: Iterable<T>;\n  children: React.ReactNode | ((item: T) => React.ReactNode);\n}\n\nexport function Select<T extends object>({\n  label,\n  description,\n  errorMessage,\n  children,\n  items,\n  ...props\n}: SelectProps<T>) {\n  return (\n    <AriaSelect\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        \"group flex flex-col gap-1 relative font-sans\",\n      )}\n    >\n      {label && <Label>{label}</Label>}\n      <Button className={styles}>\n        <SelectValue className=\"flex-1 text-sm\">\n          {({ selectedText, defaultChildren }) =>\n            selectedText || defaultChildren\n          }\n        </SelectValue>\n        <i\n          aria-hidden\n          className={\n            \"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]\"\n          }\n        />\n      </Button>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n      <Popover className=\"min-w-(--trigger-width)\">\n        <ListBox\n          items={items}\n          className=\"outline-hidden box-border p-1 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]\"\n        >\n          {children}\n        </ListBox>\n      </Popover>\n    </AriaSelect>\n  );\n}\n\nexport function SelectItem(props: ListBoxItemProps) {\n  return <DropdownItem {...props} />;\n}\n\nexport function SelectSection<T extends object>(\n  props: DropdownSectionProps<T>,\n) {\n  return <DropdownSection {...props} />;\n}\n"],"names":["Button","_ref","children","className","props","_objectWithoutPropertiesLoose","_excluded","React","createElement","RACButton","_extends","composeRenderProps","_ref2","Fragment","DefaultDialogClasses","Dialog","title","ref","useRef","_DefaultDialogClasses","titleClass","_useDialog","useDialog","dialogProps","titleProps","styles","tv","base","variants","isEntering","isExiting","Popover","showArrow","offset","AriaPopover","renderProps","OverlayArrow","width","height","viewBox","d","DefaultPopoverClasses","underlayClass","popoverClass","createOverlayState","isOpen","value","setOpen","o","open","close","toggle","DefaultModalDialogClasses","containerClass","Modal","state","isDismissable","isKeyboardDismissDisabled","shouldCloseOnInteractOutside","portalContainer","_useModalOverlay","useModalOverlay","modalProps","underlayProps","_DefaultModalDialogCl","Overlay","ModalTrigger","trigger","_excluded2","useOverlayTriggerState","_useOverlayTrigger","useOverlayTrigger","type","triggerProps","overlayProps","onPress","otherTriggerProps","_excluded3","cloneElement","onClick","ModalDialog","_ref3","footer","_ref3$defaultOpen","defaultOpen","_ref3$isDismissable","_excluded4","_DefaultModalDialogCl2","focusRing","isFocusVisible","composeTailwindRenderProps","tw","twMerge","Label","RACLabel","Description","Text","slot","FieldError","RACFieldError","fieldBorderStyles","isFocusWithin","isInvalid","isDisabled","fieldGroupStyles","extend","FieldGroup","Group","Input","RACInput","isSelected","dropdownItemStyles","isPressed","isFocused","compoundVariants","DropdownItem","textValue","undefined","AriaListBoxItem","DropdownSection","ListBoxSection","Header","Collection","items","Select","label","description","errorMessage","AriaSelect","SelectValue","selectedText","defaultChildren","ListBox","SelectItem","SelectSection"],"mappings":"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"}

package/lib/utils.d.ts

@@ -0,0 +1,17 @@
+export declare const focusRing: 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 composeTailwindRenderProps<T>(className: string | ((v: T) => string) | undefined, tw: string): string | ((v: T) => string);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astroapps/aria-base",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -20,7 +20,10 @@
   "dependencies": {
     "react-stately": "^3.40.0",
     "react-aria": "^3.42.0",
-    "clsx": "^2"
+    "react-aria-components": "^1.8.0",
+    "clsx": "^2",
+    "tailwind-variants": "^3.2.2",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "react": "^18.2.0 || ^19",

package/src/Button.tsx

@@ -1,12 +1,20 @@
-import { AriaButtonProps, useButton } from "react-aria";
-import React, { useRef } from "react";
+import {
+  composeRenderProps,
+  Button as RACButton,
+  ButtonProps as RACButtonProps,
+} from "react-aria-components";
+import React from "react";
 
 export function Button({
   children,
   className,
   ...props
-}: AriaButtonProps<"button"> & { className?: string }) {
-  const ref = useRef(null);
-  const { buttonProps } = useButton(props, ref);
-  return <button {...buttonProps} className={className} children={children} />;
+}: RACButtonProps & { className?: string }) {
+  return (
+    <RACButton {...props} className={className}>
+      {composeRenderProps(children, (children, { isPending }) => (
+        <>{children}</>
+      ))}
+    </RACButton>
+  );
 }

package/src/Field.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import {
+  FieldErrorProps,
+  Group,
+  GroupProps,
+  InputProps,
+  LabelProps,
+  FieldError as RACFieldError,
+  Input as RACInput,
+  Label as RACLabel,
+  Text,
+  TextProps,
+  composeRenderProps,
+} from "react-aria-components";
+import { twMerge } from "tailwind-merge";
+import { tv } from "tailwind-variants";
+import { composeTailwindRenderProps, focusRing } from "./utils";
+
+export function Label(props: LabelProps) {
+  return (
+    <RACLabel
+      {...props}
+      className={twMerge(
+        "font-sans text-sm text-neutral-600 dark:text-neutral-300 font-medium cursor-default w-fit",
+        props.className,
+      )}
+    />
+  );
+}
+
+export function Description(props: TextProps) {
+  return (
+    <Text
+      {...props}
+      slot="description"
+      className={twMerge("text-sm text-neutral-600", props.className)}
+    />
+  );
+}
+
+export function FieldError(props: FieldErrorProps) {
+  return (
+    <RACFieldError
+      {...props}
+      className={composeTailwindRenderProps(
+        props.className,
+        "text-sm text-red-600 forced-colors:text-[Mark]",
+      )}
+    />
+  );
+}
+
+export const fieldBorderStyles = 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]",
+    },
+  },
+});
+
+export const fieldGroupStyles = 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,
+});
+
+export function FieldGroup(props: GroupProps) {
+  return (
+    <Group
+      {...props}
+      className={composeRenderProps(props.className, (className, renderProps) =>
+        fieldGroupStyles({ ...renderProps, className }),
+      )}
+    />
+  );
+}
+
+export function Input(props: InputProps) {
+  return (
+    <RACInput
+      {...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]",
+      )}
+    />
+  );
+}