@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
272 lines (271 loc) • 8.49 kB
JavaScript
import * as f from "react";
import { P as o } from "./index-B9vkf41S.js";
import { F as j, G as w, H as B } from "./generateUtilityClasses-B_xKAflz.js";
import { S as M } from "./SwitchBase-BWz31Ed6.js";
import { c as h } from "./createSvgIcon-DFIM5PqN.js";
import { jsx as r } from "react/jsx-runtime";
import { u as $, s as F, c as H, r as V } from "./DefaultPropsProvider-BrmlvPWg.js";
import { m as N } from "./memoTheme-C-PaH-Cy.js";
import { c as I } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { u as E } from "./useSlot-BSkdRaZr.js";
import { m as U } from "./mergeSlotProps-DVtjofCS.js";
import { c } from "./capitalize-BHEX83JQ.js";
const D = h(/* @__PURE__ */ r("path", {
d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
}), "CheckBoxOutlineBlank"), L = h(/* @__PURE__ */ r("path", {
d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
}), "CheckBox"), q = h(/* @__PURE__ */ r("path", {
d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
}), "IndeterminateCheckBox");
function G(e) {
return w("MuiCheckbox", e);
}
const b = j("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]), _ = (e) => {
const {
classes: t,
indeterminate: s,
color: n,
size: i
} = e, l = {
root: ["root", s && "indeterminate", `color${c(n)}`, `size${c(i)}`]
}, p = H(l, G, t);
return {
...t,
// forward the disabled and checked classes to the SwitchBase
...p
};
}, A = F(M, {
shouldForwardProp: (e) => V(e) || e === "classes",
name: "MuiCheckbox",
slot: "Root",
overridesResolver: (e, t) => {
const {
ownerState: s
} = e;
return [t.root, s.indeterminate && t.indeterminate, t[`size${c(s.size)}`], s.color !== "default" && t[`color${c(s.color)}`]];
}
})(N(({
theme: e
}) => ({
color: (e.vars || e).palette.text.secondary,
variants: [{
props: {
color: "default",
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: e.alpha((e.vars || e).palette.action.active, (e.vars || e).palette.action.hoverOpacity)
}
}
}, ...Object.entries(e.palette).filter(I()).map(([t]) => ({
props: {
color: t,
disableRipple: !1
},
style: {
"&:hover": {
backgroundColor: e.alpha((e.vars || e).palette[t].main, (e.vars || e).palette.action.hoverOpacity)
}
}
})), ...Object.entries(e.palette).filter(I()).map(([t]) => ({
props: {
color: t
},
style: {
[`&.${b.checked}, &.${b.indeterminate}`]: {
color: (e.vars || e).palette[t].main
},
[`&.${b.disabled}`]: {
color: (e.vars || e).palette.action.disabled
}
}
})), {
// Should be last to override other colors
props: {
disableRipple: !1
},
style: {
// Reset on touch devices, it doesn't add specificity
"&:hover": {
"@media (hover: none)": {
backgroundColor: "transparent"
}
}
}
}]
}))), J = /* @__PURE__ */ r(L, {}), K = /* @__PURE__ */ r(D, {}), Q = /* @__PURE__ */ r(q, {}), W = /* @__PURE__ */ f.forwardRef(function(t, s) {
const n = $({
props: t,
name: "MuiCheckbox"
}), {
checkedIcon: i = J,
color: l = "primary",
icon: p = K,
indeterminate: a = !1,
indeterminateIcon: k = Q,
inputProps: S,
size: d = "medium",
disableRipple: y = !1,
className: O,
slots: C = {},
slotProps: v = {},
...g
} = n, x = a ? k : p, P = a ? k : i, m = {
...n,
disableRipple: y,
color: l,
indeterminate: a,
size: d
}, z = _(m), u = v.input ?? S, [T, R] = E("root", {
ref: s,
elementType: A,
className: B(z.root, O),
shouldForwardComponentProp: !0,
externalForwardedProps: {
slots: C,
slotProps: v,
...g
},
ownerState: m,
additionalProps: {
type: "checkbox",
icon: /* @__PURE__ */ f.cloneElement(x, {
fontSize: x.props.fontSize ?? d
}),
checkedIcon: /* @__PURE__ */ f.cloneElement(P, {
fontSize: P.props.fontSize ?? d
}),
disableRipple: y,
slots: C,
slotProps: {
input: U(typeof u == "function" ? u(m) : u, {
"data-indeterminate": a
})
}
}
});
return /* @__PURE__ */ r(T, {
...R,
classes: z
});
});
process.env.NODE_ENV !== "production" && (W.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: o.bool,
/**
* The icon to display when the component is checked.
* @default <CheckBoxIcon />
*/
checkedIcon: o.node,
/**
* Override or extend the styles applied to the component.
*/
classes: o.object,
/**
* @ignore
*/
className: o.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: o.oneOfType([o.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), o.string]),
/**
* The default checked state. Use when the component is not controlled.
*/
defaultChecked: o.bool,
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: o.bool,
/**
* If `true`, the ripple effect is disabled.
* @default false
*/
disableRipple: o.bool,
/**
* The icon to display when the component is unchecked.
* @default <CheckBoxOutlineBlankIcon />
*/
icon: o.node,
/**
* The id of the `input` element.
*/
id: o.string,
/**
* If `true`, the component appears indeterminate.
* This does not set the native input element to indeterminate due
* to inconsistent behavior across browsers.
* However, we set a `data-indeterminate` attribute on the `input`.
* @default false
*/
indeterminate: o.bool,
/**
* The icon to display when the component is indeterminate.
* @default <IndeterminateCheckBoxIcon />
*/
indeterminateIcon: o.node,
/**
* [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: o.object,
/**
* Callback fired when the state is changed.
*
* @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
*/
onChange: o.func,
/**
* If `true`, the `input` element is required.
* @default false
*/
required: o.bool,
/**
* The size of the component.
* `small` is equivalent to the dense checkbox styling.
* @default 'medium'
*/
size: o.oneOfType([o.oneOf(["medium", "small"]), o.string]),
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: o.shape({
input: o.oneOfType([o.func, o.object]),
root: o.oneOfType([o.func, o.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: o.shape({
input: o.elementType,
root: o.elementType
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
/**
* The value of the component. The DOM API casts this to a string.
* The browser uses "on" as the default value.
*/
value: o.any
});
export {
W as C,
b as c,
G as g
};