@hopper-ui/components 1.0.2 → 1.0.4

package/dist/Spinner/src/index.css

@@ -1,5 +1,5 @@
-/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Label/src/Label.module.css/#css-module-data */
-.Label-module__hop-Label___4iUGB {
+/* 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);
@@ -29,49 +29,49 @@
   --hop-Label-inherit-size-font-weight: inherit;
   --hop-Label-inherit-size-line-height: inherit;
 }
-:where(.Label-module__hop-Label___4iUGB) {
-  font-family: var(--font-family, --hop-Label-md-font-family);
-  font-size: var(--font-size, --hop-Label-md-font-size);
-  font-weight: var(--font-weight, --hop-Label-md-font-weight);
-  line-height: var(--line-height, --hop-Label-md-line-height);
+: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___l8KEJ) {
+: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___GfRWh) {
+: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___f0lW2) {
+: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___yXjpJ) {
+: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___W-yC3) {
+: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___1sGVW) {
+: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___Hgnll) {
+: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);
@@ -79,7 +79,7 @@
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Spinner/src/Spinner.module.css/#css-module-data */
-@keyframes Spinner-module__spin___vO58Y {
+@keyframes Spinner-module__spin___t8CGY {
   0% {
     transform: rotate(0deg);
   }
@@ -87,7 +87,7 @@
     transform: rotate(360deg);
   }
 }
-.Spinner-module__hop-Spinner___3AJ1T {
+.Spinner-module__hop-Spinner___WKQTI {
   --hop-Spinner-border-radius: var(--hop-shape-circle);
   --hop-Spinner-sm-wheel-size: 1rem;
   --hop-Spinner-md-wheel-size: 1.25rem;
@@ -95,7 +95,7 @@
   --hop-Spinner-track-width: 0.125rem;
   --hop-Spinner-track-opacity: 0.2;
   --hop-Spinner-track-border: var(--hop-Spinner-track-width) solid currentcolor;
-  --hop-Spinner-fill-animation: Spinner-module__spin___vO58Y .8s infinite linear;
+  --hop-Spinner-fill-animation: Spinner-module__spin___t8CGY .8s infinite linear;
   --hop-Spinner-fill-animation-reduced-motion-duration: 2s;
   --hop-Spinner-fill-border: var(--hop-Spinner-track-width) solid transparent;
   --hop-Spinner-fill-border-inline-start: var(--hop-Spinner-track-width) solid currentcolor;
@@ -106,43 +106,43 @@
   align-items: center;
   box-sizing: border-box;
 }
-.Spinner-module__hop-Spinner--sm___zyI-F {
+.Spinner-module__hop-Spinner--sm___YO1ZU {
   --width: var(--hop-Spinner-sm-wheel-size);
   --height: var(--hop-Spinner-sm-wheel-size);
 }
-.Spinner-module__hop-Spinner--md___NNX0u {
+.Spinner-module__hop-Spinner--md___UiJMR {
   --width: var(--hop-Spinner-md-wheel-size);
   --height: var(--hop-Spinner-md-wheel-size);
 }
-.Spinner-module__hop-Spinner--lg___3ctxV {
+.Spinner-module__hop-Spinner--lg___uAp2X {
   --width: var(--hop-Spinner-lg-wheel-size);
   --height: var(--hop-Spinner-lg-wheel-size);
 }
-.Spinner-module__hop-Spinner__track___pSjYM {
+.Spinner-module__hop-Spinner__track___vU-oZ {
   grid-area: spinner;
   box-sizing: border-box;
-  inline-size: var(--width, --hop-Spinner-md-wheel-size);
-  block-size: var(--height, --hop-Spinner-md-wheel-size);
+  inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
+  block-size: var(--height, var(--hop-Spinner-md-wheel-size));
   opacity: var(--hop-Spinner-track-opacity);
   border: var(--hop-Spinner-track-border);
   border-radius: var(--hop-Spinner-border-radius);
 }
-.Spinner-module__hop-Spinner__fill___7JLY4 {
+.Spinner-module__hop-Spinner__fill___8gJAf {
   grid-area: spinner;
   box-sizing: border-box;
-  inline-size: var(--width, --hop-Spinner-md-wheel-size);
-  block-size: var(--height, --hop-Spinner-md-wheel-size);
-  border: var( --hop-Spinner-fill-border);
+  inline-size: var(--width, var(--hop-Spinner-md-wheel-size));
+  block-size: var(--height, var(--hop-Spinner-md-wheel-size));
+  border: var(--hop-Spinner-fill-border);
   border-inline-start: var(--hop-Spinner-fill-border-inline-start);
   border-radius: var(--hop-Spinner-border-radius);
   animation: var(--hop-Spinner-fill-animation);
 }
 @media (prefers-reduced-motion: reduce) {
-  .Spinner-module__hop-Spinner__fill___7JLY4 {
+  .Spinner-module__hop-Spinner__fill___8gJAf {
     animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
   }
 }
-.Spinner-module__hop-Spinner__label___dCGQD {
+.Spinner-module__hop-Spinner__label___GxQ20 {
   grid-area: label;
   margin-inline-start: var(--hop-Spinner-label-margin-inline-start);
 }

package/dist/Spinner/src/index.js

@@ -1,7 +1,7 @@
-export { GlobalSpinnerCssSelector, _Spinner as Spinner } from '../../chunk-RLIG2IHH.js';
-import '../../chunk-65JPI4FL.js';
+export { GlobalSpinnerCssSelector, _Spinner as Spinner } from '../../chunk-Y7XWWUMU.js';
+import '../../chunk-2CKDJG6R.js';
+import '../../chunk-QCA3ZR56.js';
 export { SpinnerContext } from '../../chunk-4ZYV2XLW.js';
-import '../../chunk-NUUG5PFN.js';
+import '../../chunk-65JPI4FL.js';
 import '../../chunk-KVDXQMWI.js';
-import '../../chunk-HVKOIMMW.js';
-import '../../chunk-YSQDPG26.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/badge/src/Badge.css

@@ -0,0 +1,80 @@
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/OverlineText/src/OverlineText.module.css/#css-module-data */
+:where(.OverlineText-module__hop-OverlineText___lA54v) {
+  --hop-OverlineText-font-family: var(--hop-overline-font-family);
+  --hop-OverlineText-font-size: var(--hop-overline-font-size);
+  --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
+  --hop-OverlineText-letter-spacing: 0.015rem;
+  --hop-OverlineText-line-height: var(--hop-overline-line-height);
+  --hop-OverlineText-top-offset: var(--hop-overline-top-offset);
+  --hop-OverlineText-bottom-offset: var(--hop-overline-bottom-offset);
+  --font-family: var(--hop-OverlineText-font-family);
+  --font-size: var(--hop-OverlineText-font-size);
+  --font-weight: var(--hop-OverlineText-font-weight);
+  --letter-spacing: var(--hop-OverlineText-letter-spacing);
+  --line-height: var(--hop-OverlineText-line-height);
+  --top-offset: var(--hop-OverlineText-top-offset);
+  --bottom-offset: var(--hop-OverlineText-bottom-offset);
+  box-sizing: border-box;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-feature-settings: "case";
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing);
+}
+.OverlineText-module__hop-OverlineText__text___Z9gJ6 {
+  box-sizing: border-box;
+}
+.OverlineText-module__hop-OverlineText__text___Z9gJ6::before,
+.OverlineText-module__hop-OverlineText__text___Z9gJ6::after {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  inline-size: 0;
+  block-size: 0;
+}
+.OverlineText-module__hop-OverlineText__text___Z9gJ6::before {
+  margin-block-end: var(--bottom-offset);
+}
+.OverlineText-module__hop-OverlineText__text___Z9gJ6::after {
+  margin-block-start: var(--top-offset);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/badge/src/Badge.module.css/#css-module-data */
+.Badge-module__hop-Badge___mk1h- {
+  --hop-Badge-height: 1.5rem;
+  --hop-Badge-padding-inline: var(--hop-space-inset-sm);
+  --hop-Badge-border-radius: var(--hop-shape-pill);
+  --hop-Badge-primary-text-color: var(--hop-primary-text-strong);
+  --hop-Badge-primary-background-color: var(--hop-primary-surface-strong);
+  --hop-Badge-secondary-text-color: var(--hop-neutral-text);
+  --hop-Badge-secondary-background-color: var(--hop-neutral-surface-weak);
+  --hop-Badge-text-color-disabled: var(--hop-neutral-text-disabled);
+  --hop-Badge-background-color-disabled: var(--hop-neutral-surface-disabled);
+  --height: var(--hop-Badge-height);
+  --padding-inline: var(--hop-Badge-padding-inline);
+  --border-radius: var(--hop-Badge-border-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: max-content;
+  block-size: var(--height);
+  padding-inline: var(--padding-inline);
+  color: var(--text-color, var(--hop-Badge-primary-text-color));
+  background-color: var(--background-color, var(--hop-Badge-primary-background-color));
+  border-radius: var(--border-radius);
+}
+.Badge-module__hop-Badge--primary___RxxTa {
+  --background-color: var(--hop-Badge-primary-background-color);
+  --text-color: var(--hop-Badge-primary-text-color);
+}
+.Badge-module__hop-Badge--secondary___8k1fQ {
+  --background-color: var(--hop-Badge-secondary-background-color);
+  --text-color: var(--hop-Badge-secondary-text-color);
+}
+.Badge-module__hop-Badge___mk1h-[data-disabled] {
+  --background-color: var(--hop-Badge-background-color-disabled);
+  --text-color: var(--hop-Badge-text-color-disabled);
+}

package/dist/badge/src/Badge.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { StyledSystemProps } from '@hopper-ui/styled-system';
+import { BaseComponentProps } from '../../utils/src/types.js';
+import '@react-types/shared';
+import 'react-aria-components';
+
+declare const GlobalBadgeCssSelector = "hop-Badge";
+interface BadgeProps extends StyledSystemProps, BaseComponentProps {
+    /**
+     * The visual style of the badge.
+     * * @default "primary"
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * Whether or not the badge is disabled.
+     */
+    isDisabled?: boolean;
+}
+/**
+ * A badge, displaying either text or a count, serves to present notices or notifications associated with a parent component.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { _Badge as Badge, type BadgeProps, GlobalBadgeCssSelector };

package/dist/badge/src/Badge.js

@@ -0,0 +1,6 @@
+export { _Badge as Badge, GlobalBadgeCssSelector } from '../../chunk-LRXYIR2A.js';
+import '../../chunk-BCHUEONM.js';
+import '../../chunk-WPNVVGFW.js';
+import '../../chunk-ZSFJVMJN.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-2P3A4VVY.js';

package/dist/badge/src/BadgeContext.d.ts

@@ -0,0 +1,10 @@
+import { BadgeProps } from './Badge.js';
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import '@hopper-ui/styled-system';
+import '../../utils/src/types.js';
+import '@react-types/shared';
+
+declare const BadgeContext: react.Context<ContextValue<BadgeProps, HTMLSpanElement>>;
+
+export { BadgeContext };

package/dist/badge/src/BadgeContext.js

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

package/dist/badge/src/index.css

@@ -0,0 +1,80 @@
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/OverlineText/src/OverlineText.module.css/#css-module-data */
+:where(.OverlineText-module__hop-OverlineText___lA54v) {
+  --hop-OverlineText-font-family: var(--hop-overline-font-family);
+  --hop-OverlineText-font-size: var(--hop-overline-font-size);
+  --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
+  --hop-OverlineText-letter-spacing: 0.015rem;
+  --hop-OverlineText-line-height: var(--hop-overline-line-height);
+  --hop-OverlineText-top-offset: var(--hop-overline-top-offset);
+  --hop-OverlineText-bottom-offset: var(--hop-overline-bottom-offset);
+  --font-family: var(--hop-OverlineText-font-family);
+  --font-size: var(--hop-OverlineText-font-size);
+  --font-weight: var(--hop-OverlineText-font-weight);
+  --letter-spacing: var(--hop-OverlineText-letter-spacing);
+  --line-height: var(--hop-OverlineText-line-height);
+  --top-offset: var(--hop-OverlineText-top-offset);
+  --bottom-offset: var(--hop-OverlineText-bottom-offset);
+  box-sizing: border-box;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-feature-settings: "case";
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing);
+}
+.OverlineText-module__hop-OverlineText__text___Z9gJ6 {
+  box-sizing: border-box;
+}
+.OverlineText-module__hop-OverlineText__text___Z9gJ6::before,
+.OverlineText-module__hop-OverlineText__text___Z9gJ6::after {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  inline-size: 0;
+  block-size: 0;
+}
+.OverlineText-module__hop-OverlineText__text___Z9gJ6::before {
+  margin-block-end: var(--bottom-offset);
+}
+.OverlineText-module__hop-OverlineText__text___Z9gJ6::after {
+  margin-block-start: var(--top-offset);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/badge/src/Badge.module.css/#css-module-data */
+.Badge-module__hop-Badge___mk1h- {
+  --hop-Badge-height: 1.5rem;
+  --hop-Badge-padding-inline: var(--hop-space-inset-sm);
+  --hop-Badge-border-radius: var(--hop-shape-pill);
+  --hop-Badge-primary-text-color: var(--hop-primary-text-strong);
+  --hop-Badge-primary-background-color: var(--hop-primary-surface-strong);
+  --hop-Badge-secondary-text-color: var(--hop-neutral-text);
+  --hop-Badge-secondary-background-color: var(--hop-neutral-surface-weak);
+  --hop-Badge-text-color-disabled: var(--hop-neutral-text-disabled);
+  --hop-Badge-background-color-disabled: var(--hop-neutral-surface-disabled);
+  --height: var(--hop-Badge-height);
+  --padding-inline: var(--hop-Badge-padding-inline);
+  --border-radius: var(--hop-Badge-border-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: max-content;
+  block-size: var(--height);
+  padding-inline: var(--padding-inline);
+  color: var(--text-color, var(--hop-Badge-primary-text-color));
+  background-color: var(--background-color, var(--hop-Badge-primary-background-color));
+  border-radius: var(--border-radius);
+}
+.Badge-module__hop-Badge--primary___RxxTa {
+  --background-color: var(--hop-Badge-primary-background-color);
+  --text-color: var(--hop-Badge-primary-text-color);
+}
+.Badge-module__hop-Badge--secondary___8k1fQ {
+  --background-color: var(--hop-Badge-secondary-background-color);
+  --text-color: var(--hop-Badge-secondary-text-color);
+}
+.Badge-module__hop-Badge___mk1h-[data-disabled] {
+  --background-color: var(--hop-Badge-background-color-disabled);
+  --text-color: var(--hop-Badge-text-color-disabled);
+}

package/dist/badge/src/index.d.ts

@@ -0,0 +1,7 @@
+export { Badge, BadgeProps, GlobalBadgeCssSelector } from './Badge.js';
+export { BadgeContext } from './BadgeContext.js';
+import 'react';
+import '@hopper-ui/styled-system';
+import '../../utils/src/types.js';
+import '@react-types/shared';
+import 'react-aria-components';

package/dist/badge/src/index.js

@@ -0,0 +1,6 @@
+export { _Badge as Badge, GlobalBadgeCssSelector } from '../../chunk-LRXYIR2A.js';
+import '../../chunk-BCHUEONM.js';
+import '../../chunk-WPNVVGFW.js';
+export { BadgeContext } from '../../chunk-ZSFJVMJN.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-2P3A4VVY.js';