@hopper-ui/components 0.0.10 → 0.1.0

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 };

package/dist/layout/src/Inline.js

@@ -0,0 +1,30 @@
+import { _Flex } from '../../chunk-TVFC2MJ4.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function Inline(props, ref) {
+  const {
+    alignX,
+    alignY = "center",
+    gap = "inline-md",
+    wrap = true,
+    reverse,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    _Flex,
+    {
+      ref,
+      alignItems: alignY,
+      justifyContent: alignX,
+      direction: reverse ? "row-reverse" : "row",
+      gap,
+      wrap,
+      ...rest
+    }
+  );
+}
+var _Inline = forwardRef(Inline);
+_Inline.displayName = "Inline";
+
+export { _Inline as Inline };

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

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

package/dist/layout/src/Stack.js

@@ -0,0 +1,28 @@
+import { _Flex } from '../../chunk-TVFC2MJ4.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function Stack(props, ref) {
+  const {
+    reverse,
+    alignX,
+    alignY,
+    gap = "stack-md",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    _Flex,
+    {
+      ref,
+      alignItems: alignX,
+      justifyContent: alignY,
+      direction: reverse ? "column-reverse" : "column",
+      gap,
+      ...rest
+    }
+  );
+}
+var _Stack = forwardRef(Stack);
+_Stack.displayName = "Stack";
+
+export { _Stack as Stack };

package/dist/utils/src/SlotProvider.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+import { Provider } from 'react-aria-components';
+
+/**
+ * In complex components, you may need to provide many contexts. The SlotProvider component is a utility that makes it
+ * easier to provide multiple React contexts without manually nesting them.
+ *  This can be achieved by passing pairs of contexts and values as an array to the values prop.
+ *
+ * [View Documentation](TODO)
+ */
+declare const SlotProvider: typeof Provider;
+type SlotProviderProps = ComponentProps<typeof SlotProvider>;
+
+export { SlotProvider, type SlotProviderProps };

package/dist/utils/src/SlotProvider.js

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

package/dist/utils/src/compose-classname-render-props.d.ts

@@ -0,0 +1,9 @@
+import { ClassValue } from 'clsx';
+
+/**
+ * Composes classnames for render props in React components using cslx.
+ * Allows combining a base classname, render prop function, and additional classes.
+ */
+declare function composeClassnameRenderProps<T>(className: string | undefined | ((renderProps: T) => string), ...classes: ClassValue[]): (renderProps: T) => string;
+
+export { composeClassnameRenderProps };

package/dist/utils/src/compose-classname-render-props.js

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

package/dist/utils/src/css-module.d.ts

@@ -0,0 +1,15 @@
+import { ClassValue } from 'clsx';
+
+/**
+ * Generates CSS module classnames for a given component with modifiers.
+ * Utilizes the provided CSS modules object and component name to create classnames.
+ * @param cssModules - The CSS modules object to use for classname lookups.
+ * @example
+ * const result = cssModule(styles, 'hop-button', 'lg', 'primary');
+ * // result = "hop-button--lg hop-button--primary"
+ */
+declare function cssModule(cssModules: {
+    [key: string]: string;
+}, componentName: string, ...modifiers: ClassValue[]): string;
+
+export { cssModule };

package/dist/utils/src/css-module.js

@@ -0,0 +1 @@
+export { cssModule } from '../../chunk-6BEVZRUL.js';

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

@@ -0,0 +1,11 @@
+export { cssModule } from './css-module.js';
+export { composeClassnameRenderProps } from './compose-classname-render-props.js';
+export { Size, SizeAdapter } from './size-adapter.js';
+export { BaseComponentProps, DOMProps, RenderProps, StyleProps, StyleRenderProps } from './types.js';
+export { isTextOnlyChildren } from './is-text-only-children.js';
+export { SlotProvider, SlotProviderProps } from './SlotProvider.js';
+import 'clsx';
+import '@hopper-ui/styled-system';
+import 'react';
+import '@react-types/shared';
+import 'react-aria-components';

package/dist/utils/src/index.js

@@ -0,0 +1,6 @@
+import '../../chunk-D57ZIX5W.js';
+import '../../chunk-SNIF7MEM.js';
+export { isTextOnlyChildren } from '../../chunk-7QUHQYCR.js';
+export { composeClassnameRenderProps } from '../../chunk-SEU4CGZD.js';
+export { SlotProvider } from '../../chunk-M36KANKC.js';
+export { cssModule } from '../../chunk-6BEVZRUL.js';

package/dist/utils/src/is-text-only-children.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+/**
+ * Determines whether the provided React children consist only of text content.
+ * This function unwraps children wrapped in React Fragments.
+ */
+declare function isTextOnlyChildren(children: ReactNode): boolean;
+
+export { isTextOnlyChildren };

package/dist/utils/src/is-text-only-children.js

@@ -0,0 +1 @@
+export { isTextOnlyChildren } from '../../chunk-7QUHQYCR.js';

package/dist/utils/src/size-adapter.d.ts

