@react-spectrum/s2 3.0.0-nightly-73414999f-240916 → 3.0.0-nightly-9e79420c1-240918

package/dist/ProgressCircle.mjs

@@ -1,7 +1,6 @@
 import "./ProgressCircle.css";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "./useSpectrumContextProps.mjs";
 import {jsx as $8ijGz$jsx, jsxs as $8ijGz$jsxs} from "react/jsx-runtime";
-import {clamp as $8ijGz$clamp} from "@react-aria/utils";
 import {ProgressBar as $8ijGz$ProgressBar} from "react-aria-components";
 import {createContext as $8ijGz$createContext, forwardRef as $8ijGz$forwardRef} from "react";
 import {useDOMRef as $8ijGz$useDOMRef} from "@react-spectrum/utils";
@@ -21,48 +20,17 @@ import {useDOMRef as $8ijGz$useDOMRef} from "@react-spectrum/utils";
 
 
 
-
 const $41ddd91dbbf0c389$export$afffa1e5edf12209 = /*#__PURE__*/ (0, $8ijGz$createContext)(null);
-const $41ddd91dbbf0c389$var$fillMask1Frames = "-_5slx9u";
-const $41ddd91dbbf0c389$var$fillMask2Frames = "-_36n5pc";
-const $41ddd91dbbf0c389$var$fillsRotate = "-nqh121";
-const $41ddd91dbbf0c389$var$circleDims = {
-    height: {
-        default: 32,
-        size: {
-            S: 16,
-            L: 64
-        }
-    },
-    width: {
-        default: 32,
-        size: {
-            S: 16,
-            L: 64
-        }
-    },
-    aspectRatio: 'square'
-};
 // Double check the types passed to each style, may not need all for each
 const $41ddd91dbbf0c389$var$wrapper = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r|k|o|p)[^\s]+/g) || [];
     rules += matches.join('');
     let $l = false;
-    let $U = false;
+    let $k = false;
     for (let p of matches){
         if (/^\s*l/.test(p)) $l = true;
-        if (/^\s*U/.test(p)) $U = true;
-    }
-    if (props.size === "L") {
-        rules += ' kbC';
-        rules += ' kB';
-    } else if (props.size === "S") {
-        rules += ' kbk';
-        rules += ' kj';
-    } else {
-        rules += ' kbr';
-        rules += ' kq';
+        if (/^\s*k/.test(p)) $k = true;
     }
     if (!$l) {
         if (props.size === "L") {
@@ -76,199 +44,52 @@ const $41ddd91dbbf0c389$var$wrapper = function anonymous(props, overrides) {
             rules += ' lq';
         }
     }
+    if (!$k) {
+        if (props.size === "L") {
+            rules += ' kbC';
+            rules += ' kB';
+        } else if (props.size === "S") {
+            rules += ' kbk';
+            rules += ' kj';
+        } else {
+            rules += ' kbr';
+            rules += ' kq';
+        }
+    }
     rules += ' _bb';
     rules += ' _Zb';
-    if (!$U) rules += ' Uc';
     return rules;
 };
