@hopper-ui/components 0.1.0 → 1.0.0

package/dist/buttons/src/Button.d.ts

@@ -1,35 +1,40 @@
 import * as react from 'react';
 import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
-import { ButtonProps as ButtonProps$1, PressEvent } from 'react-aria-components';
+import { RouterOptions } from '@react-types/shared';
+import { ButtonProps as ButtonProps$1 } from 'react-aria-components';
 
 declare const GlobalButtonCssSelector = "hop-Button";
 interface ButtonProps extends StyledComponentProps<ButtonProps$1> {
     /**
      * The visual style of the button.
+     * * @default "primary"
      */
-    variant?: "primary" | "secondary" | "tertiary" | "negative" | "upsell";
+    variant?: "primary" | "secondary" | "danger" | "upsell" | "ghost-primary" | "ghost-secondary" | "ghost-danger";
     /**
      * A button can vary in size.
+     * @default "md"
      */
     size?: ResponsiveProp<"sm" | "md">;
     /**
      * Whether or not the button takes up the width of its container.
      */
     fluid?: ResponsiveProp<boolean>;
+    /** A button can show a loading indicator.*/
     isLoading?: boolean;
-    /**
-     * This prop will be called when the button is clicked.
-     *
-     * The onClick prop is an alias for onPress and should not be used in conjunction with it. Use one or the other.
-     * onPress is the recommended prop to use for handling button clicks.
-     */
-    onClick?: ((e: PressEvent) => void);
+    /** A URL to link to. Setting this makes the component render an `a` tag instead of a `button` */
+    href?: string;
+    /** The target window for the link. */
+    target?: string;
+    /** The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). */
+    rel?: string;
+    /** Options for the configured client side router. */
+    routerOptions?: RouterOptions;
 }
 /**
  * Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
  *
  * [View Documentation](TODO)
  */
-declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
 
 export { _Button as Button, type ButtonProps, GlobalButtonCssSelector };

package/dist/buttons/src/Button.js

@@ -1,14 +1,18 @@
-export { _Button as Button, GlobalButtonCssSelector } from '../../chunk-WROQHGG5.js';
-import '../../chunk-7QUHQYCR.js';
-import '../../chunk-GXUPEV64.js';
-import '../../chunk-QIOYM2XJ.js';
-import '../../chunk-SEU4CGZD.js';
+export { _Button as Button, GlobalButtonCssSelector } from '../../chunk-HVRSS5RT.js';
+import '../../chunk-H5YTU3U7.js';
+import '../../chunk-BPM4ETTB.js';
+import '../../chunk-NH3IVMXB.js';
+import '../../chunk-WMTWFKKP.js';
+import '../../chunk-ZWU6DRRZ.js';
+import '../../chunk-DFUQTSEV.js';
+import '../../chunk-65JPI4FL.js';
 import '../../chunk-4ZYV2XLW.js';
-import '../../chunk-WRWNRVTG.js';
+import '../../chunk-M6UHXS6K.js';
+import '../../chunk-HXI3MEEK.js';
 import '../../chunk-OE5BLFZI.js';
-import '../../chunk-WMTWFKKP.js';
 import '../../chunk-M36KANKC.js';
 import '../../chunk-DHVVYSLB.js';
-import '../../chunk-XCKF6EU7.js';
-import '../../chunk-6BEVZRUL.js';
+import '../../chunk-IYITZANI.js';
+import '../../chunk-KVDXQMWI.js';
 import '../../chunk-HVKOIMMW.js';
+import '../../chunk-YSQDPG26.js';

package/dist/buttons/src/ButtonContext.d.ts

@@ -2,7 +2,11 @@ import { ButtonProps } from './Button.js';
 import * as react from 'react';
 import { ContextValue } from 'react-aria-components';
 import '@hopper-ui/styled-system';
+import '@react-types/shared';
 
-declare const ButtonContext: react.Context<ContextValue<ButtonProps, HTMLButtonElement>>;
+interface ButtonContextValue extends ButtonProps {
+    isPressed?: boolean;
+}
+declare const ButtonContext: react.Context<ContextValue<ButtonContextValue, HTMLElement>>;
 
-export { ButtonContext };
+export { ButtonContext, type ButtonContextValue };

package/dist/buttons/src/ButtonContext.js

@@ -1 +1,2 @@
 export { ButtonContext } from '../../chunk-WMTWFKKP.js';
+import '../../chunk-YSQDPG26.js';

package/dist/buttons/src/ButtonGroup.css

@@ -0,0 +1,38 @@
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/ButtonGroup.module.css/#css-module-data */
+.ButtonGroup-module__hop-ButtonGroup___xf1yy {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: var(--hop-space-inline-md);
+}
+.ButtonGroup-module__hop-ButtonGroup--horizontal___HN8si {
+  justify-content: center;
+}
+.ButtonGroup-module__hop-ButtonGroup--vertical___7-9By {
+  flex-direction: column;
+  gap: var(--hop-space-stack-md);
+  align-items: center;
+}
+.ButtonGroup-module__hop-ButtonGroup--start___0204P.ButtonGroup-module__hop-ButtonGroup--vertical___7-9By {
+  align-items: flex-start;
+}
+.ButtonGroup-module__hop-ButtonGroup--center___KLs5N.ButtonGroup-module__hop-ButtonGroup--vertical___7-9By {
+  align-items: center;
+}
+.ButtonGroup-module__hop-ButtonGroup--end___38Kh6.ButtonGroup-module__hop-ButtonGroup--vertical___7-9By {
+  align-items: flex-end;
+}
+.ButtonGroup-module__hop-ButtonGroup--start___0204P.ButtonGroup-module__hop-ButtonGroup--horizontal___HN8si {
+  justify-content: flex-start;
+}
+.ButtonGroup-module__hop-ButtonGroup--center___KLs5N.ButtonGroup-module__hop-ButtonGroup--horizontal___HN8si {
+  justify-content: center;
+}
+.ButtonGroup-module__hop-ButtonGroup--end___38Kh6.ButtonGroup-module__hop-ButtonGroup--horizontal___HN8si {
+  justify-content: flex-end;
+}
+.ButtonGroup-module__hop-ButtonGroup--wrap___fPCxb {
+  flex-wrap: wrap;
+}
+.ButtonGroup-module__hop-ButtonGroup--fluid___mrQvi {
+  inline-size: 100%;
+}

