@indico-data/design-system 2.6.0 → 2.7.0

package/lib/index.css

@@ -1054,6 +1054,95 @@
   background: var(--pf-radio-disabled-color);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-checkbox-background-color: var(--pf-white-color);
+  --pf-checkbox-check-color: var(--pf-primary-color);
+  --pf-checkbox-border-color: var(--pf-gray-color);
+  --pf-checkbox-disabled-color: var(--pf-gray-color-400);
+}
+
+:root [data-theme=dark] {
+  --pf-checkbox-background-color: transparent;
+  --pf-checkbox-check-color: var(--pf-white-color);
+  --pf-checkbox-border-color: var(--pf-white-color);
+  --pf-checkbox-disabled-color: var(--pf-gray-color-300);
+}
+
+.form-control .checkbox-wrapper {
+  display: flex;
+  margin-bottom: var(--pf-margin-2);
+  align-items: center;
+}
+.form-control .checkbox-input {
+  margin: 0;
+  margin-right: var(--pf-margin-2);
+  cursor: pointer;
+}
+.form-control .checkbox-input-label {
+  cursor: pointer;
+}
+.form-control [type=checkbox]:checked,
+.form-control [type=checkbox]:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+.form-control [type=checkbox]:checked + label,
+.form-control [type=checkbox]:not(:checked) + label {
+  position: relative;
+  padding-left: var(--pf-padding-7);
+  cursor: pointer;
+  line-height: 20px;
+  display: inline-block;
+}
+.form-control [type=checkbox]:checked + label:before,
+.form-control [type=checkbox]:not(:checked) + label:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--pf-checkbox-border-color);
+  border-radius: var(--pf-rounded);
+  background: var(--pf-checkbox-background-color);
+}
+.form-control [type=checkbox]:checked + label:after,
+.form-control [type=checkbox]:not(:checked) + label:after {
+  content: "";
+  width: 12px;
+  height: 12px;
+  background: var(--pf-checkbox-check-color);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  border-radius: var(--pf-rounded);
+  transition: all 0.2s ease;
+}
+.form-control [type=checkbox]:not(:checked) + label:after {
+  opacity: 0;
+  transform: scale(0);
+}
+.form-control [type=checkbox]:checked + label:after {
+  opacity: 1;
+  transform: scale(1);
+}
+.form-control [type=checkbox]:disabled,
+.form-control [type=checkbox]:disabled + label {
+  cursor: not-allowed;
+}
+.form-control [type=checkbox]:disabled + label {
+  color: var(--pf-checkbox-disabled-color);
+  opacity: 0.5;
+}
+.form-control [type=checkbox]:disabled + label:before {
+  border-color: var(--pf-checkbox-disabled-color);
+}
+.form-control [type=checkbox]:disabled + label:after {
+  background: var(--pf-checkbox-disabled-color);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;

package/lib/index.d.ts

@@ -950,4 +950,16 @@ interface RadioProps {
 }
 declare const Radio: ({ ref, id, label, name, value, onChange, isDisabled, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, Toggle, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+interface CheckboxProps {
+    ref?: React$1.LegacyRef<HTMLInputElement>;
+    id: string;
+    label: string;
+    name: string;
+    value?: string;
+    isChecked?: boolean | undefined;
+    onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    isDisabled?: boolean;
+}
+declare const Checkbox: ({ ref, id, label, name, value, onChange, isDisabled, isChecked, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, Toggle, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };

package/lib/index.esm.css

@@ -1054,6 +1054,95 @@
   background: var(--pf-radio-disabled-color);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-checkbox-background-color: var(--pf-white-color);
+  --pf-checkbox-check-color: var(--pf-primary-color);
+  --pf-checkbox-border-color: var(--pf-gray-color);
+  --pf-checkbox-disabled-color: var(--pf-gray-color-400);
+}
+
+:root [data-theme=dark] {
+  --pf-checkbox-background-color: transparent;
+  --pf-checkbox-check-color: var(--pf-white-color);
+  --pf-checkbox-border-color: var(--pf-white-color);
+  --pf-checkbox-disabled-color: var(--pf-gray-color-300);
+}
+
+.form-control .checkbox-wrapper {
+  display: flex;
+  margin-bottom: var(--pf-margin-2);
+  align-items: center;
+}
+.form-control .checkbox-input {
+  margin: 0;
+  margin-right: var(--pf-margin-2);
+  cursor: pointer;
+}
+.form-control .checkbox-input-label {
+  cursor: pointer;
+}
+.form-control [type=checkbox]:checked,
+.form-control [type=checkbox]:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+.form-control [type=checkbox]:checked + label,
+.form-control [type=checkbox]:not(:checked) + label {
+  position: relative;
+  padding-left: var(--pf-padding-7);
+  cursor: pointer;
+  line-height: 20px;
+  display: inline-block;
+}
+.form-control [type=checkbox]:checked + label:before,
+.form-control [type=checkbox]:not(:checked) + label:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--pf-checkbox-border-color);
+  border-radius: var(--pf-rounded);
+  background: var(--pf-checkbox-background-color);
+}
+.form-control [type=checkbox]:checked + label:after,
+.form-control [type=checkbox]:not(:checked) + label:after {
+  content: "";
+  width: 12px;
+  height: 12px;
+  background: var(--pf-checkbox-check-color);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  border-radius: var(--pf-rounded);
+  transition: all 0.2s ease;
+}
+.form-control [type=checkbox]:not(:checked) + label:after {
+  opacity: 0;
+  transform: scale(0);
+}
+.form-control [type=checkbox]:checked + label:after {
+  opacity: 1;
+  transform: scale(1);
+}
+.form-control [type=checkbox]:disabled,
+.form-control [type=checkbox]:disabled + label {
+  cursor: not-allowed;
+}
+.form-control [type=checkbox]:disabled + label {
+  color: var(--pf-checkbox-disabled-color);
+  opacity: 0.5;
+}
+.form-control [type=checkbox]:disabled + label:before {
+  border-color: var(--pf-checkbox-disabled-color);
+}
+.form-control [type=checkbox]:disabled + label:after {
+  background: var(--pf-checkbox-disabled-color);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;

package/lib/index.esm.js

@@ -18654,6 +18654,11 @@ const Radio$2 = (_a) => {
     return (jsx("div", { className: "form-control", children: jsxs("div", { className: "radio-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-radio-input-${name}` }, rest, { className: "radio-input", type: "radio", id: id, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label })), jsx("label", { htmlFor: id, className: "radio-input-label", "data-testid": `label-radio-input-${name}`, children: label })] }) }));
 };
 
+const Checkbox = (_a) => {
+    var { ref, id, label, name, value, onChange, isDisabled, isChecked = false } = _a, rest = __rest$1(_a, ["ref", "id", "label", "name", "value", "onChange", "isDisabled", "isChecked"]);
+    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "checkbox-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-checkbox-input-${name}` }, rest, { className: "checkbox-input", type: "checkbox", id: id, checked: isChecked, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label })), jsx("label", { htmlFor: id, className: "checkbox-input-label", "data-testid": `label-checkbox-input-${name}`, children: label })] }) }));
+};
+
 const StyledAccordion = styled.details `
   summary {
     display: inherit;
@@ -41475,5 +41480,5 @@ const Tooltip = (props) => {
                 openOnClick: props.clickToShow, id: props.for, delayShow: props.delayShow, delayHide: props.delayHide, children: props.children })] }));
 };
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, Toggle, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, Toggle, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
 //# sourceMappingURL=index.esm.js.map