@hopper-ui/components 1.1.0 → 1.2.1

package/dist/{chunk-XGI4LDIF.js → chunk-XI3BX2TP.js}

@@ -1,13 +1,13 @@
 import { useFontFaceReady } from './chunk-IU6XMS2X.js';
 import { useTruncatedText } from './chunk-Z57VHYOF.js';
 import { TextAreaContext } from './chunk-MHQZXLKW.js';
-import { _InputGroup } from './chunk-YRUBXLBX.js';
+import { _InputGroup } from './chunk-TFELIWJO.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
-import { useLocalizedString } from './chunk-YEYNRBMQ.js';
+import { useLocalizedString } from './chunk-F4H76S4H.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
-import { _Text } from './chunk-6MSRPPI6.js';
+import { _Text } from './chunk-K7DU4YR4.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -79,7 +79,7 @@ function $b5e257d569688ac6$export$535bd6ca7f90a273() {
 }
 
 // css-module:./TextArea.module.css#css-module
-var TextArea_module_default = { "hop-TextArea": "TextArea-module__hop-TextArea___uQGKH", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___sNZwX", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___x0-91", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___ozMT-", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___1hWlx", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___r0SC4", "hop-TextArea__char-count": "TextArea-module__hop-TextArea__char-count___TBxZb", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___F5Ho0", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___EXkDT" };
+var TextArea_module_default = { "hop-TextArea": "TextArea-module__hop-TextArea___RQPX1", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___8Dtb-", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___up8f-", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___Goc9g", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___5CqUn", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___Hc7Ow", "hop-TextArea__char-count": "TextArea-module__hop-TextArea__char-count___U8NGM", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___QQhT-", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___JSKR5" };
 var GlobalTextAreaCssSelector = "hop-TextArea";
 var DefaultMinimumTextAreaRows = 3;
 var pxToInt = (value) => {

package/dist/chunk-XUCH26RT.js

@@ -0,0 +1,70 @@
+import { LabelContext } from './chunk-QCA3ZR56.js';
+import { useLocalizedString } from './chunk-F4H76S4H.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, Label as Label$1 } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./Label.module.css#css-module
+var Label_module_default = { "hop-Label": "Label-module__hop-Label___43PE1", "hop-Label__indicator": "Label-module__hop-Label__indicator___PXvS0" };
+var GlobalLabelCssSelector = "hop-Label";
+function Label(props, ref) {
+  [props, ref] = useContextProps(props, ref, LabelContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    isRequired,
+    necessityIndicator = isRequired != null ? "icon" : null,
+    ...otherProps
+  } = ownProps;
+  const stringFormatter = useLocalizedString();
+  const classNames = clsx(
+    className,
+    GlobalLabelCssSelector,
+    cssModule(
+      Label_module_default,
+      "hop-Label"
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const necessityLabel = isRequired ? stringFormatter.format("Label.necessityLabel.required") : stringFormatter.format("Label.necessityLabel.optional");
+  const requiredIndicator = /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "aria-label": necessityLabel,
+      className: Label_module_default["hop-Label__indicator"],
+      children: "*"
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    Label$1,
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      children: [
+        children,
+        necessityIndicator === "label" && /* @__PURE__ */ jsxs("span", { children: [
+          " (",
+          necessityLabel,
+          ")"
+        ] }),
+        necessityIndicator === "icon" && isRequired && requiredIndicator
+      ]
+    }
+  );
+}
+var _Label = forwardRef(Label);
+_Label.displayName = "Label";
+
+export { GlobalLabelCssSelector, _Label };

package/dist/{chunk-CXCOSGTO.js → chunk-YWIDJ55Q.js}

@@ -13,7 +13,7 @@ import { useContextProps, FieldErrorContext, TagGroup as TagGroup$1 } from 'reac
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./TagGroup.module.css#css-module
-var TagGroup_module_default = { "hop-TagGroup": "TagGroup-module__hop-TagGroup___8bpFk", "hop-TagGroup__label": "TagGroup-module__hop-TagGroup__label___OoqBw", "hop-TagGroup__list": "TagGroup-module__hop-TagGroup__list___o5U5A", "hop-TagGroup__error-message": "TagGroup-module__hop-TagGroup__error-message___-Vy2o", "hop-TagGroup__helper-message": "TagGroup-module__hop-TagGroup__helper-message___Ys-Hl" };
+var TagGroup_module_default = { "hop-TagGroup": "TagGroup-module__hop-TagGroup___-qsWY", "hop-TagGroup__label": "TagGroup-module__hop-TagGroup__label___-6iVf", "hop-TagGroup__list": "TagGroup-module__hop-TagGroup__list___JxCmr", "hop-TagGroup__error-message": "TagGroup-module__hop-TagGroup__error-message___b3sVo", "hop-TagGroup__helper-message": "TagGroup-module__hop-TagGroup__helper-message___KFfUh" };
 var GlobalTagGroupCssSelector = "hop-TagGroup";
 function TagGroup(props, ref) {
   var _a;
@@ -25,6 +25,7 @@ function TagGroup(props, ref) {
     isInvalid = false,
     style: styleProp,
     size: sizeProp,
+    variant,
     ...otherProps
   } = ownProps;
   const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
@@ -55,7 +56,8 @@ function TagGroup(props, ref) {
         [TagContext, {
           className: TagGroup_module_default["hop-TagGroup__tag"],
           isInvalid,
-          size
+          size,
+          variant
         }],
         [ErrorMessageContext, {
           className: TagGroup_module_default["hop-TagGroup__error-message"],

package/dist/{chunk-BQZQTNI6.js → chunk-YXD3IR3T.js}

@@ -10,7 +10,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./ButtonGroup.module.css#css-module
-var ButtonGroup_module_default = { "hop-ButtonGroup": "ButtonGroup-module__hop-ButtonGroup___04OMd", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___gfk88", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___AWwpV", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___2HDvA", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___cWrk2", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___h-8op", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___-uxgb", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___TAcci" };
+var ButtonGroup_module_default = { "hop-ButtonGroup": "ButtonGroup-module__hop-ButtonGroup___MX7aG", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___7TWF1", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___61uoU", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___QEKHx", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___ocgo8", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___2BNou", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___aW16k", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___FZLER" };
 var GlobalButtonGroupCssSelector = "hop-ButtonGroup";
 function ButtonGroup(props, ref) {
   var _a, _b, _c, _d, _e;

package/dist/{chunk-A7HLXFSP.js → chunk-ZEXXNE5U.js}

@@ -1,13 +1,13 @@
 import { TextFieldContext } from './chunk-O4XPUINW.js';
-import { _InputGroup } from './chunk-YRUBXLBX.js';
-import { _ClearButton } from './chunk-SR3GAXY5.js';
+import { _InputGroup } from './chunk-TFELIWJO.js';
+import { _ClearButton } from './chunk-WYBQCRQB.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
-import { useLocalizedString } from './chunk-YEYNRBMQ.js';
+import { useLocalizedString } from './chunk-F4H76S4H.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
-import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { _Text } from './chunk-6MSRPPI6.js';
+import { _Text } from './chunk-K7DU4YR4.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -22,7 +22,7 @@ import { useContextProps, composeRenderProps, Input, TextField as TextField$1 }
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./TextField.module.css#css-module
-var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___Pmegw", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___gB9AM", "hop-TextField__Label": "TextField-module__hop-TextField__Label___5O2K-", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___YFY4G", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___qnReJ", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___IU7x-", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___QChBo" };
+var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___YVH8a", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___ZNRHZ", "hop-TextField__Label": "TextField-module__hop-TextField__Label___ztJuQ", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___Jjuy-", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___N7bZl", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___CUNme", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___FIu1i" };
 var GlobalTextFieldCssSelector = "hop-TextField";
 function TextField(props, ref) {
   var _a;
@@ -53,6 +53,7 @@ function TextField(props, ref) {
     isFluid: isFluidProp,
     isDisabled,
     isInvalid,
+    isRequired,
     ...otherProps
   } = ownProps;
   const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
@@ -119,7 +120,7 @@ function TextField(props, ref) {
         SlotProvider,
         {
           values: [
-            [LabelContext, { className: TextField_module_default["hop-TextField__Label"] }],
+            [LabelContext, { className: TextField_module_default["hop-TextField__Label"], isRequired }],
             [HelperMessageContext, { className: TextField_module_default["hop-TextField__HelperMessage"] }],
             [ErrorMessageContext, { className: TextField_module_default["hop-TextField__ErrorMessage"] }]
           ],
@@ -140,6 +141,7 @@ function TextField(props, ref) {
       onChange,
       isDisabled,
       isInvalid,
+      isRequired,
       ...otherProps,
       children: childrenMarkup
     }

package/dist/{chunk-TMWNNF4J.js → chunk-ZPPQJKHC.js}

@@ -1,8 +1,8 @@
 import { RadioContext } from './chunk-FU5CCPLP.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { _Text } from './chunk-6MSRPPI6.js';
+import { _Text } from './chunk-K7DU4YR4.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, Radio as Radio$1 } from 'react-ari
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Radio.module.css#css-module
-var Radio_module_default = { "hop-Radio": "Radio-module__hop-Radio___kje-D", "hop-Radio--focused": "Radio-module__hop-Radio--focused___WiNxl", "hop-Radio--hovered": "Radio-module__hop-Radio--hovered___JZ4wW", "hop-Radio--pressed": "Radio-module__hop-Radio--pressed___FbKXV", "hop-Radio--sm": "Radio-module__hop-Radio--sm___2I3ad", "hop-Radio--md": "Radio-module__hop-Radio--md___LkLVW", "hop-Radio__icon": "Radio-module__hop-Radio__icon___ZWDWh", "hop-Radio__icon-list": "Radio-module__hop-Radio__icon-list___pNFMD", "hop-Radio__box": "Radio-module__hop-Radio__box___-Sj0e", "hop-Radio__bullet": "Radio-module__hop-Radio__bullet___-iiHZ", "hop-Radio__text": "Radio-module__hop-Radio__text___LvdVH" };
+var Radio_module_default = { "hop-Radio": "Radio-module__hop-Radio___W0NkE", "hop-Radio--focused": "Radio-module__hop-Radio--focused___37nBy", "hop-Radio--hovered": "Radio-module__hop-Radio--hovered___bnBdz", "hop-Radio--pressed": "Radio-module__hop-Radio--pressed___Idq0t", "hop-Radio--sm": "Radio-module__hop-Radio--sm___Xk9cY", "hop-Radio--md": "Radio-module__hop-Radio--md___Ookee", "hop-Radio__icon": "Radio-module__hop-Radio__icon___V-YEN", "hop-Radio__icon-list": "Radio-module__hop-Radio__icon-list___-ZAQI", "hop-Radio__box": "Radio-module__hop-Radio__box___o2-Za", "hop-Radio__bullet": "Radio-module__hop-Radio__bullet___c4d6u", "hop-Radio__text": "Radio-module__hop-Radio__text___3HhWA" };
 var GlobalRadioCssSelector = "hop-Radio";
 function Radio(props, ref) {
   var _a;

package/dist/i18n/src/index.js

@@ -1,2 +1,2 @@
-export { useLocalizedString } from '../../chunk-YEYNRBMQ.js';
+export { useLocalizedString } from '../../chunk-F4H76S4H.js';
 import '../../chunk-JSBRDJBE.js';

package/dist/i18n/src/useLocalizedString.js

@@ -1,2 +1,2 @@
-export { useLocalizedString } from '../../chunk-YEYNRBMQ.js';
+export { useLocalizedString } from '../../chunk-F4H76S4H.js';
 import '../../chunk-JSBRDJBE.js';