@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 6.03 kB
Source Map (JSON)
{"version":3,"file":"CheckboxIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline';\nexport type CheckboxIndicatorCssVariables = {\n indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls size of the component @default 'sm' */\n size?: MantineSize | (string & {});\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n iconColor?: MantineColor;\n\n /** If set, adjusts icon color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n indeterminate?: boolean;\n\n /** Icon for checked or indeterminate state */\n icon?: CheckboxIconComponent;\n\n /** Determines whether the component should have checked styles */\n checked?: boolean;\n\n /** Indicates disabled state */\n disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n props: CheckboxIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: CheckboxIndicatorStylesNames;\n vars: CheckboxIndicatorCssVariables;\n variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n icon: CheckboxIcon,\n variant: 'filled',\n radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n indicator: {\n '--checkbox-size': getSize(size, 'checkbox-size'),\n '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--checkbox-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n const props = useProps('CheckboxIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n icon: Icon,\n indeterminate,\n radius,\n color,\n iconColor,\n autoContrast,\n checked,\n mod,\n variant,\n disabled,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CheckboxIndicatorFactory>({\n name: 'CheckboxIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'indicator',\n });\n\n const ctx = use(CheckboxCardContext);\n const _checked =\n typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n ? checked || indeterminate\n : ctx?.checked || false;\n\n return (\n <Box\n {...getStyles('indicator', { variant })}\n variant={variant}\n mod={[{ checked: _checked, disabled }, mod]}\n {...others}\n >\n <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n </Box>\n );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,QAAQ;CACT;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,WAAW;EACT,mBAAmB,QAAQ,MAAM,gBAAgB;EACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACzE,oBAAoB,YAAY,YAAY,eAAe,cAAc,OAAO,MAAM;EACtF,yBAAyB,YACrB,cAAc,WAAW,MAAM,GAC/B,qBAAqB,cAAc,MAAM,GACvC,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACP,EACF;EAEJ;AAED,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,SAAS,qBAAqB,cAAc,OAAO;CACjE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,MAAM,IAAI,oBAAoB;CACpC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;AAEtB,QACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,SAAS,CAAC;EAC9B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;GAAU,EAAE,IAAI;EAC3C,GAAI;YAEJ,oBAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,OAAO;GAAI,CAAA;EACzD,CAAA;EAER;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}