react-restyle-components 0.4.39 → 0.4.40

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

@@ -1,100 +1,186 @@
-"use strict";"use client";import{styled as a}from"styled-components";import{colors as t,getFontSize as l,getFontWeight as g}from"../../utils";import{dontForwardProps as d}from"../../utils";const s=({size:e})=>({small:`
+'use client';
+// import {styled,StyledProps} from 'styled-components';
+import { styled } from 'styled-components';
+import { colors, getFontSize, getFontWeight } from '../../utils';
+import { dontForwardProps } from '../../utils';
+const getButtonSize = ({ size }) => ({
+    small: `
       height: 2rem;
       padding: 0.25rem 1rem;
-    `,medium:`
+    `,
+    medium: `
       height: 3rem;
       padding: 0.75rem 1.75rem;
-    `,large:`
+    `,
+    large: `
       height: 4rem;
       padding: 1rem 1.75rem;
-    `})[e],u=({theme:e,color:r,variant:n,isMobile:i})=>{if(i)return"";const o={...e,whiteHover:t.neutralBrighter}[`${r}Hover`];return{default:`
-      background: ${o};
-      border-color: ${o};
-    `,outline:`
-      background: ${r==="white"?"transparent":t.neutralBrightest};
-      border-color: ${r==="primary"?e.primary:o};
-      color: ${r==="primary"?e.primary:o};
-    `,flat:`
-      background: ${r==="white"?"transparent":t.neutralBrightest};
-      border-color: ${r==="white"?o:t.neutralBrightest};
+    `,
+})[size];
+const getHoverStyle = ({ theme, color, variant, isMobile, }) => {
+    if (isMobile)
+        return '';
+    const themeHover = {
+        ...theme,
+        whiteHover: colors.neutralBrighter,
+    }[`${color}Hover`];
+    return {
+        default: `
+      background: ${themeHover};
+      border-color: ${themeHover};
+    `,
+        outline: `
+      background: ${color === 'white' ? 'transparent' : colors.neutralBrightest};
+      border-color: ${color === 'primary' ? theme.primary : themeHover};
+      color: ${color === 'primary' ? theme.primary : themeHover};
+    `,
+        flat: `
+      background: ${color === 'white' ? 'transparent' : colors.neutralBrightest};
+      border-color: ${color === 'white' ? themeHover : colors.neutralBrightest};
       text-decoration: unset;
-      color: ${o};
-    `,text:`
-      color: ${o};
-    `}[n]},c=({theme:e,color:r,variant:n})=>{const i={...e,whitePressed:t.neutralBright}[`${r}Pressed`];return{default:`
-      background: ${i};
-      border-color: ${i};
-      color: ${{primary:e.textOnPrimary,secondary:e.textOnSecondary,white:t.black}[r]};
-    `,outline:`
-      background: ${r==="white"?"transparent":t.neutralBrighter};
-      border-color: ${i};
-      color: ${i};
-    `,flat:`
-      background: ${r==="white"?"transparent":t.neutralBrighter};
-      border-color: ${r==="white"?i:t.neutralBrighter};
-      color: ${i};
-    `,text:`
-      color: ${i};
-    `}[n]},m=({variant:e})=>({default:`
-      background: ${t.disabledBackground};
-      border-color: ${t.disabledBackground};
-    `,outline:`
-      border-color: ${t.disabledText};
-    `})[e],h=({theme:e,color:r,variant:n,hasIcon:i})=>{const o={...e,white:t.white}[r];return{default:`
-      background: ${o};
-      border-color: ${o};
-      color: ${{primary:e.textOnPrimary,secondary:e.textOnSecondary,white:t.black}[r]};
-    `,outline:`
+      color: ${themeHover};
+    `,
+        text: `
+      color: ${themeHover};
+    `,
+    }[variant];
+};
+const getActiveStyle = ({ theme, color, variant, }) => {
+    const themePressed = {
+        ...theme,
+        whitePressed: colors.neutralBright,
+    }[`${color}Pressed`];
+    return {
+        default: `
+      background: ${themePressed};
+      border-color: ${themePressed};
+      color: ${{
+            primary: theme.textOnPrimary,
+            secondary: theme.textOnSecondary,
+            white: colors.black,
+        }[color]};
+    `,
+        outline: `
+      background: ${color === 'white' ? 'transparent' : colors.neutralBrighter};
+      border-color: ${themePressed};
+      color: ${themePressed};
+    `,
+        flat: `
+      background: ${color === 'white' ? 'transparent' : colors.neutralBrighter};
+      border-color: ${color === 'white' ? themePressed : colors.neutralBrighter};
+      color: ${themePressed};
+    `,
+        text: `
+      color: ${themePressed};
+    `,
+    }[variant];
+};
+const getDisabledStyle = ({ variant }) => ({
+    default: `
+      background: ${colors.disabledBackground};
+      border-color: ${colors.disabledBackground};
+    `,
+    outline: `
+      border-color: ${colors.disabledText};
+    `,
+})[variant];
+const getBaseStyle = ({ theme, color, variant, hasIcon, }) => {
+    const themeColor = {
+        ...theme,
+        white: colors.white,
+    }[color];
+    return {
+        default: `
+      background: ${themeColor};
+      border-color: ${themeColor};
+      color: ${{
+            primary: theme.textOnPrimary,
+            secondary: theme.textOnSecondary,
+            white: colors.black,
+        }[color]};
+    `,
+        outline: `
       background: transparent;
-      color: ${o};
-      border: 2px solid ${o};
-    `,flat:`
+      color: ${themeColor};
+      border: 2px solid ${themeColor};
+    `,
+        flat: `
       background: transparent;
-      color: ${o};
+      color: ${themeColor};
       border-color: transparent;
-      ${i?"":"text-decoration: underline; text-underline-position: under;"}
-    `,text:`
+      ${!hasIcon
+            ? 'text-decoration: underline; text-underline-position: under;'
+            : ''}
+    `,
+        text: `
       margin: 0;
       padding: 0;
       border: none;
       border-radius: 0.0625rem;
-      color: ${o};
+      color: ${themeColor};
       text-decoration: underline;
       text-underline-position: under;
       background: inherit;
       height: initial;
-    `}[n]};export const iconOnlyStyle={small:`
+    `,
+    }[variant];
+};
+export const iconOnlyStyle = {
+    small: `
     padding: 0.375rem;
     height: auto;
-  `,medium:`
+  `,
+    medium: `
     padding: 0.75rem;
     height: auto;
-  `,large:`
+  `,
+    large: `
     padding: 1rem;
     height: auto;
-  `},iconOnlyFigmaStyle={small:`
+  `,
+};
+export const iconOnlyFigmaStyle = {
+    small: `
     padding: 0.375rem;
     width: 2rem;
     height: 2rem;
-  `,medium:`
+  `,
+    medium: `
     padding: 0.75rem;
     width: 3rem;
     height: 3rem;
-  `,large:`
+  `,
+    large: `
     padding: 1rem;
     width: 4rem;
     height: 4rem;
-  `};const p=({hasIcon:e,iconSide:r,size:n})=>e?n!=="small"?r==="left"?"padding-left: 1.25rem":"padding-right: 1.25rem":r==="left"?"padding-left: 0.75rem":"padding-right: 0.75rem":"";export const ButtonElement=a.button.withConfig(d())`
+  `,
+};
+const getIconButtonPadding = ({ hasIcon, iconSide, size, }) => {
+    if (!hasIcon)
+        return '';
+    if (size !== 'small') {
+        return iconSide === 'left'
+            ? 'padding-left: 1.25rem'
+            : 'padding-right: 1.25rem';
+    }
+    else {
+        return iconSide === 'left'
+            ? 'padding-left: 0.75rem'
+            : 'padding-right: 0.75rem';
+    }
+};
+export const ButtonElement = styled.button.withConfig(dontForwardProps()) `
   font-family: inherit;
-  font-weight: ${g("base")};
+  font-weight: ${getFontWeight('base')};
   font-style: normal;
-  font-size: ${({size:e})=>l(e==="large"?3:2)};
+  font-size: ${({ size }) => getFontSize(size === 'large' ? 3 : 2)};
   letter-spacing: 0;
   text-align: center;
   white-space: nowrap;
   width: auto;
 
-  ${s};
+  ${getButtonSize};
 
   display: flex;
   justify-content: center;
@@ -104,7 +190,7 @@
   border-width: 0.125rem;
   border-radius: 10rem;
 
-  ${h}
+  ${getBaseStyle}
 
   &:not(:disabled) {
     &:focus {
@@ -121,24 +207,47 @@
 
     &:hover {
       cursor: pointer;
-      ${u}
+      ${getHoverStyle}
     }
     &:active {
-      ${c}
+      ${getActiveStyle}
     }
   }
 
   &:disabled {
-    ${m}
+    ${getDisabledStyle}
 
-    color: ${t.disabledText};
-    -webkit-text-fill-color: ${t.disabledText};
+    color: ${colors.disabledText};
+    -webkit-text-fill-color: ${colors.disabledText};
     cursor: not-allowed;
   }
 
-  ${p};
+  ${getIconButtonPadding};
 
-  ${({hasChildren:e,size:r,useFigmaStyles:n})=>{if(!e)return n?iconOnlyFigmaStyle[r]:iconOnlyStyle[r]}}
-`,iconMargins={small:{left:"0 0.25rem 0 0",right:"0 0 0 0.25rem"},medium:{left:"0 0.5rem 0 0",right:"0 0 0 0.5rem"},large:{left:"0 0.5rem 0 0",right:"0 0 0 0.5rem"}},IconWrapper=a.div.withConfig(d())`
-  margin: ${({hasChildren:e,iconSide:r,size:n})=>e?r==="left"?iconMargins[n].left:iconMargins[n].right:"0"};
+  ${({ hasChildren, size, useFigmaStyles }) => {
+    if (!hasChildren) {
+        return useFigmaStyles ? iconOnlyFigmaStyle[size] : iconOnlyStyle[size];
+    }
+}}
+`;
+export const iconMargins = {
+    small: {
+        left: '0 0.25rem 0 0',
+        right: '0 0 0 0.25rem',
+    },
+    medium: {
+        left: '0 0.5rem 0 0',
+        right: '0 0 0 0.5rem',
+    },
+    large: {
+        left: '0 0.5rem 0 0',
+        right: '0 0 0 0.5rem',
+    },
+};
+export const IconWrapper = styled.div.withConfig(dontForwardProps()) `
+  margin: ${({ hasChildren, iconSide, size }) => hasChildren
+    ? iconSide === 'left'
+        ? iconMargins[size].left
+        : iconMargins[size].right
+    : '0'};
 `;

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

@@ -1 +1,3 @@
-"use strict";export*from"./CoreButton";export*from"./types";export*from"./utils";
+export * from './CoreButton';
+export * from './types';
+export * from './utils';

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

@@ -1 +1,6 @@
-"use strict";export const BUTTON_SIZES=["small","medium","large"],BUTTON_VARIANTS=["default","outline","flat","text"],BUTTON_COLORS=["primary","secondary","white"],DEFAULT_BUTTON_SIZE="medium",DEFAULT_BUTTON_VARIANT="default",DEFAULT_BUTTON_COLOR="primary";
+export const BUTTON_SIZES = ['small', 'medium', 'large'];
+export const BUTTON_VARIANTS = ['default', 'outline', 'flat', 'text'];
+export const BUTTON_COLORS = ['primary', 'secondary', 'white'];
+export const DEFAULT_BUTTON_SIZE = 'medium';
+export const DEFAULT_BUTTON_VARIANT = 'default';
+export const DEFAULT_BUTTON_COLOR = 'primary';

package/lib/src/core-components/src/core-components/CoreButton/utils.js

@@ -1 +1,12 @@
-"use strict";import{jsx as n,Fragment as t,jsxs as m}from"react/jsx-runtime";import{IconWrapper as c}from"./elements";import{Icon as p}from"../../components/Icon/Icon";export const addIconToChildren=({children:r,size:s,icons:o,iconSide:e})=>{const a=o&&n(c,{iconSide:e,size:s,hasChildren:!!r,children:n(p,{nameIcon:o?.nameIcon,propsIcon:o?.propsIcon,className:o?.className})});return addToSide({children:r,element:a,side:e})},addToSide=({children:r,element:s,side:o})=>m(t,{children:[o==="left"&&s,r,o==="right"&&s]});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconWrapper } from './elements';
+import { Icon } from '../../components/Icon/Icon';
+export const addIconToChildren = ({ children, size, icons, iconSide, }) => {
+    const icon = icons && (_jsx(IconWrapper, { iconSide: iconSide, size: size, hasChildren: !!children, children: _jsx(Icon, { nameIcon: icons?.nameIcon, propsIcon: icons?.propsIcon, className: icons?.className }) }));
+    return addToSide({
+        children,
+        element: icon,
+        side: iconSide,
+    });
+};
+export const addToSide = ({ children, element, side, }) => (_jsxs(_Fragment, { children: [side === 'left' && element, children, side === 'right' && element] }));

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

@@ -1,8 +1,23 @@
-"use strict";"use client";import{jsx as o}from"react/jsx-runtime";import e,{useContext as i}from"react";import{styled as s}from"styled-components";import{colors as n}from"../../utils";import{dontForwardProps as d}from"../../utils";const m=e.createContext({isInsideCard:!1});export const StyledDivider=s.hr.withConfig(d())`
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import { styled } from 'styled-components';
+import { colors } from '../../utils';
+// import {CardContext} from '../../components/Card/CardContext';
+import { dontForwardProps } from '../../utils';
+const CardContext = React.createContext({
+    isInsideCard: false,
+});
+export const StyledDivider = styled.hr.withConfig(dontForwardProps()) `
   margin: 0;
   border: 0;
-  border-top: 1px solid ${n.neutralBrightest};
+  border-top: 1px solid ${colors.neutralBrightest};
 
-  ${({isInsideCard:r})=>r&&`margin-left: -1rem; 
+  ${({ isInsideCard }) => isInsideCard &&
+    `margin-left: -1rem; 
     margin-right: -1rem;`}
-`,Divider=r=>{const{isInsideCard:t}=i(m);return o(StyledDivider,{isInsideCard:t,...r})};
+`;
+export const Divider = (props) => {
+    const { isInsideCard } = useContext(CardContext);
+    return _jsx(StyledDivider, { isInsideCard: isInsideCard, ...props });
+};

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

@@ -1 +1 @@
-"use strict";export*from"./Divider";
+export * from './Divider';

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

@@ -1 +1 @@
-"use strict";export{SelectionCardStrip}from"./selectionCardStrip";
+export { SelectionCardStrip } from './selectionCardStrip';

package/lib/src/core-components/src/core-components/SelectionCardStrip/selectionCardStrip.js

@@ -1,4 +1,15 @@
-"use strict";"use client";import{jsx as t}from"react/jsx-runtime";import s from"react";import{styled as r}from"styled-components";import{createTransition as i,dontForwardProps as n}from"../../utils";import{colors as l}from"../../utils";import{toggleParentStyles as a}from"../ToggleCore";const d=e=>t("div",{...e}),c=r(d).withConfig(n())`
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { styled } from 'styled-components';
+// import {Card, CardProps} from '../../components/Card';
+import { createTransition, dontForwardProps } from '../../utils';
+import { colors } from '../../utils';
+import { toggleParentStyles } from '../ToggleCore';
+const Card = (props) => {
+    return _jsx("div", { ...props });
+};
+const StyledCard = styled(Card).withConfig(dontForwardProps()) `
   display: inline-flex;
   align-items: flex-start;
   box-sizing: border-box;
@@ -6,25 +17,37 @@
   line-height: 1.3;
   -moz-osx-font-smoothing: grayscale;
 
-  ${()=>i({properties:["box-shadow","background-color"]})}
+  ${() => createTransition({
+    properties: ['box-shadow', 'background-color'],
+})}
 
-  ${a};
-`,f=s.forwardRef((e,o)=>t(c,{ref:o,element:"label",type:"selection",selected:e.checked||e.focused,...e})),p=r.div.withConfig(n())`
+  ${toggleParentStyles};
+`;
+const Wrapper = React.forwardRef((props, fRef) => (_jsx(StyledCard, { ref: fRef, element: "label", type: "selection", selected: props.checked || props.focused, ...props })));
+const InternalWrapper = styled.div.withConfig(dontForwardProps()) `
   display: flex;
   z-index: 1;
   width: 100%;
   justify-content: center;
   padding: 0.1rem 0 0 0;
-  ${i({properties:["color"]})};
+  ${createTransition({
+    properties: ['color'],
+})};
 
-  ${({isDisabled:e})=>e&&`
+  ${({ isDisabled }) => isDisabled &&
+    `
       cursor: not-allowed;
-      color: ${l.disabledText};
+      color: ${colors.disabledText};
 `}
-  ${({disableSvgColorOverride:e,isDisabled:o})=>!e&&`
+  ${({ disableSvgColorOverride, isDisabled }) => !disableSvgColorOverride &&
+    `
     svg path {
       fill: none;
-      stroke: ${o&&l.disabledText};
+      stroke: ${isDisabled && colors.disabledText};
     }
 `}
-`;export const SelectionCardStrip={Wrapper:f,InternalWrapper:p};
+`;
+export const SelectionCardStrip = {
+    Wrapper,
+    InternalWrapper,
+};

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

@@ -1,4 +1,6 @@
-"use strict";import{styled as o}from"styled-components";import{tokens as t}from"../utils/designTokens";export const StateLayer=o.div`
+import { styled } from 'styled-components';
+import { tokens } from '../utils/designTokens';
+export const StateLayer = styled.div `
   position: absolute;
   top: 0;
   right: 0;
@@ -6,6 +8,6 @@
   left: 0;
   pointer-events: none;
   z-index: 0;
-  background: ${t.darkGray||"#4a4a4a"} !important;
-  opacity: ${t.stateLayerNone};
+  background: ${tokens.darkGray || '#4a4a4a'} !important;
+  opacity: ${tokens.stateLayerNone};
 `;

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

@@ -1,4 +1,12 @@
-"use strict";import{jsx as r,jsxs as c}from"react/jsx-runtime";import{styled as i,css as o}from"styled-components";import{createTransition as n}from"../../utils";import{StateLayer as a}from"../StateLayer";const p=e=>r("span",{...e}),u=o`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled, css } from 'styled-components';
+import { createTransition } from '../../utils';
+import { StateLayer } from '../StateLayer';
+// import {Text} from '../../components/Text';
+const Text = (props) => {
+    return _jsx("span", { ...props });
+};
+const baseToggleStyles = css `
   position: relative;
   display: block;
   box-sizing: border-box;
@@ -9,15 +17,18 @@
   flex-shrink: 0;
   margin-right: var(--aui-spacing-100);
 
-  ${({$showInteraction:e})=>e&&o`
+  ${({ $showInteraction }) => $showInteraction &&
+    css `
       // Transitions
       &:before,
       [data-aui='icon'],
-      ${a} {
-        ${n({properties:["opacity"]})}
+      ${StateLayer} {
+        ${createTransition({ properties: ['opacity'] })}
       }
 
-      ${n({properties:["box-shadow","background-color","color"]})}
+      ${createTransition({
+        properties: ['box-shadow', 'background-color', 'color'],
+    })}
 
       // Support keyboard focus
       &:has(~ input:focus-visible) {
@@ -29,7 +40,8 @@
         opacity: var(--aui-state-layer-on-disabled);
       }
     `}
-`,s=i.span`
+`;
+const StyledCheckbox = styled.span `
   [data-aui='icon-check'],
   [data-aui='icon-minus'] {
     position: absolute;
@@ -38,28 +50,33 @@
     transition: opacity 0.15s;
     pointer-events: none;
   }
-  ${u};
+  ${baseToggleStyles};
 
   border-radius: var(--aui-border-radius-050);
 
-  ${({$checked:e,$indeterminate:d})=>e||d?o`
+  ${({ $checked, $indeterminate }) => $checked || $indeterminate
+    ? css `
           box-shadow: 0 0 0 1px var(--aui-inverse-surface) inset;
           background: var(--aui-inverse-surface);
           color: var(--aui-inverse-on-surface);
-        `:o`
+        `
+    : css `
           box-shadow: 0 0 0 1px var(--aui-outline) inset;
           background: var(--aui-surface);
           color: var(--aui-on-surface);
         `}
-`,t=i.span`
-  ${u};
+`;
+const StyledRadio = styled.span `
+  ${baseToggleStyles};
 
   border-radius: var(--aui-border-radius-round);
   background: var(--aui-surface);
 
-  ${({$checked:e})=>e?o`
+  ${({ $checked }) => $checked
+    ? css `
           box-shadow: 0 0 0 2px var(--aui-inverse-surface) inset;
-        `:o`
+        `
+    : css `
           box-shadow: 0 0 0 1px var(--aui-outline) inset;
         `}
 
@@ -72,9 +89,14 @@
     top: 0.3125rem;
     left: 0.3125rem;
     background: var(--aui-inverse-surface);
-    opacity: ${({$checked:e})=>e?"1":"0"};
+    opacity: ${({ $checked }) => ($checked ? '1' : '0')};
   }
-`;export const CheckboxToggle=({...e})=>c(s,{...e,children:[r(a,{}),r("span",{children:"Icons"})]}),RadioToggle=e=>r(t,{...e,children:r(a,{})}),StyledDescription=i(p).attrs({size:2})`
+`;
+export const CheckboxToggle = ({ ...props }) => (_jsxs(StyledCheckbox, { ...props, children: [_jsx(StateLayer, {}), _jsx("span", { children: "Icons" })] }));
+export const RadioToggle = (props) => (_jsx(StyledRadio, { ...props, children: _jsx(StateLayer, {}) }));
+export const StyledDescription = styled(Text).attrs({
+    size: 2,
+}) `
   color: var(--aui-on-surface);
   line-height: 1.3;
 
@@ -82,27 +104,30 @@
     opacity: var(--aui-state-layer-on-disabled);
     cursor: not-allowed;
   }
-`,HiddenInput=i.input`
+`;
+export const HiddenInput = styled.input `
   position: fixed;
   opacity: 0;
   pointer-events: none;
-`,toggleParentStyles=o`
+`;
+/** Add this style snippet to the label containing this ToggleCore component */
+export const toggleParentStyles = css `
   &:not(:has(input:disabled)) {
     &:hover
-      ${s}
-      ${a},
+      ${StyledCheckbox}
+      ${StateLayer},
       &:hover
-      ${t}
-      ${a} {
+      ${StyledRadio}
+      ${StateLayer} {
       opacity: var(--aui-state-layer-hover);
     }
 
     &:active
-      ${s}
-      ${a},
+      ${StyledCheckbox}
+      ${StateLayer},
       &:hover
-      ${t}
-      ${a} {
+      ${StyledRadio}
+      ${StateLayer} {
       opacity: var(--aui-state-layer-press);
     }
   }

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

@@ -1 +1,2 @@
-"use strict";export{ToggleCore}from"./toggleCore";export{toggleParentStyles}from"./elements";
+export { ToggleCore } from './toggleCore';
+export { toggleParentStyles } from './elements';

package/lib/src/core-components/src/core-components/ToggleCore/toggleCore.js

@@ -1 +1,14 @@
-"use strict";"use client";import{jsx as r,Fragment as u,jsxs as p}from"react/jsx-runtime";import l from"react";import{useId as g}from"../../utils";import{CheckboxToggle as x,RadioToggle as j,StyledDescription as k,HiddenInput as I}from"./elements";export const ToggleCore=l.forwardRef(({id:i,children:e,checked:t,isToggleShowing:a=!0,showInteraction:c=!0,onFocusChange:n,toggleType:o,indeterminate:s=!1,...d},f)=>{const m=g(o,i);return typeof e=="string"&&(e=r(k,{children:e})),p(u,{children:[a&&r(o==="checkbox"?x:j,{$checked:t??!1,$showInteraction:c,$indeterminate:s}),e,r(I,{readOnly:!0,id:m,ref:f,...d,checked:t,type:o,onFocus:()=>n?.(!0),onBlur:()=>n?.(!1),"aria-checked":s?"mixed":void 0})]})});
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useId } from '../../utils';
+import { CheckboxToggle, RadioToggle, StyledDescription, HiddenInput, } from './elements';
+/** To apply hover states, apply `toggleParentStyles` to the label containing this component */
+export const ToggleCore = React.forwardRef(({ id, children, checked, isToggleShowing = true, showInteraction = true, onFocusChange, toggleType, indeterminate = false, ...rest }, ref) => {
+    const inputId = useId(toggleType, id);
+    if (typeof children === 'string') {
+        children = _jsx(StyledDescription, { children: children });
+    }
+    const ToggleComponent = toggleType === 'checkbox' ? CheckboxToggle : RadioToggle;
+    return (_jsxs(_Fragment, { children: [isToggleShowing && (_jsx(ToggleComponent, { "$checked": checked ?? false, "$showInteraction": showInteraction, "$indeterminate": indeterminate })), children, _jsx(HiddenInput, { readOnly: true, id: inputId, ref: ref, ...rest, checked: checked, type: toggleType, onFocus: () => onFocusChange?.(true), onBlur: () => onFocusChange?.(false), "aria-checked": indeterminate ? 'mixed' : undefined })] }));
+});

package/lib/src/core-components/src/core-components/atoms/Input/Input.js

@@ -1 +1,22 @@
-"use strict";import{jsx as o,jsxs as y}from"react/jsx-runtime";import h from"react";import r from"../../../tc.module.css";import{cn as a}from"../../../utils";export const Input=h.forwardRef(({className:d,error:e,label:s,id:l,onChange:f,onBlur:i,onValueChange:c,onValueBlur:g,...n},m)=>{const u=l||`input-${Math.random().toString(36).substr(2,9)}`,p=t=>{f?.(t),c?.(t.target.value)},x=t=>{i?.(t),g?.(t.target.value)};return y("div",{className:a(r["w-full"]),children:[s&&o("label",{className:a(r.block,r["text-sm"],r["font-medium"],r["text-gray-700"],r["dark:text-gray-300"],r["mb-1"]),children:s}),o("input",{ref:m,id:u,className:a(r["w-full"],r["px-4"],r["py-2"],r.border,r["rounded-lg"],r["transition-colors"],r["bg-white"],r["dark:bg-gray-800"],r["border-gray-300"],r["dark:border-gray-600"],r["text-gray-900"],r["dark:text-gray-100"],r["placeholder-gray-500"],r["dark:placeholder-gray-400"],r["focus:outline-none"],r["focus:ring-2"],r["focus:ring-primary"],r["focus:ring-offset-1"],e&&r["border-red-500"],e&&r["focus:ring-red-500"],d),style:{...n.style,"--tw-ring-offset-color":"#ffffff"},onChange:p,onBlur:x,...n}),e&&o("p",{className:a(r["mt-1"],r["text-sm"],r["text-red-600"],r["dark:text-red-400"]),children:e})]})});Input.displayName="Input";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const Input = React.forwardRef(({ className, error, label, id, onChange, onBlur, onValueChange, onValueBlur, ...props }, ref) => {
+    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+    // Handle onChange - always pass event to onChange, value to onValueChange
+    const handleChange = (e) => {
+        onChange?.(e);
+        onValueChange?.(e.target.value);
+    };
+    // Handle onBlur - always pass event to onBlur, value to onValueBlur
+    const handleBlur = (e) => {
+        onBlur?.(e);
+        onValueBlur?.(e.target.value);
+    };
+    return (_jsxs("div", { className: cn(s['w-full']), children: [label && (_jsx("label", { className: cn(s['block'], s['text-sm'], s['font-medium'], s['text-gray-700'], s['dark:text-gray-300'], s['mb-1']), children: label })), _jsx("input", { ref: ref, id: inputId, className: cn(s['w-full'], s['px-4'], s['py-2'], s['border'], s['rounded-lg'], s['transition-colors'], s['bg-white'], s['dark:bg-gray-800'], s['border-gray-300'], s['dark:border-gray-600'], s['text-gray-900'], s['dark:text-gray-100'], s['placeholder-gray-500'], s['dark:placeholder-gray-400'], s['focus:outline-none'], s['focus:ring-2'], s['focus:ring-primary'], s['focus:ring-offset-1'], error && s['border-red-500'], error && s['focus:ring-red-500'], className), style: {
+                    ...props.style,
+                    '--tw-ring-offset-color': '#ffffff',
+                }, onChange: handleChange, onBlur: handleBlur, ...props }), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
+});
+Input.displayName = 'Input';