-const $41ddd91dbbf0c389$var$trackStyles = {
-    ...$41ddd91dbbf0c389$var$circleDims,
-    boxSizing: 'border-box',
-    borderStyle: 'solid',
-    borderWidth: {
-        default: '[3px]',
-        size: {
-            S: 2,
-            L: 4
-        }
-    },
-    borderRadius: 'full'
-};
 const $41ddd91dbbf0c389$var$track = function anonymous(props) {
     let rules = " .";
-    if (props.size === "L") {
-        rules += ' kbC';
-        rules += ' kB';
-    } else if (props.size === "S") {
-        rules += ' kbk';
-        rules += ' kj';
-    } else {
-        rules += ' kbr';
-        rules += ' kq';
-    }
-    if (props.size === "L") {
-        rules += ' lbC';
-        rules += ' lB';
-    } else if (props.size === "S") {
-        rules += ' lbk';
-        rules += ' lj';
-    } else {
-        rules += ' lbr';
-        rules += ' lq';
-    }
-    rules += ' _bb';
-    rules += ' __na';
-    rules += ' wa';
-    if (props.size === "L") rules += ' ud';
-    else if (props.size === "S") rules += ' uc';
-    else rules += ' u-3760g0';
-    if (props.size === "L") rules += ' vd';
-    else if (props.size === "S") rules += ' vc';
-    else rules += ' v-3760g0';
-    if (props.size === "L") rules += ' sd';
-    else if (props.size === "S") rules += ' sc';
-    else rules += ' s-3760g0';
-    if (props.size === "L") rules += ' td';
-    else if (props.size === "S") rules += ' tc';
-    else rules += ' t-3760g0';
-    rules += ' _vf';
-    rules += ' _wf';
-    rules += ' _xf';
-    rules += ' _yf';
-    rules += ' ca_____u';
-    if (props.staticColor === "black") {
-        if (props.isPressed) rules += ' c_____n';
-        else if (props.isFocusVisible) rules += ' c_____n';
-        else if (props.isHovered) rules += ' c_____n';
-        else rules += ' c_____m';
-    } else if (props.staticColor === "white") {
-        if (props.isPressed) rules += ' c_____a';
-        else if (props.isFocusVisible) rules += ' c_____a';
-        else if (props.isHovered) rules += ' c_____a';
-        else rules += ' c____9';
-    } else {
-        if (props.isPressed) rules += ' cj';
-        else if (props.isFocusVisible) rules += ' cj';
-        else if (props.isHovered) rules += ' cj';
-        else rules += ' ci';
-    }
+    rules += ' fa_____w';
+    if (props.staticColor === "black") rules += ' f_____o';
+    else if (props.staticColor === "white") rules += ' f_____b';
+    else rules += ' fk';
     return rules;
 };
 const $41ddd91dbbf0c389$var$fill = function anonymous(props) {
     let rules = " .";
-    if (props.size === "L") {
-        rules += ' kbC';
-        rules += ' kB';
-    } else if (props.size === "S") {
-        rules += ' kbk';
-        rules += ' kj';
-    } else {
-        rules += ' kbr';
-        rules += ' kq';
-    }
-    if (props.size === "L") {
-        rules += ' lbC';
-        rules += ' lB';
-    } else if (props.size === "S") {
-        rules += ' lbk';
-        rules += ' lj';
-    } else {
-        rules += ' lbr';
-        rules += ' lq';
-    }
-    rules += ' _bb';
-    rules += ' __na';
-    rules += ' wa';
-    if (props.size === "L") rules += ' ud';
-    else if (props.size === "S") rules += ' uc';
-    else rules += ' u-3760g0';
-    if (props.size === "L") rules += ' vd';
-    else if (props.size === "S") rules += ' vc';
-    else rules += ' v-3760g0';
-    if (props.size === "L") rules += ' sd';
-    else if (props.size === "S") rules += ' sc';
-    else rules += ' s-3760g0';
-    if (props.size === "L") rules += ' td';
-    else if (props.size === "S") rules += ' tc';
-    else rules += ' t-3760g0';
-    rules += ' _vf';
-    rules += ' _wf';
-    rules += ' _xf';
-    rules += ' _yf';
-    rules += ' ca_____z';
-    if (props.staticColor === "black") {
-        if (props.isPressed) rules += ' c_____t';
-        else if (props.isFocusVisible) rules += ' c_____t';
-        else if (props.isHovered) rules += ' c_____t';
-        else rules += ' c_____s';
-    } else if (props.staticColor === "white") {
-        if (props.isPressed) rules += ' c_____g';
-        else if (props.isFocusVisible) rules += ' c_____g';
-        else if (props.isHovered) rules += ' c_____g';
-        else rules += ' c_____f';
-    } else {
-        if (props.isPressed) rules += ' cz';
-        else if (props.isFocusVisible) rules += ' cz';
-        else if (props.isHovered) rules += ' cz';
-        else rules += ' cy';
-    }
+    rules += ' fa_____B';
+    if (props.staticColor === "black") rules += ' f_____u';
+    else if (props.staticColor === "white") rules += ' f_____h';
+    else rules += ' fA';
+    rules += ' R-375ty3';
+    rules += ' __Ga';
     return rules;
 };
