@autoguru/overdrive 4.46.0 → 4.47.1

package/dist/components/DateTimePicker/DateTimePicker.js

@@ -3,23 +3,15 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { ChevronLeftIcon, ChevronRightIcon } from '@autoguru/icons';
-import { getLocalTimeZone,
-// currently only supporting western-style Gregorian calendar
-GregorianCalendar, today } from '@internationalized/date';
-import React, { useEffect, useRef } from 'react';
-import { useCalendar,
-// useDateFormatter,
-useLocale, useId } from 'react-aria';
-import { useCalendarState } from 'react-stately';
+import { getLocalTimeZone, today } from '@internationalized/date';
+import React, { useRef } from 'react';
+import { useId } from 'react-aria';
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
+import { Calendar } from "../Calendar/index.js";
 import { Heading } from "../Heading/index.js";
-import { Icon } from "../Icon/index.js";
 import { OptionGrid } from "../OptionGrid/OptionGrid.js";
-import { CalendarButton } from "./CalendarButton.js";
-import { CalendarGrid } from "./CalendarGrid.js";
-import { calendarStyle, layoutStyle, queryContainerStyle, titleStyle } from "./DateTimePicker.css.js";
+import { layoutStyle, queryContainerStyle } from "./DateTimePicker.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultEnglish = {
   dateLabel: 'Date',
@@ -27,13 +19,6 @@ const defaultEnglish = {
   nextLabel: 'Next month',
   prevLabel: 'Previous month'
 };
-function createCalendar(identifier) {
-  if (identifier === 'gregory') {
-    return new GregorianCalendar();
-  }
-  throw new Error(`Unsupported calendar configured ${identifier}`);
-}
-
 // const dateTextPunctuationEN = (text: string) =>
 // 	text
 // 		.split(' ')
@@ -54,15 +39,15 @@ function createCalendar(identifier) {
  */
 export const DateTimePicker = ({
   allowPastDate = false,
-  calendar,
+  calendarOptions,
   lang,
   onChange,
   timeOptions,
   title,
   testId
 }) => {
-  var _lang$dateLabel, _lang$prevLabel, _lang$nextLabel, _lang$timeLabel;
-  const selectedDate = useRef(null);
+  var _lang$dateLabel, _lang$timeLabel;
+  const selectedDate = useRef(today(getLocalTimeZone()));
   const selectedTimeOption = useRef(null);
   const handleChange = () => {
     var _selectedTimeOption$c;
@@ -73,6 +58,10 @@ export const DateTimePicker = ({
       });
     }
   };
+  const handleDateChange = value => {
+    selectedDate.current = value;
+    handleChange();
+  };
   const handleTimeChange = keys => {
     if (keys === 'all') return;
     // we expect only a single value for time picker
@@ -80,15 +69,6 @@ export const DateTimePicker = ({
     selectedTimeOption.current = time;
     handleChange();
   };
-  const calendarComponentProps = _objectSpread({
-    defaultValue: today(getLocalTimeZone()),
-    firstDayOfWeek: 'sun',
-    minValue: allowPastDate ? undefined : today(getLocalTimeZone()),
-    onChange: value => {
-      selectedDate.current = value;
-      handleChange();
-    }
-  }, calendar);
   const optionGridComponentProps = _objectSpread({
     columns: '3',
     onSelectionChange: handleTimeChange,
@@ -96,34 +76,13 @@ export const DateTimePicker = ({
     selectionMode: 'single',
     disallowEmptySelection: true
   }, timeOptions);
-  const {
-    locale
-  } = useLocale();
-  const state = useCalendarState(_objectSpread(_objectSpread({}, calendarComponentProps), {}, {
-    locale,
-    createCalendar
-  }));
-  const {
-    calendarProps,
-    prevButtonProps,
-    nextButtonProps,
-    title: calendarTitle
-  } = useCalendar(calendarComponentProps, state);
   const titleId = useId();
-  useEffect(() => {
-    if (state.value) {
-      selectedDate.current = state.value;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- run only once
-  }, []);
-
-  // const formatter = useDateFormatter({ dateStyle: 'full' });
-  // const dateText = state.value
-  // 	? dateTextPunctuationEN(
-  // 			formatter.format(state?.value?.toDate(getLocalTimeZone())),
-  // 		)
-  // 	: '';
 
+  // Create calendar lang props from our lang props
+  const calendarLang = lang ? {
+    nextLabel: lang.nextLabel,
+    prevLabel: lang.prevLabel
+  } : undefined;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     role: "group",
     "aria-labelledby": titleId,
@@ -148,27 +107,11 @@ export const DateTimePicker = ({
           mb: "4",
           size: "6",
           children: (_lang$dateLabel = lang === null || lang === void 0 ? void 0 : lang.dateLabel) !== null && _lang$dateLabel !== void 0 ? _lang$dateLabel : defaultEnglish.dateLabel
-        }), /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, calendarProps), {}, {
-          className: calendarStyle,
-          children: [/*#__PURE__*/_jsx(CalendarButton, _objectSpread(_objectSpread({}, prevButtonProps), {}, {
-            "aria-label": (_lang$prevLabel = lang === null || lang === void 0 ? void 0 : lang.prevLabel) !== null && _lang$prevLabel !== void 0 ? _lang$prevLabel : defaultEnglish.prevLabel,
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: ChevronLeftIcon,
-              size: "medium"
-            })
-          })), /*#__PURE__*/_jsx("h4", {
-            className: titleStyle,
-            children: calendarTitle
-          }), /*#__PURE__*/_jsx(CalendarButton, _objectSpread(_objectSpread({}, nextButtonProps), {}, {
-            "aria-label": (_lang$nextLabel = lang === null || lang === void 0 ? void 0 : lang.nextLabel) !== null && _lang$nextLabel !== void 0 ? _lang$nextLabel : defaultEnglish.nextLabel,
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: ChevronRightIcon,
-              size: "medium"
-            })
-          }))]
-        })), /*#__PURE__*/_jsx(CalendarGrid, {
-          state: state,
-          firstDayOfWeek: calendarComponentProps.firstDayOfWeek
+        }), /*#__PURE__*/_jsx(Calendar, {
+          allowPastDate: allowPastDate,
+          calendarOptions: calendarOptions,
+          lang: calendarLang,
+          onChange: handleDateChange
         })]
       }), /*#__PURE__*/_jsxs("div", {
         className: sprinkles({
@@ -183,4 +126,5 @@ export const DateTimePicker = ({
       })]
     })]
   }));
