@hopper-ui/components 1.0.13 → 1.2.0

package/dist/index.d.ts

@@ -22,12 +22,12 @@ export { CheckboxGroup, CheckboxGroupProps, GlobalCheckboxGroupCssSelector } fro
 export { CheckboxGroupContext } from './checkbox/src/CheckboxGroupContext.js';
 export { CheckboxList, CheckboxListProps, GlobalCheckboxListCssSelector } from './checkbox/src/CheckboxList.js';
 export { CheckboxListContext } from './checkbox/src/CheckboxListContext.js';
-export { Chip, ChipProps, GlobalChipCssSelector } from './Chip/src/Chip.js';
-export { ChipContext } from './Chip/src/ChipContext.js';
 export { Divider, DividerProps, GlobalDividerCssSelector } from './Divider/src/Divider.js';
 export { DividerContext } from './Divider/src/DividerContext.js';
 export { ErrorMessage, ErrorMessageProps, GlobalErrorMessageCssSelector } from './ErrorMessage/src/ErrorMessage.js';
 export { ErrorMessageContext } from './ErrorMessage/src/ErrorMessageContext.js';
+export { Form, FormProps, GlobalFormCssSelector } from './Form/src/Form.js';
+export { FormContext } from './Form/src/FormContext.js';
 export { GlobalHeaderCssSelector, Header, HeaderProps } from './Header/src/Header.js';
 export { HeaderContext } from './Header/src/HeaderContext.js';
 export { GlobalHelperMessageCssSelector, HelperMessage, HelperMessageProps } from './HelperMessage/src/HelperMessage.js';
@@ -37,6 +37,10 @@ export { GlobalIconListCssSelector, IconList, IconListProps } from './IconList/s
 export { IconListContext } from './IconList/src/IconListContext.js';
 export { GlobalInputGroupCssSelector, InputGroup, InputGroupProps } from './inputs/src/InputGroup.js';
 export { InputGroupContext } from './inputs/src/InputGroupContext.js';
+export { GlobalNumberFieldCssSelector, NumberField, NumberFieldProps } from './inputs/src/NumberField.js';
+export { NumberFieldContext } from './inputs/src/NumberFieldContext.js';
+export { GlobalTextAreaCssSelector, ResizeMode, TextArea, TextAreaProps } from './inputs/src/TextArea.js';
+export { TextAreaContext } from './inputs/src/TextAreaContext.js';
 export { GlobalTextFieldCssSelector, TextField, TextFieldProps } from './inputs/src/TextField.js';
 export { TextFieldContext } from './inputs/src/TextFieldContext.js';
 export { GlobalPasswordFieldCssSelector, PasswordField, PasswordFieldProps } from './inputs/src/PasswordField.js';
@@ -97,12 +101,14 @@ export { Size, SizeAdapter } from './utils/src/sizeAdapter.js';
 export { BaseComponentProps, DOMProps, InteractionProps, RenderProps, RenderPropsHookOptions, StyleProps, StyleRenderProps } from './utils/src/types.js';
 export { isTextOnlyChildren } from './utils/src/isTextOnlyChildren.js';
 export { SlotProvider, SlotProviderProps } from './utils/src/SlotProvider.js';
+export { useFontFaceReady } from './utils/src/useFontFaceReady.js';
 export { Scale, useScale } from './utils/src/useScale.js';
 export { useSlot } from './utils/src/useSlot.js';
+export { useTruncatedText } from './utils/src/useTruncatedText.js';
 export { ClearContainerSlots, ClearProviders, ClearProvidersProps } from './utils/src/ClearSlots.js';
 export { useRenderProps } from './utils/src/useRenderProps.js';
 export { isArray, isDefined, isEmptyArray, isFunction, isNil, isNilOrEmpty, isNull, isNumber, isObject, isPlainObject, isPromise, isString, isUndefined } from './utils/src/assertion.js';
-export { Collection } from 'react-aria-components';
+export { Collection, Selection } from 'react-aria-components';
 export { useAsyncList } from 'react-stately';
 export * from '@hopper-ui/styled-system';
 import 'react';

package/dist/index.js

