react-restyle-components 0.4.39 → 0.4.40

package/lib/src/core-components/src/components/Table/elements.js

@@ -1,38 +1,50 @@
-"use strict";import{styled as t,css as r,keyframes as n}from"styled-components";import{tokens as e}from"../../utils/designTokens";const u=n`
+import { styled, css, keyframes } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+// Animations
+const shimmer = keyframes `
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
-`,a=n`
+`;
+const fadeIn = keyframes `
   from { opacity: 0; }
   to { opacity: 1; }
-`,s=n`
+`;
+const spin = keyframes `
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
-`,p=n`
+`;
+const pulse = keyframes `
   0% { transform: scale(1); }
   50% { transform: scale(1.1); }
   100% { transform: scale(1); }
-`,d=n`
+`;
+const countUp = keyframes `
   0% { transform: translateY(100%); opacity: 0; }
   100% { transform: translateY(0); opacity: 1; }
-`,c=n`
+`;
+const countDown = keyframes `
   0% { transform: translateY(-100%); opacity: 0; }
   100% { transform: translateY(0); opacity: 1; }
-`,l=n`
+`;
+const slideIn = keyframes `
   0% { transform: translateX(-20px); opacity: 0; }
   100% { transform: translateX(0); opacity: 1; }
-`;export const TableRoot=t.div`
+`;
+export const TableRoot = styled.div `
   width: 100%;
   font-family: inherit;
   font-size: 14px;
-  color: ${e.onSurface||"#1f2937"};
+  color: ${tokens.onSurface || '#1f2937'};
   background: white;
   border-radius: 8px;
   overflow: hidden;
 
-  ${({$bordered:o})=>o&&r`
-      border: 1px solid ${e.outline||"#e5e7eb"};
+  ${({ $bordered }) => $bordered &&
+    css `
+      border: 1px solid ${tokens.outline || '#e5e7eb'};
     `}
-`,Toolbar=t.div`
+`;
+export const Toolbar = styled.div `
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -40,18 +52,20 @@
   gap: 8px;
   padding: 8px 12px;
   background: white;
-  border-bottom: 1px solid ${e.outline||"#e5e7eb"};
+  border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
 
   @media (max-width: 640px) {
     flex-direction: column;
     align-items: stretch;
   }
-`,ToolbarGroup=t.div`
+`;
+export const ToolbarGroup = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
-`,SearchInput=t.div`
+`;
+export const SearchInput = styled.div `
   position: relative;
   display: flex;
   align-items: center;
@@ -96,7 +110,8 @@
     height: 14px;
     color: #9ca3af;
   }
-`,ToolbarButton=t.button`
+`;
+export const ToolbarButton = styled.button `
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -112,11 +127,11 @@
 
   /* Default gray button style (matching existing TableBootstrap) */
   color: white;
-  background: ${({$active:o})=>o?e.primary||"#3b82f6":"#6b7280"};
+  background: ${({ $active }) => $active ? tokens.primary || '#3b82f6' : '#6b7280'};
   border: none;
 
   &:hover:not(:disabled) {
-    background: ${({$active:o})=>o?e.primary||"#2563eb":"#5b6570"};
+    background: ${({ $active }) => $active ? tokens.primary || '#2563eb' : '#5b6570'};
   }
 
   &:disabled {
@@ -128,14 +143,15 @@
     width: 14px;
     height: 14px;
   }
-`,SelectionIndicator=t.button`
+`;
+export const SelectionIndicator = styled.button `
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 16px;
-  background: ${e.primary||"#3b82f6"};
+  background: ${tokens.primary || '#3b82f6'};
   border-radius: 6px;
-  border: 2px solid ${e.primary||"#3b82f6"};
+  border: 2px solid ${tokens.primary || '#3b82f6'};
   outline: none;
   color: white;
   font-weight: 600;
@@ -143,7 +159,7 @@
   cursor: pointer;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: all 0.2s ease;
