reshaped 3.9.0-canary.1 → 3.9.0-canary.3

package/dist/components/Toast/Toast.types.d.ts

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { IconProps } from "../Icon";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Status = "entering" | "entered" | "exited";
 export type TimeoutAlias = "short" | "long";

package/dist/components/Toast/ToastContainer.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
-import { onNextFrame } from "../../utilities/animation.js";
 import { checkKeyboardMode, TrapFocus } from "../../utilities/a11y/index.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import { classNames } from "../../utilities/props.js";
 import Toast from "./Toast.js";
-import ToastContext from "./Toast.context.js";
 import { timeouts } from "./Toast.constants.js";
+import ToastContext from "./Toast.context.js";
 import s from "./Toast.module.css";
 const ToastContainer = (props) => {
     const { toastProps, id, status, inspected, index } = props;

package/dist/components/Toast/ToastProvider.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { positions, defaultContextData } from "./Toast.constants.js";
 import ToastContext from "./Toast.context.js";
 import ToastRegion from "./ToastRegion.js";
 import useToast from "./useToast.js";
-import { positions, defaultContextData } from "./Toast.constants.js";
 let counter = 0;
 const generateId = () => `__rs-toast-${counter++}`;
 const toastReducer = (state, action) => {

package/dist/components/Toast/ToastRegion.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import { focusableSelector } from "../../utilities/a11y/index.js";
-import ToastContainer from "./ToastContainer.js";
+import { classNames } from "../../utilities/props.js";
 import ToastContext from "./Toast.context.js";
 import s from "./Toast.module.css";
+import ToastContainer from "./ToastContainer.js";
 const ToastRegion = (props) => {
     const { position, nested } = props;
     const { queues, options } = React.useContext(ToastContext);

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.types.d.ts

@@ -1,6 +1,6 @@
-import type React from "react";
 import type { ButtonGroupProps } from "../Button";
 import type { ToggleButtonProps } from "../ToggleButton";
+import type React from "react";
 type BaseProps = {
     /** Selection mode for the toggle button group
      * @default "single"

package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import Button from "../Button/index.js";
-import Context from "./ToggleButtonGroup.context.js";
 import useKeyboardArrowNavigation from "../../hooks/useKeyboardArrowNavigation.js";
+import Context from "./ToggleButtonGroup.context.js";
 const ToggleButtonGroupControlled = (props) => {
     const { onChange, value, selectionMode = "single", children, color, selectedColor, ...buttonGroupProps } = props;
     const rootRef = React.useRef(null);

package/dist/components/Tooltip/Tooltip.js

@@ -1,14 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Theme from "../Theme/index.js";
-import Text from "../Text/index.js";
 import Flyout from "../Flyout/index.js";
+import Text from "../Text/index.js";
+import Theme from "../Theme/index.js";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
     const { text, children, position = "bottom", color = "inverted", ...flyoutProps } = props;
     if (!text)
         return children({ ref: null });
-    return (_jsxs(Flyout, { ...flyoutProps, position: position, triggerType: "hover", groupTimeouts: true, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
+    return (_jsxs(Flyout, { ...flyoutProps, position: position, triggerType: "hover", 
+        // Disable group timeouts by default since it's not controlled by the default user events
+        groupTimeouts: flyoutProps.active === undefined ? true : false, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
 };
 Tooltip.displayName = "Tooltip";
 export default Tooltip;

package/dist/components/View/View.js

@@ -1,11 +1,11 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { isValidElement } from "react";
-import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import Divider from "../Divider/index.js";
 import Hidden from "../Hidden/index.js";
-import s from "./View.module.css";
 import { resolveMixin } from "../../styles/mixin.js";
+import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
+import s from "./View.module.css";
 export const ViewItem = (props) => {
     const { columns, grow, shrink, gapBefore, 
     // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity

package/dist/components/View/View.types.d.ts

@@ -1,6 +1,6 @@
 import type React from "react";
-import type * as G from "../../types/global";
 import type * as TStyles from "../../styles/types";
+import type * as G from "../../types/global";
 type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
 export type Direction = "row" | "column" | "row-reverse" | "column-reverse";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {

package/dist/components/_private/Expandable/Expandable.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../../utilities/props.js";
-import { onNextFrame } from "../../../utilities/animation.js";
 import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
+import { onNextFrame } from "../../../utilities/animation.js";
+import { classNames } from "../../../utilities/props.js";
 import s from "./Expandable.module.css";
 const Expandable = (props) => {
     const { children, active, attributes } = props;

package/dist/components/_private/Portal/Portal.js

@@ -3,9 +3,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import ReactDOM from "react-dom";
 import Theme from "../../Theme/index.js";
-import s from "./Portal.module.css";
 import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import useToggle from "../../../hooks/useToggle.js";
+import s from "./Portal.module.css";
 const PortalScopeContext = React.createContext({});
 export const usePortalScope = () => {
     return React.useContext(PortalScopeContext);

package/dist/config/tailwind.js

@@ -1,7 +1,7 @@
+import { bgWithDynamicForeground } from "../themes/_generator/constants.js";
 import reshapedDefinition from "../themes/_generator/definitions/reshaped.js";
-import { camelToKebab } from "../utilities/string.js";
 import mergeDefinitions from "../themes/_generator/utilities/mergeDefinitions.js";
-import { bgWithDynamicForeground } from "../themes/_generator/constants.js";
+import { camelToKebab } from "../utilities/string.js";
 export const getTheme = (theme) => {
     const config = {
         backgroundColor: {},

package/dist/hooks/_private/useDrag.js

@@ -1,11 +1,11 @@
 "use client";
 import React from "react";
+import * as keys from "../../constants/keys.js";
+import useHandlerRef from "../useHandlerRef.js";
+import useHotkeys from "../useHotkeys.js";
+import useToggle from "../useToggle.js";
 import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
 import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
-import useToggle from "../useToggle.js";
-import useHotkeys from "../useHotkeys.js";
-import useHandlerRef from "../useHandlerRef.js";
-import * as keys from "../../constants/keys.js";
 const useDrag = (cb, options) => {
     const { disabled, containerRef: passedContainerRef, orientation = "all" } = options || {};
     const cbRef = useHandlerRef(cb);

package/dist/hooks/_private/useFadeSide.js

@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
-import useRTL from "../useRTL.js";
 import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
+import useRTL from "../useRTL.js";
 import { rafThrottle } from "../../utilities/helpers.js";
 const useFadeSide = (scrollableRef, options = {}) => {
     const { disabled } = options;

package/dist/hooks/useResponsiveClientValue.js

@@ -1,8 +1,8 @@
 "use client";
 import React from "react";
+import defaultBreakpoints from "../constants/breakpoints.js";
 import { SingletonEnvironmentContext } from "./_private/useSingletonEnvironment.js";
 import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
-import defaultBreakpoints from "../constants/breakpoints.js";
 const useResponsiveClientValue = (value) => {
     const { defaultViewport } = React.useContext(SingletonEnvironmentContext);
     const [viewport, setViewport] = React.useState(defaultViewport);

package/dist/styles/mixin.js

@@ -9,11 +9,11 @@ import maxHeight from "./resolvers/maxHeight/index.js";
 import maxWidth from "./resolvers/maxWidth/index.js";
 import minHeight from "./resolvers/minHeight/index.js";
 import minWidth from "./resolvers/minWidth/index.js";
+import padding, { paddingTop, paddingBottom, paddingStart, paddingEnd, paddingInline, paddingBlock, } from "./resolvers/padding/index.js";
 import position from "./resolvers/position/index.js";
 import radius from "./resolvers/radius/index.js";
 import textAlign from "./resolvers/textAlign/index.js";
 import width from "./resolvers/width/index.js";
-import padding, { paddingTop, paddingBottom, paddingStart, paddingEnd, paddingInline, paddingBlock, } from "./resolvers/padding/index.js";
 const mixinMap = {
     align,
     aspectRatio,

package/dist/tests/ThemesPlayground.js

@@ -1,27 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import View from "../components/View/index.js";
-import Text from "../components/Text/index.js";
-import Divider from "../components/Divider/index.js";
-import Card from "../components/Card/index.js";
+import React from "react";
+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 Avatar from "../components/Avatar/index.js";
 import Image from "../components/Image/index.js";
-import IconChevronRight from "../icons/ChevronRight.js";
-import TextField from "../components/TextField/index.js";
-import FormControl from "../components/FormControl/index.js";
 import Link from "../components/Link/index.js";
-import useToggle from "../hooks/useToggle.js";
 import Switch from "../components/Switch/index.js";
-import Badge from "../components/Badge/index.js";
-import Alert from "../components/Alert/index.js";
-import IconZap from "../icons/Zap.js";
-import CheckboxGroup from "../components/CheckboxGroup/index.js";
-import Checkbox from "../components/Checkbox/index.js";
-import React from "react";
 import Table from "../components/Table/index.js";
-import DropdownMenu from "../components/DropdownMenu/index.js";
+import Text from "../components/Text/index.js";
+import TextField from "../components/TextField/index.js";
+import View 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) => {
     return (_jsx(View, { padding: 2, height: 25, gap: 2, direction: "row", borderRadius: "medium", backgroundColor: props.backgroundColor, borderColor: props.borderColor, attributes: {
             style: {

package/dist/themes/_generator/definitions/slate.js

@@ -1,5 +1,5 @@
-import reshapedDefinition from "./reshaped.js";
 import generateColors from "../tokens/color/utilities/generateColors.js";
+import reshapedDefinition from "./reshaped.js";
 const theme = {
     ...reshapedDefinition,
     color: generateColors(),

package/dist/themes/_generator/tokens/color/utilities/generateColors.d.ts

@@ -1,4 +1,4 @@
-import type { PassedThemeDefinition } from "../../types";
 import { type ColorValue, Hue } from "../color.types";
+import type { PassedThemeDefinition } from "../../types";
 declare const generateColors: (args?: Partial<Record<Hue, ColorValue>>) => NonNullable<PassedThemeDefinition["color"]>;
 export default generateColors;

package/dist/themes/_generator/tokens/color/utilities/generateMetaColors.d.ts

@@ -1,4 +1,4 @@
-import type * as T from "../../../types";
 import { PassedThemeDefinition } from "../../types";
+import type * as T from "../../../types";
 declare const generateMetaColors: (definition: PassedThemeDefinition, themeOptions?: T.PublicOptions["themeOptions"]) => PassedThemeDefinition["color"] | undefined;
 export default generateMetaColors;

package/dist/themes/_generator/tokens/color/utilities/generateMetaColors.js

@@ -1,7 +1,7 @@
 import { capitalize } from "../../../../../utilities/string.js";
 import { bgWithDynamicForeground } from "../../../constants.js";
-import { hexToOklch, oklchToRgb, tokenToOklchToken } from "./convert.js";
 import { getOnColor } from "./a11y.js";
+import { hexToOklch, oklchToRgb, tokenToOklchToken } from "./convert.js";
 const whiteColor = hexToOklch("#ffffff");
 const blackColor = hexToOklch("#000000");
 const generateMetaColors = (definition, themeOptions = {}) => {

package/dist/themes/_generator/tokens/font/font.types.d.ts

@@ -1,6 +1,6 @@
-import type * as TUnit from "../unit/unit.types";
-import type * as TFontWeight from "../fontWeight/fontWeight.types";
 import type * as TFontFamily from "../fontFamily/fontFamily.types";
+import type * as TFontWeight from "../fontWeight/fontWeight.types";
+import type * as TUnit from "../unit/unit.types";
 export type Name = "title1" | "title2" | "title3" | "title4" | "title5" | "title6" | "featured1" | "featured2" | "featured3" | "body1" | "body2" | "body3" | "caption1" | "caption2";
 export type Token = {
     fontSize: TUnit.Token;

package/dist/themes/_generator/tokens/transforms.js

@@ -4,9 +4,9 @@ import easing from "./easing/easing.transforms.js";
 import font from "./font/font.transforms.js";
 import fontFamily from "./fontFamily/fontFamily.transforms.js";
 import fontWeight from "./fontWeight/fontWeight.transforms.js";
+import radius from "./radius/radius.transforms.js";
 import shadow from "./shadow/shadow.transforms.js";
 import unit from "./unit/unit.transforms.js";
-import radius from "./radius/radius.transforms.js";
 import viewport from "./viewport/viewport.transforms.js";
 import zIndex from "./zIndex/zIndex.transforms.js";
 export const css = {

package/dist/themes/_generator/tokens/types.d.ts

@@ -1,15 +1,15 @@
+import { PartialDeep, PrivateOptions } from "../types";
+import * as TZIndex from "./zIndex/zIndex.types";
 import type * as TColor from "./color/color.types";
 import type * as TDuration from "./duration/duration.types";
 import type * as TEasing from "./easing/easing.types";
 import type * as TFont from "./font/font.types";
 import type * as TFontFamily from "./fontFamily/fontFamily.types";
 import type * as TFontWeight from "./fontWeight/fontWeight.types";
+import type * as TRadius from "./radius/radius.types";
 import type * as TShadow from "./shadow/shadow.types";
 import type * as TUnit from "./unit/unit.types";
-import type * as TRadius from "./radius/radius.types";
 import type * as TViewport from "./viewport/viewport.types";
-import * as TZIndex from "./zIndex/zIndex.types";
-import { PartialDeep, PrivateOptions } from "../types";
 export type TokenType = "fontFamily" | "fontWeight" | "unit" | "radius" | "viewport" | "font" | "color" | "duration" | "easing" | "shadow" | "zIndex";
 type TokenSet<Name extends string, Token> = Record<Name, Token> & {
     [tokenName: string]: Token;

package/dist/themes/_generator/transform.d.ts

@@ -1,5 +1,5 @@
-import type * as T from "./types";
 import type { PassedThemeDefinition, GeneratedThemeDefinition } from "./tokens/types";
+import type * as T from "./types";
 declare const transform: (name: string, definition: PassedThemeDefinition, options: T.PrivateOptions) => {
     variables: string;
     media: string | undefined;

package/dist/themes/_generator/transform.js

@@ -1,8 +1,8 @@
-import * as transforms from "./tokens/transforms.js";
+import { formatHex8, formatHex } from "culori/fn";
+import generateMetaColors from "./tokens/color/utilities/generateMetaColors.js";
 import { variablesTemplate, mediaTemplate } from "./tokens/css.js";
+import * as transforms from "./tokens/transforms.js";
 import { generateUnits } from "./tokens/unit/utilities/generate.js";
-import generateMetaColors from "./tokens/color/utilities/generateMetaColors.js";
-import { formatHex8, formatHex } from "culori/fn";
 const transform = (name, definition, options) => {
     const { isFragment, themeOptions } = options;
     const generatedUnits = generateUnits(definition);

package/dist/themes/index.d.ts

@@ -1,5 +1,5 @@
-import type * as T from "./_generator/types";
 import type { PassedThemeDefinition } from "./_generator/tokens/types";
+import type * as T from "./_generator/types";
 /**
  * Exported types
  */

package/dist/types/config.d.ts

@@ -1,5 +1,5 @@
-import type { PassedThemeDefinition } from "../themes/_generator/tokens/types";
 import type { HexColor, Hue, OklchColor } from "../themes/_generator/tokens/color/color.types";
+import type { PassedThemeDefinition } from "../themes/_generator/tokens/types";
 export type ReshapedConfig = {
     themes?: Record<string, PassedThemeDefinition>;
     themeFragments?: Record<string, PassedThemeDefinition>;

package/dist/utilities/a11y/TrapFocus.js

@@ -1,10 +1,10 @@
 var _a;
-import Chain from "../Chain.js";
 import * as keys from "../../constants/keys.js";
-import TrapScreenReader from "./TrapScreenReader.js";
-import { getActiveElement, getFocusableElements, focusElement, getFocusData } from "./focus.js";
+import Chain from "../Chain.js";
 import { getShadowRoot } from "../dom/index.js";
+import { getActiveElement, getFocusableElements, focusElement, getFocusData } from "./focus.js";
 import { checkKeyboardMode } from "./keyboardMode.js";
+import TrapScreenReader from "./TrapScreenReader.js";
 class TrapFocus {
     static chain = new Chain();
     #chainId;
@@ -45,7 +45,7 @@ class TrapFocus {
             target: isPrev ? "prev" : "next",
             options: {
                 additionalElement: includeTrigger ? this.#trigger : undefined,
-                circular: mode !== "action-menu" && mode !== "action-bar",
+                circular: true,
             },
         });
         // Release the trap when tab is used in navigation modes that support arrows

package/dist/utilities/scroll/lock.js

@@ -1,5 +1,5 @@
-import { isIOS } from "../platform.js";
 import { findClosestScrollableContainer } from "../dom/index.js";
+import { isIOS } from "../platform.js";
 import lockSafariScroll from "./lockSafari.js";
 import lockStandardScroll from "./lockStandard.js";
 let bodyLockedCount = 0;

package/dist/utilities/scroll/lockStandard.js

@@ -1,5 +1,5 @@
-import { getScrollbarWidth } from "./helpers.js";
 import { StyleCache } from "../css.js";
+import { getScrollbarWidth } from "./helpers.js";
 const styleCache = new StyleCache();
 const lockStandardScroll = (args) => {
     const { container } = args;

package/dist/utilities/storybook/Example.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import View from "../../components/View/index.js";
 import Text from "../../components/Text/index.js";
+import View from "../../components/View/index.js";
 const Example = (props) => {
     return (_jsxs(View, { gap: 3, attributes: props.title ? { style: { marginTop: -17 } } : undefined, children: [props.title && (_jsx(View, { bleed: 4, paddingInline: 4, paddingBlock: 3, backgroundColor: "neutral-faded", borderColor: "neutral-faded", position: "sticky", insetTop: 0, zIndex: 100, children: props.title })), props.children] }));
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reshaped",
   "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-  "version": "3.9.0-canary.1",
+  "version": "3.9.0-canary.3",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",
@@ -97,12 +97,14 @@
     "@types/react-dom": "19.2.2",
     "@vitejs/plugin-react": "5.1.0",
     "@vitest/browser": "4.0.4",
+    "@vitest/browser-playwright": "4.0.4",
     "@vitest/coverage-istanbul": "4.0.4",
     "@vitest/coverage-v8": "4.0.4",
-    "@vitest/browser-playwright": "4.0.4",
     "chromatic": "13.3.2",
     "eslint": "9.38.0",
     "eslint-config-prettier": "10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-react": "7.37.5",