@hopper-ui/components 1.5.12 → 1.5.14

package/dist/chunk-UYYHPXUH.js

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

package/dist/chunk-VCXZZ25L.js

@@ -0,0 +1,122 @@
+import { LinkContext } from './chunk-MTULE7GI.js';
+import { IconListContext } from './chunk-GBWXEK6N.js';
+import { ensureTextWrapper } from './chunk-XCGP42UI.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 { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Link as Link$1, DEFAULT_SLOT } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Link.module.css#css-module
+var Link_module_default = { "hop-Link": "Link-module__hop-Link___RsliO", "hop-Link--xs": "Link-module__hop-Link--xs___Nfphs", "hop-Link--sm": "Link-module__hop-Link--sm___HWWgK", "hop-Link--md": "Link-module__hop-Link--md___DM8lJ", "hop-Link--lg": "Link-module__hop-Link--lg___KmTGD", "hop-Link--xl": "Link-module__hop-Link--xl___7aKWQ", "hop-Link--2xl": "Link-module__hop-Link--2xl___38Bhu", "hop-Link--inherit": "Link-module__hop-Link--inherit___Xu3Ue", "hop-Link--standalone": "Link-module__hop-Link--standalone___tWVur", "hop-Link__text": "Link-module__hop-Link__text___9fyqN", "hop-Link--quiet": "Link-module__hop-Link--quiet___E0MPd", "hop-Link--primary": "Link-module__hop-Link--primary___sB3JV", "hop-Link--secondary": "Link-module__hop-Link--secondary___mQRoZ", "hop-Link__icon": "Link-module__hop-Link__icon___7SXdJ", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___FWH13", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___eWp-A", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___4Vkg5" };
+var GlobalLinkCssSelector = "hop-Link";
+var LinkToIconSizeAdapter = {
+  inherit: void 0,
+  xs: "sm",
+  sm: "sm",
+  md: "md",
+  lg: "md",
+  xl: "lg",
+  "2xl": "lg"
+};
+function Link(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, LinkContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp,
+    style: styleProp,
+    isQuiet,
+    isExternal,
+    isStandalone,
+    variant = "primary",
+    rel,
+    target,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "inherit";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalLinkCssSelector,
+    cssModule(
+      Link_module_default,
+      "hop-Link",
+      isQuiet && "quiet",
+      variant,
+      size,
+      isStandalone && "standalone"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return ensureTextWrapper(prev);
+  });
+  const iconSize = LinkToIconSizeAdapter[size];
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [IconListContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              color: "inherit",
+              size: iconSize,
+              className: Link_module_default["hop-Link__icon-list"]
+            },
+            "start-icon": {
+              color: "inherit",
+              size: iconSize,
+              className: Link_module_default["hop-Link__start-icon-list"]
+            }
+          }
+        }],
+        [IconContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              color: "inherit",
+              size: iconSize,
+              className: Link_module_default["hop-Link__icon"]
+            },
+            "start-icon": {
+              color: "inherit",
+              size: iconSize,
+              className: Link_module_default["hop-Link__start-icon"]
+            }
+          }
+        }],
+        [TextContext, {
+          size: "inherit",
+          className: Link_module_default["hop-Link__text"]
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        Link$1,
+        {
+          rel: rel != null ? rel : isExternal ? "noopener noreferrer" : void 0,
+          target: target != null ? target : isExternal ? "_blank" : void 0,
+          ref,
+          className: classNames,
+          style,
+          ...otherProps,
+          children
+        }
+      )
+    }
+  );
+}
+var _Link = forwardRef(Link);
+_Link.displayName = "Link";
+
+export { GlobalLinkCssSelector, _Link };

package/dist/chunk-VS3PE4S6.js

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

package/dist/chunk-W4TCUPPA.js

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

package/dist/chunk-WC5ZUP2T.js

