react-restyle-components 0.4.39 → 0.4.41

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

@@ -1,4 +1,7 @@
-"use strict";import{styled as o,css as t,keyframes as a}from"styled-components";import{tokens as r}from"../../utils/designTokens";const s=a`
+import { styled, css, keyframes } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+// Animations
+const fadeIn = keyframes `
   from {
     opacity: 0;
     transform: translateY(-4px);
@@ -7,30 +10,60 @@
     opacity: 1;
     transform: translateY(0);
   }
-`,p=a`
+`;
+const rotate = keyframes `
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
-`,n={small:{height:28,fontSize:12,padding:"4px 8px",tagHeight:20,iconSize:14},medium:{height:36,fontSize:14,padding:"6px 12px",tagHeight:24,iconSize:16},large:{height:44,fontSize:16,padding:"8px 16px",tagHeight:28,iconSize:18}},d={outlined:t`
+`;
+// Size configurations
+const sizeConfig = {
+    small: {
+        height: 28,
+        fontSize: 12,
+        padding: '4px 8px',
+        tagHeight: 20,
+        iconSize: 14,
+    },
+    medium: {
+        height: 36,
+        fontSize: 14,
+        padding: '6px 12px',
+        tagHeight: 24,
+        iconSize: 16,
+    },
+    large: {
+        height: 44,
+        fontSize: 16,
+        padding: '8px 16px',
+        tagHeight: 28,
+        iconSize: 18,
+    },
+};
+// Variant styles
+const variantStyles = {
+    outlined: css `
     background: white;
-    border: 1px solid ${r.outline||"#d1d5db"};
+    border: 1px solid ${tokens.outline || '#d1d5db'};
     
     &:hover:not([data-disabled="true"]) {
-      border-color: ${r.primary||"#3b82f6"};
+      border-color: ${tokens.primary || '#3b82f6'};
     }
     
     &:focus-within {
-      border-color: ${r.primary||"#3b82f6"};
-      box-shadow: 0 0 0 2px ${r.primary?`${r.primary}20`:"rgba(59, 130, 246, 0.15)"};
+      border-color: ${tokens.primary || '#3b82f6'};
+      box-shadow: 0 0 0 2px ${tokens.primary ? `${tokens.primary}20` : 'rgba(59, 130, 246, 0.15)'};
     }
-  `,borderless:t`
+  `,
+    borderless: css `
     background: transparent;
     border: 1px solid transparent;
     
     &:hover:not([data-disabled="true"]) {
-      background: ${r.surface||"#f9fafb"};
+      background: ${tokens.surface || '#f9fafb'};
     }
-  `,filled:t`
-    background: ${r.surface||"#f3f4f6"};
+  `,
+    filled: css `
+    background: ${tokens.surface || '#f3f4f6'};
     border: 1px solid transparent;
     
     &:hover:not([data-disabled="true"]) {
@@ -39,36 +72,44 @@
     
     &:focus-within {
       background: white;
-      border-color: ${r.primary||"#3b82f6"};
-      box-shadow: 0 0 0 2px ${r.primary?`${r.primary}20`:"rgba(59, 130, 246, 0.15)"};
+      border-color: ${tokens.primary || '#3b82f6'};
+      box-shadow: 0 0 0 2px ${tokens.primary ? `${tokens.primary}20` : 'rgba(59, 130, 246, 0.15)'};
     }
-  `,underlined:t`
+  `,
+    underlined: css `
     background: transparent;
     border: none;
-    border-bottom: 1px solid ${r.outline||"#d1d5db"};
+    border-bottom: 1px solid ${tokens.outline || '#d1d5db'};
     border-radius: 0;
     
     &:hover:not([data-disabled="true"]) {
-      border-bottom-color: ${r.primary||"#3b82f6"};
+      border-bottom-color: ${tokens.primary || '#3b82f6'};
     }
     
     &:focus-within {
-      border-bottom-color: ${r.primary||"#3b82f6"};
+      border-bottom-color: ${tokens.primary || '#3b82f6'};
       border-bottom-width: 2px;
     }
-  `},c={error:t`
-    border-color: ${r.error||"#ef4444"} !important;
+  `,
+};
+// Status styles
+const statusStyles = {
+    error: css `
+    border-color: ${tokens.error || '#ef4444'} !important;
     
     &:focus-within {
-      box-shadow: 0 0 0 2px ${r.error?`${r.error}20`:"rgba(239, 68, 68, 0.15)"};
+      box-shadow: 0 0 0 2px ${tokens.error ? `${tokens.error}20` : 'rgba(239, 68, 68, 0.15)'};
     }
-  `,warning:t`
-    border-color: ${r.warning||"#f59e0b"} !important;
+  `,
+    warning: css `
+    border-color: ${tokens.warning || '#f59e0b'} !important;
     
     &:focus-within {
-      box-shadow: 0 0 0 2px ${r.warning?`${r.warning}20`:"rgba(245, 158, 11, 0.15)"};
+      box-shadow: 0 0 0 2px ${tokens.warning ? `${tokens.warning}20` : 'rgba(245, 158, 11, 0.15)'};
     }
-  `};export const TreeSelectRoot=o.div`
+  `,
+};
+export const TreeSelectRoot = styled.div `
   position: relative;
   display: inline-flex;
   width: 100%;
@@ -79,34 +120,37 @@
     cursor: not-allowed;
     pointer-events: none;
   }
