feat(classNames): moved to utilities

.changeset/brown-mails-clap.md

@@ -0,0 +1,6 @@
+---
+"reshaped": patch
+"@reshaped/utilities": patch
+---
+
+classNames: moved to @reshaped/utilities and re-exported from reshaped

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

@@ -4,7 +4,7 @@ import React from "react";
 
 import useElementId from "hooks/useElementId";
 import useHandlerRef from "hooks/useHandlerRef";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import AccordionContext from "./Accordion.context";
 import * as T from "./Accordion.types";

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

@@ -6,7 +6,7 @@ import Actionable from "components/Actionable";
 import Icon from "components/Icon";
 import View from "components/View";
 import IconChevronDown from "icons/ChevronDown";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import AccordionContext from "./Accordion.context";
 import s from "./Accordion.module.css";

packages/reshaped/src/components/ActionBar/ActionBar.tsx

@@ -1,5 +1,7 @@
+import { classNames } from "@reshaped/utilities";
+
 import View from "components/View";
-import { classNames, responsiveVariables } from "utilities/props";
+import { responsiveVariables } from "utilities/props";
 
 import s from "./ActionBar.module.css";
 

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

@@ -1,8 +1,10 @@
+import { classNames } from "@reshaped/utilities";
+
 import Icon from "components/Icon";
 import Image, { type ImageProps } from "components/Image";
 import View from "components/View";
 import { resolveMixin } from "styles/mixin";
-import { classNames, responsivePropDependency } from "utilities/props";
+import { responsivePropDependency } from "utilities/props";
 
 import s from "./Avatar.module.css";
 

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

@@ -4,7 +4,7 @@ import Actionable, { type ActionableProps, type ActionableRef } from "components
 import Icon from "components/Icon";
 import Text from "components/Text";
 import IconClose from "icons/Close";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Badge.module.css";
 

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

@@ -1,4 +1,4 @@
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Badge.module.css";
 

packages/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -8,7 +8,7 @@ import Text from "components/Text";
 import View from "components/View";
 import IconChevronRight from "icons/ChevronRight";
 import IconDotsHorizontal from "icons/DotsHorizontal";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import * as T from "./Breadcrumbs.types";
 

packages/reshaped/src/components/Button/Button.tsx

@@ -1,9 +1,10 @@
+import { classNames } from "@reshaped/utilities";
 import { forwardRef } from "react";
 
 import Actionable, { type ActionableRef } from "components/Actionable";
 import Icon from "components/Icon";
 import Loader from "components/Loader";
-import { classNames, responsiveClassNames, responsivePropDependency } from "utilities/props";
+import { responsiveClassNames, responsivePropDependency } from "utilities/props";
 
 import s from "./Button.module.css";
 

packages/reshaped/src/components/Button/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Button.module.css";
 

packages/reshaped/src/components/Calendar/CalendarDate.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Actionable from "components/Actionable";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Calendar.module.css";
 import { getLocalISODate } from "./Calendar.utils";

packages/reshaped/src/components/Card/Card.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 
 import Actionable from "components/Actionable";
 import { resolveMixin } from "styles/mixin";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Card.module.css";
 

packages/reshaped/src/components/Carousel/Carousel.tsx

@@ -1,12 +1,13 @@
 "use client";
 
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 
 import View from "components/View";
 import useIsomorphicLayoutEffect from "hooks/useIsomorphicLayoutEffect";
 import useRTL from "hooks/useRTL";
 import { rafThrottle } from "utilities/helpers";
-import { classNames, responsiveVariables, responsiveClassNames } from "utilities/props";
+import { responsiveVariables, responsiveClassNames } from "utilities/props";
 
 import s from "./Carousel.module.css";
 import * as T from "./Carousel.types";

packages/reshaped/src/components/Carousel/CarouselControl.tsx

@@ -6,7 +6,7 @@ import Button from "components/Button";
 import useIsomorphicLayoutEffect from "hooks/useIsomorphicLayoutEffect";
 import IconChevronLeft from "icons/ChevronLeft";
 import IconChevronRight from "icons/ChevronRight";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Carousel.module.css";
 import * as T from "./Carousel.types";

packages/reshaped/src/components/Checkbox/Checkbox.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 
 import { useCheckboxGroup } from "components/CheckboxGroup";
