@flipdish/portal-library 7.3.3 → 7.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/Avatar/index.cjs.js +1 -1
- package/dist/components/atoms/Avatar/index.cjs.js.map +1 -1
- package/dist/components/atoms/Avatar/index.d.ts +48 -2
- package/dist/components/atoms/Avatar/index.js +1 -1
- package/dist/components/atoms/Avatar/index.js.map +1 -1
- package/dist/components/atoms/Radio/index.cjs.js +1 -1
- package/dist/components/atoms/Radio/index.cjs.js.map +1 -1
- package/dist/components/atoms/Radio/index.d.ts +14 -7
- package/dist/components/atoms/Radio/index.js +1 -1
- package/dist/components/atoms/Radio/index.js.map +1 -1
- package/dist/components/atoms/Switch/index.cjs.js +1 -1
- package/dist/components/atoms/Switch/index.cjs.js.map +1 -1
- package/dist/components/atoms/Switch/index.js +1 -1
- package/dist/components/atoms/Switch/index.js.map +1 -1
- package/dist/components/molecules/RadioGroup/index.cjs.js +1 -1
- package/dist/components/molecules/RadioGroup/index.cjs.js.map +1 -1
- package/dist/components/molecules/RadioGroup/index.d.ts +22 -11
- package/dist/components/molecules/RadioGroup/index.js +1 -1
- package/dist/components/molecules/RadioGroup/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/Avatar"),r=require("../../../themes/tokens/typography/font-family.cjs.js"),o=require("../../../themes/tokens/typography/font-size.cjs.js"),i=require("../../../themes/typography.cjs.js");const s=require("@mui/material/styles").styled(t,{shouldForwardProp:e=>"size"!==e&&"type"!==e})((({theme:e,size:t="medium",type:s})=>{const a={small:o.fontSize.desktop.caption,medium:o.fontSize.desktop.h4,large:o.fontSize.desktop.h3},l={small:"32",medium:"48",large:"64"}[t],n="photo"!==s?{borderRadius:"8px"}:{};return{fontStyle:"normal",fontWeight:600,fontFamily:r.fontFamily.desktop.body,fontSize:a[t],color:e.palette.grey[700],backgroundColor:"#f5f5f5",width:`${l}px`,height:`${l}px`,border:"1px solid #ddd",...n,[e.breakpoints.down("tablet")]:{...i.getMobileTextStyle({small:"caption",medium:"h4",large:"h3"}[t])}}}));module.exports=t=>{const{type:r,fdKey:o}=t;return e.jsx(s,{alt:t.alt||t.type,"data-fd":o,size:t.size,src:(()=>{switch(r){case"logo":case"photo":return t.src;default:return}})(),type:t.type,variant:"photo"===r?"circular":"rounded",children:(()=>{switch(r){case"icon":return t.icon;case"initials":return t.initials;default:return null}})()})};
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"sourcesContent":["import MuiAvatar, { type AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';\nimport type { CSSObject } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { fontSize } from '@fd/themes/tokens/typography/font-size';\nimport { getMobileTextStyle } from '@fd/themes/typography';\nimport styled from '@fd/utilities/styledUtilities';\n\ntype Size = 'large' | 'medium' | 'small' | undefined;\ntype Type = 'icon' | 'initials' | 'logo' | 'photo' | undefined;\n\ninterface CommonProps {\n /** Size of the avatar, defaults to 'medium' */\n size?: Size;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Alternative text for the avatar image */\n alt?: string;\n}\n\ninterface LogoProps {\n /** Type of avatar - displays a logo image */\n type: 'logo'\n /** Source URL for the logo image */\n src: string;\n /** Alternative text for the logo image */\n alt: string;\n}\n\ninterface PhotoProps {\n /** Type of avatar - displays a photo image */\n type: 'photo'\n /** Source URL for the photo image */\n src: string;\n /** Alternative text for the photo image */\n alt: string;\n}\n\ninterface InitialsProps {\n /** Type of avatar - displays initials text */\n type: 'initials'\n /** Initials text to display in the avatar */\n initials: string;\n}\n\ninterface IconProps {\n /** Type of avatar - displays an icon */\n type?: 'icon'\n /** Icon component to display in the avatar */\n icon?: React.ReactNode;\n}\n\n/** Props for the Avatar component */\nexport type AvatarProps = CommonProps & (IconProps | InitialsProps | LogoProps | PhotoProps);\n\ntype StyledAvatarProps = MuiAvatarProps & {\n size: Size;\n type: Type;\n}\n\nconst StyledAvatar = styled(MuiAvatar, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'type',\n})<StyledAvatarProps>(({ theme, size = 'medium', type }): CSSObject => {\n\n const pixels = {\n small: '32',\n medium: '48',\n large: '64'\n } as const;\n\n const fontSizes = {\n small: fontSize.desktop.caption,\n medium: fontSize.desktop.h4,\n large: fontSize.desktop.h3,\n }\n\n const mobileKeys = {\n small: 'caption' ,\n medium: 'h4',\n large: 'h3',\n } as const;\n\n const dim = pixels[size];\n\n const customBorderRadius = type !== 'photo' ? {\n borderRadius: '8px'\n } : {};\n\n return {\n fontStyle: 'normal',\n fontWeight: 600,\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSizes[size],\n color: theme.palette.grey[700],\n backgroundColor: '#f5f5f5',\n width: `${dim}px`,\n height: `${dim}px`,\n border: `1px solid #ddd`,\n ...customBorderRadius,\n [theme.breakpoints.down('tablet')]: {\n ...getMobileTextStyle(mobileKeys[size]), // mobile typography override\n },\n };\n});\n\n/**\n * Avatar component displays user avatars in different formats: photos, logos, initials, or icons.\n * The component automatically adjusts styling based on the avatar type - photos use circular shape\n * while logos use rounded corners. Size can be controlled via the size prop (small, medium, large).\n */\nconst Avatar: React.FC<AvatarProps> = (props) => {\n\n const { type, fdKey } = props;\n\n const getVariant = (): MuiAvatarProps['variant'] => {\n switch (type) {\n case 'photo':\n return 'circular'\n case 'logo':\n default:\n return 'rounded'\n }\n }\n\n const getChildren = (): React.ReactNode => {\n switch (type) {\n case 'icon':\n return props.icon;\n case 'initials':\n return props.initials;\n default:\n return null;\n }\n }\n\n const getSrc = (): string | undefined => {\n switch (type) {\n case 'logo':\n case 'photo':\n return props.src;\n default:\n return undefined;\n }\n }\n\n return (\n <StyledAvatar\n alt={props.alt || props.type}\n data-fd={fdKey}\n size={props.size}\n src={getSrc()}\n type={props.type}\n variant={getVariant()}>\n {getChildren()}\n </StyledAvatar>\n );\n};\n\nexport default Avatar;"],"names":["StyledAvatar","styled","MuiAvatar","shouldForwardProp","prop","theme","size","type","fontSizes","small","fontSize","desktop","caption","medium","h4","large","h3","dim","customBorderRadius","borderRadius","fontStyle","fontWeight","fontFamily","body","color","palette","grey","backgroundColor","width","height","border","breakpoints","down","getMobileTextStyle","props","fdKey","_jsx","alt","src","getSrc","variant","children","icon","initials","getChildren"],"mappings":"mQA4DA,MAAMA,kCAAeC,OAAOC,EAAW,CACnCC,kBAAoBC,GAAkB,SAATA,GAA4B,SAATA,GAD/BH,EAEC,EAAGI,QAAOC,OAAO,SAAUC,WAE7C,MAMMC,EAAY,CACdC,MAAOC,EAAAA,SAASC,QAAQC,QACxBC,OAAQH,EAAAA,SAASC,QAAQG,GACzBC,MAAOL,EAAAA,SAASC,QAAQK,IAStBC,EAlBS,CACXR,MAAO,KACPI,OAAQ,KACRE,MAAO,MAeQT,GAEbY,EAA8B,UAATX,EAAmB,CAC1CY,aAAc,OACd,CAAA,EAEJ,MAAO,CACHC,UAAW,SACXC,WAAY,IACZC,WAAYA,EAAAA,WAAWX,QAAQY,KAC/Bb,SAAUF,EAAUF,GACpBkB,MAAOnB,EAAMoB,QAAQC,KAAK,KAC1BC,gBAAiB,UACjBC,MAAO,GAAGX,MACVY,OAAQ,GAAGZ,MACXa,OAAQ,oBACLZ,EACH,CAACb,EAAM0B,YAAYC,KAAK,WAAY,IAC7BC,EAAAA,mBAxBQ,CACfxB,MAAO,UACPI,OAAQ,KACRE,MAAO,MAqB8BT,wBAUN4B,IAEnC,MAAM3B,KAAEA,EAAI4B,MAAEA,GAAUD,EAiCxB,OACIE,MAACpC,GACGqC,IAAKH,EAAMG,KAAOH,EAAM3B,KAAI,UACnB4B,EACT7B,KAAM4B,EAAM5B,KACZgC,IAfO,MACX,OAAQ/B,GACJ,IAAK,OACL,IAAK,QACD,OAAO2B,EAAMI,IACjB,QACI,SASCC,GACLhC,KAAM2B,EAAM3B,KACZiC,QApCK,UADDjC,EAEO,WAGA,UAgCUkC,SA5BT,MAChB,OAAQlC,GACJ,IAAK,OACD,OAAO2B,EAAMQ,KACjB,IAAK,WACD,OAAOR,EAAMS,SACjB,QACI,OAAO,OAsBVC"}
|
|
@@ -1,2 +1,48 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
type Size = 'large' | 'medium' | 'small' | undefined;
|
|
2
|
+
interface CommonProps {
|
|
3
|
+
/** Size of the avatar, defaults to 'medium' */
|
|
4
|
+
size?: Size;
|
|
5
|
+
/** Test ID for testing and automation */
|
|
6
|
+
fdKey?: string;
|
|
7
|
+
/** Alternative text for the avatar image */
|
|
8
|
+
alt?: string;
|
|
9
|
+
}
|
|
10
|
+
interface LogoProps {
|
|
11
|
+
/** Type of avatar - displays a logo image */
|
|
12
|
+
type: 'logo';
|
|
13
|
+
/** Source URL for the logo image */
|
|
14
|
+
src: string;
|
|
15
|
+
/** Alternative text for the logo image */
|
|
16
|
+
alt: string;
|
|
17
|
+
}
|
|
18
|
+
interface PhotoProps {
|
|
19
|
+
/** Type of avatar - displays a photo image */
|
|
20
|
+
type: 'photo';
|
|
21
|
+
/** Source URL for the photo image */
|
|
22
|
+
src: string;
|
|
23
|
+
/** Alternative text for the photo image */
|
|
24
|
+
alt: string;
|
|
25
|
+
}
|
|
26
|
+
interface InitialsProps {
|
|
27
|
+
/** Type of avatar - displays initials text */
|
|
28
|
+
type: 'initials';
|
|
29
|
+
/** Initials text to display in the avatar */
|
|
30
|
+
initials: string;
|
|
31
|
+
}
|
|
32
|
+
interface IconProps {
|
|
33
|
+
/** Type of avatar - displays an icon */
|
|
34
|
+
type?: 'icon';
|
|
35
|
+
/** Icon component to display in the avatar */
|
|
36
|
+
icon?: React.ReactNode;
|
|
37
|
+
}
|
|
38
|
+
/** Props for the Avatar component */
|
|
39
|
+
type AvatarProps = CommonProps & (IconProps | InitialsProps | LogoProps | PhotoProps);
|
|
40
|
+
/**
|
|
41
|
+
* Avatar component displays user avatars in different formats: photos, logos, initials, or icons.
|
|
42
|
+
* The component automatically adjusts styling based on the avatar type - photos use circular shape
|
|
43
|
+
* while logos use rounded corners. Size can be controlled via the size prop (small, medium, large).
|
|
44
|
+
*/
|
|
45
|
+
declare const Avatar: React.FC<AvatarProps>;
|
|
46
|
+
|
|
47
|
+
export { Avatar as default };
|
|
48
|
+
export type { AvatarProps };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import e from"@mui/material/Avatar";import{fontFamily as o}from"../../../themes/tokens/typography/font-family.js";import{fontSize as r}from"../../../themes/tokens/typography/font-size.js";import{getMobileTextStyle as a}from"../../../themes/typography.js";import{styled as i}from"@mui/material/styles";const s=i(e,{shouldForwardProp:t=>"size"!==t&&"type"!==t})((({theme:t,size:e="medium",type:i})=>{const s={small:r.desktop.caption,medium:r.desktop.h4,large:r.desktop.h3},m={small:"32",medium:"48",large:"64"}[e],p="photo"!==i?{borderRadius:"8px"}:{};return{fontStyle:"normal",fontWeight:600,fontFamily:o.desktop.body,fontSize:s[e],color:t.palette.grey[700],backgroundColor:"#f5f5f5",width:`${m}px`,height:`${m}px`,border:"1px solid #ddd",...p,[t.breakpoints.down("tablet")]:{...a({small:"caption",medium:"h4",large:"h3"}[e])}}})),m=e=>{const{type:o,fdKey:r}=e;return t(s,{alt:e.alt||e.type,"data-fd":r,size:e.size,src:(()=>{switch(o){case"logo":case"photo":return e.src;default:return}})(),type:e.type,variant:"photo"===o?"circular":"rounded",children:(()=>{switch(o){case"icon":return e.icon;case"initials":return e.initials;default:return null}})()})};export{m as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"sourcesContent":["import MuiAvatar, { type AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';\nimport type { CSSObject } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { fontSize } from '@fd/themes/tokens/typography/font-size';\nimport { getMobileTextStyle } from '@fd/themes/typography';\nimport styled from '@fd/utilities/styledUtilities';\n\ntype Size = 'large' | 'medium' | 'small' | undefined;\ntype Type = 'icon' | 'initials' | 'logo' | 'photo' | undefined;\n\ninterface CommonProps {\n /** Size of the avatar, defaults to 'medium' */\n size?: Size;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Alternative text for the avatar image */\n alt?: string;\n}\n\ninterface LogoProps {\n /** Type of avatar - displays a logo image */\n type: 'logo'\n /** Source URL for the logo image */\n src: string;\n /** Alternative text for the logo image */\n alt: string;\n}\n\ninterface PhotoProps {\n /** Type of avatar - displays a photo image */\n type: 'photo'\n /** Source URL for the photo image */\n src: string;\n /** Alternative text for the photo image */\n alt: string;\n}\n\ninterface InitialsProps {\n /** Type of avatar - displays initials text */\n type: 'initials'\n /** Initials text to display in the avatar */\n initials: string;\n}\n\ninterface IconProps {\n /** Type of avatar - displays an icon */\n type?: 'icon'\n /** Icon component to display in the avatar */\n icon?: React.ReactNode;\n}\n\n/** Props for the Avatar component */\nexport type AvatarProps = CommonProps & (IconProps | InitialsProps | LogoProps | PhotoProps);\n\ntype StyledAvatarProps = MuiAvatarProps & {\n size: Size;\n type: Type;\n}\n\nconst StyledAvatar = styled(MuiAvatar, {\n shouldForwardProp: (prop) => prop !== 'size' && prop !== 'type',\n})<StyledAvatarProps>(({ theme, size = 'medium', type }): CSSObject => {\n\n const pixels = {\n small: '32',\n medium: '48',\n large: '64'\n } as const;\n\n const fontSizes = {\n small: fontSize.desktop.caption,\n medium: fontSize.desktop.h4,\n large: fontSize.desktop.h3,\n }\n\n const mobileKeys = {\n small: 'caption' ,\n medium: 'h4',\n large: 'h3',\n } as const;\n\n const dim = pixels[size];\n\n const customBorderRadius = type !== 'photo' ? {\n borderRadius: '8px'\n } : {};\n\n return {\n fontStyle: 'normal',\n fontWeight: 600,\n fontFamily: fontFamily.desktop.body,\n fontSize: fontSizes[size],\n color: theme.palette.grey[700],\n backgroundColor: '#f5f5f5',\n width: `${dim}px`,\n height: `${dim}px`,\n border: `1px solid #ddd`,\n ...customBorderRadius,\n [theme.breakpoints.down('tablet')]: {\n ...getMobileTextStyle(mobileKeys[size]), // mobile typography override\n },\n };\n});\n\n/**\n * Avatar component displays user avatars in different formats: photos, logos, initials, or icons.\n * The component automatically adjusts styling based on the avatar type - photos use circular shape\n * while logos use rounded corners. Size can be controlled via the size prop (small, medium, large).\n */\nconst Avatar: React.FC<AvatarProps> = (props) => {\n\n const { type, fdKey } = props;\n\n const getVariant = (): MuiAvatarProps['variant'] => {\n switch (type) {\n case 'photo':\n return 'circular'\n case 'logo':\n default:\n return 'rounded'\n }\n }\n\n const getChildren = (): React.ReactNode => {\n switch (type) {\n case 'icon':\n return props.icon;\n case 'initials':\n return props.initials;\n default:\n return null;\n }\n }\n\n const getSrc = (): string | undefined => {\n switch (type) {\n case 'logo':\n case 'photo':\n return props.src;\n default:\n return undefined;\n }\n }\n\n return (\n <StyledAvatar\n alt={props.alt || props.type}\n data-fd={fdKey}\n size={props.size}\n src={getSrc()}\n type={props.type}\n variant={getVariant()}>\n {getChildren()}\n </StyledAvatar>\n );\n};\n\nexport default Avatar;"],"names":["StyledAvatar","styled","MuiAvatar","shouldForwardProp","prop","theme","size","type","fontSizes","small","fontSize","desktop","caption","medium","h4","large","h3","dim","customBorderRadius","borderRadius","fontStyle","fontWeight","fontFamily","body","color","palette","grey","backgroundColor","width","height","border","breakpoints","down","getMobileTextStyle","Avatar","props","fdKey","_jsx","alt","src","getSrc","variant","children","icon","initials","getChildren"],"mappings":"qVA4DA,MAAMA,EAAeC,EAAOC,EAAW,CACnCC,kBAAoBC,GAAkB,SAATA,GAA4B,SAATA,GAD/BH,EAEC,EAAGI,QAAOC,OAAO,SAAUC,WAE7C,MAMMC,EAAY,CACdC,MAAOC,EAASC,QAAQC,QACxBC,OAAQH,EAASC,QAAQG,GACzBC,MAAOL,EAASC,QAAQK,IAStBC,EAlBS,CACXR,MAAO,KACPI,OAAQ,KACRE,MAAO,MAeQT,GAEbY,EAA8B,UAATX,EAAmB,CAC1CY,aAAc,OACd,CAAA,EAEJ,MAAO,CACHC,UAAW,SACXC,WAAY,IACZC,WAAYA,EAAWX,QAAQY,KAC/Bb,SAAUF,EAAUF,GACpBkB,MAAOnB,EAAMoB,QAAQC,KAAK,KAC1BC,gBAAiB,UACjBC,MAAO,GAAGX,MACVY,OAAQ,GAAGZ,MACXa,OAAQ,oBACLZ,EACH,CAACb,EAAM0B,YAAYC,KAAK,WAAY,IAC7BC,EAxBQ,CACfxB,MAAO,UACPI,OAAQ,KACRE,MAAO,MAqB8BT,SAUvC4B,EAAiCC,IAEnC,MAAM5B,KAAEA,EAAI6B,MAAEA,GAAUD,EAiCxB,OACIE,EAACrC,GACGsC,IAAKH,EAAMG,KAAOH,EAAM5B,KAAI,UACnB6B,EACT9B,KAAM6B,EAAM7B,KACZiC,IAfO,MACX,OAAQhC,GACJ,IAAK,OACL,IAAK,QACD,OAAO4B,EAAMI,IACjB,QACI,SASCC,GACLjC,KAAM4B,EAAM5B,KACZkC,QApCK,UADDlC,EAEO,WAGA,UAgCUmC,SA5BT,MAChB,OAAQnC,GACJ,IAAK,OACD,OAAO4B,EAAMQ,KACjB,IAAK,WACD,OAAOR,EAAMS,SACjB,QACI,OAAO,OAsBVC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime")
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("@mui/material/Radio"),t=require("@mui/material/styles"),l=require("@mui/material/Box");const s=t.styled("span")((({theme:e})=>({display:"inline-flex",borderRadius:"50%",position:"relative","input:focus ~ &":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&::before":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"95%",height:"95%",borderRadius:"50%",pointerEvents:"none",opacity:0,transition:"opacity 150ms ease"}}))),r=({error:i=!1,disabled:l=!1,size:r="medium"})=>{const o=t.useTheme(),a=l?o.palette.semantic.fill["fill-disabled"]:i?o.palette.semantic.fill["fill-error-strong"]:o.palette.semantic.stroke["stroke-strong"],n="small"===r?24:32,d=i?o.palette.semantic.fill["fill-error-weak"]:o.palette.semantic.fill["fill-inverse-strong"];return e.jsx(s,{children:e.jsx("svg",{fill:"none",height:n,viewBox:"0 0 20 20",width:n,children:e.jsx("circle",{cx:"10",cy:"10",fill:d,r:"9",stroke:a,strokeWidth:"1"})})})},o=({error:i=!1,disabled:l=!1,size:r="medium"})=>{const o=t.useTheme(),a=l?o.palette.action.disabled:i?o.palette.semantic.fill["fill-error-strong"]:o.palette.semantic.fill["fill-selected"],n="small"===r?24:32;return e.jsx(s,{children:e.jsxs("svg",{fill:"none",height:n,viewBox:"0 0 20 20",width:n,children:[e.jsx("circle",{cx:"10",cy:"10",fill:a,r:"9",stroke:a,strokeWidth:"1"}),e.jsx("circle",{cx:"10",cy:"10",fill:o.palette.semantic.fill["fill-inverse-strong"],r:"3"})]})})},a=t.styled(i)((({theme:e})=>({padding:0,"&:hover:not(.Mui-disabled) span::before":{opacity:1,backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active:not(.Mui-disabled) span::before":{opacity:1,backgroundColor:e.palette.semantic.fill["fill-press"]}}))),n=t.styled(l)((()=>({margin:0,position:"relative"}))),d=({disabled:i=!1,size:t="medium",fdKey:l="basic-radio",error:s=!1,checked:d,...c})=>{const p=s&&!i;return e.jsx(n,{children:e.jsx(a,{disableFocusRipple:!0,disableRipple:!0,disableTouchRipple:!0,checked:d,checkedIcon:e.jsx(o,{disabled:i,error:p,size:t}),"data-fd":l,disabled:i,icon:e.jsx(r,{disabled:i,error:p,size:t}),size:t,...c})})};exports.Radio=d,exports.default=d;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Radio/index.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Radio/index.tsx"],"sourcesContent":["import MuiRadio, { type RadioProps as MuiRadioProps } from '@mui/material/Radio';\nimport { styled, useTheme } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\n\nconst IconWrapper = styled('span')(({ theme }) => ({\n display: 'inline-flex',\n borderRadius: '50%',\n position: 'relative',\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '95%',\n height: '95%',\n borderRadius: '50%',\n pointerEvents: 'none',\n opacity: 0,\n transition: 'opacity 150ms ease',\n },\n}));\n\n// Custom unchecked icon - gray or red border circle\nconst RadioUncheckedIcon = ({\n error = false,\n disabled = false,\n size = 'medium'\n}: {\n error?: boolean;\n disabled?: boolean;\n size?: 'medium' | 'small';\n}): React.ReactElement => {\n const theme = useTheme();\n const strokeColor = disabled\n ? theme.palette.semantic.fill['fill-disabled']\n : error\n ? theme.palette.semantic.fill['fill-error-strong']\n : theme.palette.semantic.stroke['stroke-strong'];\n const svgSize = size === 'small' ? 24 : 32;\n const fillBackground = error ? theme.palette.semantic.fill['fill-error-weak'] : theme.palette.semantic.fill['fill-inverse-strong'];\n return (\n <IconWrapper>\n <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n <circle\n cx=\"10\"\n cy=\"10\"\n fill={fillBackground}\n r=\"9\"\n stroke={strokeColor}\n strokeWidth=\"1\"\n />\n </svg>\n </IconWrapper>\n );\n};\n\n// Custom checked icon - blue or red filled circle with white center dot\nconst RadioCheckedIcon = ({\n error = false,\n disabled = false,\n size = 'medium'\n}: {\n error?: boolean;\n disabled?: boolean;\n size?: 'medium' | 'small';\n}): React.ReactElement => {\n const theme = useTheme();\n const fillColor = disabled\n ? theme.palette.action.disabled\n : error\n ? theme.palette.semantic.fill['fill-error-strong']\n : theme.palette.semantic.fill['fill-selected'];\n const svgSize = size === 'small' ? 24 : 32;\n return (\n <IconWrapper>\n <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n <circle\n cx=\"10\"\n cy=\"10\"\n fill={fillColor}\n r=\"9\"\n stroke={fillColor}\n strokeWidth=\"1\"\n />\n <circle\n cx=\"10\"\n cy=\"10\"\n fill={theme.palette.semantic.fill['fill-inverse-strong']}\n r=\"3\"\n />\n </svg>\n </IconWrapper>\n );\n};\n\n// Styled Radio with custom icons\nconst StyledRadio = styled(MuiRadio)(({ theme }) => ({\n padding: 0,\n '&:hover:not(.Mui-disabled) span::before': {\n opacity: 1,\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active:not(.Mui-disabled) span::before': {\n opacity: 1,\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n}));\n\n/** Props for a radio */\nexport type RadioProps = Omit<MuiRadioProps, 'size'> & {\n /** Whether the radio is disabled. */\n disabled?: boolean;\n /** The size of the radio. */\n size?: 'medium' | 'small';\n /** Whether the radio is required. */\n required?: boolean;\n /** The identifier of the radio. */\n fdKey?: string;\n /** Whether the radio is in an error state. */\n error?: boolean;\n};\n\nconst StyledRadioContainer = styled(Box)(() => ({\n margin: 0,\n position: 'relative',\n}));\n\n/**\n * Radio component is a wrapper component for a radio.\n *\n * @param checked - Whether the radio is checked.\n * @param size - The size of the radio.\n * @param fdKey - The identifier of the radio.\n * @param disabled - Whether the radio is disabled.\n * @param error - Whether the radio is in an error state.\n * @param props - Additional props to pass to the underlying MUI Radio component.\n * @returns The Radio component.\n */\nexport const Radio = ({\n disabled = false,\n size = 'medium',\n fdKey = 'basic-radio',\n error = false,\n checked,\n ...props\n}: RadioProps): React.ReactElement => {\n const isError = error && !disabled;\n\n return (\n <StyledRadioContainer>\n <StyledRadio\n disableFocusRipple\n disableRipple\n disableTouchRipple\n checked={checked}\n checkedIcon={<RadioCheckedIcon disabled={disabled} error={isError} size={size} />}\n data-fd={fdKey}\n disabled={disabled}\n icon={<RadioUncheckedIcon disabled={disabled} error={isError} size={size} />}\n size={size}\n {...props}\n />\n </StyledRadioContainer>\n );\n};\n\nexport default Radio;\n"],"names":["IconWrapper","styled","theme","display","borderRadius","position","outline","palette","semantic","stroke","outlineOffset","content","top","left","transform","width","height","pointerEvents","opacity","transition","RadioUncheckedIcon","error","disabled","size","useTheme","strokeColor","fill","svgSize","fillBackground","_jsx","children","viewBox","cx","cy","r","strokeWidth","RadioCheckedIcon","fillColor","action","_jsxs","StyledRadio","MuiRadio","padding","backgroundColor","StyledRadioContainer","Box","margin","Radio","fdKey","checked","props","isError","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","icon"],"mappings":"yMAKA,MAAMA,EAAcC,EAAAA,OAAO,OAAPA,EAAe,EAAGC,YAAO,CAC3CC,QAAS,cACTC,aAAc,MACdC,SAAU,WACV,kBAAmB,CACjBC,QAAS,aAAaJ,EAAMK,QAAQC,SAASC,OAAO,kBACpDC,cAAe,OAEjB,YAAa,CACXC,QAAS,KACTN,SAAU,WACVO,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,MAAO,MACPC,OAAQ,MACRZ,aAAc,MACda,cAAe,OACfC,QAAS,EACTC,WAAY,0BAKVC,EAAqB,EACzBC,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,EAAAA,WACRC,EAAcH,EAChBpB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BL,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASC,OAAO,iBAC9BkB,EAAmB,UAATJ,EAAmB,GAAK,GAClCK,EAAiBP,EAAQnB,EAAMK,QAAQC,SAASkB,KAAK,mBAAqBxB,EAAMK,QAAQC,SAASkB,KAAK,uBAC5G,OACEG,EAAAA,IAAC7B,EAAW,CAAA8B,SACVD,EAAAA,WAAKH,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,EAAOG,SAClED,EAAAA,IAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAME,EACNM,EAAE,IACFzB,OAAQgB,EACRU,YAAY,WAQhBC,EAAmB,EACvBf,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,EAAAA,WACRa,EAAYf,EACdpB,EAAMK,QAAQ+B,OAAOhB,SACrBD,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BC,EAAmB,UAATJ,EAAmB,GAAK,GACxC,OACEM,MAAC7B,EAAW,CAAA8B,SACVS,EAAAA,KAAA,MAAA,CAAKb,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,YAC3DE,EAAAA,IAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAMW,EACNH,EAAE,IACFzB,OAAQ4B,EACRF,YAAY,MAEdN,EAAAA,IAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAMxB,EAAMK,QAAQC,SAASkB,KAAK,uBAClCQ,EAAE,YAQNM,EAAcvC,EAAAA,OAAOwC,EAAPxC,EAAiB,EAAGC,YAAO,CAC7CwC,QAAS,EACT,0CAA2C,CACzCxB,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,eAE/C,2CAA4C,CAC1CR,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,mBAkB3CkB,EAAuB3C,EAAAA,OAAO4C,EAAP5C,EAAY,KAAA,CACvC6C,OAAQ,EACRzC,SAAU,eAcC0C,EAAQ,EACnBzB,YAAW,EACXC,OAAO,SACPyB,QAAQ,cACR3B,SAAQ,EACR4B,aACGC,MAEH,MAAMC,EAAU9B,IAAUC,EAE1B,OACEO,EAAAA,IAACe,EAAoB,CAAAd,SACnBD,EAAAA,IAACW,EAAW,CACVY,oBAAkB,EAClBC,eAAa,EACbC,sBACAL,QAASA,EACTM,YAAa1B,EAAAA,IAACO,GAAiBd,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IAAQ,UACxEyB,EACT1B,SAAUA,EACVkC,KAAM3B,EAAAA,IAACT,EAAkB,CAACE,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IACpEA,KAAMA,KACF2B"}
|
|
@@ -1,23 +1,30 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
1
|
import { RadioProps as RadioProps$1 } from '@mui/material/Radio';
|
|
3
2
|
|
|
3
|
+
/** Props for a radio */
|
|
4
4
|
type RadioProps = Omit<RadioProps$1, 'size'> & {
|
|
5
5
|
/** Whether the radio is disabled. */
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
/** The size of the radio. */
|
|
8
8
|
size?: 'medium' | 'small';
|
|
9
|
-
/** The label of the radio. */
|
|
10
|
-
label?: ReactNode;
|
|
11
9
|
/** Whether the radio is required. */
|
|
12
10
|
required?: boolean;
|
|
13
11
|
/** The identifier of the radio. */
|
|
14
12
|
fdKey?: string;
|
|
15
13
|
/** Whether the radio is in an error state. */
|
|
16
14
|
error?: boolean;
|
|
17
|
-
/** The children of the radio. */
|
|
18
|
-
children?: ReactNode;
|
|
19
15
|
};
|
|
20
|
-
|
|
16
|
+
/**
|
|
17
|
+
* Radio component is a wrapper component for a radio.
|
|
18
|
+
*
|
|
19
|
+
* @param checked - Whether the radio is checked.
|
|
20
|
+
* @param size - The size of the radio.
|
|
21
|
+
* @param fdKey - The identifier of the radio.
|
|
22
|
+
* @param disabled - Whether the radio is disabled.
|
|
23
|
+
* @param error - Whether the radio is in an error state.
|
|
24
|
+
* @param props - Additional props to pass to the underlying MUI Radio component.
|
|
25
|
+
* @returns The Radio component.
|
|
26
|
+
*/
|
|
27
|
+
declare const Radio: ({ disabled, size, fdKey, error, checked, ...props }: RadioProps) => React.ReactElement;
|
|
21
28
|
|
|
22
|
-
export { Radio as default };
|
|
29
|
+
export { Radio, Radio as default };
|
|
23
30
|
export type { RadioProps };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsx as e,jsxs as i}from"react/jsx-runtime";import t from"@mui/material/Radio";import{styled as l,useTheme as r}from"@mui/material/styles";import o from"@mui/material/Box";const s=l("span")((({theme:e})=>({display:"inline-flex",borderRadius:"50%",position:"relative","input:focus ~ &":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&::before":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"95%",height:"95%",borderRadius:"50%",pointerEvents:"none",opacity:0,transition:"opacity 150ms ease"}}))),a=({error:i=!1,disabled:t=!1,size:l="medium"})=>{const o=r(),a=t?o.palette.semantic.fill["fill-disabled"]:i?o.palette.semantic.fill["fill-error-strong"]:o.palette.semantic.stroke["stroke-strong"],n="small"===l?24:32,c=i?o.palette.semantic.fill["fill-error-weak"]:o.palette.semantic.fill["fill-inverse-strong"];return e(s,{children:e("svg",{fill:"none",height:n,viewBox:"0 0 20 20",width:n,children:e("circle",{cx:"10",cy:"10",fill:c,r:"9",stroke:a,strokeWidth:"1"})})})},n=({error:t=!1,disabled:l=!1,size:o="medium"})=>{const a=r(),n=l?a.palette.action.disabled:t?a.palette.semantic.fill["fill-error-strong"]:a.palette.semantic.fill["fill-selected"],c="small"===o?24:32;return e(s,{children:i("svg",{fill:"none",height:c,viewBox:"0 0 20 20",width:c,children:[e("circle",{cx:"10",cy:"10",fill:n,r:"9",stroke:n,strokeWidth:"1"}),e("circle",{cx:"10",cy:"10",fill:a.palette.semantic.fill["fill-inverse-strong"],r:"3"})]})})},c=l(t)((({theme:e})=>({padding:0,"&:hover:not(.Mui-disabled) span::before":{opacity:1,backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active:not(.Mui-disabled) span::before":{opacity:1,backgroundColor:e.palette.semantic.fill["fill-press"]}}))),d=l(o)((()=>({margin:0,position:"relative"}))),p=({disabled:i=!1,size:t="medium",fdKey:l="basic-radio",error:r=!1,checked:o,...s})=>{const p=r&&!i;return e(d,{children:e(c,{disableFocusRipple:!0,disableRipple:!0,disableTouchRipple:!0,checked:o,checkedIcon:e(n,{disabled:i,error:p,size:t}),"data-fd":l,disabled:i,icon:e(a,{disabled:i,error:p,size:t}),size:t,...s})})};export{p as Radio,p as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Radio/index.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Radio/index.tsx"],"sourcesContent":["import MuiRadio, { type RadioProps as MuiRadioProps } from '@mui/material/Radio';\nimport { styled, useTheme } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\n\nconst IconWrapper = styled('span')(({ theme }) => ({\n display: 'inline-flex',\n borderRadius: '50%',\n position: 'relative',\n 'input:focus ~ &': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '95%',\n height: '95%',\n borderRadius: '50%',\n pointerEvents: 'none',\n opacity: 0,\n transition: 'opacity 150ms ease',\n },\n}));\n\n// Custom unchecked icon - gray or red border circle\nconst RadioUncheckedIcon = ({\n error = false,\n disabled = false,\n size = 'medium'\n}: {\n error?: boolean;\n disabled?: boolean;\n size?: 'medium' | 'small';\n}): React.ReactElement => {\n const theme = useTheme();\n const strokeColor = disabled\n ? theme.palette.semantic.fill['fill-disabled']\n : error\n ? theme.palette.semantic.fill['fill-error-strong']\n : theme.palette.semantic.stroke['stroke-strong'];\n const svgSize = size === 'small' ? 24 : 32;\n const fillBackground = error ? theme.palette.semantic.fill['fill-error-weak'] : theme.palette.semantic.fill['fill-inverse-strong'];\n return (\n <IconWrapper>\n <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n <circle\n cx=\"10\"\n cy=\"10\"\n fill={fillBackground}\n r=\"9\"\n stroke={strokeColor}\n strokeWidth=\"1\"\n />\n </svg>\n </IconWrapper>\n );\n};\n\n// Custom checked icon - blue or red filled circle with white center dot\nconst RadioCheckedIcon = ({\n error = false,\n disabled = false,\n size = 'medium'\n}: {\n error?: boolean;\n disabled?: boolean;\n size?: 'medium' | 'small';\n}): React.ReactElement => {\n const theme = useTheme();\n const fillColor = disabled\n ? theme.palette.action.disabled\n : error\n ? theme.palette.semantic.fill['fill-error-strong']\n : theme.palette.semantic.fill['fill-selected'];\n const svgSize = size === 'small' ? 24 : 32;\n return (\n <IconWrapper>\n <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n <circle\n cx=\"10\"\n cy=\"10\"\n fill={fillColor}\n r=\"9\"\n stroke={fillColor}\n strokeWidth=\"1\"\n />\n <circle\n cx=\"10\"\n cy=\"10\"\n fill={theme.palette.semantic.fill['fill-inverse-strong']}\n r=\"3\"\n />\n </svg>\n </IconWrapper>\n );\n};\n\n// Styled Radio with custom icons\nconst StyledRadio = styled(MuiRadio)(({ theme }) => ({\n padding: 0,\n '&:hover:not(.Mui-disabled) span::before': {\n opacity: 1,\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active:not(.Mui-disabled) span::before': {\n opacity: 1,\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n}));\n\n/** Props for a radio */\nexport type RadioProps = Omit<MuiRadioProps, 'size'> & {\n /** Whether the radio is disabled. */\n disabled?: boolean;\n /** The size of the radio. */\n size?: 'medium' | 'small';\n /** Whether the radio is required. */\n required?: boolean;\n /** The identifier of the radio. */\n fdKey?: string;\n /** Whether the radio is in an error state. */\n error?: boolean;\n};\n\nconst StyledRadioContainer = styled(Box)(() => ({\n margin: 0,\n position: 'relative',\n}));\n\n/**\n * Radio component is a wrapper component for a radio.\n *\n * @param checked - Whether the radio is checked.\n * @param size - The size of the radio.\n * @param fdKey - The identifier of the radio.\n * @param disabled - Whether the radio is disabled.\n * @param error - Whether the radio is in an error state.\n * @param props - Additional props to pass to the underlying MUI Radio component.\n * @returns The Radio component.\n */\nexport const Radio = ({\n disabled = false,\n size = 'medium',\n fdKey = 'basic-radio',\n error = false,\n checked,\n ...props\n}: RadioProps): React.ReactElement => {\n const isError = error && !disabled;\n\n return (\n <StyledRadioContainer>\n <StyledRadio\n disableFocusRipple\n disableRipple\n disableTouchRipple\n checked={checked}\n checkedIcon={<RadioCheckedIcon disabled={disabled} error={isError} size={size} />}\n data-fd={fdKey}\n disabled={disabled}\n icon={<RadioUncheckedIcon disabled={disabled} error={isError} size={size} />}\n size={size}\n {...props}\n />\n </StyledRadioContainer>\n );\n};\n\nexport default Radio;\n"],"names":["IconWrapper","styled","theme","display","borderRadius","position","outline","palette","semantic","stroke","outlineOffset","content","top","left","transform","width","height","pointerEvents","opacity","transition","RadioUncheckedIcon","error","disabled","size","useTheme","strokeColor","fill","svgSize","fillBackground","_jsx","children","viewBox","cx","cy","r","strokeWidth","RadioCheckedIcon","fillColor","action","_jsxs","StyledRadio","MuiRadio","padding","backgroundColor","StyledRadioContainer","Box","margin","Radio","fdKey","checked","props","isError","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","icon"],"mappings":"kLAKA,MAAMA,EAAcC,EAAO,OAAPA,EAAe,EAAGC,YAAO,CAC3CC,QAAS,cACTC,aAAc,MACdC,SAAU,WACV,kBAAmB,CACjBC,QAAS,aAAaJ,EAAMK,QAAQC,SAASC,OAAO,kBACpDC,cAAe,OAEjB,YAAa,CACXC,QAAS,KACTN,SAAU,WACVO,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,MAAO,MACPC,OAAQ,MACRZ,aAAc,MACda,cAAe,OACfC,QAAS,EACTC,WAAY,0BAKVC,EAAqB,EACzBC,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,IACRC,EAAcH,EAChBpB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BL,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASC,OAAO,iBAC9BkB,EAAmB,UAATJ,EAAmB,GAAK,GAClCK,EAAiBP,EAAQnB,EAAMK,QAAQC,SAASkB,KAAK,mBAAqBxB,EAAMK,QAAQC,SAASkB,KAAK,uBAC5G,OACEG,EAAC7B,EAAW,CAAA8B,SACVD,SAAKH,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,EAAOG,SAClED,EAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAME,EACNM,EAAE,IACFzB,OAAQgB,EACRU,YAAY,WAQhBC,EAAmB,EACvBf,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,IACRa,EAAYf,EACdpB,EAAMK,QAAQ+B,OAAOhB,SACrBD,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BC,EAAmB,UAATJ,EAAmB,GAAK,GACxC,OACEM,EAAC7B,EAAW,CAAA8B,SACVS,EAAA,MAAA,CAAKb,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,YAC3DE,EAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAMW,EACNH,EAAE,IACFzB,OAAQ4B,EACRF,YAAY,MAEdN,EAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAMxB,EAAMK,QAAQC,SAASkB,KAAK,uBAClCQ,EAAE,YAQNM,EAAcvC,EAAOwC,EAAPxC,EAAiB,EAAGC,YAAO,CAC7CwC,QAAS,EACT,0CAA2C,CACzCxB,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,eAE/C,2CAA4C,CAC1CR,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,mBAkB3CkB,EAAuB3C,EAAO4C,EAAP5C,EAAY,KAAA,CACvC6C,OAAQ,EACRzC,SAAU,eAcC0C,EAAQ,EACnBzB,YAAW,EACXC,OAAO,SACPyB,QAAQ,cACR3B,SAAQ,EACR4B,aACGC,MAEH,MAAMC,EAAU9B,IAAUC,EAE1B,OACEO,EAACe,EAAoB,CAAAd,SACnBD,EAACW,EAAW,CACVY,oBAAkB,EAClBC,eAAa,EACbC,sBACAL,QAASA,EACTM,YAAa1B,EAACO,GAAiBd,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IAAQ,UACxEyB,EACT1B,SAAUA,EACVkC,KAAM3B,EAACT,EAAkB,CAACE,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IACpEA,KAAMA,KACF2B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/FormControlLabel"),i=require("@mui/material/Switch"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/FormControlLabel"),i=require("@mui/material/Switch"),a=require("@mui/material/styles");const o=a.styled(t)((({theme:e,$size:t="medium"})=>({color:e.palette.semantic.text["text-strong"],gap:"12px",margin:0,"& .MuiFormControlLabel-label":{...e.typography["small"===t?"captionWeak":"b1Weak"]}}))),l=a.styled(i)((({theme:e,$size:t="medium",checked:i})=>{const a="small"===t,o=a?24:32,l=a?24:32;return{width:a?48:64,height:o,padding:0,overflow:"visible","& .MuiSwitch-switchBase":{padding:0,transitionDuration:"200ms","&.Mui-checked":{transform:`translateX(${a?24:32}px)`,color:e.palette.semantic.fill["fill-white"],"& .MuiSwitch-thumb":{borderColor:e.palette.semantic.stroke["stroke-selected"]},"& + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],opacity:1},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"&.Mui-focusVisible + .MuiSwitch-track":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&.Mui-disabled .MuiSwitch-thumb":{opacity:.5,borderColor:e.palette.semantic.stroke["stroke-disabled"],backgroundColor:e.palette.semantic.background["background-raised"]},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"& .MuiSwitch-thumb":{width:l,height:l,backgroundColor:e.palette.semantic.background["background-raised"],border:`2px solid ${e.palette.semantic.stroke["stroke-strong"]}`,transition:e.transitions.create(["border-color"],{duration:200})},"& .MuiSwitch-track":{borderRadius:o,backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,boxShadow:i?"none":e.customShadows?.sunken,opacity:1,transition:e.transitions.create(["background-color","border-color","outline"],{duration:200})},"&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-press"]}}}));module.exports=({checked:t,disabled:i=!1,label:a,labelPlacement:r="end",onChange:s,size:c="medium",fdKey:d})=>a?e.jsx(o,{$size:c,control:e.jsx(l,{disableRipple:!0,$size:c,checked:t,"data-fd":d,disabled:i,onChange:s}),disabled:i,label:a,labelPlacement:r}):e.jsx(l,{disableRipple:!0,$size:c,checked:t,"data-fd":d,disabled:i,onChange:s});
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel)<{ $size?: 'medium' | 'small' }>(({ theme, $size = 'medium' }) => ({\n color: theme.palette.semantic.text['text-strong'],\n gap: '12px',\n margin: 0,\n '& .MuiFormControlLabel-label': {\n ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n },\n}));\n\nconst StyledSwitch = styled(MuiSwitch)<{ $size?: 'medium' | 'small' }>(({ theme, $size = 'medium', checked }) => {\n const isSmall = $size === 'small';\n const width = isSmall ? 48 : 64;\n const height = isSmall ? 24 : 32;\n const thumbSize = isSmall ? 24 : 32;\n const translateX = isSmall ? 24 : 32;\n\n return {\n width,\n height,\n padding: 0,\n overflow: 'visible',\n '& .MuiSwitch-switchBase': {\n padding: 0,\n transitionDuration: '200ms',\n '&.Mui-checked': {\n transform: `translateX(${translateX}px)`,\n color: theme.palette.semantic.fill['fill-white'],\n '& .MuiSwitch-thumb': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n },\n '& + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n opacity: 1,\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity:
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel)<{ $size?: 'medium' | 'small' }>(({ theme, $size = 'medium' }) => ({\n color: theme.palette.semantic.text['text-strong'],\n gap: '12px',\n margin: 0,\n '& .MuiFormControlLabel-label': {\n ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n },\n}));\n\nconst StyledSwitch = styled(MuiSwitch)<{ $size?: 'medium' | 'small' }>(({ theme, $size = 'medium', checked }) => {\n const isSmall = $size === 'small';\n const width = isSmall ? 48 : 64;\n const height = isSmall ? 24 : 32;\n const thumbSize = isSmall ? 24 : 32;\n const translateX = isSmall ? 24 : 32;\n\n return {\n width,\n height,\n padding: 0,\n overflow: 'visible',\n '& .MuiSwitch-switchBase': {\n padding: 0,\n transitionDuration: '200ms',\n '&.Mui-checked': {\n transform: `translateX(${translateX}px)`,\n color: theme.palette.semantic.fill['fill-white'],\n '& .MuiSwitch-thumb': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n },\n '& + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n opacity: 1,\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '&.Mui-focusVisible + .MuiSwitch-track': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&.Mui-disabled .MuiSwitch-thumb': {\n opacity: 0.5,\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n backgroundColor: theme.palette.semantic.background['background-raised'],\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '& .MuiSwitch-thumb': {\n width: thumbSize,\n height: thumbSize,\n backgroundColor: theme.palette.semantic.background['background-raised'],\n border: `2px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n transition: theme.transitions.create(['border-color'], {\n duration: 200,\n }),\n },\n '& .MuiSwitch-track': {\n borderRadius: height,\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n boxShadow: checked ? 'none' : theme.customShadows?.sunken,\n opacity: 1,\n transition: theme.transitions.create(['background-color', 'border-color', 'outline'], {\n duration: 200,\n }),\n },\n '&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n };\n});\n\nexport interface SwitchProps {\n /** Whether the switch is checked (on) or unchecked (off) */\n checked?: boolean;\n /** Whether the switch is disabled and cannot be interacted with */\n disabled?: boolean;\n /** Optional label text to display next to the switch */\n label?: string;\n /** Position of the label relative to the switch. Options: 'start', 'end', 'top', 'bottom'. Default: 'end' */\n labelPlacement?: FormControlLabelProps['labelPlacement'];\n /** Callback fired when the switch state changes. Receives the event and checked state */\n onChange?: MuiSwitchProps['onChange'];\n /** Size of the switch. Options: 'small' (48x24px), 'medium' (64x32px). Default: 'medium' */\n size?: 'medium' | 'small';\n /** Test ID for the switch element */\n fdKey: string;\n}\n\nconst Switch = ({ checked, disabled = false, label, labelPlacement = 'end', onChange, size = 'medium', fdKey }: SwitchProps): ReactElement => {\n if (!label) {\n return <StyledSwitch disableRipple $size={size} checked={checked} data-fd={fdKey} disabled={disabled} onChange={onChange} />;\n }\n\n return (\n <StyledFormControlLabel\n $size={size}\n control={<StyledSwitch disableRipple $size={size} checked={checked} data-fd={fdKey} disabled={disabled} onChange={onChange} />}\n disabled={disabled}\n label={label}\n labelPlacement={labelPlacement}\n />\n );\n};\n\nexport default Switch;\n"],"names":["StyledFormControlLabel","styled","FormControlLabel","theme","$size","color","palette","semantic","text","gap","margin","typography","StyledSwitch","MuiSwitch","checked","isSmall","height","thumbSize","width","padding","overflow","transitionDuration","transform","fill","borderColor","stroke","backgroundColor","opacity","outline","outlineOffset","background","border","transition","transitions","create","duration","borderRadius","boxShadow","customShadows","sunken","disabled","label","labelPlacement","onChange","size","fdKey","_jsx","control","disableRipple"],"mappings":"gKAMA,MAAMA,EAAyBC,EAAAA,OAAOC,EAAPD,EAAyD,EAAGE,QAAOC,QAAQ,aAAU,CAChHC,MAAOF,EAAMG,QAAQC,SAASC,KAAK,eACnCC,IAAK,OACLC,OAAQ,EACR,+BAAgC,IACzBP,EAAMQ,WAAqB,UAAVP,EAAoB,cAAgB,eAI1DQ,EAAeX,EAAAA,OAAOY,EAAPZ,EAAkD,EAAGE,QAAOC,QAAQ,SAAUU,cAC/F,MAAMC,EAAoB,UAAVX,EAEVY,EAASD,EAAU,GAAK,GACxBE,EAAYF,EAAU,GAAK,GAGjC,MAAO,CACHG,MANUH,EAAU,GAAK,GAOzBC,SACAG,QAAS,EACTC,SAAU,UACV,0BAA2B,CACvBD,QAAS,EACTE,mBAAoB,QACpB,gBAAiB,CACbC,UAAW,cAXJP,EAAU,GAAK,QAYtBV,MAAOF,EAAMG,QAAQC,SAASgB,KAAK,cACnC,qBAAsB,CAClBC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,oBAE/C,uBAAwB,CACpBC,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,GAEb,oCAAqC,CACjCD,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGjB,wCAAyC,CACrCC,QAAS,aAAazB,EAAMG,QAAQC,SAASkB,OAAO,kBACpDI,cAAe,OAEnB,kCAAmC,CAC/BF,QAAS,GACTH,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CC,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,sBAEvD,oCAAqC,CACjCJ,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGjB,qBAAsB,CAClBT,MAAOD,EACPD,OAAQC,EACRS,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,qBACnDC,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDO,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,gBAAiB,CACnDC,SAAU,OAGlB,qBAAsB,CAClBC,aAAcpB,EACdU,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,aAC7CQ,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDY,UAAWvB,EAAU,OAASX,EAAMmC,eAAeC,OACnDZ,QAAS,EACTK,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,mBAAoB,eAAgB,WAAY,CAClFC,SAAU,OAGlB,wFAAyF,CACrFT,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,eAEjD,yFAA0F,CACtFG,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,kCAsB1C,EAAGT,UAAS0B,YAAW,EAAOC,QAAOC,iBAAiB,MAAOC,WAAUC,OAAO,SAAUC,WAC9FJ,EAKDK,EAAAA,IAAC9C,SACU4C,EACPG,QAASD,MAAClC,EAAY,CAACoC,uBAAqBJ,EAAM9B,QAASA,YAAkB+B,EAAOL,SAAUA,EAAUG,SAAUA,IAClHH,SAAUA,EACVC,MAAOA,EACPC,eAAgBA,IATbI,EAAAA,IAAClC,EAAY,CAACoC,uBAAqBJ,EAAM9B,QAASA,YAAkB+B,EAAOL,SAAUA,EAAUG,SAAUA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/FormControlLabel";import i from"@mui/material/Switch";import{styled as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/FormControlLabel";import i from"@mui/material/Switch";import{styled as o}from"@mui/material/styles";const a=o(t)((({theme:e,$size:t="medium"})=>({color:e.palette.semantic.text["text-strong"],gap:"12px",margin:0,"& .MuiFormControlLabel-label":{...e.typography["small"===t?"captionWeak":"b1Weak"]}}))),l=o(i)((({theme:e,$size:t="medium",checked:i})=>{const o="small"===t,a=o?24:32,l=o?24:32;return{width:o?48:64,height:a,padding:0,overflow:"visible","& .MuiSwitch-switchBase":{padding:0,transitionDuration:"200ms","&.Mui-checked":{transform:`translateX(${o?24:32}px)`,color:e.palette.semantic.fill["fill-white"],"& .MuiSwitch-thumb":{borderColor:e.palette.semantic.stroke["stroke-selected"]},"& + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],opacity:1},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"&.Mui-focusVisible + .MuiSwitch-track":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&.Mui-disabled .MuiSwitch-thumb":{opacity:.5,borderColor:e.palette.semantic.stroke["stroke-disabled"],backgroundColor:e.palette.semantic.background["background-raised"]},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"& .MuiSwitch-thumb":{width:l,height:l,backgroundColor:e.palette.semantic.background["background-raised"],border:`2px solid ${e.palette.semantic.stroke["stroke-strong"]}`,transition:e.transitions.create(["border-color"],{duration:200})},"& .MuiSwitch-track":{borderRadius:a,backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,boxShadow:i?"none":e.customShadows?.sunken,opacity:1,transition:e.transitions.create(["background-color","border-color","outline"],{duration:200})},"&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-press"]}}})),r=({checked:t,disabled:i=!1,label:o,labelPlacement:r="end",onChange:s,size:c="medium",fdKey:d})=>o?e(a,{$size:c,control:e(l,{disableRipple:!0,$size:c,checked:t,"data-fd":d,disabled:i,onChange:s}),disabled:i,label:o,labelPlacement:r}):e(l,{disableRipple:!0,$size:c,checked:t,"data-fd":d,disabled:i,onChange:s});export{r as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel)<{ $size?: 'medium' | 'small' }>(({ theme, $size = 'medium' }) => ({\n color: theme.palette.semantic.text['text-strong'],\n gap: '12px',\n margin: 0,\n '& .MuiFormControlLabel-label': {\n ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n },\n}));\n\nconst StyledSwitch = styled(MuiSwitch)<{ $size?: 'medium' | 'small' }>(({ theme, $size = 'medium', checked }) => {\n const isSmall = $size === 'small';\n const width = isSmall ? 48 : 64;\n const height = isSmall ? 24 : 32;\n const thumbSize = isSmall ? 24 : 32;\n const translateX = isSmall ? 24 : 32;\n\n return {\n width,\n height,\n padding: 0,\n overflow: 'visible',\n '& .MuiSwitch-switchBase': {\n padding: 0,\n transitionDuration: '200ms',\n '&.Mui-checked': {\n transform: `translateX(${translateX}px)`,\n color: theme.palette.semantic.fill['fill-white'],\n '& .MuiSwitch-thumb': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n },\n '& + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n opacity: 1,\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity:
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel)<{ $size?: 'medium' | 'small' }>(({ theme, $size = 'medium' }) => ({\n color: theme.palette.semantic.text['text-strong'],\n gap: '12px',\n margin: 0,\n '& .MuiFormControlLabel-label': {\n ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n },\n}));\n\nconst StyledSwitch = styled(MuiSwitch)<{ $size?: 'medium' | 'small' }>(({ theme, $size = 'medium', checked }) => {\n const isSmall = $size === 'small';\n const width = isSmall ? 48 : 64;\n const height = isSmall ? 24 : 32;\n const thumbSize = isSmall ? 24 : 32;\n const translateX = isSmall ? 24 : 32;\n\n return {\n width,\n height,\n padding: 0,\n overflow: 'visible',\n '& .MuiSwitch-switchBase': {\n padding: 0,\n transitionDuration: '200ms',\n '&.Mui-checked': {\n transform: `translateX(${translateX}px)`,\n color: theme.palette.semantic.fill['fill-white'],\n '& .MuiSwitch-thumb': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n },\n '& + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n opacity: 1,\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '&.Mui-focusVisible + .MuiSwitch-track': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&.Mui-disabled .MuiSwitch-thumb': {\n opacity: 0.5,\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n backgroundColor: theme.palette.semantic.background['background-raised'],\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '& .MuiSwitch-thumb': {\n width: thumbSize,\n height: thumbSize,\n backgroundColor: theme.palette.semantic.background['background-raised'],\n border: `2px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n transition: theme.transitions.create(['border-color'], {\n duration: 200,\n }),\n },\n '& .MuiSwitch-track': {\n borderRadius: height,\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n boxShadow: checked ? 'none' : theme.customShadows?.sunken,\n opacity: 1,\n transition: theme.transitions.create(['background-color', 'border-color', 'outline'], {\n duration: 200,\n }),\n },\n '&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n };\n});\n\nexport interface SwitchProps {\n /** Whether the switch is checked (on) or unchecked (off) */\n checked?: boolean;\n /** Whether the switch is disabled and cannot be interacted with */\n disabled?: boolean;\n /** Optional label text to display next to the switch */\n label?: string;\n /** Position of the label relative to the switch. Options: 'start', 'end', 'top', 'bottom'. Default: 'end' */\n labelPlacement?: FormControlLabelProps['labelPlacement'];\n /** Callback fired when the switch state changes. Receives the event and checked state */\n onChange?: MuiSwitchProps['onChange'];\n /** Size of the switch. Options: 'small' (48x24px), 'medium' (64x32px). Default: 'medium' */\n size?: 'medium' | 'small';\n /** Test ID for the switch element */\n fdKey: string;\n}\n\nconst Switch = ({ checked, disabled = false, label, labelPlacement = 'end', onChange, size = 'medium', fdKey }: SwitchProps): ReactElement => {\n if (!label) {\n return <StyledSwitch disableRipple $size={size} checked={checked} data-fd={fdKey} disabled={disabled} onChange={onChange} />;\n }\n\n return (\n <StyledFormControlLabel\n $size={size}\n control={<StyledSwitch disableRipple $size={size} checked={checked} data-fd={fdKey} disabled={disabled} onChange={onChange} />}\n disabled={disabled}\n label={label}\n labelPlacement={labelPlacement}\n />\n );\n};\n\nexport default Switch;\n"],"names":["StyledFormControlLabel","styled","FormControlLabel","theme","$size","color","palette","semantic","text","gap","margin","typography","StyledSwitch","MuiSwitch","checked","isSmall","height","thumbSize","width","padding","overflow","transitionDuration","transform","fill","borderColor","stroke","backgroundColor","opacity","outline","outlineOffset","background","border","transition","transitions","create","duration","borderRadius","boxShadow","customShadows","sunken","Switch","disabled","label","labelPlacement","onChange","size","fdKey","_jsx","control","disableRipple"],"mappings":"wKAMA,MAAMA,EAAyBC,EAAOC,EAAPD,EAAyD,EAAGE,QAAOC,QAAQ,aAAU,CAChHC,MAAOF,EAAMG,QAAQC,SAASC,KAAK,eACnCC,IAAK,OACLC,OAAQ,EACR,+BAAgC,IACzBP,EAAMQ,WAAqB,UAAVP,EAAoB,cAAgB,eAI1DQ,EAAeX,EAAOY,EAAPZ,EAAkD,EAAGE,QAAOC,QAAQ,SAAUU,cAC/F,MAAMC,EAAoB,UAAVX,EAEVY,EAASD,EAAU,GAAK,GACxBE,EAAYF,EAAU,GAAK,GAGjC,MAAO,CACHG,MANUH,EAAU,GAAK,GAOzBC,SACAG,QAAS,EACTC,SAAU,UACV,0BAA2B,CACvBD,QAAS,EACTE,mBAAoB,QACpB,gBAAiB,CACbC,UAAW,cAXJP,EAAU,GAAK,QAYtBV,MAAOF,EAAMG,QAAQC,SAASgB,KAAK,cACnC,qBAAsB,CAClBC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,oBAE/C,uBAAwB,CACpBC,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,GAEb,oCAAqC,CACjCD,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGjB,wCAAyC,CACrCC,QAAS,aAAazB,EAAMG,QAAQC,SAASkB,OAAO,kBACpDI,cAAe,OAEnB,kCAAmC,CAC/BF,QAAS,GACTH,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CC,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,sBAEvD,oCAAqC,CACjCJ,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGjB,qBAAsB,CAClBT,MAAOD,EACPD,OAAQC,EACRS,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,qBACnDC,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDO,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,gBAAiB,CACnDC,SAAU,OAGlB,qBAAsB,CAClBC,aAAcpB,EACdU,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,aAC7CQ,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDY,UAAWvB,EAAU,OAASX,EAAMmC,eAAeC,OACnDZ,QAAS,EACTK,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,mBAAoB,eAAgB,WAAY,CAClFC,SAAU,OAGlB,wFAAyF,CACrFT,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,eAEjD,yFAA0F,CACtFG,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,mBAsBnDiB,EAAS,EAAG1B,UAAS2B,YAAW,EAAOC,QAAOC,iBAAiB,MAAOC,WAAUC,OAAO,SAAUC,WAC9FJ,EAKDK,EAAC/C,SACU6C,EACPG,QAASD,EAACnC,EAAY,CAACqC,uBAAqBJ,EAAM/B,QAASA,YAAkBgC,EAAOL,SAAUA,EAAUG,SAAUA,IAClHH,SAAUA,EACVC,MAAOA,EACPC,eAAgBA,IATbI,EAACnC,EAAY,CAACqC,uBAAqBJ,EAAM/B,QAASA,YAAkBgC,EAAOL,SAAUA,EAAUG,SAAUA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/FormHelperText"),l=require("@mui/material/FormLabel"),a=require("@mui/material/RadioGroup"),t=require("@mui/material/styles"),n=require("@mui/material/Box");require("@mui/material/FormControlLabel");var o=require("../../../icons/CancelCircle/index.cjs.js");const s=t.styled(n)((({theme:e})=>({marginTop:e.spacing(2),marginBottom:0}))),d=t.styled(n)((({theme:e})=>({display:"flex",flexDirection:"column",marginBottom:e.spacing(.5)}))),c=t.styled(n)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),borderLeft:`4px solid ${e.palette.semantic.stroke["stroke-weak"]}`,marginTop:e.spacing(2),marginLeft:e.spacing(1.75),paddingLeft:e.spacing(3.25)}))),m=t.styled("span")((({theme:e})=>({color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(.5)}))),u=({fdKey:t="radio-default",value:u="",onChange:p,label:x,required:h=!1,helperText:g,errorText:f,children:j,...v})=>{const y=`${t}-label`,b=g?`${t}-helper`:void 0,q=f?`${t}-error`:void 0,C=[b,q].filter(Boolean).join(" ")||void 0;return e.jsxs(n,{children:[e.jsxs(d,{children:[e.jsxs(l,{id:y,children:[x," ",h&&e.jsx(m,{children:" *"})]}),g?e.jsx(i,{id:b,children:g}):null,!!f&&e.jsxs(i,{error:!0,id:q,children:[e.jsx(o,{size:"md"}),f]})]}),e.jsx(a,{"aria-describedby":C,"aria-invalid":!!f||void 0,"aria-labelledby":y,name:t,onChange:(e,r)=>p(e,r),value:u,...v,children:r.Children.map(j,(i=>{if(!r.isValidElement(i))return i;const l=i.props;if(!("value"in l)||!("control"in l))return i;const a=l,n="string"==typeof a.value?a.value:String(a.value??""),o=u===n,d=a.control,m=a.children,p=r.isValidElement(d)?r.cloneElement(d,{...d.props,checked:o,error:!!f,name:t}):d;return e.jsxs(s,{children:[r.cloneElement(i,{...a,children:void 0,control:p}),o&&m&&e.jsx(c,{children:m})]},n)}))})]})};exports.RadioGroup=u,exports.default=u;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement } from 'react';\n\nimport
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n ...({ marginTop: theme.spacing(2), marginBottom: 0 }),\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n marginTop: theme.spacing(2),\n marginLeft: theme.spacing(1.75),\n paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group */\nexport interface RadioGroupProps\n extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n /** Identifier applied to the radio group; also used for the radio name attribute. */\n fdKey?: string;\n /** Currently selected option value; use null or undefined when no option should be selected. */\n value?: string | null;\n /** Callback fired whenever the selection changes with the event and newly selected value. */\n onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n /** Label rendered above the group; accepts plain text or a custom node. */\n label: React.ReactNode;\n /** Marks the radio group as required and surfaces the required indicator. */\n required?: boolean;\n /** Helper text displayed below the label to provide additional guidance. */\n helperText?: string;\n /** Error message shown below the helper text and marks the inputs as invalid. */\n errorText?: string;\n /** The children of the radio group. */\n children?: React.ReactNode;\n}\n\n/**\n * RadioGroup component is a wrapper component for a radio group.\n *\n * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n */\n\nexport const RadioGroup = ({\n fdKey = 'radio-default',\n value = '',\n onChange,\n label,\n required = false,\n helperText,\n errorText,\n children,\n ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n\n const labelId = `${fdKey}-label`;\n const helperId = helperText ? `${fdKey}-helper` : undefined;\n const errorId = errorText ? `${fdKey}-error` : undefined;\n const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n return (\n <Box>\n <StyledLabelContainer>\n <FormLabel id={labelId}>\n {label} {required && <WeakText>{' *'}</WeakText>}\n </FormLabel>\n {helperText ? (\n <MuiFormHelperText id={helperId}>\n {helperText}\n </MuiFormHelperText>\n ) : null}\n\n {!!errorText && (\n <MuiFormHelperText error id={errorId}>\n <CancelCircleIcon size={\"md\"} />\n {errorText}\n </MuiFormHelperText>\n )}\n\n </StyledLabelContainer>\n\n <MuiRadioGroup\n aria-describedby={describedBy}\n aria-invalid={errorText ? true : undefined}\n aria-labelledby={labelId}\n name={fdKey}\n onChange={handleChange}\n value={value}\n {...groupProps}\n >\n {React.Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n // Check if child has FormControlLabel-specific props (value and control)\n // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n const childProps = child.props as Partial<FormControlLabelProps>;\n if (!('value' in childProps) || !('control' in childProps)) {\n return child;\n }\n\n const formControlLabelProps = childProps as FormControlLabelProps;\n const radioValue = typeof formControlLabelProps.value === 'string' ? formControlLabelProps.value : String(formControlLabelProps.value ?? '');\n const isSelected = value === radioValue;\n\n // Extract Radio component from FormControlLabel's control prop\n const radioControl = formControlLabelProps.control;\n\n const optionConditionalChildren = formControlLabelProps.children;\n\n // Clone the Radio component with updated children and checked state\n const updatedRadio = isValidElement(radioControl)\n ? React.cloneElement(radioControl, {\n ...(radioControl.props as Record<string, unknown>),\n checked: isSelected,\n error: !!errorText,\n name: fdKey,\n } as Partial<unknown>)\n : radioControl;\n\n return (\n <StyledBox key={radioValue}>\n {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n ...formControlLabelProps,\n children: undefined,\n control: updatedRadio,\n })}\n\n {/* conditional block under the selected option */}\n {isSelected && optionConditionalChildren && (\n <ConditionalContainer>\n {optionConditionalChildren}\n </ConditionalContainer>\n )}\n </StyledBox>\n );\n })}\n </MuiRadioGroup>\n </Box>\n );\n}\n\nexport default RadioGroup;"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","name","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"oZAWA,MAAMA,EAAYC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG7CC,EAAuBN,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAAA,OAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAuCfgB,EAAa,EACxBC,QAAQ,gBACRC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAGH,MAAMC,EAAU,GAAGT,UACbU,EAAWL,EAAa,GAAGL,gBAAiBW,EAC5CC,EAAUN,EAAY,GAAGN,eAAgBW,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAAAA,KAACrC,EAAG,CAAA2B,SAAA,CACFU,EAAAA,KAAChC,EAAoB,CAAAsB,SAAA,CACnBU,EAAAA,KAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,MAACxB,EAAQ,CAAAW,SAAE,UAEjCF,EACCe,EAAAA,IAACC,EAAiB,CAACF,GAAIT,EAAQH,SAC5BF,IAED,OAEDC,GACDW,EAAAA,KAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,EAAOL,SAAA,CAClCa,EAAAA,IAACG,EAAgB,CAACC,KAAM,OACvBlB,QAMPc,EAAAA,IAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,oBAChBF,EACjBiB,KAAM1B,EACNE,SA5B+C,CAACyB,EAAGC,IAAW1B,EAASyB,EAAGC,GA6B1E3B,MAAOA,KACHO,EAAUD,SAEbsB,EAAMC,SAASC,IAAIxB,GAAWyB,IAC7B,IAAKC,EAAAA,eAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EAAoD,iBAAhCD,EAAsBnC,MAAqBmC,EAAsBnC,MAAQqC,OAAOF,EAAsBnC,OAAS,IACnIsC,EAAatC,IAAUoC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB7B,SAGlDoC,EAAeV,EAAAA,eAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC7BA,EAAaL,MACjBU,QAASN,EACTjB,QAAShB,EACToB,KAAM1B,IAENwC,EAEJ,OACEvB,EAAAA,KAACvC,EAAS,CAAA6B,SAAA,CACPsB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH7B,cAAUI,EACV8B,QAASE,IAIVJ,GAAcG,GACbtB,EAAAA,IAAChC,EAAoB,CAAAmB,SAClBmC,MAVSL"}
|
|
@@ -1,17 +1,14 @@
|
|
|
1
1
|
import react__default from 'react';
|
|
2
2
|
import { RadioGroupProps as RadioGroupProps$1 } from '@mui/material/RadioGroup';
|
|
3
|
-
import { RadioProps } from '../../atoms/Radio/index.js';
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
value: string;
|
|
7
|
-
};
|
|
4
|
+
/** Props for a radio group */
|
|
8
5
|
interface RadioGroupProps extends Omit<RadioGroupProps$1, 'name' | 'onChange' | 'value'> {
|
|
9
6
|
/** Identifier applied to the radio group; also used for the radio name attribute. */
|
|
10
7
|
fdKey?: string;
|
|
11
8
|
/** Currently selected option value; use null or undefined when no option should be selected. */
|
|
12
9
|
value?: string | null;
|
|
13
|
-
/** Callback fired whenever the selection changes with the newly selected value. */
|
|
14
|
-
onChange: (value: string) => void;
|
|
10
|
+
/** Callback fired whenever the selection changes with the event and newly selected value. */
|
|
11
|
+
onChange: (event: react__default.ChangeEvent<HTMLInputElement>, value: string) => void;
|
|
15
12
|
/** Label rendered above the group; accepts plain text or a custom node. */
|
|
16
13
|
label: react__default.ReactNode;
|
|
17
14
|
/** Marks the radio group as required and surfaces the required indicator. */
|
|
@@ -20,10 +17,24 @@ interface RadioGroupProps extends Omit<RadioGroupProps$1, 'name' | 'onChange' |
|
|
|
20
17
|
helperText?: string;
|
|
21
18
|
/** Error message shown below the helper text and marks the inputs as invalid. */
|
|
22
19
|
errorText?: string;
|
|
23
|
-
/**
|
|
24
|
-
|
|
20
|
+
/** The children of the radio group. */
|
|
21
|
+
children?: react__default.ReactNode;
|
|
25
22
|
}
|
|
26
|
-
|
|
23
|
+
/**
|
|
24
|
+
* RadioGroup component is a wrapper component for a radio group.
|
|
25
|
+
*
|
|
26
|
+
* @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.
|
|
27
|
+
* @param value - Currently selected option value; use null or undefined when no option should be selected.
|
|
28
|
+
* @param onChange - Callback fired whenever the selection changes with the event and newly selected value.
|
|
29
|
+
* @param label - Label rendered above the group; accepts plain text or a custom node.
|
|
30
|
+
* @param required - Marks the radio group as required and surfaces the required indicator.
|
|
31
|
+
* @param helperText - Helper text displayed below the label to provide additional guidance.
|
|
32
|
+
* @param errorText - Error message shown below the helper text and marks the inputs as invalid.
|
|
33
|
+
* @param children - The children of the radio group.
|
|
34
|
+
* @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.
|
|
35
|
+
* @returns The RadioGroup component.
|
|
36
|
+
*/
|
|
37
|
+
declare const RadioGroup: ({ fdKey, value, onChange, label, required, helperText, errorText, children, ...groupProps }: RadioGroupProps) => react__default.ReactElement;
|
|
27
38
|
|
|
28
|
-
export { RadioGroup as default };
|
|
29
|
-
export type { RadioGroupProps
|
|
39
|
+
export { RadioGroup, RadioGroup as default };
|
|
40
|
+
export type { RadioGroupProps };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import i,{isValidElement as o}from"react";import
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import i,{isValidElement as o}from"react";import t from"@mui/material/FormHelperText";import a from"@mui/material/FormLabel";import n from"@mui/material/RadioGroup";import{styled as l}from"@mui/material/styles";import m from"@mui/material/Box";import"@mui/material/FormControlLabel";import c from"../../../icons/CancelCircle/index.js";const d=l(m)((({theme:e})=>({marginTop:e.spacing(2),marginBottom:0}))),p=l(m)((({theme:e})=>({display:"flex",flexDirection:"column",marginBottom:e.spacing(.5)}))),s=l(m)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),borderLeft:`4px solid ${e.palette.semantic.stroke["stroke-weak"]}`,marginTop:e.spacing(2),marginLeft:e.spacing(1.75),paddingLeft:e.spacing(3.25)}))),u=l("span")((({theme:e})=>({color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(.5)}))),f=({fdKey:l="radio-default",value:f="",onChange:h,label:g,required:x=!1,helperText:v,errorText:b,children:y,...C})=>{const L=`${l}-label`,k=v?`${l}-helper`:void 0,T=b?`${l}-error`:void 0,B=[k,T].filter(Boolean).join(" ")||void 0;return e(m,{children:[e(p,{children:[e(a,{id:L,children:[g," ",x&&r(u,{children:" *"})]}),v?r(t,{id:k,children:v}):null,!!b&&e(t,{error:!0,id:T,children:[r(c,{size:"md"}),b]})]}),r(n,{"aria-describedby":B,"aria-invalid":!!b||void 0,"aria-labelledby":L,name:l,onChange:(e,r)=>h(e,r),value:f,...C,children:i.Children.map(y,(t=>{if(!o(t))return t;const a=t.props;if(!("value"in a)||!("control"in a))return t;const n=a,m="string"==typeof n.value?n.value:String(n.value??""),c=f===m,p=n.control,u=n.children,h=o(p)?i.cloneElement(p,{...p.props,checked:c,error:!!b,name:l}):p;return e(d,{children:[i.cloneElement(t,{...n,children:void 0,control:h}),c&&u&&r(s,{children:u})]},m)}))})]})};export{f as RadioGroup,f as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement } from 'react';\n\nimport
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n ...({ marginTop: theme.spacing(2), marginBottom: 0 }),\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n marginTop: theme.spacing(2),\n marginLeft: theme.spacing(1.75),\n paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group */\nexport interface RadioGroupProps\n extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n /** Identifier applied to the radio group; also used for the radio name attribute. */\n fdKey?: string;\n /** Currently selected option value; use null or undefined when no option should be selected. */\n value?: string | null;\n /** Callback fired whenever the selection changes with the event and newly selected value. */\n onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n /** Label rendered above the group; accepts plain text or a custom node. */\n label: React.ReactNode;\n /** Marks the radio group as required and surfaces the required indicator. */\n required?: boolean;\n /** Helper text displayed below the label to provide additional guidance. */\n helperText?: string;\n /** Error message shown below the helper text and marks the inputs as invalid. */\n errorText?: string;\n /** The children of the radio group. */\n children?: React.ReactNode;\n}\n\n/**\n * RadioGroup component is a wrapper component for a radio group.\n *\n * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n */\n\nexport const RadioGroup = ({\n fdKey = 'radio-default',\n value = '',\n onChange,\n label,\n required = false,\n helperText,\n errorText,\n children,\n ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n\n const labelId = `${fdKey}-label`;\n const helperId = helperText ? `${fdKey}-helper` : undefined;\n const errorId = errorText ? `${fdKey}-error` : undefined;\n const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n return (\n <Box>\n <StyledLabelContainer>\n <FormLabel id={labelId}>\n {label} {required && <WeakText>{' *'}</WeakText>}\n </FormLabel>\n {helperText ? (\n <MuiFormHelperText id={helperId}>\n {helperText}\n </MuiFormHelperText>\n ) : null}\n\n {!!errorText && (\n <MuiFormHelperText error id={errorId}>\n <CancelCircleIcon size={\"md\"} />\n {errorText}\n </MuiFormHelperText>\n )}\n\n </StyledLabelContainer>\n\n <MuiRadioGroup\n aria-describedby={describedBy}\n aria-invalid={errorText ? true : undefined}\n aria-labelledby={labelId}\n name={fdKey}\n onChange={handleChange}\n value={value}\n {...groupProps}\n >\n {React.Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n // Check if child has FormControlLabel-specific props (value and control)\n // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n const childProps = child.props as Partial<FormControlLabelProps>;\n if (!('value' in childProps) || !('control' in childProps)) {\n return child;\n }\n\n const formControlLabelProps = childProps as FormControlLabelProps;\n const radioValue = typeof formControlLabelProps.value === 'string' ? formControlLabelProps.value : String(formControlLabelProps.value ?? '');\n const isSelected = value === radioValue;\n\n // Extract Radio component from FormControlLabel's control prop\n const radioControl = formControlLabelProps.control;\n\n const optionConditionalChildren = formControlLabelProps.children;\n\n // Clone the Radio component with updated children and checked state\n const updatedRadio = isValidElement(radioControl)\n ? React.cloneElement(radioControl, {\n ...(radioControl.props as Record<string, unknown>),\n checked: isSelected,\n error: !!errorText,\n name: fdKey,\n } as Partial<unknown>)\n : radioControl;\n\n return (\n <StyledBox key={radioValue}>\n {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n ...formControlLabelProps,\n children: undefined,\n control: updatedRadio,\n })}\n\n {/* conditional block under the selected option */}\n {isSelected && optionConditionalChildren && (\n <ConditionalContainer>\n {optionConditionalChildren}\n </ConditionalContainer>\n )}\n </StyledBox>\n );\n })}\n </MuiRadioGroup>\n </Box>\n );\n}\n\nexport default RadioGroup;"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","name","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"iYAWA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG7CC,EAAuBN,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAuCfgB,EAAa,EACxBC,QAAQ,gBACRC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAGH,MAAMC,EAAU,GAAGT,UACbU,EAAWL,EAAa,GAAGL,gBAAiBW,EAC5CC,EAAUN,EAAY,GAAGN,eAAgBW,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAACrC,EAAG,CAAA2B,SAAA,CACFU,EAAChC,EAAoB,CAAAsB,SAAA,CACnBU,EAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,EAACxB,EAAQ,CAAAW,SAAE,UAEjCF,EACCe,EAACC,EAAiB,CAACF,GAAIT,EAAQH,SAC5BF,IAED,OAEDC,GACDW,EAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,EAAOL,SAAA,CAClCa,EAACG,EAAgB,CAACC,KAAM,OACvBlB,QAMPc,EAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,oBAChBF,EACjBiB,KAAM1B,EACNE,SA5B+C,CAACyB,EAAGC,IAAW1B,EAASyB,EAAGC,GA6B1E3B,MAAOA,KACHO,EAAUD,SAEbsB,EAAMC,SAASC,IAAIxB,GAAWyB,IAC7B,IAAKC,EAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EAAoD,iBAAhCD,EAAsBnC,MAAqBmC,EAAsBnC,MAAQqC,OAAOF,EAAsBnC,OAAS,IACnIsC,EAAatC,IAAUoC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB7B,SAGlDoC,EAAeV,EAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC7BA,EAAaL,MACjBU,QAASN,EACTjB,QAAShB,EACToB,KAAM1B,IAENwC,EAEJ,OACEvB,EAACvC,EAAS,CAAA6B,SAAA,CACPsB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH7B,cAAUI,EACV8B,QAASE,IAIVJ,GAAcG,GACbtB,EAAChC,EAAoB,CAAAmB,SAClBmC,MAVSL"}
|