reshaped 3.9.0-canary.5 → 3.9.0-canary.7

package/dist/components/Avatar/Avatar.module.css

@@ -1 +1 @@
-.root{align-items:center;aspect-ratio:1;display:flex;font-size:calc(var(--rs-h) / 3);font-weight:var(--rs-font-weight-bold);justify-content:center;line-height:100%}.img{border-radius:inherit;height:100%;object-fit:cover;width:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-warning{color:var(--rs-color-foreground-warning)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}
+.root{align-items:center;aspect-ratio:1;display:flex;font-size:calc(var(--rs-h) / 3);font-weight:var(--rs-font-weight-bold);justify-content:center;line-height:100%}.root:has(.img):after{border:1px solid var(--rs-color-border-neutral);border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.img{border-radius:inherit;height:100%;object-fit:cover;width:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-warning{color:var(--rs-color-foreground-warning)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}

package/dist/components/Badge/Badge.module.css

@@ -1 +1 @@
-.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
+.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none;z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}

package/dist/components/FileUpload/FileUpload.js

@@ -43,7 +43,9 @@ const FileUpload = (props) => {
     };
     const inputNode = (_jsx(HiddenVisually, { children: _jsx("input", { ...inputAttributes, type: "file", className: s.field, name: name, onChange: handleChange }) }));
     const childrenNode = typeof children === "function" ? children({ highlighted: highlightToggle.active }) : children;
-    return (_jsx(View, { className: rootClassNames, height: height, attributes: {
+    return (_jsx(View, { className: rootClassNames, height: height, 
+        // For the focus ring radius
+        borderRadius: "medium", attributes: {
             ...attributes,
             onDragOver: handleDragOver,
             onDragEnter: handleDragEnter,

package/dist/components/FileUpload/FileUpload.module.css

@@ -1 +1 @@
-.root{--rs-file-upload-radius:var(--rs-radius-medium);display:block}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-shadow-focus)}.--inline{--rs-file-upload-radius:var(--rs-radius-small)}.--inline,.--inline .triggerLayer{display:inline-block;vertical-align:top}[data-rs-keyboard] .--inline:focus-within{box-shadow:none}[data-rs-keyboard] .--inline:focus-within .triggerLayer>*{box-shadow:var(--rs-shadow-focus)}.--variant-outline .triggerLayer{border:1px dashed var(--rs-color-border-neutral);border-radius:var(--rs-file-upload-radius)}.--highlighted.--variant-outline .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),.08);border-color:var(--rs-color-border-primary)}@media (hover:hover) and (pointer:fine){.--variant-outline .triggerLayer:hover:not(:has(.trigger)){background:rgba(var(--rs-color-rgb-background-neutral),.16)}}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger{pointer-events:all}.trigger{display:contents}
+.root{--rs-file-upload-radius:var(--rs-radius-medium);display:block}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-shadow-focus)}.--inline{--rs-file-upload-radius:var(--rs-radius-small)}.--inline,.--inline .triggerLayer{display:inline-block;vertical-align:top}[data-rs-keyboard] .--inline:focus-within{box-shadow:none}[data-rs-keyboard] .--inline:focus-within .triggerLayer>*{box-shadow:var(--rs-shadow-focus)}.--variant-outline .triggerLayer{border:1px dashed var(--rs-color-border-neutral);border-radius:var(--rs-file-upload-radius)}.--highlighted.--variant-outline .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),.08);border-color:var(--rs-color-border-primary)}@media (hover:hover) and (pointer:fine){.--variant-outline .triggerLayer:hover:not(:has(.trigger)){background:rgba(var(--rs-color-rgb-background-neutral),.16)}}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger,.triggerLayer:has(.trigger) button{pointer-events:all}.trigger{display:contents}

package/dist/components/Flyout/Flyout.module.css

@@ -1 +1 @@
-.content{--rs-flyout-gap:0;--rs-flyout-max-h:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;height:100%;max-height:var(--rs-flyout-max-h);max-width:100%;opacity:0;outline:none;overflow:auto;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-shadow-focus)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}
+.content{--rs-flyout-gap:0;--rs-flyout-max-h:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;flex-grow:1;height:100%;max-height:var(--rs-flyout-max-h);max-width:100%;opacity:0;outline:none;overflow:auto;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-shadow-focus)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}

package/dist/components/Flyout/useFlyout.js

@@ -4,31 +4,22 @@ import flyout from "./utilities/flyout.js";
 const flyoutReducer = (state, action) => {
     switch (action.type) {
         case "render":
-            if (state.status !== "idle")
-                return state;
             // Disable events before it's positioned to avoid mouseleave getting triggered
             return { ...state, status: "rendered" };
         case "position":
-            if (!action.payload.sync && state.status !== "rendered")
-                return state;
-            if (action.payload.sync && state.status !== "visible")
-                return state;
             return {
                 ...state,
-                status: action.payload.sync ? "visible" : "positioned",
+                status: action.payload.sync ? state.status : "positioned",
                 position: action.payload.position,
             };
         case "show":
+            // Checking because we're positioning inside nextAnimationFrame
             if (state.status !== "positioned")
                 return state;
             return { ...state, status: "visible" };
         case "hide":
-            if (state.status !== "visible")
-                return state;
             return { ...state, status: "hidden" };
         case "remove":
-            if (state.status !== "hidden" && state.status !== "visible")
-                return state;
             return { ...state, status: "idle" };
         default:
             throw new Error("[Reshaped] Invalid flyout reducer type");

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.5",
+  "version": "3.9.0-canary.7",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",