-`,Selector=o.div`
+`;
+export const Selector = styled.div `
   display: flex;
   align-items: center;
-  flex-wrap: ${({$multiple:e})=>e?"wrap":"nowrap"};
+  flex-wrap: ${({ $multiple }) => ($multiple ? 'wrap' : 'nowrap')};
   gap: 4px;
   width: 100%;
-  min-height: ${({$size:e})=>n[e].height}px;
-  padding: ${({$size:e})=>n[e].padding};
-  font-size: ${({$size:e})=>n[e].fontSize}px;
+  min-height: ${({ $size }) => sizeConfig[$size].height}px;
+  padding: ${({ $size }) => sizeConfig[$size].padding};
+  font-size: ${({ $size }) => sizeConfig[$size].fontSize}px;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   box-sizing: border-box;
   
-  ${({$variant:e})=>d[e]}
-  ${({$status:e})=>e&&c[e]}
-`,Prefix=o.span`
+  ${({ $variant }) => variantStyles[$variant]}
+  ${({ $status }) => $status && statusStyles[$status]}
+`;
+export const Prefix = styled.span `
   display: flex;
   align-items: center;
-  color: ${r.onSurface?`${r.onSurface}60`:"#6b7280"};
+  color: ${tokens.onSurface ? `${tokens.onSurface}60` : '#6b7280'};
   margin-right: 8px;
   flex-shrink: 0;
   
   svg {
-    width: ${({$size:e})=>n[e].iconSize}px;
-    height: ${({$size:e})=>n[e].iconSize}px;
+    width: ${({ $size }) => sizeConfig[$size].iconSize}px;
+    height: ${({ $size }) => sizeConfig[$size].iconSize}px;
   }
-`,SearchInput=o.input`
+`;
+export const SearchInput = styled.input `
   flex: 1;
   min-width: 60px;
   border: none;
@@ -114,40 +158,46 @@
   outline: none;
   font-size: inherit;
   font-family: inherit;
-  color: ${r.onSurface||"#1f2937"};
+  color: ${tokens.onSurface || '#1f2937'};
   
   &::placeholder {
-    color: ${r.onSurface?`${r.onSurface}50`:"#9ca3af"};
+    color: ${tokens.onSurface ? `${tokens.onSurface}50` : '#9ca3af'};
   }
-`,Placeholder=o.span`
-  color: ${r.onSurface?`${r.onSurface}50`:"#9ca3af"};
+`;
+export const Placeholder = styled.span `
+  color: ${tokens.onSurface ? `${tokens.onSurface}50` : '#9ca3af'};
   user-select: none;
-`,SelectedValue=o.span`
-  color: ${r.onSurface||"#1f2937"};
+`;
+export const SelectedValue = styled.span `
+  color: ${tokens.onSurface || '#1f2937'};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex: 1;
-`,Tag=o.span`
+`;
+export const Tag = styled.span `
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  height: ${({$size:e})=>n[e].tagHeight}px;
+  height: ${({ $size }) => sizeConfig[$size].tagHeight}px;
   padding: 0 8px;
