react-restyle-components 0.4.46 → 0.4.47

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

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

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

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

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

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

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

@@ -1,139 +1 @@
-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 })] }) }));
-};
+"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})]})})};

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

@@ -1,26 +1 @@
-'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';
+"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";