@hopper-ui/components 0.0.11 → 0.1.0

package/dist/Spinner/src/index.css

@@ -0,0 +1,148 @@
+/* src/Spinner/src/Spinner.module.css */
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.hop-spinner {
+  --hop-spinner-component-border-radius: var(--hop-shape-circle);
+  --hop-spinner-component-sm-wheel-size: 1rem;
+  --hop-spinner-component-md-wheel-size: 1.25rem;
+  --hop-spinner-component-lg-wheel-size: 1.5rem;
+  --hop-spinner-component-track-width: 0.125rem;
+  --hop-spinner-component-track-opacity: 0.2;
+  --hop-spinner-component-track-border: var(--hop-spinner-component-track-width) solid currentcolor;
+  --hop-spinner-component-fill-animation: spin .8s infinite linear;
+  --hop-spinner-component-fill-animation-reduced-motion-duration: 2s;
+  --hop-spinner-component-fill-border: var(--hop-spinner-component-track-width) solid transparent;
+  --hop-spinner-component-fill-border-inline-start: var(--hop-spinner-component-track-width) solid currentcolor;
+  --hop-spinner-component-label-margin-inline-start: var(--hop-space-inline-sm);
+  box-sizing: border-box;
+  display: grid;
+  grid-template-areas: "spinner label";
+  grid-template-columns: min-content auto;
+  align-items: center;
+}
+.hop-spinner--sm {
+  --width: var(--hop-spinner-component-sm-wheel-size);
+  --height: var(--hop-spinner-component-sm-wheel-size);
+}
+.hop-spinner--md {
+  --width: var(--hop-spinner-component-md-wheel-size);
+  --height: var(--hop-spinner-component-md-wheel-size);
+}
+.hop-spinner--lg {
+  --width: var(--hop-spinner-component-lg-wheel-size);
+  --height: var(--hop-spinner-component-lg-wheel-size);
+}
+.hop-spinner__track {
+  box-sizing: border-box;
+  inline-size: var(--width, --hop-spinner-component-md-wheel-size);
+  block-size: var(--height, --hop-spinner-component-md-wheel-size);
+  border-radius: var(--hop-spinner-component-border-radius);
+  border: var(--hop-spinner-component-track-border);
+  opacity: var(--hop-spinner-component-track-opacity);
+  grid-area: spinner;
+}
+.hop-spinner__fill {
+  box-sizing: border-box;
+  inline-size: var(--width, --hop-spinner-component-md-wheel-size);
+  block-size: var(--height, --hop-spinner-component-md-wheel-size);
+  border-radius: var(--hop-spinner-component-border-radius);
+  border: var( --hop-spinner-component-fill-border);
+  border-inline-start: var(--hop-spinner-component-fill-border-inline-start);
+  grid-area: spinner;
+  animation: var(--hop-spinner-component-fill-animation);
+}
+@media (prefers-reduced-motion: reduce) {
+  .hop-spinner__fill {
+    animation-duration: var(--hop-spinner-component-fill-animation-reduced-motion-duration);
+  }
+}
+.hop-spinner__label {
+  grid-area: label;
+  margin-inline-start: var(--hop-spinner-component-label-margin-inline-start);
+}
+
+/* src/Label/src/Label.module.css */
+.hop-label {
+  --hop-label-component-xs-font-size: var(--hop-body-xs-font-size);
+  --hop-label-component-xs-font-family: var(--hop-body-xs-font-family);
+  --hop-label-component-xs-font-weight: var(--hop-body-xs-font-weight);
+  --hop-label-component-xs-line-height: var(--hop-body-xs-line-height);
+  --hop-label-component-sm-font-size: var(--hop-body-sm-font-size);
+  --hop-label-component-sm-font-family: var(--hop-body-sm-font-family);
+  --hop-label-component-sm-font-weight: var(--hop-body-sm-font-weight);
+  --hop-label-component-sm-line-height: var(--hop-body-sm-line-height);
+  --hop-label-component-md-font-size: var(--hop-body-md-font-size);
+  --hop-label-component-md-font-family: var(--hop-body-md-font-family);
+  --hop-label-component-md-font-weight: var(--hop-body-md-font-weight);
+  --hop-label-component-md-line-height: var(--hop-body-md-line-height);
+  --hop-label-component-lg-font-size: var(--hop-body-lg-font-size);
+  --hop-label-component-lg-font-family: var(--hop-body-lg-font-family);
+  --hop-label-component-lg-font-weight: var(--hop-body-lg-font-weight);
+  --hop-label-component-lg-line-height: var(--hop-body-lg-line-height);
+  --hop-label-component-xl-font-size: var(--hop-body-xl-font-size);
+  --hop-label-component-xl-font-family: var(--hop-body-xl-font-family);
+  --hop-label-component-xl-font-weight: var(--hop-body-xl-font-weight);
+  --hop-label-component-xl-line-height: var(--hop-body-xl-line-height);
+  --hop-label-component-2xl-font-size: var(--hop-body-2xl-font-size);
+  --hop-label-component-2xl-font-family: var(--hop-body-2xl-font-family);
+  --hop-label-component-2xl-font-weight: var(--hop-body-2xl-font-weight);
+  --hop-label-component-2xl-line-height: var(--hop-body-2xl-line-height);
+  --hop-label-component-inherit-size-font-size: inherit;
+  --hop-label-component-inherit-size-font-family: inherit;
+  --hop-label-component-inherit-size-font-weight: inherit;
+  --hop-label-component-inherit-size-line-height: inherit;
+}
+:where(.hop-label) {
+  font-size: var(--font-size, --hop-label-component-md-font-size);
+  font-family: var(--font-family, --hop-label-component-md-font-family);
+  font-weight: var(--font-weight, --hop-label-component-md-font-weight);
+  line-height: var(--line-height, --hop-label-component-md-line-height);
+}
+:where(.hop-label--xs) {
+  --font-size: var(--hop-label-component-xs-font-size);
+  --font-family: var(--hop-label-component-xs-font-family);
+  --font-weight: var(--hop-label-component-xs-font-weight);
+  --line-height: var(--hop-label-component-xs-line-height);
+}
+:where(.hop-label--sm) {
+  --font-size: var(--hop-label-component-sm-font-size);
+  --font-family: var(--hop-label-component-sm-font-family);
+  --font-weight: var(--hop-label-component-sm-font-weight);
+  --line-height: var(--hop-label-component-sm-line-height);
+}
+:where(.hop-label--md) {
+  --font-size: var(--hop-label-component-md-font-size);
+  --font-family: var(--hop-label-component-md-font-family);
+  --font-weight: var(--hop-label-component-md-font-weight);
+  --line-height: var(--hop-label-component-md-line-height);
+}
+:where(.hop-label--lg) {
+  --font-size: var(--hop-label-component-lg-font-size);
+  --font-family: var(--hop-label-component-lg-font-family);
+  --font-weight: var(--hop-label-component-lg-font-weight);
+  --line-height: var(--hop-label-component-lg-line-height);
+}
+:where(.hop-label--xl) {
+  --font-size: var(--hop-label-component-xl-font-size);
+  --font-family: var(--hop-label-component-xl-font-family);
+  --font-weight: var(--hop-label-component-xl-font-weight);
+  --line-height: var(--hop-label-component-xl-line-height);
+}
+:where(.hop-label--2xl) {
+  --font-size: var(--hop-label-component-2xl-font-size);
+  --font-family: var(--hop-label-component-2xl-font-family);
+  --font-weight: var(--hop-label-component-2xl-font-weight);
+  --line-height: var(--hop-label-component-2xl-line-height);
+}
+:where(.hop-label--inherit) {
+  --font-size: var(--hop-label-component-inherit-size-font-size);
+  --font-family: var(--hop-label-component-inherit-size-font-family);
+  --font-weight: var(--hop-label-component-inherit-size-font-weight);
+  --line-height: var(--hop-label-component-inherit-size-line-height);
+}

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