-  background: ${r.surface||"#f3f4f6"};
+  background: ${tokens.surface || '#f3f4f6'};
   border-radius: 4px;
-  font-size: ${({$size:e})=>n[e].fontSize-2}px;
-  color: ${r.onSurface||"#374151"};
+  font-size: ${({ $size }) => sizeConfig[$size].fontSize - 2}px;
+  color: ${tokens.onSurface || '#374151'};
   max-width: 100%;
   
-  ${({$disabled:e})=>e&&t`
+  ${({ $disabled }) => $disabled &&
+    css `
       opacity: 0.6;
     `}
-`,TagLabel=o.span`
+`;
+export const TagLabel = styled.span `
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`,TagClose=o.button`
+`;
+export const TagClose = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -157,29 +207,31 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  color: ${r.onSurface?`${r.onSurface}60`:"#6b7280"};
+  color: ${tokens.onSurface ? `${tokens.onSurface}60` : '#6b7280'};
   border-radius: 50%;
   transition: all 0.15s ease;
   
   &:hover {
-    background: ${r.outline||"#d1d5db"};
-    color: ${r.onSurface||"#1f2937"};
+    background: ${tokens.outline || '#d1d5db'};
+    color: ${tokens.onSurface || '#1f2937'};
   }
   
   svg {
     width: 10px;
     height: 10px;
   }
-`,MaxTagPlaceholder=o.span`
+`;
+export const MaxTagPlaceholder = styled.span `
   display: inline-flex;
   align-items: center;
-  height: ${({$size:e})=>n[e].tagHeight}px;
+  height: ${({ $size }) => sizeConfig[$size].tagHeight}px;
   padding: 0 8px;
-  background: ${r.surface||"#f3f4f6"};
+  background: ${tokens.surface || '#f3f4f6'};
   border-radius: 4px;
-  font-size: ${({$size:e})=>n[e].fontSize-2}px;
-  color: ${r.onSurface?`${r.onSurface}80`:"#6b7280"};
-`,Suffix=o.span`
+  font-size: ${({ $size }) => sizeConfig[$size].fontSize - 2}px;
+  color: ${tokens.onSurface ? `${tokens.onSurface}80` : '#6b7280'};
+`;
+export const Suffix = styled.span `
   display: flex;
   align-items: center;
   gap: 4px;
@@ -188,24 +240,26 @@
   flex-shrink: 0;
   
   svg {
-    width: ${({$size:e})=>n[e].iconSize}px;
-    height: ${({$size:e})=>n[e].iconSize}px;
-    color: ${r.onSurface?`${r.onSurface}60`:"#6b7280"};
+    width: ${({ $size }) => sizeConfig[$size].iconSize}px;
+    height: ${({ $size }) => sizeConfig[$size].iconSize}px;
+    color: ${tokens.onSurface ? `${tokens.onSurface}60` : '#6b7280'};
     transition: transform 0.2s ease;
   }
-`,ArrowIcon=o.span`
+`;
+export const ArrowIcon = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.2s ease;
-  transform: ${({$open:e})=>e?"rotate(180deg)":"rotate(0deg)"};
+  transform: ${({ $open }) => ($open ? 'rotate(180deg)' : 'rotate(0deg)')};
   
   svg {
     width: 16px;
     height: 16px;
-    color: ${r.onSurface?`${r.onSurface}60`:"#6b7280"};
+    color: ${tokens.onSurface ? `${tokens.onSurface}60` : '#6b7280'};
   }
-`,ClearButton=o.button`
+`;
+export const ClearButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -213,73 +267,103 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  color: ${r.onSurface?`${r.onSurface}50`:"#9ca3af"};
+  color: ${tokens.onSurface ? `${tokens.onSurface}50` : '#9ca3af'};
   border-radius: 50%;
   transition: all 0.15s ease;
   
   &:hover {
-    background: ${r.outline||"#e5e7eb"};
-    color: ${r.onSurface||"#1f2937"};
+    background: ${tokens.outline || '#e5e7eb'};
+    color: ${tokens.onSurface || '#1f2937'};
   }
   
   svg {
     width: 14px;
     height: 14px;
   }
-`,Dropdown=o.div`
+`;
+export const Dropdown = styled.div `
   position: absolute;
-  ${({$placement:e})=>e.startsWith("top")?t`
+  ${({ $placement }) => {
+    if ($placement.startsWith('top')) {
+        return css `
         bottom: 100%;
         margin-bottom: 4px;
-      `:t`
+      `;
+    }
+    return css `
       top: 100%;
       margin-top: 4px;
-    `}
-  ${({$placement:e})=>e.endsWith("Right")?t`right: 0;`:t`left: 0;`}
-  ${({$matchWidth:e})=>e===!0?t`width: 100%;`:typeof e=="number"?t`min-width: ${e}px;`:t`min-width: 200px;`}
-  max-height: ${({$maxHeight:e})=>e}px;
+    `;
+}}
+  ${({ $placement }) => {
+    if ($placement.endsWith('Right')) {
+        return css `right: 0;`;
+    }
+    return css `left: 0;`;
+}}
+  ${({ $matchWidth }) => {
+    if ($matchWidth === true) {
+        return css `width: 100%;`;
+    }
+    if (typeof $matchWidth === 'number') {
+        return css `min-width: ${$matchWidth}px;`;
+    }
+    return css `min-width: 200px;`;
+}}
+  max-height: ${({ $maxHeight }) => $maxHeight}px;
   overflow: auto;
   background: white;
