@carbon/react
Version:
React components for the Carbon Design System
56 lines (54 loc) • 1.84 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { PrefixContext } from "../../internal/usePrefix.js";
import classNames from "classnames";
import { useContext } from "react";
import PropTypes from "prop-types";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/ToggleSmall/ToggleSmall.Skeleton.tsx
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const ToggleSmallSkeleton = ({ id, labelText, className, ...rest }) => {
const prefix = useContext(PrefixContext);
return /* @__PURE__ */ jsxs("div", {
className: classNames(`${prefix}--form-item`, className),
...rest,
children: [/* @__PURE__ */ jsx("input", {
type: "checkbox",
id,
className: `${prefix}--toggle ${prefix}--toggle--small ${prefix}--skeleton`
}), /* @__PURE__ */ jsxs("label", {
className: `${prefix}--toggle__label ${prefix}--skeleton`,
htmlFor: id,
children: [labelText && /* @__PURE__ */ jsx("span", {
className: `${prefix}--toggle__label-text`,
children: labelText
}), /* @__PURE__ */ jsx("span", {
className: `${prefix}--toggle__appearance`,
children: /* @__PURE__ */ jsx("svg", {
className: `${prefix}--toggle__check`,
width: "6px",
height: "5px",
viewBox: "0 0 6 5",
children: /* @__PURE__ */ jsx("path", { d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z" })
})
})]
})]
});
};
ToggleSmallSkeleton.propTypes = {
["aria-label"]: PropTypes.string.isRequired,
className: PropTypes.string,
id: PropTypes.string,
labelText: PropTypes.string
};
//#endregion
export { ToggleSmallSkeleton };