119 lines
3.6 KiB
JavaScript
119 lines
3.6 KiB
JavaScript
|
"use strict";
|
||
|
|
var __defProp = Object.defineProperty;
|
||
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||
|
|
var __export = (target, all) => {
|
||
|
|
for (var name in all)
|
||
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
||
|
|
};
|
||
|
|
var __copyProps = (to, from, except, desc) => {
|
||
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
||
|
|
for (let key of __getOwnPropNames(from))
|
||
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
||
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
||
|
|
}
|
||
|
|
return to;
|
||
|
|
};
|
||
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
||
|
|
|
||
|
|
// src/components/switch.ts
|
||
|
|
var switch_exports = {};
|
||
|
|
__export(switch_exports, {
|
||
|
|
switchTheme: () => switchTheme
|
||
|
|
});
|
||
|
|
module.exports = __toCommonJS(switch_exports);
|
||
|
|
var import_anatomy = require("@chakra-ui/anatomy");
|
||
|
|
var import_styled_system = require("@chakra-ui/styled-system");
|
||
|
|
var import_theme_tools = require("@chakra-ui/theme-tools");
|
||
|
|
var { defineMultiStyleConfig, definePartsStyle } = (0, import_styled_system.createMultiStyleConfigHelpers)(import_anatomy.switchAnatomy.keys);
|
||
|
|
var $width = (0, import_theme_tools.cssVar)("switch-track-width");
|
||
|
|
var $height = (0, import_theme_tools.cssVar)("switch-track-height");
|
||
|
|
var $diff = (0, import_theme_tools.cssVar)("switch-track-diff");
|
||
|
|
var diffValue = import_theme_tools.calc.subtract($width, $height);
|
||
|
|
var $translateX = (0, import_theme_tools.cssVar)("switch-thumb-x");
|
||
|
|
var $bg = (0, import_theme_tools.cssVar)("switch-bg");
|
||
|
|
var baseStyleTrack = (0, import_styled_system.defineStyle)((props) => {
|
||
|
|
const { colorScheme: c } = props;
|
||
|
|
return {
|
||
|
|
borderRadius: "full",
|
||
|
|
p: "0.5",
|
||
|
|
width: [$width.reference],
|
||
|
|
height: [$height.reference],
|
||
|
|
transitionProperty: "common",
|
||
|
|
transitionDuration: "fast",
|
||
|
|
[$bg.variable]: "colors.gray.300",
|
||
|
|
_dark: {
|
||
|
|
[$bg.variable]: "colors.whiteAlpha.400"
|
||
|
|
},
|
||
|
|
_focusVisible: {
|
||
|
|
boxShadow: "outline"
|
||
|
|
},
|
||
|
|
_disabled: {
|
||
|
|
opacity: 0.4,
|
||
|
|
cursor: "not-allowed"
|
||
|
|
},
|
||
|
|
_checked: {
|
||
|
|
[$bg.variable]: `colors.${c}.500`,
|
||
|
|
_dark: {
|
||
|
|
[$bg.variable]: `colors.${c}.200`
|
||
|
|
}
|
||
|
|
},
|
||
|
|
bg: $bg.reference
|
||
|
|
};
|
||
|
|
});
|
||
|
|
var baseStyleThumb = (0, import_styled_system.defineStyle)({
|
||
|
|
bg: "white",
|
||
|
|
transitionProperty: "transform",
|
||
|
|
transitionDuration: "normal",
|
||
|
|
borderRadius: "inherit",
|
||
|
|
width: [$height.reference],
|
||
|
|
height: [$height.reference],
|
||
|
|
_checked: {
|
||
|
|
transform: `translateX(${$translateX.reference})`
|
||
|
|
}
|
||
|
|
});
|
||
|
|
var baseStyle = definePartsStyle((props) => ({
|
||
|
|
container: {
|
||
|
|
[$diff.variable]: diffValue,
|
||
|
|
[$translateX.variable]: $diff.reference,
|
||
|
|
_rtl: {
|
||
|
|
[$translateX.variable]: (0, import_theme_tools.calc)($diff).negate().toString()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
track: baseStyleTrack(props),
|
||
|
|
thumb: baseStyleThumb
|
||
|
|
}));
|
||
|
|
var sizes = {
|
||
|
|
sm: definePartsStyle({
|
||
|
|
container: {
|
||
|
|
[$width.variable]: "1.375rem",
|
||
|
|
[$height.variable]: "sizes.3"
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
md: definePartsStyle({
|
||
|
|
container: {
|
||
|
|
[$width.variable]: "1.875rem",
|
||
|
|
[$height.variable]: "sizes.4"
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
lg: definePartsStyle({
|
||
|
|
container: {
|
||
|
|
[$width.variable]: "2.875rem",
|
||
|
|
[$height.variable]: "sizes.6"
|
||
|
|
}
|
||
|
|
})
|
||
|
|
};
|
||
|
|
var switchTheme = defineMultiStyleConfig({
|
||
|
|
baseStyle,
|
||
|
|
sizes,
|
||
|
|
defaultProps: {
|
||
|
|
size: "md",
|
||
|
|
colorScheme: "blue"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// Annotate the CommonJS export names for ESM import in node:
|
||
|
|
0 && (module.exports = {
|
||
|
|
switchTheme
|
||
|
|
});
|
||
|
|
//# sourceMappingURL=switch.js.map
|