react-restyle-components 0.4.47 → 0.4.48

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

@@ -1,4 +1,7 @@
-"use strict";import{styled as i,css as e,keyframes as n}from"styled-components";import{tokens as a}from"../../utils/designTokens";const c=n`
+import { styled, css, keyframes } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+// Animations
+const fadeIn = keyframes `
   from {
     opacity: 0;
     transform: scale(0.3);
@@ -7,7 +10,8 @@
     opacity: 1;
     transform: scale(1);
   }
-`,p=n`
+`;
+const fadeOut = keyframes `
   from {
     opacity: 1;
     transform: scale(1);
@@ -16,11 +20,39 @@
     opacity: 0;
     transform: scale(0.3);
   }
-`,x=n`
+`;
+const backdropFadeIn = keyframes `
   from { opacity: 0; }
   to { opacity: 1; }
-`;export const sizeConfig={small:{fabSize:48,actionSize:40,iconSize:24,actionIconSize:20,labelFontSize:"12px"},medium:{fabSize:56,actionSize:48,iconSize:28,actionIconSize:24,labelFontSize:"13px"},large:{fabSize:64,actionSize:56,iconSize:32,actionIconSize:28,labelFontSize:"14px"}};const l={filled:e`
-    background: ${a.primary||"#3b82f6"};
+`;
+// Size configurations
+export const sizeConfig = {
+    small: {
+        fabSize: 48,
+        actionSize: 40,
+        iconSize: 24,
+        actionIconSize: 20,
+        labelFontSize: '12px',
+    },
+    medium: {
+        fabSize: 56,
+        actionSize: 48,
+        iconSize: 28,
+        actionIconSize: 24,
+        labelFontSize: '13px',
+    },
+    large: {
+        fabSize: 64,
+        actionSize: 56,
+        iconSize: 32,
+        actionIconSize: 28,
+        labelFontSize: '14px',
+    },
+};
+// Variant styles for FAB
+const fabVariantStyles = {
+    filled: css `
+    background: ${tokens.primary || '#3b82f6'};
     color: white;
     border: none;
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
@@ -29,96 +61,117 @@
       background: #2563eb;
       box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
     }
-  `,outlined:e`
+  `,
+    outlined: css `
     background: white;
-    color: ${a.primary||"#3b82f6"};
-    border: 2px solid ${a.primary||"#3b82f6"};
+    color: ${tokens.primary || '#3b82f6'};
+    border: 2px solid ${tokens.primary || '#3b82f6'};
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     
     &:hover:not(:disabled) {
-      background: ${a.primary||"#3b82f6"}10;
+      background: ${tokens.primary || '#3b82f6'}10;
     }
-  `,soft:e`
-    background: ${a.primary||"#3b82f6"}15;
-    color: ${a.primary||"#3b82f6"};
+  `,
+    soft: css `
+    background: ${tokens.primary || '#3b82f6'}15;
+    color: ${tokens.primary || '#3b82f6'};
     border: none;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     
     &:hover:not(:disabled) {
-      background: ${a.primary||"#3b82f6"}25;
+      background: ${tokens.primary || '#3b82f6'}25;
     }
-  `},d=o=>{switch(o){case"up":return e`
+  `,
+};
+// Direction styles for actions container
+const getDirectionStyles = (direction) => {
+    switch (direction) {
+        case 'up':
+            return css `
         flex-direction: column-reverse;
         bottom: 100%;
         left: 50%;
         transform: translateX(-50%);
         padding-bottom: 16px;
-      `;case"down":return e`
+      `;
+        case 'down':
+            return css `
         flex-direction: column;
         top: 100%;
         left: 50%;
         transform: translateX(-50%);
         padding-top: 16px;
-      `;case"left":return e`
+      `;
+        case 'left':
+            return css `
         flex-direction: row-reverse;
         right: 100%;
         top: 50%;
         transform: translateY(-50%);
         padding-right: 16px;
-      `;case"right":return e`
+      `;
+        case 'right':
+            return css `
         flex-direction: row;
         left: 100%;
         top: 50%;
         transform: translateY(-50%);
         padding-left: 16px;
-      `;default:return e`
+      `;
+        default:
+            return css `
         flex-direction: column-reverse;
         bottom: 100%;
         left: 50%;
         transform: translateX(-50%);
         padding-bottom: 16px;
-      `}};export const SpeedDialRoot=i.div`
+      `;
+    }
+};
+export const SpeedDialRoot = styled.div `
   position: relative;
-  display: ${({$hidden:o})=>o?"none":"inline-flex"};
-  z-index: ${({$zIndex:o})=>o};
-`,SpeedDialBackdrop=i.div`
+  display: ${({ $hidden }) => ($hidden ? 'none' : 'inline-flex')};
+  z-index: ${({ $zIndex }) => $zIndex};
+`;
+export const SpeedDialBackdrop = styled.div `
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, ${({$opacity:o})=>o});
-  z-index: ${({$zIndex:o})=>o-1};
-  pointer-events: ${({$isOpen:o})=>o?"auto":"none"};
-  opacity: ${({$isOpen:o})=>o?1:0};
+  background: rgba(0, 0, 0, ${({ $opacity }) => $opacity});
+  z-index: ${({ $zIndex }) => $zIndex - 1};
+  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
   transition: opacity 0.2s ease;
-`,SpeedDialFab=i.button`
+`;
+export const SpeedDialFab = styled.button `
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({$size:o})=>sizeConfig[o].fabSize}px;
-  height: ${({$size:o})=>sizeConfig[o].fabSize}px;
+  width: ${({ $size }) => sizeConfig[$size].fabSize}px;
+  height: ${({ $size }) => sizeConfig[$size].fabSize}px;
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none;
   z-index: 2;
   
-  ${({$variant:o})=>l[o]}
+  ${({ $variant }) => fabVariantStyles[$variant]}
   
   /* Custom colors override */
-  ${({$customBg:o})=>o&&e`background: ${o};`}
-  ${({$customColor:o})=>o&&e`color: ${o};`}
+  ${({ $customBg }) => $customBg && css `background: ${$customBg};`}
+  ${({ $customColor }) => $customColor && css `color: ${$customColor};`}
   
   /* Icon rotation */
   & > * {
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    ${({$isOpen:o,$rotateOnToggle:t,$rotationDegrees:r})=>o&&t&&e`
-        transform: rotate(${r}deg);
+    ${({ $isOpen, $rotateOnToggle, $rotationDegrees }) => $isOpen && $rotateOnToggle && css `
+        transform: rotate(${$rotationDegrees}deg);
       `}
   }
   
   /* Focus ring */
   &:focus-visible {
-    box-shadow: 0 0 0 3px ${a.primary||"#3b82f6"}40;
+    box-shadow: 0 0 0 3px ${tokens.primary || '#3b82f6'}40;
   }
   
   /* Disabled state */
@@ -135,30 +188,40 @@
   &:active:not(:disabled) {
     transform: scale(0.95);
   }
-`,SpeedDialActions=i.div`
+`;
+export const SpeedDialActions = styled.div `
   position: absolute;
   display: flex;
   align-items: center;
-  gap: ${({$gap:o})=>o}px;
-  pointer-events: ${({$isOpen:o})=>o?"auto":"none"};
+  gap: ${({ $gap }) => $gap}px;
+  pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};
   
-  ${({$direction:o})=>d(o)}
-`,SpeedDialActionWrapper=i.div`
+  ${({ $direction }) => getDirectionStyles($direction)}
+`;
+export const SpeedDialActionWrapper = styled.div `
   display: flex;
   align-items: center;
   gap: 12px;
   
-  ${({$direction:o,$showLabels:t})=>t?o==="up"||o==="down"?e`flex-direction: row;`:e`flex-direction: column;`:""}
-`,SpeedDialActionButton=i.button`
+  ${({ $direction, $showLabels }) => {
+    if (!$showLabels)
+        return '';
+    if ($direction === 'up' || $direction === 'down') {
+        return css `flex-direction: row;`;
+    }
+    return css `flex-direction: column;`;
+}}
+`;
+export const SpeedDialActionButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({$size:o})=>sizeConfig[o].actionSize}px;
-  height: ${({$size:o})=>sizeConfig[o].actionSize}px;
+  width: ${({ $size }) => sizeConfig[$size].actionSize}px;
+  height: ${({ $size }) => sizeConfig[$size].actionSize}px;
   border-radius: 50%;
   border: none;
-  background: ${({$customBg:o})=>o||"white"};
-  color: ${({$customColor:o})=>o||"#374151"};
+  background: ${({ $customBg }) => $customBg || 'white'};
+  color: ${({ $customColor }) => $customColor || '#374151'};
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   transition: all 0.2s ease;
@@ -169,17 +232,19 @@
   opacity: 0;
   transform: scale(0.3);
   
-  ${({$isOpen:o,$index:t,$staggerDelay:r,$animationDuration:s})=>o?e`
-          animation: ${c} ${s}ms ease forwards;
-          animation-delay: ${t*r}ms;
-        `:e`
-          animation: ${p} ${s*.5}ms ease forwards;
-          animation-delay: ${t*(r*.3)}ms;
+  ${({ $isOpen, $index, $staggerDelay, $animationDuration }) => $isOpen
+    ? css `
+          animation: ${fadeIn} ${$animationDuration}ms ease forwards;
+          animation-delay: ${$index * $staggerDelay}ms;
+        `
+    : css `
+          animation: ${fadeOut} ${$animationDuration * 0.5}ms ease forwards;
+          animation-delay: ${$index * ($staggerDelay * 0.3)}ms;
         `}
   
   /* Focus ring */
   &:focus-visible {
-    box-shadow: 0 0 0 3px ${a.primary||"#3b82f6"}40;
+    box-shadow: 0 0 0 3px ${tokens.primary || '#3b82f6'}40;
   }
   
   /* Disabled state */
@@ -197,8 +262,9 @@
   &:active:not(:disabled) {
     transform: scale(0.95);
   }
-`,SpeedDialActionLabel=i.span`
-  font-size: ${({$size:o})=>sizeConfig[o].labelFontSize};
+`;
+export const SpeedDialActionLabel = styled.span `
+  font-size: ${({ $size }) => sizeConfig[$size].labelFontSize};
   font-weight: 500;
   color: #374151;
   white-space: nowrap;
@@ -209,18 +275,22 @@
   
   /* Animation */
   opacity: 0;
-  transform: translateX(${({$direction:o})=>o==="left"?"10px":o==="right"?"-10px":"0"}) translateY(${({$direction:o})=>o==="up"?"10px":o==="down"?"-10px":"0"});
+  transform: translateX(${({ $direction }) => $direction === 'left' ? '10px' :
+    $direction === 'right' ? '-10px' : '0'}) translateY(${({ $direction }) => $direction === 'up' ? '10px' :
+    $direction === 'down' ? '-10px' : '0'});
   
-  ${({$isOpen:o,$index:t,$staggerDelay:r})=>o&&e`
-      animation: ${c} 150ms ease forwards;
-      animation-delay: ${t*r+50}ms;
+  ${({ $isOpen, $index, $staggerDelay }) => $isOpen &&
+    css `
+      animation: ${fadeIn} 150ms ease forwards;
+      animation-delay: ${$index * $staggerDelay + 50}ms;
     `}
-`,IconWrapper=i.span`
+`;
+export const IconWrapper = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({$size:o,$isAction:t})=>t?sizeConfig[o].actionIconSize:sizeConfig[o].iconSize}px;
-  height: ${({$size:o,$isAction:t})=>t?sizeConfig[o].actionIconSize:sizeConfig[o].iconSize}px;
+  width: ${({ $size, $isAction }) => $isAction ? sizeConfig[$size].actionIconSize : sizeConfig[$size].iconSize}px;
+  height: ${({ $size, $isAction }) => $isAction ? sizeConfig[$size].actionIconSize : sizeConfig[$size].iconSize}px;
   
   svg {
     width: 100%;

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

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

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

@@ -1 +1,3 @@
-"use strict";export const SPEED_DIAL_DIRECTIONS=["up","down","left","right"],SPEED_DIAL_SIZES=["small","medium","large"],SPEED_DIAL_VARIANTS=["filled","outlined","soft"];
+export const SPEED_DIAL_DIRECTIONS = ['up', 'down', 'left', 'right'];
+export const SPEED_DIAL_SIZES = ['small', 'medium', 'large'];
+export const SPEED_DIAL_VARIANTS = ['filled', 'outlined', 'soft'];

package/lib/src/core-components/src/components/Stepper2/stepper.component.js

@@ -1 +1,139 @@
-"use strict";import{jsx as p,jsxs as v}from"react/jsx-runtime";import e from"../../tc.module.css";import{cn as n}from"../../utils";const _={completedColor:"#ffae1a",activeColor:"#ffae1a",pendingColor:"#d1d5db",lineColor:"#d1d5db",completedTextColor:"#374151",activeTextColor:"#ffffff",pendingTextColor:"#9ca3af"},D={sm:{stepSize:24,fontSize:"0.625rem",padding:2},md:{stepSize:32,fontSize:"0.75rem",padding:4},lg:{stepSize:40,fontSize:"0.875rem",padding:6}};export const Stepper=({className:$="",steps:f,currentStep:b=1,onStepClick:m,size:S="md",colors:I={},showNumbers:C=!0,lineThickness:x=2,stepSize:w,clickable:h=!0,style:y,orientation:H="horizontal",classNames:i={},styles:l={}})=>{const o={..._,...I},c=D[S],g=w||c.stepSize,z=c.padding+g/2,T=n($,e["w-full"],e["px-4"],e["sm:px-8"],i.container),k=(r,a)=>typeof r=="string"?{label:r,number:a+1,description:void 0,status:void 0}:{label:r.label,number:r.number??a+1,description:r.description,status:r.status},L=f?.map((r,a)=>{const s=k(r,a),u=s.number;let d;s.status?d=s.status:u<b?d="completed":u===b?d="current":d="pending";let N=n(e["inline-block"],e.transform,e["-translate-x-1/2"],e["rounded-full"],e["text-center"],e["font-medium"],e.border);const t={width:`${g}px`,height:`${g}px`,fontSize:c.fontSize,position:"relative",zIndex:10,display:"flex",alignItems:"center",justifyContent:"center",borderWidth:"2px",borderStyle:"solid",transition:"all 0.3s ease",lineHeight:1};return d==="completed"?(t.borderColor=o.completedColor,t.backgroundColor="#ffffff",t.color=o.completedTextColor):d==="current"?(t.borderColor=o.activeColor,t.backgroundColor=o.activeColor,t.color=o.activeTextColor):(t.borderColor=o.pendingColor,t.backgroundColor="#ffffff",t.color=o.pendingTextColor),h&&m&&(t.cursor="pointer"),v("div",{style:{left:f.length>1?`${a/(f.length-1)*100}%`:"50%",...l.stepWrapper},className:n(e.absolute,i.stepWrapper),children:[p("span",{className:n(N,e["font-arimaRegular"],i.stepCircle),style:{...t,...l.stepCircle},onClick:()=>{h&&m&&m(u,r,a)},children:C?u:s.label}),!C&&s.description&&p("div",{className:i.stepDescription,style:{position:"absolute",top:`${g+8}px`,left:"50%",transform:"translateX(-50%)",fontSize:"0.75rem",color:d==="current"?o.activeColor:o.pendingTextColor,whiteSpace:"nowrap",...l.stepDescription},children:s.description})]},`step-${a}-${s.label}`)}),W=f.length>1?`${(b-1)/(f.length-1)*100}%`:"0%",j=c.padding*2+g;return p("div",{className:T,style:{...y,...l.container},children:v("div",{className:n(e["w-full"],e.relative,i.stepsWrapper),style:{minHeight:`${j}px`,paddingTop:`${c.padding}px`,...l.stepsWrapper},children:[p("div",{className:n(e.absolute,e["left-0"],e["w-full"],e["transition-width"],e["ease-in-out"],e["duration-500"],i.backgroundLine),style:{top:`${z}px`,height:`${x}px`,backgroundColor:o.lineColor,transform:"translateY(-50%)",zIndex:0,...l.backgroundLine}}),p("div",{className:n(e.absolute,e["left-0"],e["transition-width"],e["ease-in-out"],e["duration-500"],i.progressLine),style:{top:`${z}px`,width:W,height:`${x}px`,backgroundColor:o.completedColor,transform:"translateY(-50%)",zIndex:1,...l.progressLine}}),p("div",{className:n(e.relative,e["sm:block"]),style:{zIndex:2},children:L})]})})};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+const DEFAULT_COLORS = {
+    completedColor: '#ffae1a',
+    activeColor: '#ffae1a',
+    pendingColor: '#d1d5db',
+    lineColor: '#d1d5db',
+    completedTextColor: '#374151',
+    activeTextColor: '#ffffff',
+    pendingTextColor: '#9ca3af', // gray-400
+};
+const SIZE_CONFIG = {
+    sm: { stepSize: 24, fontSize: '0.625rem', padding: 2 },
+    md: { stepSize: 32, fontSize: '0.75rem', padding: 4 },
+    lg: { stepSize: 40, fontSize: '0.875rem', padding: 6 },
+};
+export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, size = 'md', colors = {}, showNumbers = true, lineThickness = 2, stepSize, clickable = true, style, orientation = 'horizontal', classNames: customClassNames = {}, styles: customStyles = {}, }) => {
+    const mergedColors = { ...DEFAULT_COLORS, ...colors };
+    const sizeConfig = SIZE_CONFIG[size];
+    const finalStepSize = stepSize || sizeConfig.stepSize;
+    const linePosition = sizeConfig.padding + finalStepSize / 2;
+    const finalClass = cn(className, s['w-full'], s['px-4'], s['sm:px-8'], customClassNames.container);
+    // Helper to get step info
+    const getStepInfo = (step, index) => {
+        if (typeof step === 'string') {
+            return {
+                label: step,
+                number: index + 1,
+                description: undefined,
+                status: undefined,
+            };
+        }
+        return {
+            label: step.label,
+            number: step.number ?? index + 1,
+            description: step.description,
+            status: step.status,
+        };
+    };
+    const Steps = steps?.map((step, index) => {
+        const stepInfo = getStepInfo(step, index);
+        const stepNumber = stepInfo.number;
+        // Determine status
+        let status;
+        if (stepInfo.status) {
+            status = stepInfo.status;
+        }
+        else if (stepNumber < currentStep) {
+            status = 'completed';
+        }
+        else if (stepNumber === currentStep) {
+            status = 'current';
+        }
+        else {
+            status = 'pending';
+        }
+        // Base step classes
+        let stepClass = cn(s['inline-block'], s['transform'], s['-translate-x-1/2'], s['rounded-full'], s['text-center'], s['font-medium'], s['border']);
+        // Apply styles based on status
+        const stepStyles = {
+            width: `${finalStepSize}px`,
+            height: `${finalStepSize}px`,
+            fontSize: sizeConfig.fontSize,
+            position: 'relative',
+            zIndex: 10,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderWidth: '2px',
+            borderStyle: 'solid',
+            transition: 'all 0.3s ease',
+            lineHeight: 1,
+        };
+        if (status === 'completed') {
+            stepStyles.borderColor = mergedColors.completedColor;
+            stepStyles.backgroundColor = '#ffffff';
+            stepStyles.color = mergedColors.completedTextColor;
+        }
+        else if (status === 'current') {
+            stepStyles.borderColor = mergedColors.activeColor;
+            stepStyles.backgroundColor = mergedColors.activeColor;
+            stepStyles.color = mergedColors.activeTextColor;
+        }
+        else {
+            // pending
+            stepStyles.borderColor = mergedColors.pendingColor;
+            stepStyles.backgroundColor = '#ffffff';
+            stepStyles.color = mergedColors.pendingTextColor;
+        }
+        if (clickable && onStepClick) {
+            stepStyles.cursor = 'pointer';
+        }
+        return (_jsxs("div", { style: {
+                left: steps.length > 1 ? `${(index / (steps.length - 1)) * 100}%` : '50%',
+                ...customStyles.stepWrapper,
+            }, className: cn(s['absolute'], customClassNames.stepWrapper), children: [_jsx("span", { className: cn(stepClass, s['font-arimaRegular'], customClassNames.stepCircle), style: { ...stepStyles, ...customStyles.stepCircle }, onClick: () => {
+                        if (clickable && onStepClick) {
+                            onStepClick(stepNumber, step, index);
+                        }
+                    }, children: showNumbers ? stepNumber : stepInfo.label }), !showNumbers && stepInfo.description && (_jsx("div", { className: customClassNames.stepDescription, style: {
+                        position: 'absolute',
+                        top: `${finalStepSize + 8}px`,
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        fontSize: '0.75rem',
+                        color: status === 'current'
+                            ? mergedColors.activeColor
+                            : mergedColors.pendingTextColor,
+                        whiteSpace: 'nowrap',
+                        ...customStyles.stepDescription,
+                    }, children: stepInfo.description }))] }, `step-${index}-${stepInfo.label}`));
+    });
+    // Calculate progress width based on current step
+    const progressWidth = steps.length > 1
+        ? `${((currentStep - 1) / (steps.length - 1)) * 100}%`
+        : '0%';
+    const containerHeight = sizeConfig.padding * 2 + finalStepSize;
+    return (_jsx("div", { className: finalClass, style: { ...style, ...customStyles.container }, children: _jsxs("div", { className: cn(s['w-full'], s['relative'], customClassNames.stepsWrapper), style: {
+                minHeight: `${containerHeight}px`,
+                paddingTop: `${sizeConfig.padding}px`,
+                ...customStyles.stepsWrapper,
+            }, children: [_jsx("div", { className: cn(s['absolute'], s['left-0'], s['w-full'], s['transition-width'], s['ease-in-out'], s['duration-500'], customClassNames.backgroundLine), style: {
+                        top: `${linePosition}px`,
+                        height: `${lineThickness}px`,
+                        backgroundColor: mergedColors.lineColor,
+                        transform: 'translateY(-50%)',
+                        zIndex: 0,
+                        ...customStyles.backgroundLine,
+                    } }), _jsx("div", { className: cn(s['absolute'], s['left-0'], s['transition-width'], s['ease-in-out'], s['duration-500'], customClassNames.progressLine), style: {
+                        top: `${linePosition}px`,
+                        width: progressWidth,
+                        height: `${lineThickness}px`,
+                        backgroundColor: mergedColors.completedColor,
+                        transform: 'translateY(-50%)',
+                        zIndex: 1,
+                        ...customStyles.progressLine,
+                    } }), _jsx("div", { className: cn(s['relative'], s['sm:block']), style: { zIndex: 2 }, children: Steps })] }) }));
+};

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';