react-restyle-components 0.4.39 → 0.4.41

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

@@ -1 +1,26 @@
-"use strict";"use client";import{jsx as e,jsxs as s,Fragment as p}from"react/jsx-runtime";import I,{forwardRef as S}from"react";import{SwitchLabel as b,LabelContent as v,LabelText as j,DescriptionText as N,HiddenInput as T,SwitchTrack as F,SwitchThumb as L,IconWrapper as u}from"./elements";const P=()=>e("svg",{viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"2",children:e("polyline",{points:"2 6 5 9 10 3"})}),W=()=>s("svg",{viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("line",{x1:"3",y1:"3",x2:"9",y2:"9"}),e("line",{x1:"9",y1:"3",x2:"3",y2:"9"})]});export const Switch=S(function(w,C){const{label:c,labelPosition:l="right",size:i="medium",color:x="primary",checked:r,defaultChecked:g,disabled:t=!1,showIcons:a=!1,description:o,className:d,id:h,...$}=w,[y,z]=I.useState(g??!1),m=r!==void 0,n=m?r:y,f=s(p,{children:[e(T,{ref:C,type:"checkbox",role:"switch",id:h,checked:n,disabled:t,onChange:k=>{m||z(k.target.checked),$.onChange?.(k)},"aria-checked":n,...$}),s(F,{$size:i,$color:x,$checked:n,$disabled:t,$showIcons:a,"aria-hidden":"true",children:[a&&s(p,{children:[e(u,{$size:i,$position:"left",$visible:n,children:e(P,{})}),e(u,{$size:i,$position:"right",$visible:!n,children:e(W,{})})]}),e(L,{$size:i,$checked:n})]})]});return!c&&!o?e(b,{$labelPosition:l,$disabled:t,"data-aui":"switch",className:d,children:f}):s(b,{$labelPosition:l,$disabled:t,"data-aui":"switch",className:d,htmlFor:h,children:[f,s(v,{$size:i,children:[c&&e(j,{$size:i,children:c}),o&&e(N,{$size:i,children:o})]})]})});Switch.displayName="Switch";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
+import { SwitchLabel, LabelContent, LabelText, DescriptionText, HiddenInput, SwitchTrack, SwitchThumb, IconWrapper, } from './elements';
+// Icons
+const CheckIcon = () => (_jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("polyline", { points: "2 6 5 9 10 3" }) }));
+const CloseIcon = () => (_jsxs("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("line", { x1: "3", y1: "3", x2: "9", y2: "9" }), _jsx("line", { x1: "9", y1: "3", x2: "3", y2: "9" })] }));
+export const Switch = forwardRef(function SwitchComponent(props, ref) {
+    const { label, labelPosition = 'right', size = 'medium', color = 'primary', checked, defaultChecked, disabled = false, showIcons = false, description, className, id, ...rest } = props;
+    // Use internal state if uncontrolled
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false);
+    const isControlled = checked !== undefined;
+    const isChecked = isControlled ? checked : internalChecked;
+    const handleChange = (e) => {
+        if (!isControlled) {
+            setInternalChecked(e.target.checked);
+        }
+        rest.onChange?.(e);
+    };
+    const switchElement = (_jsxs(_Fragment, { children: [_jsx(HiddenInput, { ref: ref, type: "checkbox", role: "switch", id: id, checked: isChecked, disabled: disabled, onChange: handleChange, "aria-checked": isChecked, ...rest }), _jsxs(SwitchTrack, { "$size": size, "$color": color, "$checked": isChecked, "$disabled": disabled, "$showIcons": showIcons, "aria-hidden": "true", children: [showIcons && (_jsxs(_Fragment, { children: [_jsx(IconWrapper, { "$size": size, "$position": "left", "$visible": isChecked, children: _jsx(CheckIcon, {}) }), _jsx(IconWrapper, { "$size": size, "$position": "right", "$visible": !isChecked, children: _jsx(CloseIcon, {}) })] })), _jsx(SwitchThumb, { "$size": size, "$checked": isChecked })] })] }));
+    if (!label && !description) {
+        return (_jsx(SwitchLabel, { "$labelPosition": labelPosition, "$disabled": disabled, "data-aui": "switch", className: className, children: switchElement }));
+    }
+    return (_jsxs(SwitchLabel, { "$labelPosition": labelPosition, "$disabled": disabled, "data-aui": "switch", className: className, htmlFor: id, children: [switchElement, _jsxs(LabelContent, { "$size": size, children: [label && _jsx(LabelText, { "$size": size, children: label }), description && _jsx(DescriptionText, { "$size": size, children: description })] })] }));
+});
+Switch.displayName = 'Switch';

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

@@ -1,33 +1,93 @@
-"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`
+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 `
   display: inline-flex;
   align-items: flex-start;
-  gap: ${r.spacing150||"0.75rem"};
-  cursor: ${({$disabled:e})=>e?"not-allowed":"pointer"};
+  gap: ${tokens.spacing150 || '0.75rem'};
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
   user-select: none;
   
-  ${({$labelPosition:e})=>e==="left"?n`
+  ${({ $labelPosition }) => $labelPosition === 'left'
+    ? css `
           flex-direction: row;
-        `:n`
+        `
+    : css `
           flex-direction: row-reverse;
         `}
   
-  ${({$disabled:e})=>e&&n`
+  ${({ $disabled }) => $disabled &&
+    css `
       opacity: 0.5;
     `}
-`,LabelContent=i.div`
+`;
+export const LabelContent = styled.div `
   display: flex;
   flex-direction: column;
   gap: 2px;
-`,LabelText=i.span`
-  font-size: ${({$size:e})=>t[e].fontSize};
+`;
+export const LabelText = styled.span `
+  font-size: ${({ $size }) => sizeConfig[$size].fontSize};
   font-weight: 500;
   line-height: 1.4;
-  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"};
+  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'};
   line-height: 1.4;
-`,HiddenInput=i.input`
+`;
+export const HiddenInput = styled.input `
   position: absolute;
   width: 1px;
   height: 1px;
@@ -37,57 +97,66 @@
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-`,SwitchTrack=i.span`
+`;
+export const SwitchTrack = styled.span `
   position: relative;
   display: inline-flex;
   align-items: center;
-  width: ${({$size:e})=>t[e].trackWidth};
-  height: ${({$size:e})=>t[e].trackHeight};
+  width: ${({ $size }) => sizeConfig[$size].trackWidth};
+  height: ${({ $size }) => sizeConfig[$size].trackHeight};
   border-radius: 9999px;
-  background-color: ${({$checked:e,$color:o})=>e?c[o].checked:r.outline||"#d1d5db"};
+  background-color: ${({ $checked, $color }) => $checked ? colorConfig[$color].checked : (tokens.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 ${r.surface||"#fff"}, 
-                0 0 0 4px ${({$color:e})=>c[e].checked};
+    box-shadow: 0 0 0 2px ${tokens.surface || '#fff'}, 
+                0 0 0 4px ${({ $color }) => colorConfig[$color].checked};
   }
   
   /* Hover state */
-  ${({$disabled:e,$checked:o,$color:a})=>!e&&n`
+  ${({ $disabled, $checked, $color }) => !$disabled &&
+    css `
       &:hover {
-        background-color: ${o?c[a].hover:r.outlineSoft||"#9ca3af"};
+        background-color: ${$checked
+        ? colorConfig[$color].hover
+        : (tokens.outlineSoft || '#9ca3af')};
       }
     `}
-`,SwitchThumb=i.span`
+`;
+export const SwitchThumb = styled.span `
   position: absolute;
-  width: ${({$size:e})=>t[e].thumbSize};
-  height: ${({$size:e})=>t[e].thumbSize};
+  width: ${({ $size }) => sizeConfig[$size].thumbSize};
+  height: ${({ $size }) => sizeConfig[$size].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:e})=>t[e].thumbOffset};
+  left: ${({ $size }) => sizeConfig[$size].thumbOffset};
   
-  ${({$checked:e,$size:o})=>e&&n`
-      transform: translateX(calc(${t[o].trackWidth} - ${t[o].thumbSize} - ${t[o].thumbOffset} * 2));
+  ${({ $checked, $size }) => $checked &&
+    css `
+      transform: translateX(calc(${sizeConfig[$size].trackWidth} - ${sizeConfig[$size].thumbSize} - ${sizeConfig[$size].thumbOffset} * 2));
     `}
-`,IconWrapper=i.span`
+`;
+export const IconWrapper = styled.span `
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({$size:e})=>t[e].iconSize};
-  height: ${({$size:e})=>t[e].iconSize};
+  width: ${({ $size }) => sizeConfig[$size].iconSize};
+  height: ${({ $size }) => sizeConfig[$size].iconSize};
   color: white;
-  opacity: ${({$visible:e})=>e?1:0};
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
   transition: opacity 0.2s ease;
   
-  ${({$position:e,$size:o})=>e==="left"?n`
+  ${({ $position, $size }) => $position === 'left'
+    ? css `
           left: 6px;
-        `:n`
+        `
+    : css `
           right: 6px;
         `}
   

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

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

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

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