@hopper-ui/components 0.0.11 → 0.1.1

package/dist/chunk-JGYEQS4H.js

@@ -0,0 +1,90 @@
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SpinnerContext } from './chunk-4ZYV2XLW.js';
+import { _Label } from './chunk-CMJUZLSA.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, ProgressBar } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/Spinner/src/Spinner.module.css
+var Spinner_default = {};
+var GlobalSpinnerCssSelector = "hop-Spinner";
+var SpinnerToLabelSizeAdapter = {
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+};
+var Spinner = (props, ref) => {
+  var _a;
+  [props, ref] = useContextProps(props, ref, SpinnerContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    size: sizeProp,
+    children,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalSpinnerCssSelector,
+    cssModule(
+      Spinner_default,
+      "hop-Spinner",
+      size
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const labelMarkup = children && /* @__PURE__ */ jsx(
+    _Label,
+    {
+      className: cssModule(
+        Spinner_default,
+        "hop-Spinner__label"
+      ),
+      size: SpinnerToLabelSizeAdapter[size],
+      children
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    ProgressBar,
+    {
+      ref,
+      isIndeterminate: true,
+      className: classNames,
+      style: mergedStyles,
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cssModule(
+              Spinner_default,
+              "hop-Spinner__track"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cssModule(
+              Spinner_default,
+              "hop-Spinner__fill"
+            )
+          }
+        ),
+        labelMarkup
+      ]
+    }
+  );
+};
+var _Spinner = forwardRef(Spinner);
+_Spinner.displayName = "Spinner";
+
+export { GlobalSpinnerCssSelector, _Spinner };

package/dist/chunk-KVDXQMWI.js

@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+
+// src/utils/src/cssModule.ts
+function cssModule(cssModules, componentName, ...modifiers) {
+  const classes = clsx(modifiers).split(" ").filter((x) => x && x !== "");
+  return classes.reduce((acc, className) => {
+    const mergedClassName = `${componentName}--${className}`;
+    if (cssModules[mergedClassName]) {
+      acc.push(cssModules[mergedClassName]);
+    }
+    return acc;
+  }, [cssModules[componentName]]).join(" ");
+}
+
+export { cssModule };

package/dist/chunk-LQICWONC.js

@@ -0,0 +1 @@
+

package/dist/chunk-M36KANKC.js

@@ -0,0 +1,7 @@
+import { Provider } from 'react-aria-components';
+
+// src/utils/src/SlotProvider.ts
+var SlotProvider = Provider;
+SlotProvider.displayName = "SlotProvider";
+
+export { SlotProvider };

package/dist/chunk-OE5BLFZI.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/Text/src/TextContext.ts
+var TextContext = createContext({});
+TextContext.displayName = "TextContext";
+
+export { TextContext };

package/dist/chunk-SNIF7MEM.js

@@ -0,0 +1 @@
+

package/dist/chunk-TNWWLZEQ.js

@@ -0,0 +1,47 @@
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, Text as Text$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+
+// src/Text/src/Text.module.css
+var Text_default = {};
+var GlobalTextCssSelector = "hop-Text";
+var DefaultTextSlot = "text";
+function Text(props, ref) {
+  [props, ref] = useContextProps({ ...props, slot: props.slot || DefaultTextSlot }, ref, TextContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { className, size: sizeProp, children, style, ...otherProps } = ownProps;
+  const size = useResponsiveValue(sizeProp != null ? sizeProp : "md");
+  const classNames = clsx(
+    GlobalTextCssSelector,
+    cssModule(
+      Text_default,
+      "hop-Text",
+      size
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Text$1,
+    {
+      ...otherProps,
+      ref,
+      elementType: "span",
+      className: classNames,
+      style: mergedStyles,
+      children
+    }
+  );
+}
+var _Text = forwardRef(Text);
+_Text.displayName = "Text";
+
+export { GlobalTextCssSelector, _Text };

package/dist/chunk-TVFC2MJ4.js

@@ -0,0 +1,58 @@
+import { useResponsiveValue, Div } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/layout/src/Flex.tsx
+function Flex(props, ref) {
+  const {
+    direction,
+    inline,
+    basis,
+    grow,
+    shrink,
+    wrap: wrapProp,
+    alignItems: alignItemsProp,
+    justifyContent: justifyContentProp,
+    alignContent: alignContentProp,
+    ...otherProps
+  } = props;
+  const wrap = useResponsiveValue(wrapProp);
+  const alignItems = useResponsiveValue(alignItemsProp);
+  const justifyContent = useResponsiveValue(justifyContentProp);
+  const alignContent = useResponsiveValue(alignContentProp);
+  return /* @__PURE__ */ jsx(
+    Div,
+    {
+      ref,
+      display: inline ? "inline-flex" : "flex",
+      flexDirection: direction,
+      flexBasis: basis,
+      flexGrow: grow,
+      flexShrink: shrink,
+      flexWrap: flexWrapValue(wrap),
+      alignItems: flexAlignValue(alignItems),
+      justifyContent: flexAlignValue(justifyContent),
+      alignContent: flexAlignValue(alignContent),
+      ...otherProps
+    }
+  );
+}
+function flexAlignValue(value) {
+  if (value === "start") {
+    return "flex-start";
+  }
+  if (value === "end") {
+    return "flex-end";
+  }
+  return value;
+}
+function flexWrapValue(value) {
+  if (typeof value === "boolean") {
+    return value ? "wrap" : "nowrap";
+  }
+  return value;
+}
+var _Flex = forwardRef(Flex);
+_Flex.displayName = "Flex";
+
+export { _Flex };

package/dist/chunk-WMTWFKKP.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/buttons/src/ButtonContext.ts
+var ButtonContext = createContext({});
+ButtonContext.displayName = "ButtonContext";
+
+export { ButtonContext };

package/dist/chunk-YLDA2M2E.js

@@ -0,0 +1,33 @@
+import { StyledSystemProvider } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { I18nProvider, RouterProvider } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// src/HopperProvider/src/HopperProvider.tsx
+var GlobalHopperProviderCssSelector = "hop-HopperProvider";
+var HopperProvider = (props, ref) => {
+  const {
+    children,
+    locale,
+    withBodyStyle = false,
+    colorScheme = "light",
+    withCssVariables = true,
+    className,
+    navigate,
+    ...rest
+  } = props;
+  const classNames = clsx(
+    GlobalHopperProviderCssSelector,
+    className
+  );
+  let content = children;
+  if (navigate) {
+    content = /* @__PURE__ */ jsx(RouterProvider, { navigate, children });
+  }
+  return /* @__PURE__ */ jsx(StyledSystemProvider, { ref, withBodyStyle, colorScheme, withCssVariables, className: classNames, ...rest, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: content }) });
+};
+var _HopperProvider = forwardRef(HopperProvider);
+_HopperProvider.displayName = "HopperProvider";
+
+export { GlobalHopperProviderCssSelector, _HopperProvider };

package/dist/chunk-Z34Z6LYX.js

@@ -0,0 +1,141 @@
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { useLocalizedString } from './chunk-GXUPEV64.js';
+import { _Spinner } from './chunk-JGYEQS4H.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { _Text } from './chunk-TNWWLZEQ.js';
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Button as Button$1 } from 'react-aria-components';
+import { useId } from 'react-aria';
+import { IconContext } from '@hopper-ui/icons';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/buttons/src/Button.module.css
+var Button_default = {};
+var GlobalButtonCssSelector = "hop-Button";
+var DefaultButtonSlot = "button";
+var Button = (props, ref) => {
+  [props, ref] = useContextProps({ ...props, slot: props.slot || DefaultButtonSlot }, ref, ButtonContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const stringFormatter = useLocalizedString();
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp = "md",
+    fluid: fluidProp,
+    variant = "primary",
+    onClick,
+    onPress: onPressProp,
+    isDisabled,
+    isLoading,
+    style: styleProp,
+    ...otherProps
+  } = ownProps;
+  if (onPressProp && onClick) {
+    console.warn("[Hopper] The onClick prop is an alias for onPress and should not be used in conjunction with it. Use one or the other.");
+  }
+  const onPress = onPressProp != null ? onPressProp : onClick;
+  const isInteractionDisabled = isDisabled || isLoading;
+  const size = useResponsiveValue(sizeProp);
+  const fluid = useResponsiveValue(fluidProp);
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalButtonCssSelector,
+    cssModule(
+      Button_default,
+      "hop-Button",
+      variant,
+      size,
+      fluid && "fluid",
+      isLoading && "loading"
+    ),
+    stylingProps.className
+  );
+  const children = composeRenderProps(childrenProp, (prev) => {
+    if (isTextOnlyChildren(prev)) {
+      return /* @__PURE__ */ jsx(_Text, { children: prev });
+    }
+    return prev;
+  });
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const spinnerId = useId();
+  const hasAriaLabel = !!props["aria-label"] || !!props["aria-labelledby"];
+  const isLoadingAriaLiveLabel = `${hasAriaLabel ? props["aria-label"] : ""} ${stringFormatter.format("button.pending")}`.trim();
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [IconListContext, {
+          slots: {
+            icon: {
+              className: Button_default["hop-Button__icon-list"]
+            },
+            "end-icon": {
+              className: Button_default["hop-Button__end-icon-list"]
+            }
+          }
+        }],
+        [IconContext, {
+          slots: {
+            icon: {
+              className: Button_default["hop-Button__icon"],
+              size: "md"
+            },
+            "end-icon": {
+              className: Button_default["hop-Button__end-icon"],
+              size: "md"
+            }
+          }
+        }],
+        [TextContext, {
+          slots: {
+            text: {
+              className: Button_default["hop-Button__text"],
+              size
+            }
+          }
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          ref,
+          className: classNames,
+          style,
+          "data-loading": isLoading,
+          onPress,
+          isDisabled: isInteractionDisabled,
+          ...otherProps,
+          children: (buttonProps) => {
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              children(buttonProps),
+              isLoading && /* @__PURE__ */ jsx(
+                _Spinner,
+                {
+                  id: spinnerId,
+                  size: "lg",
+                  "aria-label": isLoadingAriaLiveLabel,
+                  className: Button_default["hop-Button__Spinner"]
+                }
+              )
+            ] });
+          }
+        }
+      )
+    }
+  );
+};
+var _Button = forwardRef(Button);
+_Button.displayName = "Button";
+
+export { GlobalButtonCssSelector, _Button };