@@ -1,107 +1,113 @@
-export { Collection, GlobalPopoverCssSelector, GlobalTagCssSelector, _Popover as Popover, _Tag as Tag, $f86e6c1ec7da6ebb$export$bc3384a35de93d66 as useAsyncList } from './chunk-B42AJF74.js';
-export { PopoverContext } from './chunk-SC6ZK5ON.js';
+export { Collection, _Form as Form, GlobalFormCssSelector, GlobalPopoverCssSelector, _Popover as Popover, $f86e6c1ec7da6ebb$export$bc3384a35de93d66 as useAsyncList } from './chunk-TCOZUCPD.js';
 export { PopoverTrigger } from './chunk-I4VPBQI7.js';
-export { GlobalTagGroupCssSelector, _TagGroup as TagGroup } from './chunk-MVWQVBTK.js';
+export { PopoverContext } from './chunk-SC6ZK5ON.js';
+export { GlobalTagCssSelector, _Tag as Tag } from './chunk-FOD7XUSJ.js';
+export { GlobalTagGroupCssSelector, _TagGroup as TagGroup } from './chunk-V5Q245NH.js';
 export { TagContext } from './chunk-EWMWQ2MC.js';
 export { TagGroupContext } from './chunk-LCAS3YQV.js';
 export { GlobalTagListCssSelector, _TagList as TagList } from './chunk-WWRB4K4M.js';
 export { TagListContext } from './chunk-XLKYXKWE.js';
-export { GlobalSwitchCssSelector, _Switch as Switch } from './chunk-QTV45NTY.js';
-export { GlobalSwitchFieldCssSelector, _SwitchField as SwitchField } from './chunk-IEE2HHGR.js';
+export { GlobalSwitchCssSelector, _Switch as Switch } from './chunk-VYKPDMP3.js';
+export { GlobalSwitchFieldCssSelector, _SwitchField as SwitchField } from './chunk-MJHMFANK.js';
 export { SwitchContext } from './chunk-YHBJAXUY.js';
 export { SwitchFieldContext } from './chunk-H7VJS4MX.js';
+export { _Inline as Inline } from './chunk-Y7HUXUHX.js';
+export { _Stack as Stack } from './chunk-D6UTDI2K.js';
 export { fitContent, minmax, repeat } from './chunk-GFHBDUJD.js';
-export { GlobalRadioFieldCssSelector, _RadioField as RadioField } from './chunk-CXIH6I5X.js';
+export { GlobalRadioFieldCssSelector, _RadioField as RadioField } from './chunk-PFABSIDM.js';
 export { _Content as Content, GlobalContentCssSelector } from './chunk-GXBVNCVP.js';
 export { ContentContext } from './chunk-IXB2WK56.js';
+export { _Flex as Flex } from './chunk-TVFC2MJ4.js';
 export { _Footer as Footer, GlobalFooterCssSelector } from './chunk-AQITZWYM.js';
 export { FooterContext } from './chunk-I67NHYK4.js';
 export { _Grid as Grid } from './chunk-N77LTZ4U.js';
-export { _Inline as Inline } from './chunk-Y7HUXUHX.js';
-export { _Stack as Stack } from './chunk-D6UTDI2K.js';
-export { _Flex as Flex } from './chunk-TVFC2MJ4.js';
-export { GlobalPasswordFieldCssSelector, _PasswordField as PasswordField } from './chunk-M4IVTAHY.js';
+export { GlobalPasswordFieldCssSelector, _PasswordField as PasswordField } from './chunk-TG623HPA.js';
 export { PasswordFieldContext } from './chunk-QW45G6K4.js';
-export { GlobalSearchFieldCssSelector, _SearchField as SearchField } from './chunk-TNVYVDLF.js';
+export { GlobalSearchFieldCssSelector, _SearchField as SearchField } from './chunk-S5CK32KM.js';
 export { SearchFieldContext } from './chunk-3NKF5TPD.js';