@@ -9,7 +10,7 @@ import Icon from "components/Icon";
 import Text from "components/Text";
 import useIsomorphicLayoutEffect from "hooks/useIsomorphicLayoutEffect";
 import IconCheckmark from "icons/Checkmark";
-import { classNames, responsiveClassNames, responsivePropDependency } from "utilities/props";
+import { responsiveClassNames, responsivePropDependency } from "utilities/props";
 
 import s from "./Checkbox.module.css";
 

packages/reshaped/src/components/Container/Container.tsx

@@ -1,5 +1,5 @@
 import View from "components/View";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Container.module.css";
 

packages/reshaped/src/components/Dismissible/Dismissible.tsx

@@ -2,7 +2,7 @@
 
 import Button from "components/Button";
 import IconClose from "icons/Close";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Dismissible.module.css";
 

packages/reshaped/src/components/Divider/Divider.tsx

@@ -1,5 +1,7 @@
+import { classNames } from "@reshaped/utilities";
+
 import Text from "components/Text";
-import { classNames, responsiveClassNames } from "utilities/props";
+import { responsiveClassNames } from "utilities/props";
 
 import s from "./Divider.module.css";
 

packages/reshaped/src/components/DropdownMenu/DropdownMenu.tsx

@@ -10,7 +10,7 @@ import * as keys from "constants/keys";
 import useHotkeys from "hooks/useHotkeys";
 import useRTL from "hooks/useRTL";
 import IconChevronRight from "icons/ChevronRight";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./DropdownMenu.module.css";
 

packages/reshaped/src/components/FileUpload/FileUpload.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import HiddenVisually from "components/HiddenVisually";
 import View from "components/View";
 import useToggle from "hooks/useToggle";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./FileUpload.module.css";
 

packages/reshaped/src/components/Flyout/FlyoutContent.tsx

@@ -4,7 +4,7 @@ import React from "react";
 
 import Portal from "components/_private/Portal";
 import useIsomorphicLayoutEffect from "hooks/useIsomorphicLayoutEffect";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import { useFlyoutContext, ContentProvider } from "./Flyout.context";
 import s from "./Flyout.module.css";

packages/reshaped/src/components/Grid/Grid.tsx

@@ -1,5 +1,7 @@
+import { classNames } from "@reshaped/utilities";
+
 import { resolveMixin } from "styles/mixin";
-import { classNames, responsiveVariables, responsivePropDependency } from "utilities/props";
+import { responsiveVariables, responsivePropDependency } from "utilities/props";
 
 import s from "./Grid.module.css";
 

packages/reshaped/src/components/Hidden/Hidden.tsx

