@hopper-ui/components 1.5.12 → 1.5.13

package/dist/chunk-DNWSS3V2.js

@@ -0,0 +1,123 @@
+import { RadioContext } from './chunk-FU5CCPLP.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { IconListContext } from './chunk-GBWXEK6N.js';
+import { ensureTextWrapper } from './chunk-WPIH4OAE.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { TextContext } from './chunk-ZNOU2CGM.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { BulletIcon, IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { mergeProps } from 'react-aria';
+import { useContextProps, composeRenderProps } from 'react-aria-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// css-module:./DecorativeRadio.module.css#css-module
+var DecorativeRadio_module_default = { "hop-DecorativeRadio": "DecorativeRadio-module__hop-DecorativeRadio___QCJkj Radio-module__hop-Radio___fNVqT", "hop-DecorativeRadio--sm": "DecorativeRadio-module__hop-DecorativeRadio--sm___nWSWJ Radio-module__hop-Radio--sm___QtkaP", "hop-DecorativeRadio--md": "DecorativeRadio-module__hop-DecorativeRadio--md___KCfUe Radio-module__hop-Radio--md___-8BC4", "hop-DecorativeRadio__icon": "DecorativeRadio-module__hop-DecorativeRadio__icon___68afH Radio-module__hop-Radio__icon___f-O9q", "hop-DecorativeRadio__icon-list": "DecorativeRadio-module__hop-DecorativeRadio__icon-list___rLPqB Radio-module__hop-Radio__icon___f-O9q", "hop-DecorativeRadio__box": "DecorativeRadio-module__hop-DecorativeRadio__box___7I-Lx Radio-module__hop-Radio__box___HKX8m", "hop-DecorativeRadio__bullet": "DecorativeRadio-module__hop-DecorativeRadio__bullet___7taij Radio-module__hop-Radio__bullet___tlKI9", "hop-DecorativeRadio__text": "DecorativeRadio-module__hop-DecorativeRadio__text___WeAMT Radio-module__hop-Radio__text___30Fay" };
+var GlobalDecorativeRadioCssSelector = "hop-DecorativeRadio";
+function DecorativeRadio(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, RadioContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp = "md",
+    slot,
+    style: styleProp,
+    isSelected,
+    isPressed,
+    isHovered,
+    isFocused,
+    isFocusVisible,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    isRequired,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return ensureTextWrapper(prev);
+  });
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalDecorativeRadioCssSelector,
+    cssModule(
+      DecorativeRadio_module_default,
+      "hop-DecorativeRadio",
+      size
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style,
+    children,
+    values: {
+      isSelected: isSelected || false,
+      isPressed: isPressed || false,
+      isHovered: isHovered || false,
+      isFocused: isFocused || false,
+      isFocusVisible: isFocusVisible || false,
+      isDisabled: isDisabled || false,
+      isReadOnly: isReadOnly || false,
+      isInvalid: isInvalid || false,
+      isRequired: isRequired || false
+    }
+  });
+  const radioIconClassName = DecorativeRadio_module_default["hop-DecorativeRadio__bullet"];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      slot: slot || void 0,
+      "data-selected": isSelected || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-hovered": isHovered || void 0,
+      "data-focused": isFocused || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-readonly": isReadOnly || void 0,
+      "data-invalid": isInvalid || void 0,
+      "data-required": isRequired || void 0,
+      ...mergeProps(renderProps, otherProps),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: DecorativeRadio_module_default["hop-DecorativeRadio__box"], children: /* @__PURE__ */ jsx(BulletIcon, { size, className: radioIconClassName }) }),
+        /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+          SlotProvider,
+          {
+            values: [
+              [TextContext, {
+                className: DecorativeRadio_module_default["hop-DecorativeRadio__text"],
+                size
+              }],
+              [IconListContext, {
+                className: DecorativeRadio_module_default["hop-DecorativeRadio__icon-list"],
+                size
+              }],
+              [IconContext, {
+                className: DecorativeRadio_module_default["hop-DecorativeRadio__icon"],
+                size
+              }]
+            ],
+            children: renderProps.children
+          }
+        ) })
+      ]
+    }
+  );
+}
+var _DecorativeRadio = forwardRef(DecorativeRadio);
+_DecorativeRadio.displayName = "DecorativeRadio";
+
+export { GlobalDecorativeRadioCssSelector, _DecorativeRadio };

