donghy 0.0.1

package/dist/esm/components/display/tour/Tour.module.css

@@ -0,0 +1,318 @@
+.mask {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  pointer-events: auto;
+}
+
+.maskLayer {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.highlight {
+  position: fixed;
+  z-index: 1001;
+  border-radius: var(--nv-radius-xs, 2px);
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
+  pointer-events: none;
+  transition: all 0.3s var(--nv-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+.root {
+  position: fixed;
+  z-index: 1002;
+  animation: tourFadeIn 0.2s var(--nv-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+.section {
+  background: #fff;
+  border-radius: var(--nv-radius-middle, 8px);
+  box-shadow: var(--nv-shadow-large, 0 8px 16px rgba(0, 0, 0, 0.12));
+  min-width: 280px;
+  max-width: 420px;
+  position: relative;
+  font-family: var(--nv-font-family, -apple-system, BlinkMacSystemFont, sans-serif);
+}
+
+.section[data-type='primary'] {
+  background: var(--nv-color-primary, #6C5CE7);
+  color: #fff;
+}
+
+.closeBtn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: rgba(0, 0, 0, 0.45);
+  cursor: pointer;
+  border-radius: var(--nv-radius-xs, 4px);
+  font-size: 14px;
+  line-height: 1;
+  padding: 0;
+  transition: all 0.2s;
+}
+
+.closeBtn:hover {
+  color: rgba(0, 0, 0, 0.88);
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.section[data-type='primary'] .closeBtn {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.section[data-type='primary'] .closeBtn:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.cover {
+  border-radius: var(--nv-radius-middle, 8px) var(--nv-radius-middle, 8px) 0 0;
+  overflow: hidden;
+}
+
+.header {
+  padding: 12px 16px 4px;
+}
+
+.title {
+  font-size: var(--nv-font-size-md, 14px);
+  font-weight: var(--nv-font-weight-semibold, 600);
+  color: rgba(0, 0, 0, 0.88);
+  line-height: var(--nv-line-height-md, 22px);
+}
+
+.section[data-type='primary'] .title {
+  color: #fff;
+}
+
+.description {
+  padding: 4px 16px 12px;
+  font-size: var(--nv-font-size-sm, 12px);
+  color: rgba(0, 0, 0, 0.45);
+  line-height: var(--nv-line-height-sm, 20px);
+}
+
+.section[data-type='primary'] .description {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px 12px;
+}
+
+.indicators {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.indicator {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.15);
+  transition: all 0.2s;
+}
+
+.indicator[data-active] {
+  background: var(--nv-color-primary, #6C5CE7);
+  width: 8px;
+  height: 8px;
+}
+
+.section[data-type='primary'] .indicator {
+  background: rgba(255, 255, 255, 0.35);
+}
+
+.section[data-type='primary'] .indicator[data-active] {
+  background: #fff;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.prevBtn,
+.nextBtn,
+.finishBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 8px;
+  font-size: var(--nv-font-size-sm, 12px);
+  line-height: var(--nv-line-height-sm, 20px);
+  border-radius: var(--nv-radius-xs, 4px);
+  cursor: pointer;
+  font-family: var(--nv-font-family, -apple-system, BlinkMacSystemFont, sans-serif);
+  transition: all 0.2s;
+  border: none;
+}
+
+.prevBtn {
+  background: transparent;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.prevBtn:hover {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.section[data-type='primary'] .prevBtn {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.section[data-type='primary'] .prevBtn:hover {
+  color: #fff;
+}
+
+.nextBtn {
+  background: var(--nv-color-primary, #6C5CE7);
+  color: #fff;
+}
+
+.nextBtn:hover {
+  opacity: 0.85;
+}
+
+.finishBtn {
+  background: var(--nv-color-primary, #6C5CE7);
+  color: #fff;
+}
+
+.finishBtn:hover {
+  opacity: 0.85;
+}
+
+.section[data-type='primary'] .nextBtn,
+.section[data-type='primary'] .finishBtn {
+  background: #fff;
+  color: var(--nv-color-primary, #6C5CE7);
+}
+
+.section[data-type='primary'] .nextBtn:hover,
+.section[data-type='primary'] .finishBtn:hover {
+  opacity: 0.85;
+}
+
+.arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.arrow[data-placement^="top"] {
+  bottom: -6px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #fff;
+}
+
+.arrow[data-placement="top"] {
+  left: 50%;
+  margin-left: -6px;
+}
+
+.arrow[data-placement="topLeft"] {
+  left: 16px;
+}
+
+.arrow[data-placement="topRight"] {
+  right: 16px;
+}
+
+.arrow[data-placement^="bottom"] {
+  top: -6px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+}
+
+.arrow[data-placement="bottom"] {
+  left: 50%;
+  margin-left: -6px;
+}
+
+.arrow[data-placement="bottomLeft"] {
+  left: 16px;
+}
+
+.arrow[data-placement="bottomRight"] {
+  right: 16px;
+}
+
+.arrow[data-placement^="left"] {
+  right: -6px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid #fff;
+}
+
+.arrow[data-placement="left"] {
+  top: 50%;
+  margin-top: -6px;
+}
+
+.arrow[data-placement="leftTop"] {
+  top: 16px;
+}
+
+.arrow[data-placement="leftBottom"] {
+  bottom: 16px;
+}
+
+.arrow[data-placement^="right"] {
+  left: -6px;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid #fff;
+}
+
+.arrow[data-placement="right"] {
+  top: 50%;
+  margin-top: -6px;
+}
+
+.arrow[data-placement="rightTop"] {
+  top: 16px;
+}
+
+.arrow[data-placement="rightBottom"] {
+  bottom: 16px;
+}
+
+.section[data-type='primary'] + .arrow[data-placement^="top"],
+.arrow[data-placement^="top"] {
+  border-top-color: var(--nv-color-primary, #6C5CE7);
+}
+
+.section[data-type='primary'] ~ .arrow[data-placement^="bottom"],
+.arrow[data-placement^="bottom"] {
+  border-bottom-color: var(--nv-color-primary, #6C5CE7);
+}
+
+@keyframes tourFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/esm/components/display/tour/index.js

@@ -0,0 +1 @@
+export { Tour } from "./Tour";