-const $41ddd91dbbf0c389$var$fillsWrapperStyles = {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    size: 'full'
-};
-const $41ddd91dbbf0c389$var$fillsWrapper = " . Ua Xa Ya l4 k4";
-const $41ddd91dbbf0c389$var$fillsWrapperIndeterminate = " . Ua Xa Ya l4 k4 __Pd T-1ecy9hq _S-157qd4d _T-yjb9nq _Y-1fqa2yh _X-twzmrf __Ga";
-const $41ddd91dbbf0c389$var$commonFillMask = {
-    position: 'absolute',
-    width: '[50%]',
-    height: 'full',
-    transformOrigin: '[100% center]',
-    overflow: 'hidden'
-};
-const $41ddd91dbbf0c389$var$fillMask1 = " . Ua l-3760fj k4 __G-1gvo10c __vb __wb T-115o53i";
-const $41ddd91dbbf0c389$var$fillMask2 = " . Ua l-3760fj k4 __G-1gvo10c __vb __wb T-1gm38v9";
-const $41ddd91dbbf0c389$var$commonFillSubMask = {
-    width: 'full',
-    height: 'full',
-    transformOrigin: '[100% center]',
-    transform: 'rotate(-180deg)',
-    overflow: 'hidden'
-};
-const $41ddd91dbbf0c389$var$commonFillSubMaskIndeterminate = {
-    transform: 'translateZ(0)',
-    willChange: 'transform',
-    animationDuration: 1000,
-    animationTimingFunction: 'linear',
-    animationIterationCount: 'infinite'
-};
-const $41ddd91dbbf0c389$var$fillSubMask = " . l4 k4 __G-1gvo10c T-11akxcr __vb __wb";
-const $41ddd91dbbf0c389$var$fillSubMask1Indeterminate = " . l4 k4 __G-1gvo10c T-1ecy9hq __vb __wb _S-6p1wh7 _T-yjb9nq _Yb __Pd _X-twzmrf";
-const $41ddd91dbbf0c389$var$fillSubMask2Indeterminate = " . l4 k4 __G-1gvo10c T-1ecy9hq __vb __wb _S-47ds34 _T-yjb9nq _Yb __Pd _X-twzmrf";
+const $41ddd91dbbf0c389$var$rotationAnimation = "-u41dq3";
+// stroke-dashoffset represents `100 - percentage`. See below for how this works.
+const $41ddd91dbbf0c389$var$dashoffsetAnimation = "-_1i5ccgk";
 function $41ddd91dbbf0c389$var$ProgressCircle(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $41ddd91dbbf0c389$export$afffa1e5edf12209);
-    let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size = 'M', staticColor: staticColor, isIndeterminate: isIndeterminate = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
+    let { size: size = 'M', staticColor: staticColor, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '' } = props;
     let domRef = (0, $8ijGz$useDOMRef)(ref);
