@vinyasa/feedback 1.0.21 → 1.0.23

package/dist/cjs/toaster.cjs

@@ -28,10 +28,15 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    ToastAction: ()=>ToastAction,
+    ToastClose: ()=>ToastClose,
+    ToastDescription: ()=>ToastDescription,
+    ToastTitle: ()=>ToastTitle,
     default: ()=>toaster_Toaster,
     toast: ()=>toast
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_toast_namespaceObject = require("@radix-ui/react-toast");
 const external_react_namespaceObject = require("react");
 function toPrimitive(t, r) {
     if ("object" != typeof t || !t) return t;
@@ -119,15 +124,28 @@ var createRuntimeFn = (config)=>{
     };
     return runtimeFn;
 };
-var body = '_1xil9gel';
-var closeButton = '_1xil9geo';
-var description = '_1xil9gen';
-var enterFromBottom = '_1xil9geh';
-var enterFromTop = '_1xil9geg';
-var exitToBottom = '_1xil9gej';
-var exitToTop = '_1xil9gei';
-var icon = '_1xil9gek';
-var stack = createRuntimeFn({
+var action = '_1xil9gel';
+var body = '_1xil9geh';
+var closeButton = '_1xil9gek';
+var description = '_1xil9gej';
+var icon = '_1xil9geg';
+var title = '_1xil9gei';
+var toastCard = createRuntimeFn({
+    defaultClassName: '_1xil9geb',
+    variantClassNames: {
+        status: {
+            info: '_1xil9gec',
+            success: '_1xil9ged',
+            warning: '_1xil9gee',
+            error: '_1xil9gef'
+        }
+    },
+    defaultVariants: {
+        status: 'info'
+    },
+    compoundVariants: []
+});
+var viewport = createRuntimeFn({
     defaultClassName: '_1xil9ge0',
     variantClassNames: {
         position: {
@@ -144,22 +162,6 @@ var stack = createRuntimeFn({
     },
     compoundVariants: []
 });
-var title = '_1xil9gem';
-var toastCard = createRuntimeFn({
-    defaultClassName: '_1xil9ge7',
-    variantClassNames: {
-        status: {
-            info: '_1xil9ge8',
-            success: '_1xil9ge9',
-            warning: '_1xil9gea',
-            error: '_1xil9geb'
-        }
-    },
-    defaultVariants: {
-        status: 'info'
-    },
-    compoundVariants: []
-});
 const icons_namespaceObject = require("@vinyasa/icons");
 const statusIcons = {
     info: icons_namespaceObject.InfoIcon,
@@ -167,6 +169,8 @@ const statusIcons = {
     warning: icons_namespaceObject.AlertTriangleIcon,
     error: icons_namespaceObject.XIcon
 };
+const StatusContext = (0, external_react_namespaceObject.createContext)('info');
+StatusContext.Provider;
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -190,6 +194,152 @@ function _object_spread(target) {
     }
     return target;
 }
+function _object_without_properties(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys, key, i;
+    if ("u" > typeof Reflect && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (!(excluded.indexOf(key) >= 0)) {
+            if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+        }
+    }
+    return target;
+}
+const ToastTitle = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { className } = _ref1, rest = _object_without_properties(_ref1, [
+        "className"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toast_namespaceObject.Title, _object_spread({
+        ref: ref,
+        className: className ? `${title} ${className}` : title
+    }, rest));
+});
+ToastTitle.displayName = 'ToastTitle';
+const ToastDescription = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { className } = _ref1, rest = _object_without_properties(_ref1, [
+        "className"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toast_namespaceObject.Description, _object_spread({
+        ref: ref,
+        className: className ? `${description} ${className}` : description
+    }, rest));
+});
+ToastDescription.displayName = "ToastDescription";
+const ToastAction = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { className } = _ref1, rest = _object_without_properties(_ref1, [
+        "className"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toast_namespaceObject.Action, _object_spread({
+        ref: ref,
+        className: className ? `${action} ${className}` : action
+    }, rest));
+});
+ToastAction.displayName = 'ToastAction';
+const ToastClose = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { className } = _ref1, rest = _object_without_properties(_ref1, [
+        "className"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toast_namespaceObject.Close, _object_spread({
+        ref: ref,
+        className: className ? `${closeButton} ${className}` : closeButton
+    }, rest));
+});
+ToastClose.displayName = 'ToastClose';
+const ToasterItem = ({ status, title: itemTitle, description: itemDescription, duration, open, edge, onOpenChange })=>{
+    const Icon = statusIcons[status];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_toast_namespaceObject.Root, {
+        className: toastCard({
+            status
+        }),
+        "data-edge": edge,
+        open: open,
+        duration: 0 === duration ? 1 / 0 : duration,
+        onOpenChange: onOpenChange,
+        forceMount: true,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+                className: icon,
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: body,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToastTitle, {
+                        children: itemTitle
+                    }),
+                    itemDescription ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToastDescription, {
+                        children: itemDescription
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToastClose, {
+                "aria-label": "Dismiss",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.XIcon, {})
+            })
+        ]
+    });
+};
+const toaster_ToasterItem = ToasterItem;
+function toastStore_define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function toastStore_object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            toastStore_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function toastStore_ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
@@ -233,7 +383,7 @@ const show = (options)=>{
         title: options.title,
         description: options.description,
         duration: null != (_options_duration = options.duration) ? _options_duration : 4000,
-        exiting: false
+        open: true
     };
     toasts = [
         ...toasts,
@@ -244,9 +394,9 @@ const show = (options)=>{
 };
 const dismiss = (id)=>{
     const target = toasts.find((item)=>item.id === id);
-    if (!target || target.exiting) return;
-    toasts = toasts.map((item)=>item.id === id ? _object_spread_props(_object_spread({}, item), {
-            exiting: true
+    if (!(null == target ? void 0 : target.open)) return;
+    toasts = toasts.map((item)=>item.id === id ? _object_spread_props(toastStore_object_spread({}, item), {
+            open: false
         }) : item);
     notify();
     setTimeout(()=>{
@@ -258,57 +408,6 @@ const toast = {
     show,
     dismiss
 };
-const ToastItemView = ({ id, status, title: itemTitle, description: itemDescription, duration, exiting, edge })=>{
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (duration <= 0) return;
-        const timer = setTimeout(()=>{
-            dismiss(id);
-        }, duration);
-        return ()=>{
-            clearTimeout(timer);
-        };
-    }, [
-        id,
-        duration
-    ]);
-    const Icon = statusIcons[status];
-    const animationClass = exiting ? 'top' === edge ? exitToTop : exitToBottom : 'top' === edge ? enterFromTop : enterFromBottom;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: `${toastCard({
-            status
-        })} ${animationClass}`,
-        role: "status",
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
-                className: icon,
-                "aria-hidden": "true"
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: body,
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                        className: title,
-                        children: itemTitle
-                    }),
-                    itemDescription ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                        className: description,
-                        children: itemDescription
-                    }) : null
-                ]
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                type: "button",
-                className: closeButton,
-                onClick: ()=>{
-                    dismiss(id);
-                },
-                "aria-label": "Dismiss",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.XIcon, {})
-            })
-        ]
-    });
-};
-const toaster_ToastItemView = ToastItemView;
 function Toaster_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -355,20 +454,36 @@ const emptySnapshot = [];
 const Toaster = ({ position = 'bottom-right' })=>{
     const items = (0, external_react_namespaceObject.useSyncExternalStore)(subscribe, getSnapshot, ()=>emptySnapshot);
     const edge = position.startsWith('top') ? 'top' : 'bottom';
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: stack({
-            position
-        }),
-        children: items.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(toaster_ToastItemView, Toaster_object_spread_props(Toaster_object_spread({}, item), {
-                edge: edge
-            }), item.id))
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_toast_namespaceObject.Provider, {
+        duration: 4000,
+        children: [
+            items.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(toaster_ToasterItem, Toaster_object_spread_props(Toaster_object_spread({}, item), {
+                    edge: edge,
+                    onOpenChange: (open)=>{
+                        if (!open) dismiss(item.id);
+                    }
+                }), item.id)),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toast_namespaceObject.Viewport, {
+                className: viewport({
+                    position
+                })
+            })
+        ]
     });
 };
 Toaster.displayName = 'Toaster';
 const toaster_Toaster = Toaster;