-};
+};
+DateTimePicker.displayName = 'DateTimePicker';

package/dist/components/OptionList/OptionList.d.ts

@@ -60,18 +60,18 @@ export declare const OptionList: {
             onKeyDown?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
             onKeyUp?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
             onClick?: ((e: React.MouseEvent<import("@react-types/shared").FocusableElement>) => void) | undefined;
+            excludeFromTabOrder?: boolean | undefined;
             isDisabled?: boolean | undefined;
-            isReadOnly?: boolean | undefined;
+            isRequired?: boolean | undefined;
+            isInvalid?: boolean | undefined;
+            validationState?: import("react-stately").ValidationState | undefined;
             onFocusChange?: ((isFocused: boolean) => void) | undefined;
-            excludeFromTabOrder?: boolean | undefined;
+            isReadOnly?: boolean | undefined;
             onPress?: ((e: import("react-aria").PressEvent) => void) | undefined;
             onPressStart?: ((e: import("react-aria").PressEvent) => void) | undefined;
             onPressEnd?: ((e: import("react-aria").PressEvent) => void) | undefined;
             onPressChange?: ((isPressed: boolean) => void) | undefined;
             onPressUp?: ((e: import("react-aria").PressEvent) => void) | undefined;
-            isRequired?: boolean | undefined;
-            isInvalid?: boolean | undefined;
-            validationState?: import("react-stately").ValidationState | undefined;
             validationBehavior?: "aria" | "native" | undefined;
             validate?: ((value: boolean) => import("@react-types/shared").ValidationError | true | null | undefined) | undefined;
         }): React.JSX.Element;

package/dist/components/Popover/Popover.css.d.ts

@@ -0,0 +1,4 @@
+export declare const overlayStyle: string;
+export declare const triggerStyle: string;
+export declare const fullScreenStyle: string;
+//# sourceMappingURL=Popover.css.d.ts.map

