diff --git a/packages/reshaped/package.json b/packages/reshaped/package.json index c69ad96fa..a72b7f2fd 100644 --- a/packages/reshaped/package.json +++ b/packages/reshaped/package.json @@ -41,6 +41,7 @@ "sideEffects": [ "*.css" ], + "type": "module", "types": "./dist/index.d.ts", "exports": { ".": { diff --git a/packages/reshaped/src/Sandbox.stories.tsx b/packages/reshaped/src/Sandbox.stories.tsx index 8971c8e3b..c0d1594d5 100644 --- a/packages/reshaped/src/Sandbox.stories.tsx +++ b/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", diff --git a/packages/reshaped/src/components/Accordion/Accordion.context.ts b/packages/reshaped/src/components/Accordion/Accordion.context.ts index d39ba5323..28980b080 100644 --- a/packages/reshaped/src/components/Accordion/Accordion.context.ts +++ b/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({ active: false, diff --git a/packages/reshaped/src/components/Accordion/Accordion.tsx b/packages/reshaped/src/components/Accordion/Accordion.tsx index 1cc344a43..c5faed9cd 100644 --- a/packages/reshaped/src/components/Accordion/Accordion.tsx +++ b/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 = (props) => { const { active } = props; diff --git a/packages/reshaped/src/components/Accordion/Accordion.types.ts b/packages/reshaped/src/components/Accordion/Accordion.types.ts index 024467346..1152cdba8 100644 --- a/packages/reshaped/src/components/Accordion/Accordion.types.ts +++ b/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 */ diff --git a/packages/reshaped/src/components/Accordion/AccordionContent.tsx b/packages/reshaped/src/components/Accordion/AccordionContent.tsx index f2a2127c0..85287352e 100644 --- a/packages/reshaped/src/components/Accordion/AccordionContent.tsx +++ b/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 = (props) => { const { children } = props; diff --git a/packages/reshaped/src/components/Accordion/AccordionControlled.tsx b/packages/reshaped/src/components/Accordion/AccordionControlled.tsx index f5e34972f..2d2e2709c 100644 --- a/packages/reshaped/src/components/Accordion/AccordionControlled.tsx +++ b/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 = (props) => { const { children, onToggle, active, iconPosition, iconSize, gap, className, attributes } = props; diff --git a/packages/reshaped/src/components/Accordion/AccordionTrigger.tsx b/packages/reshaped/src/components/Accordion/AccordionTrigger.tsx index 299163914..a78ec19c1 100644 --- a/packages/reshaped/src/components/Accordion/AccordionTrigger.tsx +++ b/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 = (props) => { diff --git a/packages/reshaped/src/components/Accordion/AccordionUncontrolled.tsx b/packages/reshaped/src/components/Accordion/AccordionUncontrolled.tsx index 38ff8a746..8c1efbaa6 100644 --- a/packages/reshaped/src/components/Accordion/AccordionUncontrolled.tsx +++ b/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 = (props) => { const { defaultActive, onToggle, ...controlledProps } = props; diff --git a/packages/reshaped/src/components/Accordion/index.ts b/packages/reshaped/src/components/Accordion/index.ts index c38d689e4..e2824a1f0 100644 --- a/packages/reshaped/src/components/Accordion/index.ts +++ b/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"; diff --git a/packages/reshaped/src/components/Accordion/tests/Accordion.stories.tsx b/packages/reshaped/src/components/Accordion/tests/Accordion.stories.tsx index 55475652c..4040256bc 100644 --- a/packages/reshaped/src/components/Accordion/tests/Accordion.stories.tsx +++ b/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", diff --git a/packages/reshaped/src/components/Actionable/Actionable.tsx b/packages/reshaped/src/components/Actionable/Actionable.tsx index 577a441a4..065d3e227 100644 --- a/packages/reshaped/src/components/Actionable/Actionable.tsx +++ b/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((props, ref) => { diff --git a/packages/reshaped/src/components/Actionable/Actionable.types.ts b/packages/reshaped/src/components/Actionable/Actionable.types.ts index 9d380b71f..3a9a30bd0 100644 --- a/packages/reshaped/src/components/Actionable/Actionable.types.ts +++ b/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; type Attributes = AttributesType<"button"> & diff --git a/packages/reshaped/src/components/Actionable/index.ts b/packages/reshaped/src/components/Actionable/index.ts index 9b9cbb24c..b9908e698 100644 --- a/packages/reshaped/src/components/Actionable/index.ts +++ b/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"; diff --git a/packages/reshaped/src/components/Actionable/tests/Actionable.stories.tsx b/packages/reshaped/src/components/Actionable/tests/Actionable.stories.tsx index e555aaa24..52f8d7fb0 100644 --- a/packages/reshaped/src/components/Actionable/tests/Actionable.stories.tsx +++ b/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", diff --git a/packages/reshaped/src/components/Alert/Alert.tsx b/packages/reshaped/src/components/Alert/Alert.tsx index 01afbd821..0a942b97c 100644 --- a/packages/reshaped/src/components/Alert/Alert.tsx +++ b/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 = (props) => { diff --git a/packages/reshaped/src/components/Alert/Alert.types.ts b/packages/reshaped/src/components/Alert/Alert.types.ts index 2889e3eaf..b8accd115 100644 --- a/packages/reshaped/src/components/Alert/Alert.types.ts +++ b/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 */ diff --git a/packages/reshaped/src/components/Alert/index.ts b/packages/reshaped/src/components/Alert/index.ts index 2d7353a31..194cbb0ac 100644 --- a/packages/reshaped/src/components/Alert/index.ts +++ b/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"; diff --git a/packages/reshaped/src/components/Alert/tests/Alert.stories.tsx b/packages/reshaped/src/components/Alert/tests/Alert.stories.tsx index b60e38e3d..64dec754b 100644 --- a/packages/reshaped/src/components/Alert/tests/Alert.stories.tsx +++ b/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", diff --git a/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx b/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx index 740e2950f..c2947abb7 100644 --- a/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx +++ b/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); diff --git a/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts b/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts index 5214abed6..2c4cc45a2 100644 --- a/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts +++ b/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 */ diff --git a/packages/reshaped/src/components/Autocomplete/index.ts b/packages/reshaped/src/components/Autocomplete/index.ts index cdad7df2b..e9f952167 100644 --- a/packages/reshaped/src/components/Autocomplete/index.ts +++ b/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"; diff --git a/packages/reshaped/src/components/Autocomplete/tests/Autocomplete.stories.tsx b/packages/reshaped/src/components/Autocomplete/tests/Autocomplete.stories.tsx index 57f3d7399..f30303c5f 100644 --- a/packages/reshaped/src/components/Autocomplete/tests/Autocomplete.stories.tsx +++ b/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", diff --git a/packages/reshaped/src/components/Avatar/Avatar.tsx b/packages/reshaped/src/components/Avatar/Avatar.tsx index e8a1b0236..856f76feb 100644 --- a/packages/reshaped/src/components/Avatar/Avatar.tsx +++ b/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 = (props) => { diff --git a/packages/reshaped/src/components/Avatar/Avatar.types.ts b/packages/reshaped/src/components/Avatar/Avatar.types.ts index 980b6a6d9..fc0768ef9 100644 --- a/packages/reshaped/src/components/Avatar/Avatar.types.ts +++ b/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 */ diff --git a/packages/reshaped/src/components/Avatar/index.ts b/packages/reshaped/src/components/Avatar/index.ts index aac8afd10..8d224fdbc 100644 --- a/packages/reshaped/src/components/Avatar/index.ts +++ b/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"; diff --git a/packages/reshaped/src/components/Avatar/tests/Avatar.stories.tsx b/packages/reshaped/src/components/Avatar/tests/Avatar.stories.tsx index dbcc88ac9..d5a923e89 100644 --- a/packages/reshaped/src/components/Avatar/tests/Avatar.stories.tsx +++ b/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", diff --git a/packages/reshaped/src/components/Badge/Badge.tsx b/packages/reshaped/src/components/Badge/Badge.tsx index 731bb407c..873a0ee28 100644 --- a/packages/reshaped/src/components/Badge/Badge.tsx +++ b/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((props, ref) => { diff --git a/packages/reshaped/src/components/Badge/Badge.types.ts b/packages/reshaped/src/components/Badge/Badge.types.ts index 69ae39405..1490cf188 100644 --- a/packages/reshaped/src/components/Badge/Badge.types.ts +++ b/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 diff --git a/packages/reshaped/src/components/Badge/BadgeContainer.tsx b/packages/reshaped/src/components/Badge/BadgeContainer.tsx index f5f5543f4..b543c3812 100644 --- a/packages/reshaped/src/components/Badge/BadgeContainer.tsx +++ b/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 = (props) => { diff --git a/packages/reshaped/src/components/Badge/index.ts b/packages/reshaped/src/components/Badge/index.ts index 996add0ab..0f8317c2e 100644 --- a/packages/reshaped/src/components/Badge/index.ts +++ b/packages/reshaped/src/components/Badge/index.ts @@ -1,5 +1,5 @@ -import Badge from "./Badge"; -import BadgeContainer from "./BadgeContainer"; +import Badge from "./Badge.js"; +import BadgeContainer from "./BadgeContainer.js"; const BadgeRoot = Badge as typeof Badge & { Container: typeof BadgeContainer; @@ -8,4 +8,4 @@ const BadgeRoot = Badge as typeof Badge & { BadgeRoot.Container = BadgeContainer; export default BadgeRoot; -export type { Props as BadgeProps } from "./Badge.types"; +export type { Props as BadgeProps } from "./Badge.types.js"; diff --git a/packages/reshaped/src/components/Badge/tests/Badge.stories.tsx b/packages/reshaped/src/components/Badge/tests/Badge.stories.tsx index 8a8454cc1..408d9e7e7 100644 --- a/packages/reshaped/src/components/Badge/tests/Badge.stories.tsx +++ b/packages/reshaped/src/components/Badge/tests/Badge.stories.tsx @@ -2,14 +2,14 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fn, userEvent } from "storybook/test"; -import Avatar from "@/components/Avatar"; -import Badge from "@/components/Badge"; -import Button from "@/components/Button"; -import Icon from "@/components/Icon"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; -import IconCheckmark from "@/icons/Checkmark"; -import IconPlus from "@/icons/Plus"; +import Avatar from "@/components/Avatar/index.js"; +import Badge from "@/components/Badge/index.js"; +import Button from "@/components/Button/index.js"; +import Icon from "@/components/Icon/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; +import IconCheckmark from "@/icons/Checkmark.js"; +import IconPlus from "@/icons/Plus.js"; export default { title: "Components/Badge", diff --git a/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx index d28e775f8..85a1e8dda 100644 --- a/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -3,13 +3,13 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import Button from "@/components/Button"; -import Icon from "@/components/Icon"; -import Text from "@/components/Text"; -import View from "@/components/View"; -import IconChevronRight from "@/icons/ChevronRight"; -import IconDotsHorizontal from "@/icons/DotsHorizontal"; -import * as T from "./Breadcrumbs.types"; +import Button from "@/components/Button/index.js"; +import Icon from "@/components/Icon/index.js"; +import Text from "@/components/Text/index.js"; +import View from "@/components/View/index.js"; +import IconChevronRight from "@/icons/ChevronRight.js"; +import IconDotsHorizontal from "@/icons/DotsHorizontal.js"; +import * as T from "./Breadcrumbs.types.js"; const Breadcrumbs: React.FC = (props) => { const { diff --git a/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.types.ts b/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.types.ts index b187a07bc..df7c165e3 100644 --- a/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.types.ts +++ b/packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.types.ts @@ -1,8 +1,8 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { LinkProps } from "@/components/Link"; -import type { Attributes } from "@/types/global"; +import type { LinkProps } from "@/components/Link/index.js"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Node for inserting children to position items */ diff --git a/packages/reshaped/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/reshaped/src/components/Breadcrumbs/BreadcrumbsItem.tsx index d51fa2563..66d924dbd 100644 --- a/packages/reshaped/src/components/Breadcrumbs/BreadcrumbsItem.tsx +++ b/packages/reshaped/src/components/Breadcrumbs/BreadcrumbsItem.tsx @@ -1,6 +1,6 @@ -import Link from "@/components/Link"; -import Text from "@/components/Text"; -import type * as T from "./Breadcrumbs.types"; +import Link from "@/components/Link/index.js"; +import Text from "@/components/Text/index.js"; +import type * as T from "./Breadcrumbs.types.js"; const BreadcrumbsItem: React.FC = (props) => { const { children, onClick, href, icon, disabled } = props; diff --git a/packages/reshaped/src/components/Breadcrumbs/index.ts b/packages/reshaped/src/components/Breadcrumbs/index.ts index d6ac598e2..09830041c 100644 --- a/packages/reshaped/src/components/Breadcrumbs/index.ts +++ b/packages/reshaped/src/components/Breadcrumbs/index.ts @@ -1,5 +1,5 @@ -import Breadcrumbs from "./Breadcrumbs"; -import BreadcrumbsItem from "./BreadcrumbsItem"; +import Breadcrumbs from "./Breadcrumbs.js"; +import BreadcrumbsItem from "./BreadcrumbsItem.js"; const BreadcrumbsRoot = Breadcrumbs as typeof Breadcrumbs & { Item: typeof BreadcrumbsItem; @@ -8,4 +8,4 @@ const BreadcrumbsRoot = Breadcrumbs as typeof Breadcrumbs & { BreadcrumbsRoot.Item = BreadcrumbsItem; export default BreadcrumbsRoot; -export type { Props as BreadcrumbsProps } from "./Breadcrumbs.types"; +export type { Props as BreadcrumbsProps } from "./Breadcrumbs.types.js"; diff --git a/packages/reshaped/src/components/Breadcrumbs/tests/Breadcrumbs.stories.tsx b/packages/reshaped/src/components/Breadcrumbs/tests/Breadcrumbs.stories.tsx index 96dfddef7..846c0cdb7 100644 --- a/packages/reshaped/src/components/Breadcrumbs/tests/Breadcrumbs.stories.tsx +++ b/packages/reshaped/src/components/Breadcrumbs/tests/Breadcrumbs.stories.tsx @@ -1,10 +1,10 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import Badge from "@/components/Badge"; -import Breadcrumbs from "@/components/Breadcrumbs"; -import { Example } from "@/utilities/storybook"; -import IconZap from "@/icons/Zap"; +import Badge from "@/components/Badge/index.js"; +import Breadcrumbs from "@/components/Breadcrumbs/index.js"; +import { Example } from "@/utilities/storybook/index.js"; +import IconZap from "@/icons/Zap.js"; export default { title: "Components/Breadcrumbs", diff --git a/packages/reshaped/src/components/Button/Button.tsx b/packages/reshaped/src/components/Button/Button.tsx index b5ca3ef1a..a6c9da287 100644 --- a/packages/reshaped/src/components/Button/Button.tsx +++ b/packages/reshaped/src/components/Button/Button.tsx @@ -2,11 +2,11 @@ import { forwardRef } from "react"; import React from "react"; import { classNames } from "@reshaped/utilities"; -import Actionable, { type ActionableRef } from "@/components/Actionable"; -import Icon from "@/components/Icon"; -import Loader from "@/components/Loader"; -import { responsiveClassNames, responsivePropDependency } from "@/utilities/props"; -import type * as T from "./Button.types"; +import Actionable, { type ActionableRef } from "@/components/Actionable/index.js"; +import Icon from "@/components/Icon/index.js"; +import Loader from "@/components/Loader/index.js"; +import { responsiveClassNames, responsivePropDependency } from "@/utilities/props.js"; +import type * as T from "./Button.types.js"; import s from "./Button.module.css"; const Button = forwardRef((props, ref) => { diff --git a/packages/reshaped/src/components/Button/Button.types.ts b/packages/reshaped/src/components/Button/Button.types.ts index bfc153bdd..86f96e156 100644 --- a/packages/reshaped/src/components/Button/Button.types.ts +++ b/packages/reshaped/src/components/Button/Button.types.ts @@ -1,10 +1,10 @@ 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 * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type { ActionableProps } from "@/components/Actionable/index.js"; +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 Size = "xlarge" | "large" | "medium" | "small"; @@ -60,4 +60,4 @@ export type GroupProps = { attributes?: Attributes<"div">; }; -export type { AlignerProps } from "@/components/_private/Aligner"; +export type { AlignerProps } from "@/components/_private/Aligner/index.js"; diff --git a/packages/reshaped/src/components/Button/ButtonAligner.tsx b/packages/reshaped/src/components/Button/ButtonAligner.tsx index 824391f19..b0ab9cfdb 100644 --- a/packages/reshaped/src/components/Button/ButtonAligner.tsx +++ b/packages/reshaped/src/components/Button/ButtonAligner.tsx @@ -1,5 +1,5 @@ -import Aligner from "@/components/_private/Aligner"; -import type * as T from "./Button.types"; +import Aligner from "@/components/_private/Aligner/index.js"; +import type * as T from "./Button.types.js"; import s from "./Button.module.css"; const ButtonAligner: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Button/ButtonGroup.tsx b/packages/reshaped/src/components/Button/ButtonGroup.tsx index 44d440e5e..5e6acce94 100644 --- a/packages/reshaped/src/components/Button/ButtonGroup.tsx +++ b/packages/reshaped/src/components/Button/ButtonGroup.tsx @@ -1,6 +1,6 @@ import { classNames } from "@reshaped/utilities"; -import type * as T from "./Button.types"; +import type * as T from "./Button.types.js"; import s from "./Button.module.css"; const ButtonGroup: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Button/index.ts b/packages/reshaped/src/components/Button/index.ts index 00d9a20dc..77e83ac8e 100644 --- a/packages/reshaped/src/components/Button/index.ts +++ b/packages/reshaped/src/components/Button/index.ts @@ -1,6 +1,6 @@ -import Button from "./Button"; -import ButtonAligner from "./ButtonAligner"; -import ButtonGroup from "./ButtonGroup"; +import Button from "./Button.js"; +import ButtonAligner from "./ButtonAligner.js"; +import ButtonGroup from "./ButtonGroup.js"; const ButtonRoot = Button as typeof Button & { Aligner: typeof ButtonAligner; @@ -15,4 +15,4 @@ export type { AlignerProps as ButtonAlignerProps, GroupProps as ButtonGroupProps, Props as ButtonProps, -} from "./Button.types"; +} from "./Button.types.js"; diff --git a/packages/reshaped/src/components/Button/tests/Button.stories.tsx b/packages/reshaped/src/components/Button/tests/Button.stories.tsx index cc69e0276..228b696ee 100644 --- a/packages/reshaped/src/components/Button/tests/Button.stories.tsx +++ b/packages/reshaped/src/components/Button/tests/Button.stories.tsx @@ -1,15 +1,15 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import Avatar from "@/components/Avatar"; -import Badge from "@/components/Badge"; -import Button from "@/components/Button"; -import Image from "@/components/Image"; -import Text from "@/components/Text"; -import View from "@/components/View"; -import { Example, Placeholder } from "@/utilities/storybook"; -import IconPlus from "@/icons/Plus"; -import IconZap from "@/icons/Zap"; +import Avatar from "@/components/Avatar/index.js"; +import Badge from "@/components/Badge/index.js"; +import Button from "@/components/Button/index.js"; +import Image from "@/components/Image/index.js"; +import Text from "@/components/Text/index.js"; +import View from "@/components/View/index.js"; +import { Example, Placeholder } from "@/utilities/storybook/index.js"; +import IconPlus from "@/icons/Plus.js"; +import IconZap from "@/icons/Zap.js"; export default { title: "Components/Button", diff --git a/packages/reshaped/src/components/Calendar/Calendar.tsx b/packages/reshaped/src/components/Calendar/Calendar.tsx index b3cc741d8..c8c3c7114 100644 --- a/packages/reshaped/src/components/Calendar/Calendar.tsx +++ b/packages/reshaped/src/components/Calendar/Calendar.tsx @@ -1,6 +1,6 @@ -import type * as T from "./Calendar.types"; -import CalendarControlled from "./CalendarControlled"; -import CalendarUncontrolled from "./CalendarUncontrolled"; +import type * as T from "./Calendar.types.js"; +import CalendarControlled from "./CalendarControlled.js"; +import CalendarUncontrolled from "./CalendarUncontrolled.js"; const Calendar: React.FC = (props) => { if (props.value !== undefined) return ; diff --git a/packages/reshaped/src/components/Calendar/Calendar.utils.ts b/packages/reshaped/src/components/Calendar/Calendar.utils.ts index 5a41a1177..ad84cc781 100644 --- a/packages/reshaped/src/components/Calendar/Calendar.utils.ts +++ b/packages/reshaped/src/components/Calendar/Calendar.utils.ts @@ -1,4 +1,4 @@ -import type * as T from "./Calendar.types"; +import type * as T from "./Calendar.types.js"; const DAYS_IN_WEEK = 7; const FIRST_WEEK_DAY = 1; diff --git a/packages/reshaped/src/components/Calendar/CalendarControlled.tsx b/packages/reshaped/src/components/Calendar/CalendarControlled.tsx index 6d58d1e8b..6a0b5437f 100644 --- a/packages/reshaped/src/components/Calendar/CalendarControlled.tsx +++ b/packages/reshaped/src/components/Calendar/CalendarControlled.tsx @@ -2,9 +2,9 @@ import React from "react"; -import View from "@/components/View"; -import { onNextFrame } from "@/utilities/animation"; -import type * as T from "./Calendar.types"; +import View from "@/components/View/index.js"; +import { onNextFrame } from "@/utilities/animation.js"; +import type * as T from "./Calendar.types.js"; import { applyNavigationBounds, setMonthTo, @@ -12,11 +12,11 @@ import { setMonthToPrevious, setYearToNext, setYearToPrevious, -} from "./Calendar.utils"; -import CalendarControls from "./CalendarControls"; -import CalendarMonth from "./CalendarMonth"; -import CalendarYear from "./CalendarYear"; -import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation"; +} from "./Calendar.utils.js"; +import CalendarControls from "./CalendarControls.js"; +import CalendarMonth from "./CalendarMonth.js"; +import CalendarYear from "./CalendarYear.js"; +import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js"; const CalendarControlled: React.FC = (props) => { const { diff --git a/packages/reshaped/src/components/Calendar/CalendarControls.tsx b/packages/reshaped/src/components/Calendar/CalendarControls.tsx index c50ba81ef..e5cdadb9f 100644 --- a/packages/reshaped/src/components/Calendar/CalendarControls.tsx +++ b/packages/reshaped/src/components/Calendar/CalendarControls.tsx @@ -1,14 +1,14 @@ import React from "react"; -import Button from "@/components/Button"; -import Hidden from "@/components/Hidden"; -import HiddenVisually from "@/components/HiddenVisually"; -import Text from "@/components/Text"; -import View from "@/components/View"; -import { onNextFrame } from "@/utilities/animation"; -import IconChevronLeft from "@/icons/ChevronLeft"; -import IconChevronRight from "@/icons/ChevronRight"; -import type * as T from "./Calendar.types"; +import Button from "@/components/Button/index.js"; +import Hidden from "@/components/Hidden/index.js"; +import HiddenVisually from "@/components/HiddenVisually/index.js"; +import Text from "@/components/Text/index.js"; +import View from "@/components/View/index.js"; +import { onNextFrame } from "@/utilities/animation.js"; +import IconChevronLeft from "@/icons/ChevronLeft.js"; +import IconChevronRight from "@/icons/ChevronRight.js"; +import type * as T from "./Calendar.types.js"; import s from "./Calendar.module.css"; const CalendarControls: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Calendar/CalendarDate.tsx b/packages/reshaped/src/components/Calendar/CalendarDate.tsx index 8ba09d919..74532b142 100644 --- a/packages/reshaped/src/components/Calendar/CalendarDate.tsx +++ b/packages/reshaped/src/components/Calendar/CalendarDate.tsx @@ -2,9 +2,9 @@ import { classNames } from "@reshaped/utilities"; -import Actionable from "@/components/Actionable"; -import type * as T from "./Calendar.types"; -import { getLocalISODate } from "./Calendar.utils"; +import Actionable from "@/components/Actionable/index.js"; +import type * as T from "./Calendar.types.js"; +import { getLocalISODate } from "./Calendar.utils.js"; import s from "./Calendar.module.css"; const CalendarDate: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Calendar/CalendarMonth.tsx b/packages/reshaped/src/components/Calendar/CalendarMonth.tsx index 0eb36eaed..056f99a3a 100644 --- a/packages/reshaped/src/components/Calendar/CalendarMonth.tsx +++ b/packages/reshaped/src/components/Calendar/CalendarMonth.tsx @@ -2,9 +2,14 @@ import { useState } from "react"; -import type * as T from "./Calendar.types"; -import { getLocalISODate, getMonthWeeks, getWeekdayNames, isDateFocusable } from "./Calendar.utils"; -import CalendarDate from "./CalendarDate"; +import type * as T from "./Calendar.types.js"; +import { + getLocalISODate, + getMonthWeeks, + getWeekdayNames, + isDateFocusable, +} from "./Calendar.utils.js"; +import CalendarDate from "./CalendarDate.js"; import s from "./Calendar.module.css"; const CalendarMonth: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Calendar/CalendarUncontrolled.tsx b/packages/reshaped/src/components/Calendar/CalendarUncontrolled.tsx index 4656bad76..7eb3058b8 100644 --- a/packages/reshaped/src/components/Calendar/CalendarUncontrolled.tsx +++ b/packages/reshaped/src/components/Calendar/CalendarUncontrolled.tsx @@ -2,8 +2,8 @@ import React from "react"; -import type * as T from "./Calendar.types"; -import CalendarControlled from "./CalendarControlled"; +import type * as T from "./Calendar.types.js"; +import CalendarControlled from "./CalendarControlled.js"; const CalendarUncontrolled: React.FC = (props) => { const { onChange, defaultValue, range, ...controlledProps } = props; diff --git a/packages/reshaped/src/components/Calendar/CalendarYear.tsx b/packages/reshaped/src/components/Calendar/CalendarYear.tsx index d0668ee89..24037093c 100644 --- a/packages/reshaped/src/components/Calendar/CalendarYear.tsx +++ b/packages/reshaped/src/components/Calendar/CalendarYear.tsx @@ -1,9 +1,9 @@ import React from "react"; -import Actionable from "@/components/Actionable"; -import { onNextFrame } from "@/utilities/animation"; -import type * as T from "./Calendar.types"; -import { getMonthNames } from "./Calendar.utils"; +import Actionable from "@/components/Actionable/index.js"; +import { onNextFrame } from "@/utilities/animation.js"; +import type * as T from "./Calendar.types.js"; +import { getMonthNames } from "./Calendar.utils.js"; import s from "./Calendar.module.css"; const MONTHS_PER_ROW = 3; diff --git a/packages/reshaped/src/components/Calendar/index.ts b/packages/reshaped/src/components/Calendar/index.ts index 0c7a3413e..dabbe94dd 100644 --- a/packages/reshaped/src/components/Calendar/index.ts +++ b/packages/reshaped/src/components/Calendar/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Calendar"; -export type { Props as CalendarProps } from "./Calendar.types"; +export { default } from "./Calendar.js"; +export type { Props as CalendarProps } from "./Calendar.types.js"; diff --git a/packages/reshaped/src/components/Calendar/tests/Calendar.stories.tsx b/packages/reshaped/src/components/Calendar/tests/Calendar.stories.tsx index 8050b16ff..f1a836714 100644 --- a/packages/reshaped/src/components/Calendar/tests/Calendar.stories.tsx +++ b/packages/reshaped/src/components/Calendar/tests/Calendar.stories.tsx @@ -1,9 +1,9 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, type Mock, userEvent, waitFor, within } from "storybook/test"; -import Calendar from "@/components/Calendar"; -import Text from "@/components/Text"; -import { Example } from "@/utilities/storybook"; +import Calendar from "@/components/Calendar/index.js"; +import Text from "@/components/Text/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/Calendar", diff --git a/packages/reshaped/src/components/Calendar/useCalendarKeyboardNavigation.ts b/packages/reshaped/src/components/Calendar/useCalendarKeyboardNavigation.ts index 5ba9d17c0..fa2f6f90c 100644 --- a/packages/reshaped/src/components/Calendar/useCalendarKeyboardNavigation.ts +++ b/packages/reshaped/src/components/Calendar/useCalendarKeyboardNavigation.ts @@ -1,8 +1,8 @@ import React from "react"; -import useHotkeys from "@/hooks/useHotkeys"; -import * as keys from "@/constants/keys"; -import { getFocusableDates } from "./Calendar.utils"; +import useHotkeys from "@/hooks/useHotkeys.js"; +import * as keys from "@/constants/keys.js"; +import { getFocusableDates } from "./Calendar.utils.js"; const useCalendarKeyboardNavigation = (props: { monthDate: Date; diff --git a/packages/reshaped/src/components/Card/Card.tsx b/packages/reshaped/src/components/Card/Card.tsx index 990e7e65a..2b602ecd1 100644 --- a/packages/reshaped/src/components/Card/Card.tsx +++ b/packages/reshaped/src/components/Card/Card.tsx @@ -1,10 +1,10 @@ import React, { forwardRef } from "react"; import { classNames } from "@reshaped/utilities"; -import Actionable from "@/components/Actionable"; -import View from "@/components/View"; -import { resolveMixin } from "@/styles/mixin"; -import type * as T from "./Card.types"; +import Actionable from "@/components/Actionable/index.js"; +import View from "@/components/View/index.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as T from "./Card.types.js"; import s from "./Card.module.css"; export type Component = { diff --git a/packages/reshaped/src/components/Card/Card.types.ts b/packages/reshaped/src/components/Card/Card.types.ts index 782660cac..a5bca5843 100644 --- a/packages/reshaped/src/components/Card/Card.types.ts +++ b/packages/reshaped/src/components/Card/Card.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 { ViewProps } from "@/components/View"; -import type { Attributes } from "@/types/global"; +import type { ActionableProps } from "@/components/Actionable/index.js"; +import type { ViewProps } from "@/components/View/index.js"; +import type { Attributes } from "@/types/global.js"; export type Props = Pick< ViewProps, diff --git a/packages/reshaped/src/components/Card/index.ts b/packages/reshaped/src/components/Card/index.ts index 8525fa7cb..36b73cd59 100644 --- a/packages/reshaped/src/components/Card/index.ts +++ b/packages/reshaped/src/components/Card/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Card"; -export type { Props as CardProps } from "./Card.types"; +export { default } from "./Card.js"; +export type { Props as CardProps } from "./Card.types.js"; diff --git a/packages/reshaped/src/components/Card/tests/Card.stories.tsx b/packages/reshaped/src/components/Card/tests/Card.stories.tsx index 60058a299..8e3db8aef 100644 --- a/packages/reshaped/src/components/Card/tests/Card.stories.tsx +++ b/packages/reshaped/src/components/Card/tests/Card.stories.tsx @@ -2,9 +2,9 @@ import { StoryObj } from "@storybook/react-vite"; import { useState } from "react"; import { expect, fn, userEvent } from "storybook/test"; -import Button from "@/components/Button"; -import Card from "@/components/Card"; -import { Example, Placeholder } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import Card from "@/components/Card/index.js"; +import { Example, Placeholder } from "@/utilities/storybook/index.js"; export default { title: "Components/Card", diff --git a/packages/reshaped/src/components/Carousel/Carousel.tsx b/packages/reshaped/src/components/Carousel/Carousel.tsx index 9eef67e07..3476a77ac 100644 --- a/packages/reshaped/src/components/Carousel/Carousel.tsx +++ b/packages/reshaped/src/components/Carousel/Carousel.tsx @@ -4,13 +4,13 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; import { rafThrottle } from "@reshaped/utilities/internal"; -import type { ActionableRef } from "@/components/Actionable"; -import View from "@/components/View"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import useRTL from "@/hooks/useRTL"; -import { responsiveClassNames, responsiveVariables } from "@/utilities/props"; -import * as T from "./Carousel.types"; -import CarouselControl from "./CarouselControl"; +import type { ActionableRef } from "@/components/Actionable/index.js"; +import View from "@/components/View/index.js"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import useRTL from "@/hooks/useRTL.js"; +import { responsiveClassNames, responsiveVariables } from "@/utilities/props.js"; +import * as T from "./Carousel.types.js"; +import CarouselControl from "./CarouselControl.js"; import s from "./Carousel.module.css"; const Carousel: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Carousel/Carousel.types.ts b/packages/reshaped/src/components/Carousel/Carousel.types.ts index 33766d91f..c132fcbbf 100644 --- a/packages/reshaped/src/components/Carousel/Carousel.types.ts +++ b/packages/reshaped/src/components/Carousel/Carousel.types.ts @@ -1,9 +1,9 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { ActionableRef } from "@/components/Actionable"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type { ActionableRef } from "@/components/Actionable/index.js"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Instance = | { diff --git a/packages/reshaped/src/components/Carousel/CarouselControl.tsx b/packages/reshaped/src/components/Carousel/CarouselControl.tsx index 465d2647b..40a204aaa 100644 --- a/packages/reshaped/src/components/Carousel/CarouselControl.tsx +++ b/packages/reshaped/src/components/Carousel/CarouselControl.tsx @@ -3,11 +3,11 @@ import { useState } from "react"; import { classNames } from "@reshaped/utilities"; -import Button from "@/components/Button"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import IconChevronLeft from "@/icons/ChevronLeft"; -import IconChevronRight from "@/icons/ChevronRight"; -import * as T from "./Carousel.types"; +import Button from "@/components/Button/index.js"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import IconChevronLeft from "@/icons/ChevronLeft.js"; +import IconChevronRight from "@/icons/ChevronRight.js"; +import * as T from "./Carousel.types.js"; import s from "./Carousel.module.css"; const CarouselControl = (props: T.ControlProps) => { diff --git a/packages/reshaped/src/components/Carousel/index.ts b/packages/reshaped/src/components/Carousel/index.ts index c6fb3fe38..d2138e03b 100644 --- a/packages/reshaped/src/components/Carousel/index.ts +++ b/packages/reshaped/src/components/Carousel/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Carousel"; -export type { Instance as CarouselInstance, Props as CarouselProps } from "./Carousel.types"; +export { default } from "./Carousel.js"; +export type { Instance as CarouselInstance, Props as CarouselProps } from "./Carousel.types.js"; diff --git a/packages/reshaped/src/components/Carousel/tests/Carousel.stories.tsx b/packages/reshaped/src/components/Carousel/tests/Carousel.stories.tsx index 571003f70..cdee99793 100644 --- a/packages/reshaped/src/components/Carousel/tests/Carousel.stories.tsx +++ b/packages/reshaped/src/components/Carousel/tests/Carousel.stories.tsx @@ -2,10 +2,10 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fn, userEvent, waitFor } from "storybook/test"; -import Button from "@/components/Button"; -import Carousel, { type CarouselInstance } from "@/components/Carousel"; -import View from "@/components/View"; -import { Example, Placeholder } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import Carousel, { type CarouselInstance } from "@/components/Carousel/index.js"; +import View from "@/components/View/index.js"; +import { Example, Placeholder } from "@/utilities/storybook/index.js"; export default { title: "Components/Carousel", diff --git a/packages/reshaped/src/components/Checkbox/Checkbox.tsx b/packages/reshaped/src/components/Checkbox/Checkbox.tsx index 7047f80e8..6b24c4448 100644 --- a/packages/reshaped/src/components/Checkbox/Checkbox.tsx +++ b/packages/reshaped/src/components/Checkbox/Checkbox.tsx @@ -3,15 +3,15 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import { useCheckboxGroup } from "@/components/CheckboxGroup"; -import { useFormControl } from "@/components/FormControl"; -import HiddenInput from "@/components/HiddenInput"; -import Icon from "@/components/Icon"; -import Text from "@/components/Text"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import { responsiveClassNames, responsivePropDependency } from "@/utilities/props"; -import IconCheckmark from "@/icons/Checkmark"; -import type * as T from "./Checkbox.types"; +import { useCheckboxGroup } from "@/components/CheckboxGroup/index.js"; +import { useFormControl } from "@/components/FormControl/index.js"; +import HiddenInput from "@/components/HiddenInput/index.js"; +import Icon from "@/components/Icon/index.js"; +import Text from "@/components/Text/index.js"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import { responsiveClassNames, responsivePropDependency } from "@/utilities/props.js"; +import IconCheckmark from "@/icons/Checkmark.js"; +import type * as T from "./Checkbox.types.js"; import s from "./Checkbox.module.css"; const Checkbox: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Checkbox/Checkbox.types.ts b/packages/reshaped/src/components/Checkbox/Checkbox.types.ts index 78d31d9f9..5137c7b8a 100644 --- a/packages/reshaped/src/components/Checkbox/Checkbox.types.ts +++ b/packages/reshaped/src/components/Checkbox/Checkbox.types.ts @@ -1,8 +1,8 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; type BaseProps = { /** Node for inserting the label */ diff --git a/packages/reshaped/src/components/Checkbox/index.ts b/packages/reshaped/src/components/Checkbox/index.ts index bfbf77099..02a58010e 100644 --- a/packages/reshaped/src/components/Checkbox/index.ts +++ b/packages/reshaped/src/components/Checkbox/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Checkbox"; -export type { Props as CheckboxProps } from "./Checkbox.types"; +export { default } from "./Checkbox.js"; +export type { Props as CheckboxProps } from "./Checkbox.types.js"; diff --git a/packages/reshaped/src/components/Checkbox/tests/Checkbox.stories.tsx b/packages/reshaped/src/components/Checkbox/tests/Checkbox.stories.tsx index 0cfe3609f..22f6e24d1 100644 --- a/packages/reshaped/src/components/Checkbox/tests/Checkbox.stories.tsx +++ b/packages/reshaped/src/components/Checkbox/tests/Checkbox.stories.tsx @@ -1,9 +1,9 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import Checkbox from "@/components/Checkbox"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import Checkbox from "@/components/Checkbox/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/Checkbox", diff --git a/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.context.ts b/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.context.ts index cc0690a53..6a9c4ecf8 100644 --- a/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.context.ts +++ b/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.context.ts @@ -2,7 +2,7 @@ import React from "react"; -import type * as T from "./CheckboxGroup.types"; +import type * as T from "./CheckboxGroup.types.js"; const CheckboxContext = React.createContext(null); diff --git a/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.tsx index 201950c07..ada027c83 100644 --- a/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.tsx +++ b/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.tsx @@ -1,6 +1,6 @@ -import type * as T from "./CheckboxGroup.types"; -import CheckboxGroupControlled from "./CheckboxGroupControlled"; -import CheckboxGroupUncontrolled from "./CheckboxGroupUncontrolled"; +import type * as T from "./CheckboxGroup.types.js"; +import CheckboxGroupControlled from "./CheckboxGroupControlled.js"; +import CheckboxGroupUncontrolled from "./CheckboxGroupUncontrolled.js"; const CheckboxGroup: React.FC = (props) => { const { value } = props; diff --git a/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.types.ts b/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.types.ts index 98c45c227..9b4df9325 100644 --- a/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.types.ts +++ b/packages/reshaped/src/components/CheckboxGroup/CheckboxGroup.types.ts @@ -1,7 +1,7 @@ import type React from "react"; -import type { CheckboxProps } from "@/components/Checkbox"; -import type * as G from "@/types/global"; +import type { CheckboxProps } from "@/components/Checkbox/index.js"; +import type * as G from "@/types/global.js"; type BaseProps = { /** Component id attribute */ diff --git a/packages/reshaped/src/components/CheckboxGroup/CheckboxGroupControlled.tsx b/packages/reshaped/src/components/CheckboxGroup/CheckboxGroupControlled.tsx index 0fdc7c681..f39373567 100644 --- a/packages/reshaped/src/components/CheckboxGroup/CheckboxGroupControlled.tsx +++ b/packages/reshaped/src/components/CheckboxGroup/CheckboxGroupControlled.tsx @@ -1,7 +1,7 @@ "use client"; -import Context from "./CheckboxGroup.context"; -import type * as T from "./CheckboxGroup.types"; +import Context from "./CheckboxGroup.context.js"; +import type * as T from "./CheckboxGroup.types.js"; const CheckboxGroupControlled: React.FC = (props) => { const { onChange, name, disabled, value, children, hasError } = props; diff --git a/packages/reshaped/src/components/CheckboxGroup/CheckboxGroupUncontrolled.tsx b/packages/reshaped/src/components/CheckboxGroup/CheckboxGroupUncontrolled.tsx index 3858475bb..ee4faa176 100644 --- a/packages/reshaped/src/components/CheckboxGroup/CheckboxGroupUncontrolled.tsx +++ b/packages/reshaped/src/components/CheckboxGroup/CheckboxGroupUncontrolled.tsx @@ -2,8 +2,8 @@ import React from "react"; -import type * as T from "./CheckboxGroup.types"; -import CheckboxGroupControlled from "./CheckboxGroupControlled"; +import type * as T from "./CheckboxGroup.types.js"; +import CheckboxGroupControlled from "./CheckboxGroupControlled.js"; const CheckboxGroupUncontrolled: React.FC = (props) => { const { defaultValue, onChange } = props; diff --git a/packages/reshaped/src/components/CheckboxGroup/index.ts b/packages/reshaped/src/components/CheckboxGroup/index.ts index 076dae9ca..d5c556359 100644 --- a/packages/reshaped/src/components/CheckboxGroup/index.ts +++ b/packages/reshaped/src/components/CheckboxGroup/index.ts @@ -1,3 +1,3 @@ -export { default } from "./CheckboxGroup"; -export { useCheckboxGroup } from "./CheckboxGroup.context"; -export type { Props as CheckboxGroupProps } from "./CheckboxGroup.types"; +export { default } from "./CheckboxGroup.js"; +export { useCheckboxGroup } from "./CheckboxGroup.context.js"; +export type { Props as CheckboxGroupProps } from "./CheckboxGroup.types.js"; diff --git a/packages/reshaped/src/components/CheckboxGroup/tests/CheckboxGroup.stories.tsx b/packages/reshaped/src/components/CheckboxGroup/tests/CheckboxGroup.stories.tsx index 1f29d5dd2..c2d6dc49a 100644 --- a/packages/reshaped/src/components/CheckboxGroup/tests/CheckboxGroup.stories.tsx +++ b/packages/reshaped/src/components/CheckboxGroup/tests/CheckboxGroup.stories.tsx @@ -1,9 +1,9 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import Checkbox from "@/components/Checkbox"; -import CheckboxGroup from "@/components/CheckboxGroup"; -import View from "@/components/View"; +import Checkbox from "@/components/Checkbox/index.js"; +import CheckboxGroup from "@/components/CheckboxGroup/index.js"; +import View from "@/components/View/index.js"; export default { title: "Components/CheckboxGroup", diff --git a/packages/reshaped/src/components/Container/Container.tsx b/packages/reshaped/src/components/Container/Container.tsx index 04ffff8eb..41312962b 100644 --- a/packages/reshaped/src/components/Container/Container.tsx +++ b/packages/reshaped/src/components/Container/Container.tsx @@ -1,7 +1,7 @@ import { classNames } from "@reshaped/utilities"; -import View from "@/components/View"; -import type * as T from "./Container.types"; +import View from "@/components/View/index.js"; +import type * as T from "./Container.types.js"; import s from "./Container.module.css"; const Container: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Container/Container.types.ts b/packages/reshaped/src/components/Container/Container.types.ts index 82e379439..3ebbde749 100644 --- a/packages/reshaped/src/components/Container/Container.types.ts +++ b/packages/reshaped/src/components/Container/Container.types.ts @@ -1,9 +1,9 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { ViewProps } from "@/components/View"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type { ViewProps } from "@/components/View/index.js"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Props = Pick & { /** Component inline padding */ diff --git a/packages/reshaped/src/components/Container/index.ts b/packages/reshaped/src/components/Container/index.ts index ecbe73b41..0617dae71 100644 --- a/packages/reshaped/src/components/Container/index.ts +++ b/packages/reshaped/src/components/Container/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Container"; -export type { Props as ContainerProps } from "./Container.types"; +export { default } from "./Container.js"; +export type { Props as ContainerProps } from "./Container.types.js"; diff --git a/packages/reshaped/src/components/Container/tests/Container.stories.tsx b/packages/reshaped/src/components/Container/tests/Container.stories.tsx index 90f001085..857a3430c 100644 --- a/packages/reshaped/src/components/Container/tests/Container.stories.tsx +++ b/packages/reshaped/src/components/Container/tests/Container.stories.tsx @@ -1,8 +1,8 @@ import { StoryObj } from "@storybook/react-vite"; import { expect } from "storybook/test"; -import Container from "@/components/Container"; -import { Example, Placeholder } from "@/utilities/storybook"; +import Container from "@/components/Container/index.js"; +import { Example, Placeholder } from "@/utilities/storybook/index.js"; export default { title: "Utility components/Container", diff --git a/packages/reshaped/src/components/ContentToggle/ContentToggle.tsx b/packages/reshaped/src/components/ContentToggle/ContentToggle.tsx index 6a97a8ef1..a683f1de8 100644 --- a/packages/reshaped/src/components/ContentToggle/ContentToggle.tsx +++ b/packages/reshaped/src/components/ContentToggle/ContentToggle.tsx @@ -3,8 +3,8 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import Presence from "@/components/_private/Presence"; -import type * as T from "./ContentToggle.types"; +import Presence from "@/components/_private/Presence/index.js"; +import type * as T from "./ContentToggle.types.js"; import s from "./ContentToggle.module.css"; const ContentToggle: React.FC = (props) => { diff --git a/packages/reshaped/src/components/ContentToggle/ContentToggle.types.ts b/packages/reshaped/src/components/ContentToggle/ContentToggle.types.ts index bf2b54f19..7d315c735 100644 --- a/packages/reshaped/src/components/ContentToggle/ContentToggle.types.ts +++ b/packages/reshaped/src/components/ContentToggle/ContentToggle.types.ts @@ -1,7 +1,7 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { Attributes } from "@/types/global"; +import type { Attributes } from "@/types/global.js"; export type Direction = "start" | "end"; diff --git a/packages/reshaped/src/components/ContentToggle/index.ts b/packages/reshaped/src/components/ContentToggle/index.ts index 824a37800..cae975ba1 100644 --- a/packages/reshaped/src/components/ContentToggle/index.ts +++ b/packages/reshaped/src/components/ContentToggle/index.ts @@ -1,2 +1,2 @@ -export { default } from "./ContentToggle"; -export type { Props as ContentToggleProps } from "./ContentToggle.types"; +export { default } from "./ContentToggle.js"; +export type { Props as ContentToggleProps } from "./ContentToggle.types.js"; diff --git a/packages/reshaped/src/components/ContentToggle/tests/ContentToggle.stories.tsx b/packages/reshaped/src/components/ContentToggle/tests/ContentToggle.stories.tsx index 48ba66b10..009d3fec8 100644 --- a/packages/reshaped/src/components/ContentToggle/tests/ContentToggle.stories.tsx +++ b/packages/reshaped/src/components/ContentToggle/tests/ContentToggle.stories.tsx @@ -1,11 +1,11 @@ import React from "react"; -import Button from "@/components/Button"; -import ContentToggle from "@/components/ContentToggle"; -import Text from "@/components/Text"; -import View from "@/components/View"; -import IconChevronLeft from "@/icons/ChevronLeft"; -import IconChevronRight from "@/icons/ChevronRight"; +import Button from "@/components/Button/index.js"; +import ContentToggle from "@/components/ContentToggle/index.js"; +import Text from "@/components/Text/index.js"; +import View from "@/components/View/index.js"; +import IconChevronLeft from "@/icons/ChevronLeft.js"; +import IconChevronRight from "@/icons/ChevronRight.js"; export default { title: "Utility components/ContentToggle", diff --git a/packages/reshaped/src/components/ContextMenu/ContextMenu.tsx b/packages/reshaped/src/components/ContextMenu/ContextMenu.tsx index 1a65fd42c..d37119ea6 100644 --- a/packages/reshaped/src/components/ContextMenu/ContextMenu.tsx +++ b/packages/reshaped/src/components/ContextMenu/ContextMenu.tsx @@ -3,10 +3,10 @@ import React from "react"; import type { Coordinates } from "@reshaped/utilities/internal"; -import DropdownMenu from "@/components/DropdownMenu"; -import useHandlerRef from "@/hooks/useHandlerRef"; -import useScrollLock from "@/hooks/useScrollLock"; -import type * as T from "./ContextMenu.types"; +import DropdownMenu from "@/components/DropdownMenu/index.js"; +import useHandlerRef from "@/hooks/useHandlerRef.js"; +import useScrollLock from "@/hooks/useScrollLock.js"; +import type * as T from "./ContextMenu.types.js"; import s from "./ContextMenu.module.css"; const ContextMenu: React.FC = (props) => { diff --git a/packages/reshaped/src/components/ContextMenu/ContextMenu.types.ts b/packages/reshaped/src/components/ContextMenu/ContextMenu.types.ts index 2d4d9cf01..dcfbc7b94 100644 --- a/packages/reshaped/src/components/ContextMenu/ContextMenu.types.ts +++ b/packages/reshaped/src/components/ContextMenu/ContextMenu.types.ts @@ -1,6 +1,6 @@ import type React from "react"; -import type { DropdownMenuInstance, DropdownMenuProps } from "@/components/DropdownMenu"; +import type { DropdownMenuInstance, DropdownMenuProps } from "@/components/DropdownMenu/index.js"; export type Instance = DropdownMenuInstance; export type Props = Omit & { diff --git a/packages/reshaped/src/components/ContextMenu/index.ts b/packages/reshaped/src/components/ContextMenu/index.ts index 52815f438..c06ac4b50 100644 --- a/packages/reshaped/src/components/ContextMenu/index.ts +++ b/packages/reshaped/src/components/ContextMenu/index.ts @@ -1,5 +1,5 @@ -import DropdownMenu from "@/components/DropdownMenu"; -import ContextMenu from "./ContextMenu"; +import DropdownMenu from "@/components/DropdownMenu/index.js"; +import ContextMenu from "./ContextMenu.js"; const ContextMenuRoot = ContextMenu as typeof ContextMenu & { Content: typeof DropdownMenu.Content; @@ -19,4 +19,4 @@ export default ContextMenuRoot; export type { Instance as ContextMenuInstance, Props as ContextMenuProps, -} from "./ContextMenu.types"; +} from "./ContextMenu.types.js"; diff --git a/packages/reshaped/src/components/ContextMenu/tests/ContextMenu.stories.tsx b/packages/reshaped/src/components/ContextMenu/tests/ContextMenu.stories.tsx index 78f787542..f59eee921 100644 --- a/packages/reshaped/src/components/ContextMenu/tests/ContextMenu.stories.tsx +++ b/packages/reshaped/src/components/ContextMenu/tests/ContextMenu.stories.tsx @@ -2,10 +2,10 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fn, userEvent, waitFor, within } from "storybook/test"; -import ContextMenu from "@/components/ContextMenu"; -import View from "@/components/View"; -import { sleep } from "@/utilities/helpers"; -import { Example } from "@/utilities/storybook"; +import ContextMenu from "@/components/ContextMenu/index.js"; +import View from "@/components/View/index.js"; +import { sleep } from "@/utilities/helpers.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/ContextMenu", diff --git a/packages/reshaped/src/components/Dismissible/Dismissible.tsx b/packages/reshaped/src/components/Dismissible/Dismissible.tsx index 5e2327d58..67ef50d27 100644 --- a/packages/reshaped/src/components/Dismissible/Dismissible.tsx +++ b/packages/reshaped/src/components/Dismissible/Dismissible.tsx @@ -2,9 +2,9 @@ import { classNames } from "@reshaped/utilities"; -import Button from "@/components/Button"; -import IconClose from "@/icons/Close"; -import type * as T from "./Dismissible.types"; +import Button from "@/components/Button/index.js"; +import IconClose from "@/icons/Close.js"; +import type * as T from "./Dismissible.types.js"; import s from "./Dismissible.module.css"; const Dismissible: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Dismissible/Dismissible.types.ts b/packages/reshaped/src/components/Dismissible/Dismissible.types.ts index cc9a68c57..a75557d48 100644 --- a/packages/reshaped/src/components/Dismissible/Dismissible.types.ts +++ b/packages/reshaped/src/components/Dismissible/Dismissible.types.ts @@ -1,7 +1,7 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { Attributes } from "@/types/global"; +import type { Attributes } from "@/types/global.js"; type WithClose = { /** Hide the close button */ diff --git a/packages/reshaped/src/components/Dismissible/index.ts b/packages/reshaped/src/components/Dismissible/index.ts index 2a5be2671..c2b5ab0f6 100644 --- a/packages/reshaped/src/components/Dismissible/index.ts +++ b/packages/reshaped/src/components/Dismissible/index.ts @@ -1,5 +1,5 @@ -export { default } from "./Dismissible"; +export { default } from "./Dismissible.js"; export type { CloseProps as DismissibleCloseProps, Props as DismissibleProps, -} from "./Dismissible.types"; +} from "./Dismissible.types.js"; diff --git a/packages/reshaped/src/components/Dismissible/tests/Dismissible.stories.tsx b/packages/reshaped/src/components/Dismissible/tests/Dismissible.stories.tsx index bb6f429b1..09a00032e 100644 --- a/packages/reshaped/src/components/Dismissible/tests/Dismissible.stories.tsx +++ b/packages/reshaped/src/components/Dismissible/tests/Dismissible.stories.tsx @@ -1,10 +1,10 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent, within } from "storybook/test"; -import Dismissible from "@/components/Dismissible"; -import Image from "@/components/Image"; -import View from "@/components/View"; -import { Example, Placeholder } from "@/utilities/storybook"; +import Dismissible from "@/components/Dismissible/index.js"; +import Image from "@/components/Image/index.js"; +import View from "@/components/View/index.js"; +import { Example, Placeholder } from "@/utilities/storybook/index.js"; export default { title: "Utility components/Dismissible", diff --git a/packages/reshaped/src/components/Divider/Divider.tsx b/packages/reshaped/src/components/Divider/Divider.tsx index d653daad8..5e19efd4a 100644 --- a/packages/reshaped/src/components/Divider/Divider.tsx +++ b/packages/reshaped/src/components/Divider/Divider.tsx @@ -1,11 +1,11 @@ import type React from "react"; import { classNames } from "@reshaped/utilities"; -import Text from "@/components/Text"; -import { responsiveClassNames, responsivePropDependency } from "@/utilities/props"; -import { resolveMixin } from "@/styles/mixin"; -import type { StyleAttribute } from "@/types/global"; -import type * as T from "./Divider.types"; +import Text from "@/components/Text/index.js"; +import { responsiveClassNames, responsivePropDependency } from "@/utilities/props.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type { StyleAttribute } from "@/types/global.js"; +import type * as T from "./Divider.types.js"; import s from "./Divider.module.css"; const Divider: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Divider/Divider.types.ts b/packages/reshaped/src/components/Divider/Divider.types.ts index 61ed61949..9c1888af8 100644 --- a/packages/reshaped/src/components/Divider/Divider.types.ts +++ b/packages/reshaped/src/components/Divider/Divider.types.ts @@ -1,8 +1,8 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Change component to take no space, useful for using it as a border in components like Tabs */ diff --git a/packages/reshaped/src/components/Divider/index.ts b/packages/reshaped/src/components/Divider/index.ts index d27957097..4688da8ef 100644 --- a/packages/reshaped/src/components/Divider/index.ts +++ b/packages/reshaped/src/components/Divider/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Divider"; -export type { Props as DividerProps } from "./Divider.types"; +export { default } from "./Divider.js"; +export type { Props as DividerProps } from "./Divider.types.js"; diff --git a/packages/reshaped/src/components/Divider/tests/Divider.stories.tsx b/packages/reshaped/src/components/Divider/tests/Divider.stories.tsx index 1e2468f63..a996a51bd 100644 --- a/packages/reshaped/src/components/Divider/tests/Divider.stories.tsx +++ b/packages/reshaped/src/components/Divider/tests/Divider.stories.tsx @@ -1,9 +1,9 @@ import { StoryObj } from "@storybook/react-vite"; import { expect } from "storybook/test"; -import Divider from "@/components/Divider"; -import View from "@/components/View"; -import { Example, Placeholder } from "@/utilities/storybook"; +import Divider from "@/components/Divider/index.js"; +import View from "@/components/View/index.js"; +import { Example, Placeholder } from "@/utilities/storybook/index.js"; export default { title: "Components/Divider", diff --git a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.context.tsx b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.context.tsx index c3a2baf32..153f36c87 100644 --- a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.context.tsx +++ b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.context.tsx @@ -2,7 +2,7 @@ import React from "react"; -import type * as T from "./DropdownMenu.types"; +import type * as T from "./DropdownMenu.types.js"; const DropdownMenuContext = React.createContext({}); diff --git a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.tsx b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.tsx index 601790b76..538b813d2 100644 --- a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.tsx +++ b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.tsx @@ -2,16 +2,16 @@ import React from "react"; -import { useFlyoutContext } from "@/components/Flyout"; -import Icon from "@/components/Icon"; -import MenuItem from "@/components/MenuItem"; -import Popover from "@/components/Popover"; -import useHotkeys from "@/hooks/useHotkeys"; -import useRTL from "@/hooks/useRTL"; -import * as keys from "@/constants/keys"; -import IconChevronRight from "@/icons/ChevronRight"; -import { DropdownMenuProvider, useDropdownMenu } from "./DropdownMenu.context"; -import type * as T from "./DropdownMenu.types"; +import { useFlyoutContext } from "@/components/Flyout/index.js"; +import Icon from "@/components/Icon/index.js"; +import MenuItem from "@/components/MenuItem/index.js"; +import Popover from "@/components/Popover/index.js"; +import useHotkeys from "@/hooks/useHotkeys.js"; +import useRTL from "@/hooks/useRTL.js"; +import * as keys from "@/constants/keys.js"; +import IconChevronRight from "@/icons/ChevronRight.js"; +import { DropdownMenuProvider, useDropdownMenu } from "./DropdownMenu.context.js"; +import type * as T from "./DropdownMenu.types.js"; import s from "./DropdownMenu.module.css"; const DropdownMenuSubContext = React.createContext | null>(null); diff --git a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts index 9df9225e4..d1d92fb03 100644 --- a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts +++ b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts @@ -1,8 +1,8 @@ import type React from "react"; -import type { FlyoutContentProps } from "@/components/Flyout"; -import type { MenuItemProps } from "@/components/MenuItem"; -import type { PopoverInstance, PopoverProps } from "@/components/Popover"; +import type { FlyoutContentProps } from "@/components/Flyout/index.js"; +import type { MenuItemProps } from "@/components/MenuItem/index.js"; +import type { PopoverInstance, PopoverProps } from "@/components/Popover/index.js"; export type Instance = PopoverInstance; diff --git a/packages/reshaped/src/components/DropdownMenu/index.ts b/packages/reshaped/src/components/DropdownMenu/index.ts index 7656fc584..fdccb60d6 100644 --- a/packages/reshaped/src/components/DropdownMenu/index.ts +++ b/packages/reshaped/src/components/DropdownMenu/index.ts @@ -1,11 +1,11 @@ -import Popover from "@/components/Popover"; +import Popover from "@/components/Popover/index.js"; import DropdownMenu, { DropdownMenuContent, DropdownMenuItem, DropdownMenuSection, DropdownMenuSubMenu, DropdownMenuSubTrigger, -} from "./DropdownMenu"; +} from "./DropdownMenu.js"; const DropdownMenuRoot = DropdownMenu as typeof DropdownMenu & { Dismissible: typeof Popover.Dismissible; @@ -29,4 +29,4 @@ export default DropdownMenuRoot; export type { Instance as DropdownMenuInstance, Props as DropdownMenuProps, -} from "./DropdownMenu.types"; +} from "./DropdownMenu.types.js"; diff --git a/packages/reshaped/src/components/DropdownMenu/tests/DropdownMenu.stories.tsx b/packages/reshaped/src/components/DropdownMenu/tests/DropdownMenu.stories.tsx index bbc7a2208..d3f1dde03 100644 --- a/packages/reshaped/src/components/DropdownMenu/tests/DropdownMenu.stories.tsx +++ b/packages/reshaped/src/components/DropdownMenu/tests/DropdownMenu.stories.tsx @@ -1,14 +1,14 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent, waitFor, within } from "storybook/test"; -import Button from "@/components/Button"; -import DropdownMenu from "@/components/DropdownMenu"; -import Theme from "@/components/Theme"; -import { useTheme } from "@/components/Theme/useTheme"; -import View from "@/components/View"; -import { sleep } from "@/utilities/helpers"; -import { Example } from "@/utilities/storybook"; -import IconCheckmark from "@/icons/Checkmark"; +import Button from "@/components/Button/index.js"; +import DropdownMenu from "@/components/DropdownMenu/index.js"; +import Theme from "@/components/Theme/index.js"; +import { useTheme } from "@/components/Theme/useTheme.js"; +import View from "@/components/View/index.js"; +import { sleep } from "@/utilities/helpers.js"; +import { Example } from "@/utilities/storybook/index.js"; +import IconCheckmark from "@/icons/Checkmark.js"; export default { title: "Components/DropdownMenu", diff --git a/packages/reshaped/src/components/Expandable/Expandable.tsx b/packages/reshaped/src/components/Expandable/Expandable.tsx index 4c32219f5..74fa4a98b 100644 --- a/packages/reshaped/src/components/Expandable/Expandable.tsx +++ b/packages/reshaped/src/components/Expandable/Expandable.tsx @@ -3,10 +3,10 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import useHandlerRef from "@/hooks/useHandlerRef"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import { onNextFrame, checkTransitions } from "@/utilities/animation"; -import type * as T from "./Expandable.types"; +import useHandlerRef from "@/hooks/useHandlerRef.js"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import { onNextFrame, checkTransitions } from "@/utilities/animation.js"; +import type * as T from "./Expandable.types.js"; import s from "./Expandable.module.css"; const Expandable: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Expandable/Expandable.types.ts b/packages/reshaped/src/components/Expandable/Expandable.types.ts index 032521435..cb85991cc 100644 --- a/packages/reshaped/src/components/Expandable/Expandable.types.ts +++ b/packages/reshaped/src/components/Expandable/Expandable.types.ts @@ -1,7 +1,7 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { Attributes } from "@/types/global"; +import type { Attributes } from "@/types/global.js"; export type Orientation = "vertical" | "horizontal"; diff --git a/packages/reshaped/src/components/Expandable/index.ts b/packages/reshaped/src/components/Expandable/index.ts index 9e67ae09c..ecc58540b 100644 --- a/packages/reshaped/src/components/Expandable/index.ts +++ b/packages/reshaped/src/components/Expandable/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Expandable"; -export type { Props as ExpandableProps } from "./Expandable.types"; +export { default } from "./Expandable.js"; +export type { Props as ExpandableProps } from "./Expandable.types.js"; diff --git a/packages/reshaped/src/components/Expandable/tests/Expandable.stories.tsx b/packages/reshaped/src/components/Expandable/tests/Expandable.stories.tsx index d197f47f3..8c4ad2460 100644 --- a/packages/reshaped/src/components/Expandable/tests/Expandable.stories.tsx +++ b/packages/reshaped/src/components/Expandable/tests/Expandable.stories.tsx @@ -2,11 +2,11 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fn, Mock, userEvent, waitFor } from "storybook/test"; -import Button from "@/components/Button"; -import Expandable from "@/components/Expandable"; -import View from "@/components/View"; -import { checkTransitions } from "@/utilities/animation"; -import { Example, Placeholder } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import Expandable from "@/components/Expandable/index.js"; +import View from "@/components/View/index.js"; +import { checkTransitions } from "@/utilities/animation.js"; +import { Example, Placeholder } from "@/utilities/storybook/index.js"; export default { title: "Utility components/Expandable", diff --git a/packages/reshaped/src/components/FileUpload/FileUpload.tsx b/packages/reshaped/src/components/FileUpload/FileUpload.tsx index 1d61ffe26..189642e71 100644 --- a/packages/reshaped/src/components/FileUpload/FileUpload.tsx +++ b/packages/reshaped/src/components/FileUpload/FileUpload.tsx @@ -3,10 +3,10 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import HiddenVisually from "@/components/HiddenVisually"; -import View from "@/components/View"; -import useToggle from "@/hooks/useToggle"; -import type * as T from "./FileUpload.types"; +import HiddenVisually from "@/components/HiddenVisually/index.js"; +import View from "@/components/View/index.js"; +import useToggle from "@/hooks/useToggle.js"; +import type * as T from "./FileUpload.types.js"; import s from "./FileUpload.module.css"; export const FileUploadTrigger: React.FC = (props) => { diff --git a/packages/reshaped/src/components/FileUpload/FileUpload.types.ts b/packages/reshaped/src/components/FileUpload/FileUpload.types.ts index 6593298c8..f1ae0c7ff 100644 --- a/packages/reshaped/src/components/FileUpload/FileUpload.types.ts +++ b/packages/reshaped/src/components/FileUpload/FileUpload.types.ts @@ -1,9 +1,9 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { ViewProps } from "@/components/View"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type { ViewProps } from "@/components/View/index.js"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Name of the input element */ diff --git a/packages/reshaped/src/components/FileUpload/index.ts b/packages/reshaped/src/components/FileUpload/index.ts index 9839c34cf..661bf04e5 100644 --- a/packages/reshaped/src/components/FileUpload/index.ts +++ b/packages/reshaped/src/components/FileUpload/index.ts @@ -1,4 +1,4 @@ -import FileUpload, { FileUploadTrigger } from "./FileUpload"; +import FileUpload, { FileUploadTrigger } from "./FileUpload.js"; const FileUploadRoot = FileUpload as typeof FileUpload & { Trigger: typeof FileUploadTrigger; @@ -7,4 +7,4 @@ const FileUploadRoot = FileUpload as typeof FileUpload & { FileUploadRoot.Trigger = FileUploadTrigger; export default FileUploadRoot; -export type { Props as FileUploadProps } from "./FileUpload.types"; +export type { Props as FileUploadProps } from "./FileUpload.types.js"; diff --git a/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx b/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx index 03c46d039..44bdc0131 100644 --- a/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx +++ b/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx @@ -2,14 +2,14 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fn, userEvent } from "storybook/test"; -import Button from "@/components/Button"; -import FileUpload from "@/components/FileUpload"; -import Icon from "@/components/Icon"; -import Image from "@/components/Image"; -import Link from "@/components/Link"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; -import IconMic from "@/icons/Mic"; +import Button from "@/components/Button/index.js"; +import FileUpload from "@/components/FileUpload/index.js"; +import Icon from "@/components/Icon/index.js"; +import Image from "@/components/Image/index.js"; +import Link from "@/components/Link/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; +import IconMic from "@/icons/Mic.js"; export default { title: "Components/FileUpload", diff --git a/packages/reshaped/src/components/Flyout/Flyout.context.ts b/packages/reshaped/src/components/Flyout/Flyout.context.ts index fcc9d0d06..21cd7e834 100644 --- a/packages/reshaped/src/components/Flyout/Flyout.context.ts +++ b/packages/reshaped/src/components/Flyout/Flyout.context.ts @@ -2,7 +2,7 @@ import React from "react"; -import type * as T from "./Flyout.types"; +import type * as T from "./Flyout.types.js"; const FlyoutContext = React.createContext({} as T.ContextProps); const FlyoutTriggerContext = React.createContext(null); diff --git a/packages/reshaped/src/components/Flyout/Flyout.tsx b/packages/reshaped/src/components/Flyout/Flyout.tsx index 94742a759..ea70b4ddf 100644 --- a/packages/reshaped/src/components/Flyout/Flyout.tsx +++ b/packages/reshaped/src/components/Flyout/Flyout.tsx @@ -1,6 +1,6 @@ -import type * as T from "./Flyout.types"; -import FlyoutControlled from "./FlyoutControlled"; -import FlyoutUncontrolled from "./FlyoutUncontrolled"; +import type * as T from "./Flyout.types.js"; +import FlyoutControlled from "./FlyoutControlled.js"; +import FlyoutUncontrolled from "./FlyoutUncontrolled.js"; const Flyout: React.FC = (props) => { const { active } = props; diff --git a/packages/reshaped/src/components/Flyout/Flyout.types.ts b/packages/reshaped/src/components/Flyout/Flyout.types.ts index c891c4708..cf5b4dfa2 100644 --- a/packages/reshaped/src/components/Flyout/Flyout.types.ts +++ b/packages/reshaped/src/components/Flyout/Flyout.types.ts @@ -2,8 +2,8 @@ import React from "react"; import type { ClassName } from "@reshaped/utilities"; import type { Coordinates, TrapMode } from "@reshaped/utilities/internal"; -import type * as G from "@/types/global"; -import { ThemeProps } from "../Theme"; +import type * as G from "@/types/global.js"; +import { ThemeProps } from "../Theme/index.js"; /** * Utility diff --git a/packages/reshaped/src/components/Flyout/FlyoutContent.tsx b/packages/reshaped/src/components/Flyout/FlyoutContent.tsx index ac07fef66..61c7512e9 100644 --- a/packages/reshaped/src/components/Flyout/FlyoutContent.tsx +++ b/packages/reshaped/src/components/Flyout/FlyoutContent.tsx @@ -3,12 +3,12 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import Portal from "@/components/_private/Portal"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import ScrollArea from "../ScrollArea"; -import { ContentProvider, useFlyoutContext } from "./Flyout.context"; -import type * as T from "./Flyout.types"; -import cooldown from "./utilities/cooldown"; +import Portal from "@/components/_private/Portal/index.js"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import ScrollArea from "../ScrollArea/index.js"; +import { ContentProvider, useFlyoutContext } from "./Flyout.context.js"; +import type * as T from "./Flyout.types.js"; +import cooldown from "./utilities/cooldown.js"; import s from "./Flyout.module.css"; const FlyoutContent: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx b/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx index e43c3e903..64315f25b 100644 --- a/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx +++ b/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx @@ -8,25 +8,25 @@ import { type FocusableElement, } from "@reshaped/utilities/internal"; -import usePrevious from "@/hooks/_internal/usePrevious"; -import useElementId from "@/hooks/useElementId"; -import useHandlerRef from "@/hooks/useHandlerRef"; -import useHotkeys from "@/hooks/useHotkeys"; -import useIsDismissible from "@/hooks/useIsDismissible"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import useOnClickOutside from "@/hooks/useOnClickOutside"; -import { checkTransitions } from "@/utilities/animation"; -import * as timeouts from "./Flyout.constants"; +import usePrevious from "@/hooks/_internal/usePrevious.js"; +import useElementId from "@/hooks/useElementId.js"; +import useHandlerRef from "@/hooks/useHandlerRef.js"; +import useHotkeys from "@/hooks/useHotkeys.js"; +import useIsDismissible from "@/hooks/useIsDismissible.js"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import useOnClickOutside from "@/hooks/useOnClickOutside.js"; +import { checkTransitions } from "@/utilities/animation.js"; +import * as timeouts from "./Flyout.constants.js"; import { Provider, useFlyoutContentContext, useFlyoutContext, useFlyoutTriggerContext, -} from "./Flyout.context"; -import type * as T from "./Flyout.types"; -import useFlyout from "./useFlyout"; -import cooldown from "./utilities/cooldown"; -import { createSafeArea } from "./utilities/safeArea"; +} from "./Flyout.context.js"; +import type * as T from "./Flyout.types.js"; +import useFlyout from "./useFlyout.js"; +import cooldown from "./utilities/cooldown.js"; +import { createSafeArea } from "./utilities/safeArea.js"; const FlyoutControlled: React.FC = (props) => { const { diff --git a/packages/reshaped/src/components/Flyout/FlyoutTrigger.tsx b/packages/reshaped/src/components/Flyout/FlyoutTrigger.tsx index 81c4550f8..6a367f5e8 100644 --- a/packages/reshaped/src/components/Flyout/FlyoutTrigger.tsx +++ b/packages/reshaped/src/components/Flyout/FlyoutTrigger.tsx @@ -1,7 +1,7 @@ "use client"; -import { TriggerProvider, useFlyoutContext } from "./Flyout.context"; -import type * as T from "./Flyout.types"; +import { TriggerProvider, useFlyoutContext } from "./Flyout.context.js"; +import type * as T from "./Flyout.types.js"; const FlyoutTrigger: React.FC = (props) => { const { children } = props; diff --git a/packages/reshaped/src/components/Flyout/FlyoutUncontrolled.tsx b/packages/reshaped/src/components/Flyout/FlyoutUncontrolled.tsx index 515d4d1a7..169cac933 100644 --- a/packages/reshaped/src/components/Flyout/FlyoutUncontrolled.tsx +++ b/packages/reshaped/src/components/Flyout/FlyoutUncontrolled.tsx @@ -2,8 +2,8 @@ import React from "react"; -import type * as T from "./Flyout.types"; -import FlyoutControlled from "./FlyoutControlled"; +import type * as T from "./Flyout.types.js"; +import FlyoutControlled from "./FlyoutControlled.js"; const FlyoutUncontrolled: React.FC = (props) => { const { defaultActive, onClose, onOpen } = props; diff --git a/packages/reshaped/src/components/Flyout/index.ts b/packages/reshaped/src/components/Flyout/index.ts index 27f7c8e2e..98b5c0afe 100644 --- a/packages/reshaped/src/components/Flyout/index.ts +++ b/packages/reshaped/src/components/Flyout/index.ts @@ -1,6 +1,6 @@ -import Flyout from "./Flyout"; -import FlyoutContent from "./FlyoutContent"; -import FlyoutTrigger from "./FlyoutTrigger"; +import Flyout from "./Flyout.js"; +import FlyoutContent from "./FlyoutContent.js"; +import FlyoutTrigger from "./FlyoutTrigger.js"; const FlyoutRoot = Flyout as typeof Flyout & { Trigger: typeof FlyoutTrigger; @@ -11,7 +11,7 @@ FlyoutRoot.Trigger = FlyoutTrigger; FlyoutRoot.Content = FlyoutContent; export default FlyoutRoot; -export { useFlyoutContext } from "./Flyout.context"; +export { useFlyoutContext } from "./Flyout.context.js"; export type { CloseReason as FlyoutCloseReason, ContentProps as FlyoutContentProps, @@ -19,4 +19,4 @@ export type { Props as FlyoutProps, TriggerAttributes as FlyoutTriggerAttributes, TriggerProps as FlyoutTriggerProps, -} from "./Flyout.types"; +} from "./Flyout.types.js"; diff --git a/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx b/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx index 9de85911b..26a47512c 100644 --- a/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx +++ b/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx @@ -2,16 +2,16 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { userEvent, waitFor, within, expect, fn } from "storybook/test"; -import Button from "@/components/Button"; -import Flyout, { FlyoutInstance, FlyoutProps } from "@/components/Flyout"; -import Modal from "@/components/Modal"; -import Select from "@/components/Select"; -import Switch from "@/components/Switch"; -import TextField from "@/components/TextField"; -import Theme from "@/components/Theme"; -import View from "@/components/View"; -import { sleep } from "@/utilities/helpers"; -import { Example } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import Flyout, { FlyoutInstance, FlyoutProps } from "@/components/Flyout/index.js"; +import Modal from "@/components/Modal/index.js"; +import Select from "@/components/Select/index.js"; +import Switch from "@/components/Switch/index.js"; +import TextField from "@/components/TextField/index.js"; +import Theme from "@/components/Theme/index.js"; +import View from "@/components/View/index.js"; +import { sleep } from "@/utilities/helpers.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Utility components/Flyout" }; diff --git a/packages/reshaped/src/components/Flyout/useFlyout.ts b/packages/reshaped/src/components/Flyout/useFlyout.ts index 121f10445..dcc22df84 100644 --- a/packages/reshaped/src/components/Flyout/useFlyout.ts +++ b/packages/reshaped/src/components/Flyout/useFlyout.ts @@ -2,8 +2,8 @@ import { useCallback, useMemo, useRef, useState } from "react"; import { Flyout } from "@reshaped/utilities"; import { type Coordinates } from "@reshaped/utilities/internal"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import type * as T from "./Flyout.types"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import type * as T from "./Flyout.types.js"; type UseFlyout = ( args: Pick< diff --git a/packages/reshaped/src/components/FormControl/FormControl.context.ts b/packages/reshaped/src/components/FormControl/FormControl.context.ts index a487d5e3b..cc0fa6702 100644 --- a/packages/reshaped/src/components/FormControl/FormControl.context.ts +++ b/packages/reshaped/src/components/FormControl/FormControl.context.ts @@ -2,7 +2,7 @@ import React from "react"; -import type * as T from "./FormControl.types"; +import type * as T from "./FormControl.types.js"; const FormControlContext = React.createContext({ attributes: {} } as T.Context); diff --git a/packages/reshaped/src/components/FormControl/FormControl.tsx b/packages/reshaped/src/components/FormControl/FormControl.tsx index f8075d269..e7fc39eb8 100644 --- a/packages/reshaped/src/components/FormControl/FormControl.tsx +++ b/packages/reshaped/src/components/FormControl/FormControl.tsx @@ -3,10 +3,10 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import useElementId from "@/hooks/useElementId"; -import { Provider } from "./FormControl.context"; -import type * as T from "./FormControl.types"; -import { getCaptionId } from "./FormControl.utilities"; +import useElementId from "@/hooks/useElementId.js"; +import { Provider } from "./FormControl.context.js"; +import type * as T from "./FormControl.types.js"; +import { getCaptionId } from "./FormControl.utilities.js"; import s from "./FormControl.module.css"; const FormControl: React.FC = (props) => { diff --git a/packages/reshaped/src/components/FormControl/FormControl.utilities.ts b/packages/reshaped/src/components/FormControl/FormControl.utilities.ts index 7383f6fc2..d51e6354d 100644 --- a/packages/reshaped/src/components/FormControl/FormControl.utilities.ts +++ b/packages/reshaped/src/components/FormControl/FormControl.utilities.ts @@ -1,4 +1,4 @@ -import type * as T from "./FormControl.types"; +import type * as T from "./FormControl.types.js"; export const getCaptionId = (id: string, variant?: T.PrivateCaptionProps["variant"]) => `${id}-${variant || "caption"}`; diff --git a/packages/reshaped/src/components/FormControl/FormControlCaption.tsx b/packages/reshaped/src/components/FormControl/FormControlCaption.tsx index 77d832ebd..01c36a063 100644 --- a/packages/reshaped/src/components/FormControl/FormControlCaption.tsx +++ b/packages/reshaped/src/components/FormControl/FormControlCaption.tsx @@ -1,9 +1,9 @@ "use client"; -import Text from "@/components/Text"; -import { useFormControlPrivate } from "./FormControl.context"; -import type * as T from "./FormControl.types"; -import { getCaptionId } from "./FormControl.utilities"; +import Text from "@/components/Text/index.js"; +import { useFormControlPrivate } from "./FormControl.context.js"; +import type * as T from "./FormControl.types.js"; +import { getCaptionId } from "./FormControl.utilities.js"; import s from "./FormControl.module.css"; const FormControlCaption: React.FC = (props) => { diff --git a/packages/reshaped/src/components/FormControl/FormControlError.tsx b/packages/reshaped/src/components/FormControl/FormControlError.tsx index b557b0bf9..3d6d0dae3 100644 --- a/packages/reshaped/src/components/FormControl/FormControlError.tsx +++ b/packages/reshaped/src/components/FormControl/FormControlError.tsx @@ -1,8 +1,8 @@ "use client"; -import { useFormControlPrivate } from "./FormControl.context"; -import type * as T from "./FormControl.types"; -import FormControlCaption from "./FormControlCaption"; +import { useFormControlPrivate } from "./FormControl.context.js"; +import type * as T from "./FormControl.types.js"; +import FormControlCaption from "./FormControlCaption.js"; const FormControlError: React.FC = (props) => { const { children } = props; diff --git a/packages/reshaped/src/components/FormControl/FormControlHelper.tsx b/packages/reshaped/src/components/FormControl/FormControlHelper.tsx index d6618372e..824c434c3 100644 --- a/packages/reshaped/src/components/FormControl/FormControlHelper.tsx +++ b/packages/reshaped/src/components/FormControl/FormControlHelper.tsx @@ -1,8 +1,8 @@ "use client"; -import { useFormControlPrivate } from "./FormControl.context"; -import type * as T from "./FormControl.types"; -import FormControlCaption from "./FormControlCaption"; +import { useFormControlPrivate } from "./FormControl.context.js"; +import type * as T from "./FormControl.types.js"; +import FormControlCaption from "./FormControlCaption.js"; const FormControlHelper: React.FC = (props) => { const { children } = props; diff --git a/packages/reshaped/src/components/FormControl/FormControlLabel.tsx b/packages/reshaped/src/components/FormControl/FormControlLabel.tsx index ca0163e02..4e5c89a12 100644 --- a/packages/reshaped/src/components/FormControl/FormControlLabel.tsx +++ b/packages/reshaped/src/components/FormControl/FormControlLabel.tsx @@ -1,8 +1,8 @@ "use client"; -import Text from "@/components/Text"; -import { useFormControlPrivate } from "./FormControl.context"; -import type * as T from "./FormControl.types"; +import Text from "@/components/Text/index.js"; +import { useFormControlPrivate } from "./FormControl.context.js"; +import type * as T from "./FormControl.types.js"; import s from "./FormControl.module.css"; const FormControlLabel: React.FC = (props) => { diff --git a/packages/reshaped/src/components/FormControl/index.ts b/packages/reshaped/src/components/FormControl/index.ts index 8f1809b11..0ce002530 100644 --- a/packages/reshaped/src/components/FormControl/index.ts +++ b/packages/reshaped/src/components/FormControl/index.ts @@ -1,7 +1,7 @@ -import FormControl from "./FormControl"; -import FormControlError from "./FormControlError"; -import FormControlHelper from "./FormControlHelper"; -import FormControlLabel from "./FormControlLabel"; +import FormControl from "./FormControl.js"; +import FormControlError from "./FormControlError.js"; +import FormControlHelper from "./FormControlHelper.js"; +import FormControlLabel from "./FormControlLabel.js"; const FormControlRoot = FormControl as typeof FormControl & { Label: typeof FormControlLabel; @@ -14,5 +14,5 @@ FormControlRoot.Helper = FormControlHelper; FormControlRoot.Error = FormControlError; export default FormControlRoot; -export { useFormControl } from "./FormControl.context"; -export type { Props as FormControlProps } from "./FormControl.types"; +export { useFormControl } from "./FormControl.context.js"; +export type { Props as FormControlProps } from "./FormControl.types.js"; diff --git a/packages/reshaped/src/components/FormControl/tests/FormControl.stories.tsx b/packages/reshaped/src/components/FormControl/tests/FormControl.stories.tsx index d9179bc29..8892acab1 100644 --- a/packages/reshaped/src/components/FormControl/tests/FormControl.stories.tsx +++ b/packages/reshaped/src/components/FormControl/tests/FormControl.stories.tsx @@ -1,12 +1,12 @@ import { StoryObj } from "@storybook/react-vite"; import { expect } from "storybook/test"; -import FormControl from "@/components/FormControl"; -import Radio from "@/components/Radio"; -import RadioGroup from "@/components/RadioGroup"; -import TextField from "@/components/TextField"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import FormControl from "@/components/FormControl/index.js"; +import Radio from "@/components/Radio/index.js"; +import RadioGroup from "@/components/RadioGroup/index.js"; +import TextField from "@/components/TextField/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Utility components/FormControl", diff --git a/packages/reshaped/src/components/Grid/Grid.tsx b/packages/reshaped/src/components/Grid/Grid.tsx index f5779ce0c..39e25dcb5 100644 --- a/packages/reshaped/src/components/Grid/Grid.tsx +++ b/packages/reshaped/src/components/Grid/Grid.tsx @@ -1,8 +1,8 @@ import { classNames } from "@reshaped/utilities"; -import { responsivePropDependency, responsiveVariables } from "@/utilities/props"; -import { resolveMixin } from "@/styles/mixin"; -import type * as T from "./Grid.types"; +import { responsivePropDependency, responsiveVariables } from "@/utilities/props.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as T from "./Grid.types.js"; import s from "./Grid.module.css"; export const GridItem = ( diff --git a/packages/reshaped/src/components/Grid/Grid.types.ts b/packages/reshaped/src/components/Grid/Grid.types.ts index 3aadeaef0..54eb73629 100644 --- a/packages/reshaped/src/components/Grid/Grid.types.ts +++ b/packages/reshaped/src/components/Grid/Grid.types.ts @@ -2,9 +2,9 @@ import type { Property } from "csstype"; import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type * as TStyles from "@/styles/types"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as TStyles from "@/styles/types.js"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Gap between grid items */ diff --git a/packages/reshaped/src/components/Grid/index.ts b/packages/reshaped/src/components/Grid/index.ts index c65905cd8..a9742afb5 100644 --- a/packages/reshaped/src/components/Grid/index.ts +++ b/packages/reshaped/src/components/Grid/index.ts @@ -1,4 +1,4 @@ -import Grid, { GridItem } from "./Grid"; +import Grid, { GridItem } from "./Grid.js"; const GridRoot = Grid as typeof Grid & { Item: typeof GridItem; @@ -7,4 +7,4 @@ const GridRoot = Grid as typeof Grid & { GridRoot.Item = GridItem; export default GridRoot; -export type { ItemProps as GridItemProps, Props as GridProps } from "./Grid.types"; +export type { ItemProps as GridItemProps, Props as GridProps } from "./Grid.types.js"; diff --git a/packages/reshaped/src/components/Grid/tests/Grid.stories.tsx b/packages/reshaped/src/components/Grid/tests/Grid.stories.tsx index f3fbde31c..6c4690f48 100644 --- a/packages/reshaped/src/components/Grid/tests/Grid.stories.tsx +++ b/packages/reshaped/src/components/Grid/tests/Grid.stories.tsx @@ -1,9 +1,9 @@ import { StoryObj } from "@storybook/react-vite"; import { expect } from "storybook/test"; -import Grid from "@/components/Grid"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import Grid from "@/components/Grid/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Utility components/Grid", diff --git a/packages/reshaped/src/components/Hidden/Hidden.tsx b/packages/reshaped/src/components/Hidden/Hidden.tsx index 9ad79a5a8..9f00385dc 100644 --- a/packages/reshaped/src/components/Hidden/Hidden.tsx +++ b/packages/reshaped/src/components/Hidden/Hidden.tsx @@ -1,7 +1,7 @@ import { classNames } from "@reshaped/utilities"; -import { responsiveClassNames } from "@/utilities/props"; -import type * as T from "./Hidden.types"; +import { responsiveClassNames } from "@/utilities/props.js"; +import type * as T from "./Hidden.types.js"; import s from "./Hidden.module.css"; const Hidden: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Hidden/Hidden.types.ts b/packages/reshaped/src/components/Hidden/Hidden.types.ts index 5d9f52f5b..bad63404b 100644 --- a/packages/reshaped/src/components/Hidden/Hidden.types.ts +++ b/packages/reshaped/src/components/Hidden/Hidden.types.ts @@ -1,6 +1,6 @@ import type React from "react"; -import type * as G from "@/types/global"; +import type * as G from "@/types/global.js"; export type Props = { /** Pick at which viewport sizes to hide the children*/ diff --git a/packages/reshaped/src/components/Hidden/index.ts b/packages/reshaped/src/components/Hidden/index.ts index ec84210e0..35e780785 100644 --- a/packages/reshaped/src/components/Hidden/index.ts +++ b/packages/reshaped/src/components/Hidden/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Hidden"; -export type { Props as HiddenProps } from "./Hidden.types"; +export { default } from "./Hidden.js"; +export type { Props as HiddenProps } from "./Hidden.types.js"; diff --git a/packages/reshaped/src/components/Hidden/tests/Hidden.stories.tsx b/packages/reshaped/src/components/Hidden/tests/Hidden.stories.tsx index 3d9709ba6..d1c24f904 100644 --- a/packages/reshaped/src/components/Hidden/tests/Hidden.stories.tsx +++ b/packages/reshaped/src/components/Hidden/tests/Hidden.stories.tsx @@ -1,8 +1,8 @@ import { StoryObj } from "@storybook/react-vite"; import { expect } from "storybook/test"; -import Hidden from "@/components/Hidden"; -import { Example } from "@/utilities/storybook"; +import Hidden from "@/components/Hidden/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Utility components/Hidden", diff --git a/packages/reshaped/src/components/HiddenInput/HiddenInput.tsx b/packages/reshaped/src/components/HiddenInput/HiddenInput.tsx index a7c31810f..7b243d123 100644 --- a/packages/reshaped/src/components/HiddenInput/HiddenInput.tsx +++ b/packages/reshaped/src/components/HiddenInput/HiddenInput.tsx @@ -1,9 +1,9 @@ import { classNames } from "@reshaped/utilities"; -import { useCheckboxGroup } from "@/components/CheckboxGroup"; -import { useFormControl } from "@/components/FormControl"; -import { useRadioGroup } from "@/components/RadioGroup"; -import type * as T from "./HiddenInput.types"; +import { useCheckboxGroup } from "@/components/CheckboxGroup/index.js"; +import { useFormControl } from "@/components/FormControl/index.js"; +import { useRadioGroup } from "@/components/RadioGroup/index.js"; +import type * as T from "./HiddenInput.types.js"; import s from "./HiddenInput.module.css"; const HiddenInput: React.FC = (props) => { diff --git a/packages/reshaped/src/components/HiddenInput/HiddenInput.types.ts b/packages/reshaped/src/components/HiddenInput/HiddenInput.types.ts index aec1cbf4c..fd737e9cb 100644 --- a/packages/reshaped/src/components/HiddenInput/HiddenInput.types.ts +++ b/packages/reshaped/src/components/HiddenInput/HiddenInput.types.ts @@ -1,7 +1,7 @@ import type { ClassName } from "@reshaped/utilities"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Name of the input element */ diff --git a/packages/reshaped/src/components/HiddenInput/index.ts b/packages/reshaped/src/components/HiddenInput/index.ts index 48f37b12d..cb2e39efa 100644 --- a/packages/reshaped/src/components/HiddenInput/index.ts +++ b/packages/reshaped/src/components/HiddenInput/index.ts @@ -1,2 +1,2 @@ -export { default } from "./HiddenInput"; -export type { Props as HiddenInputProps } from "./HiddenInput.types"; +export { default } from "./HiddenInput.js"; +export type { Props as HiddenInputProps } from "./HiddenInput.types.js"; diff --git a/packages/reshaped/src/components/HiddenInput/tests/HiddenInput.stories.tsx b/packages/reshaped/src/components/HiddenInput/tests/HiddenInput.stories.tsx index 8f9dca8be..1b80a65d2 100644 --- a/packages/reshaped/src/components/HiddenInput/tests/HiddenInput.stories.tsx +++ b/packages/reshaped/src/components/HiddenInput/tests/HiddenInput.stories.tsx @@ -2,13 +2,13 @@ import { StoryObj } from "@storybook/react-vite"; import { useState } from "react"; import { expect, fn, userEvent } from "storybook/test"; -import Badge from "@/components/Badge"; -import CheckboxGroup from "@/components/CheckboxGroup"; -import FormControl from "@/components/FormControl"; -import HiddenInput from "@/components/HiddenInput"; -import RadioGroup from "@/components/RadioGroup"; -import View from "@/components/View"; -import Example from "@/utilities/storybook/Example"; +import Badge from "@/components/Badge/index.js"; +import CheckboxGroup from "@/components/CheckboxGroup/index.js"; +import FormControl from "@/components/FormControl/index.js"; +import HiddenInput from "@/components/HiddenInput/index.js"; +import RadioGroup from "@/components/RadioGroup/index.js"; +import View from "@/components/View/index.js"; +import Example from "@/utilities/storybook/Example.js"; export default { title: "Utility components/HiddenInput", diff --git a/packages/reshaped/src/components/HiddenVisually/HiddenVisually.tsx b/packages/reshaped/src/components/HiddenVisually/HiddenVisually.tsx index ffa27c901..69337613f 100644 --- a/packages/reshaped/src/components/HiddenVisually/HiddenVisually.tsx +++ b/packages/reshaped/src/components/HiddenVisually/HiddenVisually.tsx @@ -1,4 +1,4 @@ -import type * as T from "./HiddenVisually.types"; +import type * as T from "./HiddenVisually.types.js"; import s from "./HiddenVisually.module.css"; const HiddenVisually: React.FC = (props) => { diff --git a/packages/reshaped/src/components/HiddenVisually/index.ts b/packages/reshaped/src/components/HiddenVisually/index.ts index 40d9ba787..66c573124 100644 --- a/packages/reshaped/src/components/HiddenVisually/index.ts +++ b/packages/reshaped/src/components/HiddenVisually/index.ts @@ -1,2 +1,2 @@ -export { default } from "./HiddenVisually"; -export type { Props as HiddenVisuallyProps } from "./HiddenVisually.types"; +export { default } from "./HiddenVisually.js"; +export type { Props as HiddenVisuallyProps } from "./HiddenVisually.types.js"; diff --git a/packages/reshaped/src/components/HiddenVisually/tests/HiddenVisually.stories.tsx b/packages/reshaped/src/components/HiddenVisually/tests/HiddenVisually.stories.tsx index 8f1dee5df..7cd026d90 100644 --- a/packages/reshaped/src/components/HiddenVisually/tests/HiddenVisually.stories.tsx +++ b/packages/reshaped/src/components/HiddenVisually/tests/HiddenVisually.stories.tsx @@ -1,8 +1,8 @@ import { StoryObj } from "@storybook/react-vite"; import { expect } from "storybook/test"; -import HiddenVisually from "@/components/HiddenVisually"; -import { Example } from "@/utilities/storybook"; +import HiddenVisually from "@/components/HiddenVisually/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Utility components/HiddenVisually", diff --git a/packages/reshaped/src/components/Icon/Icon.tsx b/packages/reshaped/src/components/Icon/Icon.tsx index 6d543f725..66f955d18 100644 --- a/packages/reshaped/src/components/Icon/Icon.tsx +++ b/packages/reshaped/src/components/Icon/Icon.tsx @@ -1,8 +1,8 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import { resolveMixin } from "@/styles/mixin"; -import type * as T from "./Icon.types"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as T from "./Icon.types.js"; import s from "./Icon.module.css"; const Icon: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Icon/Icon.types.ts b/packages/reshaped/src/components/Icon/Icon.types.ts index eb95c6ec8..9e90f8ecf 100644 --- a/packages/reshaped/src/components/Icon/Icon.types.ts +++ b/packages/reshaped/src/components/Icon/Icon.types.ts @@ -1,8 +1,8 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Icon svg component or node */ diff --git a/packages/reshaped/src/components/Icon/index.ts b/packages/reshaped/src/components/Icon/index.ts index 2512a9d1b..ab81fbc36 100644 --- a/packages/reshaped/src/components/Icon/index.ts +++ b/packages/reshaped/src/components/Icon/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Icon"; -export type { Props as IconProps } from "./Icon.types"; +export { default } from "./Icon.js"; +export type { Props as IconProps } from "./Icon.types.js"; diff --git a/packages/reshaped/src/components/Icon/tests/Icon.stories.tsx b/packages/reshaped/src/components/Icon/tests/Icon.stories.tsx index 66733ac8b..1af01a8d8 100644 --- a/packages/reshaped/src/components/Icon/tests/Icon.stories.tsx +++ b/packages/reshaped/src/components/Icon/tests/Icon.stories.tsx @@ -1,12 +1,12 @@ import { StoryObj } from "@storybook/react-vite"; import { expect } from "storybook/test"; -import Icon from "@/components/Icon"; -import Text from "@/components/Text"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; -import IconMic from "@/icons/Mic"; -import IconZap from "@/icons/Zap"; +import Icon from "@/components/Icon/index.js"; +import Text from "@/components/Text/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; +import IconMic from "@/icons/Mic.js"; +import IconZap from "@/icons/Zap.js"; export default { title: "Utility components/Icon", diff --git a/packages/reshaped/src/components/IconToggle/IconToggle.tsx b/packages/reshaped/src/components/IconToggle/IconToggle.tsx index efe987647..a91188d9d 100644 --- a/packages/reshaped/src/components/IconToggle/IconToggle.tsx +++ b/packages/reshaped/src/components/IconToggle/IconToggle.tsx @@ -3,9 +3,9 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import Presence from "@/components/_private/Presence"; -import Icon from "@/components/Icon"; -import type * as T from "./IconToggle.types"; +import Presence from "@/components/_private/Presence/index.js"; +import Icon from "@/components/Icon/index.js"; +import type * as T from "./IconToggle.types.js"; import s from "./IconToggle.module.css"; const IconToggle: React.FC = (props) => { diff --git a/packages/reshaped/src/components/IconToggle/IconToggle.types.ts b/packages/reshaped/src/components/IconToggle/IconToggle.types.ts index b338c03d5..d0cfc1c2a 100644 --- a/packages/reshaped/src/components/IconToggle/IconToggle.types.ts +++ b/packages/reshaped/src/components/IconToggle/IconToggle.types.ts @@ -1,4 +1,4 @@ -import type { IconProps } from "@/components/Icon"; +import type { IconProps } from "@/components/Icon/index.js"; export type Props = IconProps & { /** Identity of the currently rendered icon, animating the change whenever it changes */ diff --git a/packages/reshaped/src/components/IconToggle/index.ts b/packages/reshaped/src/components/IconToggle/index.ts index daa91e20e..b2e17c283 100644 --- a/packages/reshaped/src/components/IconToggle/index.ts +++ b/packages/reshaped/src/components/IconToggle/index.ts @@ -1,2 +1,2 @@ -export { default } from "./IconToggle"; -export type { Props as IconToggleProps } from "./IconToggle.types"; +export { default } from "./IconToggle.js"; +export type { Props as IconToggleProps } from "./IconToggle.types.js"; diff --git a/packages/reshaped/src/components/IconToggle/tests/IconToggle.stories.tsx b/packages/reshaped/src/components/IconToggle/tests/IconToggle.stories.tsx index 974f35c0c..10be7e334 100644 --- a/packages/reshaped/src/components/IconToggle/tests/IconToggle.stories.tsx +++ b/packages/reshaped/src/components/IconToggle/tests/IconToggle.stories.tsx @@ -1,9 +1,9 @@ import React from "react"; -import Actionable from "@/components/Actionable"; -import IconToggle from "@/components/IconToggle"; -import IconCheckmark from "@/icons/Checkmark"; -import IconClose from "@/icons/Close"; +import Actionable from "@/components/Actionable/index.js"; +import IconToggle from "@/components/IconToggle/index.js"; +import IconCheckmark from "@/icons/Checkmark.js"; +import IconClose from "@/icons/Close.js"; export default { title: "Utility components/IconToggle", diff --git a/packages/reshaped/src/components/Image/Image.tsx b/packages/reshaped/src/components/Image/Image.tsx index 1716f5ffe..f34dc2695 100644 --- a/packages/reshaped/src/components/Image/Image.tsx +++ b/packages/reshaped/src/components/Image/Image.tsx @@ -3,8 +3,8 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import { resolveMixin } from "@/styles/mixin"; -import * as T from "./Image.types"; +import { resolveMixin } from "@/styles/mixin.js"; +import * as T from "./Image.types.js"; import s from "./Image.module.css"; const Image: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Image/Image.types.ts b/packages/reshaped/src/components/Image/Image.types.ts index 376e3711a..3aff3e91f 100644 --- a/packages/reshaped/src/components/Image/Image.types.ts +++ b/packages/reshaped/src/components/Image/Image.types.ts @@ -1,9 +1,9 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type * as TStyles from "@/styles/types"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as TStyles from "@/styles/types.js"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Image URL */ diff --git a/packages/reshaped/src/components/Image/index.ts b/packages/reshaped/src/components/Image/index.ts index 59a5ca8c2..a3341ff60 100644 --- a/packages/reshaped/src/components/Image/index.ts +++ b/packages/reshaped/src/components/Image/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Image"; -export type { Props as ImageProps } from "./Image.types"; +export { default } from "./Image.js"; +export type { Props as ImageProps } from "./Image.types.js"; diff --git a/packages/reshaped/src/components/Image/tests/Image.stories.tsx b/packages/reshaped/src/components/Image/tests/Image.stories.tsx index 93f1f8f0b..2f58fc27a 100644 --- a/packages/reshaped/src/components/Image/tests/Image.stories.tsx +++ b/packages/reshaped/src/components/Image/tests/Image.stories.tsx @@ -1,11 +1,11 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, Mock, waitFor } from "storybook/test"; -import Icon from "@/components/Icon"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; -import IconZap from "@/icons/Zap"; -import Image from "../Image"; +import Icon from "@/components/Icon/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; +import IconZap from "@/icons/Zap.js"; +import Image from "../Image.js"; export default { title: "Utility components/Image", diff --git a/packages/reshaped/src/components/Link/Link.tsx b/packages/reshaped/src/components/Link/Link.tsx index e7c042296..266680119 100644 --- a/packages/reshaped/src/components/Link/Link.tsx +++ b/packages/reshaped/src/components/Link/Link.tsx @@ -1,9 +1,9 @@ import { forwardRef } from "react"; import { classNames } from "@reshaped/utilities"; -import Actionable, { type ActionableRef } from "@/components/Actionable"; -import Icon from "@/components/Icon"; -import type * as T from "./Link.types"; +import Actionable, { type ActionableRef } from "@/components/Actionable/index.js"; +import Icon from "@/components/Icon/index.js"; +import type * as T from "./Link.types.js"; import s from "./Link.module.css"; const Link = forwardRef((props, ref) => { diff --git a/packages/reshaped/src/components/Link/Link.types.ts b/packages/reshaped/src/components/Link/Link.types.ts index 7fd3c4902..623915e9e 100644 --- a/packages/reshaped/src/components/Link/Link.types.ts +++ b/packages/reshaped/src/components/Link/Link.types.ts @@ -1,5 +1,5 @@ -import type { ActionableProps } from "@/components/Actionable"; -import type { IconProps } from "@/components/Icon"; +import type { ActionableProps } from "@/components/Actionable/index.js"; +import type { IconProps } from "@/components/Icon/index.js"; export type Props = Pick< ActionableProps, diff --git a/packages/reshaped/src/components/Link/index.ts b/packages/reshaped/src/components/Link/index.ts index 02ce17077..5b9602a95 100644 --- a/packages/reshaped/src/components/Link/index.ts +++ b/packages/reshaped/src/components/Link/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Link"; -export type { Props as LinkProps } from "./Link.types"; +export { default } from "./Link.js"; +export type { Props as LinkProps } from "./Link.types.js"; diff --git a/packages/reshaped/src/components/Link/tests/Link.stories.tsx b/packages/reshaped/src/components/Link/tests/Link.stories.tsx index 92bc07913..3e9ead6a1 100644 --- a/packages/reshaped/src/components/Link/tests/Link.stories.tsx +++ b/packages/reshaped/src/components/Link/tests/Link.stories.tsx @@ -1,10 +1,10 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import Link from "@/components/Link"; -import Text from "@/components/Text"; -import { Example } from "@/utilities/storybook"; -import IconZap from "@/icons/Zap"; +import Link from "@/components/Link/index.js"; +import Text from "@/components/Text/index.js"; +import { Example } from "@/utilities/storybook/index.js"; +import IconZap from "@/icons/Zap.js"; export default { title: "Components/Link", diff --git a/packages/reshaped/src/components/Loader/Loader.tsx b/packages/reshaped/src/components/Loader/Loader.tsx index 3124b785e..6f35bdd3a 100644 --- a/packages/reshaped/src/components/Loader/Loader.tsx +++ b/packages/reshaped/src/components/Loader/Loader.tsx @@ -1,7 +1,7 @@ import { classNames } from "@reshaped/utilities"; -import { responsiveClassNames } from "@/utilities/props"; -import type * as T from "./Loader.types"; +import { responsiveClassNames } from "@/utilities/props.js"; +import type * as T from "./Loader.types.js"; import s from "./Loader.module.css"; const Loader: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Loader/Loader.types.ts b/packages/reshaped/src/components/Loader/Loader.types.ts index b4d76cec0..44db4a06d 100644 --- a/packages/reshaped/src/components/Loader/Loader.types.ts +++ b/packages/reshaped/src/components/Loader/Loader.types.ts @@ -1,7 +1,7 @@ import type { ClassName } from "@reshaped/utilities"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Component size */ diff --git a/packages/reshaped/src/components/Loader/index.ts b/packages/reshaped/src/components/Loader/index.ts index 89bedd9e5..23288cf75 100644 --- a/packages/reshaped/src/components/Loader/index.ts +++ b/packages/reshaped/src/components/Loader/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Loader"; -export type { Props as LoaderProps } from "./Loader.types"; +export { default } from "./Loader.js"; +export type { Props as LoaderProps } from "./Loader.types.js"; diff --git a/packages/reshaped/src/components/Loader/tests/Loader.stories.tsx b/packages/reshaped/src/components/Loader/tests/Loader.stories.tsx index b284d9ad5..bd6ea6a1b 100644 --- a/packages/reshaped/src/components/Loader/tests/Loader.stories.tsx +++ b/packages/reshaped/src/components/Loader/tests/Loader.stories.tsx @@ -1,8 +1,8 @@ import { StoryObj } from "@storybook/react-vite"; import { expect } from "storybook/test"; -import Loader from "@/components/Loader"; -import { Example } from "@/utilities/storybook"; +import Loader from "@/components/Loader/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/Loader", diff --git a/packages/reshaped/src/components/LoaderText/LoaderText.tsx b/packages/reshaped/src/components/LoaderText/LoaderText.tsx index f3e33a82d..fa0c40243 100644 --- a/packages/reshaped/src/components/LoaderText/LoaderText.tsx +++ b/packages/reshaped/src/components/LoaderText/LoaderText.tsx @@ -1,8 +1,8 @@ import { classNames } from "@reshaped/utilities"; -import Text from "@/components/Text"; -import Icon from "../Icon"; -import type * as T from "./LoaderText.types"; +import Text from "@/components/Text/index.js"; +import Icon from "../Icon/index.js"; +import type * as T from "./LoaderText.types.js"; import s from "./LoaderText.module.css"; const LoaderText: React.FC = (props) => { diff --git a/packages/reshaped/src/components/LoaderText/LoaderText.types.ts b/packages/reshaped/src/components/LoaderText/LoaderText.types.ts index 6056cfa8f..d907b0be1 100644 --- a/packages/reshaped/src/components/LoaderText/LoaderText.types.ts +++ b/packages/reshaped/src/components/LoaderText/LoaderText.types.ts @@ -1,5 +1,5 @@ -import type { TextProps } from "@/components/Text"; -import type { IconProps } from "../Icon"; +import type { TextProps } from "@/components/Text/index.js"; +import type { IconProps } from "../Icon/index.js"; export type Props = Pick< TextProps, diff --git a/packages/reshaped/src/components/LoaderText/index.ts b/packages/reshaped/src/components/LoaderText/index.ts index 98653b562..4e6e99d07 100644 --- a/packages/reshaped/src/components/LoaderText/index.ts +++ b/packages/reshaped/src/components/LoaderText/index.ts @@ -1,2 +1,2 @@ -export { default } from "./LoaderText"; -export type { Props as LoaderTextProps } from "./LoaderText.types"; +export { default } from "./LoaderText.js"; +export type { Props as LoaderTextProps } from "./LoaderText.types.js"; diff --git a/packages/reshaped/src/components/LoaderText/tests/LoaderText.stories.tsx b/packages/reshaped/src/components/LoaderText/tests/LoaderText.stories.tsx index a03fd37f0..e7418e6e2 100644 --- a/packages/reshaped/src/components/LoaderText/tests/LoaderText.stories.tsx +++ b/packages/reshaped/src/components/LoaderText/tests/LoaderText.stories.tsx @@ -1,11 +1,11 @@ import { StoryObj } from "@storybook/react-vite"; import { expect } from "storybook/test"; -import Actionable from "@/components/Actionable"; -import LoaderText from "@/components/LoaderText"; -import useToggle from "@/hooks/useToggle"; -import { Example } from "@/utilities/storybook"; -import IconMicrophone from "@/icons/Mic"; +import Actionable from "@/components/Actionable/index.js"; +import LoaderText from "@/components/LoaderText/index.js"; +import useToggle from "@/hooks/useToggle.js"; +import { Example } from "@/utilities/storybook/index.js"; +import IconMicrophone from "@/icons/Mic.js"; export default { title: "Components/LoaderText", diff --git a/packages/reshaped/src/components/MenuItem/MenuItem.tsx b/packages/reshaped/src/components/MenuItem/MenuItem.tsx index 77da58ed6..d50849423 100644 --- a/packages/reshaped/src/components/MenuItem/MenuItem.tsx +++ b/packages/reshaped/src/components/MenuItem/MenuItem.tsx @@ -1,11 +1,11 @@ import { forwardRef } from "react"; import { classNames } from "@reshaped/utilities"; -import Actionable, { type ActionableRef } from "@/components/Actionable"; -import Icon from "@/components/Icon"; -import View from "@/components/View"; -import { responsiveClassNames, responsivePropDependency } from "@/utilities/props"; -import type * as T from "./MenuItem.types"; +import Actionable, { type ActionableRef } from "@/components/Actionable/index.js"; +import Icon from "@/components/Icon/index.js"; +import View from "@/components/View/index.js"; +import { responsiveClassNames, responsivePropDependency } from "@/utilities/props.js"; +import type * as T from "./MenuItem.types.js"; import s from "./MenuItem.module.css"; const MenuItem = forwardRef((props, ref) => { diff --git a/packages/reshaped/src/components/MenuItem/MenuItem.types.ts b/packages/reshaped/src/components/MenuItem/MenuItem.types.ts index 7a4d757c2..7adec80d7 100644 --- a/packages/reshaped/src/components/MenuItem/MenuItem.types.ts +++ b/packages/reshaped/src/components/MenuItem/MenuItem.types.ts @@ -1,10 +1,10 @@ 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 * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type { ActionableProps } from "@/components/Actionable/index.js"; +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 Size = "small" | "medium" | "large"; diff --git a/packages/reshaped/src/components/MenuItem/MenuItemAligner.tsx b/packages/reshaped/src/components/MenuItem/MenuItemAligner.tsx index 1cb5ec253..e007bbea8 100644 --- a/packages/reshaped/src/components/MenuItem/MenuItemAligner.tsx +++ b/packages/reshaped/src/components/MenuItem/MenuItemAligner.tsx @@ -1,4 +1,4 @@ -import Aligner, { type AlignerProps } from "@/components/_private/Aligner"; +import Aligner, { type AlignerProps } from "@/components/_private/Aligner/index.js"; import s from "./MenuItem.module.css"; const MenuItemAligner: React.FC = (props) => { diff --git a/packages/reshaped/src/components/MenuItem/index.ts b/packages/reshaped/src/components/MenuItem/index.ts index 42fb46787..e69a3dd08 100644 --- a/packages/reshaped/src/components/MenuItem/index.ts +++ b/packages/reshaped/src/components/MenuItem/index.ts @@ -1,5 +1,5 @@ -import MenuItem from "./MenuItem"; -import MenuItemAligner from "./MenuItemAligner"; +import MenuItem from "./MenuItem.js"; +import MenuItemAligner from "./MenuItemAligner.js"; const MenuItemRoot = MenuItem as typeof MenuItem & { Aligner: typeof MenuItemAligner; @@ -8,4 +8,4 @@ const MenuItemRoot = MenuItem as typeof MenuItem & { MenuItemRoot.Aligner = MenuItemAligner; export default MenuItemRoot; -export type { Props as MenuItemProps } from "./MenuItem.types"; +export type { Props as MenuItemProps } from "./MenuItem.types.js"; diff --git a/packages/reshaped/src/components/MenuItem/tests/MenuItem.stories.tsx b/packages/reshaped/src/components/MenuItem/tests/MenuItem.stories.tsx index 9a4a97b36..5586d039d 100644 --- a/packages/reshaped/src/components/MenuItem/tests/MenuItem.stories.tsx +++ b/packages/reshaped/src/components/MenuItem/tests/MenuItem.stories.tsx @@ -1,12 +1,12 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import Badge from "@/components/Badge"; -import MenuItem from "@/components/MenuItem"; -import Text from "@/components/Text"; -import View from "@/components/View"; -import { Example, Placeholder } from "@/utilities/storybook"; -import IconZap from "@/icons/Zap"; +import Badge from "@/components/Badge/index.js"; +import MenuItem from "@/components/MenuItem/index.js"; +import Text from "@/components/Text/index.js"; +import View from "@/components/View/index.js"; +import { Example, Placeholder } from "@/utilities/storybook/index.js"; +import IconZap from "@/icons/Zap.js"; export default { title: "Components/MenuItem", diff --git a/packages/reshaped/src/components/Modal/Modal.tsx b/packages/reshaped/src/components/Modal/Modal.tsx index b80ca4fc4..efba8f571 100644 --- a/packages/reshaped/src/components/Modal/Modal.tsx +++ b/packages/reshaped/src/components/Modal/Modal.tsx @@ -3,14 +3,14 @@ import { createContext, useContext, useEffect, useMemo, useState, useRef, type FC } from "react"; import { classNames } from "@reshaped/utilities"; -import Overlay, { type OverlayInstance } from "@/components/Overlay"; -import Text from "@/components/Text"; -import useElementId from "@/hooks/useElementId"; -import useResponsiveClientValue from "@/hooks/useResponsiveClientValue"; -import { responsiveClassNames, responsiveVariables } from "@/utilities/props"; -import { resolveMixin } from "@/styles/mixin"; -import type * as T from "./Modal.types"; -import useModalDrag from "./useModalDrag"; +import Overlay, { type OverlayInstance } from "@/components/Overlay/index.js"; +import Text from "@/components/Text/index.js"; +import useElementId from "@/hooks/useElementId.js"; +import useResponsiveClientValue from "@/hooks/useResponsiveClientValue.js"; +import { responsiveClassNames, responsiveVariables } from "@/utilities/props.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as T from "./Modal.types.js"; +import useModalDrag from "./useModalDrag.js"; import s from "./Modal.module.css"; const Context = createContext({ diff --git a/packages/reshaped/src/components/Modal/Modal.types.ts b/packages/reshaped/src/components/Modal/Modal.types.ts index 6e4cad2c6..1df678390 100644 --- a/packages/reshaped/src/components/Modal/Modal.types.ts +++ b/packages/reshaped/src/components/Modal/Modal.types.ts @@ -1,9 +1,9 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { OverlayCloseReason, OverlayProps } from "@/components/Overlay"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type { OverlayCloseReason, OverlayProps } from "@/components/Overlay/index.js"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Position = "center" | "end" | "bottom" | "start" | "full-screen"; diff --git a/packages/reshaped/src/components/Modal/index.ts b/packages/reshaped/src/components/Modal/index.ts index 90f4990fc..dccf11542 100644 --- a/packages/reshaped/src/components/Modal/index.ts +++ b/packages/reshaped/src/components/Modal/index.ts @@ -1,4 +1,4 @@ -import Modal, { ModalSubtitle, ModalTitle } from "./Modal"; +import Modal, { ModalSubtitle, ModalTitle } from "./Modal.js"; const ModalRoot = Modal as typeof Modal & { Title: typeof ModalTitle; @@ -9,4 +9,4 @@ ModalRoot.Title = ModalTitle; ModalRoot.Subtitle = ModalSubtitle; export default ModalRoot; -export type { Props as ModalProps } from "./Modal.types"; +export type { Props as ModalProps } from "./Modal.types.js"; diff --git a/packages/reshaped/src/components/Modal/tests/Modal.stories.tsx b/packages/reshaped/src/components/Modal/tests/Modal.stories.tsx index ad8ee6033..0e21e3e2b 100644 --- a/packages/reshaped/src/components/Modal/tests/Modal.stories.tsx +++ b/packages/reshaped/src/components/Modal/tests/Modal.stories.tsx @@ -2,17 +2,17 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fn, userEvent, waitFor, within } from "storybook/test"; -import Button from "@/components/Button"; -import Dismissible from "@/components/Dismissible"; -import DropdownMenu from "@/components/DropdownMenu"; -import Modal, { type ModalProps } from "@/components/Modal"; -import Radio from "@/components/Radio"; -import Switch from "@/components/Switch"; -import TextField from "@/components/TextField"; -import View from "@/components/View"; -import useToggle from "@/hooks/useToggle"; -import { sleep } from "@/utilities/helpers"; -import { Example, Placeholder } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import Dismissible from "@/components/Dismissible/index.js"; +import DropdownMenu from "@/components/DropdownMenu/index.js"; +import Modal, { type ModalProps } from "@/components/Modal/index.js"; +import Radio from "@/components/Radio/index.js"; +import Switch from "@/components/Switch/index.js"; +import TextField from "@/components/TextField/index.js"; +import View from "@/components/View/index.js"; +import useToggle from "@/hooks/useToggle.js"; +import { sleep } from "@/utilities/helpers.js"; +import { Example, Placeholder } from "@/utilities/storybook/index.js"; export default { title: "Components/Modal", diff --git a/packages/reshaped/src/components/Modal/useModalDrag.ts b/packages/reshaped/src/components/Modal/useModalDrag.ts index e5f748087..1c57091a0 100644 --- a/packages/reshaped/src/components/Modal/useModalDrag.ts +++ b/packages/reshaped/src/components/Modal/useModalDrag.ts @@ -3,11 +3,11 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { enableScroll, disableScroll } from "@reshaped/utilities/internal"; -import type { OverlayInstance } from "@/components/Overlay"; -import useHandlerRef from "@/hooks/useHandlerRef"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import { resolveSpringTransition } from "@/utilities/animation"; -import type * as T from "./Modal.types"; +import type { OverlayInstance } from "@/components/Overlay/index.js"; +import useHandlerRef from "@/hooks/useHandlerRef.js"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import { resolveSpringTransition } from "@/utilities/animation.js"; +import type * as T from "./Modal.types.js"; /** Distance in px the modal has to be dragged before it starts following the finger */ const THRESHOLD = 32; diff --git a/packages/reshaped/src/components/NumberField/NumberField.tsx b/packages/reshaped/src/components/NumberField/NumberField.tsx index 85c630b3c..92cb57448 100644 --- a/packages/reshaped/src/components/NumberField/NumberField.tsx +++ b/packages/reshaped/src/components/NumberField/NumberField.tsx @@ -1,6 +1,6 @@ -import type * as T from "./NumberField.types"; -import NumberFieldControlled from "./NumberFieldControlled"; -import NumberFieldUncontrolled from "./NumberFieldUncontrolled"; +import type * as T from "./NumberField.types.js"; +import NumberFieldControlled from "./NumberFieldControlled.js"; +import NumberFieldUncontrolled from "./NumberFieldUncontrolled.js"; const NumberField: React.FC = (props) => { const { value } = props; diff --git a/packages/reshaped/src/components/NumberField/NumberField.types.ts b/packages/reshaped/src/components/NumberField/NumberField.types.ts index ec44b8883..235f30357 100644 --- a/packages/reshaped/src/components/NumberField/NumberField.types.ts +++ b/packages/reshaped/src/components/NumberField/NumberField.types.ts @@ -1,5 +1,5 @@ -import type { TextFieldBaseProps } from "@/components/TextField"; -import type * as G from "@/types/global"; +import type { TextFieldBaseProps } from "@/components/TextField/index.js"; +import type * as G from "@/types/global.js"; export type BaseProps = Omit< TextFieldBaseProps, diff --git a/packages/reshaped/src/components/NumberField/NumberFieldControlled.tsx b/packages/reshaped/src/components/NumberField/NumberFieldControlled.tsx index 163548ae8..d34e856eb 100644 --- a/packages/reshaped/src/components/NumberField/NumberFieldControlled.tsx +++ b/packages/reshaped/src/components/NumberField/NumberFieldControlled.tsx @@ -2,20 +2,20 @@ import React from "react"; -import Actionable from "@/components/Actionable"; -import { useFormControl } from "@/components/FormControl"; -import Icon from "@/components/Icon"; -import TextField, { TextFieldProps } from "@/components/TextField"; -import useElementId from "@/hooks/useElementId"; -import useHandlerRef from "@/hooks/useHandlerRef"; -import useHotkeys from "@/hooks/useHotkeys"; -import { responsiveClassNames, responsivePropDependency } from "@/utilities/props"; -import * as keys from "@/constants/keys"; -import IconChevronDown from "@/icons/ChevronDown"; -import IconChevronUp from "@/icons/ChevronUp"; -import IconMinus from "@/icons/Minus"; -import IconPlus from "@/icons/Plus"; -import type * as T from "./NumberField.types"; +import Actionable from "@/components/Actionable/index.js"; +import { useFormControl } from "@/components/FormControl/index.js"; +import Icon from "@/components/Icon/index.js"; +import TextField, { 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 { responsiveClassNames, responsivePropDependency } from "@/utilities/props.js"; +import * as keys from "@/constants/keys.js"; +import IconChevronDown from "@/icons/ChevronDown.js"; +import IconChevronUp from "@/icons/ChevronUp.js"; +import IconMinus from "@/icons/Minus.js"; +import IconPlus from "@/icons/Plus.js"; +import type * as T from "./NumberField.types.js"; import s from "./NumberField.module.css"; const NumberFieldControlled: React.FC = (props) => { diff --git a/packages/reshaped/src/components/NumberField/NumberFieldUncontrolled.tsx b/packages/reshaped/src/components/NumberField/NumberFieldUncontrolled.tsx index 7d201b5dd..692ad0569 100644 --- a/packages/reshaped/src/components/NumberField/NumberFieldUncontrolled.tsx +++ b/packages/reshaped/src/components/NumberField/NumberFieldUncontrolled.tsx @@ -2,8 +2,8 @@ import React from "react"; -import type * as T from "./NumberField.types"; -import NumberFieldControlled from "./NumberFieldControlled"; +import type * as T from "./NumberField.types.js"; +import NumberFieldControlled from "./NumberFieldControlled.js"; const NumberFieldUncontrolled: React.FC = (props) => { const { defaultValue, onChange } = props; diff --git a/packages/reshaped/src/components/NumberField/index.ts b/packages/reshaped/src/components/NumberField/index.ts index 9ce3b5717..85ace4290 100644 --- a/packages/reshaped/src/components/NumberField/index.ts +++ b/packages/reshaped/src/components/NumberField/index.ts @@ -1,2 +1,2 @@ -export { default } from "./NumberField"; -export type { Props as NumberFieldProps } from "./NumberField.types"; +export { default } from "./NumberField.js"; +export type { Props as NumberFieldProps } from "./NumberField.types.js"; diff --git a/packages/reshaped/src/components/NumberField/tests/NumberField.stories.tsx b/packages/reshaped/src/components/NumberField/tests/NumberField.stories.tsx index 9fee38c48..cf33375f5 100644 --- a/packages/reshaped/src/components/NumberField/tests/NumberField.stories.tsx +++ b/packages/reshaped/src/components/NumberField/tests/NumberField.stories.tsx @@ -1,9 +1,9 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, Mock, userEvent } from "storybook/test"; -import FormControl from "@/components/FormControl"; -import NumberField from "@/components/NumberField"; -import { Example } from "@/utilities/storybook"; +import FormControl from "@/components/FormControl/index.js"; +import NumberField from "@/components/NumberField/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/NumberField", diff --git a/packages/reshaped/src/components/Overlay/Overlay.tsx b/packages/reshaped/src/components/Overlay/Overlay.tsx index f2a37fee3..108850e4d 100644 --- a/packages/reshaped/src/components/Overlay/Overlay.tsx +++ b/packages/reshaped/src/components/Overlay/Overlay.tsx @@ -4,15 +4,15 @@ import React from "react"; import { TrapFocus, classNames } from "@reshaped/utilities"; import { type FocusableElement } from "@reshaped/utilities/internal"; -import Portal from "@/components/_private/Portal"; -import useHandlerRef from "@/hooks/useHandlerRef"; -import useHotkeys from "@/hooks/useHotkeys"; -import useIsDismissible from "@/hooks/useIsDismissible"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import useScrollLock from "@/hooks/useScrollLock"; -import useToggle from "@/hooks/useToggle"; -import { onNextFrame, checkTransitions } from "@/utilities/animation"; -import type * as T from "./Overlay.types"; +import Portal from "@/components/_private/Portal/index.js"; +import useHandlerRef from "@/hooks/useHandlerRef.js"; +import useHotkeys from "@/hooks/useHotkeys.js"; +import useIsDismissible from "@/hooks/useIsDismissible.js"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import useScrollLock from "@/hooks/useScrollLock.js"; +import useToggle from "@/hooks/useToggle.js"; +import { onNextFrame, checkTransitions } from "@/utilities/animation.js"; +import type * as T from "./Overlay.types.js"; import s from "./Overlay.module.css"; const Overlay: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Overlay/Overlay.types.ts b/packages/reshaped/src/components/Overlay/Overlay.types.ts index 8c10c8b4d..03e620c5d 100644 --- a/packages/reshaped/src/components/Overlay/Overlay.types.ts +++ b/packages/reshaped/src/components/Overlay/Overlay.types.ts @@ -1,7 +1,7 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { Attributes } from "@/types/global"; +import type { Attributes } from "@/types/global.js"; export type CloseReason = "overlay-click" | "escape-key"; diff --git a/packages/reshaped/src/components/Overlay/index.tsx b/packages/reshaped/src/components/Overlay/index.tsx index 6afc4eabc..90c0925d1 100644 --- a/packages/reshaped/src/components/Overlay/index.tsx +++ b/packages/reshaped/src/components/Overlay/index.tsx @@ -1,6 +1,6 @@ -export { default } from "./Overlay"; +export { default } from "./Overlay.js"; export type { Instance as OverlayInstance, CloseReason as OverlayCloseReason, Props as OverlayProps, -} from "./Overlay.types"; +} from "./Overlay.types.js"; diff --git a/packages/reshaped/src/components/Overlay/tests/Overlay.stories.tsx b/packages/reshaped/src/components/Overlay/tests/Overlay.stories.tsx index 56759b626..2a33e82fe 100644 --- a/packages/reshaped/src/components/Overlay/tests/Overlay.stories.tsx +++ b/packages/reshaped/src/components/Overlay/tests/Overlay.stories.tsx @@ -3,12 +3,12 @@ import React from "react"; import ReactDOM from "react-dom"; import { expect, fn, Mock, userEvent, waitFor, within } from "storybook/test"; -import Button from "@/components/Button"; -import Overlay from "@/components/Overlay"; -import View from "@/components/View"; -import useToggle from "@/hooks/useToggle"; -import { sleep } from "@/utilities/helpers"; -import { Example } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import Overlay from "@/components/Overlay/index.js"; +import View from "@/components/View/index.js"; +import useToggle from "@/hooks/useToggle.js"; +import { sleep } from "@/utilities/helpers.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Utility components/Overlay", diff --git a/packages/reshaped/src/components/Pagination/Pagination.tsx b/packages/reshaped/src/components/Pagination/Pagination.tsx index 674cbb2dd..fe297de89 100644 --- a/packages/reshaped/src/components/Pagination/Pagination.tsx +++ b/packages/reshaped/src/components/Pagination/Pagination.tsx @@ -1,6 +1,6 @@ -import * as T from "./Pagination.types"; -import PaginationControlled from "./PaginationControlled"; -import PaginationUncontrolled from "./PaginationUncontrolled"; +import * as T from "./Pagination.types.js"; +import PaginationControlled from "./PaginationControlled.js"; +import PaginationUncontrolled from "./PaginationUncontrolled.js"; const Pagination: React.FC = (props) => { const { page } = props; diff --git a/packages/reshaped/src/components/Pagination/Pagination.types.ts b/packages/reshaped/src/components/Pagination/Pagination.types.ts index 62c38b50f..c3dfc436d 100644 --- a/packages/reshaped/src/components/Pagination/Pagination.types.ts +++ b/packages/reshaped/src/components/Pagination/Pagination.types.ts @@ -1,6 +1,6 @@ import type { ClassName } from "@reshaped/utilities"; -import type { Attributes } from "@/types/global"; +import type { Attributes } from "@/types/global.js"; export type BaseProps = { /** Total number of pages available */ diff --git a/packages/reshaped/src/components/Pagination/PaginationControlled.tsx b/packages/reshaped/src/components/Pagination/PaginationControlled.tsx index aff6fe1cb..bf81faee3 100644 --- a/packages/reshaped/src/components/Pagination/PaginationControlled.tsx +++ b/packages/reshaped/src/components/Pagination/PaginationControlled.tsx @@ -1,11 +1,11 @@ "use client"; -import Button from "@/components/Button"; -import View from "@/components/View"; -import { range } from "@/utilities/helpers"; -import IconChevronLeft from "@/icons/ChevronLeft"; -import IconChevronRight from "@/icons/ChevronRight"; -import type * as T from "./Pagination.types"; +import Button from "@/components/Button/index.js"; +import View from "@/components/View/index.js"; +import { range } from "@/utilities/helpers.js"; +import IconChevronLeft from "@/icons/ChevronLeft.js"; +import IconChevronRight from "@/icons/ChevronRight.js"; +import type * as T from "./Pagination.types.js"; import s from "./Pagination.module.css"; const PaginationControlled: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Pagination/PaginationUncontrolled.tsx b/packages/reshaped/src/components/Pagination/PaginationUncontrolled.tsx index a0a89d2f9..cf1aa65ea 100644 --- a/packages/reshaped/src/components/Pagination/PaginationUncontrolled.tsx +++ b/packages/reshaped/src/components/Pagination/PaginationUncontrolled.tsx @@ -2,8 +2,8 @@ import React from "react"; -import * as T from "./Pagination.types"; -import PaginationControlled from "./PaginationControlled"; +import * as T from "./Pagination.types.js"; +import PaginationControlled from "./PaginationControlled.js"; const PaginationUncontrolled: React.FC = (props) => { const { defaultPage = 1, onChange, ...controlledProps } = props; diff --git a/packages/reshaped/src/components/Pagination/index.ts b/packages/reshaped/src/components/Pagination/index.ts index 501c956d8..524df8639 100644 --- a/packages/reshaped/src/components/Pagination/index.ts +++ b/packages/reshaped/src/components/Pagination/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Pagination"; -export type { Props as PaginationProps } from "./Pagination.types"; +export { default } from "./Pagination.js"; +export type { Props as PaginationProps } from "./Pagination.types.js"; diff --git a/packages/reshaped/src/components/Pagination/tests/Pagination.stories.tsx b/packages/reshaped/src/components/Pagination/tests/Pagination.stories.tsx index acc325012..c1e4b9765 100644 --- a/packages/reshaped/src/components/Pagination/tests/Pagination.stories.tsx +++ b/packages/reshaped/src/components/Pagination/tests/Pagination.stories.tsx @@ -1,8 +1,8 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent, within } from "storybook/test"; -import Pagination from "@/components/Pagination"; -import { Example } from "@/utilities/storybook"; +import Pagination from "@/components/Pagination/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/Pagination", diff --git a/packages/reshaped/src/components/PinField/PinField.tsx b/packages/reshaped/src/components/PinField/PinField.tsx index 85248a5df..699c539b1 100644 --- a/packages/reshaped/src/components/PinField/PinField.tsx +++ b/packages/reshaped/src/components/PinField/PinField.tsx @@ -1,6 +1,6 @@ -import type * as T from "./PinField.types"; -import PinFieldControlled from "./PinFieldControlled"; -import PinFieldUncontrolled from "./PinFieldUncontrolled"; +import type * as T from "./PinField.types.js"; +import PinFieldControlled from "./PinFieldControlled.js"; +import PinFieldUncontrolled from "./PinFieldUncontrolled.js"; const PinField: React.FC = (props) => { const { value } = props; diff --git a/packages/reshaped/src/components/PinField/PinField.types.ts b/packages/reshaped/src/components/PinField/PinField.types.ts index 9345880e1..d9e79cb89 100644 --- a/packages/reshaped/src/components/PinField/PinField.types.ts +++ b/packages/reshaped/src/components/PinField/PinField.types.ts @@ -1,7 +1,7 @@ import type { ClassName } from "@reshaped/utilities"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Size = "small" | "medium" | "large" | "xlarge"; diff --git a/packages/reshaped/src/components/PinField/PinFieldControlled.tsx b/packages/reshaped/src/components/PinField/PinFieldControlled.tsx index a5861b205..de1be23e4 100644 --- a/packages/reshaped/src/components/PinField/PinFieldControlled.tsx +++ b/packages/reshaped/src/components/PinField/PinFieldControlled.tsx @@ -2,19 +2,19 @@ import React from "react"; -import { useFormControl } from "@/components/FormControl"; -import Text from "@/components/Text"; -import View from "@/components/View"; -import useHotkeys from "@/hooks/useHotkeys"; -import { onNextFrame } from "@/utilities/animation"; -import { responsivePropDependency } from "@/utilities/props"; -import * as keys from "@/constants/keys"; +import { useFormControl } from "@/components/FormControl/index.js"; +import Text from "@/components/Text/index.js"; +import View from "@/components/View/index.js"; +import useHotkeys from "@/hooks/useHotkeys.js"; +import { onNextFrame } from "@/utilities/animation.js"; +import { responsivePropDependency } from "@/utilities/props.js"; +import * as keys from "@/constants/keys.js"; import { regExpAlphabeticChar, regExpAlphaNumericChar, regExpNumericChar, -} from "./PinField.constants"; -import type * as T from "./PinField.types"; +} from "./PinField.constants.js"; +import type * as T from "./PinField.types.js"; import s from "./PinField.module.css"; const sizeMap: Record = { diff --git a/packages/reshaped/src/components/PinField/PinFieldUncontrolled.tsx b/packages/reshaped/src/components/PinField/PinFieldUncontrolled.tsx index 7bed8ce51..3173491d1 100644 --- a/packages/reshaped/src/components/PinField/PinFieldUncontrolled.tsx +++ b/packages/reshaped/src/components/PinField/PinFieldUncontrolled.tsx @@ -2,8 +2,8 @@ import React from "react"; -import type * as T from "./PinField.types"; -import PinFieldControlled from "./PinFieldControlled"; +import type * as T from "./PinField.types.js"; +import PinFieldControlled from "./PinFieldControlled.js"; const PinFieldUncontrolled: React.FC = (props) => { const { defaultValue, onChange, ...controlledProps } = props; diff --git a/packages/reshaped/src/components/PinField/index.ts b/packages/reshaped/src/components/PinField/index.ts index 5c8f232e9..da7e3f00f 100644 --- a/packages/reshaped/src/components/PinField/index.ts +++ b/packages/reshaped/src/components/PinField/index.ts @@ -1,2 +1,2 @@ -export { default } from "./PinField"; -export type { Props as PinFieldProps } from "./PinField.types"; +export { default } from "./PinField.js"; +export type { Props as PinFieldProps } from "./PinField.types.js"; diff --git a/packages/reshaped/src/components/PinField/tests/PinField.stories.tsx b/packages/reshaped/src/components/PinField/tests/PinField.stories.tsx index 2036a4a3d..7e049e430 100644 --- a/packages/reshaped/src/components/PinField/tests/PinField.stories.tsx +++ b/packages/reshaped/src/components/PinField/tests/PinField.stories.tsx @@ -1,9 +1,9 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent, waitFor } from "storybook/test"; -import FormControl from "@/components/FormControl"; -import PinField from "@/components/PinField"; -import { Example } from "@/utilities/storybook"; +import FormControl from "@/components/FormControl/index.js"; +import PinField from "@/components/PinField/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/PinField", diff --git a/packages/reshaped/src/components/Popover/Popover.tsx b/packages/reshaped/src/components/Popover/Popover.tsx index dc911829e..3f39f9745 100644 --- a/packages/reshaped/src/components/Popover/Popover.tsx +++ b/packages/reshaped/src/components/Popover/Popover.tsx @@ -1,9 +1,9 @@ import { classNames } from "@reshaped/utilities"; -import Dismissible, { type DismissibleProps } from "@/components/Dismissible"; -import Flyout, { type FlyoutProps, useFlyoutContext } from "@/components/Flyout"; -import { resolveMixin } from "@/styles/mixin"; -import type * as T from "./Popover.types"; +import Dismissible, { type DismissibleProps } from "@/components/Dismissible/index.js"; +import Flyout, { type FlyoutProps, useFlyoutContext } from "@/components/Flyout/index.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as T from "./Popover.types.js"; import s from "./Popover.module.css"; const Popover: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Popover/Popover.types.ts b/packages/reshaped/src/components/Popover/Popover.types.ts index f09998e1a..18a6d3736 100644 --- a/packages/reshaped/src/components/Popover/Popover.types.ts +++ b/packages/reshaped/src/components/Popover/Popover.types.ts @@ -1,6 +1,6 @@ import type React from "react"; -import type { FlyoutInstance, FlyoutProps } from "@/components/Flyout"; +import type { FlyoutInstance, FlyoutProps } from "@/components/Flyout/index.js"; export type Instance = FlyoutInstance; diff --git a/packages/reshaped/src/components/Popover/index.ts b/packages/reshaped/src/components/Popover/index.ts index 98ff9a298..0268b07df 100644 --- a/packages/reshaped/src/components/Popover/index.ts +++ b/packages/reshaped/src/components/Popover/index.ts @@ -1,5 +1,5 @@ -import Flyout from "@/components/Flyout"; -import Popover, { PopoverDismissible } from "./Popover"; +import Flyout from "@/components/Flyout/index.js"; +import Popover, { PopoverDismissible } from "./Popover.js"; const PopoverRoot = Popover as typeof Popover & { Dismissible: typeof PopoverDismissible; @@ -12,4 +12,4 @@ PopoverRoot.Trigger = Flyout.Trigger; PopoverRoot.Content = Flyout.Content; export default PopoverRoot; -export type { Instance as PopoverInstance, Props as PopoverProps } from "./Popover.types"; +export type { Instance as PopoverInstance, Props as PopoverProps } from "./Popover.types.js"; diff --git a/packages/reshaped/src/components/Popover/tests/Popover.stories.tsx b/packages/reshaped/src/components/Popover/tests/Popover.stories.tsx index 8e6631828..75b946879 100644 --- a/packages/reshaped/src/components/Popover/tests/Popover.stories.tsx +++ b/packages/reshaped/src/components/Popover/tests/Popover.stories.tsx @@ -2,14 +2,14 @@ import { StoryObj } from "@storybook/react-vite"; import { useId, useState } from "react"; import { expect, fn, userEvent, waitFor, within } from "storybook/test"; -import Button from "@/components/Button"; -import MenuItem from "@/components/MenuItem"; -import Popover, { type PopoverProps } from "@/components/Popover"; -import ScrollArea from "@/components/ScrollArea"; -import Tooltip from "@/components/Tooltip"; -import View from "@/components/View"; -import { sleep } from "@/utilities/helpers"; -import { Example } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import MenuItem from "@/components/MenuItem/index.js"; +import Popover, { type PopoverProps } from "@/components/Popover/index.js"; +import ScrollArea from "@/components/ScrollArea/index.js"; +import Tooltip from "@/components/Tooltip/index.js"; +import View from "@/components/View/index.js"; +import { sleep } from "@/utilities/helpers.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/Popover", diff --git a/packages/reshaped/src/components/ProgressBar/ProgressBar.tsx b/packages/reshaped/src/components/ProgressBar/ProgressBar.tsx index b8425c9ea..bc0d7927c 100644 --- a/packages/reshaped/src/components/ProgressBar/ProgressBar.tsx +++ b/packages/reshaped/src/components/ProgressBar/ProgressBar.tsx @@ -1,7 +1,7 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import type * as T from "./ProgressBar.types"; +import type * as T from "./ProgressBar.types.js"; import s from "./ProgressBar.module.css"; const ProgressBar: React.FC = (props) => { diff --git a/packages/reshaped/src/components/ProgressBar/ProgressBar.types.ts b/packages/reshaped/src/components/ProgressBar/ProgressBar.types.ts index 03bbbb46a..cf495a44a 100644 --- a/packages/reshaped/src/components/ProgressBar/ProgressBar.types.ts +++ b/packages/reshaped/src/components/ProgressBar/ProgressBar.types.ts @@ -1,6 +1,6 @@ import type { ClassName } from "@reshaped/utilities"; -import type { Attributes } from "@/types/global"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Value of the progress bar controlling the size of the fill */ diff --git a/packages/reshaped/src/components/ProgressBar/index.ts b/packages/reshaped/src/components/ProgressBar/index.ts index 9ee6851cd..93bed3ebb 100644 --- a/packages/reshaped/src/components/ProgressBar/index.ts +++ b/packages/reshaped/src/components/ProgressBar/index.ts @@ -1,2 +1,2 @@ -export { default } from "./ProgressBar"; -export type { Props as ProgressBarProps } from "./ProgressBar.types"; +export { default } from "./ProgressBar.js"; +export type { Props as ProgressBarProps } from "./ProgressBar.types.js"; diff --git a/packages/reshaped/src/components/ProgressBar/tests/ProgressBar.stories.tsx b/packages/reshaped/src/components/ProgressBar/tests/ProgressBar.stories.tsx index 6ce9822fd..dce93b6ff 100644 --- a/packages/reshaped/src/components/ProgressBar/tests/ProgressBar.stories.tsx +++ b/packages/reshaped/src/components/ProgressBar/tests/ProgressBar.stories.tsx @@ -2,10 +2,10 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect } from "storybook/test"; -import Button from "@/components/Button"; -import ProgressBar from "@/components/ProgressBar"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import ProgressBar from "@/components/ProgressBar/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/ProgressBar", diff --git a/packages/reshaped/src/components/ProgressIndicator/ProgressIndicator.tsx b/packages/reshaped/src/components/ProgressIndicator/ProgressIndicator.tsx index 7c94308be..ead512762 100644 --- a/packages/reshaped/src/components/ProgressIndicator/ProgressIndicator.tsx +++ b/packages/reshaped/src/components/ProgressIndicator/ProgressIndicator.tsx @@ -3,7 +3,7 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import type * as T from "./ProgressIndicator.types"; +import type * as T from "./ProgressIndicator.types.js"; import s from "./ProgressIndicator.module.css"; const VISIBLE_ITEMS = 7; diff --git a/packages/reshaped/src/components/ProgressIndicator/ProgressIndicator.types.ts b/packages/reshaped/src/components/ProgressIndicator/ProgressIndicator.types.ts index 9d5e92d63..2a26e9671 100644 --- a/packages/reshaped/src/components/ProgressIndicator/ProgressIndicator.types.ts +++ b/packages/reshaped/src/components/ProgressIndicator/ProgressIndicator.types.ts @@ -1,6 +1,6 @@ import type { ClassName } from "@reshaped/utilities"; -import type { Attributes } from "@/types/global"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Total amount of progress indicator dots */ diff --git a/packages/reshaped/src/components/ProgressIndicator/index.ts b/packages/reshaped/src/components/ProgressIndicator/index.ts index a6ec3051e..b1cfd2313 100644 --- a/packages/reshaped/src/components/ProgressIndicator/index.ts +++ b/packages/reshaped/src/components/ProgressIndicator/index.ts @@ -1,2 +1,2 @@ -export { default } from "./ProgressIndicator"; -export type { Props as ProgressIndicatorProps } from "./ProgressIndicator.types"; +export { default } from "./ProgressIndicator.js"; +export type { Props as ProgressIndicatorProps } from "./ProgressIndicator.types.js"; diff --git a/packages/reshaped/src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx b/packages/reshaped/src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx index 171f25a92..daad21b14 100644 --- a/packages/reshaped/src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx +++ b/packages/reshaped/src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx @@ -2,11 +2,11 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect } from "storybook/test"; -import Button from "@/components/Button"; -import ProgressIndicator from "@/components/ProgressIndicator"; -import Text from "@/components/Text"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import ProgressIndicator from "@/components/ProgressIndicator/index.js"; +import Text from "@/components/Text/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/ProgressIndicator", diff --git a/packages/reshaped/src/components/Radio/Radio.tsx b/packages/reshaped/src/components/Radio/Radio.tsx index 803200c6b..504cef0f9 100644 --- a/packages/reshaped/src/components/Radio/Radio.tsx +++ b/packages/reshaped/src/components/Radio/Radio.tsx @@ -3,12 +3,12 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import { useFormControl } from "@/components/FormControl"; -import HiddenInput from "@/components/HiddenInput"; -import { useRadioGroup } from "@/components/RadioGroup"; -import Text from "@/components/Text"; -import { responsiveClassNames, responsivePropDependency } from "@/utilities/props"; -import type * as T from "./Radio.types"; +import { useFormControl } from "@/components/FormControl/index.js"; +import HiddenInput from "@/components/HiddenInput/index.js"; +import { useRadioGroup } from "@/components/RadioGroup/index.js"; +import Text from "@/components/Text/index.js"; +import { responsiveClassNames, responsivePropDependency } from "@/utilities/props.js"; +import type * as T from "./Radio.types.js"; import s from "./Radio.module.css"; const Radio: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Radio/Radio.types.ts b/packages/reshaped/src/components/Radio/Radio.types.ts index e954f40e7..f26c01f3e 100644 --- a/packages/reshaped/src/components/Radio/Radio.types.ts +++ b/packages/reshaped/src/components/Radio/Radio.types.ts @@ -1,8 +1,8 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; type BaseProps = { /** Node for inserting children */ diff --git a/packages/reshaped/src/components/Radio/index.ts b/packages/reshaped/src/components/Radio/index.ts index 91b16cd2e..308b9d4be 100644 --- a/packages/reshaped/src/components/Radio/index.ts +++ b/packages/reshaped/src/components/Radio/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Radio"; -export type { Props as RadioProps } from "./Radio.types"; +export { default } from "./Radio.js"; +export type { Props as RadioProps } from "./Radio.types.js"; diff --git a/packages/reshaped/src/components/Radio/tests/Radio.stories.tsx b/packages/reshaped/src/components/Radio/tests/Radio.stories.tsx index 128edb583..d20170f6a 100644 --- a/packages/reshaped/src/components/Radio/tests/Radio.stories.tsx +++ b/packages/reshaped/src/components/Radio/tests/Radio.stories.tsx @@ -1,9 +1,9 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import Radio from "@/components/Radio"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import Radio from "@/components/Radio/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/Radio", diff --git a/packages/reshaped/src/components/RadioGroup/RadioGroup.context.ts b/packages/reshaped/src/components/RadioGroup/RadioGroup.context.ts index a48db6e71..8d109aedd 100644 --- a/packages/reshaped/src/components/RadioGroup/RadioGroup.context.ts +++ b/packages/reshaped/src/components/RadioGroup/RadioGroup.context.ts @@ -2,7 +2,7 @@ import React from "react"; -import type * as T from "./RadioGroup.types"; +import type * as T from "./RadioGroup.types.js"; const RadioContext = React.createContext(null); diff --git a/packages/reshaped/src/components/RadioGroup/RadioGroup.tsx b/packages/reshaped/src/components/RadioGroup/RadioGroup.tsx index 96d307f0a..250673c3a 100644 --- a/packages/reshaped/src/components/RadioGroup/RadioGroup.tsx +++ b/packages/reshaped/src/components/RadioGroup/RadioGroup.tsx @@ -1,6 +1,6 @@ -import type * as T from "./RadioGroup.types"; -import RadioGroupControlled from "./RadioGroupControlled"; -import RadioGroupUncontrolled from "./RadioGroupUncontrolled"; +import type * as T from "./RadioGroup.types.js"; +import RadioGroupControlled from "./RadioGroupControlled.js"; +import RadioGroupUncontrolled from "./RadioGroupUncontrolled.js"; const RadioGroup: React.FC = (props) => { const { value } = props; diff --git a/packages/reshaped/src/components/RadioGroup/RadioGroup.types.ts b/packages/reshaped/src/components/RadioGroup/RadioGroup.types.ts index cd6577ee2..74781f38d 100644 --- a/packages/reshaped/src/components/RadioGroup/RadioGroup.types.ts +++ b/packages/reshaped/src/components/RadioGroup/RadioGroup.types.ts @@ -1,9 +1,9 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { RadioProps } from "@/components/Radio"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type { RadioProps } from "@/components/Radio/index.js"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; type BaseProps = { /** Unique identifier for the radio group */ diff --git a/packages/reshaped/src/components/RadioGroup/RadioGroupControlled.tsx b/packages/reshaped/src/components/RadioGroup/RadioGroupControlled.tsx index b6aaef587..223914f63 100644 --- a/packages/reshaped/src/components/RadioGroup/RadioGroupControlled.tsx +++ b/packages/reshaped/src/components/RadioGroup/RadioGroupControlled.tsx @@ -1,8 +1,8 @@ "use client"; -import type * as TRadio from "@/components/Radio/Radio.types"; -import Context from "./RadioGroup.context"; -import type * as T from "./RadioGroup.types"; +import type * as TRadio from "@/components/Radio/Radio.types.js"; +import Context from "./RadioGroup.context.js"; +import type * as T from "./RadioGroup.types.js"; const RadioGroupControlled: React.FC = (props) => { const { onChange, name, disabled, value, children, hasError } = props; diff --git a/packages/reshaped/src/components/RadioGroup/RadioGroupUncontrolled.tsx b/packages/reshaped/src/components/RadioGroup/RadioGroupUncontrolled.tsx index 356dd4f90..f9df4d323 100644 --- a/packages/reshaped/src/components/RadioGroup/RadioGroupUncontrolled.tsx +++ b/packages/reshaped/src/components/RadioGroup/RadioGroupUncontrolled.tsx @@ -2,8 +2,8 @@ import React from "react"; -import type * as T from "./RadioGroup.types"; -import RadioGroupControlled from "./RadioGroupControlled"; +import type * as T from "./RadioGroup.types.js"; +import RadioGroupControlled from "./RadioGroupControlled.js"; const RadioGroupUncontrolled: React.FC = (props) => { const { defaultValue, onChange } = props; diff --git a/packages/reshaped/src/components/RadioGroup/index.ts b/packages/reshaped/src/components/RadioGroup/index.ts index ad80166c8..cb30cd7b4 100644 --- a/packages/reshaped/src/components/RadioGroup/index.ts +++ b/packages/reshaped/src/components/RadioGroup/index.ts @@ -1,3 +1,3 @@ -export { default } from "./RadioGroup"; -export { useRadioGroup } from "./RadioGroup.context"; -export type { Props as RadioGroupProps } from "./RadioGroup.types"; +export { default } from "./RadioGroup.js"; +export { useRadioGroup } from "./RadioGroup.context.js"; +export type { Props as RadioGroupProps } from "./RadioGroup.types.js"; diff --git a/packages/reshaped/src/components/RadioGroup/tests/RadioGroup.stories.tsx b/packages/reshaped/src/components/RadioGroup/tests/RadioGroup.stories.tsx index 19c488c4b..371985b8b 100644 --- a/packages/reshaped/src/components/RadioGroup/tests/RadioGroup.stories.tsx +++ b/packages/reshaped/src/components/RadioGroup/tests/RadioGroup.stories.tsx @@ -1,8 +1,8 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import Radio from "@/components/Radio"; -import RadioGroup from "@/components/RadioGroup"; +import Radio from "@/components/Radio/index.js"; +import RadioGroup from "@/components/RadioGroup/index.js"; export default { title: "Components/RadioGroup", diff --git a/packages/reshaped/src/components/Reshaped/Reshaped.tsx b/packages/reshaped/src/components/Reshaped/Reshaped.tsx index 35c1ed286..1ad8d834b 100644 --- a/packages/reshaped/src/components/Reshaped/Reshaped.tsx +++ b/packages/reshaped/src/components/Reshaped/Reshaped.tsx @@ -3,14 +3,14 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import { GlobalColorMode, PrivateTheme } from "@/components/Theme"; -import { useGlobalColorMode } from "@/components/Theme/useTheme"; -import { ToastProvider } from "@/components/Toast"; -import { SingletonHotkeysProvider } from "@/hooks/_internal/useSingletonHotkeys"; -import { SingletonKeyboardModeProvider } from "@/hooks/_internal/useSingletonKeyboardMode"; -import { SingletonRTLProvider } from "@/hooks/_internal/useSingletonRTL"; -import { SingletonViewportProvider } from "@/hooks/_internal/useSingletonViewport"; -import type * as T from "./Reshaped.types"; +import { GlobalColorMode, PrivateTheme } from "@/components/Theme/index.js"; +import { useGlobalColorMode } from "@/components/Theme/useTheme.js"; +import { ToastProvider } from "@/components/Toast/index.js"; +import { SingletonHotkeysProvider } from "@/hooks/_internal/useSingletonHotkeys.js"; +import { SingletonKeyboardModeProvider } from "@/hooks/_internal/useSingletonKeyboardMode.js"; +import { SingletonRTLProvider } from "@/hooks/_internal/useSingletonRTL.js"; +import { SingletonViewportProvider } from "@/hooks/_internal/useSingletonViewport.js"; +import type * as T from "./Reshaped.types.js"; import "./Reshaped.css"; import s from "./Reshaped.module.css"; diff --git a/packages/reshaped/src/components/Reshaped/Reshaped.types.ts b/packages/reshaped/src/components/Reshaped/Reshaped.types.ts index 61ebc9a25..8543e2bcb 100644 --- a/packages/reshaped/src/components/Reshaped/Reshaped.types.ts +++ b/packages/reshaped/src/components/Reshaped/Reshaped.types.ts @@ -1,9 +1,9 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { GlobalColorModeProps, ThemeProps } from "@/components/Theme"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type { GlobalColorModeProps, ThemeProps } from "@/components/Theme/index.js"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Node for inserting children */ diff --git a/packages/reshaped/src/components/Reshaped/index.ts b/packages/reshaped/src/components/Reshaped/index.ts index 85d56de06..6e00dd205 100644 --- a/packages/reshaped/src/components/Reshaped/index.ts +++ b/packages/reshaped/src/components/Reshaped/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Reshaped"; -export type { Props as ReshapedProps } from "./Reshaped.types"; +export { default } from "./Reshaped.js"; +export type { Props as ReshapedProps } from "./Reshaped.types.js"; diff --git a/packages/reshaped/src/components/Reshaped/tests/Reshaped.stories.tsx b/packages/reshaped/src/components/Reshaped/tests/Reshaped.stories.tsx index f7e9095dc..14a754558 100644 --- a/packages/reshaped/src/components/Reshaped/tests/Reshaped.stories.tsx +++ b/packages/reshaped/src/components/Reshaped/tests/Reshaped.stories.tsx @@ -2,10 +2,10 @@ import { StoryObj } from "@storybook/react-vite"; import { useState } from "react"; import { expect, userEvent } from "storybook/test"; -import Button from "@/components/Button"; -import { useTheme } from "@/components/Theme"; -import type * as G from "@/types/global"; -import Reshaped from "../Reshaped"; +import Button from "@/components/Button/index.js"; +import { useTheme } from "@/components/Theme/index.js"; +import type * as G from "@/types/global.js"; +import Reshaped from "../Reshaped.js"; export default { title: "Utility components/Reshaped", diff --git a/packages/reshaped/src/components/Resizable/Resizable.tsx b/packages/reshaped/src/components/Resizable/Resizable.tsx index 9b17a4d95..8ee0385d3 100644 --- a/packages/reshaped/src/components/Resizable/Resizable.tsx +++ b/packages/reshaped/src/components/Resizable/Resizable.tsx @@ -3,9 +3,9 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import View from "@/components/View"; -import type * as T from "./Resizable.types"; -import { ResizableContext } from "./ResizableContext"; +import View from "@/components/View/index.js"; +import type * as T from "./Resizable.types.js"; +import { ResizableContext } from "./ResizableContext.js"; import s from "./Resizable.module.css"; export const ResizableItem: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Resizable/Resizable.types.ts b/packages/reshaped/src/components/Resizable/Resizable.types.ts index 4a42269ec..401315419 100644 --- a/packages/reshaped/src/components/Resizable/Resizable.types.ts +++ b/packages/reshaped/src/components/Resizable/Resizable.types.ts @@ -1,7 +1,7 @@ import type React from "react"; -import type { ViewProps } from "@/components/View"; -import type { UseDragCallbackArgs } from "@/hooks/_internal/useDrag"; +import type { ViewProps } from "@/components/View/index.js"; +import type { UseDragCallbackArgs } from "@/hooks/_internal/useDrag.js"; export type Props = { /** Component render variant */ diff --git a/packages/reshaped/src/components/Resizable/ResizableContext.ts b/packages/reshaped/src/components/Resizable/ResizableContext.ts index 5a86a78f1..78cf10972 100644 --- a/packages/reshaped/src/components/Resizable/ResizableContext.ts +++ b/packages/reshaped/src/components/Resizable/ResizableContext.ts @@ -1,5 +1,5 @@ import React from "react"; -import type * as T from "./Resizable.types"; +import type * as T from "./Resizable.types.js"; export const ResizableContext = React.createContext({} as T.Context); diff --git a/packages/reshaped/src/components/Resizable/ResizableHandle.tsx b/packages/reshaped/src/components/Resizable/ResizableHandle.tsx index 7acf6e30f..b87fa372a 100644 --- a/packages/reshaped/src/components/Resizable/ResizableHandle.tsx +++ b/packages/reshaped/src/components/Resizable/ResizableHandle.tsx @@ -3,10 +3,10 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import View from "@/components/View"; -import useDrag from "@/hooks/_internal/useDrag"; -import type * as T from "./Resizable.types"; -import { ResizableContext } from "./ResizableContext"; +import View from "@/components/View/index.js"; +import useDrag from "@/hooks/_internal/useDrag.js"; +import type * as T from "./Resizable.types.js"; +import { ResizableContext } from "./ResizableContext.js"; import s from "./Resizable.module.css"; const ResizableHandle: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Resizable/index.ts b/packages/reshaped/src/components/Resizable/index.ts index db2af5fae..07ab8d6bb 100644 --- a/packages/reshaped/src/components/Resizable/index.ts +++ b/packages/reshaped/src/components/Resizable/index.ts @@ -1,5 +1,5 @@ -import Resizable, { ResizableItem } from "./Resizable"; -import ResizableHandle from "./ResizableHandle"; +import Resizable, { ResizableItem } from "./Resizable.js"; +import ResizableHandle from "./ResizableHandle.js"; const ResizableRoot = Resizable as typeof Resizable & { Item: typeof ResizableItem; @@ -14,4 +14,4 @@ export type { HandleProps as ResizableHandleProps, ItemProps as ResizableItemProps, Props as ResizableProps, -} from "./Resizable.types"; +} from "./Resizable.types.js"; diff --git a/packages/reshaped/src/components/Resizable/tests/Resizable.stories.tsx b/packages/reshaped/src/components/Resizable/tests/Resizable.stories.tsx index 0fc6da2c1..036d3fc85 100644 --- a/packages/reshaped/src/components/Resizable/tests/Resizable.stories.tsx +++ b/packages/reshaped/src/components/Resizable/tests/Resizable.stories.tsx @@ -1,10 +1,10 @@ import { StoryObj } from "@storybook/react-vite"; import { expect } from "storybook/test"; -import Button from "@/components/Button"; -import Resizable from "@/components/Resizable"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import Resizable from "@/components/Resizable/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/Resizable", diff --git a/packages/reshaped/src/components/ScrollArea/ScrollArea.tsx b/packages/reshaped/src/components/ScrollArea/ScrollArea.tsx index b17b0a170..d31674b62 100644 --- a/packages/reshaped/src/components/ScrollArea/ScrollArea.tsx +++ b/packages/reshaped/src/components/ScrollArea/ScrollArea.tsx @@ -4,10 +4,10 @@ import React, { forwardRef } from "react"; import { classNames } from "@reshaped/utilities"; import { disableScroll, enableScroll } from "@reshaped/utilities/internal"; -import useHandlerRef from "@/hooks/useHandlerRef"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import { resolveMixin } from "@/styles/mixin"; -import type * as T from "./ScrollArea.types"; +import useHandlerRef from "@/hooks/useHandlerRef.js"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as T from "./ScrollArea.types.js"; import s from "./ScrollArea.module.css"; const ScrollAreaBar: React.FC = (props) => { diff --git a/packages/reshaped/src/components/ScrollArea/ScrollArea.types.ts b/packages/reshaped/src/components/ScrollArea/ScrollArea.types.ts index 457a33e95..bf72ba96a 100644 --- a/packages/reshaped/src/components/ScrollArea/ScrollArea.types.ts +++ b/packages/reshaped/src/components/ScrollArea/ScrollArea.types.ts @@ -2,8 +2,8 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; import type { Coordinates } from "@reshaped/utilities/internal"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Node for inserting content */ diff --git a/packages/reshaped/src/components/ScrollArea/index.ts b/packages/reshaped/src/components/ScrollArea/index.ts index 5744f4684..fa1776a8a 100644 --- a/packages/reshaped/src/components/ScrollArea/index.ts +++ b/packages/reshaped/src/components/ScrollArea/index.ts @@ -1,2 +1,2 @@ -export { default } from "./ScrollArea"; -export type { Props as ScrollAreaProps } from "./ScrollArea.types"; +export { default } from "./ScrollArea.js"; +export type { Props as ScrollAreaProps } from "./ScrollArea.types.js"; diff --git a/packages/reshaped/src/components/ScrollArea/tests/ScrollArea.stories.tsx b/packages/reshaped/src/components/ScrollArea/tests/ScrollArea.stories.tsx index 249ba9f5b..3aa00592e 100644 --- a/packages/reshaped/src/components/ScrollArea/tests/ScrollArea.stories.tsx +++ b/packages/reshaped/src/components/ScrollArea/tests/ScrollArea.stories.tsx @@ -2,11 +2,11 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fn, Mock, userEvent, waitFor } from "storybook/test"; -import Button from "@/components/Button"; -import Card from "@/components/Card"; -import ScrollArea from "@/components/ScrollArea"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import Card from "@/components/Card/index.js"; +import ScrollArea from "@/components/ScrollArea/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Utility components/ScrollArea", diff --git a/packages/reshaped/src/components/Select/Select.tsx b/packages/reshaped/src/components/Select/Select.tsx index cea42b508..fa7434974 100644 --- a/packages/reshaped/src/components/Select/Select.tsx +++ b/packages/reshaped/src/components/Select/Select.tsx @@ -2,11 +2,11 @@ import React from "react"; -import useElementId from "@/hooks/useElementId"; -import { useFormControl } from "../FormControl"; -import type * as T from "./Select.types"; -import SelectCustom from "./SelectCustom"; -import SelectNative from "./SelectNative"; +import useElementId from "@/hooks/useElementId.js"; +import { useFormControl } from "../FormControl/index.js"; +import type * as T from "./Select.types.js"; +import SelectCustom from "./SelectCustom.js"; +import SelectNative from "./SelectNative.js"; function Select(props: T.NativeControlledProps): React.JSX.Element; function Select(props: T.NativeUncontrolledProps): React.JSX.Element; diff --git a/packages/reshaped/src/components/Select/Select.types.ts b/packages/reshaped/src/components/Select/Select.types.ts index ba65e8a67..7bc81f0c9 100644 --- a/packages/reshaped/src/components/Select/Select.types.ts +++ b/packages/reshaped/src/components/Select/Select.types.ts @@ -1,13 +1,13 @@ import React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { ActionableProps } from "@/components/Actionable"; -import type { DropdownMenuProps } from "@/components/DropdownMenu"; -import type { FlyoutTriggerAttributes } from "@/components/Flyout"; -import type { IconProps } from "@/components/Icon"; -import type { MenuItemProps } from "@/components/MenuItem"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type { ActionableProps } from "@/components/Actionable/index.js"; +import type { DropdownMenuProps } from "@/components/DropdownMenu/index.js"; +import type { FlyoutTriggerAttributes } from "@/components/Flyout/index.js"; +import type { IconProps } from "@/components/Icon/index.js"; +import type { MenuItemProps } from "@/components/MenuItem/index.js"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">; diff --git a/packages/reshaped/src/components/Select/SelectCustom.tsx b/packages/reshaped/src/components/Select/SelectCustom.tsx index d0f64bf06..11dbfec88 100644 --- a/packages/reshaped/src/components/Select/SelectCustom.tsx +++ b/packages/reshaped/src/components/Select/SelectCustom.tsx @@ -1,6 +1,6 @@ -import type * as T from "./Select.types"; -import SelectCustomControlled from "./SelectCustomControlled"; -import SelectCustomUncontrolled from "./SelectCustomUncontrolled"; +import type * as T from "./Select.types.js"; +import SelectCustomControlled from "./SelectCustomControlled.js"; +import SelectCustomUncontrolled from "./SelectCustomUncontrolled.js"; const SelectCustom: React.FC = (props) => { const { value } = props; diff --git a/packages/reshaped/src/components/Select/SelectCustomControlled.tsx b/packages/reshaped/src/components/Select/SelectCustomControlled.tsx index bd8a7d5bd..df9e79233 100644 --- a/packages/reshaped/src/components/Select/SelectCustomControlled.tsx +++ b/packages/reshaped/src/components/Select/SelectCustomControlled.tsx @@ -2,16 +2,16 @@ import React from "react"; -import DropdownMenu from "@/components/DropdownMenu"; -import Icon from "@/components/Icon"; -import View from "@/components/View"; -import { responsivePropDependency } from "@/utilities/props"; -import CheckmarkIcon from "@/icons/Checkmark"; -import type * as T from "./Select.types"; -import SelectGroup from "./SelectGroup"; -import SelectHiddenInput from "./SelectHiddenInput"; -import SelectOption from "./SelectOption"; -import SelectTrigger from "./SelectTrigger"; +import DropdownMenu from "@/components/DropdownMenu/index.js"; +import Icon from "@/components/Icon/index.js"; +import View from "@/components/View/index.js"; +import { responsivePropDependency } from "@/utilities/props.js"; +import CheckmarkIcon from "@/icons/Checkmark.js"; +import type * as T from "./Select.types.js"; +import SelectGroup from "./SelectGroup.js"; +import SelectHiddenInput from "./SelectHiddenInput.js"; +import SelectOption from "./SelectOption.js"; +import SelectTrigger from "./SelectTrigger.js"; const SelectCustomControlled: React.FC = (props) => { const { diff --git a/packages/reshaped/src/components/Select/SelectCustomUncontrolled.tsx b/packages/reshaped/src/components/Select/SelectCustomUncontrolled.tsx index cf9145d7f..197aa36b0 100644 --- a/packages/reshaped/src/components/Select/SelectCustomUncontrolled.tsx +++ b/packages/reshaped/src/components/Select/SelectCustomUncontrolled.tsx @@ -2,8 +2,8 @@ import React from "react"; -import type * as T from "./Select.types"; -import SelectCustomControlled from "./SelectCustomControlled"; +import type * as T from "./Select.types.js"; +import SelectCustomControlled from "./SelectCustomControlled.js"; const SelectCustomUncontrolled: React.FC = (props) => { const { defaultValue, onChange, multiple, ...controlledProps } = props; diff --git a/packages/reshaped/src/components/Select/SelectEndContent.tsx b/packages/reshaped/src/components/Select/SelectEndContent.tsx index defc5ca22..c5bb6e028 100644 --- a/packages/reshaped/src/components/Select/SelectEndContent.tsx +++ b/packages/reshaped/src/components/Select/SelectEndContent.tsx @@ -1,7 +1,7 @@ -import Icon from "@/components/Icon"; -import { responsivePropDependency } from "@/utilities/props"; -import IconArrow from "@/icons/ChevronVertical"; -import type * as T from "./Select.types"; +import Icon from "@/components/Icon/index.js"; +import { responsivePropDependency } from "@/utilities/props.js"; +import IconArrow from "@/icons/ChevronVertical.js"; +import type * as T from "./Select.types.js"; import s from "./Select.module.css"; const SelectEndContent: React.FC> = (props) => { diff --git a/packages/reshaped/src/components/Select/SelectGroup.tsx b/packages/reshaped/src/components/Select/SelectGroup.tsx index ed0caa12f..9396e0a0c 100644 --- a/packages/reshaped/src/components/Select/SelectGroup.tsx +++ b/packages/reshaped/src/components/Select/SelectGroup.tsx @@ -1,8 +1,8 @@ import React from "react"; -import Text from "@/components/Text"; -import View from "@/components/View"; -import type * as T from "./Select.types"; +import Text from "@/components/Text/index.js"; +import View from "@/components/View/index.js"; +import type * as T from "./Select.types.js"; import s from "./Select.module.css"; const SelectGroup: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Select/SelectHiddenInput.tsx b/packages/reshaped/src/components/Select/SelectHiddenInput.tsx index e6c9af595..e684ebde2 100644 --- a/packages/reshaped/src/components/Select/SelectHiddenInput.tsx +++ b/packages/reshaped/src/components/Select/SelectHiddenInput.tsx @@ -1,4 +1,4 @@ -import type * as T from "./Select.types"; +import type * as T from "./Select.types.js"; /** * Holds the selected value for the form submission, diff --git a/packages/reshaped/src/components/Select/SelectNative.tsx b/packages/reshaped/src/components/Select/SelectNative.tsx index cdd65c893..8e8ea4e33 100644 --- a/packages/reshaped/src/components/Select/SelectNative.tsx +++ b/packages/reshaped/src/components/Select/SelectNative.tsx @@ -3,11 +3,11 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import { responsiveClassNames } from "@/utilities/props"; -import { resolveMixin } from "@/styles/mixin"; -import type * as T from "./Select.types"; -import SelectEndContent from "./SelectEndContent"; -import SelectStartContent from "./SelectStartContent"; +import { responsiveClassNames } from "@/utilities/props.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as T from "./Select.types.js"; +import SelectEndContent from "./SelectEndContent.js"; +import SelectStartContent from "./SelectStartContent.js"; import s from "./Select.module.css"; const SelectNative: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Select/SelectOption.tsx b/packages/reshaped/src/components/Select/SelectOption.tsx index 9e288fbc2..d61e69cfc 100644 --- a/packages/reshaped/src/components/Select/SelectOption.tsx +++ b/packages/reshaped/src/components/Select/SelectOption.tsx @@ -2,8 +2,8 @@ import React from "react"; -import DropdownMenu from "@/components/DropdownMenu"; -import type * as T from "./Select.types"; +import DropdownMenu from "@/components/DropdownMenu/index.js"; +import type * as T from "./Select.types.js"; import s from "./Select.module.css"; const SelectOption: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Select/SelectStartContent.tsx b/packages/reshaped/src/components/Select/SelectStartContent.tsx index dff57e3d5..7906c4d1a 100644 --- a/packages/reshaped/src/components/Select/SelectStartContent.tsx +++ b/packages/reshaped/src/components/Select/SelectStartContent.tsx @@ -1,6 +1,6 @@ -import Icon from "@/components/Icon"; -import { responsivePropDependency } from "@/utilities/props"; -import type * as T from "./Select.types"; +import Icon from "@/components/Icon/index.js"; +import { responsivePropDependency } from "@/utilities/props.js"; +import type * as T from "./Select.types.js"; import s from "./Select.module.css"; const SelectStartContent: React.FC> = (props) => { diff --git a/packages/reshaped/src/components/Select/SelectTrigger.tsx b/packages/reshaped/src/components/Select/SelectTrigger.tsx index 12dd4864e..c229e2dcd 100644 --- a/packages/reshaped/src/components/Select/SelectTrigger.tsx +++ b/packages/reshaped/src/components/Select/SelectTrigger.tsx @@ -3,14 +3,14 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import Actionable from "@/components/Actionable"; -import Text from "@/components/Text"; -import { responsiveClassNames } from "@/utilities/props"; -import { resolveMixin } from "@/styles/mixin"; -import type * as T from "./Select.types"; -import SelectEndContent from "./SelectEndContent"; -import SelectHiddenInput from "./SelectHiddenInput"; -import SelectStartContent from "./SelectStartContent"; +import Actionable from "@/components/Actionable/index.js"; +import Text from "@/components/Text/index.js"; +import { responsiveClassNames } from "@/utilities/props.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as T from "./Select.types.js"; +import SelectEndContent from "./SelectEndContent.js"; +import SelectHiddenInput from "./SelectHiddenInput.js"; +import SelectStartContent from "./SelectStartContent.js"; import s from "./Select.module.css"; const SelectTrigger: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Select/index.ts b/packages/reshaped/src/components/Select/index.ts index c8cd4510c..778064fd1 100644 --- a/packages/reshaped/src/components/Select/index.ts +++ b/packages/reshaped/src/components/Select/index.ts @@ -1,6 +1,6 @@ -import Select from "./Select"; -import SelectGroup from "./SelectGroup"; -import SelectOption from "./SelectOption"; +import Select from "./Select.js"; +import SelectGroup from "./SelectGroup.js"; +import SelectOption from "./SelectOption.js"; const SelectRoot = Select as typeof Select & { Option: typeof SelectOption; @@ -13,5 +13,5 @@ SelectRoot.Group = SelectGroup; SelectRoot.OptionGroup = SelectGroup; export default SelectRoot; -export { default as SelectTrigger } from "./SelectTrigger"; -export type { Props as SelectProps, TriggerProps as SelectTriggerProps } from "./Select.types"; +export { default as SelectTrigger } from "./SelectTrigger.js"; +export type { Props as SelectProps, TriggerProps as SelectTriggerProps } from "./Select.types.js"; diff --git a/packages/reshaped/src/components/Select/tests/Select.stories.tsx b/packages/reshaped/src/components/Select/tests/Select.stories.tsx index c079fbc10..ea017599e 100644 --- a/packages/reshaped/src/components/Select/tests/Select.stories.tsx +++ b/packages/reshaped/src/components/Select/tests/Select.stories.tsx @@ -2,17 +2,17 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fn, Mock, userEvent, within } from "storybook/test"; -import Actionable from "@/components/Actionable"; -import Badge from "@/components/Badge"; -import FormControl from "@/components/FormControl"; -import MenuItem from "@/components/MenuItem"; -import Modal from "@/components/Modal"; -import Select, { SelectProps, SelectTrigger } from "@/components/Select"; -import Text from "@/components/Text"; -import View from "@/components/View"; -import useToggle from "@/hooks/useToggle"; -import { Example, Placeholder } from "@/utilities/storybook"; -import IconZap from "@/icons/Zap"; +import Actionable from "@/components/Actionable/index.js"; +import Badge from "@/components/Badge/index.js"; +import FormControl from "@/components/FormControl/index.js"; +import MenuItem from "@/components/MenuItem/index.js"; +import Modal from "@/components/Modal/index.js"; +import Select, { SelectProps, SelectTrigger } from "@/components/Select/index.js"; +import Text from "@/components/Text/index.js"; +import View from "@/components/View/index.js"; +import useToggle from "@/hooks/useToggle.js"; +import { Example, Placeholder } from "@/utilities/storybook/index.js"; +import IconZap from "@/icons/Zap.js"; export default { title: "Components/Select", diff --git a/packages/reshaped/src/components/Skeleton/Skeleton.tsx b/packages/reshaped/src/components/Skeleton/Skeleton.tsx index 1874eb9c8..a6fb0558b 100644 --- a/packages/reshaped/src/components/Skeleton/Skeleton.tsx +++ b/packages/reshaped/src/components/Skeleton/Skeleton.tsx @@ -1,7 +1,7 @@ import { classNames } from "@reshaped/utilities"; -import View from "@/components/View"; -import * as T from "./Skeleton.types"; +import View from "@/components/View/index.js"; +import * as T from "./Skeleton.types.js"; import s from "./Skeleton.module.css"; const Skeleton: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Skeleton/Skeleton.types.ts b/packages/reshaped/src/components/Skeleton/Skeleton.types.ts index 787568233..c581955b0 100644 --- a/packages/reshaped/src/components/Skeleton/Skeleton.types.ts +++ b/packages/reshaped/src/components/Skeleton/Skeleton.types.ts @@ -1,7 +1,7 @@ import type { ClassName } from "@reshaped/utilities"; -import type { ViewProps } from "@/components/View"; -import type { Attributes } from "@/types/global"; +import type { ViewProps } from "@/components/View/index.js"; +import type { Attributes } from "@/types/global.js"; export type Props = Pick & { /** Additional classname for the root element */ diff --git a/packages/reshaped/src/components/Skeleton/index.ts b/packages/reshaped/src/components/Skeleton/index.ts index fadbaa5c6..13dff9c60 100644 --- a/packages/reshaped/src/components/Skeleton/index.ts +++ b/packages/reshaped/src/components/Skeleton/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Skeleton"; -export type { Props as SkeletonProps } from "./Skeleton.types"; +export { default } from "./Skeleton.js"; +export type { Props as SkeletonProps } from "./Skeleton.types.js"; diff --git a/packages/reshaped/src/components/Skeleton/tests/Skeleton.stories.tsx b/packages/reshaped/src/components/Skeleton/tests/Skeleton.stories.tsx index b59b12b16..f2b941797 100644 --- a/packages/reshaped/src/components/Skeleton/tests/Skeleton.stories.tsx +++ b/packages/reshaped/src/components/Skeleton/tests/Skeleton.stories.tsx @@ -1,8 +1,8 @@ import { StoryObj } from "@storybook/react-vite"; import { expect } from "storybook/test"; -import Skeleton from "@/components/Skeleton"; -import { Example } from "@/utilities/storybook"; +import Skeleton from "@/components/Skeleton/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/Skeleton", diff --git a/packages/reshaped/src/components/Slider/Slider.tsx b/packages/reshaped/src/components/Slider/Slider.tsx index 6a094bc7d..82dd7094c 100644 --- a/packages/reshaped/src/components/Slider/Slider.tsx +++ b/packages/reshaped/src/components/Slider/Slider.tsx @@ -1,6 +1,6 @@ -import type * as T from "./Slider.types"; -import SliderControlled from "./SliderControlled"; -import SliderUncontrolled from "./SliderUncontrolled"; +import type * as T from "./Slider.types.js"; +import SliderControlled from "./SliderControlled.js"; +import SliderUncontrolled from "./SliderUncontrolled.js"; const Slider: React.FC = (props) => { const { min = 0, max = 100, ...rest } = props; diff --git a/packages/reshaped/src/components/Slider/Slider.types.ts b/packages/reshaped/src/components/Slider/Slider.types.ts index e8ec2ee2a..e582dfe71 100644 --- a/packages/reshaped/src/components/Slider/Slider.types.ts +++ b/packages/reshaped/src/components/Slider/Slider.types.ts @@ -1,6 +1,6 @@ import type { ClassName } from "@reshaped/utilities"; -import type { Attributes } from "@/types/global"; +import type { Attributes } from "@/types/global.js"; export type SingleChangeArgs = { /** Value of the slider, enables controlled mode */ diff --git a/packages/reshaped/src/components/Slider/SliderControlled.tsx b/packages/reshaped/src/components/Slider/SliderControlled.tsx index b32349f0a..44a335637 100644 --- a/packages/reshaped/src/components/Slider/SliderControlled.tsx +++ b/packages/reshaped/src/components/Slider/SliderControlled.tsx @@ -4,13 +4,13 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; import { disableScroll, enableScroll } from "@reshaped/utilities/internal"; -import { useFormControl } from "@/components/FormControl"; -import useElementId from "@/hooks/useElementId"; -import useHandlerRef from "@/hooks/useHandlerRef"; -import useRTL from "@/hooks/useRTL"; -import type * as T from "./Slider.types"; -import { applyStepToValue, getDragCoord, triggerChangeEvent } from "./Slider.utilities"; -import SliderThumb from "./SliderThumb"; +import { useFormControl } from "@/components/FormControl/index.js"; +import useElementId from "@/hooks/useElementId.js"; +import useHandlerRef from "@/hooks/useHandlerRef.js"; +import useRTL from "@/hooks/useRTL.js"; +import type * as T from "./Slider.types.js"; +import { applyStepToValue, getDragCoord, triggerChangeEvent } from "./Slider.utilities.js"; +import SliderThumb from "./SliderThumb.js"; import s from "./Slider.module.css"; const THUMB_SIZE = 16; diff --git a/packages/reshaped/src/components/Slider/SliderThumb.tsx b/packages/reshaped/src/components/Slider/SliderThumb.tsx index f8d74df91..25a9a6222 100644 --- a/packages/reshaped/src/components/Slider/SliderThumb.tsx +++ b/packages/reshaped/src/components/Slider/SliderThumb.tsx @@ -3,10 +3,10 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import Text from "@/components/Text"; -import Theme from "@/components/Theme"; -import type * as T from "./Slider.types"; -import { getPrecision } from "./Slider.utilities"; +import Text from "@/components/Text/index.js"; +import Theme from "@/components/Theme/index.js"; +import type * as T from "./Slider.types.js"; +import { getPrecision } from "./Slider.utilities.js"; import s from "./Slider.module.css"; const SliderThumb = React.forwardRef((props, ref) => { diff --git a/packages/reshaped/src/components/Slider/SliderUncontrolled.tsx b/packages/reshaped/src/components/Slider/SliderUncontrolled.tsx index 517ed9a85..1d1e68d59 100644 --- a/packages/reshaped/src/components/Slider/SliderUncontrolled.tsx +++ b/packages/reshaped/src/components/Slider/SliderUncontrolled.tsx @@ -2,8 +2,8 @@ import React from "react"; -import type * as T from "./Slider.types"; -import SliderControlled from "./SliderControlled"; +import type * as T from "./Slider.types.js"; +import SliderControlled from "./SliderControlled.js"; const normalizeValue = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max); diff --git a/packages/reshaped/src/components/Slider/index.ts b/packages/reshaped/src/components/Slider/index.ts index e86b684e6..f10327136 100644 --- a/packages/reshaped/src/components/Slider/index.ts +++ b/packages/reshaped/src/components/Slider/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Slider"; -export type { Props as SliderProps } from "./Slider.types"; +export { default } from "./Slider.js"; +export type { Props as SliderProps } from "./Slider.types.js"; diff --git a/packages/reshaped/src/components/Slider/tests/Slider.stories.tsx b/packages/reshaped/src/components/Slider/tests/Slider.stories.tsx index 4b0f60889..8f05133ee 100644 --- a/packages/reshaped/src/components/Slider/tests/Slider.stories.tsx +++ b/packages/reshaped/src/components/Slider/tests/Slider.stories.tsx @@ -2,11 +2,11 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fireEvent, fn, Mock } from "storybook/test"; -import Modal from "@/components/Modal"; -import Slider from "@/components/Slider"; -import View from "@/components/View"; -import useToggle from "@/hooks/useToggle"; -import { Example } from "@/utilities/storybook"; +import Modal from "@/components/Modal/index.js"; +import Slider from "@/components/Slider/index.js"; +import View from "@/components/View/index.js"; +import useToggle from "@/hooks/useToggle.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/Slider", diff --git a/packages/reshaped/src/components/Switch/Switch.tsx b/packages/reshaped/src/components/Switch/Switch.tsx index 24b5240d4..6edd36d53 100644 --- a/packages/reshaped/src/components/Switch/Switch.tsx +++ b/packages/reshaped/src/components/Switch/Switch.tsx @@ -3,11 +3,11 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import { useFormControl } from "@/components/FormControl"; -import Text from "@/components/Text"; -import useElementId from "@/hooks/useElementId"; -import { responsiveClassNames, responsivePropDependency } from "@/utilities/props"; -import type * as T from "./Switch.types"; +import { useFormControl } from "@/components/FormControl/index.js"; +import Text from "@/components/Text/index.js"; +import useElementId from "@/hooks/useElementId.js"; +import { responsiveClassNames, responsivePropDependency } from "@/utilities/props.js"; +import type * as T from "./Switch.types.js"; import s from "./Switch.module.css"; const Switch: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Switch/Switch.types.ts b/packages/reshaped/src/components/Switch/Switch.types.ts index 8218b3c4a..d64d4f63c 100644 --- a/packages/reshaped/src/components/Switch/Switch.types.ts +++ b/packages/reshaped/src/components/Switch/Switch.types.ts @@ -1,8 +1,8 @@ import React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; type BaseProps = { /** Node for inserting children */ diff --git a/packages/reshaped/src/components/Switch/index.ts b/packages/reshaped/src/components/Switch/index.ts index af14e9531..bc009f073 100644 --- a/packages/reshaped/src/components/Switch/index.ts +++ b/packages/reshaped/src/components/Switch/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Switch"; -export type { Props as SwitchProps } from "./Switch.types"; +export { default } from "./Switch.js"; +export type { Props as SwitchProps } from "./Switch.types.js"; diff --git a/packages/reshaped/src/components/Switch/tests/Switch.stories.tsx b/packages/reshaped/src/components/Switch/tests/Switch.stories.tsx index f5c40b31b..3932102c0 100644 --- a/packages/reshaped/src/components/Switch/tests/Switch.stories.tsx +++ b/packages/reshaped/src/components/Switch/tests/Switch.stories.tsx @@ -1,9 +1,9 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import Switch from "@/components/Switch"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import Switch from "@/components/Switch/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/Switch", diff --git a/packages/reshaped/src/components/Table/Table.tsx b/packages/reshaped/src/components/Table/Table.tsx index b0c868532..30e73738d 100644 --- a/packages/reshaped/src/components/Table/Table.tsx +++ b/packages/reshaped/src/components/Table/Table.tsx @@ -3,9 +3,9 @@ import React, { isValidElement } from "react"; import { classNames } from "@reshaped/utilities"; -import { responsiveVariables } from "@/utilities/props"; -import { resolveMixin } from "@/styles/mixin"; -import type * as T from "./Table.types"; +import { responsiveVariables } from "@/utilities/props.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as T from "./Table.types.js"; import s from "./Table.module.css"; const TableCellPrivate: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Table/Table.types.ts b/packages/reshaped/src/components/Table/Table.types.ts index 99212e361..cddc06eef 100644 --- a/packages/reshaped/src/components/Table/Table.types.ts +++ b/packages/reshaped/src/components/Table/Table.types.ts @@ -1,7 +1,7 @@ import React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { Attributes } from "@/types/global"; +import type { Attributes } from "@/types/global.js"; export type Props = { /** Add border around the table */ diff --git a/packages/reshaped/src/components/Table/index.ts b/packages/reshaped/src/components/Table/index.ts index 6b8dbb409..86952e91f 100644 --- a/packages/reshaped/src/components/Table/index.ts +++ b/packages/reshaped/src/components/Table/index.ts @@ -1,4 +1,4 @@ -import Table, { TableBody, TableCell, TableHead, TableHeading, TableRow } from "./Table"; +import Table, { TableBody, TableCell, TableHead, TableHeading, TableRow } from "./Table.js"; const TableRoot = Table as typeof Table & { Cell: typeof TableCell; @@ -22,4 +22,4 @@ export type { HeadProps as TableHeadProps, Props as TableProps, RowProps as TableRowProps, -} from "./Table.types"; +} from "./Table.types.js"; diff --git a/packages/reshaped/src/components/Table/tests/Table.stories.tsx b/packages/reshaped/src/components/Table/tests/Table.stories.tsx index 0ec4a634a..ecb1f079d 100644 --- a/packages/reshaped/src/components/Table/tests/Table.stories.tsx +++ b/packages/reshaped/src/components/Table/tests/Table.stories.tsx @@ -2,11 +2,11 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect } from "storybook/test"; -import Card from "@/components/Card"; -import Checkbox from "@/components/Checkbox"; -import Table from "@/components/Table"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import Card from "@/components/Card/index.js"; +import Checkbox from "@/components/Checkbox/index.js"; +import Table from "@/components/Table/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/Table", diff --git a/packages/reshaped/src/components/Tabs/Tabs.tsx b/packages/reshaped/src/components/Tabs/Tabs.tsx index e88ab9249..240218143 100644 --- a/packages/reshaped/src/components/Tabs/Tabs.tsx +++ b/packages/reshaped/src/components/Tabs/Tabs.tsx @@ -1,6 +1,6 @@ -import type * as T from "./Tabs.types"; -import TabsControlled from "./TabsControlled"; -import TabsUncontrolled from "./TabsUncontrolled"; +import type * as T from "./Tabs.types.js"; +import TabsControlled from "./TabsControlled.js"; +import TabsUncontrolled from "./TabsUncontrolled.js"; const Tabs: React.FC = (props) => { const { value } = props; diff --git a/packages/reshaped/src/components/Tabs/Tabs.types.ts b/packages/reshaped/src/components/Tabs/Tabs.types.ts index 568b3156d..c2605aad5 100644 --- a/packages/reshaped/src/components/Tabs/Tabs.types.ts +++ b/packages/reshaped/src/components/Tabs/Tabs.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"; export type SelectionState = { left: number; diff --git a/packages/reshaped/src/components/Tabs/TabsContext.tsx b/packages/reshaped/src/components/Tabs/TabsContext.tsx index 14204dee9..5d94e0cc9 100644 --- a/packages/reshaped/src/components/Tabs/TabsContext.tsx +++ b/packages/reshaped/src/components/Tabs/TabsContext.tsx @@ -2,7 +2,7 @@ import React from "react"; -import type * as T from "./Tabs.types"; +import type * as T from "./Tabs.types.js"; const Context = React.createContext({} as T.Context); diff --git a/packages/reshaped/src/components/Tabs/TabsControlled.tsx b/packages/reshaped/src/components/Tabs/TabsControlled.tsx index 4ebff087f..e06287376 100644 --- a/packages/reshaped/src/components/Tabs/TabsControlled.tsx +++ b/packages/reshaped/src/components/Tabs/TabsControlled.tsx @@ -2,9 +2,9 @@ import React from "react"; -import useElementId from "@/hooks/useElementId"; -import type * as T from "./Tabs.types"; -import { TabsProvider } from "./TabsContext"; +import useElementId from "@/hooks/useElementId.js"; +import type * as T from "./Tabs.types.js"; +import { TabsProvider } from "./TabsContext.js"; const TabsControlled: React.FC = (props) => { const { diff --git a/packages/reshaped/src/components/Tabs/TabsItem.tsx b/packages/reshaped/src/components/Tabs/TabsItem.tsx index 1f966d991..2faeae8aa 100644 --- a/packages/reshaped/src/components/Tabs/TabsItem.tsx +++ b/packages/reshaped/src/components/Tabs/TabsItem.tsx @@ -3,13 +3,13 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import Actionable, { type ActionableRef } from "@/components/Actionable"; -import HiddenInput from "@/components/HiddenInput"; -import Icon from "@/components/Icon"; -import Text from "@/components/Text"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import type * as T from "./Tabs.types"; -import { useTabs } from "./TabsContext"; +import Actionable, { type ActionableRef } from "@/components/Actionable/index.js"; +import HiddenInput from "@/components/HiddenInput/index.js"; +import Icon from "@/components/Icon/index.js"; +import Text from "@/components/Text/index.js"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import type * as T from "./Tabs.types.js"; +import { useTabs } from "./TabsContext.js"; import s from "./Tabs.module.css"; const TabsItem = React.forwardRef((props, ref) => { diff --git a/packages/reshaped/src/components/Tabs/TabsList.tsx b/packages/reshaped/src/components/Tabs/TabsList.tsx index d093e8fb8..ebee4871a 100644 --- a/packages/reshaped/src/components/Tabs/TabsList.tsx +++ b/packages/reshaped/src/components/Tabs/TabsList.tsx @@ -3,17 +3,17 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import Actionable from "@/components/Actionable"; -import Icon from "@/components/Icon"; -import useFadeSide from "@/hooks/_internal/useFadeSide"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import useKeyboardArrowNavigation from "@/hooks/useKeyboardArrowNavigation"; -import useRTL from "@/hooks/useRTL"; -import { checkTransitions } from "@/utilities/animation"; -import IconChevronLeft from "@/icons/ChevronLeft"; -import IconChevronRight from "@/icons/ChevronRight"; -import type * as T from "./Tabs.types"; -import { useTabs } from "./TabsContext"; +import Actionable from "@/components/Actionable/index.js"; +import Icon from "@/components/Icon/index.js"; +import useFadeSide from "@/hooks/_internal/useFadeSide.js"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import useKeyboardArrowNavigation from "@/hooks/useKeyboardArrowNavigation.js"; +import useRTL from "@/hooks/useRTL.js"; +import { checkTransitions } from "@/utilities/animation.js"; +import IconChevronLeft from "@/icons/ChevronLeft.js"; +import IconChevronRight from "@/icons/ChevronRight.js"; +import type * as T from "./Tabs.types.js"; +import { useTabs } from "./TabsContext.js"; import s from "./Tabs.module.css"; const findParentItem = (el: HTMLElement | null, rootEl: HTMLElement): HTMLElement | null => { diff --git a/packages/reshaped/src/components/Tabs/TabsPanel.tsx b/packages/reshaped/src/components/Tabs/TabsPanel.tsx index a55f9bdd0..9d5d9f26d 100644 --- a/packages/reshaped/src/components/Tabs/TabsPanel.tsx +++ b/packages/reshaped/src/components/Tabs/TabsPanel.tsx @@ -4,9 +4,9 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; import { getFocusableElements } from "@reshaped/utilities/internal"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import type * as T from "./Tabs.types"; -import { useTabs } from "./TabsContext"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import type * as T from "./Tabs.types.js"; +import { useTabs } from "./TabsContext.js"; import s from "./Tabs.module.css"; const TabsPanel: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Tabs/TabsUncontrolled.tsx b/packages/reshaped/src/components/Tabs/TabsUncontrolled.tsx index 5a3b90694..7ac703ba8 100644 --- a/packages/reshaped/src/components/Tabs/TabsUncontrolled.tsx +++ b/packages/reshaped/src/components/Tabs/TabsUncontrolled.tsx @@ -2,8 +2,8 @@ import React from "react"; -import type * as T from "./Tabs.types"; -import TabsControlled from "./TabsControlled"; +import type * as T from "./Tabs.types.js"; +import TabsControlled from "./TabsControlled.js"; const TabsUncontrolled: React.FC = (props) => { const { defaultValue, onChange } = props; diff --git a/packages/reshaped/src/components/Tabs/index.ts b/packages/reshaped/src/components/Tabs/index.ts index 6bf631e58..c661ecb34 100644 --- a/packages/reshaped/src/components/Tabs/index.ts +++ b/packages/reshaped/src/components/Tabs/index.ts @@ -1,7 +1,7 @@ -import Tabs from "./Tabs"; -import TabsItem from "./TabsItem"; -import TabsList from "./TabsList"; -import TabsPanel from "./TabsPanel"; +import Tabs from "./Tabs.js"; +import TabsItem from "./TabsItem.js"; +import TabsList from "./TabsList.js"; +import TabsPanel from "./TabsPanel.js"; const TabsRoot = Tabs as typeof Tabs & { Item: typeof TabsItem; @@ -14,4 +14,4 @@ TabsRoot.List = TabsList; TabsRoot.Panel = TabsPanel; export default TabsRoot; -export type { ItemProps as TabsItemProps, Props as TabsProps } from "./Tabs.types"; +export type { ItemProps as TabsItemProps, Props as TabsProps } from "./Tabs.types.js"; diff --git a/packages/reshaped/src/components/Tabs/tests/Tabs.stories.tsx b/packages/reshaped/src/components/Tabs/tests/Tabs.stories.tsx index 85a3c6616..01dd14769 100644 --- a/packages/reshaped/src/components/Tabs/tests/Tabs.stories.tsx +++ b/packages/reshaped/src/components/Tabs/tests/Tabs.stories.tsx @@ -2,13 +2,13 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fn, userEvent, waitFor, within } from "storybook/test"; -import Button from "@/components/Button"; -import ScrollArea from "@/components/ScrollArea"; -import Tabs from "@/components/Tabs"; -import Text from "@/components/Text"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; -import IconZap from "@/icons/Zap"; +import Button from "@/components/Button/index.js"; +import ScrollArea from "@/components/ScrollArea/index.js"; +import Tabs from "@/components/Tabs/index.js"; +import Text from "@/components/Text/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/Tabs", diff --git a/packages/reshaped/src/components/Text/Text.tsx b/packages/reshaped/src/components/Text/Text.tsx index ab3833bbe..befe79c3d 100644 --- a/packages/reshaped/src/components/Text/Text.tsx +++ b/packages/reshaped/src/components/Text/Text.tsx @@ -1,8 +1,8 @@ import { classNames } from "@reshaped/utilities"; -import { responsiveClassNames } from "@/utilities/props"; -import { resolveMixin } from "@/styles/mixin"; -import type * as T from "./Text.types"; +import { responsiveClassNames } from "@/utilities/props.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as T from "./Text.types.js"; import s from "./Text.module.css"; const tagMap: Partial> = { diff --git a/packages/reshaped/src/components/Text/Text.types.ts b/packages/reshaped/src/components/Text/Text.types.ts index 1ba071c03..24fede7bc 100644 --- a/packages/reshaped/src/components/Text/Text.types.ts +++ b/packages/reshaped/src/components/Text/Text.types.ts @@ -1,8 +1,8 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; export type Variant = | "headline-1" diff --git a/packages/reshaped/src/components/Text/index.ts b/packages/reshaped/src/components/Text/index.ts index 2dfb77e70..110ef0790 100644 --- a/packages/reshaped/src/components/Text/index.ts +++ b/packages/reshaped/src/components/Text/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Text"; -export type { Props as TextProps } from "./Text.types"; +export { default } from "./Text.js"; +export type { Props as TextProps } from "./Text.types.js"; diff --git a/packages/reshaped/src/components/Text/tests/Text.stories.tsx b/packages/reshaped/src/components/Text/tests/Text.stories.tsx index 6f8f1e6a8..e296c1910 100644 --- a/packages/reshaped/src/components/Text/tests/Text.stories.tsx +++ b/packages/reshaped/src/components/Text/tests/Text.stories.tsx @@ -1,8 +1,8 @@ import { StoryObj } from "@storybook/react-vite"; import { expect } from "storybook/test"; -import Text from "@/components/Text"; -import { Example } from "@/utilities/storybook"; +import Text from "@/components/Text/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Utility components/Text", diff --git a/packages/reshaped/src/components/TextArea/TextArea.tsx b/packages/reshaped/src/components/TextArea/TextArea.tsx index 260d8a4cd..e43207ce3 100644 --- a/packages/reshaped/src/components/TextArea/TextArea.tsx +++ b/packages/reshaped/src/components/TextArea/TextArea.tsx @@ -3,11 +3,11 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import { useFormControl } from "@/components/FormControl"; -import useElementId from "@/hooks/useElementId"; -import { responsiveClassNames } from "@/utilities/props"; -import { resolveMixin } from "@/styles/mixin"; -import type * as T from "./TextArea.types"; +import { useFormControl } from "@/components/FormControl/index.js"; +import useElementId from "@/hooks/useElementId.js"; +import { responsiveClassNames } from "@/utilities/props.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as T from "./TextArea.types.js"; import s from "./TextArea.module.css"; const TextArea: React.FC = (props) => { diff --git a/packages/reshaped/src/components/TextArea/TextArea.types.ts b/packages/reshaped/src/components/TextArea/TextArea.types.ts index eb9e8a94d..2da89c681 100644 --- a/packages/reshaped/src/components/TextArea/TextArea.types.ts +++ b/packages/reshaped/src/components/TextArea/TextArea.types.ts @@ -1,9 +1,9 @@ import React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { FormControlProps } from "@/components/FormControl"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type { FormControlProps } from "@/components/FormControl/index.js"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; type Size = G.Responsive<"medium" | "large" | "xlarge">; diff --git a/packages/reshaped/src/components/TextArea/index.ts b/packages/reshaped/src/components/TextArea/index.ts index fcfe34e61..301fa2d6b 100644 --- a/packages/reshaped/src/components/TextArea/index.ts +++ b/packages/reshaped/src/components/TextArea/index.ts @@ -1,5 +1,5 @@ -import Aligner from "@/components/_private/Aligner"; -import TextArea from "./TextArea"; +import Aligner from "@/components/_private/Aligner/index.js"; +import TextArea from "./TextArea.js"; const TextAreaRoot = TextArea as typeof TextArea & { Aligner: typeof Aligner; @@ -8,4 +8,4 @@ const TextAreaRoot = TextArea as typeof TextArea & { TextAreaRoot.Aligner = Aligner; export default TextAreaRoot; -export type { Props as TextAreaProps } from "./TextArea.types"; +export type { Props as TextAreaProps } from "./TextArea.types.js"; diff --git a/packages/reshaped/src/components/TextArea/tests/TextArea.stories.tsx b/packages/reshaped/src/components/TextArea/tests/TextArea.stories.tsx index 43ddad4cc..e6a500751 100644 --- a/packages/reshaped/src/components/TextArea/tests/TextArea.stories.tsx +++ b/packages/reshaped/src/components/TextArea/tests/TextArea.stories.tsx @@ -1,12 +1,12 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import Button from "@/components/Button"; -import FormControl from "@/components/FormControl"; -import Text from "@/components/Text"; -import TextArea from "@/components/TextArea"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import FormControl from "@/components/FormControl/index.js"; +import Text from "@/components/Text/index.js"; +import TextArea from "@/components/TextArea/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/TextArea", diff --git a/packages/reshaped/src/components/TextField/TextField.tsx b/packages/reshaped/src/components/TextField/TextField.tsx index 0591042f0..bb3bb471c 100644 --- a/packages/reshaped/src/components/TextField/TextField.tsx +++ b/packages/reshaped/src/components/TextField/TextField.tsx @@ -3,12 +3,12 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import { useFormControl } from "@/components/FormControl"; -import Icon from "@/components/Icon"; -import useElementId from "@/hooks/useElementId"; -import { responsiveClassNames, responsivePropDependency } from "@/utilities/props"; -import { resolveMixin } from "@/styles/mixin"; -import type * as T from "./TextField.types"; +import { useFormControl } from "@/components/FormControl/index.js"; +import Icon from "@/components/Icon/index.js"; +import useElementId from "@/hooks/useElementId.js"; +import { responsiveClassNames, responsivePropDependency } from "@/utilities/props.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as T from "./TextField.types.js"; import s from "./TextField.module.css"; const TextFieldSlot: React.FC = (props) => { diff --git a/packages/reshaped/src/components/TextField/TextField.types.ts b/packages/reshaped/src/components/TextField/TextField.types.ts index 841588ab6..a6d1570f4 100644 --- a/packages/reshaped/src/components/TextField/TextField.types.ts +++ b/packages/reshaped/src/components/TextField/TextField.types.ts @@ -1,10 +1,10 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { FormControlProps } from "@/components/FormControl"; -import type { IconProps } from "@/components/Icon"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type { FormControlProps } from "@/components/FormControl/index.js"; +import type { IconProps } from "@/components/Icon/index.js"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">; diff --git a/packages/reshaped/src/components/TextField/index.ts b/packages/reshaped/src/components/TextField/index.ts index d4228fb29..bb461e43d 100644 --- a/packages/reshaped/src/components/TextField/index.ts +++ b/packages/reshaped/src/components/TextField/index.ts @@ -1,5 +1,5 @@ -import Aligner from "@/components/_private/Aligner"; -import TextField from "./TextField"; +import Aligner from "@/components/_private/Aligner/index.js"; +import TextField from "./TextField.js"; const TextFieldRoot = TextField as typeof TextField & { Aligner: typeof Aligner; @@ -8,4 +8,7 @@ const TextFieldRoot = TextField as typeof TextField & { TextFieldRoot.Aligner = Aligner; export default TextFieldRoot; -export type { BaseProps as TextFieldBaseProps, Props as TextFieldProps } from "./TextField.types"; +export type { + BaseProps as TextFieldBaseProps, + Props as TextFieldProps, +} from "./TextField.types.js"; diff --git a/packages/reshaped/src/components/TextField/tests/TextField.stories.tsx b/packages/reshaped/src/components/TextField/tests/TextField.stories.tsx index fe8586108..e482b2e8d 100644 --- a/packages/reshaped/src/components/TextField/tests/TextField.stories.tsx +++ b/packages/reshaped/src/components/TextField/tests/TextField.stories.tsx @@ -1,14 +1,14 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import Badge from "@/components/Badge"; -import Button from "@/components/Button"; -import FormControl from "@/components/FormControl"; -import Text from "@/components/Text"; -import TextField from "@/components/TextField"; -import View from "@/components/View"; -import { Example, Placeholder } from "@/utilities/storybook"; -import IconZap from "@/icons/Zap"; +import Badge from "@/components/Badge/index.js"; +import Button from "@/components/Button/index.js"; +import FormControl from "@/components/FormControl/index.js"; +import Text from "@/components/Text/index.js"; +import TextField from "@/components/TextField/index.js"; +import View from "@/components/View/index.js"; +import { Example, Placeholder } from "@/utilities/storybook/index.js"; +import IconZap from "@/icons/Zap.js"; export default { title: "Components/TextField", diff --git a/packages/reshaped/src/components/Theme/GlobalColorMode.tsx b/packages/reshaped/src/components/Theme/GlobalColorMode.tsx index afdb10530..1843403f7 100644 --- a/packages/reshaped/src/components/Theme/GlobalColorMode.tsx +++ b/packages/reshaped/src/components/Theme/GlobalColorMode.tsx @@ -2,13 +2,13 @@ import React from "react"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import { disableTransitions, enableTransitions, onNextFrame } from "@/utilities/animation"; -import type * as G from "@/types/global"; -import { GlobalColorModeContext } from "./Theme.context"; -import type * as T from "./Theme.types"; -import { getRootThemeEl } from "./Theme.utilities"; -import { useGlobalColorMode } from "./useTheme"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import { disableTransitions, enableTransitions, onNextFrame } from "@/utilities/animation.js"; +import type * as G from "@/types/global.js"; +import { GlobalColorModeContext } from "./Theme.context.js"; +import type * as T from "./Theme.types.js"; +import { getRootThemeEl } from "./Theme.utilities.js"; +import { useGlobalColorMode } from "./useTheme.js"; const GlobalColorMode: React.FC = (props) => { const { defaultMode, mode: passedMode, scopeRef, children } = props; diff --git a/packages/reshaped/src/components/Theme/Theme.context.ts b/packages/reshaped/src/components/Theme/Theme.context.ts index 89d7d9a22..aa82e0fa8 100644 --- a/packages/reshaped/src/components/Theme/Theme.context.ts +++ b/packages/reshaped/src/components/Theme/Theme.context.ts @@ -2,7 +2,7 @@ import React from "react"; -import type * as T from "./Theme.types"; +import type * as T from "./Theme.types.js"; /* Context used to store data responsible for switching between modes of a theme */ export const ThemeContext = React.createContext({} as T.ThemeContextData); diff --git a/packages/reshaped/src/components/Theme/Theme.tsx b/packages/reshaped/src/components/Theme/Theme.tsx index 4faca9096..aab637fa4 100644 --- a/packages/reshaped/src/components/Theme/Theme.tsx +++ b/packages/reshaped/src/components/Theme/Theme.tsx @@ -3,11 +3,11 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import { ThemeContext } from "./Theme.context"; -import * as T from "./Theme.types"; -import { getRootThemeEl } from "./Theme.utilities"; -import { useGlobalColorMode, useTheme } from "./useTheme"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import { ThemeContext } from "./Theme.context.js"; +import * as T from "./Theme.types.js"; +import { getRootThemeEl } from "./Theme.utilities.js"; +import { useGlobalColorMode, useTheme } from "./useTheme.js"; import s from "./Theme.module.css"; const getThemeAttribute = (theme: NonNullable) => { diff --git a/packages/reshaped/src/components/Theme/Theme.types.ts b/packages/reshaped/src/components/Theme/Theme.types.ts index e9b5bfdbb..16f7e2a24 100644 --- a/packages/reshaped/src/components/Theme/Theme.types.ts +++ b/packages/reshaped/src/components/Theme/Theme.types.ts @@ -1,7 +1,7 @@ import React from "react"; import type { ClassName } from "@reshaped/utilities"; -import * as G from "@/types/global"; +import * as G from "@/types/global.js"; export type GlobalColorModeContextData = { mode: G.ColorMode; diff --git a/packages/reshaped/src/components/Theme/index.ts b/packages/reshaped/src/components/Theme/index.ts index e2d150f16..a18742d28 100644 --- a/packages/reshaped/src/components/Theme/index.ts +++ b/packages/reshaped/src/components/Theme/index.ts @@ -1,4 +1,4 @@ -export { default as GlobalColorMode } from "./GlobalColorMode"; -export { default, PrivateTheme } from "./Theme"; -export type { GlobalColorModeProps, Props as ThemeProps } from "./Theme.types"; -export { useTheme } from "./useTheme"; +export { default as GlobalColorMode } from "./GlobalColorMode.js"; +export { default, PrivateTheme } from "./Theme.js"; +export type { GlobalColorModeProps, Props as ThemeProps } from "./Theme.types.js"; +export { useTheme } from "./useTheme.js"; diff --git a/packages/reshaped/src/components/Theme/tests/Theme.stories.tsx b/packages/reshaped/src/components/Theme/tests/Theme.stories.tsx index b93fc7fd7..e41930e17 100644 --- a/packages/reshaped/src/components/Theme/tests/Theme.stories.tsx +++ b/packages/reshaped/src/components/Theme/tests/Theme.stories.tsx @@ -1,13 +1,13 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, userEvent } from "storybook/test"; -import Button from "@/components/Button"; -import Card from "@/components/Card"; -import MenuItem from "@/components/MenuItem"; -import Popover from "@/components/Popover"; -import Theme, { useTheme } from "@/components/Theme"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import Card from "@/components/Card/index.js"; +import MenuItem from "@/components/MenuItem/index.js"; +import Popover from "@/components/Popover/index.js"; +import Theme, { useTheme } from "@/components/Theme/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Utility components/Theme", diff --git a/packages/reshaped/src/components/Theme/useTheme.ts b/packages/reshaped/src/components/Theme/useTheme.ts index 2e145c588..551143c1f 100644 --- a/packages/reshaped/src/components/Theme/useTheme.ts +++ b/packages/reshaped/src/components/Theme/useTheme.ts @@ -2,7 +2,7 @@ import React from "react"; -import { GlobalColorModeContext, ThemeContext } from "./Theme.context"; +import { GlobalColorModeContext, ThemeContext } from "./Theme.context.js"; export const useGlobalColorMode = () => { return React.useContext(GlobalColorModeContext); diff --git a/packages/reshaped/src/components/Toast/Toast.constants.ts b/packages/reshaped/src/components/Toast/Toast.constants.ts index 348322a09..4023dceb8 100644 --- a/packages/reshaped/src/components/Toast/Toast.constants.ts +++ b/packages/reshaped/src/components/Toast/Toast.constants.ts @@ -1,4 +1,4 @@ -import type * as T from "./Toast.types"; +import type * as T from "./Toast.types.js"; export const timeouts: Record = { short: 4000, diff --git a/packages/reshaped/src/components/Toast/Toast.context.ts b/packages/reshaped/src/components/Toast/Toast.context.ts index 811b642ae..d8856ec2b 100644 --- a/packages/reshaped/src/components/Toast/Toast.context.ts +++ b/packages/reshaped/src/components/Toast/Toast.context.ts @@ -2,8 +2,8 @@ import React from "react"; -import { defaultContextData } from "./Toast.constants"; -import type * as T from "./Toast.types"; +import { defaultContextData } from "./Toast.constants.js"; +import type * as T from "./Toast.types.js"; const context = React.createContext(defaultContextData); diff --git a/packages/reshaped/src/components/Toast/Toast.tsx b/packages/reshaped/src/components/Toast/Toast.tsx index 7e29a9ce1..d0e84bbac 100644 --- a/packages/reshaped/src/components/Toast/Toast.tsx +++ b/packages/reshaped/src/components/Toast/Toast.tsx @@ -2,11 +2,11 @@ import React from "react"; -import Button, { type ButtonProps } from "@/components/Button"; -import Icon from "@/components/Icon"; -import Text from "@/components/Text"; -import View, { type ViewProps } from "@/components/View"; -import type * as T from "./Toast.types"; +import Button, { type ButtonProps } from "@/components/Button/index.js"; +import Icon from "@/components/Icon/index.js"; +import Text from "@/components/Text/index.js"; +import View, { type ViewProps } from "@/components/View/index.js"; +import type * as T from "./Toast.types.js"; import s from "./Toast.module.css"; const Toast: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Toast/Toast.types.ts b/packages/reshaped/src/components/Toast/Toast.types.ts index 18884dbdd..94507fe0a 100644 --- a/packages/reshaped/src/components/Toast/Toast.types.ts +++ b/packages/reshaped/src/components/Toast/Toast.types.ts @@ -1,8 +1,8 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { IconProps } from "@/components/Icon"; -import type { Attributes } from "@/types/global"; +import type { IconProps } from "@/components/Icon/index.js"; +import type { Attributes } from "@/types/global.js"; export type Status = "entering" | "entered" | "exited"; export type TimeoutAlias = "short" | "long"; diff --git a/packages/reshaped/src/components/Toast/ToastContainer.tsx b/packages/reshaped/src/components/Toast/ToastContainer.tsx index ee3e0a27f..ec5b66d59 100644 --- a/packages/reshaped/src/components/Toast/ToastContainer.tsx +++ b/packages/reshaped/src/components/Toast/ToastContainer.tsx @@ -4,11 +4,11 @@ import React from "react"; import { classNames, TrapFocus } from "@reshaped/utilities"; import { checkKeyboardMode } from "@reshaped/utilities/internal"; -import { onNextFrame, checkTransitions } from "@/utilities/animation"; -import Toast from "./Toast"; -import { timeouts, toastWidths } from "./Toast.constants"; -import ToastContext from "./Toast.context"; -import type * as T from "./Toast.types"; +import { onNextFrame, checkTransitions } from "@/utilities/animation.js"; +import Toast from "./Toast.js"; +import { timeouts, toastWidths } from "./Toast.constants.js"; +import ToastContext from "./Toast.context.js"; +import type * as T from "./Toast.types.js"; import s from "./Toast.module.css"; const isWidthPreset = (width: T.ShowProps["width"]): width is T.WidthPreset => diff --git a/packages/reshaped/src/components/Toast/ToastProvider.tsx b/packages/reshaped/src/components/Toast/ToastProvider.tsx index 8edf96ace..70d62443e 100644 --- a/packages/reshaped/src/components/Toast/ToastProvider.tsx +++ b/packages/reshaped/src/components/Toast/ToastProvider.tsx @@ -2,11 +2,11 @@ import React from "react"; -import { defaultContextData, positions } from "./Toast.constants"; -import ToastContext from "./Toast.context"; -import * as T from "./Toast.types"; -import ToastRegion from "./ToastRegion"; -import useToast from "./useToast"; +import { defaultContextData, positions } from "./Toast.constants.js"; +import ToastContext from "./Toast.context.js"; +import * as T from "./Toast.types.js"; +import ToastRegion from "./ToastRegion.js"; +import useToast from "./useToast.js"; let counter = 0; const generateId = () => `__rs-toast-${counter++}`; diff --git a/packages/reshaped/src/components/Toast/ToastRegion.tsx b/packages/reshaped/src/components/Toast/ToastRegion.tsx index 022e10212..b8cd285e8 100644 --- a/packages/reshaped/src/components/Toast/ToastRegion.tsx +++ b/packages/reshaped/src/components/Toast/ToastRegion.tsx @@ -4,9 +4,9 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; import { focusableSelector } from "@reshaped/utilities/internal"; -import ToastContext from "./Toast.context"; -import * as T from "./Toast.types"; -import ToastContainer from "./ToastContainer"; +import ToastContext from "./Toast.context.js"; +import * as T from "./Toast.types.js"; +import ToastContainer from "./ToastContainer.js"; import s from "./Toast.module.css"; const ToastRegion: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Toast/index.ts b/packages/reshaped/src/components/Toast/index.ts index 8d0c2e783..e52a3890c 100644 --- a/packages/reshaped/src/components/Toast/index.ts +++ b/packages/reshaped/src/components/Toast/index.ts @@ -2,6 +2,6 @@ export type { Props as ToastProps, ProviderProps as ToastProviderProps, ShowProps as ToastShowProps, -} from "./Toast.types"; -export { default as ToastProvider } from "./ToastProvider"; -export { default as useToast } from "./useToast"; +} from "./Toast.types.js"; +export { default as ToastProvider } from "./ToastProvider.js"; +export { default as useToast } from "./useToast.js"; diff --git a/packages/reshaped/src/components/Toast/tests/Toast.stories.tsx b/packages/reshaped/src/components/Toast/tests/Toast.stories.tsx index 74151edcf..65a154225 100644 --- a/packages/reshaped/src/components/Toast/tests/Toast.stories.tsx +++ b/packages/reshaped/src/components/Toast/tests/Toast.stories.tsx @@ -2,14 +2,14 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, userEvent, within } from "storybook/test"; -import Button from "@/components/Button"; -import Dismissible from "@/components/Dismissible"; -import Image from "@/components/Image"; -import Text from "@/components/Text"; -import { ToastProvider, useToast } from "@/components/Toast"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; -import IconZap from "@/icons/Zap"; +import Button from "@/components/Button/index.js"; +import Dismissible from "@/components/Dismissible/index.js"; +import Image from "@/components/Image/index.js"; +import Text from "@/components/Text/index.js"; +import { ToastProvider, useToast } from "@/components/Toast/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/Toast", diff --git a/packages/reshaped/src/components/Toast/useToast.ts b/packages/reshaped/src/components/Toast/useToast.ts index 3b2d23cd3..b4e10a4ae 100644 --- a/packages/reshaped/src/components/Toast/useToast.ts +++ b/packages/reshaped/src/components/Toast/useToast.ts @@ -2,7 +2,7 @@ import React from "react"; -import ToastContext from "./Toast.context"; +import ToastContext from "./Toast.context.js"; const useToast = () => { const { add, hide, id } = React.useContext(ToastContext); diff --git a/packages/reshaped/src/components/ToggleButton/ToggleButton.tsx b/packages/reshaped/src/components/ToggleButton/ToggleButton.tsx index 62322c6e9..dc2f0cc09 100644 --- a/packages/reshaped/src/components/ToggleButton/ToggleButton.tsx +++ b/packages/reshaped/src/components/ToggleButton/ToggleButton.tsx @@ -1,6 +1,6 @@ -import type * as T from "./ToggleButton.types"; -import ToggleButtonControlled from "./ToggleButtonControlled"; -import ToggleButtonUncontrolled from "./ToggleButtonUncontrolled"; +import type * as T from "./ToggleButton.types.js"; +import ToggleButtonControlled from "./ToggleButtonControlled.js"; +import ToggleButtonUncontrolled from "./ToggleButtonUncontrolled.js"; const ToggleButton: React.FC = (props) => { const { checked } = props; diff --git a/packages/reshaped/src/components/ToggleButton/ToggleButton.types.ts b/packages/reshaped/src/components/ToggleButton/ToggleButton.types.ts index 9612b5d92..1b3010ca5 100644 --- a/packages/reshaped/src/components/ToggleButton/ToggleButton.types.ts +++ b/packages/reshaped/src/components/ToggleButton/ToggleButton.types.ts @@ -1,4 +1,4 @@ -import type { ButtonProps } from "@/components/Button"; +import type { ButtonProps } from "@/components/Button/index.js"; type BaseProps = Omit & { /** Component render variant diff --git a/packages/reshaped/src/components/ToggleButton/ToggleButtonControlled.tsx b/packages/reshaped/src/components/ToggleButton/ToggleButtonControlled.tsx index 4c2b1e283..b33c349d0 100644 --- a/packages/reshaped/src/components/ToggleButton/ToggleButtonControlled.tsx +++ b/packages/reshaped/src/components/ToggleButton/ToggleButtonControlled.tsx @@ -1,8 +1,8 @@ "use client"; -import Button, { ButtonProps } from "@/components/Button"; -import { useToggleButtonGroup } from "@/components/ToggleButtonGroup"; -import type * as T from "./ToggleButton.types"; +import Button, { ButtonProps } from "@/components/Button/index.js"; +import { useToggleButtonGroup } from "@/components/ToggleButtonGroup/index.js"; +import type * as T from "./ToggleButton.types.js"; const ToggleButtonControlled: React.FC = (props) => { const { diff --git a/packages/reshaped/src/components/ToggleButton/ToggleButtonUncontrolled.tsx b/packages/reshaped/src/components/ToggleButton/ToggleButtonUncontrolled.tsx index 004c8d493..9690ff028 100644 --- a/packages/reshaped/src/components/ToggleButton/ToggleButtonUncontrolled.tsx +++ b/packages/reshaped/src/components/ToggleButton/ToggleButtonUncontrolled.tsx @@ -1,8 +1,8 @@ "use client"; -import useToggle from "@/hooks/useToggle"; -import type * as T from "./ToggleButton.types"; -import ToggleButtonControlled from "./ToggleButtonControlled"; +import useToggle from "@/hooks/useToggle.js"; +import type * as T from "./ToggleButton.types.js"; +import ToggleButtonControlled from "./ToggleButtonControlled.js"; const ToggleButtonUncontrolled: React.FC = (props) => { const { defaultChecked, onChange, ...buttonProps } = props; diff --git a/packages/reshaped/src/components/ToggleButton/index.ts b/packages/reshaped/src/components/ToggleButton/index.ts index 6d8033800..af6f22755 100644 --- a/packages/reshaped/src/components/ToggleButton/index.ts +++ b/packages/reshaped/src/components/ToggleButton/index.ts @@ -1,2 +1,2 @@ -export { default } from "./ToggleButton"; -export type { Props as ToggleButtonProps } from "./ToggleButton.types"; +export { default } from "./ToggleButton.js"; +export type { Props as ToggleButtonProps } from "./ToggleButton.types.js"; diff --git a/packages/reshaped/src/components/ToggleButton/tests/ToggleButton.stories.tsx b/packages/reshaped/src/components/ToggleButton/tests/ToggleButton.stories.tsx index aaee460ad..556a8c2ff 100644 --- a/packages/reshaped/src/components/ToggleButton/tests/ToggleButton.stories.tsx +++ b/packages/reshaped/src/components/ToggleButton/tests/ToggleButton.stories.tsx @@ -1,8 +1,8 @@ import { type StoryObj } from "@storybook/react-vite"; import { expect, fn, type Mock, userEvent } from "storybook/test"; -import { Example } from "@/utilities/storybook"; -import ToggleButton from "../ToggleButton"; +import { Example } from "@/utilities/storybook/index.js"; +import ToggleButton from "../ToggleButton.js"; export default { title: "Components/ToggleButton", diff --git a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.context.ts b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.context.ts index 1f7a4cb52..720ebd7d4 100644 --- a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.context.ts +++ b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.context.ts @@ -2,7 +2,7 @@ import React from "react"; -import type * as T from "./ToggleButtonGroup.types"; +import type * as T from "./ToggleButtonGroup.types.js"; const ToggleButtonGroupContext = React.createContext(null); diff --git a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx index b2f508845..906f6755f 100644 --- a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx +++ b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx @@ -1,6 +1,6 @@ -import type * as T from "./ToggleButtonGroup.types"; -import ToggleButtonGroupControlled from "./ToggleButtonGroupControlled"; -import ToggleButtonGroupUncontrolled from "./ToggleButtonGroupUncontrolled"; +import type * as T from "./ToggleButtonGroup.types.js"; +import ToggleButtonGroupControlled from "./ToggleButtonGroupControlled.js"; +import ToggleButtonGroupUncontrolled from "./ToggleButtonGroupUncontrolled.js"; const ToggleButtonGroup: React.FC = (props) => { const { value } = props; diff --git a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.types.ts b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.types.ts index 3b57dd296..4ad5a9633 100644 --- a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.types.ts +++ b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.types.ts @@ -1,7 +1,7 @@ import type React from "react"; -import type { ButtonGroupProps } from "@/components/Button"; -import type { ToggleButtonProps } from "@/components/ToggleButton"; +import type { ButtonGroupProps } from "@/components/Button/index.js"; +import type { ToggleButtonProps } from "@/components/ToggleButton/index.js"; type BaseProps = { /** Selection mode for the toggle button group diff --git a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroupControlled.tsx b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroupControlled.tsx index 99dbff9d1..e2b8f9ee7 100644 --- a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroupControlled.tsx +++ b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroupControlled.tsx @@ -2,10 +2,10 @@ import React from "react"; -import Button from "@/components/Button"; -import useKeyboardArrowNavigation from "@/hooks/useKeyboardArrowNavigation"; -import Context from "./ToggleButtonGroup.context"; -import type * as T from "./ToggleButtonGroup.types"; +import Button from "@/components/Button/index.js"; +import useKeyboardArrowNavigation from "@/hooks/useKeyboardArrowNavigation.js"; +import Context from "./ToggleButtonGroup.context.js"; +import type * as T from "./ToggleButtonGroup.types.js"; const ToggleButtonGroupControlled: React.FC = (props) => { const { diff --git a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroupUncontrolled.tsx b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroupUncontrolled.tsx index 139a5a8c6..28f1c3703 100644 --- a/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroupUncontrolled.tsx +++ b/packages/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroupUncontrolled.tsx @@ -2,8 +2,8 @@ import React from "react"; -import type * as T from "./ToggleButtonGroup.types"; -import ToggleButtonGroupControlled from "./ToggleButtonGroupControlled"; +import type * as T from "./ToggleButtonGroup.types.js"; +import ToggleButtonGroupControlled from "./ToggleButtonGroupControlled.js"; const ToggleButtonGroupUncontrolled: React.FC = (props) => { const { defaultValue, onChange } = props; diff --git a/packages/reshaped/src/components/ToggleButtonGroup/index.ts b/packages/reshaped/src/components/ToggleButtonGroup/index.ts index fec8f6b0f..a20a2eb50 100644 --- a/packages/reshaped/src/components/ToggleButtonGroup/index.ts +++ b/packages/reshaped/src/components/ToggleButtonGroup/index.ts @@ -1,3 +1,3 @@ -export { default } from "./ToggleButtonGroup"; -export { useToggleButtonGroup } from "./ToggleButtonGroup.context"; -export type { Props as ToggleButtonGroupProps } from "./ToggleButtonGroup.types"; +export { default } from "./ToggleButtonGroup.js"; +export { useToggleButtonGroup } from "./ToggleButtonGroup.context.js"; +export type { Props as ToggleButtonGroupProps } from "./ToggleButtonGroup.types.js"; diff --git a/packages/reshaped/src/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.tsx b/packages/reshaped/src/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.tsx index 4ea38dc39..7f2e211c1 100644 --- a/packages/reshaped/src/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.tsx +++ b/packages/reshaped/src/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.tsx @@ -1,12 +1,12 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, Mock, userEvent } from "storybook/test"; -import ToggleButton from "@/components/ToggleButton"; -import ToggleButtonGroup from "@/components/ToggleButtonGroup"; -import { Example } from "@/utilities/storybook"; -import IconCheckmark from "@/icons/Checkmark"; -import IconMinus from "@/icons/Minus"; -import IconPlus from "@/icons/Plus"; +import ToggleButton from "@/components/ToggleButton/index.js"; +import ToggleButtonGroup from "@/components/ToggleButtonGroup/index.js"; +import { Example } from "@/utilities/storybook/index.js"; +import IconCheckmark from "@/icons/Checkmark.js"; +import IconMinus from "@/icons/Minus.js"; +import IconPlus from "@/icons/Plus.js"; export default { title: "Components/ToggleButtonGroup", diff --git a/packages/reshaped/src/components/Tooltip/Tooltip.tsx b/packages/reshaped/src/components/Tooltip/Tooltip.tsx index e6fce2127..8853967e4 100644 --- a/packages/reshaped/src/components/Tooltip/Tooltip.tsx +++ b/packages/reshaped/src/components/Tooltip/Tooltip.tsx @@ -1,7 +1,7 @@ "use client"; -import Flyout from "@/components/Flyout"; -import type * as T from "./Tooltip.types"; +import Flyout from "@/components/Flyout/index.js"; +import type * as T from "./Tooltip.types.js"; import s from "./Tooltip.module.css"; const Tooltip: React.FC = (props) => { diff --git a/packages/reshaped/src/components/Tooltip/Tooltip.types.ts b/packages/reshaped/src/components/Tooltip/Tooltip.types.ts index b995852ba..d42dfa043 100644 --- a/packages/reshaped/src/components/Tooltip/Tooltip.types.ts +++ b/packages/reshaped/src/components/Tooltip/Tooltip.types.ts @@ -1,6 +1,6 @@ import React from "react"; -import type { FlyoutProps, FlyoutTriggerAttributes } from "@/components/Flyout"; +import type { FlyoutProps, FlyoutTriggerAttributes } from "@/components/Flyout/index.js"; export type Props = Pick< FlyoutProps, diff --git a/packages/reshaped/src/components/Tooltip/index.ts b/packages/reshaped/src/components/Tooltip/index.ts index 43cdfc16e..d072f1a69 100644 --- a/packages/reshaped/src/components/Tooltip/index.ts +++ b/packages/reshaped/src/components/Tooltip/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Tooltip"; -export type { Props as TooltipProps } from "./Tooltip.types"; +export { default } from "./Tooltip.js"; +export type { Props as TooltipProps } from "./Tooltip.types.js"; diff --git a/packages/reshaped/src/components/Tooltip/tests/Tooltip.stories.tsx b/packages/reshaped/src/components/Tooltip/tests/Tooltip.stories.tsx index c66b44597..cd8817327 100644 --- a/packages/reshaped/src/components/Tooltip/tests/Tooltip.stories.tsx +++ b/packages/reshaped/src/components/Tooltip/tests/Tooltip.stories.tsx @@ -1,12 +1,12 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fireEvent, fn, userEvent, waitFor, within } from "storybook/test"; -import Button from "@/components/Button"; -import Popover from "@/components/Popover"; -import Tooltip, { TooltipProps } from "@/components/Tooltip"; -import View from "@/components/View"; -import useResponsiveClientValue from "@/hooks/useResponsiveClientValue"; -import { Example } from "@/utilities/storybook"; +import Button from "@/components/Button/index.js"; +import Popover from "@/components/Popover/index.js"; +import Tooltip, { TooltipProps } from "@/components/Tooltip/index.js"; +import View from "@/components/View/index.js"; +import useResponsiveClientValue from "@/hooks/useResponsiveClientValue.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Components/Tooltip", diff --git a/packages/reshaped/src/components/View/View.tsx b/packages/reshaped/src/components/View/View.tsx index cc1fedb29..4452f2900 100644 --- a/packages/reshaped/src/components/View/View.tsx +++ b/packages/reshaped/src/components/View/View.tsx @@ -1,12 +1,12 @@ import React, { isValidElement } from "react"; import { classNames } from "@reshaped/utilities"; -import Divider, { type DividerProps } from "@/components/Divider"; -import Hidden from "@/components/Hidden"; -import { responsiveClassNames, responsiveVariables } from "@/utilities/props"; -import { resolveMixin } from "@/styles/mixin"; -import type * as G from "@/types/global"; -import type * as T from "./View.types"; +import Divider, { type DividerProps } from "@/components/Divider/index.js"; +import Hidden from "@/components/Hidden/index.js"; +import { responsiveClassNames, responsiveVariables } from "@/utilities/props.js"; +import { resolveMixin } from "@/styles/mixin.js"; +import type * as G from "@/types/global.js"; +import type * as T from "./View.types.js"; import s from "./View.module.css"; export const ViewItem = ( diff --git a/packages/reshaped/src/components/View/View.types.ts b/packages/reshaped/src/components/View/View.types.ts index bacb475fb..e09606aca 100644 --- a/packages/reshaped/src/components/View/View.types.ts +++ b/packages/reshaped/src/components/View/View.types.ts @@ -1,9 +1,9 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type * as TStyles from "@/styles/types"; -import type * as G from "@/types/global"; -import type { Attributes } from "@/types/global"; +import type * as TStyles from "@/styles/types.js"; +import type * as G from "@/types/global.js"; +import type { Attributes } from "@/types/global.js"; type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto"; export type Direction = "row" | "column" | "row-reverse" | "column-reverse"; diff --git a/packages/reshaped/src/components/View/index.ts b/packages/reshaped/src/components/View/index.ts index f40c56fe4..34a2dd733 100644 --- a/packages/reshaped/src/components/View/index.ts +++ b/packages/reshaped/src/components/View/index.ts @@ -1,4 +1,4 @@ -import View, { ViewItem } from "./View"; +import View, { ViewItem } from "./View.js"; const ViewRoot = View as typeof View & { Item: typeof ViewItem; @@ -7,4 +7,4 @@ const ViewRoot = View as typeof View & { ViewRoot.Item = ViewItem; export default ViewRoot; -export type { ItemProps as ViewItemProps, Props as ViewProps } from "./View.types"; +export type { ItemProps as ViewItemProps, Props as ViewProps } from "./View.types.js"; diff --git a/packages/reshaped/src/components/View/tests/View.stories.tsx b/packages/reshaped/src/components/View/tests/View.stories.tsx index b834bd358..c9a087404 100644 --- a/packages/reshaped/src/components/View/tests/View.stories.tsx +++ b/packages/reshaped/src/components/View/tests/View.stories.tsx @@ -2,15 +2,15 @@ import { StoryObj } from "@storybook/react-vite"; import React, { useEffect, useState } from "react"; import { expect } from "storybook/test"; -import Avatar from "@/components/Avatar"; -import Button from "@/components/Button"; -import Hidden from "@/components/Hidden"; -import MenuItem from "@/components/MenuItem"; -import Tabs from "@/components/Tabs"; -import Text from "@/components/Text"; -import View, { type ViewProps } from "@/components/View"; -import useToggle from "@/hooks/useToggle"; -import { Example, Placeholder } from "@/utilities/storybook"; +import Avatar from "@/components/Avatar/index.js"; +import Button from "@/components/Button/index.js"; +import Hidden from "@/components/Hidden/index.js"; +import MenuItem from "@/components/MenuItem/index.js"; +import Tabs from "@/components/Tabs/index.js"; +import Text from "@/components/Text/index.js"; +import View, { type ViewProps } from "@/components/View/index.js"; +import useToggle from "@/hooks/useToggle.js"; +import { Example, Placeholder } from "@/utilities/storybook/index.js"; export default { title: "Utility components/View", diff --git a/packages/reshaped/src/components/_private/Aligner/Aligner.tsx b/packages/reshaped/src/components/_private/Aligner/Aligner.tsx index c10de216d..4741856fc 100644 --- a/packages/reshaped/src/components/_private/Aligner/Aligner.tsx +++ b/packages/reshaped/src/components/_private/Aligner/Aligner.tsx @@ -9,7 +9,7 @@ import { classNames } from "@reshaped/utilities"; -import type * as T from "./Aligner.types"; +import type * as T from "./Aligner.types.js"; import s from "./Aligner.module.css"; const Aligner: React.FC = (props) => { diff --git a/packages/reshaped/src/components/_private/Aligner/Aligner.types.ts b/packages/reshaped/src/components/_private/Aligner/Aligner.types.ts index dc92cd6ad..fa8c96168 100644 --- a/packages/reshaped/src/components/_private/Aligner/Aligner.types.ts +++ b/packages/reshaped/src/components/_private/Aligner/Aligner.types.ts @@ -1,6 +1,6 @@ import type { ClassName } from "@reshaped/utilities"; -import type { Attributes } from "@/types/global"; +import type { Attributes } from "@/types/global.js"; type Side = "start" | "end" | "top" | "bottom" | "inline" | "block" | "all"; diff --git a/packages/reshaped/src/components/_private/Aligner/index.ts b/packages/reshaped/src/components/_private/Aligner/index.ts index cd96cd5ef..e8198136a 100644 --- a/packages/reshaped/src/components/_private/Aligner/index.ts +++ b/packages/reshaped/src/components/_private/Aligner/index.ts @@ -1,2 +1,2 @@ -export { default } from "./Aligner"; -export type { Props as AlignerProps } from "./Aligner.types"; +export { default } from "./Aligner.js"; +export type { Props as AlignerProps } from "./Aligner.types.js"; diff --git a/packages/reshaped/src/components/_private/Portal/Portal.tsx b/packages/reshaped/src/components/_private/Portal/Portal.tsx index cbadc1372..caf414dea 100644 --- a/packages/reshaped/src/components/_private/Portal/Portal.tsx +++ b/packages/reshaped/src/components/_private/Portal/Portal.tsx @@ -3,10 +3,10 @@ import React from "react"; import ReactDOM from "react-dom"; -import Theme from "@/components/Theme"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import useToggle from "@/hooks/useToggle"; -import type * as T from "./Portal.types"; +import Theme from "@/components/Theme/index.js"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import useToggle from "@/hooks/useToggle.js"; +import type * as T from "./Portal.types.js"; import s from "./Portal.module.css"; const PortalScopeContext = React.createContext({} as T.Context); diff --git a/packages/reshaped/src/components/_private/Portal/Portal.types.ts b/packages/reshaped/src/components/_private/Portal/Portal.types.ts index bdb413f66..7ca0b9636 100644 --- a/packages/reshaped/src/components/_private/Portal/Portal.types.ts +++ b/packages/reshaped/src/components/_private/Portal/Portal.types.ts @@ -1,6 +1,6 @@ import React from "react"; -import { ThemeProps } from "@/components/Theme"; +import { ThemeProps } from "@/components/Theme/index.js"; export type Props = { children?: React.ReactNode; diff --git a/packages/reshaped/src/components/_private/Portal/index.ts b/packages/reshaped/src/components/_private/Portal/index.ts index a518e17d9..b90e735b9 100644 --- a/packages/reshaped/src/components/_private/Portal/index.ts +++ b/packages/reshaped/src/components/_private/Portal/index.ts @@ -1,4 +1,4 @@ -import Portal, { PortalScope } from "./Portal"; +import Portal, { PortalScope } from "./Portal.js"; const PortalRoot = Portal as typeof Portal & { Scope: typeof PortalScope; @@ -7,4 +7,4 @@ const PortalRoot = Portal as typeof Portal & { PortalRoot.Scope = PortalScope; export default PortalRoot; -export type { Props as PortalProps } from "./Portal.types"; +export type { Props as PortalProps } from "./Portal.types.js"; diff --git a/packages/reshaped/src/components/_private/Portal/tests/Portal.stories.tsx b/packages/reshaped/src/components/_private/Portal/tests/Portal.stories.tsx index 13a55e6ae..8484767f8 100644 --- a/packages/reshaped/src/components/_private/Portal/tests/Portal.stories.tsx +++ b/packages/reshaped/src/components/_private/Portal/tests/Portal.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; -import Portal from "@/components/_private/Portal"; +import Portal from "@/components/_private/Portal/index.js"; export default { title: "Internal/Portal" }; diff --git a/packages/reshaped/src/components/_private/Presence/Presence.tsx b/packages/reshaped/src/components/_private/Presence/Presence.tsx index 94dcbed02..b72950d56 100644 --- a/packages/reshaped/src/components/_private/Presence/Presence.tsx +++ b/packages/reshaped/src/components/_private/Presence/Presence.tsx @@ -3,8 +3,8 @@ import React from "react"; import { classNames } from "@reshaped/utilities"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import type * as T from "./Presence.types"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import type * as T from "./Presence.types.js"; import s from "./Presence.module.css"; const PresenceItem: React.FC = (props) => { diff --git a/packages/reshaped/src/components/_private/Presence/Presence.types.ts b/packages/reshaped/src/components/_private/Presence/Presence.types.ts index ec449d913..5ab71b1d1 100644 --- a/packages/reshaped/src/components/_private/Presence/Presence.types.ts +++ b/packages/reshaped/src/components/_private/Presence/Presence.types.ts @@ -1,7 +1,7 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import type { Attributes } from "@/types/global"; +import type { Attributes } from "@/types/global.js"; export type Status = "enter" | "exit"; diff --git a/packages/reshaped/src/components/_private/Presence/index.ts b/packages/reshaped/src/components/_private/Presence/index.ts index bbd0f5846..74accb0c2 100644 --- a/packages/reshaped/src/components/_private/Presence/index.ts +++ b/packages/reshaped/src/components/_private/Presence/index.ts @@ -1 +1 @@ -export { default } from "./Presence"; +export { default } from "./Presence.js"; diff --git a/packages/reshaped/src/hooks/_internal/useDrag.ts b/packages/reshaped/src/hooks/_internal/useDrag.ts index 1cee716ae..26162c90d 100644 --- a/packages/reshaped/src/hooks/_internal/useDrag.ts +++ b/packages/reshaped/src/hooks/_internal/useDrag.ts @@ -3,10 +3,10 @@ import React from "react"; import { disableScroll, enableScroll } from "@reshaped/utilities/internal"; -import useHandlerRef from "@/hooks/useHandlerRef"; -import useHotkeys from "@/hooks/useHotkeys"; -import useToggle from "@/hooks/useToggle"; -import * as keys from "@/constants/keys"; +import useHandlerRef from "@/hooks/useHandlerRef.js"; +import useHotkeys from "@/hooks/useHotkeys.js"; +import useToggle from "@/hooks/useToggle.js"; +import * as keys from "@/constants/keys.js"; export type UseDragCallbackArgs = { x: number; y: number; triggerX: number; triggerY: number }; diff --git a/packages/reshaped/src/hooks/_internal/useFadeSide.ts b/packages/reshaped/src/hooks/_internal/useFadeSide.ts index 43ec8eae1..75d6473e1 100644 --- a/packages/reshaped/src/hooks/_internal/useFadeSide.ts +++ b/packages/reshaped/src/hooks/_internal/useFadeSide.ts @@ -3,8 +3,8 @@ import React from "react"; import { rafThrottle } from "@reshaped/utilities/internal"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import useRTL from "@/hooks/useRTL"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import useRTL from "@/hooks/useRTL.js"; const useFadeSide = ( scrollableRef: React.RefObject, diff --git a/packages/reshaped/src/hooks/_internal/useSingletonRTL.tsx b/packages/reshaped/src/hooks/_internal/useSingletonRTL.tsx index 9821cf8f9..a5e04b91b 100644 --- a/packages/reshaped/src/hooks/_internal/useSingletonRTL.tsx +++ b/packages/reshaped/src/hooks/_internal/useSingletonRTL.tsx @@ -3,7 +3,7 @@ import React from "react"; import { isRTL } from "@reshaped/utilities"; -import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect"; +import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js"; type Context = { rtl: [boolean, (state: boolean) => void]; diff --git a/packages/reshaped/src/hooks/_internal/useSingletonViewport.tsx b/packages/reshaped/src/hooks/_internal/useSingletonViewport.tsx index 0b360c143..0040882d6 100644 --- a/packages/reshaped/src/hooks/_internal/useSingletonViewport.tsx +++ b/packages/reshaped/src/hooks/_internal/useSingletonViewport.tsx @@ -3,8 +3,8 @@ import React from "react"; import { breakpoints as defaultBreakpoints } from "@reshaped/theming"; -import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect"; -import type * as G from "@/types/global"; +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect.js"; +import type * as G from "@/types/global.js"; const SingletonViewportContext = React.createContext<{ viewport: G.Viewport; diff --git a/packages/reshaped/src/hooks/tests/useDrag.stories.tsx b/packages/reshaped/src/hooks/tests/useDrag.stories.tsx index 0e6addcf4..617f42c4e 100644 --- a/packages/reshaped/src/hooks/tests/useDrag.stories.tsx +++ b/packages/reshaped/src/hooks/tests/useDrag.stories.tsx @@ -2,10 +2,10 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fireEvent, fn } from "storybook/test"; -import Button from "@/components/Button"; -import View from "@/components/View"; -import useDrag from "@/hooks/_internal/useDrag"; -import useToggle from "@/hooks/useToggle"; +import Button from "@/components/Button/index.js"; +import View from "@/components/View/index.js"; +import useDrag from "@/hooks/_internal/useDrag.js"; +import useToggle from "@/hooks/useToggle.js"; export default { title: "Hooks/Internal/useDrag", diff --git a/packages/reshaped/src/hooks/tests/useElementId.stories.tsx b/packages/reshaped/src/hooks/tests/useElementId.stories.tsx index 9a0e45571..a119f16b3 100644 --- a/packages/reshaped/src/hooks/tests/useElementId.stories.tsx +++ b/packages/reshaped/src/hooks/tests/useElementId.stories.tsx @@ -1,7 +1,7 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, waitFor } from "storybook/test"; -import useElementId from "@/hooks/useElementId"; +import useElementId from "@/hooks/useElementId.js"; export default { title: "Hooks/useElementId", diff --git a/packages/reshaped/src/hooks/tests/useHandlerRef.stories.tsx b/packages/reshaped/src/hooks/tests/useHandlerRef.stories.tsx index 794292842..23888b3ab 100644 --- a/packages/reshaped/src/hooks/tests/useHandlerRef.stories.tsx +++ b/packages/reshaped/src/hooks/tests/useHandlerRef.stories.tsx @@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fn, Mock, userEvent } from "storybook/test"; -import useHandlerRef from "../useHandlerRef"; +import useHandlerRef from "../useHandlerRef.js"; export default { title: "Hooks/useHandlerRef", diff --git a/packages/reshaped/src/hooks/tests/useHotkeys.stories.tsx b/packages/reshaped/src/hooks/tests/useHotkeys.stories.tsx index 9fcff815e..9f3dc8af1 100644 --- a/packages/reshaped/src/hooks/tests/useHotkeys.stories.tsx +++ b/packages/reshaped/src/hooks/tests/useHotkeys.stories.tsx @@ -1,7 +1,7 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import useHotkeys from "../useHotkeys"; +import useHotkeys from "../useHotkeys.js"; export default { title: "Hooks/useHotkeys", diff --git a/packages/reshaped/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx b/packages/reshaped/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx index abac730f3..c3fcffae8 100644 --- a/packages/reshaped/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx +++ b/packages/reshaped/src/hooks/tests/useKeyboardArrowNavigation.stories.tsx @@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite"; import { useRef } from "react"; import { expect, userEvent } from "storybook/test"; -import useKeyboardArrowNavigation from "../useKeyboardArrowNavigation"; +import useKeyboardArrowNavigation from "../useKeyboardArrowNavigation.js"; export default { title: "Hooks/useKeyboardArrowNavigation", diff --git a/packages/reshaped/src/hooks/tests/useKeyboardMode.stories.tsx b/packages/reshaped/src/hooks/tests/useKeyboardMode.stories.tsx index 156d0269e..d38462e56 100644 --- a/packages/reshaped/src/hooks/tests/useKeyboardMode.stories.tsx +++ b/packages/reshaped/src/hooks/tests/useKeyboardMode.stories.tsx @@ -1,7 +1,7 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, userEvent } from "storybook/test"; -import useKeyboardMode from "../useKeyboardMode"; +import useKeyboardMode from "../useKeyboardMode.js"; export default { title: "Hooks/useKeyboardMode", diff --git a/packages/reshaped/src/hooks/tests/useOnClickOutside.stories.tsx b/packages/reshaped/src/hooks/tests/useOnClickOutside.stories.tsx index afdc493b9..78ab4d78f 100644 --- a/packages/reshaped/src/hooks/tests/useOnClickOutside.stories.tsx +++ b/packages/reshaped/src/hooks/tests/useOnClickOutside.stories.tsx @@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, fn, type Mock, userEvent } from "storybook/test"; -import useOnClickOutside from "../useOnClickOutside"; +import useOnClickOutside from "../useOnClickOutside.js"; export default { title: "Hooks/useOnClickOutside", diff --git a/packages/reshaped/src/hooks/tests/useRTL.stories.tsx b/packages/reshaped/src/hooks/tests/useRTL.stories.tsx index 13b4c0485..368c4724a 100644 --- a/packages/reshaped/src/hooks/tests/useRTL.stories.tsx +++ b/packages/reshaped/src/hooks/tests/useRTL.stories.tsx @@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect } from "storybook/test"; -import useRTL from "../useRTL"; +import useRTL from "../useRTL.js"; export default { title: "Hooks/useRTL", diff --git a/packages/reshaped/src/hooks/tests/useResponsiveClientValue.stories.tsx b/packages/reshaped/src/hooks/tests/useResponsiveClientValue.stories.tsx index 77161f6e5..e0ab4dc30 100644 --- a/packages/reshaped/src/hooks/tests/useResponsiveClientValue.stories.tsx +++ b/packages/reshaped/src/hooks/tests/useResponsiveClientValue.stories.tsx @@ -1,5 +1,5 @@ -import View, { type ViewProps } from "@/components/View"; -import useResponsiveClientValue from "@/hooks/useResponsiveClientValue"; +import View, { type ViewProps } from "@/components/View/index.js"; +import useResponsiveClientValue from "@/hooks/useResponsiveClientValue.js"; export default { title: "Hooks/useResponsiveClientValue", diff --git a/packages/reshaped/src/hooks/tests/useScrollLock.stories.tsx b/packages/reshaped/src/hooks/tests/useScrollLock.stories.tsx index 21f5e9df7..076c284ed 100644 --- a/packages/reshaped/src/hooks/tests/useScrollLock.stories.tsx +++ b/packages/reshaped/src/hooks/tests/useScrollLock.stories.tsx @@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { expect, userEvent } from "storybook/test"; -import useScrollLock from "../useScrollLock"; +import useScrollLock from "../useScrollLock.js"; export default { title: "Hooks/useScrollLock", diff --git a/packages/reshaped/src/hooks/tests/useToggle.stories.tsx b/packages/reshaped/src/hooks/tests/useToggle.stories.tsx index ae4dc5fef..6b5192ab4 100644 --- a/packages/reshaped/src/hooks/tests/useToggle.stories.tsx +++ b/packages/reshaped/src/hooks/tests/useToggle.stories.tsx @@ -1,7 +1,7 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, userEvent } from "storybook/test"; -import useToggle from "../useToggle"; +import useToggle from "../useToggle.js"; export default { title: "Hooks/useToggle", diff --git a/packages/reshaped/src/hooks/useHandlerRef.ts b/packages/reshaped/src/hooks/useHandlerRef.ts index e1e8f311e..b207f0f5f 100644 --- a/packages/reshaped/src/hooks/useHandlerRef.ts +++ b/packages/reshaped/src/hooks/useHandlerRef.ts @@ -1,6 +1,6 @@ import React from "react"; -import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect"; +import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js"; /** * Hook for wrapping event handlers passed as props with a ref diff --git a/packages/reshaped/src/hooks/useHotkeys.ts b/packages/reshaped/src/hooks/useHotkeys.ts index 6ef832fa3..6752e02ac 100644 --- a/packages/reshaped/src/hooks/useHotkeys.ts +++ b/packages/reshaped/src/hooks/useHotkeys.ts @@ -2,7 +2,7 @@ import React from "react"; -import { type Hotkeys, useSingletonHotkeys } from "./_internal/useSingletonHotkeys"; +import { type Hotkeys, useSingletonHotkeys } from "./_internal/useSingletonHotkeys.js"; const useHotkeys = ( hotkeys: Hotkeys, diff --git a/packages/reshaped/src/hooks/useIsDismissible.ts b/packages/reshaped/src/hooks/useIsDismissible.ts index e05bdf6db..bdb9261be 100644 --- a/packages/reshaped/src/hooks/useIsDismissible.ts +++ b/packages/reshaped/src/hooks/useIsDismissible.ts @@ -5,7 +5,7 @@ import React from "react"; -import useElementId from "@/hooks/useElementId"; +import useElementId from "@/hooks/useElementId.js"; type Ref = React.RefObject; type QueueItem = { triggerRef?: Ref; contentRef: Ref; parentId: string | null }; diff --git a/packages/reshaped/src/hooks/useKeyboardArrowNavigation.tsx b/packages/reshaped/src/hooks/useKeyboardArrowNavigation.tsx index 17d44300d..095620e63 100644 --- a/packages/reshaped/src/hooks/useKeyboardArrowNavigation.tsx +++ b/packages/reshaped/src/hooks/useKeyboardArrowNavigation.tsx @@ -7,7 +7,7 @@ import { getFocusableElements, } from "@reshaped/utilities/internal"; -import useHotkeys from "./useHotkeys"; +import useHotkeys from "./useHotkeys.js"; type Props = { ref: React.RefObject; diff --git a/packages/reshaped/src/hooks/useKeyboardMode.ts b/packages/reshaped/src/hooks/useKeyboardMode.ts index bd5617c88..f2579c7ea 100644 --- a/packages/reshaped/src/hooks/useKeyboardMode.ts +++ b/packages/reshaped/src/hooks/useKeyboardMode.ts @@ -1,3 +1,3 @@ -import { useSingletonKeyboardMode } from "./_internal/useSingletonKeyboardMode"; +import { useSingletonKeyboardMode } from "./_internal/useSingletonKeyboardMode.js"; export default useSingletonKeyboardMode; diff --git a/packages/reshaped/src/hooks/useOnClickOutside.ts b/packages/reshaped/src/hooks/useOnClickOutside.ts index bceefa509..2a6080fa6 100644 --- a/packages/reshaped/src/hooks/useOnClickOutside.ts +++ b/packages/reshaped/src/hooks/useOnClickOutside.ts @@ -1,7 +1,7 @@ import React from "react"; import { keys } from "@reshaped/utilities"; -import useHandlerRef from "./useHandlerRef"; +import useHandlerRef from "./useHandlerRef.js"; const useOnClickOutside = ( refs: React.RefObject[], diff --git a/packages/reshaped/src/hooks/useRTL.ts b/packages/reshaped/src/hooks/useRTL.ts index aaa78b641..9c900205d 100644 --- a/packages/reshaped/src/hooks/useRTL.ts +++ b/packages/reshaped/src/hooks/useRTL.ts @@ -1,3 +1,3 @@ -import { useSingletonRTL } from "./_internal/useSingletonRTL"; +import { useSingletonRTL } from "./_internal/useSingletonRTL.js"; export default useSingletonRTL; diff --git a/packages/reshaped/src/hooks/useResponsiveClientValue.ts b/packages/reshaped/src/hooks/useResponsiveClientValue.ts index 2983ef44c..6d82f7533 100644 --- a/packages/reshaped/src/hooks/useResponsiveClientValue.ts +++ b/packages/reshaped/src/hooks/useResponsiveClientValue.ts @@ -2,8 +2,8 @@ import { useMemo } from "react"; -import useViewport from "@/hooks/useViewport"; -import type * as G from "@/types/global"; +import useViewport from "@/hooks/useViewport.js"; +import type * as G from "@/types/global.js"; const useResponsiveClientValue = (value: G.Responsive): T | undefined => { const viewport = useViewport(); diff --git a/packages/reshaped/src/hooks/useViewport.ts b/packages/reshaped/src/hooks/useViewport.ts index 92b8a23d0..fac445ff6 100644 --- a/packages/reshaped/src/hooks/useViewport.ts +++ b/packages/reshaped/src/hooks/useViewport.ts @@ -1,4 +1,4 @@ -import useSingletonViewport from "@/hooks/_internal/useSingletonViewport"; +import useSingletonViewport from "@/hooks/_internal/useSingletonViewport.js"; const useViewport = () => { const { viewport } = useSingletonViewport(); diff --git a/packages/reshaped/src/index.ts b/packages/reshaped/src/index.ts index 45db31cba..6b1fbaba7 100644 --- a/packages/reshaped/src/index.ts +++ b/packages/reshaped/src/index.ts @@ -1,70 +1,74 @@ /** * Components */ -export type { AlertProps } from "@/components/Alert"; -export { default as Alert } from "@/components/Alert"; -export type { AutocompleteInstance, AutocompleteProps } from "@/components/Autocomplete"; -export { default as Autocomplete } from "@/components/Autocomplete"; -export type { AvatarProps } from "@/components/Avatar"; -export { default as Avatar } from "@/components/Avatar"; -export type { BadgeProps } from "@/components/Badge"; -export { default as Badge } from "@/components/Badge"; -export type { BreadcrumbsProps } from "@/components/Breadcrumbs"; -export { default as Breadcrumbs } from "@/components/Breadcrumbs"; -export type { ButtonAlignerProps, ButtonGroupProps, ButtonProps } from "@/components/Button"; -export { default as Button } from "@/components/Button"; -export type { CalendarProps } from "@/components/Calendar"; -export { default as Calendar } from "@/components/Calendar"; -export type { CardProps } from "@/components/Card"; -export { default as Card } from "@/components/Card"; -export type { CarouselInstance, CarouselProps } from "@/components/Carousel"; -export { default as Carousel } from "@/components/Carousel"; -export type { CheckboxProps } from "@/components/Checkbox"; -export { default as Checkbox } from "@/components/Checkbox"; -export type { CheckboxGroupProps } from "@/components/CheckboxGroup"; -export { default as CheckboxGroup } from "@/components/CheckboxGroup"; -export type { ContextMenuInstance, ContextMenuProps } from "@/components/ContextMenu"; -export { default as ContextMenu } from "@/components/ContextMenu"; -export type { DividerProps } from "@/components/Divider"; -export { default as Divider } from "@/components/Divider"; -export type { DropdownMenuInstance, DropdownMenuProps } from "@/components/DropdownMenu"; -export { default as DropdownMenu } from "@/components/DropdownMenu"; -export type { FileUploadProps } from "@/components/FileUpload"; -export { default as FileUpload } from "@/components/FileUpload"; -export type { LinkProps } from "@/components/Link"; -export { default as Link } from "@/components/Link"; -export type { LoaderProps } from "@/components/Loader"; -export { default as Loader } from "@/components/Loader"; -export type { LoaderTextProps } from "@/components/LoaderText"; -export { default as LoaderText } from "@/components/LoaderText"; -export type { MenuItemProps } from "@/components/MenuItem"; -export { default as MenuItem } from "@/components/MenuItem"; -export type { ModalProps } from "@/components/Modal"; -export { default as Modal } from "@/components/Modal"; -export type { NumberFieldProps } from "@/components/NumberField"; -export { default as NumberField } from "@/components/NumberField"; -export type { PaginationProps } from "@/components/Pagination"; -export { default as Pagination } from "@/components/Pagination"; -export type { PinFieldProps } from "@/components/PinField"; -export { default as PinField } from "@/components/PinField"; -export type { PopoverInstance, PopoverProps } from "@/components/Popover"; -export { default as Popover } from "@/components/Popover"; -export type { ProgressBarProps } from "@/components/ProgressBar"; -export { default as ProgressBar } from "@/components/ProgressBar"; -export type { ProgressIndicatorProps } from "@/components/ProgressIndicator"; -export { default as ProgressIndicator } from "@/components/ProgressIndicator"; -export type { RadioProps } from "@/components/Radio"; -export { default as Radio } from "@/components/Radio"; -export type { RadioGroupProps } from "@/components/RadioGroup"; -export { default as RadioGroup } from "@/components/RadioGroup"; -export type { SelectProps, SelectTriggerProps } from "@/components/Select"; -export { default as Select, SelectTrigger } from "@/components/Select"; -export type { SkeletonProps } from "@/components/Skeleton"; -export { default as Skeleton } from "@/components/Skeleton"; -export type { SliderProps } from "@/components/Slider"; -export { default as Slider } from "@/components/Slider"; -export type { SwitchProps } from "@/components/Switch"; -export { default as Switch } from "@/components/Switch"; +export type { AlertProps } from "@/components/Alert/index.js"; +export { default as Alert } from "@/components/Alert/index.js"; +export type { AutocompleteInstance, AutocompleteProps } from "@/components/Autocomplete/index.js"; +export { default as Autocomplete } from "@/components/Autocomplete/index.js"; +export type { AvatarProps } from "@/components/Avatar/index.js"; +export { default as Avatar } from "@/components/Avatar/index.js"; +export type { BadgeProps } from "@/components/Badge/index.js"; +export { default as Badge } from "@/components/Badge/index.js"; +export type { BreadcrumbsProps } from "@/components/Breadcrumbs/index.js"; +export { default as Breadcrumbs } from "@/components/Breadcrumbs/index.js"; +export type { + ButtonAlignerProps, + ButtonGroupProps, + ButtonProps, +} from "@/components/Button/index.js"; +export { default as Button } from "@/components/Button/index.js"; +export type { CalendarProps } from "@/components/Calendar/index.js"; +export { default as Calendar } from "@/components/Calendar/index.js"; +export type { CardProps } from "@/components/Card/index.js"; +export { default as Card } from "@/components/Card/index.js"; +export type { CarouselInstance, CarouselProps } from "@/components/Carousel/index.js"; +export { default as Carousel } from "@/components/Carousel/index.js"; +export type { CheckboxProps } from "@/components/Checkbox/index.js"; +export { default as Checkbox } from "@/components/Checkbox/index.js"; +export type { CheckboxGroupProps } from "@/components/CheckboxGroup/index.js"; +export { default as CheckboxGroup } from "@/components/CheckboxGroup/index.js"; +export type { ContextMenuInstance, ContextMenuProps } from "@/components/ContextMenu/index.js"; +export { default as ContextMenu } from "@/components/ContextMenu/index.js"; +export type { DividerProps } from "@/components/Divider/index.js"; +export { default as Divider } from "@/components/Divider/index.js"; +export type { DropdownMenuInstance, DropdownMenuProps } from "@/components/DropdownMenu/index.js"; +export { default as DropdownMenu } from "@/components/DropdownMenu/index.js"; +export type { FileUploadProps } from "@/components/FileUpload/index.js"; +export { default as FileUpload } from "@/components/FileUpload/index.js"; +export type { LinkProps } from "@/components/Link/index.js"; +export { default as Link } from "@/components/Link/index.js"; +export type { LoaderProps } from "@/components/Loader/index.js"; +export { default as Loader } from "@/components/Loader/index.js"; +export type { LoaderTextProps } from "@/components/LoaderText/index.js"; +export { default as LoaderText } from "@/components/LoaderText/index.js"; +export type { MenuItemProps } from "@/components/MenuItem/index.js"; +export { default as MenuItem } from "@/components/MenuItem/index.js"; +export type { ModalProps } from "@/components/Modal/index.js"; +export { default as Modal } from "@/components/Modal/index.js"; +export type { NumberFieldProps } from "@/components/NumberField/index.js"; +export { default as NumberField } from "@/components/NumberField/index.js"; +export type { PaginationProps } from "@/components/Pagination/index.js"; +export { default as Pagination } from "@/components/Pagination/index.js"; +export type { PinFieldProps } from "@/components/PinField/index.js"; +export { default as PinField } from "@/components/PinField/index.js"; +export type { PopoverInstance, PopoverProps } from "@/components/Popover/index.js"; +export { default as Popover } from "@/components/Popover/index.js"; +export type { ProgressBarProps } from "@/components/ProgressBar/index.js"; +export { default as ProgressBar } from "@/components/ProgressBar/index.js"; +export type { ProgressIndicatorProps } from "@/components/ProgressIndicator/index.js"; +export { default as ProgressIndicator } from "@/components/ProgressIndicator/index.js"; +export type { RadioProps } from "@/components/Radio/index.js"; +export { default as Radio } from "@/components/Radio/index.js"; +export type { RadioGroupProps } from "@/components/RadioGroup/index.js"; +export { default as RadioGroup } from "@/components/RadioGroup/index.js"; +export type { SelectProps, SelectTriggerProps } from "@/components/Select/index.js"; +export { default as Select, SelectTrigger } from "@/components/Select/index.js"; +export type { SkeletonProps } from "@/components/Skeleton/index.js"; +export { default as Skeleton } from "@/components/Skeleton/index.js"; +export type { SliderProps } from "@/components/Slider/index.js"; +export { default as Slider } from "@/components/Slider/index.js"; +export type { SwitchProps } from "@/components/Switch/index.js"; +export { default as Switch } from "@/components/Switch/index.js"; export type { TableBodyProps, TableCellProps, @@ -72,103 +76,107 @@ export type { TableHeadProps, TableProps, TableRowProps, -} from "@/components/Table"; -export { default as Table } from "@/components/Table"; -export type { TabsProps } from "@/components/Tabs"; -export { default as Tabs } from "@/components/Tabs"; -export type { TextAreaProps } from "@/components/TextArea"; -export { default as TextArea } from "@/components/TextArea"; -export type { TextFieldProps } from "@/components/TextField"; -export { default as TextField } from "@/components/TextField"; -export type { ToastProps, ToastProviderProps, ToastShowProps } from "@/components/Toast"; -export { ToastProvider, useToast } from "@/components/Toast"; -export type { ToggleButtonProps } from "@/components/ToggleButton"; -export { default as ToggleButton } from "@/components/ToggleButton"; -export type { ToggleButtonGroupProps } from "@/components/ToggleButtonGroup"; -export { default as ToggleButtonGroup } from "@/components/ToggleButtonGroup"; -export type { TooltipProps } from "@/components/Tooltip"; -export { default as Tooltip } from "@/components/Tooltip"; +} from "@/components/Table/index.js"; +export { default as Table } from "@/components/Table/index.js"; +export type { TabsProps } from "@/components/Tabs/index.js"; +export { default as Tabs } from "@/components/Tabs/index.js"; +export type { TextAreaProps } from "@/components/TextArea/index.js"; +export { default as TextArea } from "@/components/TextArea/index.js"; +export type { TextFieldProps } from "@/components/TextField/index.js"; +export { default as TextField } from "@/components/TextField/index.js"; +export type { ToastProps, ToastProviderProps, ToastShowProps } from "@/components/Toast/index.js"; +export { ToastProvider, useToast } from "@/components/Toast/index.js"; +export type { ToggleButtonProps } from "@/components/ToggleButton/index.js"; +export { default as ToggleButton } from "@/components/ToggleButton/index.js"; +export type { ToggleButtonGroupProps } from "@/components/ToggleButtonGroup/index.js"; +export { default as ToggleButtonGroup } from "@/components/ToggleButtonGroup/index.js"; +export type { TooltipProps } from "@/components/Tooltip/index.js"; +export { default as Tooltip } from "@/components/Tooltip/index.js"; /** * Utility components */ -export type { AccordionProps } from "@/components/Accordion"; -export { default as Accordion } from "@/components/Accordion"; -export type { ActionableProps, ActionableRef } from "@/components/Actionable"; -export { default as Actionable } from "@/components/Actionable"; -export type { ContainerProps } from "@/components/Container"; -export { default as Container } from "@/components/Container"; -export type { ContentToggleProps } from "@/components/ContentToggle"; -export { default as ContentToggle } from "@/components/ContentToggle"; -export type { DismissibleProps } from "@/components/Dismissible"; -export { default as Dismissible } from "@/components/Dismissible"; -export type { ExpandableProps } from "@/components/Expandable"; -export { default as Expandable } from "@/components/Expandable"; -export type { FlyoutInstance, FlyoutProps, FlyoutTriggerAttributes } from "@/components/Flyout"; -export { default as Flyout } from "@/components/Flyout"; -export type { FormControlProps } from "@/components/FormControl"; -export { default as FormControl } from "@/components/FormControl"; -export type { GridItemProps, GridProps } from "@/components/Grid"; -export { default as Grid } from "@/components/Grid"; -export type { HiddenProps } from "@/components/Hidden"; -export { default as Hidden } from "@/components/Hidden"; -export type { HiddenInputProps } from "@/components/HiddenInput"; -export { default as HiddenInput } from "@/components/HiddenInput"; -export type { HiddenVisuallyProps } from "@/components/HiddenVisually"; -export { default as HiddenVisually } from "@/components/HiddenVisually"; -export type { IconProps } from "@/components/Icon"; -export { default as Icon } from "@/components/Icon"; -export type { IconToggleProps } from "@/components/IconToggle"; -export { default as IconToggle } from "@/components/IconToggle"; -export type { ImageProps } from "@/components/Image"; -export { default as Image } from "@/components/Image"; -export type { OverlayProps } from "@/components/Overlay"; -export { default as Overlay } from "@/components/Overlay"; -export type { ReshapedProps } from "@/components/Reshaped"; -export { default as Reshaped } from "@/components/Reshaped"; +export type { AccordionProps } from "@/components/Accordion/index.js"; +export { default as Accordion } from "@/components/Accordion/index.js"; +export type { ActionableProps, ActionableRef } from "@/components/Actionable/index.js"; +export { default as Actionable } from "@/components/Actionable/index.js"; +export type { ContainerProps } from "@/components/Container/index.js"; +export { default as Container } from "@/components/Container/index.js"; +export type { ContentToggleProps } from "@/components/ContentToggle/index.js"; +export { default as ContentToggle } from "@/components/ContentToggle/index.js"; +export type { DismissibleProps } from "@/components/Dismissible/index.js"; +export { default as Dismissible } from "@/components/Dismissible/index.js"; +export type { ExpandableProps } from "@/components/Expandable/index.js"; +export { default as Expandable } from "@/components/Expandable/index.js"; +export type { + FlyoutInstance, + FlyoutProps, + FlyoutTriggerAttributes, +} from "@/components/Flyout/index.js"; +export { default as Flyout } from "@/components/Flyout/index.js"; +export type { FormControlProps } from "@/components/FormControl/index.js"; +export { default as FormControl } from "@/components/FormControl/index.js"; +export type { GridItemProps, GridProps } from "@/components/Grid/index.js"; +export { default as Grid } from "@/components/Grid/index.js"; +export type { HiddenProps } from "@/components/Hidden/index.js"; +export { default as Hidden } from "@/components/Hidden/index.js"; +export type { HiddenInputProps } from "@/components/HiddenInput/index.js"; +export { default as HiddenInput } from "@/components/HiddenInput/index.js"; +export type { HiddenVisuallyProps } from "@/components/HiddenVisually/index.js"; +export { default as HiddenVisually } from "@/components/HiddenVisually/index.js"; +export type { IconProps } from "@/components/Icon/index.js"; +export { default as Icon } from "@/components/Icon/index.js"; +export type { IconToggleProps } from "@/components/IconToggle/index.js"; +export { default as IconToggle } from "@/components/IconToggle/index.js"; +export type { ImageProps } from "@/components/Image/index.js"; +export { default as Image } from "@/components/Image/index.js"; +export type { OverlayProps } from "@/components/Overlay/index.js"; +export { default as Overlay } from "@/components/Overlay/index.js"; +export type { ReshapedProps } from "@/components/Reshaped/index.js"; +export { default as Reshaped } from "@/components/Reshaped/index.js"; export type { ResizableHandleProps, ResizableItemProps, ResizableProps, -} from "@/components/Resizable"; -export { default as Resizable } from "@/components/Resizable"; -export type { ScrollAreaProps } from "@/components/ScrollArea"; -export { default as ScrollArea } from "@/components/ScrollArea"; -export type { TextProps } from "@/components/Text"; -export { default as Text } from "@/components/Text"; -export type { ViewItemProps, ViewProps } from "@/components/View"; -export { default as View } from "@/components/View"; +} from "@/components/Resizable/index.js"; +export { default as Resizable } from "@/components/Resizable/index.js"; +export type { ScrollAreaProps } from "@/components/ScrollArea/index.js"; +export { default as ScrollArea } from "@/components/ScrollArea/index.js"; +export type { TextProps } from "@/components/Text/index.js"; +export { default as Text } from "@/components/Text/index.js"; +export type { ViewItemProps, ViewProps } from "@/components/View/index.js"; +export { default as View } from "@/components/View/index.js"; /** * Hooks */ -export { useFormControl } from "@/components/FormControl"; -export { default as Theme, type ThemeProps, useTheme } from "@/components/Theme"; -export { default as useResponsiveClientValue } from "@/hooks/useResponsiveClientValue"; -export { default as useHandlerRef } from "@/hooks/useHandlerRef"; -export { default as useHotkeys } from "@/hooks/useHotkeys"; -export { default as useIsomorphicLayoutEffect } from "@/hooks/useIsomorphicLayoutEffect"; -export { default as useKeyboardArrowNavigation } from "@/hooks/useKeyboardArrowNavigation"; -export { default as useKeyboardMode } from "@/hooks/useKeyboardMode"; -export { default as useOnClickOutside } from "@/hooks/useOnClickOutside"; -export { default as useRTL } from "@/hooks/useRTL"; -export { default as useScrollLock } from "@/hooks/useScrollLock"; -export { default as useToggle } from "@/hooks/useToggle"; -export { default as useIsDismissible } from "@/hooks/useIsDismissible"; +export { useFormControl } from "@/components/FormControl/index.js"; +export { default as Theme, type ThemeProps, useTheme } from "@/components/Theme/index.js"; +export { default as useResponsiveClientValue } from "@/hooks/useResponsiveClientValue.js"; +export { default as useHandlerRef } from "@/hooks/useHandlerRef.js"; +export { default as useHotkeys } from "@/hooks/useHotkeys.js"; +export { default as useIsomorphicLayoutEffect } from "@/hooks/useIsomorphicLayoutEffect.js"; +export { default as useKeyboardArrowNavigation } from "@/hooks/useKeyboardArrowNavigation.js"; +export { default as useKeyboardMode } from "@/hooks/useKeyboardMode.js"; +export { default as useOnClickOutside } from "@/hooks/useOnClickOutside.js"; +export { default as useRTL } from "@/hooks/useRTL.js"; +export { default as useScrollLock } from "@/hooks/useScrollLock.js"; +export { default as useToggle } from "@/hooks/useToggle.js"; +export { default as useIsDismissible } from "@/hooks/useIsDismissible.js"; /** * Utility functions */ -export { responsivePropDependency } from "@/utilities/props"; +export { responsivePropDependency } from "@/utilities/props.js"; export { classNames, TrapFocus } from "@reshaped/utilities"; /** * Types */ -export type { ColorMode, Responsive } from "@/types/global"; -export type { Attributes } from "@/types/global"; +export type { ColorMode, Responsive } from "@/types/global.js"; +export type { Attributes } from "@/types/global.js"; /** * Dev utilities */ -export { default as Placeholder } from "@/utilities/storybook/Placeholder"; +export { default as Placeholder } from "@/utilities/storybook/Placeholder.js"; diff --git a/packages/reshaped/src/styles/mixin.ts b/packages/reshaped/src/styles/mixin.ts index 15ab9a693..81676b28a 100644 --- a/packages/reshaped/src/styles/mixin.ts +++ b/packages/reshaped/src/styles/mixin.ts @@ -1,8 +1,8 @@ import type { ClassName } from "@reshaped/utilities"; -import align from "@/styles/resolvers/align"; -import aspectRatio from "@/styles/resolvers/aspectRatio"; -import bleed from "@/styles/resolvers/bleed"; +import align from "@/styles/resolvers/align/index.js"; +import aspectRatio from "@/styles/resolvers/aspectRatio/index.js"; +import bleed from "@/styles/resolvers/bleed/index.js"; import border, { borderBlock, borderBottom, @@ -11,8 +11,8 @@ import border, { borderInline, borderStart, borderTop, -} from "@/styles/resolvers/border"; -import height from "@/styles/resolvers/height"; +} from "@/styles/resolvers/border/index.js"; +import height from "@/styles/resolvers/height/index.js"; import inset, { insetBlock, insetBottom, @@ -20,12 +20,12 @@ import inset, { insetInline, insetStart, insetTop, -} from "@/styles/resolvers/inset"; -import justify from "@/styles/resolvers/justify"; -import maxHeight from "@/styles/resolvers/maxHeight"; -import maxWidth from "@/styles/resolvers/maxWidth"; -import minHeight from "@/styles/resolvers/minHeight"; -import minWidth from "@/styles/resolvers/minWidth"; +} from "@/styles/resolvers/inset/index.js"; +import justify from "@/styles/resolvers/justify/index.js"; +import maxHeight from "@/styles/resolvers/maxHeight/index.js"; +import maxWidth from "@/styles/resolvers/maxWidth/index.js"; +import minHeight from "@/styles/resolvers/minHeight/index.js"; +import minWidth from "@/styles/resolvers/minWidth/index.js"; import padding, { paddingBlock, paddingBottom, @@ -33,14 +33,14 @@ import padding, { paddingInline, paddingStart, paddingTop, -} from "@/styles/resolvers/padding"; -import position from "@/styles/resolvers/position"; -import radius from "@/styles/resolvers/radius"; -import shadow from "@/styles/resolvers/shadow"; -import textAlign from "@/styles/resolvers/textAlign"; -import width from "@/styles/resolvers/width"; -import zIndex from "@/styles/resolvers/zIndex"; -import type { Mixin } from "@/styles/types"; +} from "@/styles/resolvers/padding/index.js"; +import position from "@/styles/resolvers/position/index.js"; +import radius from "@/styles/resolvers/radius/index.js"; +import shadow from "@/styles/resolvers/shadow/index.js"; +import textAlign from "@/styles/resolvers/textAlign/index.js"; +import width from "@/styles/resolvers/width/index.js"; +import zIndex from "@/styles/resolvers/zIndex/index.js"; +import type { Mixin } from "@/styles/types.js"; const mixinMap = { align, diff --git a/packages/reshaped/src/styles/resolvers/align/index.test.ts b/packages/reshaped/src/styles/resolvers/align/index.test.ts index d709b79d5..b6711781a 100644 --- a/packages/reshaped/src/styles/resolvers/align/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/align/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import align from "./index"; +import align from "./index.js"; describe("Styles/Align", () => { test("handles value", () => { diff --git a/packages/reshaped/src/styles/resolvers/align/index.ts b/packages/reshaped/src/styles/resolvers/align/index.ts index cc143afc7..1919fc303 100644 --- a/packages/reshaped/src/styles/resolvers/align/index.ts +++ b/packages/reshaped/src/styles/resolvers/align/index.ts @@ -1,5 +1,5 @@ -import { responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import "./align.css"; const align: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/aspectRatio/index.test.ts b/packages/reshaped/src/styles/resolvers/aspectRatio/index.test.ts index 9bf489108..e49cf79e8 100644 --- a/packages/reshaped/src/styles/resolvers/aspectRatio/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/aspectRatio/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import aspectRatio from "./index"; +import aspectRatio from "./index.js"; describe("Styles/AspectRatio", () => { test("handles positive value", () => { diff --git a/packages/reshaped/src/styles/resolvers/aspectRatio/index.ts b/packages/reshaped/src/styles/resolvers/aspectRatio/index.ts index 9c8f50e3a..25aa5df49 100644 --- a/packages/reshaped/src/styles/resolvers/aspectRatio/index.ts +++ b/packages/reshaped/src/styles/resolvers/aspectRatio/index.ts @@ -1,5 +1,5 @@ -import { responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import "./aspectRatio.css"; const aspectRatio: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/bleed/index.test.ts b/packages/reshaped/src/styles/resolvers/bleed/index.test.ts index ef5169c07..cebae1a55 100644 --- a/packages/reshaped/src/styles/resolvers/bleed/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/bleed/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import bleed from "./index"; +import bleed from "./index.js"; describe("Styles/Bleed", () => { test("handles positive value", () => { diff --git a/packages/reshaped/src/styles/resolvers/bleed/index.ts b/packages/reshaped/src/styles/resolvers/bleed/index.ts index 3aa98e38a..caba64e17 100644 --- a/packages/reshaped/src/styles/resolvers/bleed/index.ts +++ b/packages/reshaped/src/styles/resolvers/bleed/index.ts @@ -2,8 +2,8 @@ import { responsiveClassNames, responsivePropDependency, responsiveVariables, -} from "@/utilities/props"; -import * as T from "@/styles/types"; +} from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import s from "./bleed.module.css"; const bleed: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/border/index.ts b/packages/reshaped/src/styles/resolvers/border/index.ts index 727333c97..f338a50fb 100644 --- a/packages/reshaped/src/styles/resolvers/border/index.ts +++ b/packages/reshaped/src/styles/resolvers/border/index.ts @@ -2,8 +2,8 @@ import { responsiveClassNames, responsivePropDependency, responsiveVariables, -} from "@/utilities/props"; -import * as T from "@/styles/types"; +} from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import "./borderWidth.css"; import s from "./border.module.css"; diff --git a/packages/reshaped/src/styles/resolvers/height/index.test.ts b/packages/reshaped/src/styles/resolvers/height/index.test.ts index aed5d6ce5..7c11e7ec5 100644 --- a/packages/reshaped/src/styles/resolvers/height/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/height/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import height from "./index"; +import height from "./index.js"; describe("Styles/Height", () => { test("handles px value", () => { diff --git a/packages/reshaped/src/styles/resolvers/height/index.ts b/packages/reshaped/src/styles/resolvers/height/index.ts index b4992a7da..67d2b96fb 100644 --- a/packages/reshaped/src/styles/resolvers/height/index.ts +++ b/packages/reshaped/src/styles/resolvers/height/index.ts @@ -1,5 +1,5 @@ -import { responsiveClassNames, responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveClassNames, responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import s from "./height.module.css"; const height: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/inset/index.ts b/packages/reshaped/src/styles/resolvers/inset/index.ts index 96632e012..1141d8548 100644 --- a/packages/reshaped/src/styles/resolvers/inset/index.ts +++ b/packages/reshaped/src/styles/resolvers/inset/index.ts @@ -1,5 +1,5 @@ -import { responsiveClassNames, responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveClassNames, responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import s from "./inset.module.css"; import "./inset.css"; diff --git a/packages/reshaped/src/styles/resolvers/justify/index.test.ts b/packages/reshaped/src/styles/resolvers/justify/index.test.ts index e4f8c6b89..27fcb15ad 100644 --- a/packages/reshaped/src/styles/resolvers/justify/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/justify/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import justify from "./index"; +import justify from "./index.js"; describe("Styles/Justify", () => { test("handles value", () => { diff --git a/packages/reshaped/src/styles/resolvers/justify/index.ts b/packages/reshaped/src/styles/resolvers/justify/index.ts index e05e2c3bb..ef992c069 100644 --- a/packages/reshaped/src/styles/resolvers/justify/index.ts +++ b/packages/reshaped/src/styles/resolvers/justify/index.ts @@ -1,5 +1,5 @@ -import { responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import "./justify.css"; const justify: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/margin/index.ts b/packages/reshaped/src/styles/resolvers/margin/index.ts index ba5a2c9b7..174de7178 100644 --- a/packages/reshaped/src/styles/resolvers/margin/index.ts +++ b/packages/reshaped/src/styles/resolvers/margin/index.ts @@ -1,5 +1,5 @@ -import { responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import "./margin.css"; const margin: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/maxHeight/index.test.ts b/packages/reshaped/src/styles/resolvers/maxHeight/index.test.ts index a12cb05fb..4a706aa1b 100644 --- a/packages/reshaped/src/styles/resolvers/maxHeight/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/maxHeight/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import maxHeight from "./index"; +import maxHeight from "./index.js"; describe("Styles/MaxHeight", () => { test("handles px value", () => { diff --git a/packages/reshaped/src/styles/resolvers/maxHeight/index.ts b/packages/reshaped/src/styles/resolvers/maxHeight/index.ts index 02be97f6b..6141ac45f 100644 --- a/packages/reshaped/src/styles/resolvers/maxHeight/index.ts +++ b/packages/reshaped/src/styles/resolvers/maxHeight/index.ts @@ -1,5 +1,5 @@ -import { responsiveClassNames, responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveClassNames, responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import s from "./maxHeight.module.css"; const maxHeight: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/maxWidth/index.test.ts b/packages/reshaped/src/styles/resolvers/maxWidth/index.test.ts index 8560630a0..bf53b37ee 100644 --- a/packages/reshaped/src/styles/resolvers/maxWidth/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/maxWidth/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import maxWidth from "./index"; +import maxWidth from "./index.js"; describe("Styles/MaxWidth", () => { test("handles px value", () => { diff --git a/packages/reshaped/src/styles/resolvers/maxWidth/index.ts b/packages/reshaped/src/styles/resolvers/maxWidth/index.ts index ee97573b1..81f6618b5 100644 --- a/packages/reshaped/src/styles/resolvers/maxWidth/index.ts +++ b/packages/reshaped/src/styles/resolvers/maxWidth/index.ts @@ -1,5 +1,5 @@ -import { responsiveClassNames, responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveClassNames, responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import s from "./maxWidth.module.css"; const maxWidth: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/minHeight/index.test.ts b/packages/reshaped/src/styles/resolvers/minHeight/index.test.ts index 25e6c009e..5e39b1c59 100644 --- a/packages/reshaped/src/styles/resolvers/minHeight/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/minHeight/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import minHeight from "./index"; +import minHeight from "./index.js"; describe("Styles/MinHeight", () => { test("handles px value", () => { diff --git a/packages/reshaped/src/styles/resolvers/minHeight/index.ts b/packages/reshaped/src/styles/resolvers/minHeight/index.ts index 0118cc7c8..bbc73cb80 100644 --- a/packages/reshaped/src/styles/resolvers/minHeight/index.ts +++ b/packages/reshaped/src/styles/resolvers/minHeight/index.ts @@ -1,5 +1,5 @@ -import { responsiveClassNames, responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveClassNames, responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import s from "./minHeight.module.css"; const minHeight: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/minWidth/index.test.ts b/packages/reshaped/src/styles/resolvers/minWidth/index.test.ts index 449ea0b14..b0c17beb7 100644 --- a/packages/reshaped/src/styles/resolvers/minWidth/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/minWidth/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import minWidth from "./index"; +import minWidth from "./index.js"; describe("Styles/MinWidth", () => { test("handles px value", () => { diff --git a/packages/reshaped/src/styles/resolvers/minWidth/index.ts b/packages/reshaped/src/styles/resolvers/minWidth/index.ts index 9cf64c455..8ea281766 100644 --- a/packages/reshaped/src/styles/resolvers/minWidth/index.ts +++ b/packages/reshaped/src/styles/resolvers/minWidth/index.ts @@ -1,5 +1,5 @@ -import { responsiveClassNames, responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveClassNames, responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import s from "./minWidth.module.css"; const minWidth: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/padding/index.ts b/packages/reshaped/src/styles/resolvers/padding/index.ts index 2dfdd044f..683357342 100644 --- a/packages/reshaped/src/styles/resolvers/padding/index.ts +++ b/packages/reshaped/src/styles/resolvers/padding/index.ts @@ -1,5 +1,5 @@ -import { responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import "./padding.css"; const padding: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/position/index.test.ts b/packages/reshaped/src/styles/resolvers/position/index.test.ts index ece1651cb..f789e21ba 100644 --- a/packages/reshaped/src/styles/resolvers/position/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/position/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import position from "./index"; +import position from "./index.js"; describe("Styles/Position", () => { test("handles value", () => { diff --git a/packages/reshaped/src/styles/resolvers/position/index.ts b/packages/reshaped/src/styles/resolvers/position/index.ts index 7fb6779e0..896ac4831 100644 --- a/packages/reshaped/src/styles/resolvers/position/index.ts +++ b/packages/reshaped/src/styles/resolvers/position/index.ts @@ -1,5 +1,5 @@ -import { responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import "./position.css"; const position: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/radius/index.test.ts b/packages/reshaped/src/styles/resolvers/radius/index.test.ts index 7f753d120..2554aa1c6 100644 --- a/packages/reshaped/src/styles/resolvers/radius/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/radius/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import radius from "./index"; +import radius from "./index.js"; describe("Styles/Radius", () => { test("handles value", () => { diff --git a/packages/reshaped/src/styles/resolvers/radius/index.ts b/packages/reshaped/src/styles/resolvers/radius/index.ts index 1cde0e4e4..2fa4699cd 100644 --- a/packages/reshaped/src/styles/resolvers/radius/index.ts +++ b/packages/reshaped/src/styles/resolvers/radius/index.ts @@ -1,5 +1,5 @@ -import { responsiveClassNames } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveClassNames } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import s from "./radius.module.css"; const radius: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/shadow/index.ts b/packages/reshaped/src/styles/resolvers/shadow/index.ts index 6d264e206..39325ae57 100644 --- a/packages/reshaped/src/styles/resolvers/shadow/index.ts +++ b/packages/reshaped/src/styles/resolvers/shadow/index.ts @@ -1,6 +1,6 @@ import type { ClassName } from "@reshaped/utilities"; -import * as T from "@/styles/types"; +import * as T from "@/styles/types.js"; import s from "./shadow.module.css"; const shadow: (value: T.Shadow) => { classNames?: ClassName; variables?: React.CSSProperties } = ( diff --git a/packages/reshaped/src/styles/resolvers/textAlign/index.test.ts b/packages/reshaped/src/styles/resolvers/textAlign/index.test.ts index f7b590db0..77068b7c8 100644 --- a/packages/reshaped/src/styles/resolvers/textAlign/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/textAlign/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import textAlign from "./index"; +import textAlign from "./index.js"; describe("Styles/TextAlign", () => { test("handles value", () => { diff --git a/packages/reshaped/src/styles/resolvers/textAlign/index.ts b/packages/reshaped/src/styles/resolvers/textAlign/index.ts index c344e42a7..9f81ef22f 100644 --- a/packages/reshaped/src/styles/resolvers/textAlign/index.ts +++ b/packages/reshaped/src/styles/resolvers/textAlign/index.ts @@ -1,5 +1,5 @@ -import { responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import "./textAlign.css"; const textAlign: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/width/index.test.ts b/packages/reshaped/src/styles/resolvers/width/index.test.ts index 8d2f68fa2..a01a071a3 100644 --- a/packages/reshaped/src/styles/resolvers/width/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/width/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import width from "./index"; +import width from "./index.js"; describe("Styles/Width", () => { test("handles px value", () => { diff --git a/packages/reshaped/src/styles/resolvers/width/index.ts b/packages/reshaped/src/styles/resolvers/width/index.ts index 0cc975ff9..d90c0fd29 100644 --- a/packages/reshaped/src/styles/resolvers/width/index.ts +++ b/packages/reshaped/src/styles/resolvers/width/index.ts @@ -1,5 +1,5 @@ -import { responsiveClassNames, responsiveVariables } from "@/utilities/props"; -import * as T from "@/styles/types"; +import { responsiveClassNames, responsiveVariables } from "@/utilities/props.js"; +import * as T from "@/styles/types.js"; import s from "./width.module.css"; const width: T.StyleResolver = (value) => { diff --git a/packages/reshaped/src/styles/resolvers/zIndex/index.test.ts b/packages/reshaped/src/styles/resolvers/zIndex/index.test.ts index b2318554e..432c148a8 100644 --- a/packages/reshaped/src/styles/resolvers/zIndex/index.test.ts +++ b/packages/reshaped/src/styles/resolvers/zIndex/index.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import zIndex from "./index"; +import zIndex from "./index.js"; describe("Styles/ZIndex", () => { test("handles numeric value", () => { diff --git a/packages/reshaped/src/styles/resolvers/zIndex/index.ts b/packages/reshaped/src/styles/resolvers/zIndex/index.ts index d31911e79..5a9e1bd3e 100644 --- a/packages/reshaped/src/styles/resolvers/zIndex/index.ts +++ b/packages/reshaped/src/styles/resolvers/zIndex/index.ts @@ -1,7 +1,7 @@ import type React from "react"; import type { ClassName } from "@reshaped/utilities"; -import * as T from "@/styles/types"; +import * as T from "@/styles/types.js"; import "./zIndex.css"; const zIndex: (value?: T.ZIndex) => { diff --git a/packages/reshaped/src/styles/types.ts b/packages/reshaped/src/styles/types.ts index 133e92c46..ec08117e1 100644 --- a/packages/reshaped/src/styles/types.ts +++ b/packages/reshaped/src/styles/types.ts @@ -1,7 +1,7 @@ import React from "react"; import type { ClassName } from "@reshaped/utilities"; -import * as G from "@/types/global"; +import * as G from "@/types/global.js"; /* Values */ type Unit = number; diff --git a/packages/reshaped/src/tests/ShadowDOM.stories.tsx b/packages/reshaped/src/tests/ShadowDOM.stories.tsx index 566f7e7bb..2b3a56361 100644 --- a/packages/reshaped/src/tests/ShadowDOM.stories.tsx +++ b/packages/reshaped/src/tests/ShadowDOM.stories.tsx @@ -1,14 +1,14 @@ import React, { forwardRef, useEffect, useRef, useState } from "react"; import root from "react-shadow"; -import Autocomplete, { type AutocompleteProps } from "@/components/Autocomplete"; -import Button from "@/components/Button"; -import DropdownMenu from "@/components/DropdownMenu"; -import { SelectTrigger } from "@/components/Select"; -import Theme from "@/components/Theme"; -import Tooltip from "@/components/Tooltip"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; +import Autocomplete, { type AutocompleteProps } from "@/components/Autocomplete/index.js"; +import Button from "@/components/Button/index.js"; +import DropdownMenu from "@/components/DropdownMenu/index.js"; +import { SelectTrigger } from "@/components/Select/index.js"; +import Theme from "@/components/Theme/index.js"; +import Tooltip from "@/components/Tooltip/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; export default { title: "Internal/ShadowDOM", diff --git a/packages/reshaped/src/tests/ThemesPlayground.tsx b/packages/reshaped/src/tests/ThemesPlayground.tsx index 4cc97600e..646e72943 100644 --- a/packages/reshaped/src/tests/ThemesPlayground.tsx +++ b/packages/reshaped/src/tests/ThemesPlayground.tsx @@ -1,27 +1,27 @@ import React from "react"; -import Alert from "@/components/Alert"; -import Avatar from "@/components/Avatar"; -import Badge from "@/components/Badge"; -import Button from "@/components/Button"; -import Card from "@/components/Card"; -import Checkbox from "@/components/Checkbox"; -import CheckboxGroup from "@/components/CheckboxGroup"; -import Divider from "@/components/Divider"; -import DropdownMenu from "@/components/DropdownMenu"; -import FormControl from "@/components/FormControl"; -import Grid from "@/components/Grid"; -import Image from "@/components/Image"; -import Link from "@/components/Link"; -import Switch from "@/components/Switch"; -import Table from "@/components/Table"; -import Text from "@/components/Text"; -import TextField from "@/components/TextField"; -import View, { ViewProps } from "@/components/View"; -import useToggle from "@/hooks/useToggle"; -import IconChevronDown from "@/icons/ChevronDown"; -import IconChevronRight from "@/icons/ChevronRight"; -import IconZap from "@/icons/Zap"; +import Alert from "@/components/Alert/index.js"; +import Avatar from "@/components/Avatar/index.js"; +import Badge from "@/components/Badge/index.js"; +import Button from "@/components/Button/index.js"; +import Card from "@/components/Card/index.js"; +import Checkbox from "@/components/Checkbox/index.js"; +import CheckboxGroup from "@/components/CheckboxGroup/index.js"; +import Divider from "@/components/Divider/index.js"; +import DropdownMenu from "@/components/DropdownMenu/index.js"; +import FormControl from "@/components/FormControl/index.js"; +import Grid from "@/components/Grid/index.js"; +import Image from "@/components/Image/index.js"; +import Link from "@/components/Link/index.js"; +import Switch from "@/components/Switch/index.js"; +import Table from "@/components/Table/index.js"; +import Text from "@/components/Text/index.js"; +import TextField from "@/components/TextField/index.js"; +import View, { ViewProps } from "@/components/View/index.js"; +import useToggle from "@/hooks/useToggle.js"; +import IconChevronDown from "@/icons/ChevronDown.js"; +import IconChevronRight from "@/icons/ChevronRight.js"; +import IconZap from "@/icons/Zap.js"; const Color = (props: Pick) => { return ( diff --git a/packages/reshaped/src/tests/themes.stories.tsx b/packages/reshaped/src/tests/themes.stories.tsx index 22d7e5978..0f0034943 100644 --- a/packages/reshaped/src/tests/themes.stories.tsx +++ b/packages/reshaped/src/tests/themes.stories.tsx @@ -1,22 +1,22 @@ import { useLayoutEffect, useState } from "react"; import { baseThemeDefinition, generateThemeColors, getThemeCSS } from "@reshaped/theming"; -import Actionable from "@/components/Actionable"; -import Alert from "@/components/Alert"; -import Avatar from "@/components/Avatar"; -import Badge from "@/components/Badge"; -import Button from "@/components/Button"; -import Card from "@/components/Card"; -import DropdownMenu from "@/components/DropdownMenu"; -import Link from "@/components/Link"; -import Switch from "@/components/Switch"; -import Text from "@/components/Text"; -import TextField from "@/components/TextField"; -import Theme, { useTheme } from "@/components/Theme"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; -import IconZap from "@/icons/Mic"; -import ThemePlayground from "./ThemesPlayground"; +import Actionable from "@/components/Actionable/index.js"; +import Alert from "@/components/Alert/index.js"; +import Avatar from "@/components/Avatar/index.js"; +import Badge from "@/components/Badge/index.js"; +import Button from "@/components/Button/index.js"; +import Card from "@/components/Card/index.js"; +import DropdownMenu from "@/components/DropdownMenu/index.js"; +import Link from "@/components/Link/index.js"; +import Switch from "@/components/Switch/index.js"; +import Text from "@/components/Text/index.js"; +import TextField from "@/components/TextField/index.js"; +import Theme, { useTheme } from "@/components/Theme/index.js"; +import View from "@/components/View/index.js"; +import { Example } from "@/utilities/storybook/index.js"; +import IconZap from "@/icons/Mic.js"; +import ThemePlayground from "./ThemesPlayground.js"; export default { title: "Internal/Themes", diff --git a/packages/reshaped/src/utilities/props.ts b/packages/reshaped/src/utilities/props.ts index ca1d3d7c0..5eea7a435 100644 --- a/packages/reshaped/src/utilities/props.ts +++ b/packages/reshaped/src/utilities/props.ts @@ -1,5 +1,5 @@ -import type * as G from "@/types/global"; -import type { CSSVariable } from "@/types/global"; +import type * as G from "@/types/global.js"; +import type { CSSVariable } from "@/types/global.js"; type Value = string | boolean | number | undefined; type ClassNameResolver = string | ((value: Value) => string); diff --git a/packages/reshaped/src/utilities/storybook/Example.tsx b/packages/reshaped/src/utilities/storybook/Example.tsx index c8f55e32c..98ddf2ba8 100644 --- a/packages/reshaped/src/utilities/storybook/Example.tsx +++ b/packages/reshaped/src/utilities/storybook/Example.tsx @@ -1,7 +1,7 @@ import React from "react"; -import Text from "@/components/Text"; -import View from "@/components/View"; +import Text from "@/components/Text/index.js"; +import View from "@/components/View/index.js"; type Props = { title?: string | string[]; diff --git a/packages/reshaped/src/utilities/storybook/index.ts b/packages/reshaped/src/utilities/storybook/index.ts index 2039dda1b..3dac32bce 100644 --- a/packages/reshaped/src/utilities/storybook/index.ts +++ b/packages/reshaped/src/utilities/storybook/index.ts @@ -1,2 +1,2 @@ -export { default as Example } from "./Example"; -export { default as Placeholder } from "./Placeholder"; +export { default as Example } from "./Example.js"; +export { default as Placeholder } from "./Placeholder.js"; diff --git a/packages/reshaped/src/utilities/tests/props.test.ts b/packages/reshaped/src/utilities/tests/props.test.ts index f958d3118..c569435e0 100644 --- a/packages/reshaped/src/utilities/tests/props.test.ts +++ b/packages/reshaped/src/utilities/tests/props.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "vitest"; -import { responsiveClassNames, responsivePropDependency } from "@/utilities/props"; +import { responsiveClassNames, responsivePropDependency } from "@/utilities/props.js"; describe("Utilities/Props/responsiveClassNames", () => { const s = { "--size-small": "small", "--size-medium--l": "medium" };