-    value = (0, $8ijGz$clamp)(value, minValue, maxValue);
-    let subMask1Style = {};
-    let subMask2Style = {};
-    if (!isIndeterminate) {
-        let percentage = (value - minValue) / (maxValue - minValue) * 100;
-        let angle;
-        if (percentage > 0 && percentage <= 50) {
-            angle = -180 + percentage / 50 * 180;
-            subMask1Style.transform = `rotate(${angle}deg)`;
-            subMask2Style.transform = 'rotate(-180deg)';
-        } else if (percentage > 50) {
-            angle = -180 + (percentage - 50) / 50 * 180;
-            subMask1Style.transform = 'rotate(0deg)';
-            subMask2Style.transform = `rotate(${angle}deg)`;
-        }
-    }
-    if (!ariaLabel && !ariaLabelledby) console.warn('ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility');
+    let strokeWidth = 3;
+    if (size === 'S') strokeWidth = 2;
+    else if (size === 'L') strokeWidth = 4;
+    // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.
+    let radius = `calc(50% - ${strokeWidth / 2}px)`;
     return /*#__PURE__*/ (0, $8ijGz$jsx)((0, $8ijGz$ProgressBar), {
         ...props,
         ref: domRef,
@@ -277,48 +98,42 @@ function $41ddd91dbbf0c389$var$ProgressCircle(props, ref) {
                 ...renderProps,
                 size: size
             }, props.styles),
-        children: /*#__PURE__*/ (0, $8ijGz$jsxs)("div", {
-            dir: "ltr",
-            children: [
-                /*#__PURE__*/ (0, $8ijGz$jsx)("div", {
-                    className: $41ddd91dbbf0c389$var$track({
-                        size: size,
-                        staticColor: staticColor
-                    })
-                }),
-                /*#__PURE__*/ (0, $8ijGz$jsxs)("div", {
-                    className: isIndeterminate ? $41ddd91dbbf0c389$var$fillsWrapperIndeterminate : $41ddd91dbbf0c389$var$fillsWrapper,
-                    children: [
-                        /*#__PURE__*/ (0, $8ijGz$jsx)("div", {
-                            className: $41ddd91dbbf0c389$var$fillMask1,
-                            children: /*#__PURE__*/ (0, $8ijGz$jsx)("div", {
-                                className: isIndeterminate ? $41ddd91dbbf0c389$var$fillSubMask1Indeterminate : $41ddd91dbbf0c389$var$fillSubMask,
-                                style: subMask1Style,
-                                children: /*#__PURE__*/ (0, $8ijGz$jsx)("div", {
-                                    className: $41ddd91dbbf0c389$var$fill({
-                                        size: size,
-                                        staticColor: staticColor
-                                    })
-                                })
-                            })
-                        }),
-                        /*#__PURE__*/ (0, $8ijGz$jsx)("div", {
-                            className: $41ddd91dbbf0c389$var$fillMask2,
-                            children: /*#__PURE__*/ (0, $8ijGz$jsx)("div", {
-                                className: isIndeterminate ? $41ddd91dbbf0c389$var$fillSubMask2Indeterminate : $41ddd91dbbf0c389$var$fillSubMask,
-                                style: subMask2Style,
-                                children: /*#__PURE__*/ (0, $8ijGz$jsx)("div", {
-                                    className: $41ddd91dbbf0c389$var$fill({
-                                        size: size,
-                                        staticColor: staticColor
-                                    })
-                                })
-                            })
+        children: ({ percentage: percentage, isIndeterminate: isIndeterminate })=>/*#__PURE__*/ (0, $8ijGz$jsxs)("svg", {
+                fill: "none",
+                width: "100%",
+                height: "100%",
+                children: [
+                    /*#__PURE__*/ (0, $8ijGz$jsx)("circle", {
+                        cx: "50%",
+                        cy: "50%",
+                        r: radius,
+                        strokeWidth: strokeWidth,
+                        className: $41ddd91dbbf0c389$var$track({
+                            staticColor: staticColor
                         })
-                    ]
-                })
-            ]
-        })
+                    }),
+                    /*#__PURE__*/ (0, $8ijGz$jsx)("circle", {
+                        cx: "50%",
+                        cy: "50%",
+                        r: radius,
+                        strokeWidth: strokeWidth,
+                        className: $41ddd91dbbf0c389$var$fill({
+                            staticColor: staticColor
+                        }),
+                        style: {
+                            // These cubic-bezier timing functions were derived from the previous animation keyframes
+                            // using a best fit algorithm, and then manually adjusted to approximate the original animation.
+                            animation: isIndeterminate ? `${$41ddd91dbbf0c389$var$rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${$41ddd91dbbf0c389$var$dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined
+                        },
+                        // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.
+                        pathLength: "100",
+                        // Add extra gap between dashes so 0% works in Chrome.
+                        strokeDasharray: "100 200",
+                        strokeDashoffset: isIndeterminate || percentage == null ? undefined : 100 - percentage,
+                        strokeLinecap: "round"
+                    })
+                ]
+            })
     });
 }
 /**

package/dist/ProgressCircle.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {clamp} from '@react-aria/utils';\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n  /**\n   * The size of the ProgressCircle.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'black' | 'white',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst fillMask1Frames = keyframes(`\n0% {\n  transform: rotate(90deg);\n}\n\n1.69% {\n  transform: rotate(72.3deg);\n}\n\n3.39% {\n  transform: rotate(55.5deg);\n}\n\n5.08% {\n  transform: rotate(40.3deg);\n}\n\n6.78% {\n  transform: rotate(25deg);\n}\n\n8.47% {\n  transform: rotate(10.6deg);\n}\n\n10.17%, 40.68% {\n  transform: rotate(0deg);\n}\n\n42.37% {\n  transform: rotate(5.3deg);\n}\n\n44.07% {\n  transform: rotate(13.4deg);\n}\n\n45.76% {\n  transform: rotate(20.6deg);\n}\n\n47.46% {\n  transform: rotate(29deg);\n}\n\n49.15% {\n  transform: rotate(36.5deg);\n}\n\n50.85% {\n  transform: rotate(42.6deg);\n}\n\n52.54% {\n  transform: rotate(48.8deg);\n}\n\n54.24% {\n  transform: rotate(54.2deg);\n}\n\n55.93% {\n  transform: rotate(59.4deg);\n}\n\n57.63% {\n  transform: rotate(63.2deg);\n}\n\n59.32% {\n  transform: rotate(67.2deg);\n}\n\n61.02% {\n  transform: rotate(70.8deg);\n}\n\n62.71% {\n  transform: rotate(73.8deg);\n}\n\n64.41% {\n  transform: rotate(76.2deg);\n}\n\n66.1% {\n  transform: rotate(78.7deg);\n}\n\n67.8% {\n  transform: rotate(80.6deg);\n}\n\n69.49% {\n  transform: rotate(82.6deg);\n}\n\n71.19% {\n  transform: rotate(83.7deg);\n}\n\n72.88% {\n  transform: rotate(85deg);\n}\n\n74.58% {\n  transform: rotate(86.3deg);\n}\n\n76.27% {\n  transform: rotate(87deg);\n}\n\n77.97% {\n  transform: rotate(87.7deg);\n}\n\n79.66% {\n  transform: rotate(88.3deg);\n}\n\n81.36% {\n  transform: rotate(88.6deg);\n}\n\n83.05% {\n  transform: rotate(89.2deg);\n}\n\n84.75% {\n  transform: rotate(89.2deg);\n}\n\n86.44% {\n  transform: rotate(89.5deg);\n}\n\n88.14% {\n  transform: rotate(89.9deg);\n}\n\n89.83% {\n  transform: rotate(89.7deg);\n}\n\n91.53% {\n  transform: rotate(90.1deg);\n}\n\n93.22% {\n  transform: rotate(90.2deg);\n}\n\n94.92% {\n  transform: rotate(90.1deg);\n}\n\n96.61% {\n  transform: rotate(90deg);\n}\n\n98.31% {\n  transform: rotate(89.8deg);\n}\n\n100% {\n  transform: rotate(90deg);\n}\n`);\n\nconst fillMask2Frames = keyframes(`\n0%, 8.47% {\n  transform: rotate(180deg);\n}\n\n10.17% {\n  transform: rotate(179.2deg);\n}\n\n11.86% {\n  transform: rotate(164deg);\n}\n\n13.56% {\n  transform: rotate(151.8deg);\n}\n\n15.25% {\n  transform: rotate(140.8deg);\n}\n\n16.95% {\n  transform: rotate(130.3deg);\n}\n\n18.64% {\n  transform: rotate(120.4deg);\n}\n\n20.34% {\n  transform: rotate(110.8deg);\n}\n\n22.03% {\n  transform: rotate(101.6deg);\n}\n\n23.73% {\n  transform: rotate(93.5deg);\n}\n\n25.42% {\n  transform: rotate(85.4deg);\n}\n\n27.12% {\n  transform: rotate(78.1deg);\n}\n\n28.81% {\n  transform: rotate(71.2deg);\n}\n\n30.51% {\n  transform: rotate(89.1deg);\n}\n\n32.2% {\n  transform: rotate(105.5deg);\n}\n\n33.9% {\n  transform: rotate(121.3deg);\n}\n\n35.59% {\n  transform: rotate(135.5deg);\n}\n\n37.29% {\n  transform: rotate(148.4deg);\n}\n\n38.98% {\n  transform: rotate(161deg);\n}\n\n40.68% {\n  transform: rotate(173.5deg);\n}\n\n42.37%, 100% {\n  transform: rotate(180deg);\n}\n`);\n\nconst fillsRotate = keyframes(`\n0% {transform: rotate(-90deg)}\n100% {transform: rotate(270deg)}\n`);\n\nconst circleDims = {\n  height: {\n    default: 32,\n    size: {\n      S: 16,\n      L: 64\n    }\n  },\n  width: {\n    default: 32,\n    size: {\n      S: 16,\n      L: 64\n    }\n  },\n  aspectRatio: 'square'\n} as const;\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n  ...circleDims,\n  display: 'inline-block',\n  position: 'relative'\n}, getAllowedOverrides());\n\nconst trackStyles = {\n  ...circleDims,\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: {\n    default: '[3px]',\n    size: {\n      S: 2,\n      L: 4\n    }\n  },\n  borderRadius: 'full'\n} as const;\n\nconst track = style<ProgressCircleStyleProps>({\n  ...trackStyles,\n  borderColor: {\n    default: baseColor('gray-300'),\n    staticColor: {\n      white: {\n        default: baseColor('transparent-white-300'),\n        forcedColors: 'Background'\n      },\n      // TODO: no designs for this one\n      black: {\n        default: baseColor('transparent-black-300'),\n        forcedColors: 'Background'\n      }\n    },\n    forcedColors: 'Background'\n  }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n  ...trackStyles,\n  borderColor: {\n    default: baseColor('blue-900'),\n    staticColor: {\n      white: {\n        default: baseColor('transparent-white-900'),\n        forcedColors: 'Highlight'\n      },\n      // TODO: no designs for this one\n      black: {\n        default: baseColor('transparent-black-900'),\n        forcedColors: 'Highlight'\n      }\n    },\n    forcedColors: 'Highlight'\n  }\n});\n\nconst fillsWrapperStyles = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  size: 'full'\n} as const;\n\nconst fillsWrapper = style({\n  ...fillsWrapperStyles\n});\n\nconst fillsWrapperIndeterminate = style({\n  ...fillsWrapperStyles,\n  willChange: 'transform',\n  transform: 'translateZ(0)',\n  animation: fillsRotate,\n  animationDuration: 1000,\n  animationTimingFunction: '[cubic-bezier(.25,.78,.48,.89)]',\n  animationIterationCount: 'infinite',\n  transformOrigin: 'center'\n});\n\nconst commonFillMask = {\n  position: 'absolute',\n  width: '[50%]',\n  height: 'full',\n  transformOrigin: '[100% center]',\n  overflow: 'hidden'\n} as const;\n\nconst fillMask1 = style({\n  ...commonFillMask,\n  transform: 'rotate(180deg)'\n});\n\nconst fillMask2 = style({\n  ...commonFillMask,\n  transform: 'rotate(0deg)'\n});\n\nconst commonFillSubMask = {\n  width: 'full',\n  height: 'full',\n  transformOrigin: '[100% center]',\n  transform: 'rotate(-180deg)',\n  overflow: 'hidden'\n} as const;\n\nconst commonFillSubMaskIndeterminate = {\n  transform: 'translateZ(0)',\n  willChange: 'transform',\n  animationDuration: 1000,\n  animationTimingFunction: 'linear',\n  animationIterationCount: 'infinite'\n} as const;\n\nconst fillSubMask = style({\n  ...commonFillSubMask\n});\n\nconst fillSubMask1Indeterminate = style({\n  ...commonFillSubMask,\n  animation: fillMask1Frames,\n  ...commonFillSubMaskIndeterminate\n});\n\nconst fillSubMask2Indeterminate = style({\n  ...commonFillSubMask,\n  animation: fillMask2Frames,\n  ...commonFillSubMaskIndeterminate\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, StyleProps {}\n\nfunction ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n  let {\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    size = 'M',\n    staticColor,\n    isIndeterminate = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  value = clamp(value, minValue, maxValue);\n\n  let subMask1Style: CSSProperties = {};\n  let subMask2Style: CSSProperties = {};\n  if (!isIndeterminate) {\n    let percentage = (value - minValue) / (maxValue - minValue) * 100;\n    let angle;\n    if (percentage > 0 && percentage <= 50) {\n      angle = -180 + (percentage / 50 * 180);\n      subMask1Style.transform = `rotate(${angle}deg)`;\n      subMask2Style.transform = 'rotate(-180deg)';\n    } else if (percentage > 50) {\n      angle = -180 + (percentage - 50) / 50 * 180;\n      subMask1Style.transform = 'rotate(0deg)';\n      subMask2Style.transform = `rotate(${angle}deg)`;\n    }\n  }\n\n  if (!ariaLabel && !ariaLabelledby) {\n    console.warn('ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility');\n  }\n\n  return (\n    <RACProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({\n        ...renderProps,\n        size\n      }, props.styles)}>\n      <div dir=\"ltr\">\n        <div className={track({size, staticColor})} />\n        <div className={isIndeterminate ? fillsWrapperIndeterminate : fillsWrapper}>\n          <div className={fillMask1}>\n            <div\n              className={isIndeterminate ? fillSubMask1Indeterminate : fillSubMask}\n              style={subMask1Style}>\n              <div className={fill({size, staticColor})} />\n            </div>\n          </div>\n          <div className={fillMask2}>\n            <div\n              className={isIndeterminate ? fillSubMask2Indeterminate : fillSubMask}\n              style={subMask2Style}>\n              <div className={fill({size, staticColor})} />\n            </div>\n          </div>\n        </div>\n      </div>\n    </RACProgressBar>\n  );\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nlet _ProgressCircle = /*#__PURE__*/ forwardRef(ProgressCircle);\nexport {_ProgressCircle as ProgressCircle};\n"],"names":[],"version":3,"file":"ProgressCircle.mjs.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AA0BM,MAAM,0DAAwB,CAAA,GAAA,oBAAY,EAAkE;AAEnH,yEAAyE;AACzE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,MAAM;;;;;;;;AAWN,MAAM;;;;;;;;;;AAeN,MAAM;AAUN,iFAAiF;AACjF,MAAM;AAUN,SAAS,qCAAe,KAA0B,EAAE,GAA2B;IAC7E,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,kBACP,WAAW,gBACX,YAAY,oBACZ,mBAAmB,IACpB,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,IAAI,cAAc;IAClB,IAAI,SAAS,KACX,cAAc;SACT,IAAI,SAAS,KAClB,cAAc;IAGhB,yGAAyG;IACzG,IAAI,SAAS,CAAC,WAAW,EAAE,cAAc,EAAE,GAAG,CAAC;IAE/C,qBACE,gBAAC,CAAA,GAAA,kBAAa;QACX,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBACnD,GAAG,WAAW;sBACd;YACF,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,mBAAE,eAAe,EAAC,iBAC7B,iBAAC;gBACC,MAAK;gBACL,OAAM;gBACN,QAAO;;kCACP,gBAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,4BAAM;yCAAC;wBAAW;;kCAC/B,gBAAC;wBACC,IAAG;wBACH,IAAG;wBACH,GAAG;wBACH,aAAa;wBACb,WAAW,2BAAK;yCAAC;wBAAW;wBAC5B,OAAO;4BACL,yFAAyF;4BACzF,gGAAgG;4BAChG,WAAW,kBAAkB,CAAC,EAAE,wCAAkB,2CAA2C,EAAE,0CAAoB,4CAA4C,CAAC,GAAG;wBACrK;wBACA,2FAA2F;wBAC3F,YAAW;wBACX,sDAAsD;wBACtD,iBAAgB;wBAChB,kBAAkB,mBAAmB,cAAc,OAAO,YAAY,MAAM;wBAC5E,eAAc;;;;;AAK1B;AAEA;;;CAGC,GACD,IAAI,4CAAkB,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ProgressCircle.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ProgressCircleStyleProps {\n  /**\n   * The size of the ProgressCircle.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L',\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'black' | 'white',\n  /**\n   * Whether presentation is indeterminate when progress isn't known.\n   */\n  isIndeterminate?: boolean\n}\n\nexport const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);\n\n// Double check the types passed to each style, may not need all for each\nconst wrapper = style<ProgressCircleStyleProps>({\n  size: {\n    default: 32,\n    size: {\n      S: 16,\n      L: 64\n    }\n  },\n  aspectRatio: 'square',\n  display: 'inline-block'\n}, getAllowedOverrides({height: true}));\n\nconst track = style<ProgressCircleStyleProps>({\n  stroke: {\n    default: 'gray-300',\n    staticColor: {\n      white: 'transparent-white-300',\n      black: 'transparent-black-300'\n    },\n    forcedColors: 'Background'\n  }\n});\n\nconst fill = style<ProgressCircleStyleProps>({\n  stroke: {\n    default: 'blue-900',\n    staticColor: {\n      white: 'transparent-white-900',\n      black: 'transparent-black-900'\n    },\n    forcedColors: 'Highlight'\n  },\n  rotate: -90,\n  transformOrigin: 'center'\n});\n\nexport interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, StyleProps {}\n\nconst rotationAnimation = keyframes(`\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n`);\n\n// stroke-dashoffset represents `100 - percentage`. See below for how this works.\nconst dashoffsetAnimation = keyframes(`\n  0%, 100% {\n    stroke-dashoffset: 75;\n  }\n\n  30% {\n    stroke-dashoffset: 20;\n  }\n`);\n\nfunction ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);\n  let {\n    size = 'M',\n    staticColor,\n    UNSAFE_style,\n    UNSAFE_className = ''\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let strokeWidth = 3;\n  if (size === 'S') {\n    strokeWidth = 2;\n  } else if (size === 'L') {\n    strokeWidth = 4;\n  }\n\n  // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.\n  let radius = `calc(50% - ${strokeWidth / 2}px)`;\n\n  return (\n    <RACProgressBar\n      {...props}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({\n        ...renderProps,\n        size\n      }, props.styles)}>\n      {({percentage, isIndeterminate}) => (\n        <svg\n          fill=\"none\"\n          width=\"100%\"\n          height=\"100%\">\n          <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            strokeWidth={strokeWidth}\n            className={track({staticColor})} />\n          <circle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            strokeWidth={strokeWidth}\n            className={fill({staticColor})}\n            style={{\n              // These cubic-bezier timing functions were derived from the previous animation keyframes\n              // using a best fit algorithm, and then manually adjusted to approximate the original animation.\n              animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined\n            }}\n            // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.\n            pathLength=\"100\"\n            // Add extra gap between dashes so 0% works in Chrome.\n            strokeDasharray=\"100 200\"\n            strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}\n            strokeLinecap=\"round\" />\n        </svg>\n      )}\n    </RACProgressBar>\n  );\n}\n\n/**\n * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.\n * They can represent determinate or indeterminate progress.\n */\nlet _ProgressCircle = /*#__PURE__*/ forwardRef(ProgressCircle);\nexport {_ProgressCircle as ProgressCircle};\n"],"names":[],"version":3,"file":"ProgressCircle.mjs.map"}

package/dist/types.d.ts

@@ -535,9 +535,13 @@ export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children
 }
 /** An individual Breadcrumb for Breadcrumbs. */
 export let Breadcrumb: (props: BreadcrumbProps & RefAttributes<DOMRefValue<HTMLLIElement>>) => ReactElement | null;
+interface CardRenderProps {
+    /** The size of the Card. */
+    size: 'XS' | 'S' | 'M' | 'L' | 'XL';
+}
 export interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children'>, StyleProps {
     /** The children of the Card. */
-    children: ReactNode;
+    children: ReactNode | ((renderProps: CardRenderProps) => ReactNode);
     /**
      * The size of the Card.
      * @default 'M'
@@ -605,7 +609,7 @@ export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'key
     /** Spectrum-defined styles, returned by the `style()` macro. */
     styles?: StylesPropWithHeight;
 }
-export function CardView<T extends object>(props: CardViewProps<T>): JSX.Element;
+export const CardView: <T extends object>(props: CardViewProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null;
 export interface DialogTriggerProps extends _DialogTriggerProps1, Pick<_PopoverProps1, 'placement' | 'shouldFlip' | 'isKeyboardDismissDisabled' | 'containerPadding' | 'offset' | 'crossOffset'> {
     /**
      * The type of Dialog that should be rendered.