@rowakit/table 0.1.0

package/src/styles/table.css

@@ -0,0 +1,319 @@
+/**
+ * RowaKit Table Styles
+ * 
+ * Default styles using design tokens.
+ * Import this file in your app to use default styling.
+ */
+
+/* ============================================================================
+ * TABLE CONTAINER
+ * ============================================================================ */
+
+.rowakit-table {
+  width: 100%;
+  font-family: var(--rowakit-font-family);
+  font-size: var(--rowakit-font-size-sm);
+  line-height: var(--rowakit-line-height-normal);
+  color: var(--rowakit-table-body-color);
+  background-color: var(--rowakit-table-bg);
+  
+  /* Enable horizontal scroll on small screens */
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.rowakit-table table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--rowakit-table-bg);
+}
+
+/* ============================================================================
+ * TABLE HEADER
+ * ============================================================================ */
+
+.rowakit-table thead th {
+  text-align: left;
+  padding: var(--rowakit-table-header-padding);
+  border-bottom: var(--rowakit-table-header-border-width) solid var(--rowakit-table-header-border-color);
+  font-weight: var(--rowakit-table-header-font-weight);
+  color: var(--rowakit-table-header-color);
+  background-color: var(--rowakit-table-header-bg);
+  user-select: none;
+  white-space: nowrap;
+}
+
+.rowakit-table thead th[role="button"] {
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.rowakit-table thead th[role="button"]:hover {
+  background-color: var(--rowakit-color-gray-50);
+}
+
+.rowakit-table thead th[role="button"]:focus {
+  outline: 2px solid var(--rowakit-color-primary-500);
+  outline-offset: -2px;
+}
+
+/* ============================================================================
+ * TABLE BODY
+ * ============================================================================ */
+
+.rowakit-table tbody td {
+  padding: var(--rowakit-table-cell-padding);
+  border-bottom: var(--rowakit-border-width) solid var(--rowakit-table-cell-border-color);
+}
+
+.rowakit-table tbody tr:hover {
+  background-color: var(--rowakit-table-row-hover-bg);
+}
+
+.rowakit-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* ============================================================================
+ * LOADING STATE
+ * ============================================================================ */
+
+.rowakit-table-loading {
+  padding: var(--rowakit-spacing-2xl);
+  text-align: center;
+  color: var(--rowakit-state-loading-color);
+}
+
+.rowakit-table-loading-spinner {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid var(--rowakit-color-gray-200);
+  border-top-color: var(--rowakit-color-primary-500);
+  border-radius: 50%;
+  animation: rowakit-spin 0.6s linear infinite;
+}
+
+@keyframes rowakit-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ============================================================================
+ * ERROR STATE
+ * ============================================================================ */
+
+.rowakit-table-error {
+  padding: var(--rowakit-spacing-2xl);
+  text-align: center;
+}
+
+.rowakit-table-error-message {
+  color: var(--rowakit-state-error-color);
+  background-color: var(--rowakit-state-error-bg);
+  padding: var(--rowakit-spacing-md) var(--rowakit-spacing-lg);
+  border-radius: var(--rowakit-border-radius);
+  margin-bottom: var(--rowakit-spacing-lg);
+}
+
+/* ============================================================================
+ * EMPTY STATE
+ * ============================================================================ */
+
+.rowakit-table-empty {
+  padding: var(--rowakit-spacing-2xl);
+  text-align: center;
+  color: var(--rowakit-state-empty-color);
+}
+
+/* ============================================================================
+ * PAGINATION
+ * ============================================================================ */
+
+.rowakit-table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rowakit-pagination-padding);
+  border-top: var(--rowakit-border-width) solid var(--rowakit-pagination-border-color);
+  background-color: var(--rowakit-pagination-bg);
+  gap: var(--rowakit-spacing-lg);
+  flex-wrap: wrap;
+}
+
+.rowakit-table-pagination-left,
+.rowakit-table-pagination-right {
+  display: flex;
+  align-items: center;
+  gap: var(--rowakit-spacing-sm);
+}
+
+.rowakit-table-pagination-center {
+  font-size: var(--rowakit-font-size-sm);
+  color: var(--rowakit-color-gray-500);
+}
+
+.rowakit-table-pagination label {
+  font-size: var(--rowakit-font-size-sm);
+  color: var(--rowakit-color-gray-500);
+}
+
+.rowakit-table-pagination select {
+  padding: var(--rowakit-spacing-xs) var(--rowakit-spacing-sm);
+  border: var(--rowakit-border-width) solid var(--rowakit-color-gray-300);
+  border-radius: var(--rowakit-border-radius);
+  font-size: var(--rowakit-font-size-sm);
+  background-color: var(--rowakit-table-bg);
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.rowakit-table-pagination select:hover {
+  border-color: var(--rowakit-color-gray-400);
+}
+
+.rowakit-table-pagination select:focus {
+  outline: 2px solid var(--rowakit-color-primary-500);
+  outline-offset: 1px;
+  border-color: var(--rowakit-color-primary-500);
+}
+
+.rowakit-table-pagination select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============================================================================
+ * BUTTONS
+ * ============================================================================ */
+
+.rowakit-button {
+  padding: var(--rowakit-button-padding-sm);
+  font-size: var(--rowakit-font-size-sm);
+  font-weight: var(--rowakit-font-weight-medium);
+  border: none;
+  border-radius: var(--rowakit-button-border-radius);
+  cursor: pointer;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+  white-space: nowrap;
+}
+
+.rowakit-button:focus {
+  outline: 2px solid var(--rowakit-color-primary-500);
+  outline-offset: 2px;
+}
+
+.rowakit-button-primary {
+  background-color: var(--rowakit-button-primary-bg);
+  color: var(--rowakit-button-primary-color);
+}
+
+.rowakit-button-primary:hover:not(:disabled) {
+  background-color: var(--rowakit-button-primary-hover-bg);
+}
+
+.rowakit-button-secondary {
+  background-color: var(--rowakit-button-secondary-bg);
+  color: var(--rowakit-button-secondary-color);
+}
+
+.rowakit-button-secondary:hover:not(:disabled) {
+  background-color: var(--rowakit-button-secondary-hover-bg);
+}
+
+.rowakit-button-danger {
+  background-color: var(--rowakit-button-danger-bg);
+  color: var(--rowakit-button-danger-color);
+}
+
+.rowakit-button-danger:hover:not(:disabled) {
+  background-color: var(--rowakit-button-danger-hover-bg);
+}
+
+.rowakit-button:disabled {
+  background-color: var(--rowakit-button-disabled-bg);
+  color: var(--rowakit-button-disabled-color);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.rowakit-button-pagination {
+  padding: var(--rowakit-button-padding);
+}
+
+/* ============================================================================
+ * ACTION BUTTONS
+ * ============================================================================ */
+
+.rowakit-table-actions {
+  display: flex;
+  gap: var(--rowakit-spacing-sm);
+}
+
+/* ============================================================================
+ * MODAL
+ * ============================================================================ */
+
+.rowakit-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--rowakit-modal-backdrop-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--rowakit-z-modal);
+  padding: var(--rowakit-spacing-lg);
+}
+
+.rowakit-modal {
+  background-color: var(--rowakit-modal-bg);
+  padding: var(--rowakit-modal-padding);
+  border-radius: var(--rowakit-modal-border-radius);
+  max-width: 400px;
+  width: 100%;
+  box-shadow: var(--rowakit-modal-shadow);
+}
+
+.rowakit-modal-title {
+  font-size: var(--rowakit-font-size-xl);
+  font-weight: var(--rowakit-font-weight-semibold);
+  margin-bottom: var(--rowakit-spacing-lg);
+  color: var(--rowakit-color-gray-900);
+}
+
+.rowakit-modal-content {
+  margin-bottom: var(--rowakit-spacing-xl);
+  color: var(--rowakit-color-gray-500);
+  font-size: var(--rowakit-font-size-sm);
+}
+
+.rowakit-modal-actions {
+  display: flex;
+  gap: var(--rowakit-spacing-md);
+  justify-content: flex-end;
+}
+
+/* ============================================================================
+ * RESPONSIVE
+ * ============================================================================ */
+
+@media (max-width: 640px) {
+  .rowakit-table-pagination {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--rowakit-spacing-md);
+  }
+  
+  .rowakit-table-pagination-left,
+  .rowakit-table-pagination-center,
+  .rowakit-table-pagination-right {
+    justify-content: center;
+  }
+  
+  .rowakit-modal {
+    max-width: 100%;
+    margin: var(--rowakit-spacing-lg);
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,177 @@
+/**
+ * RowaKit Table Design Tokens
+ * 
+ * CSS variables for customizing table appearance.
+ * Override these in your app to customize the theme.
+ */
+
+:root {
+  /* ============================================================================
+   * COLORS
+   * ============================================================================ */
+  
+  /* Neutral colors */
+  --rowakit-color-gray-50: #f9fafb;
+  --rowakit-color-gray-100: #f3f4f6;
+  --rowakit-color-gray-200: #e5e7eb;
+  --rowakit-color-gray-300: #d1d5db;
+  --rowakit-color-gray-400: #9ca3af;
+  --rowakit-color-gray-500: #6b7280;
+  --rowakit-color-gray-600: #4b5563;
+  --rowakit-color-gray-700: #374151;
+  --rowakit-color-gray-800: #1f2937;
+  --rowakit-color-gray-900: #111827;
+
+  /* Primary colors (blue) */
+  --rowakit-color-primary-50: #eff6ff;
+  --rowakit-color-primary-100: #dbeafe;
+  --rowakit-color-primary-200: #bfdbfe;
+  --rowakit-color-primary-300: #93c5fd;
+  --rowakit-color-primary-400: #60a5fa;
+  --rowakit-color-primary-500: #3b82f6;
+  --rowakit-color-primary-600: #2563eb;
+  --rowakit-color-primary-700: #1d4ed8;
+
+  /* Danger colors (red) */
+  --rowakit-color-danger-50: #fef2f2;
+  --rowakit-color-danger-100: #fee2e2;
+  --rowakit-color-danger-500: #ef4444;
+  --rowakit-color-danger-600: #dc2626;
+
+  /* Success colors (green) */
+  --rowakit-color-success-50: #f0fdf4;
+  --rowakit-color-success-500: #22c55e;
+
+  /* ============================================================================
+   * SPACING
+   * ============================================================================ */
+  
+  --rowakit-spacing-xs: 0.25rem;    /* 4px */
+  --rowakit-spacing-sm: 0.5rem;     /* 8px */
+  --rowakit-spacing-md: 0.75rem;    /* 12px */
+  --rowakit-spacing-lg: 1rem;       /* 16px */
+  --rowakit-spacing-xl: 1.5rem;     /* 24px */
+  --rowakit-spacing-2xl: 2rem;      /* 32px */
+
+  /* ============================================================================
+   * TYPOGRAPHY
+   * ============================================================================ */
+  
+  --rowakit-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  
+  --rowakit-font-size-xs: 0.75rem;     /* 12px */
+  --rowakit-font-size-sm: 0.875rem;    /* 14px */
+  --rowakit-font-size-base: 1rem;      /* 16px */
+  --rowakit-font-size-lg: 1.125rem;    /* 18px */
+  --rowakit-font-size-xl: 1.25rem;     /* 20px */
+
+  --rowakit-font-weight-normal: 400;
+  --rowakit-font-weight-medium: 500;
+  --rowakit-font-weight-semibold: 600;
+  --rowakit-font-weight-bold: 700;
+
+  --rowakit-line-height-tight: 1.25;
+  --rowakit-line-height-normal: 1.5;
+  --rowakit-line-height-relaxed: 1.75;
+
+  /* ============================================================================
+   * BORDERS
+   * ============================================================================ */
+  
+  --rowakit-border-width: 1px;
+  --rowakit-border-width-thick: 2px;
+  --rowakit-border-radius-sm: 0.125rem;   /* 2px */
+  --rowakit-border-radius: 0.25rem;       /* 4px */
+  --rowakit-border-radius-md: 0.375rem;   /* 6px */
+  --rowakit-border-radius-lg: 0.5rem;     /* 8px */
+
+  /* ============================================================================
+   * SHADOWS
+   * ============================================================================ */
+  
+  --rowakit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --rowakit-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --rowakit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --rowakit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --rowakit-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* ============================================================================
+   * TABLE-SPECIFIC TOKENS
+   * ============================================================================ */
+  
+  /* Table container */
+  --rowakit-table-bg: #ffffff;
+  --rowakit-table-border-color: var(--rowakit-color-gray-200);
+  
+  /* Table header */
+  --rowakit-table-header-bg: var(--rowakit-table-bg);
+  --rowakit-table-header-color: var(--rowakit-color-gray-900);
+  --rowakit-table-header-font-weight: var(--rowakit-font-weight-semibold);
+  --rowakit-table-header-border-color: var(--rowakit-color-gray-200);
+  --rowakit-table-header-border-width: var(--rowakit-border-width-thick);
+  --rowakit-table-header-padding: var(--rowakit-spacing-md);
+  
+  /* Table body */
+  --rowakit-table-body-bg: var(--rowakit-table-bg);
+  --rowakit-table-body-color: var(--rowakit-color-gray-900);
+  --rowakit-table-row-hover-bg: var(--rowakit-color-gray-50);
+  --rowakit-table-cell-padding: var(--rowakit-spacing-md);
+  --rowakit-table-cell-border-color: var(--rowakit-color-gray-200);
+  
+  /* Pagination */
+  --rowakit-pagination-bg: var(--rowakit-table-bg);
+  --rowakit-pagination-border-color: var(--rowakit-color-gray-200);
+  --rowakit-pagination-padding: var(--rowakit-spacing-lg);
+  
+  /* Buttons */
+  --rowakit-button-primary-bg: var(--rowakit-color-primary-500);
+  --rowakit-button-primary-color: #ffffff;
+  --rowakit-button-primary-hover-bg: var(--rowakit-color-primary-600);
+  
+  --rowakit-button-secondary-bg: var(--rowakit-color-gray-100);
+  --rowakit-button-secondary-color: var(--rowakit-color-gray-700);
+  --rowakit-button-secondary-hover-bg: var(--rowakit-color-gray-200);
+  
+  --rowakit-button-danger-bg: var(--rowakit-color-danger-500);
+  --rowakit-button-danger-color: #ffffff;
+  --rowakit-button-danger-hover-bg: var(--rowakit-color-danger-600);
+  
+  --rowakit-button-disabled-bg: var(--rowakit-color-gray-200);
+  --rowakit-button-disabled-color: var(--rowakit-color-gray-400);
+  
+  --rowakit-button-padding-sm: var(--rowakit-spacing-xs) var(--rowakit-spacing-sm);
+  --rowakit-button-padding: var(--rowakit-spacing-sm) var(--rowakit-spacing-lg);
+  --rowakit-button-border-radius: var(--rowakit-border-radius);
+  
+  /* States */
+  --rowakit-state-loading-color: var(--rowakit-color-gray-500);
+  --rowakit-state-error-color: var(--rowakit-color-danger-500);
+  --rowakit-state-error-bg: var(--rowakit-color-danger-50);
+  --rowakit-state-empty-color: var(--rowakit-color-gray-500);
+  
+  /* Modal */
+  --rowakit-modal-backdrop-bg: rgba(0, 0, 0, 0.5);
+  --rowakit-modal-bg: #ffffff;
+  --rowakit-modal-border-radius: var(--rowakit-border-radius-lg);
+  --rowakit-modal-shadow: var(--rowakit-shadow-xl);
+  --rowakit-modal-padding: var(--rowakit-spacing-xl);
+  
+  /* Z-index */
+  --rowakit-z-modal: 1000;
+  --rowakit-z-dropdown: 100;
+}
+
+/* ============================================================================
+ * DARK MODE SUPPORT (Optional)
+ * ============================================================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Override colors for dark mode if needed */
+    /* Uncomment and customize as needed:
+    --rowakit-table-bg: #1f2937;
+    --rowakit-table-header-color: #f9fafb;
+    --rowakit-table-body-color: #e5e7eb;
+    */
+  }
+}