@zengrid/core 1.0.1

package/dist/src/features/loading/loading.styles.css

@@ -0,0 +1,413 @@
+/**
+ * Loading Indicator Styles
+ *
+ * Provides styles for 4 loading templates with animations:
+ * 1. Simple - Basic text
+ * 2. Animated - Rotating dots
+ * 3. Modern - Circular loader
+ * 4. Skeleton - Shimmer screen
+ */
+
+/* ========================================
+   Base Loading Styles
+   ======================================== */
+
+.zg-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-size: 14px;
+  color: #333;
+  user-select: none;
+  pointer-events: all;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.zg-loading-active {
+  opacity: 1;
+}
+
+.zg-loading-hiding {
+  opacity: 0;
+}
+
+/* Add backdrop to non-skeleton templates */
+.zg-loading:not(.zg-loading-skeleton)::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(3px);
+  z-index: -1;
+}
+
+/* Position variants */
+.zg-loading-top {
+  align-items: flex-start;
+  padding-top: 20px;
+}
+
+.zg-loading-center {
+  align-items: center;
+}
+
+.zg-loading-bottom {
+  align-items: flex-end;
+  padding-bottom: 20px;
+}
+
+.zg-loading-message {
+  margin-top: 12px;
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .zg-loading {
+    color: #e0e0e0;
+  }
+
+  .zg-loading-message {
+    color: #aaa;
+  }
+}
+
+/* ========================================
+   Template 1: Simple
+   ======================================== */
+
+.zg-loading-simple {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 32px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(4px);
+}
+
+.zg-loading-simple .zg-loading-message {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+@media (prefers-color-scheme: dark) {
+  .zg-loading-simple {
+    background: rgba(42, 42, 42, 0.95);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  }
+}
+
+/* ========================================
+   Template 2: Animated - Rotating Dots
+   ======================================== */
+
+.zg-loading-animated {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 32px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(4px);
+}
+
+.zg-loading-spinner {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+}
+
+.zg-loading-dot {
+  width: 12px;
+  height: 12px;
+  background: #2196f3;
+  border-radius: 50%;
+  animation: zg-dot-bounce 1.4s infinite ease-in-out both;
+}
+
+.zg-loading-dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.zg-loading-dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+.zg-loading-dot:nth-child(3) {
+  animation-delay: 0s;
+}
+
+@keyframes zg-dot-bounce {
+  0%, 80%, 100% {
+    transform: scale(0.6);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .zg-loading-animated {
+    background: rgba(42, 42, 42, 0.95);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  }
+
+  .zg-loading-dot {
+    background: #64b5f6;
+  }
+}
+
+/* ========================================
+   Template 3: Modern - Circular Loader
+   ======================================== */
+
+.zg-loading-modern {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 32px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(4px);
+}
+
+.zg-loading-spinner-circle {
+  width: 48px;
+  height: 48px;
+}
+
+.zg-loading-svg {
+  width: 100%;
+  height: 100%;
+  animation: zg-rotate 2s linear infinite;
+}
+
+.zg-loading-circle-path {
+  stroke: #2196f3;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  animation: zg-dash 1.5s ease-in-out infinite;
+}
+
+@keyframes zg-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes zg-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .zg-loading-modern {
+    background: rgba(42, 42, 42, 0.95);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  }
+
+  .zg-loading-circle-path {
+    stroke: #64b5f6;
+  }
+}
+
+/* ========================================
+   Template 4: Skeleton - Shimmer Screen
+   ======================================== */
+
+.zg-loading-skeleton {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(248, 248, 248, 0.98);
+  padding: 0;
+  box-shadow: none;
+}
+
+.zg-loading-skeleton-grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.zg-loading-skeleton-row {
+  display: flex;
+  height: 32px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.zg-loading-skeleton-cell {
+  flex: 1;
+  min-width: 100px;
+  background: #f5f5f5;
+  border-right: 1px solid #e0e0e0;
+  overflow: hidden;
+  position: relative;
+  padding: 8px;
+}
+
+.zg-loading-skeleton-cell::before {
+  content: '';
+  display: block;
+  height: 12px;
+  background: #e0e0e0;
+  border-radius: 2px;
+  width: 80%;
+}
+
+.zg-loading-skeleton-shimmer {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.8) 50%,
+    transparent 100%
+  );
+  animation: zg-shimmer 1.5s infinite;
+}
+
+@keyframes zg-shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .zg-loading:not(.zg-loading-skeleton)::before {
+    background: rgba(30, 30, 30, 0.85);
+  }
+
+  .zg-loading-skeleton {
+    background: #1e1e1e;
+  }
+
+  .zg-loading-skeleton-row {
+    border-bottom-color: #404040;
+  }
+
+  .zg-loading-skeleton-cell {
+    background: #2a2a2a;
+    border-right-color: #404040;
+  }
+
+  .zg-loading-skeleton-cell::before {
+    background: #404040;
+  }
+
+  .zg-loading-skeleton-shimmer {
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.05) 50%,
+      transparent 100%
+    );
+  }
+}
+
+/* ========================================
+   Responsive Design
+   ======================================== */
+
+@media (max-width: 768px) {
+  .zg-loading-animated,
+  .zg-loading-modern,
+  .zg-loading-simple {
+    padding: 16px;
+  }
+
+  .zg-loading-message {
+    font-size: 13px;
+  }
+
+  .zg-loading-skeleton-grid {
+    padding: 12px;
+  }
+
+  .zg-loading-skeleton-row {
+    gap: 8px;
+  }
+
+  .zg-loading-skeleton-cell {
+    height: 32px;
+  }
+}
+
+/* ========================================
+   Accessibility
+   ======================================== */
+
+/* Screen reader only text */
+.zg-loading[aria-live="polite"]::before {
+  content: attr(aria-label);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .zg-loading,
+  .zg-loading-dot,
+  .zg-loading-svg,
+  .zg-loading-circle-path,
+  .zg-loading-skeleton-shimmer,
+  .zg-loading-progress-fill {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .zg-loading-spinner-circle {
+    opacity: 0.7;
+  }
+}

package/dist/src/features/pagination/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Pagination feature for ZenGrid
+ */
+export { Paginator } from './paginator';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/features/pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/core/src/features/pagination/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/src/features/pagination/pagination.styles.css

@@ -0,0 +1,288 @@
+/**
+ * ZenGrid Pagination Styles
+ * Styles for 5 built-in pagination templates
+ */
+
+/* Base Pagination Styles */
+.zg-pagination {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #fff;
+  border-top: 1px solid #e0e0e0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  user-select: none;
+}
+
+/* Button Styles */
+.zg-pagination-btn {
+  min-width: 32px;
+  height: 32px;
+  padding: 4px 8px;
+  border: 1px solid #d0d0d0;
+  background: #fff;
+  color: #333;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.zg-pagination-btn:hover:not(:disabled) {
+  background: #f5f5f5;
+  border-color: #999;
+}
+
+.zg-pagination-btn:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.zg-pagination-btn-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.zg-pagination-btn-active {
+  background: #2196f3;
+  color: white;
+  border-color: #2196f3;
+}
+
+.zg-pagination-btn-icon {
+  font-size: 18px;
+  padding: 4px;
+  min-width: 28px;
+}
+
+/* Select Styles */
+.zg-pagination-select {
+  padding: 4px 24px 4px 8px;
+  border: 1px solid #d0d0d0;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  height: 32px;
+}
+
+.zg-pagination-select:hover {
+  border-color: #999;
+}
+
+/* Label Styles */
+.zg-pagination-label {
+  color: #666;
+  margin: 0 4px;
+}
+
+/* Info Styles */
+.zg-pagination-info {
+  color: #666;
+  margin-right: 8px;
+}
+
+/* Ellipsis */
+.zg-pagination-ellipsis {
+  padding: 0 4px;
+  color: #999;
+}
+
+/* Input Styles */
+.zg-pagination-input {
+  width: 50px;
+  height: 32px;
+  padding: 4px 8px;
+  border: 1px solid #d0d0d0;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 14px;
+  margin: 0 8px;
+}
+
+.zg-pagination-input:focus {
+  outline: none;
+  border-color: #2196f3;
+}
+
+/* Template 1: Simple */
+.zg-pagination-simple {
+  justify-content: center;
+}
+
+/* Template 2: Material */
+.zg-pagination-material {
+  justify-content: flex-end;
+}
+
+.zg-pagination-size-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-right: 24px;
+}
+
+.zg-pagination-nav {
+  display: flex;
+  gap: 4px;
+}
+
+/* Template 3: Bootstrap */
+.zg-pagination-bootstrap {
+  justify-content: center;
+}
+
+.zg-pagination-list {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 4px;
+}
+
+.zg-pagination-item {
+  display: flex;
+}
+
+.zg-pagination-link {
+  min-width: 36px;
+  height: 36px;
+  padding: 8px 12px;
+  border: 1px solid #dee2e6;
+  background: #fff;
+  color: #0d6efd;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.zg-pagination-link:hover:not(:disabled) {
+  background: #e9ecef;
+  border-color: #0d6efd;
+}
+
+.zg-pagination-item-active .zg-pagination-link {
+  background: #0d6efd;
+  color: white;
+  border-color: #0d6efd;
+}
+
+.zg-pagination-link:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  color: #6c757d;
+}
+
+/* Template 4: Compact */
+.zg-pagination-compact {
+  justify-content: space-between;
+}
+
+.zg-pagination-page-input {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Template 5: Full */
+.zg-pagination-full {
+  justify-content: space-between;
+}
+
+.zg-pagination-section-left,
+.zg-pagination-section-center,
+.zg-pagination-section-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.zg-pagination-section-center {
+  gap: 4px;
+}
+
+.zg-pagination-counter {
+  color: #666;
+  font-weight: 500;
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .zg-pagination {
+    background: #1e1e1e;
+    border-color: #404040;
+  }
+
+  .zg-pagination-btn,
+  .zg-pagination-select,
+  .zg-pagination-input,
+  .zg-pagination-link {
+    background: #2d2d2d;
+    border-color: #404040;
+    color: #e0e0e0;
+  }
+
+  .zg-pagination-btn:hover:not(:disabled),
+  .zg-pagination-select:hover,
+  .zg-pagination-link:hover:not(:disabled) {
+    background: #3d3d3d;
+    border-color: #606060;
+  }
+
+  .zg-pagination-btn-active {
+    background: #1976d2;
+    border-color: #1976d2;
+  }
+
+  .zg-pagination-item-active .zg-pagination-link {
+    background: #1976d2;
+    border-color: #1976d2;
+  }
+
+  .zg-pagination-label,
+  .zg-pagination-info,
+  .zg-pagination-counter {
+    color: #b0b0b0;
+  }
+
+  .zg-pagination-ellipsis {
+    color: #707070;
+  }
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .zg-pagination {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .zg-pagination-full {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .zg-pagination-section-left,
+  .zg-pagination-section-center,
+  .zg-pagination-section-right {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .zg-pagination-info {
+    font-size: 12px;
+  }
+
+  .zg-pagination-btn,
+  .zg-pagination-link {
+    min-width: 28px;
+    height: 28px;
+    padding: 4px 6px;
+    font-size: 12px;
+  }
+}