@hopper-ui/components 1.5.11 → 1.5.13

package/dist/chunk-SVY4NPVL.js

@@ -0,0 +1,288 @@
+import { useFontFaceReady } from './chunk-IU6XMS2X.js';
+import { TextAreaContext } from './chunk-MHQZXLKW.js';
+import { useTruncatedText } from './chunk-Z57VHYOF.js';
+import { _RemainingCharacterCount } from './chunk-H3CEJLCO.js';
+import { _InputGroup } from './chunk-X7VALEJB.js';
+import { _Label } from './chunk-SA322LHS.js';
+import { _HelperMessage } from './chunk-HANWII4T.js';
+import { _ErrorMessage } from './chunk-CFXK2ZSA.js';
+import { useFormProps } from './chunk-YMTZYK3U.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue, useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
+import $670gB$react, { forwardRef, useState, useContext, useCallback, useRef, useMemo } from 'react';
+import { mergeRefs } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import clsx from 'clsx';
+import { useObjectRef } from 'react-aria';
+import { useContextProps, composeRenderProps, TextArea as TextArea$1, TextField } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var $b5e257d569688ac6$var$defaultContext = {
+  prefix: String(Math.round(Math.random() * 1e10)),
+  current: 0
+};
+var $b5e257d569688ac6$var$SSRContext = /* @__PURE__ */ ($670gB$react).createContext($b5e257d569688ac6$var$defaultContext);
+var $b5e257d569688ac6$var$IsSSRContext = /* @__PURE__ */ ($670gB$react).createContext(false);
+var $b5e257d569688ac6$var$canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
+var $b5e257d569688ac6$var$componentIds = /* @__PURE__ */ new WeakMap();
+function $b5e257d569688ac6$var$useCounter(isDisabled = false) {
+  let ctx = (useContext)($b5e257d569688ac6$var$SSRContext);
+  let ref = (useRef)(null);
+  if (ref.current === null && !isDisabled) {
+    var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    let currentOwner = (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ($670gB$react).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === void 0 ? void 0 : (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner = _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner === void 0 ? void 0 : _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner.current;
+    if (currentOwner) {
+      let prevComponentValue = $b5e257d569688ac6$var$componentIds.get(currentOwner);
+      if (prevComponentValue == null)
+        $b5e257d569688ac6$var$componentIds.set(currentOwner, {
+          id: ctx.current,
+          state: currentOwner.memoizedState
+        });
+      else if (currentOwner.memoizedState !== prevComponentValue.state) {
+        ctx.current = prevComponentValue.id;
+        $b5e257d569688ac6$var$componentIds.delete(currentOwner);
+      }
+    }
+    ref.current = ++ctx.current;
+  }
+  return ref.current;
+}
+function $b5e257d569688ac6$var$useLegacySSRSafeId(defaultId) {
+  let ctx = (useContext)($b5e257d569688ac6$var$SSRContext);
+  if (ctx === $b5e257d569688ac6$var$defaultContext && !$b5e257d569688ac6$var$canUseDOM && true) console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");
+  let counter = $b5e257d569688ac6$var$useCounter(!!defaultId);
+  let prefix = `react-aria${ctx.prefix}`;
+  return defaultId || `${prefix}-${counter}`;
+}
+function $b5e257d569688ac6$var$useModernSSRSafeId(defaultId) {
+  let id = ($670gB$react).useId();
+  let [didSSR] = (useState)($b5e257d569688ac6$export$535bd6ca7f90a273());
+  let prefix = didSSR || false ? "react-aria" : `react-aria${$b5e257d569688ac6$var$defaultContext.prefix}`;
+  return defaultId || `${prefix}-${id}`;
+}
+typeof ($670gB$react)["useId"] === "function" ? $b5e257d569688ac6$var$useModernSSRSafeId : $b5e257d569688ac6$var$useLegacySSRSafeId;
+function $b5e257d569688ac6$var$getSnapshot() {
+  return false;
+}
+function $b5e257d569688ac6$var$getServerSnapshot() {
+  return true;
+}
+function $b5e257d569688ac6$var$subscribe(onStoreChange) {
+  return () => {
+  };
+}
+function $b5e257d569688ac6$export$535bd6ca7f90a273() {
+  if (typeof ($670gB$react)["useSyncExternalStore"] === "function") return ($670gB$react)["useSyncExternalStore"]($b5e257d569688ac6$var$subscribe, $b5e257d569688ac6$var$getSnapshot, $b5e257d569688ac6$var$getServerSnapshot);
+  return (useContext)($b5e257d569688ac6$var$IsSSRContext);
+}
+
+// css-module:./TextArea.module.css#css-module
+var TextArea_module_default = { "hop-TextArea": "TextArea-module__hop-TextArea___gP3c7", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___OLwgT", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___QQ32S", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___TIKue", "hop-TextArea__RemainingCharacterCount": "TextArea-module__hop-TextArea__RemainingCharacterCount___hGc2s", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___Qjf1o", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___1WDb2", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___Osps-", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___vEXr0", "hop-TextArea__textarea--with-character-count": "TextArea-module__hop-TextArea__textarea--with-character-count___XsVFW", "hop-TextArea__textarea--sm": "TextArea-module__hop-TextArea__textarea--sm___NL7lo" };
+var GlobalTextAreaCssSelector = "hop-TextArea";
+var DefaultMinimumTextAreaRows = 3;
+var pxToInt = (value) => {
+  return value ? parseInt(value.replace("px", ""), 10) : 0;
+};
+function getBodyElement(isSSR) {
+  return !isSSR ? document.body : void 0;
+}
+function useCalculateRowHeight(input) {
+  const isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
+  const fontsLoaded = useFontFaceReady();
+  return useMemo(() => {
+    var _a, _b;
+    if (!input || !fontsLoaded) {
+      return 0;
+    }
+    const { font, lineHeight } = window.getComputedStyle(input);
+    if (lineHeight !== "normal") {
+      return pxToInt(lineHeight);
+    }
+    const element = document.createElement("span");
+    element.style.visibility = "hidden";
+    element.style.position = "absolute";
+    element.style.font = font;
+    element.innerText = "LineHeightHelper";
+    (_a = getBodyElement(isSSR)) == null ? void 0 : _a.appendChild(element);
+    const height = element.getBoundingClientRect().height;
+    (_b = getBodyElement(isSSR)) == null ? void 0 : _b.removeChild(element);
+    return height;
+  }, [input, fontsLoaded, isSSR]);
+}
+function TextArea(props, ref) {
+  var _a, _b, _c;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, TextAreaContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [characterCount, setCharacterCount] = useState(() => {
+    var _a2, _b2, _c2, _d;
+    return (_d = (_c2 = (_a2 = props.value) == null ? void 0 : _a2.length) != null ? _c2 : (_b2 = props.defaultValue) == null ? void 0 : _b2.length) != null ? _d : 0;
+  });
+  const {
+    className,
+    style: styleProp,
+    size: sizeProp,
+    showCharacterCount,
+    maxLength,
+    placeholder,
+    onChange: onChangeProp,
+    defaultValue,
+    maxRows,
+    cols,
+    rows: rowsProp,
+    value: valueProp,
+    resizeMode: resizeModeProp,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    allowExceedingMaxLength,
+    necessityIndicator,
+    inputGroupProps,
+    remainingCharacterCountProps,
+    label,
+    description,
+    errorMessage,
+    ...otherProps
+  } = ownProps;
+  const mergedTextAreaRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const resizeMode = (_b = useResponsiveValue(resizeModeProp)) != null ? _b : "none";
+  const overMaxLength = !!maxLength && characterCount > maxLength;
+  const size = (_c = useResponsiveValue(sizeProp)) != null ? _c : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalTextAreaCssSelector,
+    cssModule(
+      TextArea_module_default,
+      "hop-TextArea",
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const handleTextChanged = useCallback((value2) => {
+    setCharacterCount(value2.length);
+    onChangeProp == null ? void 0 : onChangeProp(value2);
+  }, [onChangeProp]);
+  if (showCharacterCount && !maxLength) {
+    console.warn("If showCharacterCount is true, maxLength must be set to the maximum number of characters allowed in the TextArea.");
+  }
+  if (allowExceedingMaxLength && !showCharacterCount) {
+    console.warn("If allowExceedingMaxLength is true, showCharacterCount must also be true.");
+  }
+  const rowHeight = useCalculateRowHeight(mergedTextAreaRef.current);
+  const defaultNumberOfRows = maxRows && maxRows < DefaultMinimumTextAreaRows ? maxRows : DefaultMinimumTextAreaRows;
+  const [rows, setRows] = useState(rowsProp != null ? rowsProp : defaultNumberOfRows);
+  const truncateText = useTruncatedText();
+  const [value, onChange] = useControlledState(valueProp, defaultValue || "", handleTextChanged);
+  const adjustRows = useCallback(() => {
+    const input = mergedTextAreaRef.current;
+    if (rowHeight === 0 || !input) {
+      return;
+    }
+    const { paddingBottom, paddingTop } = window.getComputedStyle(input);
+    const originalRows = input.rows;
+    const originalOverflow = input.style.overflow;
+    input.rows = 1;
+    input.style.overflow = "hidden";
+    const padding = pxToInt(paddingTop) + pxToInt(paddingBottom);
+    const currentRowsWithText = Math.floor((input.scrollHeight - padding) / rowHeight);
+    input.rows = originalRows;
+    input.style.overflow = originalOverflow;
+    if (rowsProp) {
+      setRows(rowsProp);
+    } else if (maxRows && currentRowsWithText >= maxRows) {
+      setRows(maxRows);
+    } else {
+      setRows(Math.max(currentRowsWithText, DefaultMinimumTextAreaRows));
+    }
+  }, [mergedTextAreaRef, rowHeight, maxRows, rowsProp]);
+  useIsomorphicLayoutEffect(() => {
+    if (!allowExceedingMaxLength) {
+      const newValue = truncateText(value, maxLength);
+      onChange(newValue);
+    }
+    adjustRows();
+  }, [value, adjustRows]);
+  const { className: inputGroupClassName, ...otherInputGroupProps } = inputGroupProps != null ? inputGroupProps : {};
+  const inputGroupClassNames = clsx(TextArea_module_default["hop-TextArea__InputGroup"], inputGroupClassName);
+  const textAreaClassNames = cssModule(
+    TextArea_module_default,
+    "hop-TextArea__textarea",
+    size,
+    showCharacterCount && maxLength && "with-character-count"
+  );
+  const { className: remainingCharacterCountClassName, ...otherRemainingCharacterCountProps } = remainingCharacterCountProps != null ? remainingCharacterCountProps : {};
+  const remainingCharacterCountClassNames = clsx(TextArea_module_default["hop-TextArea__RemainingCharacterCount"], remainingCharacterCountClassName);
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isFluid: true,
+      className: inputGroupClassNames,
+      isDisabled,
+      isInvalid,
+      ...otherInputGroupProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          TextArea$1,
+          {
+            ref: mergedTextAreaRef,
+            placeholder,
+            cols,
+            rows,
+            className: textAreaClassNames
+          }
+        ),
+        showCharacterCount && maxLength && /* @__PURE__ */ jsx(
+          _RemainingCharacterCount,
+          {
+            className: remainingCharacterCountClassNames,
+            count: maxLength - characterCount,
+            isInvalid: overMaxLength,
+            isDisabled,
+            ...otherRemainingCharacterCountProps
+          }
+        )
+      ]
+    }
+  ) });
+  const childrenMarkup = /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(_Label, { className: TextArea_module_default["hop-TextArea__Label"], isRequired, necessityIndicator, children: label }),
+    inputMarkup,
+    description && /* @__PURE__ */ jsx(_HelperMessage, { className: TextArea_module_default["hop-TextArea__HelperMessage"], children: description }),
+    /* @__PURE__ */ jsx(_ErrorMessage, { className: TextArea_module_default["hop-TextArea__ErrorMessage"], children: errorMessage })
+  ] });
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ref,
+      value,
+      style,
+      className: classNames,
+      maxLength: !allowExceedingMaxLength ? maxLength : void 0,
+      onChange,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      "data-resize-mode": resizeMode,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+var _TextArea = forwardRef(TextArea);
+_TextArea.displayName = "TextArea";
+
+export { GlobalTextAreaCssSelector, _TextArea };

