@vinyasa/feedback 1.0.21 → 1.0.23

package/dist/cjs/index.css

@@ -218,14 +218,19 @@
   border-radius: var(--vinyasa-radius-full);
   width: 100%;
   height: .5rem;
+  position: relative;
   overflow: hidden;
 }
 
 ._1ie0lek1 {
   background-color: var(--vinyasa-primary);
   border-radius: var(--vinyasa-radius-full);
-  height: 100%;
-  transition: width var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-standard);
+  transition: transform var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-standard);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 @keyframes i625lp0 {
@@ -270,7 +275,7 @@
   visibility: hidden;
 }
 
-@keyframes _1xil9gec {
+@keyframes _1xil9ge7 {
   from {
     opacity: 0;
     transform: translateY(-.5rem);
@@ -282,7 +287,7 @@
   }
 }
 
-@keyframes _1xil9ged {
+@keyframes _1xil9ge8 {
   from {
     opacity: 1;
     transform: translateY(0);
@@ -294,7 +299,7 @@
   }
 }
 
-@keyframes _1xil9gee {
+@keyframes _1xil9ge9 {
   from {
     opacity: 0;
     transform: translateY(.5rem);
@@ -306,7 +311,7 @@
   }
 }
 
-@keyframes _1xil9gef {
+@keyframes _1xil9gea {
   from {
     opacity: 1;
     transform: translateY(0);
@@ -322,7 +327,11 @@
   z-index: var(--vinyasa-z-index-toast);
   gap: var(--vinyasa-space2);
   pointer-events: none;
+  outline: none;
   flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
   display: flex;
   position: fixed;
 }
@@ -359,7 +368,7 @@
   right: var(--vinyasa-space4);
 }
 
-._1xil9ge7 {
+._1xil9geb {
   align-items: flex-start;
   gap: var(--vinyasa-space2);
   padding: var(--vinyasa-space3);
@@ -372,66 +381,66 @@
   display: flex;
 }
 
-._1xil9ge8 {
+._1xil9geb[data-edge="top"][data-state="open"] {
+  animation: .2s ease-out _1xil9ge7;
+}
+
+._1xil9geb[data-edge="top"][data-state="closed"] {
+  animation: .15s ease-in forwards _1xil9ge8;
+}
+
+._1xil9geb[data-edge="bottom"][data-state="open"] {
+  animation: .2s ease-out _1xil9ge9;
+}
+
+._1xil9geb[data-edge="bottom"][data-state="closed"] {
+  animation: .15s ease-in forwards _1xil9gea;
+}
+
+._1xil9gec {
   background-color: var(--vinyasa-status-info-bg);
   color: var(--vinyasa-status-info-text);
 }
 
-._1xil9ge9 {
+._1xil9ged {
   background-color: var(--vinyasa-status-success-bg);
   color: var(--vinyasa-status-success-text);
 }
 
-._1xil9gea {
+._1xil9gee {
   background-color: var(--vinyasa-status-warning-bg);
   color: var(--vinyasa-status-warning-text);
 }
 
-._1xil9geb {
+._1xil9gef {
   background-color: var(--vinyasa-status-error-bg);
   color: var(--vinyasa-status-error-text);
 }
 
 ._1xil9geg {
-  animation: .2s ease-out _1xil9gec;
-}
-
-._1xil9geh {
-  animation: .2s ease-out _1xil9gee;
-}
-
-._1xil9gei {
-  animation: .15s ease-in forwards _1xil9ged;
-}
-
-._1xil9gej {
-  animation: .15s ease-in forwards _1xil9gef;
-}
-
-._1xil9gek {
   flex-shrink: 0;
   margin-top: .125em;
 }
 
-._1xil9gel {
+._1xil9geh {
   gap: var(--vinyasa-space1);
   flex-direction: column;
   flex-grow: 1;
   display: flex;
 }
 
-._1xil9gem {
+._1xil9gei {
   font-size: var(--vinyasa-font-size-sm);
   font-weight: var(--vinyasa-font-weight-semibold);
   margin: 0;
 }
 
-._1xil9gen {
+._1xil9gej {
   font-size: var(--vinyasa-font-size-sm);
   margin: 0;
 }
 
-._1xil9geo {
+._1xil9gek {
   color: inherit;
   cursor: pointer;
   opacity: .6;
@@ -442,7 +451,20 @@
   display: inline-flex;
 }
 
-._1xil9geo:hover {
+._1xil9gek:hover {
   opacity: 1;
 }
 
+._1xil9gel {
+  color: inherit;
+  cursor: pointer;
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-semibold);
+  text-underline-offset: .15em;
+  background: none;
+  border: none;
+  flex-shrink: 0;
+  padding: 0;
+  text-decoration: underline;
+}
+

package/dist/cjs/inline-message.cjs

@@ -28,6 +28,7 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    InlineMessageIcon: ()=>InlineMessageIcon,
     default: ()=>inline_message_InlineMessage
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
@@ -114,6 +115,9 @@ const statusIcons = {
     warning: icons_namespaceObject.AlertTriangleIcon,
     error: icons_namespaceObject.XIcon
 };
+const StatusContext = (0, external_react_namespaceObject.createContext)('info');
+const StatusProvider = StatusContext.Provider;
+const useStatusContext = ()=>(0, external_react_namespaceObject.useContext)(StatusContext);
 function toPrimitive(t, r) {
     if ("object" != typeof t || !t) return t;
     var e = t[Symbol.toPrimitive];
@@ -318,7 +322,6 @@ const InlineMessage = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         "style",
         "children"
     ]), [ref] = _rest;
-    const Icon = statusIcons[status];
     const classes = className ? `${inlineMessage({
         status
     })} ${className}` : inlineMessage({
@@ -340,25 +343,39 @@ const InlineMessage = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         px,
         py
     }), style);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", _object_spread_props(_object_spread({
-        ref: ref,
-        role: "alert",
-        className: classes,
-        style: computedStyle
-    }, rest), {
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
-                className: icon,
-                "aria-hidden": "true"
-            }),
-            children
-        ]
-    }));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StatusProvider, {
+        value: status,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", _object_spread_props(_object_spread({
+            ref: ref,
+            role: "alert",
+            className: classes,
+            style: computedStyle
+        }, rest), {
+            children: children
+        }))
+    });
 });
 InlineMessage.displayName = 'InlineMessage';
 const inline_message_InlineMessage = InlineMessage;
