react-restyle-components 0.4.46 → 0.4.47

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

@@ -1,93 +1,33 @@
-import { styled, css } from 'styled-components';
-import { tokens } from '../../utils/designTokens';
-// Size configurations
-const sizeConfig = {
-    small: {
-        trackWidth: '36px',
-        trackHeight: '20px',
-        thumbSize: '16px',
-        thumbOffset: '2px',
-        fontSize: '0.8125rem',
-        iconSize: '10px',
-    },
-    medium: {
-        trackWidth: '44px',
-        trackHeight: '24px',
-        thumbSize: '20px',
-        thumbOffset: '2px',
-        fontSize: '0.875rem',
-        iconSize: '12px',
-    },
-    large: {
-        trackWidth: '52px',
-        trackHeight: '28px',
-        thumbSize: '24px',
-        thumbOffset: '2px',
-        fontSize: '1rem',
-        iconSize: '14px',
-    },
-};
-// Color configurations
-const colorConfig = {
-    primary: {
-        checked: tokens.primary || '#454cbf',
-        hover: '#3d44a5',
-    },
-    success: {
-        checked: '#10b981',
-        hover: '#059669',
-    },
-    warning: {
-        checked: '#f59e0b',
-        hover: '#d97706',
-    },
-    error: {
-        checked: '#ef4444',
-        hover: '#dc2626',
-    },
-    neutral: {
-        checked: '#6b7280',
-        hover: '#4b5563',
-    },
-};
-export const SwitchLabel = styled.label `
+"use strict";import{styled as i,css as n}from"styled-components";import{tokens as r}from"../../utils/designTokens";const t={small:{trackWidth:"36px",trackHeight:"20px",thumbSize:"16px",thumbOffset:"2px",fontSize:"0.8125rem",iconSize:"10px"},medium:{trackWidth:"44px",trackHeight:"24px",thumbSize:"20px",thumbOffset:"2px",fontSize:"0.875rem",iconSize:"12px"},large:{trackWidth:"52px",trackHeight:"28px",thumbSize:"24px",thumbOffset:"2px",fontSize:"1rem",iconSize:"14px"}},c={primary:{checked:r.primary||"#454cbf",hover:"#3d44a5"},success:{checked:"#10b981",hover:"#059669"},warning:{checked:"#f59e0b",hover:"#d97706"},error:{checked:"#ef4444",hover:"#dc2626"},neutral:{checked:"#6b7280",hover:"#4b5563"}};export const SwitchLabel=i.label`
   display: inline-flex;
   align-items: flex-start;
-  gap: ${tokens.spacing150 || '0.75rem'};
-  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  gap: ${r.spacing150||"0.75rem"};
+  cursor: ${({$disabled:e})=>e?"not-allowed":"pointer"};
   user-select: none;
   
