@indico-data/design-system 2.7.0 → 2.8.0

package/lib/index.css

@@ -1083,21 +1083,21 @@
 .form-control .checkbox-input-label {
   cursor: pointer;
 }
-.form-control [type=checkbox]:checked,
-.form-control [type=checkbox]:not(:checked) {
+.form-control .checkbox-input:checked,
+.form-control .checkbox-input:not(:checked) {
   position: absolute;
   left: -9999px;
 }
-.form-control [type=checkbox]:checked + label,
-.form-control [type=checkbox]:not(:checked) + label {
+.form-control .checkbox-input:checked + label,
+.form-control .checkbox-input: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 {
+.form-control .checkbox-input:checked + label:before,
+.form-control .checkbox-input:not(:checked) + label:before {
   content: "";
   position: absolute;
   left: 0;
@@ -1108,8 +1108,8 @@
   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 {
+.form-control .checkbox-input:checked + label:after,
+.form-control .checkbox-input:not(:checked) + label:after {
   content: "";
   width: 12px;
   height: 12px;
@@ -1120,29 +1120,105 @@
   border-radius: var(--pf-rounded);
   transition: all 0.2s ease;
 }
-.form-control [type=checkbox]:not(:checked) + label:after {
+.form-control .checkbox-input:not(:checked) + label:after {
   opacity: 0;
   transform: scale(0);
 }
-.form-control [type=checkbox]:checked + label:after {
+.form-control .checkbox-input:checked + label:after {
   opacity: 1;
   transform: scale(1);
 }
-.form-control [type=checkbox]:disabled,
-.form-control [type=checkbox]:disabled + label {
+.form-control .checkbox-input:disabled,
+.form-control .checkbox-input:disabled + label {
   cursor: not-allowed;
 }
-.form-control [type=checkbox]:disabled + label {
+.form-control .checkbox-input:disabled + label {
   color: var(--pf-checkbox-disabled-color);
   opacity: 0.5;
 }
-.form-control [type=checkbox]:disabled + label:before {
+.form-control .checkbox-input:disabled + label:before {
   border-color: var(--pf-checkbox-disabled-color);
 }
-.form-control [type=checkbox]:disabled + label:after {
+.form-control .checkbox-input:disabled + label:after {
   background: var(--pf-checkbox-disabled-color);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-toggle-background-color: var(--pf-gray-color-200);
+  --pf-toggle-circle-color: var(--pf-primary-color);
+  --pf-toggle-border-color: var(--pf-gray-color);
+  --pf-toggle-disabled-background-color: var(--pf-gray-color-400);
+  --pf-toggle-disabled-circle-color: var(--pf-gray-color-300);
+  --pf-toggle-checked-background-color: var(--pf-primary-color-200);
+}
+
+:root [data-theme=dark] {
+  --pf-toggle-background-color: var(--pf-primary-color-100);
+  --pf-toggle-circle-color: var(--pf-white-color);
+  --pf-toggle-border-color: var(--pf-white-color);
+  --pf-toggle-disabled-background-color: var(--pf-gray-color-600);
+  --pf-toggle-disabled-circle-color: var(--pf-gray-color-900);
+  --pf-toggle-checked-background-color: var(--pf-secondary-color-400);
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background-color: var(--pf-toggle-background-color);
+  border-radius: 20px;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.switch::after {
+  content: "";
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--pf-toggle-circle-color);
+  top: 1px;
+  left: 1px;
+  transition: all 0.3s;
+}
+
+.toggle-input:checked + label.switch::after {
+  left: 20px;
+}
+
+.toggle-input:checked + label.switch {
+  background-color: var(--pf-toggle-checked-background-color);
+}
+
+.toggle-input:checked,
+.toggle-input:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+
+.toggle-input:disabled + label.switch {
+  background-color: var(--pf-toggle-disabled-background-color);
+  cursor: not-allowed;
+}
+
+.toggle-input:disabled + label.switch::after {
+  background-color: var(--pf-toggle-disabled-circle-color);
+}
+
+.toggle-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.toggle-label {
+  cursor: pointer;
+  margin-left: var(--pf-margin-2);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;

package/lib/index.d.ts

@@ -758,7 +758,7 @@ type Props$1 = {
     checkedIconName?: IconName$1;
     notCheckedIconName?: IconName$1;
 } & PermafrostComponent$1;
-declare const Toggle: (props: Props$1) => react_jsx_runtime.JSX.Element;
+declare const Toggle$1: (props: Props$1) => react_jsx_runtime.JSX.Element;
 
 type Props = PermafrostComponent$1 & {
     questionMark?: boolean;
@@ -962,4 +962,16 @@ interface CheckboxProps {
 }
 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 };
+interface ToggleProps {
+    ref?: React$1.LegacyRef<HTMLInputElement>;
+    id: string;
+    label?: string;
+    name: string;
+    value?: string;
+    onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    isDisabled?: boolean;
+    isChecked?: boolean;
+}
+declare const Toggle: ({ ref, id, label, name, value, onChange, isDisabled, isChecked, ...rest }: ToggleProps) => 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$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };

package/lib/index.esm.css

@@ -1083,21 +1083,21 @@
 .form-control .checkbox-input-label {
   cursor: pointer;
 }
-.form-control [type=checkbox]:checked,
-.form-control [type=checkbox]:not(:checked) {
+.form-control .checkbox-input:checked,
+.form-control .checkbox-input:not(:checked) {
   position: absolute;
   left: -9999px;
 }
-.form-control [type=checkbox]:checked + label,
-.form-control [type=checkbox]:not(:checked) + label {
+.form-control .checkbox-input:checked + label,
+.form-control .checkbox-input: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 {
+.form-control .checkbox-input:checked + label:before,
+.form-control .checkbox-input:not(:checked) + label:before {
   content: "";
   position: absolute;
   left: 0;
@@ -1108,8 +1108,8 @@
   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 {
+.form-control .checkbox-input:checked + label:after,
+.form-control .checkbox-input:not(:checked) + label:after {
   content: "";
   width: 12px;
   height: 12px;
@@ -1120,29 +1120,105 @@
   border-radius: var(--pf-rounded);
   transition: all 0.2s ease;
 }
-.form-control [type=checkbox]:not(:checked) + label:after {
+.form-control .checkbox-input:not(:checked) + label:after {
   opacity: 0;
   transform: scale(0);
 }
-.form-control [type=checkbox]:checked + label:after {
+.form-control .checkbox-input:checked + label:after {
   opacity: 1;
   transform: scale(1);
 }
-.form-control [type=checkbox]:disabled,
-.form-control [type=checkbox]:disabled + label {
+.form-control .checkbox-input:disabled,
+.form-control .checkbox-input:disabled + label {
   cursor: not-allowed;
 }
-.form-control [type=checkbox]:disabled + label {
+.form-control .checkbox-input:disabled + label {
   color: var(--pf-checkbox-disabled-color);
   opacity: 0.5;
 }
-.form-control [type=checkbox]:disabled + label:before {
+.form-control .checkbox-input:disabled + label:before {
   border-color: var(--pf-checkbox-disabled-color);
 }
-.form-control [type=checkbox]:disabled + label:after {
+.form-control .checkbox-input:disabled + label:after {
   background: var(--pf-checkbox-disabled-color);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-toggle-background-color: var(--pf-gray-color-200);
+  --pf-toggle-circle-color: var(--pf-primary-color);
+  --pf-toggle-border-color: var(--pf-gray-color);
+  --pf-toggle-disabled-background-color: var(--pf-gray-color-400);
+  --pf-toggle-disabled-circle-color: var(--pf-gray-color-300);
+  --pf-toggle-checked-background-color: var(--pf-primary-color-200);
+}
+
+:root [data-theme=dark] {
+  --pf-toggle-background-color: var(--pf-primary-color-100);
+  --pf-toggle-circle-color: var(--pf-white-color);
+  --pf-toggle-border-color: var(--pf-white-color);
+  --pf-toggle-disabled-background-color: var(--pf-gray-color-600);
+  --pf-toggle-disabled-circle-color: var(--pf-gray-color-900);
+  --pf-toggle-checked-background-color: var(--pf-secondary-color-400);
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background-color: var(--pf-toggle-background-color);
+  border-radius: 20px;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.switch::after {
+  content: "";
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--pf-toggle-circle-color);
+  top: 1px;
+  left: 1px;
+  transition: all 0.3s;
+}
+
+.toggle-input:checked + label.switch::after {
+  left: 20px;
+}
+
+.toggle-input:checked + label.switch {
+  background-color: var(--pf-toggle-checked-background-color);
+}
+
+.toggle-input:checked,
+.toggle-input:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+
+.toggle-input:disabled + label.switch {
+  background-color: var(--pf-toggle-disabled-background-color);
+  cursor: not-allowed;
+}
+
+.toggle-input:disabled + label.switch::after {
+  background-color: var(--pf-toggle-disabled-circle-color);
+}
+
+.toggle-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.toggle-label {
+  cursor: pointer;
+  margin-left: var(--pf-margin-2);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;

package/lib/index.esm.js

@@ -18656,7 +18656,12 @@ const Radio$2 = (_a) => {
 
 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 })] }) }));
+    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "checkbox-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-checkbox-input-${name}`, 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 }, rest)), jsx("label", { htmlFor: id, className: "checkbox-input-label", "data-testid": `label-checkbox-input-${name}`, children: label })] }) }));
+};
+
+const Toggle$1 = (_a) => {
+    var { ref, id, label, name, value, onChange, isDisabled, isChecked } = _a, rest = __rest$1(_a, ["ref", "id", "label", "name", "value", "onChange", "isDisabled", "isChecked"]);
+    return (jsx("div", { className: "form-control", children: jsxs("div", { className: "toggle-wrapper", children: [jsx("input", Object.assign({ "data-testid": `form-toggle-input-${name}`, className: "toggle-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 }, rest)), jsx("label", { htmlFor: id, className: "switch" }), jsx("label", { className: 'toggle-label', htmlFor: id, children: label })] }) }));
 };
 
 const StyledAccordion = styled.details `
@@ -41480,5 +41485,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, 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 };
+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, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
 //# sourceMappingURL=index.esm.js.map