package/dist/chunk-SYFFZMMH.js

@@ -0,0 +1,144 @@
+import { _BaseModal } from './chunk-YCKOALBB.js';
+import { HeadingContext } from './chunk-WJRMD4JP.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
+import { _ButtonGroup } from './chunk-CJ3TZIBR.js';
+import { _CloseButton } from './chunk-ND5XR6RA.js';
+import { _Button } from './chunk-TNLYOFSX.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { AlertContext } from './chunk-5DT3S5YY.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { chain } from 'react-aria';
+import { useContextProps, composeRenderProps, Dialog, Provider } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./Alert.module.css#css-module
+var Alert_module_default = { "hop-Alert": "Alert-module__hop-Alert___c2UGW", "hop-Alert__button-group": "Alert-module__hop-Alert__button-group___83J7P", "hop-Alert__heading": "Alert-module__hop-Alert__heading___JTioE", "hop-Alert__close": "Alert-module__hop-Alert__close___IU-V2", "hop-Alert__content": "Alert-module__hop-Alert__content___QIIuk" };
+var GlobalAlertCssSelector = "hop-Alert";
+function Alert(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, AlertContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    style,
+    slot,
+    size: sizeProp,
+    autoFocusButton,
+    cancelButtonLabel,
+    isDismissable = true,
+    onCancelButtonClick,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    primaryButtonDisabled,
+    primaryButtonLabel,
+    secondaryButtonDisabled,
+    secondaryButtonLabel,
+    variant = "confirmation",
+    overlayProps,
+    isLoading,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    GlobalAlertCssSelector,
+    cssModule(
+      Alert_module_default,
+      GlobalAlertCssSelector,
+      variant
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    _BaseModal,
+    {
+      size,
+      isDismissable: isDismissable && !isLoading,
+      isKeyboardDismissDisabled: isDismissable && !isLoading,
+      ...overlayProps,
+      children: /* @__PURE__ */ jsx(
+        Dialog,
+        {
+          role: "alertdialog",
+          ref,
+          slot,
+          style: mergedStyles,
+          className: classNames,
+          ...otherProps,
+          children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            isDismissable && /* @__PURE__ */ jsx(
+              _CloseButton,
+              {
+                isDisabled: isLoading,
+                className: Alert_module_default["hop-Alert__close"]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Provider,
+              {
+                values: [
+                  [HeadingContext, {
+                    className: Alert_module_default["hop-Alert__heading"],
+                    size: "lg",
+                    slot: "title"
+                  }],
+                  [ContentContext, {
+                    className: Alert_module_default["hop-Alert__content"]
+                  }]
+                ],
+                children: children(renderProps)
+              }
+            ),
+            /* @__PURE__ */ jsxs(_ButtonGroup, { align: "end", className: Alert_module_default["hop-Alert__button-group"], children: [
+              cancelButtonLabel && /* @__PURE__ */ jsx(
+                _Button,
+                {
+                  onPress: () => chain(onCancelButtonClick == null ? void 0 : onCancelButtonClick(), renderProps.close()),
+                  variant: "secondary",
+                  isDisabled: isLoading,
+                  autoFocus: autoFocusButton === "cancel",
+                  children: cancelButtonLabel
+                }
+              ),
+              secondaryButtonLabel && /* @__PURE__ */ jsx(
+                _Button,
+                {
+                  onPress: () => chain(onSecondaryButtonClick == null ? void 0 : onSecondaryButtonClick(), renderProps.close()),
+                  variant: "secondary",
+                  isDisabled: isLoading || secondaryButtonDisabled,
+                  autoFocus: autoFocusButton === "secondary",
+                  children: secondaryButtonLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                _Button,
+                {
+                  variant: variant === "confirmation" ? "primary" : "danger",
+                  isLoading,
+                  isDisabled: primaryButtonDisabled,
+                  autoFocus: autoFocusButton === "primary",
+                  onPress: () => chain(onPrimaryButtonClick == null ? void 0 : onPrimaryButtonClick(), renderProps.close),
+                  children: primaryButtonLabel
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+var _Alert = forwardRef(Alert);
+_Alert.displayName = "Alert";
+
+export { GlobalAlertCssSelector, _Alert };

package/dist/chunk-TFDJKYCC.js

@@ -0,0 +1,62 @@
+import { TabLine } from './chunk-V53G7BNL.js';
+import { TabListContext, InternalTabsContext } from './chunk-ZXON3BAA.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useContext, useState, useLayoutEffect } from 'react';
+import { useContextProps, TabListStateContext, TabList as TabList$1 } from 'react-aria-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// css-module:./TabList.module.css#css-module
+var TabList_module_default = { "hop-TabList": "TabList-module__hop-TabList___pr1Fd", "hop-TabList--standalone": "TabList-module__hop-TabList--standalone___l3Tws", "hop-TabList--in-card": "TabList-module__hop-TabList--in-card___U2eW8", "hop-TabList__tablist": "TabList-module__hop-TabList__tablist___5NkEi", "hop-TabList--heading": "TabList-module__hop-TabList--heading___stvPM" };
+var GlobalTabListCssSelector = "hop-TabList";
+function TabList(props, ref) {
+  var _a, _b;
+  [props, ref] = useContextProps(props, ref, TabListContext);
+  const { variant, isDisabled, disabledKeys } = (_a = useContext(InternalTabsContext)) != null ? _a : {};
+  const state = useContext(TabListStateContext);
+  const [selectedTab, setSelectedTab] = useState(void 0);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  useLayoutEffect(() => {
+    if (ref == null ? void 0 : ref.current) {
+      const tab = ref.current.querySelector("[role=tab][data-selected=true]");
+      if (tab != null) {
+        setSelectedTab(tab);
+      }
+    }
+  }, [ref, (_b = state == null ? void 0 : state.selectedItem) == null ? void 0 : _b.key]);
+  const {
+    className,
+    style,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalTabListCssSelector,
+    cssModule(
+      TabList_module_default,
+      "hop-TabList",
+      variant
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classNames, style: mergedStyles, children: [
+    /* @__PURE__ */ jsx(
+      TabList$1,
+      {
+        ...otherProps,
+        ref,
+        className: TabList_module_default["hop-TabList__tablist"]
+      }
+    ),
+    /* @__PURE__ */ jsx(TabLine, { selectedTab, isDisabled, disabledKeys })
+  ] });
+}
+var _TabList = forwardRef(TabList);
+_TabList.displayName = "TabList";
+
+export { GlobalTabListCssSelector, _TabList };

package/dist/chunk-TKMQCZDW.js

@@ -0,0 +1,75 @@
+import { TileGroupContext } from './chunk-RZFNJMEH.js';
+import { InternalTileContext } from './chunk-S7KMOXY2.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, ToggleButtonGroup, Provider } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./TileGroup.module.css#css-module
+var TileGroup_module_default = { "hop-TileGroup": "TileGroup-module__hop-TileGroup___4ryz8" };
+var GlobalTileGroupCssSelector = "hop-TileGroup";
+var TileGroup = (props, ref) => {
+  [props, ref] = useContextProps(props, ref, TileGroupContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    style,
+    slot,
+    isDisabled,
+    selectionMode = "single",
+    disallowEmptySelection = true,
+    numberOfColumns = 3,
+    ...otherProps
+  } = ownProps;
+  const columns = useResponsiveValue(numberOfColumns);
+  const classNames = composeClassnameRenderProps(
+    GlobalTileGroupCssSelector,
+    cssModule(
+      TileGroup_module_default,
+      "hop-TileGroup"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...{
+        gridTemplateColumns: `repeat(${columns}, 1fr)`
+      },
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    ToggleButtonGroup,
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot != null ? slot : void 0,
+      isDisabled,
+      selectionMode,
+      disallowEmptySelection,
+      ...otherProps,
+      children: (renderProps) => /* @__PURE__ */ jsx(
+        Provider,
+        {
+          values: [
+            [InternalTileContext, { isDisabled }]
+          ],
+          children: children(renderProps)
+        }
+      )
+    }
+  );
+};
+var _TileGroup = forwardRef(TileGroup);
+_TileGroup.displayName = "TileGroup";
+
+export { GlobalTileGroupCssSelector, _TileGroup };