+const InlineMessageIcon = (_0)=>{
+    let { className, children } = _0, rest = _object_without_properties(_0, [
+        "className",
+        "children"
+    ]);
+    const status = useStatusContext();
+    const StatusIcon = statusIcons[status];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", _object_spread_props(_object_spread({
+        className: className ? `${icon} ${className}` : icon,
+        "aria-hidden": "true"
+    }, rest), {
+        children: null != children ? children : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StatusIcon, {})
+    }));
+};
+InlineMessageIcon.displayName = 'InlineMessageIcon';
+exports.InlineMessageIcon = __webpack_exports__.InlineMessageIcon;
 exports["default"] = __webpack_exports__["default"];
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "InlineMessageIcon",
     "default"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/cjs/loading-overlay.cjs

@@ -37,6 +37,8 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    LoadingOverlayBackdrop: ()=>LoadingOverlayBackdrop,
+    LoadingOverlayContent: ()=>LoadingOverlayContent,
     default: ()=>loading_overlay_LoadingOverlay
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
@@ -412,6 +414,7 @@ function LoadingOverlay_object_without_properties_loose(source, excluded) {
     }
     return target;
 }
+const LoadingOverlayContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(false);
 const LoadingOverlay = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
     let _ref = [
         _0,
@@ -422,28 +425,49 @@ const LoadingOverlay = /*#__PURE__*/ (0, external_react_namespaceObject.forwardR
         "children"
     ]), [ref] = _rest;
     const classes = className ? `${wrapper} ${className}` : wrapper;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(box_default(), _object_spread_props(LoadingOverlay_object_spread({
-        ref: ref,
-        className: classes
-    }, rest), {
-        children: [
-            children,
-            visible ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: overlay,
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                        className: backdrop
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(spinner_Spinner, {})
-                ]
-            }) : null
-        ]
-    }));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LoadingOverlayContext.Provider, {
+        value: visible,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(box_default(), _object_spread_props(LoadingOverlay_object_spread({
+            ref: ref,
+            className: classes
+        }, rest), {
+            children: children
+        }))
+    });
 });
 LoadingOverlay.displayName = 'LoadingOverlay';
 const loading_overlay_LoadingOverlay = LoadingOverlay;
