@shohojdhara/atomix 0.3.7 → 0.3.8

package/src/styles/06-components/_components.data-table.scss

@@ -64,6 +64,13 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    position: relative;
+  }
+
+  &__header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
   }
 
   &__sort-icon {
@@ -76,6 +83,55 @@
     }
   }
 
+  &__column-filter {
+    width: 120px;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    border: 1px solid var(--#{config.$prefix}border-color);
+    border-radius: 4px;
+    background-color: var(--#{config.$prefix}white);
+    color: var(--#{config.$prefix}body-color);
+
+    &:focus {
+      outline: none;
+      border-color: var(--#{config.$prefix}primary);
+    }
+  }
+
+  &__resize-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 4px;
+    height: 100%;
+    cursor: col-resize;
+    background-color: transparent;
+    z-index: 1;
+
+    &:hover {
+      background-color: var(--#{config.$prefix}primary);
+      opacity: 0.5;
+    }
+
+    &:active {
+      background-color: var(--#{config.$prefix}primary);
+      opacity: 1;
+    }
+  }
+
+  &__header-cell {
+    position: relative;
+
+    &--dragging {
+      opacity: 0.5;
+      cursor: move;
+    }
+
+    &--drag-over {
+      border-left: 2px solid var(--#{config.$prefix}primary);
+    }
+  }
+
   // Body cells
   &__cell {
     padding: data-table.$data-table-cell-padding-y data-table.$data-table-cell-padding-x;
@@ -95,6 +151,21 @@
     &[role='button'] {
       cursor: pointer;
     }
+
+    &--selected {
+      @include dynamic-background(rgba(var(--#{config.$prefix}primary-rgb), 0.1));
+    }
+  }
+
+  // Selection cell
+  &__cell--selection {
+    width: 48px;
+    text-align: center;
+    padding: data-table.$data-table-cell-padding-y 0.5rem;
+  }
+
+  &__radio {
+    cursor: pointer;
   }
 
   // Loading state
@@ -143,6 +214,15 @@
   &--loading {
     opacity: 0.7;
   }
+
+  &--sticky-header {
+    thead {
+      position: sticky;
+      top: var(--sticky-header-offset, 0);
+      z-index: 10;
+      @include dynamic-background(var(--#{config.$prefix}data-table-header-bg));
+    }
+  }
 }
 
 // Toolbar
@@ -151,6 +231,21 @@
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1rem;
+  gap: 1rem;
+  flex-wrap: wrap;
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex: 1;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
 }
 
 // Search

package/src/lib/hooks/useThemeTokens.ts

@@ -1,105 +0,0 @@
-import { useContext } from 'react';
-import { ThemeContext } from '../theme/runtime/ThemeContext';
-import { useTheme } from '../theme/runtime/useTheme';
-
-/**
- * Standardized hook for accessing theme tokens in components
- * 
- * Provides consistent access to theme values across all components
- * using either CSS custom properties or theme object values.
- */
-export function useThemeTokens() {
-  const { theme, activeTheme } = useTheme();
-
-  // Helper function to get CSS variable value
-  const getToken = useCallback((tokenName: string, fallback?: string) => {
-    if (typeof window === 'undefined') return fallback || '';
-
-    const cssVarName = `--atomix-${tokenName}`;
-    const computedStyle = getComputedStyle(document.documentElement);
-    return computedStyle.getPropertyValue(cssVarName).trim() || fallback || '';
-  }, []);
-
-  // Helper function to get theme object value
-  const getThemeValue = useCallback((path: string, fallback?: any) => {
-    if (!activeTheme) return fallback;
-
-    // Navigate through nested theme object using dot notation
-    return path.split('.').reduce((obj, key) => obj?.[key], activeTheme) || fallback;
-  }, [activeTheme]);
-
-  // Return unified API for accessing theme values
-  return {
-    theme,
-    activeTheme,
-    getToken,
-    getThemeValue,
-    // Commonly used tokens with fallbacks
-    colors: {
-      primary: getToken('primary', '#3b82f6'),
-      secondary: getToken('secondary', '#10b981'),
-      error: getToken('error', '#ef4444'),
-      success: getToken('success', '#22c55e'),
-      warning: getToken('warning', '#eab308'),
-      info: getToken('info', '#3b82f6'),
-      light: getToken('light', '#f9fafb'),
-      dark: getToken('dark', '#111827'),
-    },
-    spacing: {
-      1: getToken('spacing-1', '0.25rem'),
-      2: getToken('spacing-2', '0.5rem'),
-      3: getToken('spacing-3', '0.75rem'),
-      4: getToken('spacing-4', '1rem'),
-      5: getToken('spacing-5', '1.25rem'),
-      6: getToken('spacing-6', '1.5rem'),
-      8: getToken('spacing-8', '2rem'),
-      10: getToken('spacing-10', '2.5rem'),
-      12: getToken('spacing-12', '3rem'),
-      16: getToken('spacing-16', '4rem'),
-      20: getToken('spacing-20', '5rem'),
-    },
-    borderRadius: {
-      sm: getToken('border-radius-sm', '0.25rem'),
-      md: getToken('border-radius-md', '0.5rem'),
-      lg: getToken('border-radius-lg', '0.75rem'),
-      xl: getToken('border-radius-xl', '1rem'),
-      full: getToken('border-radius-full', '9999px'),
-    },
-    typography: {
-      fontFamily: {
-        sans: getToken('font-sans-serif', 'Inter, system-ui, sans-serif'),
-        serif: getToken('font-serif', 'Georgia, serif'),
-        mono: getToken('font-monospace', 'Fira Code, monospace'),
-      },
-      fontSize: {
-        xs: getToken('font-size-xs', '0.75rem'),
-        sm: getToken('font-size-sm', '0.875rem'),
-        md: getToken('font-size-md', '1rem'),
-        lg: getToken('font-size-lg', '1.125rem'),
-        xl: getToken('font-size-xl', '1.25rem'),
-        '2xl': getToken('font-size-2xl', '1.5rem'),
-        '3xl': getToken('font-size-3xl', '1.875rem'),
-        '4xl': getToken('font-size-4xl', '2.25rem'),
-      },
-      fontWeight: {
-        light: getToken('font-weight-light', '300'),
-        normal: getToken('font-weight-normal', '400'),
-        medium: getToken('font-weight-medium', '500'),
-        semibold: getToken('font-weight-semibold', '600'),
-        bold: getToken('font-weight-bold', '700'),
-      },
-    },
-    shadows: {
-      sm: getToken('box-shadow-sm', '0 1px 2px 0 rgba(0, 0, 0, 0.05)'),
-      md: getToken('box-shadow-md', '0 4px 6px -1px rgba(0, 0, 0, 0.1)'),
-      lg: getToken('box-shadow-lg', '0 10px 15px -3px rgba(0, 0, 0, 0.1)'),
-      xl: getToken('box-shadow-xl', '0 20px 25px -5px rgba(0, 0, 0, 0.1)'),
-      inset: getToken('box-shadow-inset', 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)'),
-    },
-    transitions: {
-      fast: getToken('transition-fast', '150ms'),
-      base: getToken('transition-base', '200ms'),
-      slow: getToken('transition-slow', '300ms'),
-    },
-  };
-}