package/dist/chunk-ZWU6DRRZ.js

@@ -0,0 +1,15 @@
+import { Children, isValidElement, Fragment } from 'react';
+
+// src/utils/src/isTextOnlyChildren.ts
+function isTextOnlyChildren(children) {
+  const resolvedChildren = resolveChildren(children);
+  return typeof resolvedChildren === "string" || Children.toArray(resolvedChildren).every((c) => !isValidElement(c));
+}
+function resolveChildren(children) {
+  if (isValidElement(children) && children.type === Fragment) {
+    return resolveChildren(children.props.children);
+  }
+  return children;
+}
+
+export { isTextOnlyChildren };

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

@@ -0,0 +1 @@
+export { useLocalizedString } from './useLocalizedString.js';

package/dist/intl/src/index.js

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

package/dist/intl/src/useLocalizedString.d.ts

@@ -0,0 +1,26 @@
+declare const Resources: {
+    "en-US": {
+        "button.pending": string;
+    };
+    "fr-CA": {
+        "button.pending": string;
+    };
+};
+declare function useLocalizedString(): LocalizedStringFormatter;
+/**
+ * LocalizedStringFormatter is not exported from react-aria, so we have to define it here.
+ * Without this, the build will fail with the following error:
+* packages/components build:
+ * src/intl/src/useLocalizedString.tsx(11,17): error TS2742:
+ * The inferred type of 'useLocalizedString' cannot be named without a reference to
+ * .pnpm/@internationalized+string@3.2.1/node_modules/@internationalized/string'.
+ * This is likely not portable. A type annotation is necessary.
+ *
+ * I  proposed a PR to export LocalizedStringFormatter from react-aria.
+ * https://github.com/adobe/react-spectrum/pull/6014
+ */
+interface LocalizedStringFormatter {
+    format: (key: keyof typeof Resources[keyof typeof Resources], variables?: Record<string, string | number | boolean>) => string;
+}
+
+export { useLocalizedString };