-  ${({ $labelPosition }) => $labelPosition === 'left'
-    ? css `
+  ${({$labelPosition:e})=>e==="left"?n`
           flex-direction: row;
-        `
-    : css `
+        `:n`
           flex-direction: row-reverse;
         `}
   
-  ${({ $disabled }) => $disabled &&
-    css `
+  ${({$disabled:e})=>e&&n`
       opacity: 0.5;
     `}
-`;
-export const LabelContent = styled.div `
+`,LabelContent=i.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
-`;
-export const LabelText = styled.span `
-  font-size: ${({ $size }) => sizeConfig[$size].fontSize};
+`,LabelText=i.span`
+  font-size: ${({$size:e})=>t[e].fontSize};
   font-weight: 500;
   line-height: 1.4;
-  color: ${tokens.onSurface || '#1a1a2e'};
-`;
-export const DescriptionText = styled.span `
-  font-size: ${({ $size }) => $size === 'small' ? '0.6875rem' :
-    $size === 'large' ? '0.875rem' : '0.75rem'};
-  color: ${tokens.onSurface ? `${tokens.onSurface}80` : '#6c757d'};
+  color: ${r.onSurface||"#1a1a2e"};
+`,DescriptionText=i.span`
+  font-size: ${({$size:e})=>e==="small"?"0.6875rem":e==="large"?"0.875rem":"0.75rem"};
+  color: ${r.onSurface?`${r.onSurface}80`:"#6c757d"};
   line-height: 1.4;
-`;
-export const HiddenInput = styled.input `
+`,HiddenInput=i.input`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -97,66 +37,57 @@ export const HiddenInput = styled.input `
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-`;
-export const SwitchTrack = styled.span `
+`,SwitchTrack=i.span`
   position: relative;
   display: inline-flex;
   align-items: center;
-  width: ${({ $size }) => sizeConfig[$size].trackWidth};
-  height: ${({ $size }) => sizeConfig[$size].trackHeight};
+  width: ${({$size:e})=>t[e].trackWidth};
+  height: ${({$size:e})=>t[e].trackHeight};
   border-radius: 9999px;
-  background-color: ${({ $checked, $color }) => $checked ? colorConfig[$color].checked : (tokens.outline || '#d1d5db')};
+  background-color: ${({$checked:e,$color:o})=>e?c[o].checked:r.outline||"#d1d5db"};
   transition: background-color 0.2s ease, box-shadow 0.2s ease;
   flex-shrink: 0;
   
   /* Focus ring */
   ${HiddenInput}:focus-visible + & {
-    box-shadow: 0 0 0 2px ${tokens.surface || '#fff'}, 
-                0 0 0 4px ${({ $color }) => colorConfig[$color].checked};
+    box-shadow: 0 0 0 2px ${r.surface||"#fff"}, 
+                0 0 0 4px ${({$color:e})=>c[e].checked};
   }
   
   /* Hover state */
-  ${({ $disabled, $checked, $color }) => !$disabled &&
-    css `
+  ${({$disabled:e,$checked:o,$color:a})=>!e&&n`
       &:hover {
-        background-color: ${$checked
-        ? colorConfig[$color].hover
-        : (tokens.outlineSoft || '#9ca3af')};
+        background-color: ${o?c[a].hover:r.outlineSoft||"#9ca3af"};
       }
     `}
-`;
-export const SwitchThumb = styled.span `
+`,SwitchThumb=i.span`
   position: absolute;
-  width: ${({ $size }) => sizeConfig[$size].thumbSize};
-  height: ${({ $size }) => sizeConfig[$size].thumbSize};
+  width: ${({$size:e})=>t[e].thumbSize};
+  height: ${({$size:e})=>t[e].thumbSize};
   background-color: white;
   border-radius: 50%;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease;
   
-  left: ${({ $size }) => sizeConfig[$size].thumbOffset};
+  left: ${({$size:e})=>t[e].thumbOffset};
   
-  ${({ $checked, $size }) => $checked &&
-    css `
-      transform: translateX(calc(${sizeConfig[$size].trackWidth} - ${sizeConfig[$size].thumbSize} - ${sizeConfig[$size].thumbOffset} * 2));
+  ${({$checked:e,$size:o})=>e&&n`
+      transform: translateX(calc(${t[o].trackWidth} - ${t[o].thumbSize} - ${t[o].thumbOffset} * 2));
     `}
-`;
-export const IconWrapper = styled.span `
+`,IconWrapper=i.span`
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({ $size }) => sizeConfig[$size].iconSize};
-  height: ${({ $size }) => sizeConfig[$size].iconSize};
+  width: ${({$size:e})=>t[e].iconSize};
+  height: ${({$size:e})=>t[e].iconSize};
   color: white;
-  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  opacity: ${({$visible:e})=>e?1:0};
   transition: opacity 0.2s ease;
   
-  ${({ $position, $size }) => $position === 'left'
-    ? css `
+  ${({$position:e,$size:o})=>e==="left"?n`
           left: 6px;
-        `
-    : css `
+        `:n`
           right: 6px;
         `}
   

package/lib/src/core-components/src/components/Switch/index.js

@@ -1,2 +1 @@
-export { Switch } from './Switch';
-export * from './types';
+"use strict";export{Switch}from"./Switch";export*from"./types";

package/lib/src/core-components/src/components/Switch/types.js

@@ -1,3 +1 @@
-export const SWITCH_SIZES = ['small', 'medium', 'large'];
-export const SWITCH_COLORS = ['primary', 'success', 'warning', 'error', 'neutral'];
-export const SWITCH_LABEL_POSITIONS = ['left', 'right'];
+"use strict";export const SWITCH_SIZES=["small","medium","large"],SWITCH_COLORS=["primary","success","warning","error","neutral"],SWITCH_LABEL_POSITIONS=["left","right"];