@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1 lines • 4.09 kB
Source Map (JSON)
{"version":3,"sources":["../src/form/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage, type ErrorMessageProps } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> & {\n children: ReactNode;\n variant?: \"plain\" | \"bounding-box\";\n title?: string;\n errorMessageProps?: Partial<ErrorMessageProps>;\n} & (\n | {\n /**\n * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n *\n * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n *\n * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n */\n hasError?: boolean;\n errorMessage?: never;\n }\n | {\n hasError?: never;\n /**\n * Set an error message to add error styling, and display the error message.\n * The component will take care of aria to connect the error message to the checkbox.\n *\n * Use this when your checkbox is standalone (not part of a fieldset).\n */\n errorMessage?: ReactNode;\n }\n );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n variant = \"plain\",\n hasError: hasErrorProp,\n errorMessage,\n errorMessageProps,\n title,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const errorMessageId = useId();\n const { hasError: hasFieldsetError } = useFieldsetContext();\n const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n\n return (\n <div className={clsx(\"hds-checkbox-wrapper\")}>\n <div\n className={clsx(\n \"hds-checkbox\",\n {\n [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n \"hds-checkbox--error\": hasError,\n },\n className as undefined,\n )}\n >\n <label>\n <input\n {...rest}\n aria-invalid={hasError ? true : undefined}\n aria-describedby={errorMessage ? errorMessageId : undefined}\n ref={ref}\n type=\"checkbox\"\n />\n <span aria-hidden className=\"hds-checkbox__checkmark\" />\n {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n </label>\n {title ? children : null}\n </div>\n <ErrorMessage id={errorMessageId} {...errorMessageProps}>\n {errorMessage}\n </ErrorMessage>\n </div>\n );\n },\n);\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY,aAAuD;AAC5E,SAAS,YAAY;AAgEX,SACE,KADF;AA9BH,IAAM,WAAW;AAAA,EACtB,CACE,IAUA,QACG;AAXH,iBACE;AAAA,gBAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IA5CN,IAqCI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,iBAAiB,MAAM;AAC7B,UAAM,EAAE,UAAU,iBAAiB,IAAI,mBAAmB;AAC1D,UAAM,WAAW,CAAC,CAAC,gBAAgB,oBAAoB;AAEvD,WACE,qBAAC,SAAI,WAAW,KAAK,sBAAsB,GACzC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,CAAC,iBAAiB,OAAO,EAAE,GAAG,YAAY;AAAA,cAC1C,uBAAuB;AAAA,YACzB;AAAA,YACA;AAAA,UACF;AAAA,UAEA;AAAA,iCAAC,WACC;AAAA;AAAA,gBAAC;AAAA,iDACK,OADL;AAAA,kBAEC,gBAAc,WAAW,OAAO;AAAA,kBAChC,oBAAkB,eAAe,iBAAiB;AAAA,kBAClD;AAAA,kBACA,MAAK;AAAA;AAAA,cACP;AAAA,cACA,oBAAC,UAAK,eAAW,MAAC,WAAU,2BAA0B;AAAA,cACrD,QAAQ,oBAAC,OAAE,WAAU,uBAAuB,iBAAM,IAAO;AAAA,eAC5D;AAAA,YACC,QAAQ,WAAW;AAAA;AAAA;AAAA,MACtB;AAAA,MACA,oBAAC,6CAAa,IAAI,kBAAoB,oBAArC,EACE,yBACH;AAAA,OACF;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}