donghy 0.0.1

package/dist/cjs/components/common/FloatButton/FloatButton.module.css

@@ -0,0 +1,221 @@
+.root {
+  position: fixed;
+  inset-inline-end: 24px;
+  bottom: 24px;
+  z-index: var(--nv-z-float, 1050);
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  font-size: 14px;
+  line-height: 1;
+  color: var(--nv-color-text, rgba(0,0,0,0.88));
+  background: var(--nv-color-bg-elevated, #fff);
+  box-shadow: var(--nv-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
+  transition:
+    background var(--nv-motion-fast, 100ms) var(--nv-motion-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    color var(--nv-motion-fast, 100ms) var(--nv-motion-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    box-shadow var(--nv-motion-fast, 100ms) var(--nv-motion-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    opacity var(--nv-motion-fast, 100ms) var(--nv-motion-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    transform var(--nv-motion-fast, 100ms) var(--nv-motion-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+}
+
+.root:hover {
+  box-shadow: var(--nv-shadow-lg, 0 8px 30px rgba(0,0,0,0.12));
+}
+
+.root[data-type='primary'] {
+  color: #fff;
+  background: var(--nv-color-primary, #6C5CE7);
+}
+
+.root[data-type='primary']:hover {
+  background: var(--nv-color-primary-hover, #A29BFE);
+}
+
+.root[data-shape='square'] {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--nv-radius-md, 6px);
+}
+
+.root[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.body {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 0;
+}
+
+.content {
+  font-size: 12px;
+  line-height: 1;
+}
+
+.badge {
+  position: absolute;
+  top: -4px;
+  inset-inline-end: -4px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+  border-radius: 9px;
+  background: var(--nv-color-error, #ff4d4f);
+  color: #fff;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.badgeDot {
+  width: 8px;
+  height: 8px;
+  min-width: auto;
+  padding: 0;
+  border-radius: 50%;
+  top: -2px;
+  inset-inline-end: -2px;
+}
+
+/* ─── Tooltip ─── */
+
+.tooltipWrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  border-radius: var(--nv-radius-xs, 2px);
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+  background: var(--nv-color-bg-spotlight, rgba(0,0,0,0.85));
+  color: #fff;
+  pointer-events: none;
+  z-index: var(--nv-z-tooltip, 1070);
+  animation: nvFloatTooltipIn 100ms ease-out;
+}
+
+@keyframes nvFloatTooltipIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+/* ─── BackTop ─── */
+
+.backtop {
+  transition:
+    opacity var(--nv-motion-normal, 200ms) var(--nv-motion-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
+    transform var(--nv-motion-normal, 200ms) var(--nv-motion-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+}
+
+.backtopHidden {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(16px);
+}
+
+/* ─── Group ─── */
+
+.group {
+  position: fixed;
+  inset-inline-end: 24px;
+  bottom: 24px;
+  z-index: var(--nv-z-float, 1050);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+}
+
+.group[data-shape='square'] {
+  gap: 0;
+}
+
+.group[data-placement='top'] {
+  flex-direction: column;
+}
+
+.group[data-placement='bottom'] {
+  flex-direction: column-reverse;
+}
+
+.group[data-placement='left'] {
+  flex-direction: row;
+}
+
+.group[data-placement='right'] {
+  flex-direction: row-reverse;
+}
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+  transition: all var(--nv-motion-normal, 200ms) var(--nv-motion-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+}
+
+.wrapEnter {
+  opacity: 0;
+  max-height: 0;
+}
+
+.wrapEnterActive {
+  opacity: 1;
+  max-height: 300px;
+}
+
+.wrapLeave {
+  opacity: 1;
+  max-height: 300px;
+}
+
+.wrapLeaveActive {
+  opacity: 0;
+  max-height: 0;
+}
+
+.trigger {
+  display: inline-flex;
+}
+
+.rootInGroup {
+  position: static;
+  inset-inline-end: auto;
+  bottom: auto;
+}

package/dist/cjs/components/common/FloatButton/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FloatButton", {
+  enumerable: true,
+  get: function get() {
+    return _FloatButton.FloatButton;
+  }
+});
+Object.defineProperty(exports, "FloatButtonBackTop", {
+  enumerable: true,
+  get: function get() {
+    return _FloatButton.FloatButtonBackTop;
+  }
+});
+Object.defineProperty(exports, "FloatButtonGroup", {
+  enumerable: true,
+  get: function get() {
+    return _FloatButton.FloatButtonGroup;
+  }
+});
+var _FloatButton = require("./FloatButton");