-export { GlobalTextFieldCssSelector, _TextField as TextField } from './chunk-44KY7MFF.js';
+export { GlobalTextAreaCssSelector, _TextArea as TextArea } from './chunk-HCRWIU7V.js';
+export { useFontFaceReady } from './chunk-IU6XMS2X.js';
+export { useTruncatedText } from './chunk-Z57VHYOF.js';
+export { TextAreaContext } from './chunk-MHQZXLKW.js';
+export { GlobalTextFieldCssSelector, _TextField as TextField } from './chunk-FA4IXLWZ.js';
 export { TextFieldContext } from './chunk-O4XPUINW.js';
 export { _CheckboxList as CheckboxList, GlobalCheckboxListCssSelector } from './chunk-3LRBUQC2.js';
+export { GlobalNumberFieldCssSelector, _NumberField as NumberField } from './chunk-VISBUD2K.js';
 export { useScale } from './chunk-MTDFS4CZ.js';
+export { NumberFieldContext } from './chunk-ZQ3AWYRR.js';
 import './chunk-LJXTJRSB.js';
-export { GlobalLabelCssSelector, _Label as Label } from './chunk-I2YZLGRE.js';
-export { GlobalHeadingCssSelector, H1, H2, H3, H4, H5, H6, _Heading as Heading } from './chunk-ERE2XRQA.js';
+export { GlobalHeadingCssSelector, H1, H2, H3, H4, H5, H6, _Heading as Heading } from './chunk-PQXVL3YJ.js';
 export { HeadingContext } from './chunk-TXZ6BMFR.js';
-export { GlobalInputGroupCssSelector, _InputGroup as InputGroup } from './chunk-CCIVRIKG.js';
+export { GlobalLabelCssSelector, _Label as Label } from './chunk-RWAVMW7T.js';
+export { GlobalInputGroupCssSelector, _InputGroup as InputGroup } from './chunk-Q63YLWI6.js';
 export { InputGroupContext } from './chunk-6BFSSZCY.js';