package/dist/buttons/src/ButtonGroup.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { Orientation } from 'react-aria';
+
+interface ButtonGroupProps extends StyledComponentProps<HTMLAttributes<HTMLDivElement>> {
+    /**
+   * The axis the ButtonGroup should align with.
+   * @default 'horizontal'
+   */
+    orientation?: ResponsiveProp<Orientation>;
+    /** Whether the Buttons in the ButtonGroup are all disabled. */
+    isDisabled?: boolean;
+    /** Whether the Buttons in the ButtonGroup are all fluid. */
+    fluid?: ResponsiveProp<boolean>;
+    /**
+     * The size of the buttons in the ButtonGroup.
+     * @default "md"
+     */
+    size?: ResponsiveProp<"sm" | "md">;
+    /**
+     * Whether elements are forced onto one line or can wrap onto multiple rows.
+     * @default true
+     */
+    wrap?: ResponsiveProp<boolean>;
+    /**
+   * The alignment of the buttons within the ButtonGroup.
+   * @default 'start'
+   */
+    align?: ResponsiveProp<"start" | "end" | "center">;
+}
+declare const GlobalButtonGroupCssSelector = "hop-ButtonGroup";
+/**
+ * ButtonGroup handles the spacing and orientation for a grouping of buttons whose actions are related to each other.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _ButtonGroup: react.ForwardRefExoticComponent<ButtonGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+export { _ButtonGroup as ButtonGroup, type ButtonGroupProps, GlobalButtonGroupCssSelector };

package/dist/buttons/src/ButtonGroup.js

@@ -0,0 +1,83 @@
+import { ButtonGroupContext } from '../../chunk-VJQ7M2BK.js';
+import { ButtonContext } from '../../chunk-WMTWFKKP.js';
+import { SlotProvider } from '../../chunk-M36KANKC.js';
+import { cssModule } from '../../chunk-KVDXQMWI.js';
+import '../../chunk-YSQDPG26.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { filterDOMProps } from '@react-aria/utils';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./ButtonGroup.module.css#css-module
+var ButtonGroup_module_default = { "hop-ButtonGroup": "ButtonGroup-module__hop-ButtonGroup___xf1yy", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___HN8si", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___7-9By", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___0204P", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___KLs5N", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___38Kh6", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___fPCxb", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___mrQvi" };
+var GlobalButtonGroupCssSelector = "hop-ButtonGroup";
+function ButtonGroup(props, ref) {
+  var _a, _b, _c, _d, _e;
+  [props, ref] = useContextProps(props, ref, ButtonGroupContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    children,
+    size: sizeProp,
+    fluid: fluidProp,
+    isDisabled = false,
+    className,
+    align: alignProp,
+    style: styleProp,
+    orientation: orientationProp,
+    wrap: wrapProp,
+    ...otherProps
+  } = ownProps;
+  const align = (_a = useResponsiveValue(alignProp)) != null ? _a : "start";
+  const size = (_b = useResponsiveValue(sizeProp)) != null ? _b : "md";
+  const fluid = (_c = useResponsiveValue(fluidProp)) != null ? _c : false;
+  const wrap = (_d = useResponsiveValue(wrapProp)) != null ? _d : true;
+  const orientation = (_e = useResponsiveValue(orientationProp)) != null ? _e : "horizontal";
+  const classNames = clsx(
+    className,
+    GlobalButtonGroupCssSelector,
+    cssModule(
+      ButtonGroup_module_default,
+      "hop-ButtonGroup",
+      size,
+      align,
+      fluid && "fluid",
+      wrap && "wrap",
+      orientation
+    ),
+    stylingProps.className
+  );
+  const style = {
+    ...stylingProps.style,
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...filterDOMProps(otherProps, { labelable: true }),
+      ref,
+      className: classNames,
+      style,
+      slot: props.slot || void 0,
+      children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [[
+            ButtonContext,
+            {
+              size,
+              isDisabled,
+              fluid
+            }
+          ]],
+          children
+        }
+      )
+    }
+  );
+}
+var _ButtonGroup = forwardRef(ButtonGroup);
+_ButtonGroup.displayName = "ButtonGroup";
+
+export { _ButtonGroup as ButtonGroup, GlobalButtonGroupCssSelector };

package/dist/buttons/src/ButtonGroupContext.d.ts

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

package/dist/buttons/src/ButtonGroupContext.js

@@ -0,0 +1,2 @@
+export { ButtonGroupContext } from '../../chunk-VJQ7M2BK.js';
+import '../../chunk-YSQDPG26.js';