@hopper-ui/components 1.5.11 → 1.5.13

package/dist/chunk-YMTZYK3U.js

@@ -0,0 +1,68 @@
+import { FormContext } from './chunk-UYYHPXUH.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useContext, useMemo } from 'react';
+import { Form as Form$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Form.module.css#css-module
+var Form_module_default = { "hop-Form": "Form-module__hop-Form___1Lmw5" };
+var GlobalFormCssSelector = "hop-Form";
+function useFormProps(props) {
+  const ctx = useContext(FormContext);
+  return useMemo(() => {
+    let result = props;
+    if (ctx) {
+      result = { ...props };
+      for (const key in ctx) {
+        if (result[key] === void 0) {
+          result[key] = ctx[key];
+        }
+      }
+    }
+    return result;
+  }, [ctx, props]);
+}
+function Form(props, ref) {
+  var _a;
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    isFluid,
+    isDisabled,
+    necessityIndicator,
+    size: sizeProp,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    GlobalFormCssSelector,
+    cssModule(
+      Form_module_default,
+      "hop-Form"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: { isDisabled, isFluid, necessityIndicator, size }, children: /* @__PURE__ */ jsx(
+    Form$1,
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      ...otherProps,
+      children
+    }
+  ) });
+}
+var _Form = forwardRef(Form);
+_Form.displayName = "Form";
+
+export { GlobalFormCssSelector, _Form, useFormProps };

package/dist/chunk-YVCZUIU3.js

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

package/dist/chunk-YYRU4JQR.js