@@ -1,4 +1,6 @@
-import { classNames, responsiveClassNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
+
+import { responsiveClassNames } from "utilities/props";
 
 import s from "./Hidden.module.css";
 

packages/reshaped/src/components/HiddenInput/HiddenInput.tsx

@@ -1,7 +1,7 @@
 import { useCheckboxGroup } from "components/CheckboxGroup";
 import { useFormControl } from "components/FormControl";
 import { useRadioGroup } from "components/RadioGroup";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./HiddenInput.module.css";
 

packages/reshaped/src/components/Hotkey/Hotkey.tsx

@@ -1,5 +1,5 @@
 import Text from "components/Text";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Hotkey.module.css";
 

packages/reshaped/src/components/Icon/Icon.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { resolveMixin } from "styles/mixin";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Icon.module.css";
 

packages/reshaped/src/components/Image/Image.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 
 import { resolveMixin } from "styles/mixin";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Image.module.css";
 import * as T from "./Image.types";

packages/reshaped/src/components/Link/Link.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from "react";
 
 import Actionable, { type ActionableRef } from "components/Actionable";
 import Icon from "components/Icon";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Link.module.css";
 

packages/reshaped/src/components/Loader/Loader.tsx

@@ -1,4 +1,6 @@
-import { classNames, responsiveClassNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
+
+import { responsiveClassNames } from "utilities/props";
 
 import s from "./Loader.module.css";
 

packages/reshaped/src/components/MenuItem/MenuItem.tsx

@@ -1,9 +1,10 @@
+import { classNames } from "@reshaped/utilities";
 import { forwardRef } from "react";
 
 import Actionable, { type ActionableRef } from "components/Actionable";
 import Icon from "components/Icon";
 import View from "components/View";
-import { classNames, responsiveClassNames, responsivePropDependency } from "utilities/props";
+import { responsiveClassNames, responsivePropDependency } from "utilities/props";
 
 import s from "./MenuItem.module.css";
 

packages/reshaped/src/components/Modal/Modal.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 
 import Overlay from "components/Overlay";
@@ -8,7 +9,7 @@ import useElementId from "hooks/useElementId";
 import useHandlerRef from "hooks/useHandlerRef";
 import useResponsiveClientValue from "hooks/useResponsiveClientValue";
 import { resolveMixin } from "styles/mixin";
-import { classNames, responsiveVariables, responsiveClassNames } from "utilities/props";
+import { responsiveVariables, responsiveClassNames } from "utilities/props";
 import { enableScroll, disableScroll } from "utilities/scroll";
 
 import s from "./Modal.module.css";

packages/reshaped/src/components/Overlay/Overlay.tsx

@@ -12,7 +12,7 @@ import useIsomorphicLayoutEffect from "hooks/useIsomorphicLayoutEffect";
 import useScrollLock from "hooks/useScrollLock";
 import useToggle from "hooks/useToggle";
 import { onNextFrame } from "utilities/animation";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Overlay.module.css";
 

packages/reshaped/src/components/Popover/Popover.tsx

@@ -1,7 +1,7 @@
 import Dismissible, { type DismissibleProps } from "components/Dismissible";
 import Flyout, { useFlyoutContext, type FlyoutProps } from "components/Flyout";
 import { resolveMixin } from "styles/mixin";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Popover.module.css";
 

packages/reshaped/src/components/Progress/Progress.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Progress.module.css";
 

packages/reshaped/src/components/ProgressIndicator/ProgressIndicator.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./ProgressIndicator.module.css";
 

packages/reshaped/src/components/Radio/Radio.tsx

@@ -1,12 +1,13 @@
 "use client";
 
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 
 import { useFormControl } from "components/FormControl";
 import HiddenInput from "components/HiddenInput";
 import { useRadioGroup } from "components/RadioGroup";
 import Text from "components/Text";
-import { classNames, responsiveClassNames, responsivePropDependency } from "utilities/props";
+import { responsiveClassNames, responsivePropDependency } from "utilities/props";
 
 import s from "./Radio.module.css";
 

packages/reshaped/src/components/Reshaped/Reshaped.tsx

@@ -11,7 +11,7 @@ import {
 } from "hooks/_private/useSingletonEnvironment";
 import { SingletonHotkeysProvider } from "hooks/_private/useSingletonHotkeys";
 import { SingletonKeyboardModeProvider } from "hooks/_private/useSingletonKeyboardMode";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Reshaped.module.css";
 

packages/reshaped/src/components/Resizable/Resizable.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 
 import View from "components/View";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Resizable.module.css";
 import { ResizableHandleContext } from "./ResizableHandle";

packages/reshaped/src/components/Resizable/ResizableHandle.tsx

@@ -4,7 +4,7 @@ import React from "react";
 
 import View from "components/View";
 import useDrag from "hooks/_private/useDrag";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Resizable.module.css";
 

packages/reshaped/src/components/Scrim/Scrim.tsx

@@ -1,5 +1,5 @@
 import View from "components/View";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Scrim.module.css";
 

packages/reshaped/src/components/ScrollArea/ScrollArea.tsx

@@ -5,7 +5,7 @@ import React, { forwardRef } from "react";
 import useHandlerRef from "hooks/useHandlerRef";
 import useIsomorphicLayoutEffect from "hooks/useIsomorphicLayoutEffect";
 import { resolveMixin } from "styles/mixin";
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 import { disableScroll, enableScroll } from "utilities/scroll";
 
 import s from "./ScrollArea.module.css";

packages/reshaped/src/components/Select/SelectNative.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 
-import { classNames } from "utilities/props";
+import { classNames } from "@reshaped/utilities";
 
 import s from "./Select.module.css";
 import SelectEndContent from "./SelectEndContent";