@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.14 kB
Source Map (JSON)
{"version":3,"file":"InputLabel.cjs","names":["createVarsResolver","getFontSize","factory","useProps","useStyles","InputWrapperContext","Box","classes"],"sources":["../../../../src/components/Input/InputLabel/InputLabel.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getFontSize,\n MantineFontSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport classes from '../Input.module.css';\n\nexport type InputLabelStylesNames = 'label' | 'required';\nexport type InputLabelCssVariables = {\n label: '--input-asterisk-color' | '--input-label-size';\n};\n\nexport interface InputLabelProps\n extends BoxProps, StylesApiProps<InputLabelFactory>, ElementProps<'label'> {\n __staticSelector?: string;\n\n /** If set, the required asterisk is displayed next to the label */\n required?: boolean;\n\n /** Controls label `font-size` @default 'sm' */\n size?: MantineFontSize;\n\n /** Root element of the label @default 'label' */\n labelElement?: 'label' | 'div';\n}\n\nexport type InputLabelFactory = Factory<{\n props: InputLabelProps;\n ref: HTMLLabelElement;\n stylesNames: InputLabelStylesNames;\n vars: InputLabelCssVariables;\n}>;\n\nconst defaultProps = {\n labelElement: 'label',\n} satisfies Partial<InputLabelProps>;\n\nconst varsResolver = createVarsResolver<InputLabelFactory>((_, { size }) => ({\n label: {\n '--input-label-size': getFontSize(size),\n '--input-asterisk-color': undefined,\n },\n}));\n\nexport const InputLabel = factory<InputLabelFactory>((_props) => {\n const props = useProps('InputLabel', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n labelElement,\n required,\n htmlFor,\n onMouseDown,\n children,\n __staticSelector,\n mod,\n attributes,\n ...others\n } = props;\n\n const _getStyles = useStyles<InputLabelFactory>({\n name: ['InputWrapper', __staticSelector],\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'label',\n vars,\n varsResolver,\n });\n\n const ctx = use(InputWrapperContext);\n const getStyles = ctx?.getStyles || _getStyles;\n\n return (\n <Box\n {...getStyles('label', ctx?.getStyles ? { className, style } : undefined)}\n component={labelElement as 'label'}\n htmlFor={labelElement === 'label' ? htmlFor : undefined}\n mod={[{ required }, mod]}\n onMouseDown={(event) => {\n onMouseDown?.(event);\n if (!event.defaultPrevented && event.detail > 1) {\n event.preventDefault();\n }\n }}\n {...others}\n >\n {children}\n {required && (\n <span {...getStyles('required')} aria-hidden>\n {' *'}\n </span>\n )}\n </Box>\n );\n});\n\nInputLabel.classes = classes;\nInputLabel.varsResolver = varsResolver;\nInputLabel.displayName = '@mantine/core/InputLabel';\n"],"mappings":";;;;;;;;;;;;;AA2CA,MAAM,eAAe,EACnB,cAAc,SACf;AAED,MAAM,eAAeA,6BAAAA,oBAAuC,GAAG,EAAE,YAAY,EAC3E,OAAO;CACL,sBAAsBC,iBAAAA,YAAY,KAAK;CACvC,0BAA0B,KAAA;CAC3B,EACF,EAAE;AAEH,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,UACA,SACA,aACA,UACA,kBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAaC,mBAAAA,UAA6B;EAC9C,MAAM,CAAC,gBAAgB,iBAAiB;EACxC;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;EACD,CAAC;CAEF,MAAM,OAAA,GAAA,MAAA,KAAUC,6BAAAA,oBAAoB;CACpC,MAAM,YAAY,KAAK,aAAa;AAEpC,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACE,GAAI,UAAU,SAAS,KAAK,YAAY;GAAE;GAAW;GAAO,GAAG,KAAA,EAAU;EACzE,WAAW;EACX,SAAS,iBAAiB,UAAU,UAAU,KAAA;EAC9C,KAAK,CAAC,EAAE,UAAU,EAAE,IAAI;EACxB,cAAc,UAAU;AACtB,iBAAc,MAAM;AACpB,OAAI,CAAC,MAAM,oBAAoB,MAAM,SAAS,EAC5C,OAAM,gBAAgB;;EAG1B,GAAI;YAXN,CAaG,UACA,YACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,GAAI,UAAU,WAAW;GAAE,eAAA;aAC9B;GACI,CAAA,CAEL;;EAER;AAEF,WAAW,UAAUC,qBAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}