reshaped 4.2.0 → 4.3.0-canary.1

package/dist/utilities/animation.js

@@ -18,3 +18,76 @@ export const checkTransitions = () => {
         return false;
     return !window.matchMedia(reducedMotionMediaQuery).matches;
 };
+/**
+ * Angular frequency of the critically damped spring used for the gesture release animations, in 1/s.
+ * Higher values settle faster, 20 settles from a resting position in ~300ms
+ */
+const SPRING_OMEGA = 20;
+const SPRING_SAMPLE_RATE = 120;
+const SPRING_MAX_DURATION = 600;
+const SPRING_MIN_DURATION = 50;
+const SPRING_REST_DISTANCE = 0.5;
+const SPRING_REST_VELOCITY = 20;
+/** Velocity is capped so a fast flick doesn't resolve into an unreasonably long easing curve */
+const SPRING_MAX_VELOCITY = 3;
+/** Duration range used when the browser doesn't support linear() easing */
+const FALLBACK_MIN_DURATION = 100;
+const FALLBACK_MAX_DURATION = 300;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+let supportsLinearEasing = null;
+const checkLinearEasing = () => {
+    if (supportsLinearEasing !== null)
+        return supportsLinearEasing;
+    supportsLinearEasing =
+        typeof CSS !== "undefined" &&
+            typeof CSS.supports === "function" &&
+            CSS.supports("transition-timing-function", "linear(0, 1)");
+    return supportsLinearEasing;
+};
+/**
+ * Resolves a critically damped spring into a css transition duration and a linear() easing,
+ * so the release animation continues from the current velocity of the gesture instead of restarting from zero.
+ * Browsers without linear() easing support fall back to a decelerating transition scaled by the velocity.
+ *
+ * @param displacement - current position relative to the target position, in px
+ * @param velocity - current velocity in px/ms, measured on the same axis as the displacement
+ * and positive when moving away from the target position
+ * @returns transition duration in ms and its timing function
+ */
+export const resolveSpringTransition = (args) => {
+    const { displacement } = args;
+    const velocity = clamp(args.velocity, -SPRING_MAX_VELOCITY, SPRING_MAX_VELOCITY);
+    if (!displacement)
+        return { duration: 0, easing: "linear" };
+    if (!checkLinearEasing()) {
+        const duration = Math.abs(displacement) / Math.max(Math.abs(velocity), 0.001);
+        return {
+            duration: clamp(duration, FALLBACK_MIN_DURATION, FALLBACK_MAX_DURATION),
+            easing: "var(--rs-easing-decelerate)",
+        };
+    }
+    const step = 1000 / SPRING_SAMPLE_RATE;
+    // Position over time: (a + b * t) * e^(-omega * t), with the time in seconds
+    const a = displacement;
+    const b = velocity * 1000 + SPRING_OMEGA * displacement;
+    const values = [];
+    let duration = 0;
+    while (true) {
+        const time = duration / 1000;
+        const decay = Math.exp(-SPRING_OMEGA * time);
+        const position = (a + b * time) * decay;
+        const speed = (b - SPRING_OMEGA * (a + b * time)) * decay;
+        const settled = Math.abs(position) < SPRING_REST_DISTANCE && Math.abs(speed) < SPRING_REST_VELOCITY;
+        values.push(1 - position / displacement);
+        if (duration >= SPRING_MAX_DURATION)
+            break;
+        if (settled && duration >= SPRING_MIN_DURATION)
+            break;
+        duration += step;
+    }
+    values[values.length - 1] = 1;
+    return {
+        duration,
+        easing: `linear(${values.map((value) => value.toFixed(4)).join(", ")})`,
+    };
+};

package/dist/utilities/props.d.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);
 export declare const responsiveClassNames: <V extends G.Responsive<Value>>(s: Record<string, string>, className: ClassNameResolver, value: V, options?: {

package/dist/utilities/storybook/Example.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Text from "../../components/Text";
-import View from "../../components/View";
+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/dist/utilities/storybook/index.d.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";

package/dist/utilities/storybook/index.js

@@ -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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reshaped",
-  "version": "4.2.0",
+  "version": "4.3.0-canary.1",
   "description": "Professionally crafted design system in React and Figma for building products of any scale and complexity",
   "keywords": [
     "accessibility",
@@ -41,6 +41,7 @@
   "sideEffects": [
     "*.css"
   ],
+  "type": "module",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -63,9 +64,9 @@
       "default": "./dist/config/postcss.cjs"
     },
     "./bundle": {
-      "types": "./dist/bundle.d.ts",
-      "import": "./dist/bundle.js",
-      "default": "./dist/bundle.js"
+      "types": "./dist/bundle.d.cts",
+      "import": "./dist/bundle.cjs",
+      "default": "./dist/bundle.cjs"
     },
     "./themes/slate/*": "./dist/themes/slate/*",
     "./themes/figma/*": "./dist/themes/figma/*",
@@ -80,8 +81,8 @@
     "cssnano": "8.0.2",
     "csstype": "3.2.3",
     "postcss-custom-media": "12.0.1",
-    "@reshaped/theming": "4.2.0",
-    "@reshaped/utilities": "4.2.0"
+    "@reshaped/theming": "4.3.0-canary.1",
+    "@reshaped/utilities": "4.3.0-canary.1"
   },
   "peerDependencies": {
     "postcss": "^8",
@@ -100,7 +101,7 @@
     "build:esm": "tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json",
     "build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build",
     "build:stories": "tsc -p tsconfig.stories.json && tsc-alias -p tsconfig.stories.json",
-    "build:bundle": "vite build && shx cp dist/index.d.ts dist/bundle.d.ts",
+    "build:bundle": "vite build && shx cp dist/index.d.ts dist/bundle.d.cts",
     "build:size": "pnpm clean && pnpm build:esm && pnpm build:bundle",
     "test:browser": "vitest run --project=storybook",
     "test:unit": "vitest run --project=unit",

package/dist/bundle.d.ts

@@ -1,158 +0,0 @@
-/**
- * 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 { TableBodyProps, TableCellProps, TableHeadingProps, 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";
-/**
- * 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 { 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";
-/**
- * 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";
-/**
- * Utility functions
- */
-export { responsivePropDependency } from "./utilities/props";
-export { classNames, TrapFocus } from "@reshaped/utilities";
-/**
- * Types
- */
-export type { ColorMode, Responsive } from "./types/global";
-export type { Attributes } from "./types/global";
-/**
- * Dev utilities
- */
-export { default as Placeholder } from "./utilities/storybook/Placeholder";