@@ -0,0 +1,114 @@
+import { LinkButtonContext } from './chunk-3UQFC2NQ.js';
+import { IconListContext } from './chunk-GBWXEK6N.js';
+import { useFormProps } from './chunk-YMTZYK3U.js';
+import { useSlot } from './chunk-H5YTU3U7.js';
+import { ensureTextWrapper } from './chunk-WPIH4OAE.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 { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Link, DEFAULT_SLOT } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./LinkButton.module.css#css-module
+var LinkButton_module_default = { "hop-LinkButton": "LinkButton-module__hop-LinkButton___qgQ0V Button-module__hop-Button___xiJh7", "hop-LinkButton--fluid": "LinkButton-module__hop-LinkButton--fluid___JLDkS Button-module__hop-Button--fluid___VOQAE", "hop-LinkButton--sm": "LinkButton-module__hop-LinkButton--sm___tmQwa Button-module__hop-Button--sm___Wul7x", "hop-LinkButton--icon-only": "LinkButton-module__hop-LinkButton--icon-only___6hijA Button-module__hop-Button--icon-only___MFz57", "hop-LinkButton--primary": "LinkButton-module__hop-LinkButton--primary___c4xY5 Button-module__hop-Button--primary___RKI1i", "hop-LinkButton--secondary": "LinkButton-module__hop-LinkButton--secondary___QmN40 Button-module__hop-Button--secondary___wqqJQ", "hop-LinkButton--upsell": "LinkButton-module__hop-LinkButton--upsell___7KBjx Button-module__hop-Button--upsell___VMpcZ", "hop-LinkButton--danger": "LinkButton-module__hop-LinkButton--danger___erbwk Button-module__hop-Button--danger___O-jr8", "hop-LinkButton--ghost-primary": "LinkButton-module__hop-LinkButton--ghost-primary___-4dX1 Button-module__hop-Button--ghost-primary___FnZSg", "hop-LinkButton--ghost-secondary": "LinkButton-module__hop-LinkButton--ghost-secondary___uQqYK Button-module__hop-Button--ghost-secondary___iqNgt", "hop-LinkButton--ghost-danger": "LinkButton-module__hop-LinkButton--ghost-danger___y9mBg Button-module__hop-Button--ghost-danger___qB-Df", "hop-LinkButton__Spinner": "LinkButton-module__hop-LinkButton__Spinner___faSgs Button-module__hop-Button__Spinner___NRYSd", "hop-LinkButton__icon": "LinkButton-module__hop-LinkButton__icon___-MGIG Button-module__hop-Button__icon___U--U8", "hop-LinkButton__icon-list": "LinkButton-module__hop-LinkButton__icon-list___vZk-O Button-module__hop-Button__icon___U--U8", "hop-LinkButton__text": "LinkButton-module__hop-LinkButton__text___h9qCe Button-module__hop-Button__text___1vQg7", "hop-LinkButton__end-icon": "LinkButton-module__hop-LinkButton__end-icon___lmy-T Button-module__hop-Button__end-icon___DarhX", "hop-LinkButton__end-icon-list": "LinkButton-module__hop-LinkButton__end-icon-list___mRftM Button-module__hop-Button__end-icon___DarhX" };
+var GlobalLinkButtonCssSelector = "hop-LinkButton";
+function LinkButton(props, ref) {
+  var _a, _b;
+  [props, ref] = useContextProps(props, ref, LinkButtonContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp,
+    isExternal,
+    rel,
+    target,
+    isFluid: isFluidProp,
+    variant = "primary",
+    style: styleProp,
+    ...otherProps
+  } = ownProps;
+  const [textRef, hasText] = useSlot();
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const isFluid = (_b = useResponsiveValue(isFluidProp)) != null ? _b : false;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalLinkButtonCssSelector,
+    cssModule(
+      LinkButton_module_default,
+      "hop-LinkButton",
+      variant,
+      size,
+      isFluid && "fluid",
+      !hasText && "icon-only"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return ensureTextWrapper(prev);
+  });
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [IconListContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              size,
+              className: LinkButton_module_default["hop-LinkButton__icon-list"]
+            },
+            "end-icon": {
+              size,
+              className: LinkButton_module_default["hop-LinkButton__end-icon-list"]
+            }
+          }
+        }],
+        [IconContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              size,
+              className: LinkButton_module_default["hop-LinkButton__icon"]
+            },
+            "end-icon": {
+              size,
+              className: LinkButton_module_default["hop-LinkButton__end-icon"]
+            }
+          }
+        }],
+        [TextContext, {
+          className: LinkButton_module_default["hop-LinkButton__text"],
+          size,
+          ref: textRef
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        Link,
+        {
+          ref,
+          rel: rel != null ? rel : isExternal ? "noopener noreferrer" : void 0,
+          target: target != null ? target : isExternal ? "_blank" : void 0,
+          className: classNames,
+          style,
+          slot: props.slot || void 0,
+          ...otherProps,
+          children
+        }
+      )
+    }
+  );
+}
+var _LinkButton = slot("button", forwardRef(LinkButton));
+_LinkButton.displayName = "LinkButton";
+
+export { GlobalLinkButtonCssSelector, _LinkButton };

package/dist/chunk-ZNOU2CGM.js

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

package/dist/chunk-ZOTXNUAV.js

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

package/dist/chunk-ZRDKRE3E.js

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

package/dist/chunk-ZSFJVMJN.js

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

package/dist/chunk-ZXON3BAA.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+// src/tabs/src/TabsContext.ts
+var TabsContext = createContext({});
+TabsContext.displayName = "TabsContext";
+var TabContext = createContext({});
+TabContext.displayName = "TabContext";
+var TabPanelContext = createContext({});
+TabPanelContext.displayName = "TabPanelContext";
+var TabListContext = createContext({});
+TabListContext.displayName = "TabListContext";
+var InternalTabsContext = createContext({});
+
+export { InternalTabsContext, TabContext, TabListContext, TabPanelContext, TabsContext };

package/dist/chunk-ZXRWEYKU.js