+const LoadingOverlayBackdrop = (_0)=>{
+    let { className } = _0, rest = LoadingOverlay_object_without_properties(_0, [
+        "className"
+    ]);
+    const visible = (0, external_react_namespaceObject.useContext)(LoadingOverlayContext);
+    if (!visible) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", LoadingOverlay_object_spread({
+        className: className ? `${backdrop} ${className}` : backdrop
+    }, rest));
+};
+LoadingOverlayBackdrop.displayName = 'LoadingOverlayBackdrop';
+const LoadingOverlayContent = (_0)=>{
+    let { className, children } = _0, rest = LoadingOverlay_object_without_properties(_0, [
+        "className",
+        "children"
+    ]);
+    const visible = (0, external_react_namespaceObject.useContext)(LoadingOverlayContext);
+    if (!visible) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", _object_spread_props(LoadingOverlay_object_spread({
+        className: className ? `${overlay} ${className}` : overlay
+    }, rest), {
+        children: null != children ? children : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(spinner_Spinner, {})
+    }));
+};
+LoadingOverlayContent.displayName = 'LoadingOverlayContent';
+exports.LoadingOverlayBackdrop = __webpack_exports__.LoadingOverlayBackdrop;
+exports.LoadingOverlayContent = __webpack_exports__.LoadingOverlayContent;
 exports["default"] = __webpack_exports__["default"];
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "LoadingOverlayBackdrop",
+    "LoadingOverlayContent",
     "default"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/cjs/progress-bar.cjs