@@ -0,0 +1,20 @@
+import { ResponsiveProp } from '@hopper-ui/styled-system';
+
+/**
+ * Represents possible sizes for components.
+ */
+type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "inherit";
+type ExtractPossibleSizes<T> = T extends ResponsiveProp<infer U> ? NonNullable<U> : never;
+type SafeExtract<T> = ExtractPossibleSizes<T> extends Size ? ExtractPossibleSizes<T> : never;
+/**
+ *  Represents a mapping between sizes of type A and sizes of type B.
+ *  @example
+ *  const SpinnerToLabelSizeAdapter: SizeAdapter<SpinnerProps["size"], LabelProps["size"]> = {
+ *      sm: "xs",
+ *      md: "sm",
+ *      lg: "md"
+ *  };
+ */
+type SizeAdapter<A, B> = Record<SafeExtract<A>, SafeExtract<B>>;
+
+export type { Size, SizeAdapter };

package/dist/utils/src/size-adapter.js

@@ -0,0 +1 @@
+import '../../chunk-D57ZIX5W.js';

package/dist/utils/src/types.d.ts

@@ -0,0 +1,31 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DOMProps as DOMProps$1, AriaLabelingProps } from '@react-types/shared';
+import { SlotProps } from 'react-aria-components';
+
+/**
+ * Taken from https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/utils.tsx
+ */
+interface StyleProps {
+    /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
+    className?: string;
+    /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. */
+    style?: CSSProperties;
+}
+interface DOMProps extends StyleProps, DOMProps$1 {
+    /** The children of the component. */
+    children?: ReactNode;
+}
+interface StyleRenderProps<T> {
+    /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
+    className?: string | ((values: T) => string);
+    /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. */
+    style?: CSSProperties | ((values: T) => CSSProperties);
+}
+interface RenderProps<T> extends StyleRenderProps<T> {
+    /** The children of the component. A function may be provided to alter the children based on component state. */
+    children?: ReactNode | ((values: T) => ReactNode);
+}
+interface BaseComponentProps extends DOMProps, AriaLabelingProps, SlotProps {
+}
+
+export type { BaseComponentProps, DOMProps, RenderProps, StyleProps, StyleRenderProps };

package/dist/utils/src/types.js

@@ -0,0 +1 @@
+import '../../chunk-SNIF7MEM.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hopper-ui/components",
   "author": "Workleap",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "description": "The components package.",
   "license": "Apache-2.0",
   "repository": {
@@ -33,10 +33,14 @@
   ],
   "peerDependencies": {
     "react": "*",
-    "react-dom": "*"
+    "react-dom": "*",
+    "@hopper-ui/styled-system": "*",
+    "react-aria-components": "^1.1.0",
+    "react-aria": "^3.32.0"
   },
   "dependencies": {
-    "@hopper-ui/styled-system": "0.2.8"
+    "clsx": "^2.1.0",
+    "@hopper-ui/icons": "1.5.0"
   },
   "devDependencies": {
     "@swc/core": "1.3.106",
@@ -44,6 +48,7 @@
     "@swc/jest": "0.2.31",
     "@testing-library/jest-dom": "6.3.0",
     "@testing-library/react": "14.1.2",
+    "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.11",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
@@ -52,14 +57,18 @@
     "@workleap/swc-configs": "2.1.2",
     "@workleap/tsup-configs": "3.0.1",
     "@workleap/typescript-configs": "3.0.2",
+    "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "react": "18.2.0",
+    "react-aria": "3.32.1",
+    "react-aria-components": "1.1.0",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
     "ts-jest": "29.1.2",
     "tsup": "8.0.1",
-    "typescript": "5.3.3"
+    "typescript": "5.3.3",
+    "@hopper-ui/styled-system": "1.0.0"
   },
   "scripts": {
     "dev": "tsup --config ./tsup.dev.ts",

package/dist/HopperProvider.d.ts

@@ -1,13 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { StyledSystemProviderProps } from '@hopper-ui/styled-system';
-
-type HopperProviderProps = StyledSystemProviderProps;
-/**
- * HopperProvider is required to be rendered at the root of your application. It is responsible for:
- * - Adding CSS variables to the document
- * - Managing color scheme (light, dark, auto)
- * - Optionally adding body styles to the document
- */
-declare function HopperProvider({ children, withBodyStyle, colorScheme, withCssVariables, ...rest }: HopperProviderProps): react_jsx_runtime.JSX.Element;
-
-export { HopperProvider, type HopperProviderProps };

package/dist/HopperProvider.js

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

package/dist/chunk-LBJUDVVS.js

@@ -1,9 +0,0 @@
-import { StyledSystemProvider } from '@hopper-ui/styled-system';
-import { jsx } from 'react/jsx-runtime';
-
-// src/HopperProvider/src/HopperProvider.tsx
-function HopperProvider({ children, withBodyStyle = false, colorScheme = "light", withCssVariables = true, ...rest }) {
-  return /* @__PURE__ */ jsx(StyledSystemProvider, { withBodyStyle, colorScheme, withCssVariables, ...rest, children });
-}
-
-export { HopperProvider };

package/dist/index.d.ts

@@ -1,3 +0,0 @@
-export { HopperProvider, HopperProviderProps } from './HopperProvider.js';
-import 'react/jsx-runtime';
-import '@hopper-ui/styled-system';

package/dist/index.js

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