package/dist/intl/src/useLocalizedString.js

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

package/dist/layout/src/Flex.d.ts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { DivProps, ResponsiveProp } from '@hopper-ui/styled-system';
+
+interface FlexProps extends Omit<DivProps, "display" | "flexDirection" | "flexWrap" | "flexBasis" | "flexGrow" | "flexShrink"> {
+    /**
+     * The flex direction of the container. Can be row, column, row-reverse or column-reverse.
+     */
+    direction?: DivProps["flexDirection"];
+    /**
+     * Whether to wrap the flex items. The value can also be a boolean.
+     */
+    wrap?: DivProps["flexWrap"] | ResponsiveProp<boolean>;
+    /**
+     * An alias for the css flex-basis property.
+     */
+    basis?: DivProps["flexBasis"];
+    /**
+     * An alias for the css flex-grow property.
+     */
+    grow?: DivProps["flexGrow"];
+    /**
+     * An alias for the css flex-shrink property.
+     */
+    shrink?: DivProps["flexShrink"];
+    /**
+     * Whether to display the flex container as an inline element.
+     */
+    inline?: boolean;
+}
+/**
+ * The Flex component is used to create a flex container and provides some shortcuts for the flex properties.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _Flex: react.ForwardRefExoticComponent<Omit<FlexProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { _Flex as Flex, type FlexProps };

package/dist/layout/src/Flex.js

@@ -0,0 +1 @@
+export { _Flex as Flex } from '../../chunk-TVFC2MJ4.js';

package/dist/layout/src/Grid.d.ts

@@ -0,0 +1,77 @@
+import * as react from 'react';
+import { DivProps, UNSAFE_SizingValue, CssGrid } from '@hopper-ui/styled-system';
+
+interface GridProps extends Omit<DivProps, "display" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridAutoColumns" | "gridAutoFlow" | "UNSAFE_gridAutoRows" | "UNSAFE_gridTemplateColumns" | "UNSAFE_gridTemplateRows" | "UNSAFE_gridAutoColumns"> {
+    /**
+     * Whether or not the element generate line breaks before or after himself.
+     */
+    inline?: boolean;
+    /**
+     * An alias for the css grid-auto-rows property.
+     */
+    autoRows?: DivProps["gridAutoRows"];
+    /**
+     * An alias for the css grid-template-areas property.
+     */
+    areas?: DivProps["gridTemplateAreas"];
+    /**
+     * An alias for the css grid-template-columns property.
+     */
+    templateColumns?: DivProps["gridTemplateColumns"];
+    /**
+     * An alias for the css grid-template-rows property.
+     */
+    templateRows?: DivProps["gridTemplateRows"];
+    /**
+     * An alias for the css grid-auto-columns property.
+     */
+    autoColumns?: DivProps["gridAutoColumns"];
+    /**
+     * An alias for the css grid-auto-flow property.
+     */
+    autoFlow?: DivProps["gridAutoFlow"];
+    /**
+     * An alias for the css grid-auto-rows property.
+     */
+    UNSAFE_autoRows?: DivProps["UNSAFE_gridAutoRows"];
+    /**
+     * An alias for the css grid-template-columns property.
+     */
+    UNSAFE_templateColumns?: DivProps["UNSAFE_gridTemplateColumns"];
+    /**
+     * An alias for the css grid-template-rows property.
+     */
+    UNSAFE_templateRows?: DivProps["UNSAFE_gridTemplateRows"];
+    /**
+     * An alias for the css grid-auto-columns property.
+     */
+    UNSAFE_autoColumns?: DivProps["UNSAFE_gridAutoColumns"];
+}
+/**
+ * Can be used to make a repeating fragment of the columns or rows list.
+ * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat).
+ * @param count - The number of times to repeat the fragment.
+ * @param repeat - The fragment to repeat.
+ */
+declare function repeat(count: number | "auto-fill" | "auto-fit", repetition: UNSAFE_SizingValue | UNSAFE_SizingValue[]): CssGrid;
+/**
+ * Defines a size range greater than or equal to min and less than or equal to max.
+ * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax).
+ * @param min - The minimum size.
+ * @param max - The maximum size.
+ */
+declare function minmax(min: UNSAFE_SizingValue, max: UNSAFE_SizingValue): CssGrid;
+/**
+ * Clamps a given size to an available size.
+ * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content).
+ * @param dimension - The size to clamp.
+ */
+declare function fitContent(dimension: UNSAFE_SizingValue): CssGrid;
+/**
+ * The Grid component is used to create a grid container and provides some shortcuts for the grid properties.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _Grid: react.ForwardRefExoticComponent<Omit<GridProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { _Grid as Grid, type GridProps, fitContent, minmax, repeat };

package/dist/layout/src/Grid.js

@@ -0,0 +1,55 @@
+import { Div, getSizingValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/layout/src/Grid.tsx
+function Grid(props, ref) {
+  const {
+    autoRows,
+    areas,
+    templateColumns,
+    templateRows,
+    autoColumns,
+    autoFlow,
+    inline,
+    UNSAFE_autoRows,
+    UNSAFE_templateColumns,
+    UNSAFE_templateRows,
+    UNSAFE_autoColumns,
+    ...otherProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Div,
+    {
+      ref,
+      display: inline ? "inline-grid" : "grid",
+      gridAutoRows: autoRows,
+      gridTemplateAreas: areas,
+      gridTemplateColumns: templateColumns,
+      gridTemplateRows: templateRows,
+      gridAutoColumns: autoColumns,
+      gridAutoFlow: autoFlow,
+      UNSAFE_gridAutoRows: UNSAFE_autoRows,
+      UNSAFE_gridTemplateColumns: UNSAFE_templateColumns,
+      UNSAFE_gridTemplateRows: UNSAFE_templateRows,
+      UNSAFE_gridAutoColumns: UNSAFE_autoColumns,
+      ...otherProps
+    }
+  );
+}
+function repeat(count, repetition) {
+  return `repeat(${count}, ${Array.isArray(repetition) ? interpolateGridTemplateArray(repetition) : getSizingValue(repetition)})`;
+}
+function minmax(min, max) {
+  return `minmax(${getSizingValue(min)}, ${getSizingValue(max)})`;
+}
+function fitContent(dimension) {
+  return `fit-content(${getSizingValue(dimension)})`;
+}
+function interpolateGridTemplateArray(values) {
+  return values.map((x) => getSizingValue(x)).join(" ");
+}
+var _Grid = forwardRef(Grid);
+_Grid.displayName = "Inline";
+
+export { _Grid as Grid, fitContent, minmax, repeat };

package/dist/layout/src/Inline.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { FlexProps } from './Flex.js';
+import '@hopper-ui/styled-system';
+
+interface InlineProps extends Omit<FlexProps, "direction" | "alignItems" | "justifyContent"> {
+    /**
+     * Whether or not to reverse the order of the elements.
+     */
+    reverse?: boolean;
+    /**
+     * An alias for the css justify-content property.
+     */
+    alignX?: FlexProps["justifyContent"];
+    /**
+     * An alias for the css align-items property.
+     */
+    alignY?: FlexProps["alignItems"];
+}
+/**
+ * The Inline pattern is a layout primitive that can be used to stack elements in the horizontal direction and apply a space between them.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _Inline: react.ForwardRefExoticComponent<Omit<InlineProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { _Inline as Inline, type InlineProps };