-  animation: ${l} 0.3s ease-out;
+  animation: ${slideIn} 0.3s ease-out;
 
   &:hover {
     border-color: white;
@@ -156,9 +172,10 @@
   &:focus-visible {
     border-color: white;
     box-shadow: 0 0 0 3px
-      ${e.primary?`${e.primary}40`:"rgba(59, 130, 246, 0.4)"};
+      ${tokens.primary ? `${tokens.primary}40` : 'rgba(59, 130, 246, 0.4)'};
   }
-`,SelectionCount=t.span`
+`;
+export const SelectionCount = styled.span `
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -172,18 +189,21 @@
   font-size: 14px;
   overflow: hidden;
 
-  ${({$animate:o})=>o==="up"&&r`
+  ${({ $animate }) => $animate === 'up' &&
+    css `
       animation:
-        ${d} 0.3s ease-out,
-        ${p} 0.3s ease-out;
+        ${countUp} 0.3s ease-out,
+        ${pulse} 0.3s ease-out;
     `}
 
-  ${({$animate:o})=>o==="down"&&r`
+  ${({ $animate }) => $animate === 'down' &&
+    css `
       animation:
-        ${c} 0.3s ease-out,
-        ${p} 0.3s ease-out;
+        ${countDown} 0.3s ease-out,
+        ${pulse} 0.3s ease-out;
     `}
-`,SelectionIcon=t.span`
+`;
+export const SelectionIcon = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -194,82 +214,102 @@
     width: 16px;
     height: 16px;
   }
-`,TableWrapper=t.div`
+`;
+export const TableWrapper = styled.div `
   width: 100%;
   overflow-x: auto;
-  overflow-y: ${({$stickyHeader:o})=>o?"auto":"visible"};
-  ${({$maxHeight:o})=>o&&r`
-      max-height: ${typeof o=="number"?`${o}px`:o};
+  overflow-y: ${({ $stickyHeader }) => ($stickyHeader ? 'auto' : 'visible')};
+  ${({ $maxHeight }) => $maxHeight &&
+    css `
+      max-height: ${typeof $maxHeight === 'number'
+        ? `${$maxHeight}px`
+        : $maxHeight};
     `}
-`,StyledTable=t.table`
+`;
+export const StyledTable = styled.table `
   width: 100%;
   border-collapse: collapse;
   table-layout: auto;
 
-  ${({$striped:o})=>o&&r`
+  ${({ $striped }) => $striped &&
+    css `
       tbody tr:nth-child(even) {
-        background: ${e.surface||"#f9fafb"};
-        color: ${e.onSurface||"#1f2937"};
+        background: ${tokens.surface || '#f9fafb'};
+        color: ${tokens.onSurface || '#1f2937'};
       }
     `}
 
-  ${({$hover:o})=>o&&r`
+  ${({ $hover }) => $hover &&
+    css `
       /* Hover effect - skip rows with custom selected style (data-custom-selected attribute) */
       tbody tr:not([data-custom-selected='true']):hover {
         background: #ececec !important;
-        color: ${e.onSurface||"#1f2937"};
+        color: ${tokens.onSurface || '#1f2937'};
       }
     `}
-`,TableHeader=t.thead`
-  ${({$sticky:o})=>o&&r`
+`;
+export const TableHeader = styled.thead `
+  ${({ $sticky }) => $sticky &&
+    css `
       position: sticky;
       top: 0;
       z-index: 10;
     `}
-`,HeaderRow=t.tr`
+`;
+export const HeaderRow = styled.tr `
   background: #6b7280;
-`,HeaderCell=t.th`
-  padding: ${({$compact:o})=>o?"4px 6px":"6px 8px"};
-  text-align: ${({$align:o})=>o};
+`;
+export const HeaderCell = styled.th `
+  padding: ${({ $compact }) => ($compact ? '4px 6px' : '6px 8px')};
+  text-align: ${({ $align }) => $align};
   vertical-align: middle;
   user-select: none;
   white-space: nowrap;
   border-right: 1px solid rgba(255, 255, 255, 0.3);
 
   /* Default styles - only applied when no custom class */
-  ${({$customClass:o})=>!o&&r`
+  ${({ $customClass }) => !$customClass &&
+    css `
       position: relative;
       font-weight: 600;
       font-size: 11px;
       color: white;
       background: #6b7280;
-      border-bottom: 1px solid ${e.outline||"#e5e7eb"};
+      border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
     `}
 
-  ${({$width:o})=>o&&r`
-      width: ${typeof o=="number"?`${o}px`:o};
+  ${({ $width }) => $width &&
+    css `
+      width: ${typeof $width === 'number' ? `${$width}px` : $width};
     `}
 
-  ${({$minWidth:o})=>o&&r`
-      min-width: ${typeof o=="number"?`${o}px`:o};
+  ${({ $minWidth }) => $minWidth &&
+    css `
+      min-width: ${typeof $minWidth === 'number'
+        ? `${$minWidth}px`
+        : $minWidth};
     `}
 
-  ${({$pinned:o,$customClass:i})=>o&&!i&&r`
+  ${({ $pinned, $customClass }) => $pinned &&
+    !$customClass &&
+    css `
       position: sticky;
-      ${o}: 0;
+      ${$pinned}: 0;
       z-index: 11;
     `}
 
   /* Add left border separator when custom class is used (e.g., sticky action column) */
-  ${({$customClass:o})=>o&&r`
+  ${({ $customClass }) => $customClass &&
+    css `
       border-left: 2px solid #d1d5db;
       border-bottom: 2px solid #d1d5db;
     `}
-`,SortIcon=t.span`
+`;
+export const SortIcon = styled.span `
   display: inline-flex;
   flex-direction: column;
   gap: 1px;
-  opacity: ${({$active:o})=>o?1:.5};
+  opacity: ${({ $active }) => ($active ? 1 : 0.5)};
   vertical-align: middle;
 
   svg {
@@ -277,120 +317,143 @@
     height: 8px;
 
     &:first-child {
-      opacity: ${({$active:o,$direction:i})=>o&&i==="asc"?1:.4};
+      opacity: ${({ $active, $direction }) => $active && $direction === 'asc' ? 1 : 0.4};
     }
 
     &:last-child {
-      opacity: ${({$active:o,$direction:i})=>o&&i==="desc"?1:.4};
+      opacity: ${({ $active, $direction }) => $active && $direction === 'desc' ? 1 : 0.4};
     }
   }
-`,FilterRow=t.tr`
+`;
+export const FilterRow = styled.tr `
   background: #6b7280;
-`,FilterCell=t.td`
-  padding: ${({$compact:o})=>o?"2px 4px":"4px 6px"};
+`;
+export const FilterCell = styled.td `
+  padding: ${({ $compact }) => ($compact ? '2px 4px' : '4px 6px')};
   vertical-align: middle;
-  border-bottom: 1px solid ${e.outline||"#e5e7eb"};
-`,FilterInput=t.input`
+  border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
+`;
+export const FilterInput = styled.input `
   width: 100%;
   height: 24px;
   padding: 0 8px;
   font-size: 11px;
-  border: 1px solid ${e.outline||"#e2e8f0"};
+  border: 1px solid ${tokens.outline || '#e2e8f0'};
   border-radius: 3px;
   background: white;
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: ${e.primary||"#94a3b8"};
+    border-color: ${tokens.primary || '#94a3b8'};
   }
 
   &:focus {
     outline: none;
-    border-color: ${e.primary||"#3b82f6"};
+    border-color: ${tokens.primary || '#3b82f6'};
   }
 
   &::placeholder {
-    color: ${e.onSurface?`${e.onSurface}40`:"#9ca3af"};
+    color: ${tokens.onSurface ? `${tokens.onSurface}40` : '#9ca3af'};
   }
-`,FilterSelect=t.select`
+`;
+export const FilterSelect = styled.select `
   width: 100%;
   height: 28px;
   padding: 0 8px;
   font-size: 12px;
-  border: 1px solid ${e.outline||"#d1d5db"};
+  border: 1px solid ${tokens.outline || '#d1d5db'};
   border-radius: 4px;
   background: white;
   cursor: pointer;
 
   &:focus {
     outline: none;
-    border-color: ${e.primary||"#3b82f6"};
+    border-color: ${tokens.primary || '#3b82f6'};
   }
-`,TableBody=t.tbody``,TableRow=t.tr`
+`;
+export const TableBody = styled.tbody ``;
+export const TableRow = styled.tr `
   transition: background 0.15s ease;
-  color: ${e.onSurface||"#1f2937"};
+  color: ${tokens.onSurface || '#1f2937'};
   background: white;
 
   /* Hover effect - only apply when not selected with custom style */
-  ${({$hasCustomSelectedStyle:o})=>!o&&r`
+  ${({ $hasCustomSelectedStyle }) => !$hasCustomSelectedStyle &&
+    css `
       &:hover {
         background: #ececec !important;
       }
     `}
 
   /* Default selected styling - only when no custom style is provided */
-  ${({$selected:o,$hasCustomSelectedStyle:i})=>o&&!i&&r`
-      background: ${e.primary?`${e.primary}10`:"#fef3c7"} !important;
-      color: ${e.onSurface||"#1f2937"};
+  ${({ $selected, $hasCustomSelectedStyle }) => $selected &&
+    !$hasCustomSelectedStyle &&
+    css `
+      background: ${tokens.primary
+        ? `${tokens.primary}10`
+        : '#fef3c7'} !important;
+      color: ${tokens.onSurface || '#1f2937'};
 
       &:hover {
-        background: ${e.primary?`${e.primary}15`:"#fde68a"} !important;
+        background: ${tokens.primary
+        ? `${tokens.primary}15`
+        : '#fde68a'} !important;
       }
     `}
   
-  ${({$clickable:o,$disabled:i})=>o&&!i&&r`
+  ${({ $clickable, $disabled }) => $clickable &&
+    !$disabled &&
+    css `
       cursor: pointer;
     `}
   
-  ${({$disabled:o})=>o&&r`
+  ${({ $disabled }) => $disabled &&
+    css `
       opacity: 0.5;
-      background: ${e.surface||"#e5e7eb"} !important;
-      color: ${e.onSurface||"#1f2937"};
+      background: ${tokens.surface || '#e5e7eb'} !important;
+      color: ${tokens.onSurface || '#1f2937'};
 
       &:hover {
-        background: ${e.surface||"#e5e7eb"} !important;
+        background: ${tokens.surface || '#e5e7eb'} !important;
       }
     `}
-`,TableCell=t.td`
-  padding: ${({$padding:o,$compact:i})=>o||"2px"};
-  text-align: ${({$align:o})=>o};
+`;
+export const TableCell = styled.td `
+  padding: ${({ $padding, $compact }) => $padding || ($compact ? '2px' : '2px')};
+  text-align: ${({ $align }) => $align};
   border-bottom: 1px solid #d1d5db;
   border-right: 1px solid #9ca3af;
   vertical-align: middle;
   font-size: 12px;
 
-  ${({$hasCustomClass:o})=>!o&&r`
-      color: ${e.onSurface||"#1f2937"};
+  ${({ $hasCustomClass }) => !$hasCustomClass &&
+    css `
+      color: ${tokens.onSurface || '#1f2937'};
       background: transparent;
     `}
 
-  ${({$pinned:o,$hasCustomClass:i})=>o&&!i&&r`
+  ${({ $pinned, $hasCustomClass }) => $pinned &&
+    !$hasCustomClass &&
+    css `
       position: sticky;
-      ${o}: 0;
+      ${$pinned}: 0;
       background: white;
       z-index: 1;
     `}
 
   /* Add left border separator when custom class is used (e.g., sticky action column) */
-  ${({$hasCustomClass:o})=>o&&r`
+  ${({ $hasCustomClass }) => $hasCustomClass &&
+    css `
       border-left: 2px solid #d1d5db;
     `}
-`,Checkbox=t.input.attrs({type:"checkbox"})`
+`;
+export const Checkbox = styled.input.attrs({ type: 'checkbox' }) `
   width: 16px;
   height: 16px;
   cursor: pointer;
-  accent-color: ${e.primary||"#3b82f6"};
-`,ExpandButton=t.button`
+  accent-color: ${tokens.primary || '#3b82f6'};
+`;
+export const ExpandButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -404,30 +467,36 @@
   transition: all 0.15s ease;
 
   &:hover {
-    background: ${e.surface||"#f3f4f6"};
+    background: ${tokens.surface || '#f3f4f6'};
   }
 
   svg {
     width: 16px;
     height: 16px;
-    color: ${e.onSurface?`${e.onSurface}70`:"#6b7280"};
+    color: ${tokens.onSurface ? `${tokens.onSurface}70` : '#6b7280'};
     transition: transform 0.2s ease;
-    transform: ${({$expanded:o})=>o?"rotate(90deg)":"rotate(0)"};
+    transform: ${({ $expanded }) => ($expanded ? 'rotate(90deg)' : 'rotate(0)')};
   }
-`,ExpandedRow=t.tr`
-  animation: ${a} 0.2s ease;
-`,ExpandedCell=t.td`
+`;
+export const ExpandedRow = styled.tr `
+  animation: ${fadeIn} 0.2s ease;
+`;
+export const ExpandedCell = styled.td `
   padding: 16px;
-  background: ${e.surface||"#f9fafb"};
-  border-bottom: 1px solid ${e.outline||"#e5e7eb"};
-`,TableFooter=t.tfoot`
-  background: ${e.surface||"#f3f4f6"};
-`,FooterRow=t.tr``,FooterCell=t.td`
-  padding: ${({$compact:o})=>o?"8px 12px":"12px 16px"};
-  text-align: ${({$align:o})=>o};
+  background: ${tokens.surface || '#f9fafb'};
+  border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
+`;
+export const TableFooter = styled.tfoot `
+  background: ${tokens.surface || '#f3f4f6'};
+`;
+export const FooterRow = styled.tr ``;
+export const FooterCell = styled.td `
+  padding: ${({ $compact }) => ($compact ? '8px 12px' : '12px 16px')};
+  text-align: ${({ $align }) => $align};
   font-weight: 600;
-  border-top: 2px solid ${e.outline||"#e5e7eb"};
-`,PaginationWrapper=t.div`
+  border-top: 2px solid ${tokens.outline || '#e5e7eb'};
+`;
+export const PaginationWrapper = styled.div `
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -435,21 +504,24 @@
   gap: 12px;
   padding: 12px 16px;
   background: #6b7280;
-  border-top: 1px solid ${e.outline||"#e5e7eb"};
+  border-top: 1px solid ${tokens.outline || '#e5e7eb'};
   color: white;
 
   @media (max-width: 640px) {
     flex-direction: column;
     align-items: stretch;
   }
-`,PaginationInfo=t.div`
+`;
+export const PaginationInfo = styled.div `
   font-size: 13px;
   color: white;
-`,PaginationControls=t.div`
+`;
+export const PaginationControls = styled.div `
   display: flex;
   align-items: center;
   gap: 4px;
-`,PageButton=t.button`
+`;
+export const PageButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -457,17 +529,17 @@
   height: 32px;
   padding: 0 8px;
   font-size: 13px;
-  font-weight: ${({$active:o})=>o?600:400};
-  color: ${({$active:o})=>"white"};
-  background: ${({$active:o})=>o?e.primary||"#3b82f6":"transparent"};
+  font-weight: ${({ $active }) => ($active ? 600 : 400)};
+  color: ${({ $active }) => ($active ? 'white' : 'white')};
+  background: ${({ $active }) => $active ? tokens.primary || '#3b82f6' : 'transparent'};
   border: 1px solid
-    ${({$active:o})=>o?"transparent":"rgba(255,255,255,0.3)"};
+    ${({ $active }) => ($active ? 'transparent' : 'rgba(255,255,255,0.3)')};
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.15s ease;
 
   &:hover:not(:disabled) {
-    background: ${({$active:o})=>o?e.primary||"#2563eb":"rgba(255,255,255,0.1)"};
+    background: ${({ $active }) => $active ? tokens.primary || '#2563eb' : 'rgba(255,255,255,0.1)'};
   }
 
   &:disabled {
@@ -479,21 +551,23 @@
     width: 16px;
     height: 16px;
   }
-`,PageSizeSelect=t.select`
+`;
+export const PageSizeSelect = styled.select `
   height: 32px;
   padding: 0 24px 0 8px;
   font-size: 13px;
   color: #1f2937;
   background: white;
-  border: 1px solid ${e.outline||"#d1d5db"};
+  border: 1px solid ${tokens.outline || '#d1d5db'};
   border-radius: 4px;
   cursor: pointer;
 
   &:focus {
     outline: none;
-    border-color: ${e.primary||"#3b82f6"};
+    border-color: ${tokens.primary || '#3b82f6'};
   }
-`,QuickJumper=t.div`
+`;
+export const QuickJumper = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -513,20 +587,21 @@
 
     &:focus {
       outline: none;
-      border-color: ${e.primary||"#3b82f6"};
+      border-color: ${tokens.primary || '#3b82f6'};
     }
 
     &::placeholder {
       color: rgba(255, 255, 255, 0.5);
     }
   }
-`,EmptyState=t.div`
+`;
+export const EmptyState = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 48px 24px;
-  color: ${e.onSurface?`${e.onSurface}60`:"#6b7280"};
+  color: ${tokens.onSurface ? `${tokens.onSurface}60` : '#6b7280'};
 
   svg {
     width: 48px;
@@ -538,7 +613,8 @@
   span {
     font-size: 14px;
   }
-`,LoadingOverlay=t.div`
+`;
+export const LoadingOverlay = styled.div `
   position: absolute;
   inset: 0;
   display: flex;
@@ -546,18 +622,22 @@
   justify-content: center;
   background: rgba(255, 255, 255, 0.8);
   z-index: 20;
-`,LoadingSpinner=t.div`
+`;
+export const LoadingSpinner = styled.div `
   width: 32px;
   height: 32px;
-  border: 3px solid ${e.outline||"#e5e7eb"};
-  border-top-color: ${e.primary||"#3b82f6"};
+  border: 3px solid ${tokens.outline || '#e5e7eb'};
+  border-top-color: ${tokens.primary || '#3b82f6'};
   border-radius: 50%;
-  animation: ${s} 0.8s linear infinite;
-`,EditableCell=t.div`
+  animation: ${spin} 0.8s linear infinite;
+`;
+export const EditableCell = styled.div `
   position: relative;
   min-height: 24px;
 
-  ${({$editing:o,$showEditIcon:i=!1})=>!o&&i&&r`
+  ${({ $editing, $showEditIcon = false }) => !$editing &&
+    $showEditIcon &&
+    css `
       &:hover::after {
         content: '✏️';
         position: absolute;
@@ -568,18 +648,20 @@
         opacity: 0.5;
       }
     `}
-`,CellEditor=t.input`
+`;
+export const CellEditor = styled.input `
   width: 100%;
   padding: 4px 8px;
   font-size: inherit;
-  border: 2px solid ${e.primary||"#3b82f6"};
+  border: 2px solid ${tokens.primary || '#3b82f6'};
   border-radius: 4px;
   background: white;
 
   &:focus {
     outline: none;
   }
-`,ColumnTogglePanel=t.div`
+`;
+export const ColumnTogglePanel = styled.div `
   position: absolute;
   top: 100%;
   right: 0;
@@ -587,17 +669,18 @@
   max-height: 400px;
   overflow-y: auto;
   background: white;
-  border: 1px solid ${e.outline||"#e5e7eb"};
+  border: 1px solid ${tokens.outline || '#e5e7eb'};
   border-radius: 8px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   z-index: 100;
-  animation: ${a} 0.15s ease;
-`,ColumnToggleHeader=t.div`
+  animation: ${fadeIn} 0.15s ease;
+`;
+export const ColumnToggleHeader = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  border-bottom: 1px solid ${e.outline||"#e5e7eb"};
+  border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
 
   span {
     font-weight: 600;
@@ -609,57 +692,143 @@
     border: none;
     background: none;
     cursor: pointer;
-    color: ${e.onSurface?`${e.onSurface}60`:"#6b7280"};
+    color: ${tokens.onSurface ? `${tokens.onSurface}60` : '#6b7280'};
 
     &:hover {
-      color: ${e.onSurface||"#1f2937"};
+      color: ${tokens.onSurface || '#1f2937'};
     }
   }
-`,ColumnToggleSearch=t.div`
+`;
+export const ColumnToggleSearch = styled.div `
   padding: 8px 16px;
-  border-bottom: 1px solid ${e.outline||"#e5e7eb"};
+  border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
 
   input {
     width: 100%;
     height: 32px;
     padding: 0 12px;
     font-size: 13px;
-    border: 1px solid ${e.outline||"#d1d5db"};
+    border: 1px solid ${tokens.outline || '#d1d5db'};
     border-radius: 6px;
 
     &:focus {
       outline: none;
-      border-color: ${e.primary||"#3b82f6"};
+      border-color: ${tokens.primary || '#3b82f6'};
     }
   }
-`,ColumnToggleList=t.div`
+`;
+export const ColumnToggleList = styled.div `
   padding: 8px 0;
   max-height: 300px;
   overflow-y: auto;
-`,ColumnToggleItem=t.label`
+`;
+export const ColumnToggleItem = styled.label `
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 8px 16px;
-  cursor: pointer;
-  transition: background 0.15s ease;
+  cursor: ${({ $reorderable }) => ($reorderable ? 'grab' : 'pointer')};
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  user-select: none;
 
   &:hover {
-    background: ${e.surface||"#f9fafb"};
+    background: ${tokens.surface || '#f3f4f6'};
   }
 
+  /* Dragging state */
+  ${({ $isDragging }) => $isDragging &&
+    css `
+      opacity: 0.4;
+      transform: scale(0.98);
+      background: ${tokens.primary || '#3b82f6'}10;
+      cursor: grabbing;
+    `}
+
+  /* Drag over state */
+  ${({ $isDragOver }) => $isDragOver &&
+    css `
+      background: ${tokens.primary || '#3b82f6'}15;
+      transform: translateY(2px);
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 8px;
+        right: 8px;
+        height: 2px;
+        background: ${tokens.primary || '#3b82f6'};
+        border-radius: 1px;
+        animation: ${fadeIn} 0.15s ease;
+      }
+    `}
+
   input {
     width: 16px;
     height: 16px;
     cursor: pointer;
-    accent-color: ${e.primary||"#3b82f6"};
+    accent-color: ${tokens.primary || '#3b82f6'};
+    flex-shrink: 0;
   }
 
   span {
     font-size: 13px;
-    color: ${e.onSurface||"#374151"};
+    color: ${tokens.onSurface || '#374151'};
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-`,ResizeHandle=t.div`
+`;
+// Drag handle icon for reorderable items
+export const ColumnToggleDragHandle = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-left: auto;
+  cursor: grab;
+  color: ${tokens.onSurface ? `${tokens.onSurface}40` : '#9ca3af'};
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    color: ${tokens.primary || '#3b82f6'};
+    transform: scale(1.1);
+  }
+
+  &:active {
+    cursor: grabbing;
+    color: ${tokens.primary || '#3b82f6'};
+  }
+
+  ${({ $isDragging }) => $isDragging &&
+    css `
+      color: ${tokens.primary || '#3b82f6'};
+      animation: ${pulse} 0.6s ease-in-out infinite;
+    `}
+
+  /* Grip dots pattern */
+  &::before {
+    content: '⠿';
+    font-size: 14px;
+    letter-spacing: -2px;
+  }
+`;
+// Animated list container
+export const ColumnToggleListAnimated = styled.div `
+  padding: 8px 0;
+  max-height: 300px;
+  overflow-y: auto;
+
+  /* Smooth reorder animation */
+  & > * {
+    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+`;
+export const ResizeHandle = styled.div `
   position: absolute;
   right: 0;
   top: 0;
@@ -669,6 +838,6 @@
   background: transparent;
 
   &:hover {
-    background: ${e.primary||"#3b82f6"};
+    background: ${tokens.primary || '#3b82f6'};
   }
 `;