package/dist/chunk-DQT6VAIZ.js

@@ -0,0 +1,94 @@
+import { SpinnerContext } from './chunk-5K3V5PGZ.js';
+import { _Text } from './chunk-LKH3JL3P.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 { useId } from 'react-aria';
+import { useContextProps, ProgressBar } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./Spinner.module.css#css-module
+var Spinner_module_default = { "hop-Spinner": "Spinner-module__hop-Spinner___6q9rz", "spin": "Spinner-module__spin___Faw-r", "hop-Spinner--sm": "Spinner-module__hop-Spinner--sm___6uEWY", "hop-Spinner--md": "Spinner-module__hop-Spinner--md___xj82a", "hop-Spinner--lg": "Spinner-module__hop-Spinner--lg___PoxnB", "hop-Spinner__track": "Spinner-module__hop-Spinner__track___yewAt", "hop-Spinner__fill": "Spinner-module__hop-Spinner__fill___rJUNl", "hop-Spinner__label": "Spinner-module__hop-Spinner__label___upGH0" };
+var GlobalSpinnerCssSelector = "hop-Spinner";
+var SpinnerToTextSizeAdapter = {
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+};
+var Spinner = (props, ref) => {
+  var _a;
+  [props, ref] = useContextProps(props, ref, SpinnerContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    size: sizeProp,
+    children,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalSpinnerCssSelector,
+    cssModule(
+      Spinner_module_default,
+      "hop-Spinner",
+      size
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const labelId = useId();
+  const labelMarkup = children && /* @__PURE__ */ jsx(
+    _Text,
+    {
+      className: cssModule(
+        Spinner_module_default,
+        "hop-Spinner__label"
+      ),
+      size: SpinnerToTextSizeAdapter[size],
+      id: labelId,
+      children
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    ProgressBar,
+    {
+      ref,
+      isIndeterminate: true,
+      className: classNames,
+      style: mergedStyles,
+      "aria-labelledby": labelId,
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cssModule(
+              Spinner_module_default,
+              "hop-Spinner__track"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cssModule(
+              Spinner_module_default,
+              "hop-Spinner__fill"
+            )
+          }
+        ),
+        labelMarkup
+      ]
+    }
+  );
+};
+var _Spinner = forwardRef(Spinner);
+_Spinner.displayName = "Spinner";
+
+export { GlobalSpinnerCssSelector, _Spinner };

package/dist/chunk-DRIRW7MJ.js

@@ -0,0 +1,77 @@
+import { CustomModalContext } from './chunk-AJKN2ALX.js';
+import { _BaseModal } from './chunk-YCKOALBB.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Dialog, OverlayTriggerStateContext, DialogTrigger } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./CustomModal.module.css#css-module
+var CustomModal_module_default = { "hop-CustomModal": "CustomModal-module__hop-CustomModal___TawWj" };
+var GlobalCustomModalCssSelector = "hop-CustomModal";
+var CustomModal = (props, ref) => {
+  var _a;
+  [props, ref] = useContextProps(props, ref, CustomModalContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    slot,
+    isDismissible = true,
+    isKeyboardDismissDisabled,
+    size: sizeProp,
+    overlayProps,
+    isOpen,
+    defaultOpen,
+    onOpenChange,
+    children: childrenProp,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    GlobalCustomModalCssSelector,
+    cssModule(
+      CustomModal_module_default,
+      GlobalCustomModalCssSelector,
+      size.toLowerCase()
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    _BaseModal,
+    {
+      ...overlayProps,
+      isOpen,
+      defaultOpen,
+      onOpenChange,
+      size,
+      isDismissable: isDismissible,
+      isKeyboardDismissDisabled,
+      children: /* @__PURE__ */ jsx(
+        Dialog,
+        {
+          ...otherProps,
+          ref,
+          className: classNames,
+          style: mergedStyles,
+          slot,
+          children: (renderProps) => /* @__PURE__ */ jsx(OverlayTriggerStateContext.Provider, { value: null, children: children(renderProps) })
+        }
+      )
+    }
+  );
+};
+var _CustomModal = forwardRef(CustomModal);
+_CustomModal.displayName = "CustomModal";
+var CustomModalTrigger = DialogTrigger;
+
+export { CustomModalTrigger, GlobalCustomModalCssSelector, _CustomModal };

package/dist/chunk-E42M72WS.js

@@ -0,0 +1,74 @@
+import { TabsContext, InternalTabsContext } from './chunk-ZXON3BAA.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import { useControlledState } from '@react-stately/utils';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, Tabs as Tabs$1, Provider } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalTabsCssSelector = "hop-Tabs";
+function Tabs(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, TabsContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    slot,
+    isDisabled,
+    disabledKeys,
+    variant = "standalone",
+    size = "sm",
+    isFluid,
+    ...otherProps
+  } = ownProps;
+  const [value, setValue] = useControlledState(props.selectedKey, (_a = props.defaultSelectedKey) != null ? _a : null, props.onSelectionChange);
+  if (!props["aria-label"] && !props["aria-labelledby"]) {
+    console.warn("An aria-label or aria-labelledby prop is required on Tabs for accessibility.");
+  }
+  const classNames = clsx(
+    GlobalTabsCssSelector,
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  return /* @__PURE__ */ jsx(
+    Tabs$1,
+    {
+      ref,
+      slot,
+      className: classNames,
+      style: mergedStyles,
+      isDisabled,
+      disabledKeys,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(
+        Provider,
+        {
+          values: [
+            [InternalTabsContext, {
+              variant,
+              size,
+              selectedKey: value,
+              onSelectionChange: setValue,
+              isFluid,
+              isDisabled,
+              disabledKeys,
+              "aria-label": props["aria-label"],
+              "aria-labelledby": props["aria-labelledby"]
+            }]
+          ],
+          children
+        }
+      )
+    }
+  );
+}
+var _Tabs = forwardRef(Tabs);
+_Tabs.displayName = "Tabs";
+
+export { GlobalTabsCssSelector, _Tabs };

package/dist/chunk-EGASA3QE.js

@@ -0,0 +1,52 @@
+import { IconListContext } from './chunk-GBWXEK6N.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { IconContext } from '@hopper-ui/icons';
+import { slot, useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./IconList.module.css#css-module
+var IconList_module_default = { "hop-IconList": "IconList-module__hop-IconList___KtipB" };
+var GlobalIconListCssSelector = "hop-IconList";
+function IconList(props, ref) {
+  [props, ref] = useContextProps(props, ref, IconListContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { children, style, className, slot, size, ...otherProps } = ownProps;
+  const classNames = clsx(
+    className,
+    GlobalIconListCssSelector,
+    IconList_module_default["hop-IconList"],
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot != null ? slot : void 0,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [IconContext, {
+              size
+            }]
+          ],
+          children
+        }
+      )
+    }
+  );
+}
+var _IconList = slot("icon", forwardRef(IconList));
+_IconList.displayName = "IconList";
+
+export { GlobalIconListCssSelector, _IconList };