+exports.ToastAction = __webpack_exports__.ToastAction;
+exports.ToastClose = __webpack_exports__.ToastClose;
+exports.ToastDescription = __webpack_exports__.ToastDescription;
+exports.ToastTitle = __webpack_exports__.ToastTitle;
 exports["default"] = __webpack_exports__["default"];
 exports.toast = __webpack_exports__.toast;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ToastAction",
+    "ToastClose",
+    "ToastDescription",
+    "ToastTitle",
     "default",
     "toast"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];

package/dist/cjs/toaster.css

@@ -1,4 +1,4 @@
-@keyframes _1xil9gec {
+@keyframes _1xil9ge7 {
   from {
     opacity: 0;
     transform: translateY(-.5rem);
@@ -10,7 +10,7 @@
   }
 }
 
-@keyframes _1xil9ged {
+@keyframes _1xil9ge8 {
   from {
     opacity: 1;
     transform: translateY(0);
@@ -22,7 +22,7 @@
   }
 }
 
-@keyframes _1xil9gee {
+@keyframes _1xil9ge9 {
   from {
     opacity: 0;
     transform: translateY(.5rem);
@@ -34,7 +34,7 @@
   }
 }
 
-@keyframes _1xil9gef {
+@keyframes _1xil9gea {
   from {
     opacity: 1;
     transform: translateY(0);
@@ -50,7 +50,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;
 }
@@ -87,7 +91,7 @@
   right: var(--vinyasa-space4);
 }
 
-._1xil9ge7 {
+._1xil9geb {
   align-items: flex-start;
   gap: var(--vinyasa-space2);
   padding: var(--vinyasa-space3);
@@ -100,66 +104,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;
@@ -170,7 +174,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/esm/147.css

@@ -1,4 +1,4 @@
-@keyframes _1xil9gec {
+@keyframes _1xil9ge7 {
   from {
     opacity: 0;
     transform: translateY(-.5rem);
@@ -10,7 +10,7 @@
   }
 }
 
-@keyframes _1xil9ged {
+@keyframes _1xil9ge8 {
   from {
     opacity: 1;
     transform: translateY(0);
@@ -22,7 +22,7 @@
   }
 }
 
-@keyframes _1xil9gee {
+@keyframes _1xil9ge9 {
   from {
     opacity: 0;
     transform: translateY(.5rem);
@@ -34,7 +34,7 @@
   }
 }
 
-@keyframes _1xil9gef {
+@keyframes _1xil9gea {
   from {
     opacity: 1;
     transform: translateY(0);
@@ -50,7 +50,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;
 }
@@ -87,7 +91,7 @@
   right: var(--vinyasa-space4);
 }
 
-._1xil9ge7 {
+._1xil9geb {
   align-items: flex-start;
   gap: var(--vinyasa-space2);
   padding: var(--vinyasa-space3);
@@ -100,66 +104,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;
@@ -170,7 +174,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;
+}
+