@hopper-ui/components 1.0.2 → 1.0.4

package/dist/tag/src/Tag.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { TagProps as TagProps$1 } from 'react-aria-components';
+
+declare const GlobalTagCssSelector = "hop-Tag";
+interface TagProps extends StyledComponentProps<TagProps$1> {
+    /**
+     * Whether the tag is invalid or not.
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the tag is loading or not.
+     */
+    isLoading?: boolean;
+    /**
+     * The size of the tag.
+     * @default "md"
+     */
+    size?: ResponsiveProp<"md" | "lg">;
+}
+/**
+ * A tag group is an interactive collection of labels, categories, keywords, or filters, with capabilities for keyboard navigation, selection, and removal.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLDivElement>>;
+
+export { GlobalTagCssSelector, _Tag as Tag, type TagProps };

package/dist/tag/src/Tag.js

@@ -0,0 +1,74 @@
+export { GlobalTagCssSelector, _Tag as Tag } from '../../chunk-SWMFTL46.js';
+import '../../chunk-TXZ6BMFR.js';
+import '../../chunk-TIPN4VYD.js';
+import '../../chunk-FGDSWA7S.js';
+import '../../chunk-EWMWQ2MC.js';
+import '../../chunk-LCAS3YQV.js';
+import '../../chunk-WWRB4K4M.js';
+import '../../chunk-XLKYXKWE.js';
+import '../../chunk-PDYU6DNF.js';
+import '../../chunk-5MBJWRZD.js';
+import '../../chunk-NKHMUPAP.js';
+import '../../chunk-A7TZHALP.js';
+import '../../chunk-ZAJJD5FY.js';
+import '../../chunk-N745TDH5.js';
+import '../../chunk-H7VJS4MX.js';
+import '../../chunk-YHBJAXUY.js';
+import '../../chunk-Z3ID4UEE.js';
+import '../../chunk-Y7HUXUHX.js';
+import '../../chunk-D6UTDI2K.js';
+import '../../chunk-BGESEKEN.js';
+import '../../chunk-TSXPLL55.js';
+import '../../chunk-FU5CCPLP.js';
+import '../../chunk-DGLAGYBD.js';
+import '../../chunk-GXBVNCVP.js';
+import '../../chunk-IXB2WK56.js';
+import '../../chunk-TVFC2MJ4.js';
+import '../../chunk-AQITZWYM.js';
+import '../../chunk-I67NHYK4.js';
+import '../../chunk-PEPKE5SW.js';
+import '../../chunk-WTKIUAHI.js';
+import '../../chunk-QJBQRYJS.js';
+import '../../chunk-GBABMUAI.js';
+import '../../chunk-XSASR6CK.js';
+import '../../chunk-LSVXKVG4.js';
+import '../../chunk-ACVMW6YD.js';
+import '../../chunk-ESVVLTEN.js';
+import '../../chunk-ZGNK4GWA.js';
+import '../../chunk-N7YDPVZL.js';
+import '../../chunk-3LRBUQC2.js';
+import '../../chunk-WDUQUPTE.js';
+import '../../chunk-HDYG2F3D.js';
+import '../../chunk-VJQ7M2BK.js';
+import '../../chunk-5GRWAXTT.js';
+import '../../chunk-DXVKHP4V.js';
+import '../../chunk-6MSYEF4W.js';
+import '../../chunk-O7IJYNVQ.js';
+import '../../chunk-OMBQ3J4O.js';
+import '../../chunk-2EAZPH3M.js';
+import '../../chunk-LRXYIR2A.js';
+import '../../chunk-BCHUEONM.js';
+import '../../chunk-WPNVVGFW.js';
+import '../../chunk-ZSFJVMJN.js';
+import '../../chunk-Y3L6TPP3.js';
+import '../../chunk-H5YTU3U7.js';
+import '../../chunk-NH3IVMXB.js';
+import '../../chunk-H6CDFWVR.js';
+import '../../chunk-Y7XWWUMU.js';
+import '../../chunk-2CKDJG6R.js';
+import '../../chunk-QCA3ZR56.js';
+import '../../chunk-4ZYV2XLW.js';
+import '../../chunk-WMTWFKKP.js';
+import '../../chunk-ANVMQBBG.js';
+import '../../chunk-F7HR3VI4.js';
+import '../../chunk-RCFB4SN4.js';
+import '../../chunk-ZWU6DRRZ.js';
+import '../../chunk-WGDP4ECF.js';
+import '../../chunk-HXI3MEEK.js';
+import '../../chunk-X6SER3TZ.js';
+import '../../chunk-65JPI4FL.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-DHVVYSLB.js';
+import '../../chunk-4VVNSXIB.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/tag/src/TagContext.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { TagProps } from './Tag.js';
+import '@hopper-ui/styled-system';
+
+declare const TagContext: react.Context<ContextValue<TagProps, HTMLDivElement>>;
+
+export { TagContext };

package/dist/tag/src/TagContext.js

@@ -0,0 +1,2 @@
+export { TagContext } from '../../chunk-EWMWQ2MC.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/tag/src/TagGroup.css

@@ -0,0 +1,239 @@
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Text/src/Text.module.css/#css-module-data */
+.Text-module__hop-Text___L5SE4 {
+  --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
+  --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
+  --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
+  --hop-Text-xs-line-height: var(--hop-body-xs-line-height);
+  --hop-Text-sm-font-size: var(--hop-body-sm-font-size);
+  --hop-Text-sm-font-family: var(--hop-body-sm-font-family);
+  --hop-Text-sm-font-weight: var(--hop-body-sm-font-weight);
+  --hop-Text-sm-line-height: var(--hop-body-sm-line-height);
+  --hop-Text-md-font-size: var(--hop-body-md-font-size);
+  --hop-Text-md-font-family: var(--hop-body-md-font-family);
+  --hop-Text-md-font-weight: var(--hop-body-md-font-weight);
+  --hop-Text-md-line-height: var(--hop-body-md-line-height);
+  --hop-Text-lg-font-size: var(--hop-body-lg-font-size);
+  --hop-Text-lg-font-family: var(--hop-body-lg-font-family);
+  --hop-Text-lg-font-weight: var(--hop-body-lg-font-weight);
+  --hop-Text-lg-line-height: var(--hop-body-lg-line-height);
+  --hop-Text-xl-font-size: var(--hop-body-xl-font-size);
+  --hop-Text-xl-font-family: var(--hop-body-xl-font-family);
+  --hop-Text-xl-font-weight: var(--hop-body-xl-font-weight);
+  --hop-Text-xl-line-height: var(--hop-body-xl-line-height);
+  --hop-Text-2xl-font-size: var(--hop-body-2xl-font-size);
+  --hop-Text-2xl-font-family: var(--hop-body-2xl-font-family);
+  --hop-Text-2xl-font-weight: var(--hop-body-2xl-font-weight);
+  --hop-Text-2xl-line-height: var(--hop-body-2xl-line-height);
+  --hop-Text-inherit-size-font-size: inherit;
+  --hop-Text-inherit-size-font-family: inherit;
+  --hop-Text-inherit-size-font-weight: inherit;
+  --hop-Text-inherit-size-line-height: inherit;
+}
+:where(.Text-module__hop-Text___L5SE4) {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+}
+:where(.Text-module__hop-Text--xs___4XSOM) {
+  --font-size: var(--hop-Text-xs-font-size);
+  --font-family: var(--hop-Text-xs-font-family);
+  --font-weight: var(--hop-Text-xs-font-weight);
+  --line-height: var(--hop-Text-xs-line-height);
+}
+:where(.Text-module__hop-Text--sm___rxq9a) {
+  --font-size: var(--hop-Text-sm-font-size);
+  --font-family: var(--hop-Text-sm-font-family);
+  --font-weight: var(--hop-Text-sm-font-weight);
+  --line-height: var(--hop-Text-sm-line-height);
+}
+:where(.Text-module__hop-Text--md___I1rkh) {
+  --font-size: var(--hop-Text-md-font-size);
+  --font-family: var(--hop-Text-md-font-family);
+  --font-weight: var(--hop-Text-md-font-weight);
+  --line-height: var(--hop-Text-md-line-height);
+}
+:where(.Text-module__hop-Text--lg___A5qVa) {
+  --font-size: var(--hop-Text-lg-font-size);
+  --font-family: var(--hop-Text-lg-font-family);
+  --font-weight: var(--hop-Text-lg-font-weight);
+  --line-height: var(--hop-Text-lg-line-height);
+}
+:where(.Text-module__hop-Text--xl___W3xPi) {
+  --font-size: var(--hop-Text-xl-font-size);
+  --font-family: var(--hop-Text-xl-font-family);
+  --font-weight: var(--hop-Text-xl-font-weight);
+  --line-height: var(--hop-Text-xl-line-height);
+}
+:where(.Text-module__hop-Text--2xl___C50TH) {
+  --font-size: var(--hop-Text-2xl-font-size);
+  --font-family: var(--hop-Text-2xl-font-family);
+  --font-weight: var(--hop-Text-2xl-font-weight);
+  --line-height: var(--hop-Text-2xl-line-height);
+}
+:where(.Text-module__hop-Text--inherit___YDakN) {
+  --font-size: var(--hop-Text-inherit-size-font-size);
+  --font-family: var(--hop-Text-inherit-size-font-family);
+  --font-weight: var(--hop-Text-inherit-size-font-weight);
+  --line-height: var(--hop-Text-inherit-size-line-height);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/errorMessage/src/ErrorMessage.module.css/#css-module-data */
+.ErrorMessage-module__hop-ErrorMessage___mRyMK {
+  --hop-ErrorMessage-color: var(--hop-danger-text-weak);
+  --hop-ErrorMessage-font-family: var(--hop-body-xs-font-family);
+  --hop-ErrorMessage-font-size: var(--hop-body-xs-font-size);
+  --hop-ErrorMessage-font-weight: var(--hop-body-xs-font-weight);
+  --hop-ErrorMessage-line-height: var(--hop-body-xs-line-height);
+  --hop-ErrorMessage-column-gap: var(--hop-space-inline-xs);
+  display: flex;
+  column-gap: var(--hop-ErrorMessage-column-gap);
+  align-items: center;
+  box-sizing: border-box;
+  font-family: var(--hop-ErrorMessage-font-family);
+  font-size: var(--hop-ErrorMessage-font-size);
+  font-weight: var(--hop-ErrorMessage-font-weight);
+  line-height: var(--hop-ErrorMessage-line-height);
+  color: var(--hop-ErrorMessage-color);
+}
+.ErrorMessage-module__hop-ErrorMessage__icon___w9R-k {
+  flex: 0 0 auto;
+  align-self: flex-start;
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/helperMessage/src/HelperMessage.module.css/#css-module-data */
+.HelperMessage-module__hop-HelperMessage___VrfVI {
+  --hop-HelperMessage-color: var(--hop-neutral-text-weak);
+  --hop-HelperMessage-column-gap: var(--hop-space-inline-xs);
+  display: flex;
+  column-gap: var(--hop-HelperMessage-column-gap);
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--hop-HelperMessage-color);
+}
+.HelperMessage-module__hop-HelperMessage__icon___mVrpO {
+  flex: 0 0 auto;
+  align-self: flex-start;
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
+.Label-module__hop-Label___7xL3v {
+  --hop-Label-xs-font-size: var(--hop-body-xs-font-size);
+  --hop-Label-xs-font-family: var(--hop-body-xs-font-family);
+  --hop-Label-xs-font-weight: var(--hop-body-xs-font-weight);
+  --hop-Label-xs-line-height: var(--hop-body-xs-line-height);
+  --hop-Label-sm-font-size: var(--hop-body-sm-font-size);
+  --hop-Label-sm-font-family: var(--hop-body-sm-font-family);
+  --hop-Label-sm-font-weight: var(--hop-body-sm-font-weight);
+  --hop-Label-sm-line-height: var(--hop-body-sm-line-height);
+  --hop-Label-md-font-size: var(--hop-body-md-font-size);
+  --hop-Label-md-font-family: var(--hop-body-md-font-family);
+  --hop-Label-md-font-weight: var(--hop-body-md-font-weight);
+  --hop-Label-md-line-height: var(--hop-body-md-line-height);
+  --hop-Label-lg-font-size: var(--hop-body-lg-font-size);
+  --hop-Label-lg-font-family: var(--hop-body-lg-font-family);
+  --hop-Label-lg-font-weight: var(--hop-body-lg-font-weight);
+  --hop-Label-lg-line-height: var(--hop-body-lg-line-height);
+  --hop-Label-xl-font-size: var(--hop-body-xl-font-size);
+  --hop-Label-xl-font-family: var(--hop-body-xl-font-family);
+  --hop-Label-xl-font-weight: var(--hop-body-xl-font-weight);
+  --hop-Label-xl-line-height: var(--hop-body-xl-line-height);
+  --hop-Label-2xl-font-size: var(--hop-body-2xl-font-size);
+  --hop-Label-2xl-font-family: var(--hop-body-2xl-font-family);
+  --hop-Label-2xl-font-weight: var(--hop-body-2xl-font-weight);
+  --hop-Label-2xl-line-height: var(--hop-body-2xl-line-height);
+  --hop-Label-inherit-size-font-size: inherit;
+  --hop-Label-inherit-size-font-family: inherit;
+  --hop-Label-inherit-size-font-weight: inherit;
+  --hop-Label-inherit-size-line-height: inherit;
+}
+:where(.Label-module__hop-Label___7xL3v) {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+}
+:where(.Label-module__hop-Label--xs___CHLy3) {
+  --font-size: var(--hop-Label-xs-font-size);
+  --font-family: var(--hop-Label-xs-font-family);
+  --font-weight: var(--hop-Label-xs-font-weight);
+  --line-height: var(--hop-Label-xs-line-height);
+}
+:where(.Label-module__hop-Label--sm___oQzz3) {
+  --font-size: var(--hop-Label-sm-font-size);
+  --font-family: var(--hop-Label-sm-font-family);
+  --font-weight: var(--hop-Label-sm-font-weight);
+  --line-height: var(--hop-Label-sm-line-height);
+}
+:where(.Label-module__hop-Label--md___dLqF6) {
+  --font-size: var(--hop-Label-md-font-size);
+  --font-family: var(--hop-Label-md-font-family);
+  --font-weight: var(--hop-Label-md-font-weight);
+  --line-height: var(--hop-Label-md-line-height);
+}
+:where(.Label-module__hop-Label--lg___ViQCe) {
+  --font-size: var(--hop-Label-lg-font-size);
+  --font-family: var(--hop-Label-lg-font-family);
+  --font-weight: var(--hop-Label-lg-font-weight);
+  --line-height: var(--hop-Label-lg-line-height);
+}
+:where(.Label-module__hop-Label--xl___wlNpS) {
+  --font-size: var(--hop-Label-xl-font-size);
+  --font-family: var(--hop-Label-xl-font-family);
+  --font-weight: var(--hop-Label-xl-font-weight);
+  --line-height: var(--hop-Label-xl-line-height);
+}
+:where(.Label-module__hop-Label--2xl___N5Lkc) {
+  --font-size: var(--hop-Label-2xl-font-size);
+  --font-family: var(--hop-Label-2xl-font-family);
+  --font-weight: var(--hop-Label-2xl-font-weight);
+  --line-height: var(--hop-Label-2xl-line-height);
+}
+:where(.Label-module__hop-Label--inherit___UeeVB) {
+  --font-size: var(--hop-Label-inherit-size-font-size);
+  --font-family: var(--hop-Label-inherit-size-font-family);
+  --font-weight: var(--hop-Label-inherit-size-font-weight);
+  --line-height: var(--hop-Label-inherit-size-line-height);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/tag/src/TagGroup.module.css/#css-module-data */
+.TagGroup-module__hop-TagGroup___jU0Oi {
+  --hop-TagGroup-row-gap: var(--hop-space-inline-sm);
+  --hop-TagGroup-list-column-gap: var(--hop-space-inline-sm);
+  --hop-TagGroup-list-row-gap: var(--hop-space-inline-sm);
+  --hop-TagGroup-list-focus-ring-color: var(--hop-primary-border-focus);
+  --hop-TagGroup-list-border-radius: var(--hop-shape-rounded-sm);
+  --row-gap: var(--hop-TagGroup-row-gap);
+  --list-column-gap: var(--hop-TagGroup-list-column-gap);
+  --list-row-gap: var(--hop-TagGroup-list-row-gap);
+  --list-focus-ring-color: var(--hop-TagGroup-list-focus-ring-color);
+  --list-border-radius: var(--hop-TagGroup-list-border-radius);
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--row-gap);
+  align-items: flex-start;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  inline-size: max-content;
+  max-inline-size: 100%;
+}
+.TagGroup-module__hop-TagGroup___jU0Oi > .TagGroup-module__hop-TagGroup__label___6FsvW {
+  order: 1;
+}
+.TagGroup-module__hop-TagGroup__list___sB-Og {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--list-row-gap) var(--list-column-gap);
+  align-items: center;
+  order: 2;
+  border-radius: var(--list-border-radius);
+  outline: none;
+}
+.TagGroup-module__hop-TagGroup__list___sB-Og[data-focus-visible] {
+  outline: 0.125rem solid var(--list-focus-ring-color);
+  outline-offset: 0.125rem;
+}
+.TagGroup-module__hop-TagGroup___jU0Oi > .TagGroup-module__hop-TagGroup__error-message___mOw5E,
+.TagGroup-module__hop-TagGroup___jU0Oi > .TagGroup-module__hop-TagGroup__helper-message___6ln7G {
+  order: 3;
+}

package/dist/tag/src/TagGroup.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { TagGroupProps as TagGroupProps$1 } from 'react-aria-components';
+
+declare const GlobalTagGroupCssSelector = "hop-TagGroup";
+interface TagGroupProps extends StyledComponentProps<TagGroupProps$1> {
+    /**
+     * Whether the tags are invalid or not.
+     */
+    isInvalid?: boolean;
+    /**
+     * A tag can vary in size.
+     * @default "md"
+     */
+    size?: ResponsiveProp<"md" | "lg">;
+}
+/**
+ * A versatile TagGroup component for categorizing items in a TagGroupList, equipped with a remove button for easy management.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _TagGroup: react.ForwardRefExoticComponent<TagGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+export { GlobalTagGroupCssSelector, _TagGroup as TagGroup, type TagGroupProps };

package/dist/tag/src/TagGroup.js

@@ -0,0 +1,10 @@
+export { GlobalTagGroupCssSelector, _TagGroup as TagGroup } from '../../chunk-FGDSWA7S.js';
+import '../../chunk-EWMWQ2MC.js';
+import '../../chunk-LCAS3YQV.js';
+import '../../chunk-XLKYXKWE.js';
+import '../../chunk-ACVMW6YD.js';
+import '../../chunk-ESVVLTEN.js';
+import '../../chunk-QCA3ZR56.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/tag/src/TagGroupContext.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { TagGroupProps } from './TagGroup.js';
+import '@hopper-ui/styled-system';
+
+declare const TagGroupContext: react.Context<ContextValue<TagGroupProps, HTMLDivElement>>;
+
+export { TagGroupContext };

package/dist/tag/src/TagGroupContext.js

@@ -0,0 +1,2 @@
+export { TagGroupContext } from '../../chunk-LCAS3YQV.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/tag/src/TagList.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { StyledComponentProps } from '@hopper-ui/styled-system';
+import { TagListProps as TagListProps$1 } from 'react-aria-components';
+
+declare const GlobalTagListCssSelector = "hop-TagList";
+interface TagListProps<T> extends StyledComponentProps<TagListProps$1<T>> {
+}
+/**
+ * A versatile TagList component for categorizing items in a TagListList, equipped with a remove button for easy management.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _TagList: react.ForwardRefExoticComponent<TagListProps<object> & react.RefAttributes<HTMLDivElement>>;
+
+export { GlobalTagListCssSelector, _TagList as TagList, type TagListProps };

package/dist/tag/src/TagList.js

@@ -0,0 +1,4 @@
+export { GlobalTagListCssSelector, _TagList as TagList } from '../../chunk-WWRB4K4M.js';
+import '../../chunk-XLKYXKWE.js';
+import '../../chunk-65JPI4FL.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/tag/src/TagListContext.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { TagListProps } from './TagList.js';
+import '@hopper-ui/styled-system';
+
+declare const TagListContext: react.Context<ContextValue<TagListProps<object>, HTMLDivElement>>;
+
+export { TagListContext };

package/dist/tag/src/TagListContext.js

@@ -0,0 +1,2 @@
+export { TagListContext } from '../../chunk-XLKYXKWE.js';
+import '../../chunk-2P3A4VVY.js';