@@ -1,14 +1,5 @@
 "use strict";
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
 (()=>{
     __webpack_require__.d = (exports1, getters, values)=>{
         var define = (defs, kind)=>{
@@ -37,12 +28,87 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    ProgressBarIndicator: ()=>ProgressBarIndicator,
     default: ()=>progress_bar_ProgressBar
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const box_namespaceObject = require("@vinyasa/layout/box");
-var box_default = /*#__PURE__*/ __webpack_require__.n(box_namespaceObject);
+const react_progress_namespaceObject = require("@radix-ui/react-progress");
 const external_react_namespaceObject = require("react");
+const tokens_namespaceObject = require("@vinyasa/tokens");
+const space = {
+    1: tokens_namespaceObject.themeContract.space1,
+    2: tokens_namespaceObject.themeContract.space2,
+    3: tokens_namespaceObject.themeContract.space3,
+    4: tokens_namespaceObject.themeContract.space4,
+    5: tokens_namespaceObject.themeContract.space5,
+    6: tokens_namespaceObject.themeContract.space6
+};
+const spacingPropertyMap = [
+    [
+        'm',
+        'margin'
+    ],
+    [
+        'mx',
+        'marginInline'
+    ],
+    [
+        'my',
+        'marginBlock'
+    ],
+    [
+        'mt',
+        'marginTop'
+    ],
+    [
+        'mr',
+        'marginRight'
+    ],
+    [
+        'mb',
+        'marginBottom'
+    ],
+    [
+        'ml',
+        'marginLeft'
+    ],
+    [
+        'p',
+        'padding'
+    ],
+    [
+        'px',
+        'paddingInline'
+    ],
+    [
+        'py',
+        'paddingBlock'
+    ],
+    [
+        'pt',
+        'paddingTop'
+    ],
+    [
+        'pr',
+        'paddingRight'
+    ],
+    [
+        'pb',
+        'paddingBottom'
+    ],
+    [
+        'pl',
+        'paddingLeft'
+    ]
+];
+const resolveSpacingStyle = (props)=>{
+    const style = {};
+    for (const [propKey, cssProperty] of spacingPropertyMap){
+        const value = props[propKey];
+        if (void 0 !== value) style[cssProperty] = space[value];
+    }
+    return style;
+};
 var fill = '_1ie0lek1';
 var track = '_1ie0lek0';
 function _define_property(obj, key, value) {
@@ -68,25 +134,6 @@ function _object_spread(target) {
     }
     return target;
 }
-function ProgressBar_ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) symbols = symbols.filter(function(sym) {
-            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-        });
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = null != source ? source : {};
-    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    else ProgressBar_ownKeys(Object(source)).forEach(function(key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-    return target;
-}
 function _object_without_properties(source, excluded) {
     if (null == source) return {};
     var target = {}, sourceKeys, key, i;
@@ -123,39 +170,87 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
+const ProgressBarContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)({
+    value: 0,
+    max: 100
+});
 const ProgressBar = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
     let _ref = [
         _0,
         _1
-    ], [_ref1, ..._rest] = _ref, { value, max = 100, className, style } = _ref1, rest = _object_without_properties(_ref1, [
+    ], [_ref1, ..._rest] = _ref, { value, max = 100, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style } = _ref1, rest = _object_without_properties(_ref1, [
         "value",
         "max",
+        "m",
+        "mt",
+        "mr",
+        "mb",
+        "ml",
+        "mx",
+        "my",
+        "p",
+        "pt",
+        "pr",
+        "pb",
+        "pl",
+        "px",
+        "py",
         "className",
         "style"
     ]), [ref] = _rest;
+    const computedStyle = _object_spread({}, resolveSpacingStyle({
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        mx,
+        my,
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        px,
+        py
+    }), style);
     const classes = className ? `${track} ${className}` : track;
-    const percent = Math.min(100, Math.max(0, value / max * 100));
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(box_default(), _object_spread_props(_object_spread({
-        ref: ref,
-        role: "progressbar",
-        "aria-valuenow": value,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        className: classes,
-        style: style
-    }, rest), {
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: fill,
-            style: {
-                width: `${String(percent)}%`
-            }
-        })
-    }));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProgressBarContext.Provider, {
+        value: {
+            value,
+            max
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_progress_namespaceObject.Root, _object_spread({
+            ref: ref,
+            value: value,
+            max: max,
+            className: classes,
+            style: computedStyle
+        }, rest))
+    });
 });
 ProgressBar.displayName = 'ProgressBar';
 const progress_bar_ProgressBar = ProgressBar;
+const ProgressBarIndicator = (_0)=>{
+    let { className, style } = _0, rest = _object_without_properties(_0, [
+        "className",
+        "style"
+    ]);
+    const { value, max } = (0, external_react_namespaceObject.useContext)(ProgressBarContext);
+    const percent = Math.min(100, Math.max(0, value / max * 100));
+    const classes = className ? `${fill} ${className}` : fill;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_progress_namespaceObject.Indicator, _object_spread({
+        className: classes,
+        style: _object_spread({
+            transform: `translateX(-${String(100 - percent)}%)`
+        }, style)
+    }, rest));
+};
+ProgressBarIndicator.displayName = 'ProgressBarIndicator';
+exports.ProgressBarIndicator = __webpack_exports__.ProgressBarIndicator;
 exports["default"] = __webpack_exports__["default"];
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ProgressBarIndicator",
     "default"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/cjs/progress-bar.css

@@ -3,13 +3,18 @@
   border-radius: var(--vinyasa-radius-full);
   width: 100%;
   height: .5rem;
+  position: relative;
   overflow: hidden;
 }
 
 ._1ie0lek1 {
   background-color: var(--vinyasa-primary);
   border-radius: var(--vinyasa-radius-full);
-  height: 100%;
-  transition: width var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-standard);
+  transition: transform var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-standard);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }