@moontra/moonui-pro 2.5.13 → 2.5.14

package/dist/index.mjs

@@ -1751,7 +1751,7 @@ function styleInject(css2, { insertAt } = {}) {
 }
 
 // src/styles/index.css
-styleInject('.chart-animate-in {\n  animation: chartFadeIn 0.5s ease-out;\n}\n.chart-point-pulse {\n  animation: pointPulse 2s ease-in-out infinite;\n}\n.chart-gradient-shift {\n  animation: gradientShift 3s ease-in-out infinite;\n}\n.recharts-tooltip-wrapper {\n  outline: none !important;\n}\n.recharts-tooltip-cursor {\n  fill: hsl(var(--muted) / 0.1);\n}\n.recharts-legend-item {\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.recharts-legend-item:hover {\n  transform: translateY(-1px);\n}\n.recharts-line-curve,\n.recharts-area-curve {\n  transition: all 0.3s ease;\n}\n.recharts-bar-rectangle {\n  transition: all 0.2s ease;\n}\n.recharts-bar-rectangle:hover {\n  filter: brightness(1.1);\n}\n.recharts-pie-sector {\n  transition: all 0.2s ease;\n  cursor: pointer;\n}\n.recharts-pie-sector:hover {\n  filter: brightness(1.1);\n  transform: scale(1.02);\n}\n.recharts-brush {\n  fill: hsl(var(--primary) / 0.1);\n  stroke: hsl(var(--primary) / 0.3);\n}\n.recharts-brush-slide {\n  fill: hsl(var(--primary) / 0.2);\n  fill-opacity: 0.5;\n}\n.recharts-cartesian-grid-horizontal line,\n.recharts-cartesian-grid-vertical line {\n  stroke-dasharray: 3 3;\n  opacity: 0.3;\n}\n.recharts-xAxis .recharts-cartesian-axis-tick-value,\n.recharts-yAxis .recharts-cartesian-axis-tick-value {\n  fill: hsl(var(--muted-foreground));\n  font-size: 11px;\n}\n.dark .recharts-tooltip-wrapper {\n  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));\n}\n.dark .recharts-cartesian-grid-horizontal line,\n.dark .recharts-cartesian-grid-vertical line {\n  opacity: 0.2;\n}\n.sparkline-chart .recharts-surface {\n  overflow: visible !important;\n}\n@keyframes chartSkeletonPulse {\n  0%, 100% {\n    opacity: 0.5;\n    transform: scaleY(0.8);\n  }\n  50% {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n}\n@keyframes chartFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes pointPulse {\n  0%, 100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.2);\n    opacity: 0.8;\n  }\n}\n@keyframes gradientShift {\n  0%, 100% {\n    stop-opacity: 0.8;\n  }\n  50% {\n    stop-opacity: 0.4;\n  }\n}\n.chart-legend-item {\n  position: relative;\n  overflow: hidden;\n}\n.chart-legend-item::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.1), transparent);\n  transition: left 0.5s ease;\n}\n.chart-legend-item:hover::before {\n  left: 100%;\n}\n.chart-crosshair {\n  stroke: hsl(var(--muted-foreground));\n  stroke-width: 1;\n  stroke-dasharray: 5 5;\n  opacity: 0.5;\n}\n.chart-minimap {\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  background: hsl(var(--background) / 0.8);\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(8px);\n}\n.chart-export-menu {\n  animation: slideDown 0.2s ease-out;\n}\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.chart-zoom-indicator {\n  background: hsl(var(--background) / 0.9);\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(8px);\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-full);\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n}\n.recharts-surface {\n  will-change: transform;\n}\n.recharts-line,\n.recharts-area,\n.recharts-bar {\n  will-change: opacity, transform;\n}\n@media (max-width: 640px) {\n  .recharts-wrapper {\n    font-size: 0.875rem;\n  }\n  .recharts-legend-wrapper {\n    margin-top: 1rem !important;\n  }\n}\n@media print {\n  .chart-controls {\n    display: none !important;\n  }\n  .recharts-tooltip-wrapper {\n    display: none !important;\n  }\n}\n.react-grid-layout {\n  position: relative;\n  transition: height 200ms ease;\n}\n.react-grid-item {\n  transition: all 200ms ease;\n  transition-property:\n    left,\n    top,\n    width,\n    height;\n}\n.react-grid-item img {\n  pointer-events: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n.react-grid-item.cssTransforms {\n  transition-property:\n    transform,\n    width,\n    height;\n}\n.react-grid-item.resizing {\n  transition: none;\n  z-index: 1;\n  will-change: width, height;\n}\n.react-grid-item.react-draggable-dragging {\n  transition: none;\n  z-index: 3;\n  will-change: transform;\n}\n.react-grid-item.dropping {\n  visibility: hidden;\n}\n.react-grid-item.react-grid-placeholder {\n  background: red;\n  opacity: 0.2;\n  transition-duration: 100ms;\n  z-index: 2;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -o-user-select: none;\n  user-select: none;\n}\n.react-grid-item.react-grid-placeholder.placeholder-resizing {\n  transition: none;\n}\n.react-grid-item > .react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n}\n.react-grid-item > .react-resizable-handle::after {\n  content: "";\n  position: absolute;\n  right: 3px;\n  bottom: 3px;\n  width: 5px;\n  height: 5px;\n  border-right: 2px solid rgba(0, 0, 0, 0.4);\n  border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n}\n.react-resizable-hide > .react-resizable-handle {\n  display: none;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-w,\n.react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-n,\n.react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n.react-resizable {\n  position: relative;\n}\n.react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-repeat: no-repeat;\n  background-origin: content-box;\n  box-sizing: border-box;\n  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);\n  background-position: bottom right;\n  padding: 0 3px 3px 0;\n}\n.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-resizable-handle-w,\n.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-resizable-handle-n,\n.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n.react-grid-layout {\n  position: relative !important;\n  transition: height 200ms ease;\n}\n.react-grid-item {\n  transition: all 200ms ease;\n  transition-property:\n    left,\n    top,\n    width,\n    height;\n}\n.react-grid-item > div {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.react-grid-item.cssTransforms {\n  transition-property:\n    transform,\n    width,\n    height;\n}\n.react-grid-item.resizing {\n  transition: none;\n  z-index: 1;\n  will-change: width, height;\n}\n.react-grid-item.react-draggable-dragging {\n  transition: none;\n  z-index: 3;\n  will-change: transform;\n}\n@media (max-width: 768px) {\n  .react-grid-layout {\n    overflow-x: hidden !important;\n    height: auto !important;\n  }\n  .react-grid-item {\n    position: relative !important;\n    transform: none !important;\n    margin-bottom: 24px !important;\n    width: 100% !important;\n    left: 0 !important;\n    right: 0 !important;\n  }\n  .react-grid-item:last-child {\n    margin-bottom: 0 !important;\n  }\n  .react-grid-item.cssTransforms {\n    position: relative !important;\n    transform: none !important;\n  }\n  .react-grid-placeholder {\n    display: none !important;\n  }\n}\n');
+styleInject('.chart-animate-in {\n  animation: chartFadeIn 0.5s ease-out;\n}\n.chart-point-pulse {\n  animation: pointPulse 2s ease-in-out infinite;\n}\n.chart-gradient-shift {\n  animation: gradientShift 3s ease-in-out infinite;\n}\n.recharts-tooltip-wrapper {\n  outline: none !important;\n}\n.recharts-tooltip-cursor {\n  fill: hsl(var(--muted) / 0.1);\n}\n.recharts-legend-item {\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.recharts-legend-item:hover {\n  transform: translateY(-1px);\n}\n.recharts-line-curve,\n.recharts-area-curve {\n  transition: all 0.3s ease;\n}\n.recharts-bar-rectangle {\n  transition: all 0.2s ease;\n}\n.recharts-bar-rectangle:hover {\n  filter: brightness(1.1);\n}\n.recharts-pie-sector {\n  transition: all 0.2s ease;\n  cursor: pointer;\n}\n.recharts-pie-sector:hover {\n  filter: brightness(1.1);\n  transform: scale(1.02);\n}\n.recharts-brush {\n  fill: hsl(var(--primary) / 0.1);\n  stroke: hsl(var(--primary) / 0.3);\n}\n.recharts-brush-slide {\n  fill: hsl(var(--primary) / 0.2);\n  fill-opacity: 0.5;\n}\n.recharts-cartesian-grid-horizontal line,\n.recharts-cartesian-grid-vertical line {\n  stroke-dasharray: 3 3;\n  opacity: 0.3;\n}\n.recharts-xAxis .recharts-cartesian-axis-tick-value,\n.recharts-yAxis .recharts-cartesian-axis-tick-value {\n  fill: hsl(var(--muted-foreground));\n  font-size: 11px;\n}\n.dark .recharts-tooltip-wrapper {\n  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));\n}\n.dark .recharts-cartesian-grid-horizontal line,\n.dark .recharts-cartesian-grid-vertical line {\n  opacity: 0.2;\n}\n.sparkline-chart .recharts-surface {\n  overflow: visible !important;\n}\n@keyframes chartSkeletonPulse {\n  0%, 100% {\n    opacity: 0.5;\n    transform: scaleY(0.8);\n  }\n  50% {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n}\n@keyframes chartFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes pointPulse {\n  0%, 100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.2);\n    opacity: 0.8;\n  }\n}\n@keyframes gradientShift {\n  0%, 100% {\n    stop-opacity: 0.8;\n  }\n  50% {\n    stop-opacity: 0.4;\n  }\n}\n.chart-legend-item {\n  position: relative;\n  overflow: hidden;\n}\n.chart-legend-item::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.1), transparent);\n  transition: left 0.5s ease;\n}\n.chart-legend-item:hover::before {\n  left: 100%;\n}\n.chart-crosshair {\n  stroke: hsl(var(--muted-foreground));\n  stroke-width: 1;\n  stroke-dasharray: 5 5;\n  opacity: 0.5;\n}\n.chart-minimap {\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  background: hsl(var(--background) / 0.8);\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(8px);\n}\n.chart-export-menu {\n  animation: slideDown 0.2s ease-out;\n}\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.chart-zoom-indicator {\n  background: hsl(var(--background) / 0.9);\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(8px);\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-full);\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n}\n.recharts-surface {\n  will-change: transform;\n}\n.recharts-line,\n.recharts-area,\n.recharts-bar {\n  will-change: opacity, transform;\n}\n@media (max-width: 640px) {\n  .recharts-wrapper {\n    font-size: 0.875rem;\n  }\n  .recharts-legend-wrapper {\n    margin-top: 1rem !important;\n  }\n}\n@media print {\n  .chart-controls {\n    display: none !important;\n  }\n  .recharts-tooltip-wrapper {\n    display: none !important;\n  }\n}\n.moonui-calendar {\n  --calendar-cell-size: 2.25rem;\n  --calendar-cell-size-sm: 2rem;\n}\n@media (max-width: 640px) {\n  .moonui-calendar {\n    --calendar-cell-size: var(--calendar-cell-size-sm);\n  }\n  .moonui-calendar .months {\n    flex-direction: column !important;\n  }\n  .moonui-calendar .rdp-cell,\n  .moonui-calendar .rdp-day {\n    width: var(--calendar-cell-size) !important;\n    height: var(--calendar-cell-size) !important;\n  }\n}\n.moonui-calendar .rdp-head_cell {\n  width: var(--calendar-cell-size);\n  height: var(--calendar-cell-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.75rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  color: var(--muted-foreground);\n}\n.moonui-calendar .rdp-tbody {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.moonui-calendar .rdp-row {\n  display: flex;\n  gap: 0.25rem;\n  margin: 0;\n}\n.moonui-calendar .rdp-cell {\n  width: var(--calendar-cell-size);\n  height: var(--calendar-cell-size);\n  padding: 0;\n  text-align: center;\n}\n.moonui-calendar .rdp-day {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.375rem;\n  font-size: 0.875rem;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.moonui-calendar .rdp-day_range_middle {\n  border-radius: 0 !important;\n  background-color: var(--accent);\n  color: var(--accent-foreground);\n}\n.moonui-calendar .rdp-day_range_start {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n}\n.moonui-calendar .rdp-day_range_end {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n@media (max-width: 640px) {\n  .time-range-popover {\n    max-width: calc(100vw - 2rem) !important;\n  }\n  .time-range-popover .preset-column {\n    border-right: none !important;\n    border-bottom: 1px solid var(--border) !important;\n    min-width: 100% !important;\n  }\n}\n.react-grid-layout {\n  position: relative;\n  transition: height 200ms ease;\n}\n.react-grid-item {\n  transition: all 200ms ease;\n  transition-property:\n    left,\n    top,\n    width,\n    height;\n}\n.react-grid-item img {\n  pointer-events: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n.react-grid-item.cssTransforms {\n  transition-property:\n    transform,\n    width,\n    height;\n}\n.react-grid-item.resizing {\n  transition: none;\n  z-index: 1;\n  will-change: width, height;\n}\n.react-grid-item.react-draggable-dragging {\n  transition: none;\n  z-index: 3;\n  will-change: transform;\n}\n.react-grid-item.dropping {\n  visibility: hidden;\n}\n.react-grid-item.react-grid-placeholder {\n  background: red;\n  opacity: 0.2;\n  transition-duration: 100ms;\n  z-index: 2;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -o-user-select: none;\n  user-select: none;\n}\n.react-grid-item.react-grid-placeholder.placeholder-resizing {\n  transition: none;\n}\n.react-grid-item > .react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n}\n.react-grid-item > .react-resizable-handle::after {\n  content: "";\n  position: absolute;\n  right: 3px;\n  bottom: 3px;\n  width: 5px;\n  height: 5px;\n  border-right: 2px solid rgba(0, 0, 0, 0.4);\n  border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n}\n.react-resizable-hide > .react-resizable-handle {\n  display: none;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-w,\n.react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-n,\n.react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n.react-resizable {\n  position: relative;\n}\n.react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-repeat: no-repeat;\n  background-origin: content-box;\n  box-sizing: border-box;\n  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);\n  background-position: bottom right;\n  padding: 0 3px 3px 0;\n}\n.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-resizable-handle-w,\n.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-resizable-handle-n,\n.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n.react-grid-layout {\n  position: relative !important;\n  transition: height 200ms ease;\n}\n.react-grid-item {\n  transition: all 200ms ease;\n  transition-property:\n    left,\n    top,\n    width,\n    height;\n}\n.react-grid-item > div {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.react-grid-item.cssTransforms {\n  transition-property:\n    transform,\n    width,\n    height;\n}\n.react-grid-item.resizing {\n  transition: none;\n  z-index: 1;\n  will-change: width, height;\n}\n.react-grid-item.react-draggable-dragging {\n  transition: none;\n  z-index: 3;\n  will-change: transform;\n}\n@media (max-width: 768px) {\n  .react-grid-layout {\n    overflow-x: hidden !important;\n    height: auto !important;\n  }\n  .react-grid-item {\n    position: relative !important;\n    transform: none !important;\n    margin-bottom: 24px !important;\n    width: 100% !important;\n    left: 0 !important;\n    right: 0 !important;\n  }\n  .react-grid-item:last-child {\n    margin-bottom: 0 !important;\n  }\n  .react-grid-item.cssTransforms {\n    position: relative !important;\n    transform: none !important;\n  }\n  .react-grid-placeholder {\n    display: none !important;\n  }\n}\n');
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -2550,7 +2550,7 @@ function Calendar({
     DayPicker,
     {
       showOutsideDays,
-      className: cn("p-3", className),
+      className: cn("moonui-calendar p-3", className),
       classNames: {
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
@@ -2563,10 +2563,10 @@ function Calendar({
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
-        table: "w-full border-collapse",
-        head_row: "grid grid-cols-7",
-        head_cell: "text-muted-foreground rounded-md w-9 h-9 font-normal text-[0.8rem] flex items-center justify-center",
-        row: "grid grid-cols-7 gap-1 mt-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex w-full",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           moonUIButtonProVariants({ variant: "ghost" }),
@@ -51461,6 +51461,13 @@ function TimeRangePicker({
   const [isOpen, setIsOpen] = t__default.useState(false);
   const [customRange, setCustomRange] = t__default.useState({});
   const [comparisonEnabled, setComparisonEnabled] = t__default.useState(false);
+  const [isMobile, setIsMobile] = t__default.useState(false);
+  t__default.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
   const currentRange = value || PRESET_RANGES[2].getRange();
   const formatRange = (range) => {
     if (range.preset && range.preset !== "custom") {
@@ -51506,20 +51513,21 @@ function TimeRangePicker({
       MoonUIPopoverContentPro,
       {
         className: cn(
-          "w-auto p-0",
+          "time-range-popover w-auto max-w-[95vw] p-0 overflow-hidden",
           glassmorphism && "bg-background/95 backdrop-blur-md border-white/10"
         ),
         align: "end",
         side: "bottom",
         sideOffset: 4,
+        collisionPadding: 8,
         children: /* @__PURE__ */ jsx(
           motion.div,
           {
             initial: { opacity: 0, y: -10 },
             animate: { opacity: 1, y: 0 },
             transition: { duration: 0.2 },
-            children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
-              showPresets && /* @__PURE__ */ jsxs("div", { className: "border-r p-3", children: [
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row", children: [
+              showPresets && /* @__PURE__ */ jsxs("div", { className: "preset-column border-b sm:border-b-0 sm:border-r p-3 min-w-[140px]", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 pb-2", children: [
                   /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-muted-foreground" }),
                   /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Quick Select" })
@@ -51531,7 +51539,7 @@ function TimeRangePicker({
                     whileTap: { scale: 0.98 },
                     onClick: () => handlePresetSelect(preset),
                     className: cn(
-                      "w-full text-left px-2 py-1.5 text-sm rounded-md transition-colors",
+                      "w-full text-left px-2 py-1.5 text-sm rounded-md transition-colors whitespace-nowrap",
                       "hover:bg-muted",
                       currentRange.preset === preset.value && "bg-primary text-primary-foreground"
                     ),
@@ -51557,7 +51565,7 @@ function TimeRangePicker({
                   /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 text-muted-foreground" }),
                   /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Custom Range" })
                 ] }),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx(
                   Calendar,
                   {
                     mode: "range",
@@ -51566,10 +51574,10 @@ function TimeRangePicker({
                       to: customRange.to
                     },
                     onSelect: (range) => setCustomRange(range || {}),
-                    numberOfMonths: 2,
+                    numberOfMonths: isMobile ? 1 : 2,
                     className: "rounded-md"
                   }
-                ),
+                ) }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-3 px-2", children: [
                   /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: customRange.from && customRange.to && /* @__PURE__ */ jsxs("span", { children: [
                     Math.ceil((customRange.to.getTime() - customRange.from.getTime()) / (1e3 * 60 * 60 * 24)),
@@ -56314,7 +56322,7 @@ var SearchInput = t__default.memo(({
   keyboardShortcuts
 }) => {
   const [localValue, setLocalValue] = useState(initialValue || "");
-  const timeoutRef = useRef();
+  const timeoutRef = useRef(void 0);
   useEffect(() => {
     setLocalValue(initialValue);
   }, [initialValue]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.13",
+  "version": "2.5.14",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/dashboard/time-range-picker.tsx

@@ -107,6 +107,14 @@ export function TimeRangePicker({
   const [isOpen, setIsOpen] = React.useState(false)
   const [customRange, setCustomRange] = React.useState<{ from?: Date; to?: Date }>({})
   const [comparisonEnabled, setComparisonEnabled] = React.useState(false)
+  const [isMobile, setIsMobile] = React.useState(false)
+  
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640)
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
 
   const currentRange = value || PRESET_RANGES[2].getRange() // Default: Last 7 days
 
@@ -157,22 +165,23 @@ export function TimeRangePicker({
       </PopoverTrigger>
       <PopoverContent 
         className={cn(
-          "w-auto p-0",
+          "time-range-popover w-auto max-w-[95vw] p-0 overflow-hidden",
           glassmorphism && "bg-background/95 backdrop-blur-md border-white/10"
         )} 
         align="end"
         side="bottom"
         sideOffset={4}
+        collisionPadding={8}
       >
         <motion.div
           initial={{ opacity: 0, y: -10 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.2 }}
         >
-          <div className="flex">
+          <div className="flex flex-col sm:flex-row">
             {/* Preset'ler */}
             {showPresets && (
-              <div className="border-r p-3">
+              <div className="preset-column border-b sm:border-b-0 sm:border-r p-3 min-w-[140px]">
                 <div className="flex items-center gap-2 px-2 pb-2">
                   <Clock className="h-4 w-4 text-muted-foreground" />
                   <h4 className="text-sm font-medium">Quick Select</h4>
@@ -185,7 +194,7 @@ export function TimeRangePicker({
                       whileTap={{ scale: 0.98 }}
                       onClick={() => handlePresetSelect(preset)}
                       className={cn(
-                        "w-full text-left px-2 py-1.5 text-sm rounded-md transition-colors",
+                        "w-full text-left px-2 py-1.5 text-sm rounded-md transition-colors whitespace-nowrap",
                         "hover:bg-muted",
                         currentRange.preset === preset.value && "bg-primary text-primary-foreground"
                       )}
@@ -219,16 +228,18 @@ export function TimeRangePicker({
                 <h4 className="text-sm font-medium">Custom Range</h4>
               </div>
               
-              <Calendar
-                mode="range"
-                selected={{
-                  from: customRange.from,
-                  to: customRange.to
-                }}
-                onSelect={(range: any) => setCustomRange(range || {})}
-                numberOfMonths={2}
-                className="rounded-md"
-              />
+              <div className="overflow-x-auto">
+                <Calendar
+                  mode="range"
+                  selected={{
+                    from: customRange.from,
+                    to: customRange.to
+                  }}
+                  onSelect={(range: any) => setCustomRange(range || {})}
+                  numberOfMonths={isMobile ? 1 : 2}
+                  className="rounded-md"
+                />
+              </div>
 
               <div className="flex items-center justify-between pt-3 px-2">
                 <div className="text-sm text-muted-foreground">

package/src/components/sidebar/index.tsx

@@ -52,7 +52,7 @@ const SearchInput = React.memo(({
 }) => {
   // Local state to prevent focus loss
   const [localValue, setLocalValue] = useState<string>(initialValue || '')
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>()
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   
   // Update local value when initial value changes from parent
   useEffect(() => {

package/src/components/ui/calendar.tsx

@@ -17,7 +17,7 @@ function Calendar({
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn("moonui-calendar p-3", className)}
       classNames={{
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
@@ -30,11 +30,11 @@ function Calendar({
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
-        table: "w-full border-collapse",
-        head_row: "grid grid-cols-7",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex w-full",
         head_cell:
-          "text-muted-foreground rounded-md w-9 h-9 font-normal text-[0.8rem] flex items-center justify-center",
-        row: "grid grid-cols-7 gap-1 mt-1",
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),

package/src/styles/calendar.css

@@ -0,0 +1,99 @@
+/* Calendar Component Styles */
+.moonui-calendar {
+  --calendar-cell-size: 2.25rem; /* 36px */
+  --calendar-cell-size-sm: 2rem; /* 32px on mobile */
+}
+
+/* Mobile responsive calendar */
+@media (max-width: 640px) {
+  .moonui-calendar {
+    --calendar-cell-size: var(--calendar-cell-size-sm);
+  }
+  
+  /* Stack months vertically on mobile */
+  .moonui-calendar .months {
+    flex-direction: column !important;
+  }
+  
+  /* Adjust cell sizes for mobile */
+  .moonui-calendar .rdp-cell,
+  .moonui-calendar .rdp-day {
+    width: var(--calendar-cell-size) !important;
+    height: var(--calendar-cell-size) !important;
+  }
+}
+
+/* Fix day names alignment */
+.moonui-calendar .rdp-head_cell {
+  width: var(--calendar-cell-size);
+  height: var(--calendar-cell-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
+
+/* Fix calendar grid */
+.moonui-calendar .rdp-tbody {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.moonui-calendar .rdp-row {
+  display: flex;
+  gap: 0.25rem;
+  margin: 0;
+}
+
+.moonui-calendar .rdp-cell {
+  width: var(--calendar-cell-size);
+  height: var(--calendar-cell-size);
+  padding: 0;
+  text-align: center;
+}
+
+.moonui-calendar .rdp-day {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+/* Range selection styles */
+.moonui-calendar .rdp-day_range_middle {
+  border-radius: 0 !important;
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.moonui-calendar .rdp-day_range_start {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.moonui-calendar .rdp-day_range_end {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+/* Popover responsive */
+@media (max-width: 640px) {
+  .time-range-popover {
+    max-width: calc(100vw - 2rem) !important;
+  }
+  
+  .time-range-popover .preset-column {
+    border-right: none !important;
+    border-bottom: 1px solid var(--border) !important;
+    min-width: 100% !important;
+  }
+}

package/src/styles/index.css

@@ -4,6 +4,7 @@
 /* @import "./tokens.css"; */
 /* @import "./design-system.css"; */
 @import "./advanced-chart.css";
+@import "./calendar.css";
 
 /* React Grid Layout - Required for Dashboard component */
 @import "react-grid-layout/css/styles.css";