@@ -0,0 +1,80 @@
+import { TagContext } from './chunk-EWMWQ2MC.js';
+import { TabContext, InternalTabsContext } from './chunk-ZXON3BAA.js';
+import { BadgeContext } from './chunk-ZSFJVMJN.js';
+import { _Text } from './chunk-U36V63TW.js';
+import { TextContext } from './chunk-ZNOU2CGM.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useContext } from 'react';
+import { useContextProps, Tab as Tab$1, Provider } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Tab.module.css#css-module
+var Tab_module_default = { "hop-Tab": "Tab-module__hop-Tab___Q-EgP", "hop-Tab--fluid": "Tab-module__hop-Tab--fluid___XS9Mw", "hop-Tab--md": "Tab-module__hop-Tab--md___R9UQq", "hop-Tab__icon": "Tab-module__hop-Tab__icon___oPz57", "hop-Tab__text": "Tab-module__hop-Tab__text___PYm3a", "hop-Tab__badge": "Tab-module__hop-Tab__badge___7lAOr", "hop-Tab__tag": "Tab-module__hop-Tab__tag___yq-GU" };
+var GlobalTabCssSelector = "hop-Tab";
+function Tab(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, TabContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { variant, size, isFluid } = (_a = useContext(InternalTabsContext)) != null ? _a : {};
+  const {
+    className,
+    children,
+    style,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalTabCssSelector,
+    cssModule(
+      Tab_module_default,
+      "hop-Tab",
+      variant,
+      size,
+      isFluid && "fluid"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  return /* @__PURE__ */ jsx(
+    Tab$1,
+    {
+      ...otherProps,
+      style: mergedStyles,
+      className: classNames,
+      ref,
+      children: /* @__PURE__ */ jsx(
+        Provider,
+        {
+          values: [
+            [TextContext, {
+              className: Tab_module_default["hop-Tab__text"],
+              size
+            }],
+            [IconContext, {
+              className: Tab_module_default["hop-Tab__icon"],
+              size
+            }],
+            [BadgeContext, {
+              className: Tab_module_default["hop-Tab__badge"]
+            }],
+            [TagContext, {
+              className: Tab_module_default["hop-Tab__tag"],
+              size
+            }]
+          ],
+          children: typeof children === "string" ? /* @__PURE__ */ jsx(_Text, { children }) : children
+        }
+      )
+    }
+  );
+}
+var _Tab = forwardRef(Tab);
+_Tab.displayName = "Tab";
+
+export { GlobalTabCssSelector, _Tab };

package/dist/chunk-WJ55ZV54.js

@@ -0,0 +1,27 @@
+import { TextContext as TextContext$1 } from './chunk-ZNOU2CGM.js';
+import { TextContext } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+function ClearProviders({
+  values,
+  children
+}) {
+  for (const Context of values) {
+    children = /* @__PURE__ */ jsx(Context.Provider, { value: null, children });
+  }
+  return children;
+}
+function ClearContainerSlots({ children }) {
+  return /* @__PURE__ */ jsx(
+    ClearProviders,
+    {
+      values: [
+        TextContext,
+        TextContext$1
+      ],
+      children
+    }
+  );
+}
+
+export { ClearContainerSlots, ClearProviders };

package/dist/chunk-WJRMD4JP.js

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

package/dist/chunk-WYU6M7QL.js

@@ -0,0 +1,153 @@
+import { isFunction } from './chunk-TIPN4VYD.js';
+import { ListBoxContext } from './chunk-4HEOTMP7.js';
+import { _ListBoxItem } from './chunk-XR6SC252.js';
+import { ListBoxItemContext } from './chunk-FDJDFE4U.js';
+import { ListBoxSectionContext } from './chunk-MOZ6M5ZZ.js';
+import { HeaderContext } from './chunk-FOQ7KN4V.js';
+import { useLocalizedString } from './chunk-75DHKNW2.js';
+import { _Text } from './chunk-U36V63TW.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { useLoadMore } from '@react-aria/utils';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, ListBox as ListBox$1, Collection } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./ListBox.module.css#css-module
+var ListBox_module_default = { "hop-ListBox": "ListBox-module__hop-ListBox___Uw3kO", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___YnZn2", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___L8YA7", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___uQnq0", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___RqIs6" };
+var GlobalListBoxCssSelector = "hop-ListBox";
+var GlobalListBoxEmptyItemCssSelector = "hop-ListBox__empty-item";
+var ListBoxToTextSizeAdapter = {
+  xs: "sm",
+  sm: "sm",
+  md: "sm",
+  lg: "md"
+};
+function ListBox(props, ref) {
+  var _a, _b;
+  [props, ref] = useContextProps(props, ref, ListBoxContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    disallowEmptySelection: disallowEmptySelectionProp,
+    isFluid: isFluidProp,
+    isInvalid,
+    isLoading,
+    onLoadMore,
+    renderEmptyState,
+    size: sizeProp,
+    style: styleProp,
+    selectionIndicator = "check",
+    selectionMode = "single",
+    loadingListBoxItemProps,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "sm";
+  const isFluid = (_b = useResponsiveValue(isFluidProp)) != null ? _b : false;
+  const disallowEmptySelection = disallowEmptySelectionProp != null ? disallowEmptySelectionProp : selectionIndicator === "input" && selectionMode === "single";
+  const stringFormatter = useLocalizedString();
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalListBoxCssSelector,
+    cssModule(
+      ListBox_module_default,
+      "hop-ListBox",
+      size,
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const emptyItemClassNames = clsx(
+    GlobalListBoxEmptyItemCssSelector,
+    cssModule(
+      ListBox_module_default,
+      "hop-ListBox__empty-item",
+      size
+    )
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  useLoadMore({ isLoading, onLoadMore }, ref);
+  const renderChildren = () => {
+    if (props.items) {
+      return /* @__PURE__ */ jsx(Collection, { items: props.items, children: (item) => isFunction(children) ? children(item) : children });
+    }
+    if (isFunction(children)) {
+      console.warn("ListBox: Children should not be a function when items are not provided.");
+      return null;
+    }
+    return children;
+  };
+  const handleRenderEmptyState = (renderProps) => {
+    let result = null;
+    if (renderEmptyState && isFunction(renderEmptyState)) {
+      result = renderEmptyState(renderProps);
+      if (result) {
+        return /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(_Text, { className: emptyItemClassNames, size: ListBoxToTextSizeAdapter[size], children: result }) });
+      }
+    }
+    return result;
+  };
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [HeaderContext, {
+          className: ListBox_module_default["hop-ListBox__section-header"]
+        }],
+        [ListBoxSectionContext, {
+          className: ListBox_module_default["hop-ListBox__section"]
+        }],
+        [ListBoxItemContext, {
+          className: ListBox_module_default["hop-ListBox__item"],
+          size,
+          selectionIndicator,
+          isInvalid
+        }]
+      ],
+      children: /* @__PURE__ */ jsxs(
+        ListBox$1,
+        {
+          ref,
+          className: classNames,
+          disallowEmptySelection,
+          renderEmptyState: handleRenderEmptyState,
+          selectionMode,
+          style,
+          "data-loading": isLoading,
+          shouldSelectOnPressUp: true,
+          ...otherProps,
+          children: [
+            renderChildren(),
+            isLoading && Array.from({ length: 5 }).map((_, index) => {
+              return /* @__PURE__ */ jsx(
+                _ListBoxItem,
+                {
+                  id: `loadingListItem_${index.toString()}`,
+                  isLoading,
+                  size,
+                  textValue: stringFormatter.format("ListBoxItem.loadingTextValue"),
+                  ...loadingListBoxItemProps
+                },
+                `loadingListItem_${index.toString()}`
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+}
+var _ListBox = forwardRef(ListBox);
+_ListBox.displayName = "ListBox";
+
+export { GlobalListBoxCssSelector, GlobalListBoxEmptyItemCssSelector, _ListBox };

package/dist/chunk-XCGP42UI.js

@@ -0,0 +1,12 @@
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { _Text } from './chunk-U36V63TW.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ensureTextWrapper(children, elementType) {
+  if (children && isTextOnlyChildren(children)) {
+    return /* @__PURE__ */ jsx(_Text, { elementType, children });
+  }
+  return children;
+}
+
+export { ensureTextWrapper };

package/dist/chunk-XDX722SV.js

@@ -0,0 +1,66 @@
+import { PopoverBaseContext } from './chunk-3B2PUC6W.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useColorSchemeContext, useResponsiveValue, getRootCSSClasses } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Popover } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./PopoverBase.module.css#css-module
+var PopoverBase_module_default = { "hop-PopoverBase": "PopoverBase-module__hop-PopoverBase___mQ2pO" };
+var GlobalPopoverBaseCssSelector = "hop-PopoverBase";
+function PopoverBase(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, PopoverBaseContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { colorScheme } = useColorSchemeContext();
+  const {
+    children,
+    className,
+    placement: placementProp,
+    style: styleProp,
+    containerPadding,
+    ...otherProps
+  } = ownProps;
+  const placement = (_a = useResponsiveValue(placementProp)) != null ? _a : "bottom";
+  const popoverClassNames = composeClassnameRenderProps(
+    className,
+    GlobalPopoverBaseCssSelector,
+    cssModule(
+      PopoverBase_module_default,
+      "hop-PopoverBase"
+    ),
+    getRootCSSClasses(colorScheme),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    let extraStyles = {};
+    if (containerPadding) {
+      extraStyles = {
+        ...extraStyles,
+        "--container-padding": `${containerPadding}px`
+      };
+    }
+    return {
+      ...stylingProps.style,
+      ...extraStyles,
+      ...prev
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      ref,
+      style,
+      className: popoverClassNames,
+      containerPadding,
+      placement,
+      ...otherProps,
+      children
+    }
+  );
+}
+var _PopoverBase = forwardRef(PopoverBase);
+_PopoverBase.displayName = "PopoverBase";
+
+export { GlobalPopoverBaseCssSelector, _PopoverBase };

package/dist/chunk-XF77IMBO.js

@@ -0,0 +1,91 @@
+import { _OverlineText } from './chunk-UL2ITI33.js';
+import { BadgeContext } from './chunk-ZSFJVMJN.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { slot, useStyledSystem } from '@hopper-ui/styled-system';
+import { filterDOMProps } from '@react-aria/utils';
+import { forwardRef } from 'react';
+import { mergeProps } from 'react-aria';
+import { useContextProps, composeRenderProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// src/badge/utils/Badge.utils.ts
+function isOrbiterVariant(variant) {
+  return ["informative", "warning", "positive", "negative"].includes(variant);
+}
+function mapOrbiterToHopperVariants(variant) {
+  if (isOrbiterVariant(variant)) {
+    return "primary";
+  }
+  return variant;
+}
+
+// css-module:./Badge.module.css#css-module
+var Badge_module_default = { "hop-Badge": "Badge-module__hop-Badge___ssR3s", "hop-Badge--primary": "Badge-module__hop-Badge--primary___VSZwW", "hop-Badge--secondary": "Badge-module__hop-Badge--secondary___UO4LY", "hop-Badge--subdued": "Badge-module__hop-Badge--subdued___ba4Hb" };
+var GlobalBadgeCssSelector = "hop-Badge";
+function Badge(props, ref) {
+  [props, ref] = useContextProps(props, ref, BadgeContext);
+  const { isHovered, isPressed, isSelected } = props;
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    isDisabled,
+    isIndeterminate,
+    style,
+    slot,
+    variant = "primary",
+    ...otherProps
+  } = ownProps;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalBadgeCssSelector,
+    cssModule(
+      Badge_module_default,
+      "hop-Badge",
+      mapOrbiterToHopperVariants(variant)
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style: mergedStyles,
+    values: {
+      isDisabled: isDisabled || false,
+      isIndeterminate: isIndeterminate || false,
+      isHovered: isHovered || false,
+      isPressed: isPressed || false,
+      isSelected: isSelected || false,
+      variant: mapOrbiterToHopperVariants(variant)
+    }
+  });
+  const isDot = isIndeterminate || !renderProps.children;
+  const filteredProps = filterDOMProps(otherProps, { labelable: true });
+  return /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+    _OverlineText,
+    {
+      ...mergeProps(filteredProps, renderProps),
+      ref,
+      slot: slot != null ? slot : void 0,
+      "data-disabled": isDisabled || void 0,
+      "aria-disabled": isDisabled || void 0,
+      "data-indeterminate": isDot || void 0,
+      "data-hovered": isHovered || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-selected": isSelected || void 0,
+      children: !isDot && renderProps.children
+    }
+  ) });
+}
+var _Badge = slot("badge", forwardRef(Badge));
+_Badge.displayName = "Badge";
+
+export { GlobalBadgeCssSelector, _Badge };

package/dist/chunk-XFG3CXMD.js

@@ -0,0 +1,6 @@
+import { DialogTrigger } from 'react-aria-components';
+
+// src/alert/src/AlertTrigger.tsx
+var AlertTrigger = DialogTrigger;
+
+export { AlertTrigger };