@@ -0,0 +1,125 @@
+import { PasswordFieldContext } from './chunk-QW45G6K4.js';
+import { Input } from './chunk-AAMIUZW2.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 { _EmbeddedButton } from './chunk-PHYO5KW6.js';
+import { useFormProps } from './chunk-YMTZYK3U.js';
+import { useLocalizedString } from './chunk-75DHKNW2.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { EyeVisibleIcon, EyeHiddenIcon } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { mergeRefs } from '@react-aria/utils';
+import clsx from 'clsx';
+import { forwardRef, useState } from 'react';
+import { useObjectRef } from 'react-aria';
+import { useContextProps, composeRenderProps, TextField } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./PasswordField.module.css#css-module
+var PasswordField_module_default = { "hop-PasswordField": "PasswordField-module__hop-PasswordField___osebQ", "hop-PasswordField--fluid": "PasswordField-module__hop-PasswordField--fluid___2HUEz", "hop-PasswordField__Label": "PasswordField-module__hop-PasswordField__Label___36Ui1", "hop-PasswordField__InputGroup": "PasswordField-module__hop-PasswordField__InputGroup___obGBz", "hop-PasswordField__ErrorMessage": "PasswordField-module__hop-PasswordField__ErrorMessage___Ze1H4", "hop-PasswordField__HelperMessage": "PasswordField-module__hop-PasswordField__HelperMessage___W6bKt" };
+var GlobalPasswordFieldCssSelector = "hop-PasswordField";
+function PasswordField(props, ref) {
+  var _a;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, PasswordFieldContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [showPassword, setShowPassword] = useState(false);
+  const stringFormatter = useLocalizedString();
+  const {
+    className,
+    style: styleProp,
+    size,
+    placeholder,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    necessityIndicator,
+    inputGroupProps,
+    inputProps,
+    embeddedButtonProps,
+    label,
+    description,
+    errorMessage,
+    ...otherProps
+  } = ownProps;
+  const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalPasswordFieldCssSelector,
+    cssModule(
+      PasswordField_module_default,
+      "hop-PasswordField",
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const { className: inputGroupClassName, ...otherInputGroupProps } = inputGroupProps != null ? inputGroupProps : {};
+  const inputGroupClassNames = clsx(PasswordField_module_default["hop-PasswordField__InputGroup"], inputGroupClassName);
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isDisabled,
+      isInvalid,
+      isFluid: true,
+      className: inputGroupClassNames,
+      ...otherInputGroupProps,
+      children: [
+        /* @__PURE__ */ jsx(Input, { ref: inputRef, placeholder, type: showPassword ? "text" : "password", size, ...inputProps }),
+        /* @__PURE__ */ jsx(
+          _EmbeddedButton,
+          {
+            isDisabled,
+            "aria-label": stringFormatter.format("PasswordField.toggleVisibility"),
+            size: "lg",
+            ...embeddedButtonProps,
+            onPress: (e) => {
+              var _a2;
+              setShowPassword((x) => !x);
+              (_a2 = embeddedButtonProps == null ? void 0 : embeddedButtonProps.onPress) == null ? void 0 : _a2.call(embeddedButtonProps, e);
+            },
+            children: showPassword ? /* @__PURE__ */ jsx(EyeVisibleIcon, {}) : /* @__PURE__ */ jsx(EyeHiddenIcon, {})
+          }
+        )
+      ]
+    }
+  ) });
+  const childrenMarkup = /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(_Label, { className: PasswordField_module_default["hop-PasswordField__Label"], isRequired, necessityIndicator, children: label }),
+    inputMarkup,
+    description && /* @__PURE__ */ jsx(_HelperMessage, { className: PasswordField_module_default["hop-PasswordField__HelperMessage"], children: description }),
+    /* @__PURE__ */ jsx(_ErrorMessage, { className: PasswordField_module_default["hop-PasswordField__ErrorMessage"], children: errorMessage })
+  ] });
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ref,
+      style,
+      className: classNames,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+var _PasswordField = forwardRef(PasswordField);
+_PasswordField.displayName = "PasswordField";
+
+export { GlobalPasswordFieldCssSelector, _PasswordField };