[WIP] Fix esm build

packages/reshaped/package.json

@@ -41,6 +41,7 @@
 	"sideEffects": [
 		"*.css"
 	],
+	"type": "module",
 	"types": "./dist/index.d.ts",
 	"exports": {
 		".": {

packages/reshaped/src/Sandbox.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import Image from "@/components/Image";
-import View from "@/components/View";
-import Tabs from "./components/Tabs";
+import Image from "@/components/Image/index.js";
+import View from "@/components/View/index.js";
+import Tabs from "./components/Tabs.js";
 
 export default {
 	title: "Sandbox",

packages/reshaped/src/components/Accordion/Accordion.context.ts

@@ -2,7 +2,7 @@
 
 import React from "react";
 
-import * as T from "./Accordion.types";
+import * as T from "./Accordion.types.js";
 
 const AccordionContext = React.createContext<T.ContextProps>({
 	active: false,

packages/reshaped/src/components/Accordion/Accordion.tsx

@@ -1,6 +1,6 @@
-import * as T from "./Accordion.types";
-import AccordionControlled from "./AccordionControlled";
-import AccordionUncontrolled from "./AccordionUncontrolled";
+import * as T from "./Accordion.types.js";
+import AccordionControlled from "./AccordionControlled.js";
+import AccordionUncontrolled from "./AccordionUncontrolled.js";
 
 const Accordion: React.FC<T.Props> = (props) => {
 	const { active } = props;

packages/reshaped/src/components/Accordion/Accordion.types.ts

@@ -1,9 +1,9 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
 
-import type { IconProps } from "@/components/Icon";
-import type * as G from "@/types/global";
-import type { Attributes } from "@/types/global";
+import type { IconProps } from "@/components/Icon/index.js";
+import type * as G from "@/types/global.js";
+import type { Attributes } from "@/types/global.js";
 
 export type BaseProps = {
 	/** Expand / collapse icon size in units */

packages/reshaped/src/components/Accordion/AccordionContent.tsx

@@ -2,10 +2,10 @@
 
 import React from "react";
 
-import Expandable from "@/components/Expandable";
-import View from "@/components/View";
-import AccordionContext from "./Accordion.context";
-import type * as T from "./Accordion.types";
+import Expandable from "@/components/Expandable/index.js";
+import View from "@/components/View/index.js";
+import AccordionContext from "./Accordion.context.js";
+import type * as T from "./Accordion.types.js";
 
 const AccordionContent: React.FC<T.ContentProps> = (props) => {
 	const { children } = props;

packages/reshaped/src/components/Accordion/AccordionControlled.tsx

@@ -3,10 +3,10 @@
 import React from "react";
 import { classNames } from "@reshaped/utilities";
 
-import useElementId from "@/hooks/useElementId";
-import useHandlerRef from "@/hooks/useHandlerRef";
-import AccordionContext from "./Accordion.context";
-import * as T from "./Accordion.types";
+import useElementId from "@/hooks/useElementId.js";
+import useHandlerRef from "@/hooks/useHandlerRef.js";
+import AccordionContext from "./Accordion.context.js";
+import * as T from "./Accordion.types.js";
 
 const AccordionControlled: React.FC<T.ControlledProps> = (props) => {
 	const { children, onToggle, active, iconPosition, iconSize, gap, className, attributes } = props;

packages/reshaped/src/components/Accordion/AccordionTrigger.tsx

@@ -3,12 +3,12 @@
 import React from "react";
 import { classNames } from "@reshaped/utilities";
 
-import Actionable from "@/components/Actionable";
-import Icon from "@/components/Icon";
-import View from "@/components/View";
-import IconChevronDown from "@/icons/ChevronDown";
-import AccordionContext from "./Accordion.context";
-import * as T from "./Accordion.types";
+import Actionable from "@/components/Actionable/index.js";
+import Icon from "@/components/Icon/index.js";
+import View from "@/components/View/index.js";
+import IconChevronDown from "@/icons/ChevronDown.js";
+import AccordionContext from "./Accordion.context.js";
+import * as T from "./Accordion.types.js";
 import s from "./Accordion.module.css";
 
 const AccordionTrigger: React.FC<T.TriggerProps> = (props) => {

packages/reshaped/src/components/Accordion/AccordionUncontrolled.tsx

@@ -2,8 +2,8 @@
 
 import React from "react";
 
-import * as T from "./Accordion.types";
-import AccordionControlled from "./AccordionControlled";
+import * as T from "./Accordion.types.js";
+import AccordionControlled from "./AccordionControlled.js";
 
 const AccordionUncontrolled: React.FC<T.UncontrolledProps> = (props) => {
 	const { defaultActive, onToggle, ...controlledProps } = props;

packages/reshaped/src/components/Accordion/index.ts

@@ -1,6 +1,6 @@
-import Accordion from "./Accordion";
-import AccordionContent from "./AccordionContent";
-import AccordionTrigger from "./AccordionTrigger";
+import Accordion from "./Accordion.js";
+import AccordionContent from "./AccordionContent.js";
+import AccordionTrigger from "./AccordionTrigger.js";
 
 const AccordionRoot = Accordion as typeof Accordion & {
 	Trigger: typeof AccordionTrigger;
@@ -11,4 +11,4 @@ AccordionRoot.Trigger = AccordionTrigger;
 AccordionRoot.Content = AccordionContent;
 
 export default AccordionRoot;
-export type { Props as AccordionProps } from "./Accordion.types";
+export type { Props as AccordionProps } from "./Accordion.types.js";

packages/reshaped/src/components/Accordion/tests/Accordion.stories.tsx

@@ -1,11 +1,11 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, Mock, userEvent } from "storybook/test";
 
-import Accordion from "@/components/Accordion";
-import Button from "@/components/Button";
-import MenuItem from "@/components/MenuItem";
-import View from "@/components/View";
-import { Placeholder } from "@/utilities/storybook";
+import Accordion from "@/components/Accordion/index.js";
+import Button from "@/components/Button/index.js";
+import MenuItem from "@/components/MenuItem/index.js";
+import View from "@/components/View/index.js";
+import { Placeholder } from "@/utilities/storybook/index.js";
 
 export default {
 	title: "Utility components/Accordion",

packages/reshaped/src/components/Actionable/Actionable.tsx

@@ -3,7 +3,7 @@
 import React, { forwardRef } from "react";
 import { classNames, keys } from "@reshaped/utilities";
 
-import type * as T from "./Actionable.types";
+import type * as T from "./Actionable.types.js";
 import s from "./Actionable.module.css";
 
 const Actionable = forwardRef<T.Ref, T.Props>((props, ref) => {

packages/reshaped/src/components/Actionable/Actionable.types.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
 
-import type { Attributes as AttributesType } from "@/types/global";
+import type { Attributes as AttributesType } from "@/types/global.js";
 
 export type AttributesRef = React.RefObject<HTMLButtonElement | null>;
 type Attributes = AttributesType<"button"> &

packages/reshaped/src/components/Actionable/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./Actionable";
-export type { Props as ActionableProps, Ref as ActionableRef } from "./Actionable.types";
+export { default } from "./Actionable.js";
+export type { Props as ActionableProps, Ref as ActionableRef } from "./Actionable.types.js";

packages/reshaped/src/components/Actionable/tests/Actionable.stories.tsx

@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent } from "storybook/test";
 
-import Actionable from "@/components/Actionable";
-import Button from "@/components/Button";
-import View from "@/components/View";
-import { Example } from "@/utilities/storybook";
+import Actionable from "@/components/Actionable/index.js";
+import Button from "@/components/Button/index.js";
+import View from "@/components/View/index.js";
+import { Example } from "@/utilities/storybook/index.js";
 
 export default {
 	title: "Utility components/Actionable",

packages/reshaped/src/components/Alert/Alert.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import Icon from "@/components/Icon";
-import Text from "@/components/Text";
-import View from "@/components/View";
-import * as T from "./Alert.types";
+import Icon from "@/components/Icon/index.js";
+import Text from "@/components/Text/index.js";
+import View from "@/components/View/index.js";
+import * as T from "./Alert.types.js";
 import s from "./Alert.module.css";
 
 const Alert: React.FC<T.Props> = (props) => {

packages/reshaped/src/components/Alert/Alert.types.ts

@@ -1,9 +1,9 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
 
-import type { IconProps } from "@/components/Icon";
-import type * as G from "@/types/global";
-import type { Attributes } from "@/types/global";
+import type { IconProps } from "@/components/Icon/index.js";
+import type * as G from "@/types/global.js";
+import type { Attributes } from "@/types/global.js";
 
 export type Props = {
 	/** SVG component for the icon */

packages/reshaped/src/components/Alert/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./Alert";
-export type { Props as AlertProps } from "./Alert.types";
+export { default } from "./Alert.js";
+export type { Props as AlertProps } from "./Alert.types.js";

packages/reshaped/src/components/Alert/tests/Alert.stories.tsx

@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import Alert from "@/components/Alert";
-import Link from "@/components/Link";
-import { Example, Placeholder } from "@/utilities/storybook";
-import IconZap from "@/icons/Zap";
+import Alert from "@/components/Alert/index.js";
+import Link from "@/components/Link/index.js";
+import { Example, Placeholder } from "@/utilities/storybook/index.js";
+import IconZap from "@/icons/Zap.js";
 
 export default {
 	title: "Components/Alert",

packages/reshaped/src/components/Autocomplete/Autocomplete.tsx

@@ -2,16 +2,16 @@
 
 import React from "react";
 
-import DropdownMenu from "@/components/DropdownMenu";
-import type { MenuItemProps } from "@/components/MenuItem";
-import TextField from "@/components/TextField";
-import type { TextFieldProps } from "@/components/TextField";
-import useElementId from "@/hooks/useElementId";
-import useHandlerRef from "@/hooks/useHandlerRef";
-import useHotkeys from "@/hooks/useHotkeys";
-import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect";
-import * as keys from "@/constants/keys";
-import * as T from "./Autocomplete.types";
+import DropdownMenu from "@/components/DropdownMenu/index.js";
+import type { MenuItemProps } from "@/components/MenuItem/index.js";
+import TextField from "@/components/TextField/index.js";
+import type { TextFieldProps } from "@/components/TextField/index.js";
+import useElementId from "@/hooks/useElementId.js";
+import useHandlerRef from "@/hooks/useHandlerRef.js";
+import useHotkeys from "@/hooks/useHotkeys.js";
+import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js";
+import * as keys from "@/constants/keys.js";
+import * as T from "./Autocomplete.types.js";
 import s from "./Autocomplete.module.css";
 
 const AutocompleteContext = React.createContext({} as T.Context);

packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts

@@ -1,7 +1,7 @@
-import type { DropdownMenuInstance, DropdownMenuProps } from "@/components/DropdownMenu";
-import type { MenuItemProps } from "@/components/MenuItem";
-import type { TextFieldProps } from "@/components/TextField";
-import type * as G from "@/types/global";
+import type { DropdownMenuInstance, DropdownMenuProps } from "@/components/DropdownMenu/index.js";
+import type { MenuItemProps } from "@/components/MenuItem/index.js";
+import type { TextFieldProps } from "@/components/TextField/index.js";
+import type * as G from "@/types/global.js";
 
 type SelectArgs = {
 	/** Value that will be passed to the input on selection */

packages/reshaped/src/components/Autocomplete/index.ts

@@ -1,4 +1,4 @@
-import Autocomplete, { AutocompleteItem } from "./Autocomplete";
+import Autocomplete, { AutocompleteItem } from "./Autocomplete.js";
 
 const AutocompleteRoot = Autocomplete as typeof Autocomplete & {
 	Item: typeof AutocompleteItem;
@@ -10,4 +10,4 @@ export default AutocompleteRoot;
 export type {
 	Instance as AutocompleteInstance,
 	Props as AutocompleteProps,
-} from "./Autocomplete.types";
+} from "./Autocomplete.types.js";

packages/reshaped/src/components/Autocomplete/tests/Autocomplete.stories.tsx

@@ -2,12 +2,12 @@ import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { expect, fireEvent, fn, Mock, userEvent, waitFor, within } from "storybook/test";
 
-import Autocomplete from "@/components/Autocomplete";
-import Badge from "@/components/Badge";
-import FormControl from "@/components/FormControl";
-import useToggle from "@/hooks/useToggle";
-import { sleep } from "@/utilities/helpers";
-import { Example } from "@/utilities/storybook";
+import Autocomplete from "@/components/Autocomplete/index.js";
+import Badge from "@/components/Badge/index.js";
+import FormControl from "@/components/FormControl/index.js";
+import useToggle from "@/hooks/useToggle.js";
+import { sleep } from "@/utilities/helpers.js";
+import { Example } from "@/utilities/storybook/index.js";
 
 export default {
 	title: "Components/Autocomplete",

packages/reshaped/src/components/Avatar/Avatar.tsx

@@ -1,11 +1,11 @@
 import { classNames } from "@reshaped/utilities";
 
-import Icon from "@/components/Icon";
-import Image, { type ImageProps } from "@/components/Image";
-import View from "@/components/View";
-import { responsivePropDependency } from "@/utilities/props";
-import { resolveMixin } from "@/styles/mixin";
-import type * as T from "./Avatar.types";
+import Icon from "@/components/Icon/index.js";
+import Image, { type ImageProps } from "@/components/Image/index.js";
+import View from "@/components/View/index.js";
+import { responsivePropDependency } from "@/utilities/props.js";
+import { resolveMixin } from "@/styles/mixin.js";
+import type * as T from "./Avatar.types.js";
 import s from "./Avatar.module.css";
 
 const Avatar: React.FC<T.Props> = (props) => {

packages/reshaped/src/components/Avatar/Avatar.types.ts

@@ -1,8 +1,8 @@
 import type { ClassName } from "@reshaped/utilities";
 
-import type { IconProps } from "@/components/Icon";
-import type * as G from "@/types/global";
-import type { Attributes } from "@/types/global";
+import type { IconProps } from "@/components/Icon/index.js";
+import type * as G from "@/types/global.js";
+import type { Attributes } from "@/types/global.js";
 
 export type Props = {
 	/** Image URL */

packages/reshaped/src/components/Avatar/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./Avatar";
-export type { Props as AvatarProps } from "./Avatar.types";
+export { default } from "./Avatar.js";
+export type { Props as AvatarProps } from "./Avatar.types.js";

packages/reshaped/src/components/Avatar/tests/Avatar.stories.tsx

@@ -2,10 +2,10 @@ import { StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { expect, fn, Mock, waitFor } from "storybook/test";
 
-import Avatar from "@/components/Avatar";
-import View from "@/components/View";
-import { Example } from "@/utilities/storybook";
-import IconZap from "@/icons/Zap";
+import Avatar from "@/components/Avatar/index.js";
+import View from "@/components/View/index.js";
+import { Example } from "@/utilities/storybook/index.js";
+import IconZap from "@/icons/Zap.js";
 
 export default {
 	title: "Components/Avatar",

packages/reshaped/src/components/Badge/Badge.tsx

@@ -1,11 +1,14 @@
 import { forwardRef } from "react";
 import { classNames } from "@reshaped/utilities";
 
-import Actionable, { type ActionableProps, type ActionableRef } from "@/components/Actionable";
-import Icon from "@/components/Icon";
-import Text from "@/components/Text";
-import IconClose from "@/icons/Close";
-import type * as T from "./Badge.types";
+import Actionable, {
+	type ActionableProps,
+	type ActionableRef,
+} from "@/components/Actionable/index.js";
+import Icon from "@/components/Icon/index.js";
+import Text from "@/components/Text/index.js";
+import IconClose from "@/icons/Close.js";
+import type * as T from "./Badge.types.js";
 import s from "./Badge.module.css";
 
 const Badge = forwardRef<ActionableRef, T.Props>((props, ref) => {

packages/reshaped/src/components/Badge/Badge.types.ts

@@ -1,9 +1,9 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
 
-import type { ActionableProps } from "@/components/Actionable";
-import type { IconProps } from "@/components/Icon";
-import type { Attributes } from "@/types/global";
+import type { ActionableProps } from "@/components/Actionable/index.js";
+import type { IconProps } from "@/components/Icon/index.js";
+import type { Attributes } from "@/types/global.js";
 
 type BaseProps = {
 	/** Component color scheme

packages/reshaped/src/components/Badge/BadgeContainer.tsx

@@ -1,6 +1,6 @@
 import { classNames } from "@reshaped/utilities";
 
-import type * as T from "./Badge.types";
+import type * as T from "./Badge.types.js";
 import s from "./Badge.module.css";
 
 const BadgeContainer: React.FC<T.ContainerProps> = (props) => {