@starasia/toast 1.0.0

package/dist/toast.umd.js

@@ -0,0 +1,331 @@
+(function(O,w){typeof exports=="object"&&typeof module<"u"?w(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],w):(O=typeof globalThis<"u"?globalThis:O||self,w(O.Toast={},O.React,O.ReactDOM))})(this,function(O,w,Pr){"use strict";var J={exports:{}},W={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ar;function Ar(){if(ar)return W;ar=1;var l=w,a=Symbol.for("react.element"),b=Symbol.for("react.fragment"),y=Object.prototype.hasOwnProperty,p=l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,_={key:!0,ref:!0,__self:!0,__source:!0};function C(E,d,S){var g,x={},P=null,T=null;S!==void 0&&(P=""+S),d.key!==void 0&&(P=""+d.key),d.ref!==void 0&&(T=d.ref);for(g in d)y.call(d,g)&&!_.hasOwnProperty(g)&&(x[g]=d[g]);if(E&&E.defaultProps)for(g in d=E.defaultProps,d)x[g]===void 0&&(x[g]=d[g]);return{$$typeof:a,type:E,key:P,ref:T,props:x,_owner:p.current}}return W.Fragment=b,W.jsx=C,W.jsxs=C,W}var Y={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var or;function Dr(){return or||(or=1,process.env.NODE_ENV!=="production"&&function(){var l=w,a=Symbol.for("react.element"),b=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),_=Symbol.for("react.profiler"),C=Symbol.for("react.provider"),E=Symbol.for("react.context"),d=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),g=Symbol.for("react.suspense_list"),x=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),T=Symbol.for("react.offscreen"),N=Symbol.iterator,Vr="@@iterator";function Xr(r){if(r===null||typeof r!="object")return null;var e=N&&r[N]||r[Vr];return typeof e=="function"?e:null}var L=l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function m(r){{for(var e=arguments.length,n=new Array(e>1?e-1:0),t=1;t<e;t++)n[t-1]=arguments[t];$r("error",r,n)}}function $r(r,e,n){{var t=L.ReactDebugCurrentFrame,s=t.getStackAddendum();s!==""&&(e+="%s",n=n.concat([s]));var u=n.map(function(i){return String(i)});u.unshift("Warning: "+e),Function.prototype.apply.call(console[r],console,u)}}var zr=!1,Gr=!1,Jr=!1,Kr=!1,Hr=!1,sr;sr=Symbol.for("react.module.reference");function Zr(r){return!!(typeof r=="string"||typeof r=="function"||r===y||r===_||Hr||r===p||r===S||r===g||Kr||r===T||zr||Gr||Jr||typeof r=="object"&&r!==null&&(r.$$typeof===P||r.$$typeof===x||r.$$typeof===C||r.$$typeof===E||r.$$typeof===d||r.$$typeof===sr||r.getModuleId!==void 0))}function qr(r,e,n){var t=r.displayName;if(t)return t;var s=e.displayName||e.name||"";return s!==""?n+"("+s+")":n}function ur(r){return r.displayName||"Context"}function j(r){if(r==null)return null;if(typeof r.tag=="number"&&m("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof r=="function")return r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case y:return"Fragment";case b:return"Portal";case _:return"Profiler";case p:return"StrictMode";case S:return"Suspense";case g:return"SuspenseList"}if(typeof r=="object")switch(r.$$typeof){case E:var e=r;return ur(e)+".Consumer";case C:var n=r;return ur(n._context)+".Provider";case d:return qr(r,r.render,"ForwardRef");case x:var t=r.displayName||null;return t!==null?t:j(r.type)||"Memo";case P:{var s=r,u=s._payload,i=s._init;try{return j(i(u))}catch{return null}}}return null}var D=Object.assign,U=0,lr,cr,fr,dr,vr,pr,gr;function mr(){}mr.__reactDisabledLog=!0;function Qr(){{if(U===0){lr=console.log,cr=console.info,fr=console.warn,dr=console.error,vr=console.group,pr=console.groupCollapsed,gr=console.groupEnd;var r={configurable:!0,enumerable:!0,value:mr,writable:!0};Object.defineProperties(console,{info:r,log:r,warn:r,error:r,group:r,groupCollapsed:r,groupEnd:r})}U++}}function re(){{if(U--,U===0){var r={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:D({},r,{value:lr}),info:D({},r,{value:cr}),warn:D({},r,{value:fr}),error:D({},r,{value:dr}),group:D({},r,{value:vr}),groupCollapsed:D({},r,{value:pr}),groupEnd:D({},r,{value:gr})})}U<0&&m("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var K=L.ReactCurrentDispatcher,H;function X(r,e,n){{if(H===void 0)try{throw Error()}catch(s){var t=s.stack.trim().match(/\n( *(at )?)/);H=t&&t[1]||""}return`
+`+H+r}}var Z=!1,$;{var ee=typeof WeakMap=="function"?WeakMap:Map;$=new ee}function br(r,e){if(!r||Z)return"";{var n=$.get(r);if(n!==void 0)return n}var t;Z=!0;var s=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var u;u=K.current,K.current=null,Qr();try{if(e){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(i,[])}catch(R){t=R}Reflect.construct(r,[],i)}else{try{i.call()}catch(R){t=R}r.call(i.prototype)}}else{try{throw Error()}catch(R){t=R}r()}}catch(R){if(R&&t&&typeof R.stack=="string"){for(var o=R.stack.split(`
+`),h=t.stack.split(`
+`),c=o.length-1,f=h.length-1;c>=1&&f>=0&&o[c]!==h[f];)f--;for(;c>=1&&f>=0;c--,f--)if(o[c]!==h[f]){if(c!==1||f!==1)do if(c--,f--,f<0||o[c]!==h[f]){var k=`
+`+o[c].replace(" at new "," at ");return r.displayName&&k.includes("<anonymous>")&&(k=k.replace("<anonymous>",r.displayName)),typeof r=="function"&&$.set(r,k),k}while(c>=1&&f>=0);break}}}finally{Z=!1,K.current=u,re(),Error.prepareStackTrace=s}var M=r?r.displayName||r.name:"",F=M?X(M):"";return typeof r=="function"&&$.set(r,F),F}function ne(r,e,n){return br(r,!1)}function te(r){var e=r.prototype;return!!(e&&e.isReactComponent)}function z(r,e,n){if(r==null)return"";if(typeof r=="function")return br(r,te(r));if(typeof r=="string")return X(r);switch(r){case S:return X("Suspense");case g:return X("SuspenseList")}if(typeof r=="object")switch(r.$$typeof){case d:return ne(r.render);case x:return z(r.type,e,n);case P:{var t=r,s=t._payload,u=t._init;try{return z(u(s),e,n)}catch{}}}return""}var B=Object.prototype.hasOwnProperty,hr={},yr=L.ReactDebugCurrentFrame;function G(r){if(r){var e=r._owner,n=z(r.type,r._source,e?e.type:null);yr.setExtraStackFrame(n)}else yr.setExtraStackFrame(null)}function ae(r,e,n,t,s){{var u=Function.call.bind(B);for(var i in r)if(u(r,i)){var o=void 0;try{if(typeof r[i]!="function"){var h=Error((t||"React class")+": "+n+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof r[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw h.name="Invariant Violation",h}o=r[i](e,i,t,n,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(c){o=c}o&&!(o instanceof Error)&&(G(s),m("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",t||"React class",n,i,typeof o),G(null)),o instanceof Error&&!(o.message in hr)&&(hr[o.message]=!0,G(s),m("Failed %s type: %s",n,o.message),G(null))}}}var oe=Array.isArray;function q(r){return oe(r)}function ie(r){{var e=typeof Symbol=="function"&&Symbol.toStringTag,n=e&&r[Symbol.toStringTag]||r.constructor.name||"Object";return n}}function se(r){try{return Er(r),!1}catch{return!0}}function Er(r){return""+r}function Rr(r){if(se(r))return m("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",ie(r)),Er(r)}var V=L.ReactCurrentOwner,ue={key:!0,ref:!0,__self:!0,__source:!0},wr,_r,Q;Q={};function le(r){if(B.call(r,"ref")){var e=Object.getOwnPropertyDescriptor(r,"ref").get;if(e&&e.isReactWarning)return!1}return r.ref!==void 0}function ce(r){if(B.call(r,"key")){var e=Object.getOwnPropertyDescriptor(r,"key").get;if(e&&e.isReactWarning)return!1}return r.key!==void 0}function fe(r,e){if(typeof r.ref=="string"&&V.current&&e&&V.current.stateNode!==e){var n=j(V.current.type);Q[n]||(m('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',j(V.current.type),r.ref),Q[n]=!0)}}function de(r,e){{var n=function(){wr||(wr=!0,m("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",e))};n.isReactWarning=!0,Object.defineProperty(r,"key",{get:n,configurable:!0})}}function ve(r,e){{var n=function(){_r||(_r=!0,m("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",e))};n.isReactWarning=!0,Object.defineProperty(r,"ref",{get:n,configurable:!0})}}var pe=function(r,e,n,t,s,u,i){var o={$$typeof:a,type:r,key:e,ref:n,props:i,_owner:u};return o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(o,"_self",{configurable:!1,enumerable:!1,writable:!1,value:t}),Object.defineProperty(o,"_source",{configurable:!1,enumerable:!1,writable:!1,value:s}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o};function ge(r,e,n,t,s){{var u,i={},o=null,h=null;n!==void 0&&(Rr(n),o=""+n),ce(e)&&(Rr(e.key),o=""+e.key),le(e)&&(h=e.ref,fe(e,s));for(u in e)B.call(e,u)&&!ue.hasOwnProperty(u)&&(i[u]=e[u]);if(r&&r.defaultProps){var c=r.defaultProps;for(u in c)i[u]===void 0&&(i[u]=c[u])}if(o||h){var f=typeof r=="function"?r.displayName||r.name||"Unknown":r;o&&de(i,f),h&&ve(i,f)}return pe(r,o,h,s,t,V.current,i)}}var rr=L.ReactCurrentOwner,kr=L.ReactDebugCurrentFrame;function I(r){if(r){var e=r._owner,n=z(r.type,r._source,e?e.type:null);kr.setExtraStackFrame(n)}else kr.setExtraStackFrame(null)}var er;er=!1;function nr(r){return typeof r=="object"&&r!==null&&r.$$typeof===a}function xr(){{if(rr.current){var r=j(rr.current.type);if(r)return`
+
+Check the render method of \``+r+"`."}return""}}function me(r){{if(r!==void 0){var e=r.fileName.replace(/^.*[\\\/]/,""),n=r.lineNumber;return`
+
+Check your code at `+e+":"+n+"."}return""}}var Tr={};function be(r){{var e=xr();if(!e){var n=typeof r=="string"?r:r.displayName||r.name;n&&(e=`
+
+Check the top-level render call using <`+n+">.")}return e}}function Cr(r,e){{if(!r._store||r._store.validated||r.key!=null)return;r._store.validated=!0;var n=be(e);if(Tr[n])return;Tr[n]=!0;var t="";r&&r._owner&&r._owner!==rr.current&&(t=" It was passed a child from "+j(r._owner.type)+"."),I(r),m('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',n,t),I(null)}}function Sr(r,e){{if(typeof r!="object")return;if(q(r))for(var n=0;n<r.length;n++){var t=r[n];nr(t)&&Cr(t,e)}else if(nr(r))r._store&&(r._store.validated=!0);else if(r){var s=Xr(r);if(typeof s=="function"&&s!==r.entries)for(var u=s.call(r),i;!(i=u.next()).done;)nr(i.value)&&Cr(i.value,e)}}}function he(r){{var e=r.type;if(e==null||typeof e=="string")return;var n;if(typeof e=="function")n=e.propTypes;else if(typeof e=="object"&&(e.$$typeof===d||e.$$typeof===x))n=e.propTypes;else return;if(n){var t=j(e);ae(n,r.props,"prop",t,r)}else if(e.PropTypes!==void 0&&!er){er=!0;var s=j(e);m("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",s||"Unknown")}typeof e.getDefaultProps=="function"&&!e.getDefaultProps.isReactClassApproved&&m("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function ye(r){{for(var e=Object.keys(r.props),n=0;n<e.length;n++){var t=e[n];if(t!=="children"&&t!=="key"){I(r),m("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",t),I(null);break}}r.ref!==null&&(I(r),m("Invalid attribute `ref` supplied to `React.Fragment`."),I(null))}}var jr={};function Or(r,e,n,t,s,u){{var i=Zr(r);if(!i){var o="";(r===void 0||typeof r=="object"&&r!==null&&Object.keys(r).length===0)&&(o+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var h=me(s);h?o+=h:o+=xr();var c;r===null?c="null":q(r)?c="array":r!==void 0&&r.$$typeof===a?(c="<"+(j(r.type)||"Unknown")+" />",o=" Did you accidentally export a JSX literal instead of a component?"):c=typeof r,m("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",c,o)}var f=ge(r,e,n,s,u);if(f==null)return f;if(i){var k=e.children;if(k!==void 0)if(t)if(q(k)){for(var M=0;M<k.length;M++)Sr(k[M],r);Object.freeze&&Object.freeze(k)}else m("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Sr(k,r)}if(B.call(e,"key")){var F=j(r),R=Object.keys(e).filter(function(xe){return xe!=="key"}),tr=R.length>0?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}";if(!jr[F+tr]){var ke=R.length>0?"{"+R.join(": ..., ")+": ...}":"{}";m(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,tr,F,ke,F),jr[F+tr]=!0}}return r===y?ye(f):he(f),f}}function Ee(r,e,n){return Or(r,e,n,!0)}function Re(r,e,n){return Or(r,e,n,!1)}var we=Re,_e=Ee;Y.Fragment=y,Y.jsx=we,Y.jsxs=_e}()),Y}process.env.NODE_ENV==="production"?J.exports=Ar():J.exports=Dr();var v=J.exports;const Fr=`@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+:root {
+  /* color solid default */
+  --starasia-ui-solid-background-default: #111827;
+  --starasia-ui-solid-color-default: #fff;
+  --starasia-ui-solid-border-default: #e5e7eb;
+
+  /* color outline default */
+  --starasia-ui-outline-background-default: #f9fafb;
+  --starasia-ui-outline-color-default: #111827;
+  --starasia-ui-outline-border-default: #e5e7eb;
+  --starasia-ui-outline-progress-default: #181a19;
+
+  /* color outline red */
+  --starasia-ui-outline-background-danger: #fef2f2;
+  --starasia-ui-outline-color-danger: #dc2626;
+  --starasia-ui-outline-border-danger: #fecaca;
+  --starasia-ui-outline-progress-danger: #181a19;
+  --starasia-ui-outline-progress-danger: #c9184a;
+
+  /* color solid red */
+  --starasia-ui-solid-background-danger: #c9184a;
+  --starasia-ui-solid-color-danger: #fff0f3;
+  --starasia-ui-solid-border-danger: #c9184a;
+
+  /* color outline success */
+  --starasia-ui-outline-background-success: #dcf6ea;
+  --starasia-ui-outline-color-success: #28ac6e;
+  --starasia-ui-outline-border-success: #97e6c1;
+  --starasia-ui-outline-progress-success: #28ac6e;
+
+  /* color solid success */
+  --starasia-ui-solid-background-success: #28ac6e;
+  --starasia-ui-solid-color-success: #dcf6ea;
+  --starasia-ui-solid-border-success: #28ac6e;
+
+  /* color outline info */
+  --starasia-ui-outline-background-info: #e3f2fd;
+  --starasia-ui-outline-color-info: #1976d2;
+  --starasia-ui-outline-border-info: #64b5f6;
+  --starasia-ui-outline-progress-info: #1976d2;
+
+  /* color solid info */
+  --starasia-ui-solid-background-info: #1976d2;
+  --starasia-ui-solid-color-info: #e3f2fd;
+  --starasia-ui-solid-border-info: #1976d2;
+
+  /* color outline warning */
+  --starasia-ui-outline-background-warning: #fdf3e4;
+  --starasia-ui-outline-color-warning: #181a19;
+  --starasia-ui-outline-border-warning: #f4c583;
+  --starasia-ui-outline-progress-warning: #ed9f30;
+
+  /* color solid warning */
+  --starasia-ui-solid-background-warning: #ed9f30;
+  --starasia-ui-solid-color-warning: #fffeff;
+  --starasia-ui-solid-border-warning: #ed9f30;
+
+  /* height */
+  --starasia-ui-h-0-5: 0.125rem; /* 2px */
+}
+/* styling for container */
+.starasia-toast-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--starasia-ui-spacing-xs, 4px);
+  padding: var(--starasia-ui-spacing-sm, 8px);
+  position: fixed;
+  max-height: 100vh;
+  overflow: auto;
+  z-index: 99999;
+}
+.starasia-toast-container-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+.starasia-toast-container-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+.starasia-toast-container-bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.starasia-toast-container-top-right {
+  top: 0;
+  right: 0;
+}
+.starasia-toast-container-top-left {
+  top: 0;
+  left: 0;
+}
+.starasia-toast-container-top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+/* styling for */
+.starasia-toast-item-container {
+  padding: var(--starasia-ui-spacing-lg, 16px);
+  width: max-content;
+  border-radius: var(--starasia-ui-radii-md, 6px);
+  display: flex;
+  align-items: center;
+  gap: var(--starasia-ui-spacing-sm, 8px);
+  border: var(--starasia-ui-border, 1px) solid transparent;
+  font-size: var(--starasia-ui-fontSizes-md, 14px);
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+/* DEFAULT TOAST */
+.starasia-toast-item-container-solid-default {
+  background-color: var(--starasia-ui-solid-background-default);
+  color: var(--starasia-ui-solid-color-default);
+  border-color: var(--starasia-ui-solid-border-default);
+}
+
+.starasia-toast-item-container-outline-default {
+  background-color: var(--starasia-ui-outline-background-default);
+  color: var(--starasia-ui-outline-color-default);
+  border-color: var(--starasia-ui-outline-border-default);
+}
+
+/* DEFAULT DANGER */
+.starasia-toast-item-container-outline-danger {
+  background-color: var(--starasia-ui-outline-background-danger);
+  color: var(--starasia-ui-outline-color-danger);
+  border-color: var(--starasia-ui-outline-border-danger);
+}
+
+.starasia-toast-item-container-solid-danger {
+  background-color: var(--starasia-ui-solid-background-danger);
+  color: var(--starasia-ui-solid-color-danger);
+  border-color: var(--starasia-ui-solid-border-danger);
+}
+
+/* DEFAULT SUCCESS */
+.starasia-toast-item-container-outline-success {
+  background-color: var(--starasia-ui-outline-background-success);
+  color: var(--starasia-ui-outline-color-success);
+  border-color: var(--starasia-ui-outline-border-success);
+}
+
+.starasia-toast-item-container-solid-success {
+  background-color: var(--starasia-ui-solid-background-success);
+  color: var(--starasia-ui-solid-color-success);
+  border-color: var(--starasia-ui-solid-border-success);
+}
+
+/* DEFAULT INFO */
+.starasia-toast-item-container-outline-info {
+  background-color: var(--starasia-ui-outline-background-info);
+  color: var(--starasia-ui-outline-color-info);
+  border-color: var(--starasia-ui-outline-border-info);
+}
+
+.starasia-toast-item-container-solid-info {
+  background-color: var(--starasia-ui-solid-background-info);
+  color: var(--starasia-ui-solid-color-info);
+  border-color: var(--starasia-ui-solid-border-info);
+}
+/* DEFAULT WARNING */
+.starasia-toast-item-container-outline-warning {
+  background-color: var(--starasia-ui-outline-background-warning);
+  color: var(--starasia-ui-outline-color-warning);
+  border-color: var(--starasia-ui-outline-border-warning);
+}
+
+.starasia-toast-item-container-solid-warning {
+  background-color: var(--starasia-ui-solid-background-warning);
+  color: var(--starasia-ui-solid-color-warning);
+  border-color: var(--starasia-ui-solid-border-warning);
+}
+
+/* PROGRESS BAR */
+.starasia-toast-item-progress {
+  height: var(--starasia-ui-h-0-5);
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  /* animation: progressBarr 5s forwards; */
+  animation: progressBarr 5s linear forwards;
+}
+
+.starasia-toast-item-progress-outline-default {
+  background-color: var(--starasia-ui-outline-progress-default);
+}
+.starasia-toast-item-progress-outline-info {
+  background-color: var(--starasia-ui-outline-progress-info);
+}
+.starasia-toast-item-progress-outline-success {
+  background-color: var(--starasia-ui-outline-progress-success);
+}
+.starasia-toast-item-progress-outline-danger {
+  background-color: var(--starasia-ui-outline-progress-danger);
+}
+.starasia-toast-item-progress-outline-warning {
+  background-color: var(--starasia-ui-outline-progress-warning);
+}
+
+/* animation */
+.starasia-toast-item-container-animation-bottom-right {
+  animation: bottomRight 0.375s;
+}
+.starasia-toast-item-container-animation-bottom-left {
+  animation: bottomLeft 0.375s;
+}
+.starasia-toast-item-container-animation-bottom-center {
+  animation: bottomCenter 0.375s;
+}
+.starasia-toast-item-container-animation-top-left {
+  animation: topLeft 0.375s;
+}
+.starasia-toast-item-container-animation-top-right {
+  animation: topRight 0.375s;
+}
+.starasia-toast-item-container-animation-top-center {
+  animation: topCenter 0.375s;
+}
+
+@keyframes bottomRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0.3;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes bottomLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0.3;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes bottomCenter {
+  from {
+    transform: translateY(100%);
+    opacity: 0.3;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes topRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0.3;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes topCenter {
+  from {
+    transform: translateY(-100%);
+    opacity: 0.3;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes topLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0.3;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes progressBarr {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0px;
+  }
+}
+`;let Lr=1;class Ir{constructor(){this.subscribe=a=>(this.subscribers.push(a),()=>{const b=this.subscribers.indexOf(a);this.subscribers.splice(b,1)}),this.publish=a=>{this.subscribers.forEach(b=>b(a))},this.addToast=a=>{this.publish(a),this.toasts=[...this.toasts,a]},this.create=a=>{const{message:b,type:y}=a,p=Lr++;return this.addToast({title:b,type:y,id:p}),p},this.dismiss=a=>(this.subscribers.forEach(b=>b({id:a,dismiss:!0})),a),this.danger=a=>this.create({message:a,type:"danger"}),this.warning=a=>this.create({message:a,type:"warning"}),this.success=a=>this.create({type:"success",message:a}),this.info=a=>this.create({type:"info",message:a}),this.default=a=>this.create({type:"default",message:a}),this.subscribers=[],this.toasts=[]}}const A=new Ir,Mr=Object.assign({success:A.success,info:A.info,default:A.default,danger:A.danger,warning:A.warning}),ir="starasia-toast-styles";(l=>{if(!document.getElementById(ir)){const a=document.createElement("style");a.id=ir,a.textContent=l,document.head.appendChild(a)}})(Fr);const Wr=({type:l="outline",direction:a="bottom-right"})=>{const[b,y]=w.useState([]);return w.useEffect(()=>A.subscribe(p=>{if(p.dismiss){y(_=>_.filter(C=>C.id!==p.id));return}setTimeout(()=>{Pr.flushSync(()=>{y(_=>[p,..._])})})}),[]),v.jsx("div",{className:`starasia-toast-container starasia-toast-container-${a}`,children:b.map(p=>v.jsx(Yr,{data:p,type:l,direction:a},p.id))})},Yr=({data:l,type:a="solid",direction:b})=>{const[y,p]=w.useState(null),[_,C]=w.useState(!1),E=w.useRef(null),d=()=>{const T=setTimeout(()=>{g()},5e3);p(T)},S=()=>{y&&(clearTimeout(y),p(null))},g=()=>{A.dismiss(l.id)};w.useEffect(()=>(_?S():d(),()=>{S()}),[_]),w.useEffect(()=>{const T=E.current,N=()=>{g()};return T&&T.addEventListener("animationend",N),()=>{T&&T.removeEventListener("animationend",N)}},[]);const x=()=>{C(!0),S(),E.current&&(E.current.style.animationPlayState="paused")},P=()=>{C(!1),d(),E.current&&(E.current.style.animationPlayState="running")};return v.jsxs("div",{className:`starasia-toast-item-container starasia-toast-item-container-${a}-${l.type} starasia-toast-item-container-animation-${b}`,onMouseEnter:x,onMouseLeave:P,children:[v.jsx("div",{style:{display:"flex"},children:l.type==="success"?v.jsx(Ur,{style:{color:"inherit"}}):v.jsx(Nr,{style:{color:"inherit"}})}),v.jsx("div",{style:{flex:1},children:l.title}),v.jsx("div",{style:{display:"flex",cursor:"pointer"},onClick:()=>A.dismiss(l.id),children:v.jsx(Br,{style:{color:"inherit"}})}),a==="outline"?v.jsx("div",{ref:E,className:`starasia-toast-item-progress starasia-toast-item-progress-outline-${l.type}`,style:{animation:"progressBarr 5s linear forwards",animationPlayState:_?"paused":"running"}}):null]})},Nr=l=>v.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",...l,children:v.jsx("path",{d:"M12 7.01001V7.00002M12 17L12 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",cursor:"pointer"})}),Ur=l=>v.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...l,children:v.jsx("g",{id:"Curved/Basic-actions-and-state",children:v.jsx("path",{id:"shape",d:"M14.1667 7.5L8.33332 13.3333L5.83328 10.8333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),Br=l=>v.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",...l,children:v.jsx("path",{d:"M19 5L5 19M5.00003 5L19 19",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});O.ToastContainer=Wr,O.toast=Mr,Object.defineProperty(O,Symbol.toStringTag,{value:"Module"})});

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+export interface IToastContainer {
+    type?: "solid" | "outline";
+    direction?: "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "top-center";
+}
+export interface IToastItem {
+    type?: "solid" | "outline";
+    variant?: "default" | "success" | "info" | "danger" | "warning";
+    direction?: IToastContainer["direction"];
+    data: any;
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@starasia/toast",
+  "version": "1.0.0",
+  "description": "toast component for starasia UI",
+  "author": "Prawito Hudoro",
+  "main": "dist/toast.umd.js",
+  "module": "dist/toast.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/*.js",
+    "dist/*.d.ts",
+    "dist/*.map",
+    "dist/*.css"
+  ],
+  "scripts": {
+    "dev": "vite --config vite.config.ts --port 3000",
+    "build": "vite build --config vite.config.ts"
+  },
+  "keywords": [],
+  "license": "ISC",
+  "type": "module",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.16",
+    "@vitejs/plugin-react": "^4.2.1",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vite-plugin-dts": "^3.7.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19"
+  }
+}