@@ -0,0 +1,7 @@
+export { GlobalSpinnerCssSelector, Spinner, SpinnerProps } from './Spinner.js';
+export { SpinnerContext } from './SpinnerContext.js';
+import 'react';
+import '@hopper-ui/styled-system';
+import '../../utils/src/types.js';
+import '@react-types/shared';
+import 'react-aria-components';

package/dist/Spinner/src/index.js

@@ -0,0 +1,6 @@
+export { GlobalSpinnerCssSelector, _Spinner as Spinner } from '../../chunk-QIOYM2XJ.js';
+import '../../chunk-SEU4CGZD.js';
+export { SpinnerContext } from '../../chunk-4ZYV2XLW.js';
+import '../../chunk-XCKF6EU7.js';
+import '../../chunk-6BEVZRUL.js';
+import '../../chunk-HVKOIMMW.js';

package/dist/Text/src/Text.css

@@ -0,0 +1,79 @@
+/* src/Text/src/Text.module.css */
+.hop-text {
+  --hop-text-component-xs-font-size: var(--hop-body-xs-font-size);
+  --hop-text-component-xs-font-family: var(--hop-body-xs-font-family);
+  --hop-text-component-xs-font-weight: var(--hop-body-xs-font-weight);
+  --hop-text-component-xs-line-height: var(--hop-body-xs-line-height);
+  --hop-text-component-sm-font-size: var(--hop-body-sm-font-size);
+  --hop-text-component-sm-font-family: var(--hop-body-sm-font-family);
+  --hop-text-component-sm-font-weight: var(--hop-body-sm-font-weight);
+  --hop-text-component-sm-line-height: var(--hop-body-sm-line-height);
+  --hop-text-component-md-font-size: var(--hop-body-md-font-size);
+  --hop-text-component-md-font-family: var(--hop-body-md-font-family);
+  --hop-text-component-md-font-weight: var(--hop-body-md-font-weight);
+  --hop-text-component-md-line-height: var(--hop-body-md-line-height);
+  --hop-text-component-lg-font-size: var(--hop-body-lg-font-size);
+  --hop-text-component-lg-font-family: var(--hop-body-lg-font-family);
+  --hop-text-component-lg-font-weight: var(--hop-body-lg-font-weight);
+  --hop-text-component-lg-line-height: var(--hop-body-lg-line-height);
+  --hop-text-component-xl-font-size: var(--hop-body-xl-font-size);
+  --hop-text-component-xl-font-family: var(--hop-body-xl-font-family);
+  --hop-text-component-xl-font-weight: var(--hop-body-xl-font-weight);
+  --hop-text-component-xl-line-height: var(--hop-body-xl-line-height);
+  --hop-text-component-2xl-font-size: var(--hop-body-2xl-font-size);
+  --hop-text-component-2xl-font-family: var(--hop-body-2xl-font-family);
+  --hop-text-component-2xl-font-weight: var(--hop-body-2xl-font-weight);
+  --hop-text-component-2xl-line-height: var(--hop-body-2xl-line-height);
+  --hop-text-component-inherit-size-font-size: inherit;
+  --hop-text-component-inherit-size-font-family: inherit;
+  --hop-text-component-inherit-size-font-weight: inherit;
+  --hop-text-component-inherit-size-line-height: inherit;
+}
+:where(.hop-text) {
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+}
+:where(.hop-text--xs) {
+  --font-size: var(--hop-text-component-xs-font-size);
+  --font-family: var(--hop-text-component-xs-font-family);
+  --font-weight: var(--hop-text-component-xs-font-weight);
+  --line-height: var(--hop-text-component-xs-line-height);
+}
+:where(.hop-text--sm) {
+  --font-size: var(--hop-text-component-sm-font-size);
+  --font-family: var(--hop-text-component-sm-font-family);
+  --font-weight: var(--hop-text-component-sm-font-weight);
+  --line-height: var(--hop-text-component-sm-line-height);
+}
+:where(.hop-text--md) {
+  --font-size: var(--hop-text-component-md-font-size);
+  --font-family: var(--hop-text-component-md-font-family);
+  --font-weight: var(--hop-text-component-md-font-weight);
+  --line-height: var(--hop-text-component-md-line-height);
+}
+:where(.hop-text--lg) {
+  --font-size: var(--hop-text-component-lg-font-size);
+  --font-family: var(--hop-text-component-lg-font-family);
+  --font-weight: var(--hop-text-component-lg-font-weight);
+  --line-height: var(--hop-text-component-lg-line-height);
+}
+:where(.hop-text--xl) {
+  --font-size: var(--hop-text-component-xl-font-size);
+  --font-family: var(--hop-text-component-xl-font-family);
+  --font-weight: var(--hop-text-component-xl-font-weight);
+  --line-height: var(--hop-text-component-xl-line-height);
+}
+:where(.hop-text--2xl) {
+  --font-size: var(--hop-text-component-2xl-font-size);
+  --font-family: var(--hop-text-component-2xl-font-family);
+  --font-weight: var(--hop-text-component-2xl-font-weight);
+  --line-height: var(--hop-text-component-2xl-line-height);
+}
+:where(.hop-text--inherit) {
+  --font-size: var(--hop-text-component-inherit-size-font-size);
+  --font-family: var(--hop-text-component-inherit-size-font-family);
+  --font-weight: var(--hop-text-component-inherit-size-font-weight);
+  --line-height: var(--hop-text-component-inherit-size-line-height);
+}

