@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
47 lines (43 loc) • 1.72 kB
JavaScript
"use client";
import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { switchStyle } from "./switch.style.js";
import { useSwitch } from "./use-switch.js";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/switch/switch.tsx
const { PropsContext: SwitchPropsContext, usePropsContext: useSwitchPropsContext, withContext, withProvider } = createSlotComponent("switch", switchStyle);
/**
* `Switch` is a component used to toggle between on and off states.
*
* @see https://yamada-ui.com/docs/components/switch
*/
const Switch = withProvider(({ children, icon, inputProps, labelProps,...props }) => {
const { checked, getInputProps, getLabelProps, getRootProps, getThumbProps, getTrackProps } = useSwitch(props);
return /* @__PURE__ */ jsxs(styled.label, {
...getRootProps(),
children: [
/* @__PURE__ */ jsx(styled.input, {
"data-peer": true,
...getInputProps(inputProps)
}),
/* @__PURE__ */ jsx(SwitchTrack, {
...getTrackProps(),
children: /* @__PURE__ */ jsx(SwitchThumb, {
...getThumbProps(),
children: icon && (0, utils_exports.isObject)(icon) && "on" in icon ? checked ? icon.on : icon.off : icon
})
}),
children ? /* @__PURE__ */ jsx(SwitchLabel, {
...getLabelProps(labelProps),
children
}) : null
]
});
}, "root")();
const SwitchThumb = withContext("div", "thumb")();
const SwitchTrack = withContext("div", "track")();
const SwitchLabel = withContext("span", "label")();
//#endregion
export { Switch, SwitchPropsContext, useSwitchPropsContext };
//# sourceMappingURL=switch.js.map