-  border: 1px solid ${r.outline||"#e5e7eb"};
+  border: 1px solid ${tokens.outline || '#e5e7eb'};
   border-radius: 8px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
   z-index: 1050;
-  animation: ${s} 0.15s ease;
-`,TreeContainer=o.div`
+  animation: ${fadeIn} 0.15s ease;
+`;
+export const TreeContainer = styled.div `
   padding: 4px;
   
-  ${({$showLine:e})=>e&&t`
-      --tree-line-color: ${r.outline||"#e5e7eb"};
+  ${({ $showLine }) => $showLine &&
+    css `
+      --tree-line-color: ${tokens.outline || '#e5e7eb'};
     `}
-`,TreeNode=o.div`
+`;
+export const TreeNode = styled.div `
   position: relative;
   display: flex;
   align-items: center;
   padding: 6px 8px;
-  padding-left: ${({$level:e})=>8+e*20}px;
-  cursor: ${({$disabled:e})=>e?"not-allowed":"pointer"};
+  padding-left: ${({ $level }) => 8 + $level * 20}px;
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
   border-radius: 4px;
   transition: background 0.15s ease;
   
-  ${({$disabled:e})=>e&&t`
+  ${({ $disabled }) => $disabled &&
+    css `
       opacity: 0.5;
     `}
   
-  ${({$selected:e})=>e&&t`
-      background: ${r.primary?`${r.primary}10`:"#eff6ff"};
-      color: ${r.primary||"#3b82f6"};
+  ${({ $selected }) => $selected &&
+    css `
+      background: ${tokens.primary ? `${tokens.primary}10` : '#eff6ff'};
+      color: ${tokens.primary || '#3b82f6'};
     `}
   
   &:hover:not([data-disabled="true"]) {
-    background: ${({$selected:e})=>e?r.primary?`${r.primary}15`:"#dbeafe":r.surface||"#f9fafb"};
+    background: ${({ $selected }) => $selected
+    ? tokens.primary
+        ? `${tokens.primary}15`
+        : '#dbeafe'
+    : tokens.surface || '#f9fafb'};
   }
   
   /* Tree lines */
-  ${({$showLine:e,$level:i,$isLeaf:f})=>e&&i>0&&t`
+  ${({ $showLine, $level, $isLeaf }) => $showLine &&
+    $level > 0 &&
+    css `
       &::before {
         content: '';
         position: absolute;
-        left: ${8+(i-1)*20+8}px;
+        left: ${8 + ($level - 1) * 20 + 8}px;
         top: 0;
         bottom: 50%;
         width: 1px;
@@ -289,14 +373,15 @@
       &::after {
         content: '';
         position: absolute;
-        left: ${8+(i-1)*20+8}px;
+        left: ${8 + ($level - 1) * 20 + 8}px;
         top: 50%;
         width: 12px;
         height: 1px;
         background: var(--tree-line-color);
       }
     `}
-`,ExpandIcon=o.span`
+`;
+export const ExpandIcon = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -308,42 +393,48 @@
   svg {
     width: 12px;
     height: 12px;
-    color: ${r.onSurface?`${r.onSurface}60`:"#6b7280"};
+    color: ${tokens.onSurface ? `${tokens.onSurface}60` : '#6b7280'};
     transition: transform 0.2s ease;
-    transform: ${({$expanded:e})=>e?"rotate(90deg)":"rotate(0deg)"};
+    transform: ${({ $expanded }) => ($expanded ? 'rotate(90deg)' : 'rotate(0deg)')};
     
-    ${({$loading:e})=>e&&t`
-        animation: ${p} 0.8s linear infinite;
+    ${({ $loading }) => $loading &&
+    css `
+        animation: ${rotate} 0.8s linear infinite;
       `}
   }
-`,LeafIndent=o.span`
+`;
+export const LeafIndent = styled.span `
   width: 20px;
   margin-right: 4px;
   flex-shrink: 0;
-`,Checkbox=o.span`
+`;
+export const Checkbox = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
   margin-right: 8px;
-  border: 1.5px solid ${r.outline||"#d1d5db"};
+  border: 1.5px solid ${tokens.outline || '#d1d5db'};
   border-radius: 3px;
   flex-shrink: 0;
   transition: all 0.15s ease;
   
-  ${({$checked:e})=>e&&t`
-      background: ${r.primary||"#3b82f6"};
-      border-color: ${r.primary||"#3b82f6"};
+  ${({ $checked }) => $checked &&
+    css `
+      background: ${tokens.primary || '#3b82f6'};
+      border-color: ${tokens.primary || '#3b82f6'};
     `}
   
-  ${({$indeterminate:e})=>e&&t`
-      background: ${r.primary||"#3b82f6"};
-      border-color: ${r.primary||"#3b82f6"};
+  ${({ $indeterminate }) => $indeterminate &&
+    css `
+      background: ${tokens.primary || '#3b82f6'};
+      border-color: ${tokens.primary || '#3b82f6'};
     `}
   
-  ${({$disabled:e})=>e&&t`
-      background: ${r.surface||"#f3f4f6"};
+  ${({ $disabled }) => $disabled &&
+    css `
+      background: ${tokens.surface || '#f3f4f6'};
       cursor: not-allowed;
     `}
   
@@ -352,7 +443,8 @@
     height: 12px;
     color: white;
   }
-`,NodeIcon=o.span`
+`;
+export const NodeIcon = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -360,27 +452,34 @@
   height: 16px;
   margin-right: 8px;
   flex-shrink: 0;
-  color: ${r.onSurface?`${r.onSurface}60`:"#6b7280"};
+  color: ${tokens.onSurface ? `${tokens.onSurface}60` : '#6b7280'};
   
   svg {
     width: 14px;
     height: 14px;
   }
-`,NodeTitle=o.span`
+`;
+export const NodeTitle = styled.span `
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 14px;
-  color: ${({$disabled:e})=>e?r.onSurface?`${r.onSurface}50`:"#9ca3af":r.onSurface||"#1f2937"};
-`,EmptyState=o.div`
+  color: ${({ $disabled }) => $disabled
+    ? tokens.onSurface
+        ? `${tokens.onSurface}50`
+        : '#9ca3af'
+    : tokens.onSurface || '#1f2937'};
+`;
+export const EmptyState = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 32px 16px;
-  color: ${r.onSurface?`${r.onSurface}50`:"#9ca3af"};
+  color: ${tokens.onSurface ? `${tokens.onSurface}50` : '#9ca3af'};
   font-size: 14px;
-`,LoadingIndicator=o.div`
+`;
+export const LoadingIndicator = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -389,7 +488,7 @@
   svg {
     width: 20px;
     height: 20px;
-    color: ${r.primary||"#3b82f6"};
-    animation: ${p} 0.8s linear infinite;
+    color: ${tokens.primary || '#3b82f6'};
+    animation: ${rotate} 0.8s linear infinite;
   }
 `;