package/dist/chunk-FA26RZSE.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/avatar/src/AvatarContext.ts
+var AvatarContext = createContext({});
+AvatarContext.displayName = "AvatarContext";
+
+export { AvatarContext };

package/dist/chunk-FDJDFE4U.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/list-box/src/ListBoxItemContext.ts
+var ListBoxItemContext = createContext({});
+ListBoxItemContext.displayName = "ListBoxItemContext";
+
+export { ListBoxItemContext };

package/dist/chunk-FFSXWRQ4.js

@@ -0,0 +1,91 @@
+import { CheckboxContext } from './chunk-2EAZPH3M.js';
+import { IconListContext } from './chunk-GBWXEK6N.js';
+import { useFormProps } from './chunk-YMTZYK3U.js';
+import { ensureTextWrapper } from './chunk-WPIH4OAE.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { TextContext } from './chunk-ZNOU2CGM.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { MinusIcon, CheckmarkIcon, IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Checkbox as Checkbox$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./Checkbox.module.css#css-module
+var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___DqcRn", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___mEoAk", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___GR7p3", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___gyRpI", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___qkIpL", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___gE0ae", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___e1PuA", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___9O6m-" };
+var GlobalCheckboxCssSelector = "hop-Checkbox";
+function Checkbox(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, CheckboxContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp = "md",
+    style: styleProp,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalCheckboxCssSelector,
+    cssModule(
+      Checkbox_module_default,
+      "hop-Checkbox",
+      size
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return ensureTextWrapper(prev);
+  });
+  return /* @__PURE__ */ jsx(
+    Checkbox$1,
+    {
+      ref,
+      className: classNames,
+      style,
+      ...otherProps,
+      children: (checkboxProps) => {
+        const checkboxIconClassName = Checkbox_module_default["hop-Checkbox__check"];
+        const icon = checkboxProps.isIndeterminate ? /* @__PURE__ */ jsx(MinusIcon, { size: "sm", className: checkboxIconClassName }) : /* @__PURE__ */ jsx(CheckmarkIcon, { size: "sm", className: checkboxIconClassName });
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: Checkbox_module_default["hop-Checkbox__box"], children: icon }),
+          /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+            SlotProvider,
+            {
+              values: [
+                [TextContext, {
+                  className: Checkbox_module_default["hop-Checkbox__text"],
+                  size
+                }],
+                [IconListContext, {
+                  className: Checkbox_module_default["hop-Checkbox__icon-list"],
+                  size
+                }],
+                [IconContext, {
+                  className: Checkbox_module_default["hop-Checkbox__icon"],
+                  size
+                }]
+              ],
+              children: children(checkboxProps)
+            }
+          ) })
+        ] });
+      }
+    }
+  );
+}
+var _Checkbox = forwardRef(Checkbox);
+_Checkbox.displayName = "Checkbox";
+
+export { GlobalCheckboxCssSelector, _Checkbox };

package/dist/chunk-FIEPLQID.js

@@ -0,0 +1,58 @@
+import { AvatarContext } from './chunk-FA26RZSE.js';
+import { _RichIconAvatarImage } from './chunk-XDFCDNZP.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { BrokenImageRichIcon } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { mergeProps } from 'react-aria';
+import { useContextProps, composeRenderProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalBrokenAvatarCssSelector = "hop-BrokenAvatar";
+function BrokenAvatar(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, AvatarContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    size: sizeValue,
+    style,
+    isDisabled,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeValue)) != null ? _a : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalBrokenAvatarCssSelector,
+    stylingProps.className
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style: mergedStyles,
+    values: {
+      isDisabled: isDisabled || false
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    _RichIconAvatarImage,
+    {
+      isDisabled,
+      ref,
+      size,
+      ...mergeProps(renderProps, otherProps),
+      children: /* @__PURE__ */ jsx(BrokenImageRichIcon, {})
+    }
+  );
+}
+var _BrokenAvatar = forwardRef(BrokenAvatar);
+_BrokenAvatar.displayName = "BrokenAvatar";
+
+export { GlobalBrokenAvatarCssSelector, _BrokenAvatar };