@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
389 lines (388 loc) • 11.3 kB
JavaScript
import * as P from "react";
import { P as e } from "./index-Sy88PpwE.js";
import { F as j, G as R, H as M, K as n, n as S, s as N, q as D } from "./identifier-PWESmBq6.js";
import { c as I } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { S as U } from "./SwitchBase-DZV8S81Z.js";
import { m as d } from "./memoTheme-DAFDflPY.js";
import { u as y } from "./useSlot-BzdKwDQ5.js";
import { jsx as v, jsxs as E } from "react/jsx-runtime";
import { u as F, s as u, c as q } from "./DefaultPropsProvider-DqazQPtr.js";
import { r as A } from "./refType-Dp7CJc86.js";
function V(t) {
return R("MuiSwitch", t);
}
const a = j("MuiSwitch", ["root", "edgeStart", "edgeEnd", "switchBase", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium", "checked", "disabled", "input", "thumb", "track"]), X = (t) => {
const {
classes: o,
edge: s,
size: p,
color: h,
checked: f,
disabled: b
} = t, g = {
root: ["root", s && `edge${n(s)}`, `size${n(p)}`],
switchBase: ["switchBase", `color${n(h)}`, f && "checked", b && "disabled"],
thumb: ["thumb"],
track: ["track"],
input: ["input"]
}, m = q(g, V, o);
return {
...o,
// forward the disabled and checked classes to the SwitchBase
...m
};
}, G = u("span", {
name: "MuiSwitch",
slot: "Root",
overridesResolver: (t, o) => {
const {
ownerState: s
} = t;
return [o.root, s.edge && o[`edge${n(s.edge)}`], o[`size${n(s.size)}`]];
}
})({
display: "inline-flex",
width: 34 + 12 * 2,
height: 14 + 12 * 2,
overflow: "hidden",
padding: 12,
boxSizing: "border-box",
position: "relative",
flexShrink: 0,
zIndex: 0,
// Reset the stacking context.
verticalAlign: "middle",
// For correct alignment with the text.
"@media print": {
colorAdjust: "exact"
},
variants: [{
props: {
edge: "start"
},
style: {
marginLeft: -8
}
}, {
props: {
edge: "end"
},
style: {
marginRight: -8
}
}, {
props: {
size: "small"
},
style: {
width: 40,
height: 24,
padding: 7,
[`& .${a.thumb}`]: {
width: 16,
height: 16
},
[`& .${a.switchBase}`]: {
padding: 4,
[`&.${a.checked}`]: {
transform: "translateX(16px)"
}
}
}
}]
}), H = u(U, {
name: "MuiSwitch",
slot: "SwitchBase",
overridesResolver: (t, o) => {
const {
ownerState: s
} = t;
return [o.switchBase, {
[`& .${a.input}`]: o.input
}, s.color !== "default" && o[`color${n(s.color)}`]];
}
})(d(({
theme: t
}) => ({
position: "absolute",
top: 0,
left: 0,
zIndex: 1,
// Render above the focus ripple.
color: t.vars ? t.vars.palette.Switch.defaultColor : `${t.palette.mode === "light" ? t.palette.common.white : t.palette.grey[300]}`,
transition: t.transitions.create(["left", "transform"], {
duration: t.transitions.duration.shortest
}),
[`&.${a.checked}`]: {
transform: "translateX(20px)"
},
[`&.${a.disabled}`]: {
color: t.vars ? t.vars.palette.Switch.defaultDisabledColor : `${t.palette.mode === "light" ? t.palette.grey[100] : t.palette.grey[600]}`
},
[`&.${a.checked} + .${a.track}`]: {
opacity: 0.5
},
[`&.${a.disabled} + .${a.track}`]: {
opacity: t.vars ? t.vars.opacity.switchTrackDisabled : `${t.palette.mode === "light" ? 0.12 : 0.2}`
},
[`& .${a.input}`]: {
left: "-100%",
width: "300%"
}
})), d(({
theme: t
}) => ({
"&:hover": {
backgroundColor: t.vars ? `rgba(${t.vars.palette.action.activeChannel} / ${t.vars.palette.action.hoverOpacity})` : S(t.palette.action.active, t.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
"@media (hover: none)": {
backgroundColor: "transparent"
}
},
variants: [...Object.entries(t.palette).filter(I(["light"])).map(([o]) => ({
props: {
color: o
},
style: {
[`&.${a.checked}`]: {
color: (t.vars || t).palette[o].main,
"&:hover": {
backgroundColor: t.vars ? `rgba(${t.vars.palette[o].mainChannel} / ${t.vars.palette.action.hoverOpacity})` : S(t.palette[o].main, t.palette.action.hoverOpacity),
"@media (hover: none)": {
backgroundColor: "transparent"
}
},
[`&.${a.disabled}`]: {
color: t.vars ? t.vars.palette.Switch[`${o}DisabledColor`] : `${t.palette.mode === "light" ? N(t.palette[o].main, 0.62) : D(t.palette[o].main, 0.55)}`
}
},
[`&.${a.checked} + .${a.track}`]: {
backgroundColor: (t.vars || t).palette[o].main
}
}
}))]
}))), K = u("span", {
name: "MuiSwitch",
slot: "Track"
})(d(({
theme: t
}) => ({
height: "100%",
width: "100%",
borderRadius: 14 / 2,
zIndex: -1,
transition: t.transitions.create(["opacity", "background-color"], {
duration: t.transitions.duration.shortest
}),
backgroundColor: t.vars ? t.vars.palette.common.onBackground : `${t.palette.mode === "light" ? t.palette.common.black : t.palette.common.white}`,
opacity: t.vars ? t.vars.opacity.switchTrack : `${t.palette.mode === "light" ? 0.38 : 0.3}`
}))), L = u("span", {
name: "MuiSwitch",
slot: "Thumb"
})(d(({
theme: t
}) => ({
boxShadow: (t.vars || t).shadows[1],
backgroundColor: "currentColor",
width: 20,
height: 20,
borderRadius: "50%"
}))), _ = /* @__PURE__ */ P.forwardRef(function(o, s) {
const p = F({
props: o,
name: "MuiSwitch"
}), {
className: h,
color: f = "primary",
edge: b = !1,
size: g = "medium",
sx: m,
slots: c = {},
slotProps: r = {},
...$
} = p, i = {
...p,
color: f,
edge: b,
size: g
}, l = X(i), w = {
slots: c,
slotProps: r
}, [T, C] = y("root", {
className: M(l.root, h),
elementType: G,
externalForwardedProps: w,
ownerState: i,
additionalProps: {
sx: m
}
}), [x, O] = y("thumb", {
className: l.thumb,
elementType: L,
externalForwardedProps: w,
ownerState: i
}), k = /* @__PURE__ */ v(x, {
...O
}), [B, z] = y("track", {
className: l.track,
elementType: K,
externalForwardedProps: w,
ownerState: i
});
return /* @__PURE__ */ E(T, {
...C,
children: [/* @__PURE__ */ v(H, {
type: "checkbox",
icon: k,
checkedIcon: k,
ref: s,
ownerState: i,
...$,
classes: {
...l,
root: l.switchBase
},
slots: {
...c.switchBase && {
root: c.switchBase
},
...c.input && {
input: c.input
}
},
slotProps: {
...r.switchBase && {
root: typeof r.switchBase == "function" ? r.switchBase(i) : r.switchBase
},
...r.input && {
input: typeof r.input == "function" ? r.input(i) : r.input
}
}
}), /* @__PURE__ */ v(B, {
...z
})]
});
});
process.env.NODE_ENV !== "production" && (_.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* If `true`, the component is checked.
*/
checked: e.bool,
/**
* The icon to display when the component is checked.
*/
checkedIcon: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'primary'
*/
color: e.oneOfType([e.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
/**
* The default checked state. Use when the component is not controlled.
*/
defaultChecked: e.bool,
/**
* If `true`, the component is disabled.
*/
disabled: e.bool,
/**
* If `true`, the ripple effect is disabled.
* @default false
*/
disableRipple: e.bool,
/**
* If given, uses a negative margin to counteract the padding on one
* side (this is often helpful for aligning the left or right
* side of the icon with content above or below, without ruining the border
* size and shape).
* @default false
*/
edge: e.oneOf(["end", "start", !1]),
/**
* The icon to display when the component is unchecked.
*/
icon: e.node,
/**
* The id of the `input` element.
*/
id: e.string,
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
* @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
inputProps: e.object,
/**
* Pass a ref to the `input` element.
* @deprecated Use `slotProps.input.ref` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
inputRef: A,
/**
* Callback fired when the state is changed.
*
* @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (string).
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
*/
onChange: e.func,
/**
* If `true`, the `input` element is required.
* @default false
*/
required: e.bool,
/**
* The size of the component.
* `small` is equivalent to the dense switch styling.
* @default 'medium'
*/
size: e.oneOfType([e.oneOf(["medium", "small"]), e.string]),
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: e.shape({
input: e.oneOfType([e.func, e.object]),
root: e.oneOfType([e.func, e.object]),
switchBase: e.oneOfType([e.func, e.object]),
thumb: e.oneOfType([e.func, e.object]),
track: e.oneOfType([e.func, e.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: e.shape({
input: e.elementType,
root: e.elementType,
switchBase: e.elementType,
thumb: e.elementType,
track: e.elementType
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
/**
* The value of the component. The DOM API casts this to a string.
* The browser uses "on" as the default value.
*/
value: e.any
});
export {
_ as S,
V as g,
a as s
};