@bikdotai/bik-component-library 0.0.821-2 → 0.0.821-3
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/cjs/components/checkBox/CheckBox.js +1 -1
- package/dist/cjs/components/checkBox/CheckBox.js.map +1 -1
- package/dist/cjs/components/checkBox/CheckBox.styled.js +21 -20
- package/dist/cjs/components/checkBox/CheckBox.styled.js.map +1 -1
- package/dist/esm/components/checkBox/CheckBox.d.ts +1 -1
- package/dist/esm/components/checkBox/CheckBox.js +62 -62
- package/dist/esm/components/checkBox/CheckBox.js.map +1 -1
- package/dist/esm/components/checkBox/CheckBox.styled.d.ts +1 -1
- package/dist/esm/components/checkBox/CheckBox.styled.js +10 -9
- package/dist/esm/components/checkBox/CheckBox.styled.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("react"),C=require("./CheckBox.styled.js"),a=require("../TypographyStyle.js"),t=require("../../constants/Theme.js"),O=e=>{const s=c.useMemo(()=>e.activeColor||t.COLORS.background.positive.vibrant,[e.activeColor]),i=e.size==="XS"?{box:12,check:{w:6,h:5,x:3,y:3.5},partial:{x:3,y:5,w:6}}:e.size==="SMALL"?{box:16,check:{w:8,h:7,x:4,y:4},partial:{x:5,y:7,w:6}}:{box:18,check:{w:10,h:9,x:4,y:4},partial:{x:5,y:8,w:8}};return l.jsxs("svg",{width:i.box,height:i.box,viewBox:`0 0 ${i.box} ${i.box}`,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l.jsx("rect",{x:"0",y:"0",width:i.box,height:i.box,rx:"4",fill:e.isDisabled?t.COLORS.content.inactive:s}),!e.isPartial&&l.jsx("svg",{width:i.check.w,height:i.check.h,x:i.check.x,y:i.check.y,viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})}),e.isPartial&&l.jsx("rect",{x:i.partial.x,y:i.partial.y,width:i.partial.w,height:"2",rx:"1",fill:t.COLORS.surface.standard})]})},L=e=>{const[s,i]=c.useState(e.isChecked||!1),[d,o]=c.useState(e.isPartiallyChecked||!1),[n,y]=c.useState(e.isDisabled||!1),[u,h]=c.useState(!1),[S,x]=c.useState(!1),k=r=>{if(!e.isDisabled){const b=!s;d?o(!d):i(b),e.onValueChange?.(b,e.value,r)}};c.useEffect(()=>{i(e.isChecked)},[e.isChecked]),c.useEffect(()=>{y(e.isDisabled||!1)},[e.isDisabled]),c.useEffect(()=>{o(e.isPartiallyChecked||!1)},[e.isPartiallyChecked]);const f=()=>{if(!e.label)return l.jsx(l.Fragment,{});if(e.labelTypography){const r={bodyCaption:a.BodyCaption,bodySecondary:a.BodySecondary,bodyPrimary:a.BodyPrimary,titleSmall:a.TitleSmall}[e.labelTypography];return l.jsx(r,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label})}return e.boldOnChecked&&s||e.bold?e.labelSize==="DEFAULT"?l.jsx(a.TitleRegular,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):l.jsx(a.TitleSmall,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):e.size==="SMALL"?l.jsx(a.BodySecondary,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):e.labelSize==="SMALL"?l.jsx(a.BodySecondary,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):l.jsx(a.BodyPrimary,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label})};return l.jsxs(C.CheckboxContainer,{onClick:k,onMouseEnter:()=>h(!e.skipHoverState),onMouseLeave:()=>h(!1),onMouseDown:()=>x(!e.skipHoverState),onMouseUp:()=>x(!1),isDisabled:n,enableHover:e.enableHover,style:e.style??{},children:[l.jsx(C.CheckboxIcon,{checked:s,hovered:u,clicked:S,isDisabled:n,size:e.size,borderColor:e.checkboxBorderColor,children:s&&l.jsx(O,{isPartial:d||!1,isDisabled:n,size:e.size,activeColor:e?.activeColor})}),f(),e.rightComponent]})};exports.CheckBox=L;
|
|
2
2
|
//# sourceMappingURL=CheckBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tisSmall: boolean;\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '18'}\n\t\t\theight={props.isSmall ? '16' : '18'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 18 18'}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={props.isSmall ? '16' : '18'}\n\t\t\t\theight={props.isSmall ? '16' : '18'}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={props.isSmall ? '8' : '10'}\n\t\t\t\t\theight={props.isSmall ? '7' : '9'}\n\t\t\t\t\tx=\"4\"\n\t\t\t\t\ty=\"4\"\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx=\"5\"\n\t\t\t\t\ty={props.isSmall ? '7' : '8'}\n\t\t\t\t\twidth={props.isSmall ? '6' : '8'}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tisSmall={props.size === 'SMALL'}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","event","newVal","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? { box: 12, check: { w: 6, h: 5, x: 3, y: 3.5 }, partial: { x: 3, y: 5, w: 6 } }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? { box: 16, check: { w: 8, h: 7, x: 4, y: 4 }, partial: { x: 5, y: 7, w: 6 } }\n\t\t\t: { box: 18, check: { w: 10, h: 9, x: 4, y: 4 }, partial: { x: 5, y: 8, w: 8 } };\n\n\treturn (\n\t\t<svg\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","event","newVal","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"mPA0CMA,EAKAC,GAAU,CACf,MAAMC,EAAYC,EAAAA,QACjB,IAAMF,EAAM,aAAeG,EAAAA,OAAO,WAAW,SAAS,QACtD,CAACH,EAAM,WAAW,CAAA,EAIbI,EACLJ,EAAM,OAAS,KACZ,CAAE,IAAK,GAAI,MAAO,CAAE,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,GAAA,EAAO,QAAS,CAAE,EAAG,EAAG,EAAG,EAAG,EAAG,EAAE,EAC5EA,EAAM,OAAS,QACf,CAAE,IAAK,GAAI,MAAO,CAAE,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,CAAA,EAAK,QAAS,CAAE,EAAG,EAAG,EAAG,EAAG,EAAG,CAAA,CAAE,EAC1E,CAAE,IAAK,GAAI,MAAO,CAAE,EAAG,GAAI,EAAG,EAAG,EAAG,EAAG,EAAG,CAAA,EAAK,QAAS,CAAE,EAAG,EAAG,EAAG,EAAG,EAAG,EAAE,EAE/E,OACCK,EAAAA,KAAC,MAAA,CACA,MAAOD,EAAK,IACZ,OAAQA,EAAK,IACb,QAAS,OAAOA,EAAK,GAAG,IAAIA,EAAK,GAAG,GACpC,KAAK,OACL,MAAM,6BAEN,SAAA,CAAAE,EAAAA,IAAC,OAAA,CACA,EAAE,IACF,EAAE,IACF,MAAOF,EAAK,IACZ,OAAQA,EAAK,IACb,GAAG,IACH,KAAMJ,EAAM,WAAaG,EAAAA,OAAO,QAAQ,SAAWF,CAAA,CAAA,EAEnD,CAACD,EAAM,WACPM,EAAAA,IAAC,MAAA,CACA,MAAOF,EAAK,MAAM,EAClB,OAAQA,EAAK,MAAM,EACnB,EAAGA,EAAK,MAAM,EACd,EAAGA,EAAK,MAAM,EACd,QAAQ,WACR,KAAK,OACL,MAAM,6BAEN,SAAAE,EAAAA,IAAC,OAAA,CACA,SAAS,UACT,SAAS,UACT,EAAE,yUACF,KAAK,OAAA,CAAA,CACN,CAAA,EAGDN,EAAM,WACNM,EAAAA,IAAC,OAAA,CACA,EAAGF,EAAK,QAAQ,EAChB,EAAGA,EAAK,QAAQ,EAChB,MAAOA,EAAK,QAAQ,EACpB,OAAO,IACP,GAAG,IACH,KAAMD,EAAAA,OAAO,QAAQ,QAAA,CAAA,CACtB,CAAA,CAAA,CAIJ,EAEaI,EAAqCP,GAAU,CAC3D,KAAM,CAACQ,EAAWC,CAAY,EAAIC,EAAAA,SAASV,EAAM,WAAa,EAAK,EAC7D,CAACW,EAAoBC,CAAqB,EAAIF,EAAAA,SACnDV,EAAM,oBAAsB,EAAA,EAEvB,CAACa,EAAYC,CAAa,EAAIJ,EAAAA,SAASV,EAAM,YAAc,EAAK,EAChE,CAACe,EAAWC,CAAY,EAAIN,EAAAA,SAAS,EAAK,EAC1C,CAACO,EAAWC,CAAY,EAAIR,EAAAA,SAAS,EAAK,EAE1CS,EAAeC,GAA4B,CAChD,GAAI,CAACpB,EAAM,WAAY,CACtB,MAAMqB,EAAS,CAACb,EACZG,EACHC,EAAsB,CAACD,CAAkB,EAEzCF,EAAaY,CAAM,EAEpBrB,EAAM,gBAAgBqB,EAAQrB,EAAM,MAAOoB,CAAK,CACjD,CACD,EAEAE,EAAAA,UAAU,IAAM,CACfb,EAAaT,EAAM,SAAS,CAC7B,EAAG,CAACA,EAAM,SAAS,CAAC,EAEpBsB,EAAAA,UAAU,IAAM,CACfR,EAAcd,EAAM,YAAc,EAAK,CACxC,EAAG,CAACA,EAAM,UAAU,CAAC,EAErBsB,EAAAA,UAAU,IAAM,CACfV,EAAsBZ,EAAM,oBAAsB,EAAK,CACxD,EAAG,CAACA,EAAM,kBAAkB,CAAC,EAE7B,MAAMuB,EAAc,IAAM,CACzB,GAAI,CAACvB,EAAM,MACV,OAAOM,EAAAA,IAAAkB,EAAAA,SAAA,EAAE,EAGV,GAAIxB,EAAM,gBAAiB,CAC1B,MAAMyB,EAAkB,CACvB,YAAaC,EAAAA,YACb,cAAeC,EAAAA,cACf,YAAaC,EAAAA,YACb,WAAYC,EAAAA,UAAA,EACX7B,EAAM,eAAe,EACvB,OACCM,EAAAA,IAACmB,EAAA,CACA,MAAOzB,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAE5D,SAAAH,EAAM,KAAA,CAAA,CAGV,CAEA,OAAKA,EAAM,eAAiBQ,GAAcR,EAAM,KAC3CA,EAAM,YAAc,UAEtBM,EAAAA,IAACwB,EAAAA,aAAA,CACA,MACC9B,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAGtD,SAAAH,EAAM,KAAA,CAAA,EAKTM,EAAAA,IAACuB,EAAAA,WAAA,CACA,MAAO7B,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAE5D,SAAAH,EAAM,KAAA,CAAA,EAKNA,EAAM,OAAS,QAEjBM,EAAAA,IAACqB,EAAAA,cAAA,CACA,MAAO3B,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAE5D,SAAAH,EAAM,KAAA,CAAA,EAKNA,EAAM,YAAc,QAEtBM,EAAAA,IAACqB,EAAAA,cAAA,CACA,MAAO3B,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAE5D,SAAAH,EAAM,KAAA,CAAA,EAMTM,EAAAA,IAACsB,EAAAA,YAAA,CACA,MAAO5B,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAE5D,SAAAH,EAAM,KAAA,CAAA,CAGV,EAEA,OACCK,EAAAA,KAAC0B,EAAAA,kBAAA,CACA,QAASZ,EACT,aAAc,IAAMH,EAAa,CAAChB,EAAM,cAAc,EACtD,aAAc,IAAMgB,EAAa,EAAK,EACtC,YAAa,IAAME,EAAa,CAAClB,EAAM,cAAc,EACrD,UAAW,IAAMkB,EAAa,EAAK,EACnC,WAAAL,EACA,YAAab,EAAM,YACnB,MAAOA,EAAM,OAAS,CAAA,EAEtB,SAAA,CAAAM,EAAAA,IAAC0B,EAAAA,aAAA,CACA,QAASxB,EACT,QAASO,EACT,QAASE,EACT,WAAAJ,EACA,KAAMb,EAAM,KACZ,YAAaA,EAAM,oBAElB,SAAAQ,GACAF,EAAAA,IAACP,EAAA,CACA,UAAWY,GAAsB,GACjC,WAAAE,EACA,KAAMb,EAAM,KACZ,YAAaA,GAAO,WAAA,CAAA,CACrB,CAAA,EAGDuB,EAAA,EACAvB,EAAM,cAAA,CAAA,CAAA,CAGV"}
|
|
@@ -1,41 +1,42 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("../../constants/Theme.js"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=s(i),d=o.default.div`
|
|
2
2
|
display: inline-flex;
|
|
3
3
|
gap: 8px;
|
|
4
4
|
align-items: center;
|
|
5
5
|
cursor: ${e=>e.isDisabled?"default":"pointer"};
|
|
6
|
-
${e=>e.enableHover&&
|
|
6
|
+
${e=>e.enableHover&&i.css`
|
|
7
7
|
:hover {
|
|
8
|
-
background: ${
|
|
8
|
+
background: ${t.COLORS.surface.subdued};
|
|
9
9
|
}
|
|
10
10
|
`}
|
|
11
|
-
`,
|
|
12
|
-
width: ${e=>e.size==="
|
|
13
|
-
height: ${e=>e.size==="
|
|
11
|
+
`,c=o.default.div`
|
|
12
|
+
width: ${e=>e.size==="DEFAULT"?14:12}px;
|
|
13
|
+
height: ${e=>e.size==="DEFAULT"?14:12}px;
|
|
14
14
|
border-radius: 4px;
|
|
15
15
|
border: 2px solid black;
|
|
16
16
|
display: flex;
|
|
17
17
|
justify-content: center;
|
|
18
18
|
align-items: center;
|
|
19
|
-
box
|
|
20
|
-
${e=>e.
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
/* XS is a true 12x12 box (border drawn inside); other sizes keep content-box. */
|
|
20
|
+
box-sizing: ${e=>e.size==="XS"?"border-box":"content-box"};
|
|
21
|
+
${e=>e.isDisabled?i.css`
|
|
22
|
+
border: ${e.size==="DEFAULT"?2:1.5}px solid
|
|
23
|
+
${t.COLORS.content.inactive};
|
|
24
|
+
`:i.css`
|
|
25
|
+
border: ${e.size==="DEFAULT"?2:1.5}px solid
|
|
25
26
|
${e.borderColor??"black"};
|
|
26
27
|
`}
|
|
27
|
-
${e=>e.checked&&
|
|
28
|
+
${e=>e.checked&&i.css`
|
|
28
29
|
border: 0px;
|
|
29
|
-
width:
|
|
30
|
-
height:
|
|
30
|
+
width: ${e.size==="XS"?12:18}px;
|
|
31
|
+
height: ${e.size==="XS"?12:18}px;
|
|
31
32
|
`}
|
|
32
|
-
${e=>e.hovered&&
|
|
33
|
-
outline: 3px solid ${
|
|
33
|
+
${e=>e.hovered&&i.css`
|
|
34
|
+
outline: 3px solid ${t.COLORS.surface.hovered};
|
|
34
35
|
`}
|
|
35
|
-
${e=>e.clicked&&!e.isDisabled&&
|
|
36
|
+
${e=>e.clicked&&!e.isDisabled&&i.css`
|
|
36
37
|
outline: 3px solid
|
|
37
|
-
${e.checked?
|
|
38
|
+
${e.checked?t.COLORS.stroke.positive.lightAlt:t.COLORS.surface.hovered};
|
|
38
39
|
outline-offset: 2px;
|
|
39
40
|
`}
|
|
40
|
-
`;exports.CheckboxContainer=
|
|
41
|
+
`;exports.CheckboxContainer=d;exports.CheckboxIcon=c;
|
|
41
42
|
//# sourceMappingURL=CheckBox.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' | 'DEFAULT';\n\tborderColor?: string;\n}>`\n\twidth: ${(props) => (props.size === '
|
|
1
|
+
{"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' | 'DEFAULT' | 'XS';\n\tborderColor?: string;\n}>`\n\twidth: ${(props) => (props.size === 'DEFAULT' ? 14 : 12)}px;\n\theight: ${(props) => (props.size === 'DEFAULT' ? 14 : 12)}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\t/* XS is a true 12x12 box (border drawn inside); other sizes keep content-box. */\n\tbox-sizing: ${(props) => (props.size === 'XS' ? 'border-box' : 'content-box')};\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t\twidth: ${props.size === 'XS' ? 12 : 18}px;\n\t\t\theight: ${props.size === 'XS' ? 12 : 18}px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon"],"mappings":"0NAGaA,EAAoBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,WAO5BC,GAAWA,EAAM,WAAa,UAAY,SAAU;AAAA,GAC5DA,GACFA,EAAM,aACNC,EAAAA;AAAAA;AAAAA,kBAEgBC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,EAGUC,EAAeJ,EAAAA,QAAO;AAAA,UAQxBC,GAAWA,EAAM,OAAS,UAAY,GAAK,EAAG;AAAA,WAC7CA,GAAWA,EAAM,OAAS,UAAY,GAAK,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO1CA,GAAWA,EAAM,OAAS,KAAO,aAAe,aAAc;AAAA,GAC1EA,GACFA,EAAM,WACHC,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,OAE1BD,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCA,EAAM,aAAe,OAAO;AAAA,MAC9B;AAAA,GACFA,GACFA,EAAM,SACNC,EAAAA;AAAAA;AAAAA,YAEUD,EAAM,OAAS,KAAO,GAAK,EAAE;AAAA,aAC5BA,EAAM,OAAS,KAAO,GAAK,EAAE;AAAA,GACvC;AAAA,GACCA,GACFA,EAAM,SACNC,EAAAA;AAAAA,wBACsBC,EAAAA,OAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACCF,GACFA,EAAM,SACN,CAACA,EAAM,YACPC,EAAAA;AAAAA;AAAAA,MAEID,EAAM,QACLE,EAAAA,OAAO,OAAO,SAAS,SACvBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA"}
|
|
@@ -6,7 +6,7 @@ export type CheckBoxProps = {
|
|
|
6
6
|
value?: string;
|
|
7
7
|
onValueChange: (checked: boolean, value?: string, event?: React.MouseEvent) => void;
|
|
8
8
|
label?: string;
|
|
9
|
-
size?: 'DEFAULT' | 'SMALL';
|
|
9
|
+
size?: 'DEFAULT' | 'SMALL' | 'XS';
|
|
10
10
|
skipHoverState?: boolean;
|
|
11
11
|
labelSize?: 'DEFAULT' | 'SMALL';
|
|
12
12
|
rightComponent?: JSX.Element;
|
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { CheckboxContainer as
|
|
4
|
-
import { TitleSmall as
|
|
1
|
+
import { jsxs as k, jsx as t, Fragment as D } from "react/jsx-runtime";
|
|
2
|
+
import { useState as c, useEffect as o, useMemo as L } from "react";
|
|
3
|
+
import { CheckboxContainer as S, CheckboxIcon as M } from "./CheckBox.styled.js";
|
|
4
|
+
import { TitleSmall as C, BodyPrimary as f, BodySecondary as s, BodyCaption as P, TitleRegular as z } from "../TypographyStyle.js";
|
|
5
5
|
import { COLORS as l } from "../../constants/Theme.js";
|
|
6
|
-
const
|
|
7
|
-
const a =
|
|
6
|
+
const B = (e) => {
|
|
7
|
+
const a = L(
|
|
8
8
|
() => e.activeColor || l.background.positive.vibrant,
|
|
9
9
|
[e.activeColor]
|
|
10
|
-
);
|
|
11
|
-
return /* @__PURE__ */
|
|
10
|
+
), i = e.size === "XS" ? { box: 12, check: { w: 6, h: 5, x: 3, y: 3.5 }, partial: { x: 3, y: 5, w: 6 } } : e.size === "SMALL" ? { box: 16, check: { w: 8, h: 7, x: 4, y: 4 }, partial: { x: 5, y: 7, w: 6 } } : { box: 18, check: { w: 10, h: 9, x: 4, y: 4 }, partial: { x: 5, y: 8, w: 8 } };
|
|
11
|
+
return /* @__PURE__ */ k(
|
|
12
12
|
"svg",
|
|
13
13
|
{
|
|
14
|
-
width:
|
|
15
|
-
height:
|
|
16
|
-
viewBox:
|
|
14
|
+
width: i.box,
|
|
15
|
+
height: i.box,
|
|
16
|
+
viewBox: `0 0 ${i.box} ${i.box}`,
|
|
17
17
|
fill: "none",
|
|
18
18
|
xmlns: "http://www.w3.org/2000/svg",
|
|
19
19
|
children: [
|
|
20
|
-
/* @__PURE__ */
|
|
20
|
+
/* @__PURE__ */ t(
|
|
21
21
|
"rect",
|
|
22
22
|
{
|
|
23
23
|
x: "0",
|
|
24
24
|
y: "0",
|
|
25
|
-
width:
|
|
26
|
-
height:
|
|
25
|
+
width: i.box,
|
|
26
|
+
height: i.box,
|
|
27
27
|
rx: "4",
|
|
28
28
|
fill: e.isDisabled ? l.content.inactive : a
|
|
29
29
|
}
|
|
30
30
|
),
|
|
31
|
-
!e.isPartial && /* @__PURE__ */
|
|
31
|
+
!e.isPartial && /* @__PURE__ */ t(
|
|
32
32
|
"svg",
|
|
33
33
|
{
|
|
34
|
-
width:
|
|
35
|
-
height:
|
|
36
|
-
x:
|
|
37
|
-
y:
|
|
34
|
+
width: i.check.w,
|
|
35
|
+
height: i.check.h,
|
|
36
|
+
x: i.check.x,
|
|
37
|
+
y: i.check.y,
|
|
38
38
|
viewBox: "0 0 10 9",
|
|
39
39
|
fill: "none",
|
|
40
40
|
xmlns: "http://www.w3.org/2000/svg",
|
|
41
|
-
children: /* @__PURE__ */
|
|
41
|
+
children: /* @__PURE__ */ t(
|
|
42
42
|
"path",
|
|
43
43
|
{
|
|
44
44
|
fillRule: "evenodd",
|
|
@@ -49,12 +49,12 @@ const z = (e) => {
|
|
|
49
49
|
)
|
|
50
50
|
}
|
|
51
51
|
),
|
|
52
|
-
e.isPartial && /* @__PURE__ */
|
|
52
|
+
e.isPartial && /* @__PURE__ */ t(
|
|
53
53
|
"rect",
|
|
54
54
|
{
|
|
55
|
-
x:
|
|
56
|
-
y:
|
|
57
|
-
width:
|
|
55
|
+
x: i.partial.x,
|
|
56
|
+
y: i.partial.y,
|
|
57
|
+
width: i.partial.w,
|
|
58
58
|
height: "2",
|
|
59
59
|
rx: "1",
|
|
60
60
|
fill: l.surface.standard
|
|
@@ -64,98 +64,98 @@ const z = (e) => {
|
|
|
64
64
|
}
|
|
65
65
|
);
|
|
66
66
|
}, E = (e) => {
|
|
67
|
-
const [a,
|
|
67
|
+
const [a, i] = c(e.isChecked || !1), [d, h] = c(
|
|
68
68
|
e.isPartiallyChecked || !1
|
|
69
|
-
), [n,
|
|
69
|
+
), [n, m] = c(e.isDisabled || !1), [w, b] = c(!1), [v, x] = c(!1), u = (r) => {
|
|
70
70
|
if (!e.isDisabled) {
|
|
71
|
-
const
|
|
72
|
-
d ?
|
|
71
|
+
const y = !a;
|
|
72
|
+
d ? h(!d) : i(y), e.onValueChange?.(y, e.value, r);
|
|
73
73
|
}
|
|
74
74
|
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}, [e.isChecked]),
|
|
78
|
-
|
|
79
|
-
}, [e.isDisabled]),
|
|
80
|
-
|
|
75
|
+
o(() => {
|
|
76
|
+
i(e.isChecked);
|
|
77
|
+
}, [e.isChecked]), o(() => {
|
|
78
|
+
m(e.isDisabled || !1);
|
|
79
|
+
}, [e.isDisabled]), o(() => {
|
|
80
|
+
h(e.isPartiallyChecked || !1);
|
|
81
81
|
}, [e.isPartiallyChecked]);
|
|
82
82
|
const g = () => {
|
|
83
83
|
if (!e.label)
|
|
84
|
-
return /* @__PURE__ */
|
|
84
|
+
return /* @__PURE__ */ t(D, {});
|
|
85
85
|
if (e.labelTypography) {
|
|
86
|
-
const
|
|
86
|
+
const r = {
|
|
87
87
|
bodyCaption: P,
|
|
88
|
-
bodySecondary:
|
|
89
|
-
bodyPrimary:
|
|
90
|
-
titleSmall:
|
|
88
|
+
bodySecondary: s,
|
|
89
|
+
bodyPrimary: f,
|
|
90
|
+
titleSmall: C
|
|
91
91
|
}[e.labelTypography];
|
|
92
|
-
return /* @__PURE__ */
|
|
93
|
-
|
|
92
|
+
return /* @__PURE__ */ t(
|
|
93
|
+
r,
|
|
94
94
|
{
|
|
95
95
|
color: e.isDisabled ? l.text.disabled : l.text.primary,
|
|
96
96
|
children: e.label
|
|
97
97
|
}
|
|
98
98
|
);
|
|
99
99
|
}
|
|
100
|
-
return e.boldOnChecked && a || e.bold ? e.labelSize === "DEFAULT" ? /* @__PURE__ */
|
|
101
|
-
|
|
100
|
+
return e.boldOnChecked && a || e.bold ? e.labelSize === "DEFAULT" ? /* @__PURE__ */ t(
|
|
101
|
+
z,
|
|
102
102
|
{
|
|
103
103
|
color: e.isDisabled ? l.text.disabled : l.text.primary,
|
|
104
104
|
children: e.label
|
|
105
105
|
}
|
|
106
|
-
) : /* @__PURE__ */
|
|
107
|
-
|
|
106
|
+
) : /* @__PURE__ */ t(
|
|
107
|
+
C,
|
|
108
108
|
{
|
|
109
109
|
color: e.isDisabled ? l.text.disabled : l.text.primary,
|
|
110
110
|
children: e.label
|
|
111
111
|
}
|
|
112
|
-
) : e.size === "SMALL" ? /* @__PURE__ */
|
|
113
|
-
|
|
112
|
+
) : e.size === "SMALL" ? /* @__PURE__ */ t(
|
|
113
|
+
s,
|
|
114
114
|
{
|
|
115
115
|
color: e.isDisabled ? l.text.disabled : l.text.primary,
|
|
116
116
|
children: e.label
|
|
117
117
|
}
|
|
118
|
-
) : e.labelSize === "SMALL" ? /* @__PURE__ */
|
|
119
|
-
|
|
118
|
+
) : e.labelSize === "SMALL" ? /* @__PURE__ */ t(
|
|
119
|
+
s,
|
|
120
120
|
{
|
|
121
121
|
color: e.isDisabled ? l.text.disabled : l.text.primary,
|
|
122
122
|
children: e.label
|
|
123
123
|
}
|
|
124
|
-
) : /* @__PURE__ */
|
|
125
|
-
|
|
124
|
+
) : /* @__PURE__ */ t(
|
|
125
|
+
f,
|
|
126
126
|
{
|
|
127
127
|
color: e.isDisabled ? l.text.disabled : l.text.primary,
|
|
128
128
|
children: e.label
|
|
129
129
|
}
|
|
130
130
|
);
|
|
131
131
|
};
|
|
132
|
-
return /* @__PURE__ */
|
|
133
|
-
|
|
132
|
+
return /* @__PURE__ */ k(
|
|
133
|
+
S,
|
|
134
134
|
{
|
|
135
|
-
onClick:
|
|
135
|
+
onClick: u,
|
|
136
136
|
onMouseEnter: () => b(!e.skipHoverState),
|
|
137
137
|
onMouseLeave: () => b(!1),
|
|
138
|
-
onMouseDown: () =>
|
|
139
|
-
onMouseUp: () =>
|
|
138
|
+
onMouseDown: () => x(!e.skipHoverState),
|
|
139
|
+
onMouseUp: () => x(!1),
|
|
140
140
|
isDisabled: n,
|
|
141
141
|
enableHover: e.enableHover,
|
|
142
142
|
style: e.style ?? {},
|
|
143
143
|
children: [
|
|
144
|
-
/* @__PURE__ */
|
|
144
|
+
/* @__PURE__ */ t(
|
|
145
145
|
M,
|
|
146
146
|
{
|
|
147
147
|
checked: a,
|
|
148
|
-
hovered:
|
|
149
|
-
clicked:
|
|
148
|
+
hovered: w,
|
|
149
|
+
clicked: v,
|
|
150
150
|
isDisabled: n,
|
|
151
151
|
size: e.size,
|
|
152
152
|
borderColor: e.checkboxBorderColor,
|
|
153
|
-
children: a && /* @__PURE__ */
|
|
154
|
-
|
|
153
|
+
children: a && /* @__PURE__ */ t(
|
|
154
|
+
B,
|
|
155
155
|
{
|
|
156
156
|
isPartial: d || !1,
|
|
157
157
|
isDisabled: n,
|
|
158
|
-
|
|
158
|
+
size: e.size,
|
|
159
159
|
activeColor: e?.activeColor
|
|
160
160
|
}
|
|
161
161
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tisSmall: boolean;\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '18'}\n\t\t\theight={props.isSmall ? '16' : '18'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 18 18'}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={props.isSmall ? '16' : '18'}\n\t\t\t\theight={props.isSmall ? '16' : '18'}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={props.isSmall ? '8' : '10'}\n\t\t\t\t\theight={props.isSmall ? '7' : '9'}\n\t\t\t\t\tx=\"4\"\n\t\t\t\t\ty=\"4\"\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx=\"5\"\n\t\t\t\t\ty={props.isSmall ? '7' : '8'}\n\t\t\t\t\twidth={props.isSmall ? '6' : '8'}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tisSmall={props.size === 'SMALL'}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","event","newVal","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? { box: 12, check: { w: 6, h: 5, x: 3, y: 3.5 }, partial: { x: 3, y: 5, w: 6 } }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? { box: 16, check: { w: 8, h: 7, x: 4, y: 4 }, partial: { x: 5, y: 7, w: 6 } }\n\t\t\t: { box: 18, check: { w: 10, h: 9, x: 4, y: 4 }, partial: { x: 5, y: 8, w: 8 } };\n\n\treturn (\n\t\t<svg\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","event","newVal","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}
|
|
@@ -7,6 +7,6 @@ export declare const CheckboxIcon: import('styled-components').StyledComponent<"
|
|
|
7
7
|
hovered: boolean;
|
|
8
8
|
clicked: boolean;
|
|
9
9
|
isDisabled: boolean;
|
|
10
|
-
size?: "SMALL" | "DEFAULT" | undefined;
|
|
10
|
+
size?: "SMALL" | "DEFAULT" | "XS" | undefined;
|
|
11
11
|
borderColor?: string | undefined;
|
|
12
12
|
}, never>;
|
|
@@ -10,26 +10,27 @@ const s = t.div`
|
|
|
10
10
|
background: ${o.surface.subdued};
|
|
11
11
|
}
|
|
12
12
|
`}
|
|
13
|
-
`,
|
|
14
|
-
width: ${(e) => e.size === "
|
|
15
|
-
height: ${(e) => e.size === "
|
|
13
|
+
`, n = t.div`
|
|
14
|
+
width: ${(e) => e.size === "DEFAULT" ? 14 : 12}px;
|
|
15
|
+
height: ${(e) => e.size === "DEFAULT" ? 14 : 12}px;
|
|
16
16
|
border-radius: 4px;
|
|
17
17
|
border: 2px solid black;
|
|
18
18
|
display: flex;
|
|
19
19
|
justify-content: center;
|
|
20
20
|
align-items: center;
|
|
21
|
-
box
|
|
21
|
+
/* XS is a true 12x12 box (border drawn inside); other sizes keep content-box. */
|
|
22
|
+
box-sizing: ${(e) => e.size === "XS" ? "border-box" : "content-box"};
|
|
22
23
|
${(e) => e.isDisabled ? i`
|
|
23
|
-
border: ${e.size === "
|
|
24
|
+
border: ${e.size === "DEFAULT" ? 2 : 1.5}px solid
|
|
24
25
|
${o.content.inactive};
|
|
25
26
|
` : i`
|
|
26
|
-
border: ${e.size === "
|
|
27
|
+
border: ${e.size === "DEFAULT" ? 2 : 1.5}px solid
|
|
27
28
|
${e.borderColor ?? "black"};
|
|
28
29
|
`}
|
|
29
30
|
${(e) => e.checked && i`
|
|
30
31
|
border: 0px;
|
|
31
|
-
width:
|
|
32
|
-
height:
|
|
32
|
+
width: ${e.size === "XS" ? 12 : 18}px;
|
|
33
|
+
height: ${e.size === "XS" ? 12 : 18}px;
|
|
33
34
|
`}
|
|
34
35
|
${(e) => e.hovered && i`
|
|
35
36
|
outline: 3px solid ${o.surface.hovered};
|
|
@@ -42,6 +43,6 @@ const s = t.div`
|
|
|
42
43
|
`;
|
|
43
44
|
export {
|
|
44
45
|
s as CheckboxContainer,
|
|
45
|
-
|
|
46
|
+
n as CheckboxIcon
|
|
46
47
|
};
|
|
47
48
|
//# sourceMappingURL=CheckBox.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' | 'DEFAULT';\n\tborderColor?: string;\n}>`\n\twidth: ${(props) => (props.size === '
|
|
1
|
+
{"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' | 'DEFAULT' | 'XS';\n\tborderColor?: string;\n}>`\n\twidth: ${(props) => (props.size === 'DEFAULT' ? 14 : 12)}px;\n\theight: ${(props) => (props.size === 'DEFAULT' ? 14 : 12)}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\t/* XS is a true 12x12 box (border drawn inside); other sizes keep content-box. */\n\tbox-sizing: ${(props) => (props.size === 'XS' ? 'border-box' : 'content-box')};\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t\twidth: ${props.size === 'XS' ? 12 : 18}px;\n\t\t\theight: ${props.size === 'XS' ? 12 : 18}px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon"],"mappings":";;AAGO,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA,WAO7B,CAACC,MAAWA,EAAM,aAAa,YAAY,SAAU;AAAA,GAC7D,CAACA,MACFA,EAAM,eACNC;AAAA;AAAA,kBAEgBC,EAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,GAGUC,IAAeJ,EAAO;AAAA,UAQzB,CAACC,MAAWA,EAAM,SAAS,YAAY,KAAK,EAAG;AAAA,WAC9C,CAACA,MAAWA,EAAM,SAAS,YAAY,KAAK,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO3C,CAACA,MAAWA,EAAM,SAAS,OAAO,eAAe,aAAc;AAAA,GAC3E,CAACA,MACFA,EAAM,aACHC;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCE,EAAO,QAAQ,QAAQ;AAAA,SAE1BD;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCA,EAAM,eAAe,OAAO;AAAA,MAC9B;AAAA,GACH,CAACA,MACFA,EAAM,WACNC;AAAA;AAAA,YAEUD,EAAM,SAAS,OAAO,KAAK,EAAE;AAAA,aAC5BA,EAAM,SAAS,OAAO,KAAK,EAAE;AAAA,GACvC;AAAA,GACA,CAACA,MACFA,EAAM,WACNC;AAAA,wBACsBC,EAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACA,CAACF,MACFA,EAAM,WACN,CAACA,EAAM,cACPC;AAAA;AAAA,MAEID,EAAM,UACLE,EAAO,OAAO,SAAS,WACvBA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA;"}
|