-export { _CheckboxField as CheckboxField, GlobalCheckboxFieldCssSelector } from './chunk-WCLGYVXV.js';
-export { _CheckboxGroup as CheckboxGroup, GlobalCheckboxGroupCssSelector } from './chunk-2MUGMKNO.js';
+export { _CheckboxField as CheckboxField, GlobalCheckboxFieldCssSelector } from './chunk-BKCMCC7V.js';
+export { _CheckboxGroup as CheckboxGroup, GlobalCheckboxGroupCssSelector } from './chunk-IXWYHDGU.js';
 export { CheckboxListContext } from './chunk-WDUQUPTE.js';
 export { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
 export { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
-export { _Button as Button, GlobalButtonCssSelector } from './chunk-723W7LGB.js';
+export { _Button as Button, GlobalButtonCssSelector } from './chunk-U56LEEEA.js';
 export { useSlot } from './chunk-H5YTU3U7.js';
-export { _ButtonGroup as ButtonGroup, GlobalButtonGroupCssSelector } from './chunk-JLUFMLGV.js';
+export { _ButtonGroup as ButtonGroup, GlobalButtonGroupCssSelector } from './chunk-RQKU3XDG.js';
 export { ButtonContext } from './chunk-WMTWFKKP.js';
 export { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
-export { _ClearButton as ClearButton, GlobalClearButtonCssSelector } from './chunk-KARK64JC.js';
+export { _ClearButton as ClearButton, GlobalClearButtonCssSelector } from './chunk-2XO5CZBO.js';
 export { ClearButtonContext } from './chunk-DXVKHP4V.js';
-export { _EmbeddedButton as EmbeddedButton, GlobalEmbeddedButtonCssSelector } from './chunk-ZXDN2IRM.js';
+export { _EmbeddedButton as EmbeddedButton, GlobalEmbeddedButtonCssSelector } from './chunk-5IB23E3O.js';
 export { EmbeddedButtonContext } from './chunk-O7IJYNVQ.js';
 export { GlobalSectionCssSelector, _Section as Section } from './chunk-O5PTD6IN.js';
-export { GlobalSpinnerCssSelector, _Spinner as Spinner } from './chunk-AMXRADUV.js';
+export { GlobalSpinnerCssSelector, _Spinner as Spinner } from './chunk-CKKLDA5J.js';
 export { SpinnerContext } from './chunk-4ZYV2XLW.js';
-export { GlobalLinkCssSelector, _Link as Link } from './chunk-LDORNYHF.js';
+export { GlobalLinkCssSelector, _Link as Link } from './chunk-SZSQZ4C7.js';
 export { LinkContext } from './chunk-4VVNSXIB.js';
-export { GlobalListBoxCssSelector, GlobalListBoxEmptyItemCssSelector, _ListBox as ListBox } from './chunk-CS2RAWQB.js';
+export { GlobalListBoxCssSelector, GlobalListBoxEmptyItemCssSelector, _ListBox as ListBox } from './chunk-W2BQZEW6.js';
 export { isArray, isDefined, isEmptyArray, isFunction, isNil, isNilOrEmpty, isNull, isNumber, isObject, isPlainObject, isPromise, isString, isUndefined } from './chunk-TIPN4VYD.js';
 import './chunk-JTNMFPM4.js';
 export { SectionContext } from './chunk-5H5AZJPQ.js';
 export { ListBoxContext } from './chunk-UIEP5BA5.js';
-export { GlobalListBoxItemCssSelector, _ListBoxItem as ListBoxItem } from './chunk-SW7LHIQ2.js';
-export { GlobalRadioCssSelector, _Radio as Radio } from './chunk-SSMGKQ27.js';
-export { GlobalRadioGroupCssSelector, _RadioGroup as RadioGroup } from './chunk-NHM3MQI3.js';
-export { RadioContext } from './chunk-FU5CCPLP.js';
-export { RadioFieldContext } from './chunk-DGLAGYBD.js';
-export { RadioGroupContext } from './chunk-5MBJWRZD.js';
+export { GlobalListBoxItemCssSelector, _ListBoxItem as ListBoxItem } from './chunk-W474WFOP.js';
 export { GlobalRadioListCssSelector, _RadioList as RadioList } from './chunk-NKHMUPAP.js';
+export { GlobalRadioCssSelector, _Radio as Radio } from './chunk-J44DIB5J.js';
+export { GlobalRadioGroupCssSelector, _RadioGroup as RadioGroup } from './chunk-EJUIYBAC.js';
+export { RadioGroupContext } from './chunk-5MBJWRZD.js';
 export { RadioListContext } from './chunk-A7TZHALP.js';
-export { _Checkbox as Checkbox, GlobalCheckboxCssSelector } from './chunk-W34MMJ2L.js';
+export { RadioContext } from './chunk-FU5CCPLP.js';
+export { RadioFieldContext } from './chunk-DGLAGYBD.js';
+export { _Checkbox as Checkbox, GlobalCheckboxCssSelector } from './chunk-FOKTHCFK.js';
 export { LabelContext } from './chunk-QCA3ZR56.js';
 export { CheckboxContext } from './chunk-2EAZPH3M.js';
-import './chunk-YEYNRBMQ.js';
+import './chunk-F4H76S4H.js';
+export { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 export { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 export { ListBoxItemContext } from './chunk-Y2POLIXK.js';
-import './chunk-THQZBL4T.js';
+import './chunk-UT4CSUUM.js';
 import './chunk-OKZYR4RF.js';
-export { GlobalHelperMessageCssSelector, _HelperMessage as HelperMessage } from './chunk-RGGVZKNN.js';
+export { GlobalHelperMessageCssSelector, _HelperMessage as HelperMessage } from './chunk-L5KI4ZCL.js';
 export { HelperMessageContext } from './chunk-HZKFQ33E.js';
 export { GlobalHopperProviderCssSelector, _HopperProvider as HopperProvider } from './chunk-NMKBUGSO.js';
-export { GlobalIconListCssSelector, _IconList as IconList } from './chunk-JN2FF2IX.js';
-export { _ErrorMessage as ErrorMessage, GlobalErrorMessageCssSelector } from './chunk-UPR32DV5.js';
-export { useRenderProps } from './chunk-NH3IVMXB.js';
-export { ErrorMessageContext } from './chunk-FAE27DLF.js';
+export { GlobalIconListCssSelector, _IconList as IconList } from './chunk-IUOLKHYQ.js';
+export { IconListContext } from './chunk-DHVVYSLB.js';
+export { FormContext } from './chunk-EURJK4ZT.js';
 export { GlobalHeaderCssSelector, _Header as Header } from './chunk-L5A2UTQV.js';
 export { HeaderContext } from './chunk-7JOGKC3W.js';
-export { _Badge as Badge, GlobalBadgeCssSelector } from './chunk-ESRYOELK.js';
-export { GlobalOverlineTextCssSelector, _OverlineText as OverlineText } from './chunk-5WWMVQI4.js';
+export { _Badge as Badge, GlobalBadgeCssSelector } from './chunk-X253QCYD.js';
+export { GlobalOverlineTextCssSelector, _OverlineText as OverlineText } from './chunk-CEUQHDEQ.js';
 export { OverlineTextContext } from './chunk-WPNVVGFW.js';
 export { BadgeContext } from './chunk-CQDLZ42T.js';
-export { _Chip as Chip, GlobalChipCssSelector } from './chunk-RXZQB35O.js';
-export { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-export { IconListContext } from './chunk-DHVVYSLB.js';
-export { ChipContext } from './chunk-632B5YBQ.js';
-export { _Divider as Divider, GlobalDividerCssSelector } from './chunk-DZHRELLA.js';
+export { _Divider as Divider, GlobalDividerCssSelector } from './chunk-354H4FNA.js';
 export { DividerContext } from './chunk-FYIHMKHI.js';
-export { _AnonymousAvatar as AnonymousAvatar, GlobalAnonymousAvatarCssSelector } from './chunk-GH5LAOQU.js';
-export { _Avatar as Avatar, AvatarToTextSizeAdapter, GlobalAvatarCssSelector } from './chunk-UGHMX7QX.js';
+export { _ErrorMessage as ErrorMessage, GlobalErrorMessageCssSelector } from './chunk-T6MAOVLH.js';
+export { useRenderProps } from './chunk-NH3IVMXB.js';
+export { ErrorMessageContext } from './chunk-FAE27DLF.js';
+export { _AnonymousAvatar as AnonymousAvatar, GlobalAnonymousAvatarCssSelector } from './chunk-JJ4EFTES.js';
+export { _Avatar as Avatar, AvatarToTextSizeAdapter, GlobalAvatarCssSelector } from './chunk-COIGQP33.js';
 import './chunk-NS3XVOQ7.js';
-export { GlobalTextCssSelector, _Text as Text } from './chunk-PAYZGXTT.js';
+export { GlobalTextCssSelector, _Text as Text } from './chunk-XT2MZWEV.js';
 export { TextContext } from './chunk-X6SER3TZ.js';
 export { ClearContainerSlots, ClearProviders } from './chunk-HXI3MEEK.js';
-export { _DeletedAvatar as DeletedAvatar, GlobalDeletedAvatarCssSelector } from './chunk-SNWJJ3FF.js';
+export { _DeletedAvatar as DeletedAvatar, GlobalDeletedAvatarCssSelector } from './chunk-XUJNQNB3.js';
 export { AvatarContext } from './chunk-AES7QBQE.js';
-export { AvatarToIconSizeAdapter, GlobalRichIconAvatarImageCssSelector, _RichIconAvatarImage as RichIconAvatarImage } from './chunk-AYPCLDGU.js';
+export { AvatarToIconSizeAdapter, GlobalRichIconAvatarImageCssSelector, _RichIconAvatarImage as RichIconAvatarImage } from './chunk-M3K4IYX6.js';
 export { SlotProvider } from './chunk-M36KANKC.js';
 export { cssModule } from './chunk-KVDXQMWI.js';
 export { RichIconAvatarImageContext } from './chunk-JWW56J7M.js';

package/dist/inputs/src/InputGroup.css

@@ -1,18 +1,33 @@
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/inputs/src/InputGroup.module.css/#css-module-data */
-.InputGroup-module__hop-InputGroup___yPMIO {
+.InputGroup-module__hop-InputGroup___PiLz0 {
   --hop-InputGroup-background: var(--hop-neutral-surface);
   --hop-InputGroup-border-color: var(--hop-neutral-border);
   --hop-InputGroup-border-width: 0.0625rem;
+  --hop-InputGroup-display: inline-flex;
+  --hop-InputGroup-display-number: grid;
   --hop-InputGroup-gap: var(--hop-space-inline-sm);
+  --hop-InputGroup-gap-textarea: 0;
+  --hop-InputGroup-gap-number: 0;
+  --hop-InputGroup-flex-direction: row;
+  --hop-InputGroup-flex-direction-textarea: column;
+  --hop-InputGroup-align-items: center;
+  --hop-InputGroup-align-items-textarea: flex-end;
+  --hop-InputGroup-inline-size: fit-content;
+  --hop-InputGroup-inline-size-number: 100%;
   --hop-InputGroup-sm-block-size: 2rem;
   --hop-InputGroup-md-block-size: 2.5rem;
+  --hop-InputGroup-block-size-textarea: auto;
   --hop-InputGroup-border-radius: var(--hop-shape-rounded-md);
   --hop-InputGroup-padding-inline: var(--hop-space-inset-md);
+  --hop-InputGroup-padding-block: 0;
+  --hop-InputGroup-padding-inline-textarea: var(--hop-space-inset-xs);
+  --hop-InputGroup-padding-block-textarea: var(--hop-space-inset-xs);
   --hop-InputGroup-border-color-hover: var(--hop-neutral-border-hover);
   --hop-InputGroup-border-color-focus: var(--hop-primary-border-focus);
   --hop-InputGroup-background-hover: var(--hop-neutral-surface-hover);
   --hop-InputGroup-border-color-invalid: var(--hop-danger-border-strong);
   --hop-InputGroup-input-color: var(--hop-neutral-text);
+  --hop-InputGroup-input-color-disabled: var(--hop-neutral-text-disabled);
   --hop-InputGroup-input-sm-font-family: var(--hop-body-sm-font-family);
   --hop-InputGroup-input-sm-font-size: var(--hop-body-sm-font-size);
   --hop-InputGroup-input-sm-font-weight: var(--hop-body-sm-font-weight);
@@ -23,6 +38,8 @@
   --hop-InputGroup-input-md-font-weight: var(--hop-body-md-font-weight);
   --hop-InputGroup-input-md-line-height: var(--hop-body-md-line-height);
   --hop-InputGroup-input-md-block-size: 2rem;
+  --hop-InputGroup-input-padding: 0;
+  --hop-InputGroup-textarea-padding: var(--hop-space-inset-xs) calc(var(--hop-space-inset-md) - var(--hop-space-inset-xs));
   --hop-InputGroup-background-disabled: var(--hop-neutral-surface-disabled);
   --hop-InputGroup-border-color-disabled: var(--hop-neutral-border-disabled);
   --hop-InputGroup-placeholder-font-family: inherit;
@@ -31,83 +48,105 @@
   --hop-InputGroup-placeholder-line-height: inherit;
   --hop-InputGroup-placeholder-color: var(--hop-neutral-text-weakest);
   --hop-InputGroup-placeholder-color-disabled: var(--hop-neutral-text-disabled);
-  --inline-size: fit-content;
+  --inline-size: var(--hop-InputGroup-inline-size);
   --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color);
   --background: var(--hop-InputGroup-background);
   --block-size: var(--hop-InputGroup-md-block-size);
-}
-:where(.InputGroup-module__hop-InputGroup___yPMIO) {
+  --display: var(--hop-InputGroup-display);
+  --gap: var(--hop-InputGroup-gap);
+  --flex-direction: var(--hop-InputGroup-flex-direction);
+  --align-items: var(--hop-InputGroup-align-items);
+  --padding-inline: var(--hop-InputGroup-padding-inline);
+  --padding-block: var(--hop-InputGroup-padding-block);
+  --input-font-family: var(--hop-InputGroup-input-md-font-family);
+  --input-font-size: var(--hop-InputGroup-input-md-font-size);
+  --input-font-weight: var(--hop-InputGroup-input-md-font-weight);
+  --input-line-height: var(--hop-InputGroup-input-md-line-height);
+  --input-block-size: var(--hop-InputGroup-input-md-block-size);
+  --input-inline-size: initial;
+  --input-color: var(--hop-InputGroup-input-color);
+  --input-placeholder-color: var(--hop-InputGroup-placeholder-color);
   position: relative;
-  display: inline-flex;
-  gap: var(--hop-InputGroup-gap);
-  align-items: center;
+  display: var(--display);
+  flex-direction: var(--flex-direction);
+  gap: var(--gap);
+  align-items: var(--align-items);
   box-sizing: border-box;
   inline-size: var(--inline-size);
   block-size: var(--block-size);
-  padding-inline: var(--hop-InputGroup-padding-inline);
+  padding-block: var(--padding-block);
+  padding-inline: var(--padding-inline);
   background: var(--background);
   border: var(--border);
   border-radius: var(--hop-InputGroup-border-radius);
 }
-.InputGroup-module__hop-InputGroup--fluid___SDrjN {
-  --inline-size: 100% ;
+.InputGroup-module__hop-InputGroup--fluid___Cp15- {
+  --inline-size: 100%;
+  --input-inline-size: 100%;
 }
-.InputGroup-module__hop-InputGroup--sm___uk-A0 {
+.InputGroup-module__hop-InputGroup--sm___ZeMr9 {
   --block-size: var(--hop-InputGroup-sm-block-size);
+  --input-font-family: var(--hop-InputGroup-input-sm-font-family);
+  --input-font-size: var(--hop-InputGroup-input-sm-font-size);
+  --input-font-weight: var(--hop-InputGroup-input-sm-font-weight);
+  --input-line-height: var(--hop-InputGroup-input-sm-line-height);
+  --input-block-size: var(--hop-InputGroup-input-sm-block-size);
 }
-.InputGroup-module__hop-InputGroup___yPMIO[data-hovered] {
+.InputGroup-module__hop-InputGroup___PiLz0[data-input-type=textarea] {
+  --gap: var(--hop-InputGroup-gap-textarea);
+  --flex-direction: var(--hop-InputGroup-flex-direction-textarea);
+  --align-items: var(--hop-InputGroup-align-items-textarea);
+  --block-size: var(--hop-InputGroup-block-size-textarea);
+  --padding-inline: var(--hop-InputGroup-padding-inline-textarea);
+  --padding-block: var(--hop-InputGroup-padding-block-textarea);
+}
+.InputGroup-module__hop-InputGroup___PiLz0[data-input-type=number] {
+  --display: var(--hop-InputGroup-display-number);
+  --gap: var(--hop-InputGroup-gap-number);
+  --inline-size: var(--hop-InputGroup-inline-size-number);
+}
+.InputGroup-module__hop-InputGroup___PiLz0[data-hovered] {
   --background: var(--hop-InputGroup-background-hover);
   --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-hover) ;
 }
-.InputGroup-module__hop-InputGroup___yPMIO[data-focus-within] {
+.InputGroup-module__hop-InputGroup___PiLz0[data-focus-within] {
   --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-focus) ;
 }
-.InputGroup-module__hop-InputGroup___yPMIO[data-invalid] {
+.InputGroup-module__hop-InputGroup___PiLz0[data-invalid] {
   --border: var(--hop-InputGroup-border-width) solid var(--hop-InputGroup-border-color-invalid) ;
 }
-.InputGroup-module__hop-InputGroup___yPMIO[data-disabled] {
+.InputGroup-module__hop-InputGroup___PiLz0[data-disabled] {
   --background: var(--hop-InputGroup-background-disabled);
-  --border: 0.0625rem solid var(--hop-InputGroup-border-color-disabled) ;
+  --border: 0.0625rem solid var(--hop-InputGroup-border-color-disabled);
+  --input-color: var(--hop-InputGroup-input-color-disabled);
+  --input-placeholder-color: var(--hop-InputGroup-placeholder-color-disabled);
 }
-.InputGroup-module__hop-InputGroup__input___aerYh {
-  --input-font-family: var(--hop-InputGroup-input-md-font-family);
-  --input-font-size: var(--hop-InputGroup-input-md-font-size);
-  --input-font-weight: var(--hop-InputGroup-input-md-font-weight);
-  --input-line-height: var(--hop-InputGroup-input-md-line-height);
-  --input-block-size: var(--hop-InputGroup-input-md-block-size);
-  --input-inline-size: initial;
-  --input-placeholder-color: var(--hop-InputGroup-placeholder-color);
+.InputGroup-module__hop-InputGroup__input___xLgn9,
+.InputGroup-module__hop-InputGroup__textarea___6Go7N {
   flex: 1 1 auto;
+  box-sizing: border-box;
   inline-size: var(--input-inline-size);
   min-inline-size: 0;
-  block-size: var(--input-block-size);
-  padding: 0;
   font-family: var(--input-font-family);
   font-size: var(--input-font-size);
   font-weight: var(--input-font-weight);
   line-height: var(--input-line-height);
-  color: var(--hop-InputGroup-input-color);
+  color: var(--input-color);
   background: transparent;
   border: none;
   outline: none;
 }
-.InputGroup-module__hop-InputGroup--fluid___SDrjN .InputGroup-module__hop-InputGroup__input___aerYh {
-  --input-inline-size: 100%;
+.InputGroup-module__hop-InputGroup__input___xLgn9 {
+  block-size: var(--input-block-size);
+  padding: var(--hop-InputGroup-input-padding);
 }
-.InputGroup-module__hop-InputGroup--sm___uk-A0 .InputGroup-module__hop-InputGroup__input___aerYh {
-  --input-font-family: var(--hop-InputGroup-input-sm-font-family);
-  --input-font-size: var(--hop-InputGroup-input-sm-font-size);
-  --input-font-weight: var(--hop-InputGroup-input-sm-font-weight);
-  --input-line-height: var(--hop-InputGroup-input-sm-line-height);
-  --input-block-size: var(--hop-InputGroup-input-sm-block-size);
+.InputGroup-module__hop-InputGroup__textarea___6Go7N {
+  padding: var(--hop-InputGroup-textarea-padding);
 }
-.InputGroup-module__hop-InputGroup__input___aerYh::placeholder {
+.InputGroup-module__hop-InputGroup__input___xLgn9::placeholder {
   font-family: var(--hop-InputGroup-placeholder-font-family);
   font-size: var(--hop-InputGroup-placeholder-font-size);
   font-weight: var(--hop-InputGroup-placeholder-font-weight);
   line-height: var(--hop-InputGroup-placeholder-line-height);
   color: var(--input-placeholder-color);
 }
-.InputGroup-module__hop-InputGroup__input___aerYh[data-disabled]::placeholder {
-  --input-placeholder-color: var(--hop-InputGroup-placeholder-color-disabled);
-}

package/dist/inputs/src/InputGroup.d.ts

@@ -10,10 +10,19 @@ interface InputGroupProps extends StyledComponentProps<GroupProps> {
      */
     size?: ResponsiveProp<"sm" | "md">;
     /**
-     * Whether or not the button takes up the width of its container.
+     * Whether the button takes up the width of its container.
+     * @default false
      */
     isFluid?: ResponsiveProp<boolean>;
+    /**
+     * The class name of the input element.
+     */
     inputClassName?: string;
+    /**
+     * The type of the input element.
+     * @default "text"
+     */
+    inputType?: "text" | "password" | "search" | "number" | "textarea";
 }
 /**
  * An input group combines an input component with addons.

package/dist/inputs/src/InputGroup.js

@@ -1,4 +1,4 @@
-export { GlobalInputGroupCssSelector, _InputGroup as InputGroup } from '../../chunk-CCIVRIKG.js';
+export { GlobalInputGroupCssSelector, _InputGroup as InputGroup } from '../../chunk-Q63YLWI6.js';
 import '../../chunk-6BFSSZCY.js';
 import '../../chunk-65JPI4FL.js';
 import '../../chunk-M36KANKC.js';