package/dist/components/Popover/Popover.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/Popover.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,QAiBvB,CAAC;AAEH,eAAO,MAAM,YAAY,QASvB,CAAC;AAEH,eAAO,MAAM,eAAe,QAW1B,CAAC"}

package/dist/components/Popover/Popover.css.js

@@ -0,0 +1,46 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/Popover/Popover.css.ts", "@autoguru/overdrive");
+import { style } from '@vanilla-extract/css';
+import { cssLayerComponent } from "../../styles/layers.css.js";
+import { sprinkles } from "../../styles/sprinkles.css.js";
+import { overdriveTokens as tokens } from "../../themes/theme.css.js";
+export const overlayStyle = style([sprinkles({
+  borderRadius: 'md',
+  borderWidth: '1',
+  borderStyle: 'solid',
+  borderColour: 'light',
+  padding: '4'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      backgroundColor: tokens.colours.background.body,
+      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+      minWidth: '280px'
+    }
+  }
+}], "overlayStyle");
+export const triggerStyle = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      background: 'transparent',
+      border: 'none',
+      cursor: 'pointer',
+      padding: 0
+    }
+  }
+}, "triggerStyle");
+export const fullScreenStyle = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      backgroundColor: tokens.colours.background.body,
+      bottom: 0,
+      left: 0,
+      position: 'fixed',
+      right: 0,
+      top: 0
+    }
+  }
+}, "fullScreenStyle");
+__vanilla_filescope__.endFileScope();

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { type AriaPopoverProps } from 'react-aria';
+import { type OverlayTriggerState } from 'react-stately';
+declare const defaultEnglish: {
+    readonly close: "close";
+};
+export type Language = Partial<Record<keyof typeof defaultEnglish, string>>;
+/**
+ * Internal props for the Popover component.
+ */
+export interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
+    /**
+     * Content to display inside the popover
+     */
+    children: React.ReactNode;
+    /**
+     * State object that controls the popover's open/close state
+     */
+    state: OverlayTriggerState;
+    /**
+     * Reference to the trigger element for positioning
+     */
+    triggerRef: React.RefObject<HTMLElement | null>;
+    /**
+     * Language content override
+     */
+    lang?: Language;
+}
+export declare const Popover: {
+    ({ children, offset, state, triggerRef, lang, ...props }: PopoverProps): React.JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=Popover.d.ts.map

package/dist/components/Popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/Popover.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAKN,KAAK,gBAAgB,EAErB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AASzD,QAAA,MAAM,cAAc;;CAEV,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC;IACzE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,mBAAmB,CAAC;IAC3B;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAoBD,eAAO,MAAM,OAAO;8DAOjB,YAAY;;CA6Ed,CAAC"}

package/dist/components/Popover/Popover.js

@@ -0,0 +1,127 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children"],
+  _excluded2 = ["children", "offset", "state", "triggerRef", "lang"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { CloseIcon } from '@autoguru/icons';
+import React, { useRef, useEffect } from 'react';
+import { usePopover, useDialog, DismissButton, Overlay } from 'react-aria';
+import { useMedia } from "../../hooks/useMedia/useMedia.js";
+import { sprinkles } from "../../styles/sprinkles.css.js";
+import { Button } from "../Button/Button.js";
+import { Icon } from "../Icon/Icon.js";
+import { fullScreenStyle, overlayStyle } from "./Popover.css.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultEnglish = {
+  close: 'close'
+};
+
+/**
+ * Internal props for the Popover component.
+ */
+
+/**
+ * Internal props for the Dialog wrapper component.
+ */
+
+const Dialog = _ref => {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const ref = useRef(null);
+  const {
+    dialogProps
+  } = useDialog(props, ref);
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, dialogProps), {}, {
+    ref: ref,
+    children: children
+  }));
+};
+export const Popover = _ref2 => {
+  let {
+      children,
+      offset = 4,
+      state,
+      triggerRef,
+      lang
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  const popoverRef = useRef(null);
+  const [isTablet] = useMedia(['tablet']);
+  const isFullScreen = !isTablet;
+
+  // Handle Esc manually since we have two different modes (popover vs fullscreen dialog)
+  // and react-aria would need a slightly different ModalTrigger pattern
+  useEffect(() => {
+    if (!isFullScreen) return;
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        state.close();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isFullScreen, state]);
+  const {
+    popoverProps,
+    underlayProps
+  } = usePopover(_objectSpread(_objectSpread({}, props), {}, {
+    offset,
+    triggerRef,
+    popoverRef
+  }), state);
+
+  // Fullscreen mode: render Dialog directly without popover positioning
+  if (isFullScreen) {
+    var _lang$close;
+    return /*#__PURE__*/_jsx(Overlay, {
+      children: /*#__PURE__*/_jsx(Dialog, {
+        children: /*#__PURE__*/_jsx("div", {
+          className: fullScreenStyle,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: sprinkles({
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '5',
+              p: '3'
+            }),
+            children: [/*#__PURE__*/_jsx("div", {
+              className: sprinkles({
+                alignSelf: 'end'
+              }),
+              children: /*#__PURE__*/_jsx(Button, {
+                variant: "secondary",
+                minimal: true,
+                rounded: true,
+                onClick: state.close,
+                "aria-label": (_lang$close = lang === null || lang === void 0 ? void 0 : lang.close) !== null && _lang$close !== void 0 ? _lang$close : defaultEnglish.close,
+                children: /*#__PURE__*/_jsx(Icon, {
+                  icon: CloseIcon
+                })
+              })
+            }), children]
+          })
+        })
+      })
+    });
+  }
+
+  // Standard popover mode: use popover positioning
+  return /*#__PURE__*/_jsxs(Overlay, {
+    children: [/*#__PURE__*/_jsx("div", _objectSpread({}, underlayProps)), /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, popoverProps), {}, {
+      ref: popoverRef,
+      className: overlayStyle,
+      children: [/*#__PURE__*/_jsx(Dialog, {
+        children: children
+      }), /*#__PURE__*/_jsx(DismissButton, {
+        onDismiss: state.close
+      })]
+    }))]
+  });
+};
+Popover.displayName = 'Popover';