package/dist/Text/src/Text.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { TextProps as TextProps$1 } from 'react-aria-components';
+
+declare const GlobalTextCssSelector = "hop-Text";
+type RACTextPropsToOmit = "elementType";
+interface TextProps extends StyledComponentProps<Omit<TextProps$1, RACTextPropsToOmit>> {
+    /**
+     * The Typography Type Scale to use.
+     * @default "md"
+     */
+    size?: ResponsiveProp<"inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
+}
+/**
+ * A primitive text component matching Hopper's typography type scale.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { GlobalTextCssSelector, type RACTextPropsToOmit, _Text as Text, type TextProps };

package/dist/Text/src/Text.js

@@ -0,0 +1,3 @@
+export { GlobalTextCssSelector, _Text as Text } from '../../chunk-WRWNRVTG.js';
+import '../../chunk-OE5BLFZI.js';
+import '../../chunk-6BEVZRUL.js';

package/dist/Text/src/TextContext.d.ts

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

package/dist/Text/src/TextContext.js

@@ -0,0 +1 @@
+export { TextContext } from '../../chunk-OE5BLFZI.js';

package/dist/Text/src/index.css

@@ -0,0 +1,79 @@
+/* src/Text/src/Text.module.css */
+.hop-text {
+  --hop-text-component-xs-font-size: var(--hop-body-xs-font-size);
+  --hop-text-component-xs-font-family: var(--hop-body-xs-font-family);
+  --hop-text-component-xs-font-weight: var(--hop-body-xs-font-weight);
+  --hop-text-component-xs-line-height: var(--hop-body-xs-line-height);
+  --hop-text-component-sm-font-size: var(--hop-body-sm-font-size);
+  --hop-text-component-sm-font-family: var(--hop-body-sm-font-family);
+  --hop-text-component-sm-font-weight: var(--hop-body-sm-font-weight);
+  --hop-text-component-sm-line-height: var(--hop-body-sm-line-height);
+  --hop-text-component-md-font-size: var(--hop-body-md-font-size);
+  --hop-text-component-md-font-family: var(--hop-body-md-font-family);
+  --hop-text-component-md-font-weight: var(--hop-body-md-font-weight);
+  --hop-text-component-md-line-height: var(--hop-body-md-line-height);
+  --hop-text-component-lg-font-size: var(--hop-body-lg-font-size);
+  --hop-text-component-lg-font-family: var(--hop-body-lg-font-family);
+  --hop-text-component-lg-font-weight: var(--hop-body-lg-font-weight);
+  --hop-text-component-lg-line-height: var(--hop-body-lg-line-height);
+  --hop-text-component-xl-font-size: var(--hop-body-xl-font-size);
+  --hop-text-component-xl-font-family: var(--hop-body-xl-font-family);
+  --hop-text-component-xl-font-weight: var(--hop-body-xl-font-weight);
+  --hop-text-component-xl-line-height: var(--hop-body-xl-line-height);
+  --hop-text-component-2xl-font-size: var(--hop-body-2xl-font-size);
+  --hop-text-component-2xl-font-family: var(--hop-body-2xl-font-family);
+  --hop-text-component-2xl-font-weight: var(--hop-body-2xl-font-weight);
+  --hop-text-component-2xl-line-height: var(--hop-body-2xl-line-height);
+  --hop-text-component-inherit-size-font-size: inherit;
+  --hop-text-component-inherit-size-font-family: inherit;
+  --hop-text-component-inherit-size-font-weight: inherit;
+  --hop-text-component-inherit-size-line-height: inherit;
+}
+:where(.hop-text) {
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+}
+:where(.hop-text--xs) {
+  --font-size: var(--hop-text-component-xs-font-size);
+  --font-family: var(--hop-text-component-xs-font-family);
+  --font-weight: var(--hop-text-component-xs-font-weight);
+  --line-height: var(--hop-text-component-xs-line-height);
+}
+:where(.hop-text--sm) {
+  --font-size: var(--hop-text-component-sm-font-size);
+  --font-family: var(--hop-text-component-sm-font-family);
+  --font-weight: var(--hop-text-component-sm-font-weight);
+  --line-height: var(--hop-text-component-sm-line-height);
+}
+:where(.hop-text--md) {
+  --font-size: var(--hop-text-component-md-font-size);
+  --font-family: var(--hop-text-component-md-font-family);
+  --font-weight: var(--hop-text-component-md-font-weight);
+  --line-height: var(--hop-text-component-md-line-height);
+}
+:where(.hop-text--lg) {
+  --font-size: var(--hop-text-component-lg-font-size);
+  --font-family: var(--hop-text-component-lg-font-family);
+  --font-weight: var(--hop-text-component-lg-font-weight);
+  --line-height: var(--hop-text-component-lg-line-height);
+}
+:where(.hop-text--xl) {
+  --font-size: var(--hop-text-component-xl-font-size);
+  --font-family: var(--hop-text-component-xl-font-family);
+  --font-weight: var(--hop-text-component-xl-font-weight);
+  --line-height: var(--hop-text-component-xl-line-height);
+}
+:where(.hop-text--2xl) {
+  --font-size: var(--hop-text-component-2xl-font-size);
+  --font-family: var(--hop-text-component-2xl-font-family);
+  --font-weight: var(--hop-text-component-2xl-font-weight);
+  --line-height: var(--hop-text-component-2xl-line-height);
+}
+:where(.hop-text--inherit) {
+  --font-size: var(--hop-text-component-inherit-size-font-size);
+  --font-family: var(--hop-text-component-inherit-size-font-family);
+  --font-weight: var(--hop-text-component-inherit-size-font-weight);
+  --line-height: var(--hop-text-component-inherit-size-line-height);
+}

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

@@ -0,0 +1,5 @@
+export { GlobalTextCssSelector, RACTextPropsToOmit, Text, TextProps } from './Text.js';
+export { TextContext } from './TextContext.js';
+import 'react';
+import '@hopper-ui/styled-system';
+import 'react-aria-components';

package/dist/Text/src/index.js

@@ -0,0 +1,3 @@
+export { GlobalTextCssSelector, _Text as Text } from '../../chunk-WRWNRVTG.js';
+export { TextContext } from '../../chunk-OE5BLFZI.js';
+import '../../chunk-6BEVZRUL.js';