package/dist/components/Popover/PopoverTrigger.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { type AriaPopoverProps } from 'react-aria';
+import type { TestIdProp } from '../../types';
+import { type Language } from './Popover';
+/**
+ * Props for the PopoverTrigger component.
+ */
+export interface PopoverTriggerProps extends Pick<AriaPopoverProps, 'offset' | 'placement' | 'shouldCloseOnInteractOutside' | 'shouldFlip'>, TestIdProp {
+    /**
+     * The content to display in the popover
+     */
+    content: React.ReactNode;
+    /**
+     * The element that triggers the popover when interacted with. For accessibility,
+     * this must contain the aria visible content (e.g. "open calender")
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the trigger is disabled and non-interactive
+     */
+    isDisabled?: boolean;
+    /**
+     * Language content override
+     */
+    lang?: Language;
+    /**
+     * Callback that receives the overlay trigger state for external control
+     */
+    onStateReady?: (state: {
+        close: () => void;
+    }) => void;
+}
+/**
+ * A popover component that displays content in an overlay positioned relative to a trigger element.
+ * The popover automatically handles positioning, accessibility, and focus management.
+ *
+ * Note: Button components are not supported as children due to React Aria compatibility issues,
+ * use button tag, plain text, or other elements instead.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger content={<Calendar />}>
+ *   Choose Date
+ * </PopoverTrigger>
+ * ```
+ */
+export declare const PopoverTrigger: {
+    ({ content, children, isDisabled, offset, placement, shouldCloseOnInteractOutside, shouldFlip, testId, lang, onStateReady, }: PopoverTriggerProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=PopoverTrigger.d.ts.map

package/dist/components/Popover/PopoverTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverTrigger.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/PopoverTrigger.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAGN,KAAK,gBAAgB,EACrB,MAAM,YAAY,CAAC;AAGpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,OAAO,EAAE,KAAK,QAAQ,EAAW,MAAM,WAAW,CAAC;AAGnD;;GAEG;AACH,MAAM,WAAW,mBAChB,SAAQ,IAAI,CACV,gBAAgB,EACd,QAAQ,GACR,WAAW,GACX,8BAA8B,GAC9B,YAAY,CACd,EACD,UAAU;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;CACtD;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc;kIAWxB,mBAAmB;;CAwErB,CAAC"}

package/dist/components/Popover/PopoverTrigger.js

@@ -0,0 +1,94 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { invariant } from '@autoguru/utilities';
+import React, { useRef } from 'react';
+import { useOverlayTrigger, useButton } from 'react-aria';
+import { useOverlayTriggerState } from 'react-stately';
+import { dataAttrs } from "../../utils/dataAttrs.js";
+import { Button } from "../Button/Button.js";
+import { Popover } from "./Popover.js";
+import { triggerStyle } from "./Popover.css.js";
+/**
+ * Props for the PopoverTrigger component.
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A popover component that displays content in an overlay positioned relative to a trigger element.
+ * The popover automatically handles positioning, accessibility, and focus management.
+ *
+ * Note: Button components are not supported as children due to React Aria compatibility issues,
+ * use button tag, plain text, or other elements instead.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger content={<Calendar />}>
+ *   Choose Date
+ * </PopoverTrigger>
+ * ```
+ */
+export const PopoverTrigger = ({
+  content,
+  children,
+  isDisabled,
+  offset,
+  placement,
+  shouldCloseOnInteractOutside,
+  shouldFlip,
+  testId,
+  lang,
+  onStateReady
+}) => {
+  const state = useOverlayTriggerState({});
+  const triggerRef = useRef(null);
+
+  // Provide state access to parent component
+  React.useEffect(() => {
+    if (onStateReady) {
+      onStateReady({
+        close: state.close
+      });
+    }
+  }, [onStateReady, state.close]);
+  const {
+    triggerProps,
+    overlayProps
+  } = useOverlayTrigger({
+    type: 'dialog'
+  }, state, triggerRef);
+  const {
+    buttonProps
+  } = useButton(_objectSpread(_objectSpread({}, triggerProps), {}, {
+    isDisabled
+  }), triggerRef);
+
+  // Validate that Button components are not used as children
+  if (/*#__PURE__*/React.isValidElement(children) && children.type === Button) {
+    !false ? process.env.NODE_ENV !== "production" ? invariant(false, 'PopoverTrigger: The Button component is presently incompatible with ReactAria. Please use a native button or other element for the trigger.') : invariant(false) : void 0;
+  }
+  const isNativeButton = /*#__PURE__*/React.isValidElement(children) && children.type === 'button';
+  const combinedProps = _objectSpread(_objectSpread(_objectSpread({}, buttonProps), dataAttrs({
+    testid: testId
+  })), {}, {
+    ref: triggerRef
+  });
+  const triggerElement = isNativeButton ? (/*#__PURE__*/React.cloneElement(children, combinedProps)) : /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({}, combinedProps), {}, {
+    className: triggerStyle,
+    children: children
+  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [triggerElement, state.isOpen && /*#__PURE__*/_jsx(Popover, _objectSpread(_objectSpread({}, overlayProps), {}, {
+      state: state,
+      triggerRef: triggerRef,
+      placement: placement,
+      offset: offset,
+      shouldCloseOnInteractOutside: shouldCloseOnInteractOutside,
+      shouldFlip: shouldFlip,
+      lang: lang,
+      children: content
+    }))]
+  });
+};
+PopoverTrigger.displayName = 'PopoverTrigger';

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

@@ -0,0 +1,5 @@
+export { Popover } from './Popover';
+export { PopoverTrigger } from './PopoverTrigger';
+export type { PopoverProps } from './Popover';
+export type { PopoverTriggerProps } from './PopoverTrigger';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Popover/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Popover } from "./Popover.js";
+export { PopoverTrigger } from "./PopoverTrigger.js";

package/dist/components/Slider/Slider.css.d.ts

@@ -0,0 +1,9 @@
+export declare const container: string;
+export declare const label: string;
+export declare const valueDisplay: string;
+export declare const valueText: string;
+export declare const sliderContainer: string;
+export declare const trackContainer: string;
+export declare const track: string;
+export declare const thumb: string;
+//# sourceMappingURL=Slider.css.d.ts.map

package/dist/components/Slider/Slider.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Slider/Slider.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAIhB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,eAAe,QAK1B,CAAC;AAEH,eAAO,MAAM,cAAc,QAIzB,CAAC;AAEH,eAAO,MAAM,KAAK,QAoBhB,CAAC;AAEH,eAAO,MAAM,KAAK,QAkChB,CAAC"}