@uzum-tech/ui 0.1.2 → 1.0.0

package/lib/toggle-button/src/ToggleButton.d.ts

@@ -0,0 +1,551 @@
+import { PropType } from 'vue';
+import type { ExtractPublicPropTypes } from '../../_utils';
+export declare const toggleButtonProps: {
+    name: StringConstructor;
+    title: StringConstructor;
+    footer: StringConstructor;
+    description: StringConstructor;
+    type: {
+        type: PropType<"checkbox" | "radio">;
+        default: string;
+    };
+    value: {
+        type: PropType<string | number | boolean>;
+        default: string;
+    };
+    viewType: {
+        type: PropType<"default" | "primary">;
+        default: string;
+    };
+    size: PropType<"small" | "medium" | "large">;
+    checked: {
+        type: PropType<string | number | boolean | undefined>;
+        default: undefined;
+    };
+    defaultChecked: {
+        type: PropType<string | number | boolean>;
+        default: boolean;
+    };
+    disabled: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    checkedValue: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    uncheckedValue: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    'onUpdate:checked': PropType<import("../../_utils").MaybeArray<import("../../_internal").OnUpdateChecked>>;
+    onUpdateChecked: PropType<import("../../_utils").MaybeArray<import("../../_internal").OnUpdateChecked>>;
+    onChange: PropType<import("../../_utils").MaybeArray<import("../../_internal").OnUpdateChecked>>;
+    theme: PropType<import("../../_mixins").Theme<"ToggleButton", {
+        borderRadius: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        footerFontSize: string;
+        footerFontWeight: string;
+        footerLineHeight: string;
+        iconSize: string;
+        backgroundColor: string;
+        backgroundColorFocus: string;
+        backgroundColorHover: string;
+        backgroundColorChecked: string;
+        color: string;
+        colorFocus: string;
+        colorHover: string;
+        colorChecked: string;
+        backgroundColorPrimary: string;
+        backgroundColorFocusPrimary: string;
+        backgroundColorHoverPrimary: string;
+        backgroundColorCheckedPrimary: string;
+        colorPrimary: string;
+        colorFocusPrimary: string;
+        colorHoverPrimary: string;
+        colorCheckedPrimary: string;
+        backgroundColorDisabled: string;
+        backgroundColorFocusDisabled: string;
+        backgroundColorHoverDisabled: string;
+        backgroundColorCheckedDisabled: string;
+        colorDisabled: string;
+        colorFocusDisabled: string;
+        colorHoverDisabled: string;
+        colorCheckedDisabled: string;
+        padding: string;
+        titleMarginBottom: string;
+        descriptionMarginBottom: string;
+        iconMargin: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ToggleButton", {
+        borderRadius: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        footerFontSize: string;
+        footerFontWeight: string;
+        footerLineHeight: string;
+        iconSize: string;
+        backgroundColor: string;
+        backgroundColorFocus: string;
+        backgroundColorHover: string;
+        backgroundColorChecked: string;
+        color: string;
+        colorFocus: string;
+        colorHover: string;
+        colorChecked: string;
+        backgroundColorPrimary: string;
+        backgroundColorFocusPrimary: string;
+        backgroundColorHoverPrimary: string;
+        backgroundColorCheckedPrimary: string;
+        colorPrimary: string;
+        colorFocusPrimary: string;
+        colorHoverPrimary: string;
+        colorCheckedPrimary: string;
+        backgroundColorDisabled: string;
+        backgroundColorFocusDisabled: string;
+        backgroundColorHoverDisabled: string;
+        backgroundColorCheckedDisabled: string;
+        colorDisabled: string;
+        colorFocusDisabled: string;
+        colorHoverDisabled: string;
+        colorCheckedDisabled: string;
+        padding: string;
+        titleMarginBottom: string;
+        descriptionMarginBottom: string;
+        iconMargin: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ToggleButton", {
+        borderRadius: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        footerFontSize: string;
+        footerFontWeight: string;
+        footerLineHeight: string;
+        iconSize: string;
+        backgroundColor: string;
+        backgroundColorFocus: string;
+        backgroundColorHover: string;
+        backgroundColorChecked: string;
+        color: string;
+        colorFocus: string;
+        colorHover: string;
+        colorChecked: string;
+        backgroundColorPrimary: string;
+        backgroundColorFocusPrimary: string;
+        backgroundColorHoverPrimary: string;
+        backgroundColorCheckedPrimary: string;
+        colorPrimary: string;
+        colorFocusPrimary: string;
+        colorHoverPrimary: string;
+        colorCheckedPrimary: string;
+        backgroundColorDisabled: string;
+        backgroundColorFocusDisabled: string;
+        backgroundColorHoverDisabled: string;
+        backgroundColorCheckedDisabled: string;
+        colorDisabled: string;
+        colorFocusDisabled: string;
+        colorHoverDisabled: string;
+        colorCheckedDisabled: string;
+        padding: string;
+        titleMarginBottom: string;
+        descriptionMarginBottom: string;
+        iconMargin: string;
+    }, any>>>;
+};
+export type ToggleButtonProps = ExtractPublicPropTypes<typeof toggleButtonProps>;
+declare const _default: import("vue").DefineComponent<{
+    name: StringConstructor;
+    title: StringConstructor;
+    footer: StringConstructor;
+    description: StringConstructor;
+    type: {
+        type: PropType<"checkbox" | "radio">;
+        default: string;
+    };
+    value: {
+        type: PropType<string | number | boolean>;
+        default: string;
+    };
+    viewType: {
+        type: PropType<"default" | "primary">;
+        default: string;
+    };
+    size: PropType<"small" | "medium" | "large">;
+    checked: {
+        type: PropType<string | number | boolean | undefined>;
+        default: undefined;
+    };
+    defaultChecked: {
+        type: PropType<string | number | boolean>;
+        default: boolean;
+    };
+    disabled: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    checkedValue: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    uncheckedValue: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    'onUpdate:checked': PropType<import("../../_utils").MaybeArray<import("../../_internal").OnUpdateChecked>>;
+    onUpdateChecked: PropType<import("../../_utils").MaybeArray<import("../../_internal").OnUpdateChecked>>;
+    onChange: PropType<import("../../_utils").MaybeArray<import("../../_internal").OnUpdateChecked>>;
+    theme: PropType<import("../../_mixins").Theme<"ToggleButton", {
+        borderRadius: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        footerFontSize: string;
+        footerFontWeight: string;
+        footerLineHeight: string;
+        iconSize: string;
+        backgroundColor: string;
+        backgroundColorFocus: string;
+        backgroundColorHover: string;
+        backgroundColorChecked: string;
+        color: string;
+        colorFocus: string;
+        colorHover: string;
+        colorChecked: string;
+        backgroundColorPrimary: string;
+        backgroundColorFocusPrimary: string;
+        backgroundColorHoverPrimary: string;
+        backgroundColorCheckedPrimary: string;
+        colorPrimary: string;
+        colorFocusPrimary: string;
+        colorHoverPrimary: string;
+        colorCheckedPrimary: string;
+        backgroundColorDisabled: string;
+        backgroundColorFocusDisabled: string;
+        backgroundColorHoverDisabled: string;
+        backgroundColorCheckedDisabled: string;
+        colorDisabled: string;
+        colorFocusDisabled: string;
+        colorHoverDisabled: string;
+        colorCheckedDisabled: string;
+        padding: string;
+        titleMarginBottom: string;
+        descriptionMarginBottom: string;
+        iconMargin: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ToggleButton", {
+        borderRadius: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        footerFontSize: string;
+        footerFontWeight: string;
+        footerLineHeight: string;
+        iconSize: string;
+        backgroundColor: string;
+        backgroundColorFocus: string;
+        backgroundColorHover: string;
+        backgroundColorChecked: string;
+        color: string;
+        colorFocus: string;
+        colorHover: string;
+        colorChecked: string;
+        backgroundColorPrimary: string;
+        backgroundColorFocusPrimary: string;
+        backgroundColorHoverPrimary: string;
+        backgroundColorCheckedPrimary: string;
+        colorPrimary: string;
+        colorFocusPrimary: string;
+        colorHoverPrimary: string;
+        colorCheckedPrimary: string;
+        backgroundColorDisabled: string;
+        backgroundColorFocusDisabled: string;
+        backgroundColorHoverDisabled: string;
+        backgroundColorCheckedDisabled: string;
+        colorDisabled: string;
+        colorFocusDisabled: string;
+        colorHoverDisabled: string;
+        colorCheckedDisabled: string;
+        padding: string;
+        titleMarginBottom: string;
+        descriptionMarginBottom: string;
+        iconMargin: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ToggleButton", {
+        borderRadius: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        footerFontSize: string;
+        footerFontWeight: string;
+        footerLineHeight: string;
+        iconSize: string;
+        backgroundColor: string;
+        backgroundColorFocus: string;
+        backgroundColorHover: string;
+        backgroundColorChecked: string;
+        color: string;
+        colorFocus: string;
+        colorHover: string;
+        colorChecked: string;
+        backgroundColorPrimary: string;
+        backgroundColorFocusPrimary: string;
+        backgroundColorHoverPrimary: string;
+        backgroundColorCheckedPrimary: string;
+        colorPrimary: string;
+        colorFocusPrimary: string;
+        colorHoverPrimary: string;
+        colorCheckedPrimary: string;
+        backgroundColorDisabled: string;
+        backgroundColorFocusDisabled: string;
+        backgroundColorHoverDisabled: string;
+        backgroundColorCheckedDisabled: string;
+        colorDisabled: string;
+        colorFocusDisabled: string;
+        colorHoverDisabled: string;
+        colorCheckedDisabled: string;
+        padding: string;
+        titleMarginBottom: string;
+        descriptionMarginBottom: string;
+        iconMargin: string;
+    }, any>>>;
+}, {
+    radioName: import("vue").Ref<string | undefined>;
+    radioHandleFocus: () => void;
+    radioHandleBlur: () => void;
+    radioHandleChange: import("../../_internal/radio").OnChangeImpl;
+} & {
+    checkboxHandleFocus: () => void;
+    checkboxHandleBlur: () => void;
+    checkboxHandleKeyUp: (e: KeyboardEvent) => void;
+    checkboxHandleKeyDown: (e: KeyboardEvent) => void;
+    checkboxHandleClick: (e: MouseEvent) => void;
+} & {
+    cssVars: import("vue").ComputedRef<{
+        '--u-bezier': string;
+        '--u-padding': string;
+        '--u-border-radius': string;
+        '--u-background-color': string;
+        '--u-background-color-focus': string;
+        '--u-background-color-hover': string;
+        '--u-background-color-checked': string;
+        '--u-color': string;
+        '--u-color-focus': string;
+        '--u-color-hover': string;
+        '--u-color-checked': string;
+        '--u-title-font-size': string;
+        '--u-title-font-weight': string;
+        '--u-title-line-height': string;
+        '--u-title-margin-bottom': string;
+        '--u-description-font-size': string;
+        '--u-description-font-weight': string;
+        '--u-description-line-height': string;
+        '--u-description-margin-bottom': string;
+        '--u-footer-font-size': string;
+        '--u-footer-font-weight': string;
+        '--u-footer-line-height': string;
+        '--u-icon-size': string;
+        '--u-icon-margin': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
+    mergedChecked: import("vue").ComputedRef<boolean>;
+    mergedDisabled: import("vue").ComputedRef<boolean>;
+    mergedClsPrefix: import("vue").Ref<string>;
+    isCheckbox: import("vue").ComputedRef<boolean | import("../../_internal/checkbox/src/use-checkbox").CheckboxGroupInjection>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    name: StringConstructor;
+    title: StringConstructor;
+    footer: StringConstructor;
+    description: StringConstructor;
+    type: {
+        type: PropType<"checkbox" | "radio">;
+        default: string;
+    };
+    value: {
+        type: PropType<string | number | boolean>;
+        default: string;
+    };
+    viewType: {
+        type: PropType<"default" | "primary">;
+        default: string;
+    };
+    size: PropType<"small" | "medium" | "large">;
+    checked: {
+        type: PropType<string | number | boolean | undefined>;
+        default: undefined;
+    };
+    defaultChecked: {
+        type: PropType<string | number | boolean>;
+        default: boolean;
+    };
+    disabled: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    checkedValue: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    uncheckedValue: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    'onUpdate:checked': PropType<import("../../_utils").MaybeArray<import("../../_internal").OnUpdateChecked>>;
+    onUpdateChecked: PropType<import("../../_utils").MaybeArray<import("../../_internal").OnUpdateChecked>>;
+    onChange: PropType<import("../../_utils").MaybeArray<import("../../_internal").OnUpdateChecked>>;
+    theme: PropType<import("../../_mixins").Theme<"ToggleButton", {
+        borderRadius: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        footerFontSize: string;
+        footerFontWeight: string;
+        footerLineHeight: string;
+        iconSize: string;
+        backgroundColor: string;
+        backgroundColorFocus: string;
+        backgroundColorHover: string;
+        backgroundColorChecked: string;
+        color: string;
+        colorFocus: string;
+        colorHover: string;
+        colorChecked: string;
+        backgroundColorPrimary: string;
+        backgroundColorFocusPrimary: string;
+        backgroundColorHoverPrimary: string;
+        backgroundColorCheckedPrimary: string;
+        colorPrimary: string;
+        colorFocusPrimary: string;
+        colorHoverPrimary: string;
+        colorCheckedPrimary: string;
+        backgroundColorDisabled: string;
+        backgroundColorFocusDisabled: string;
+        backgroundColorHoverDisabled: string;
+        backgroundColorCheckedDisabled: string;
+        colorDisabled: string;
+        colorFocusDisabled: string;
+        colorHoverDisabled: string;
+        colorCheckedDisabled: string;
+        padding: string;
+        titleMarginBottom: string;
+        descriptionMarginBottom: string;
+        iconMargin: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ToggleButton", {
+        borderRadius: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        footerFontSize: string;
+        footerFontWeight: string;
+        footerLineHeight: string;
+        iconSize: string;
+        backgroundColor: string;
+        backgroundColorFocus: string;
+        backgroundColorHover: string;
+        backgroundColorChecked: string;
+        color: string;
+        colorFocus: string;
+        colorHover: string;
+        colorChecked: string;
+        backgroundColorPrimary: string;
+        backgroundColorFocusPrimary: string;
+        backgroundColorHoverPrimary: string;
+        backgroundColorCheckedPrimary: string;
+        colorPrimary: string;
+        colorFocusPrimary: string;
+        colorHoverPrimary: string;
+        colorCheckedPrimary: string;
+        backgroundColorDisabled: string;
+        backgroundColorFocusDisabled: string;
+        backgroundColorHoverDisabled: string;
+        backgroundColorCheckedDisabled: string;
+        colorDisabled: string;
+        colorFocusDisabled: string;
+        colorHoverDisabled: string;
+        colorCheckedDisabled: string;
+        padding: string;
+        titleMarginBottom: string;
+        descriptionMarginBottom: string;
+        iconMargin: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ToggleButton", {
+        borderRadius: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        footerFontSize: string;
+        footerFontWeight: string;
+        footerLineHeight: string;
+        iconSize: string;
+        backgroundColor: string;
+        backgroundColorFocus: string;
+        backgroundColorHover: string;
+        backgroundColorChecked: string;
+        color: string;
+        colorFocus: string;
+        colorHover: string;
+        colorChecked: string;
+        backgroundColorPrimary: string;
+        backgroundColorFocusPrimary: string;
+        backgroundColorHoverPrimary: string;
+        backgroundColorCheckedPrimary: string;
+        colorPrimary: string;
+        colorFocusPrimary: string;
+        colorHoverPrimary: string;
+        colorCheckedPrimary: string;
+        backgroundColorDisabled: string;
+        backgroundColorFocusDisabled: string;
+        backgroundColorHoverDisabled: string;
+        backgroundColorCheckedDisabled: string;
+        colorDisabled: string;
+        colorFocusDisabled: string;
+        colorHoverDisabled: string;
+        colorCheckedDisabled: string;
+        padding: string;
+        titleMarginBottom: string;
+        descriptionMarginBottom: string;
+        iconMargin: string;
+    }, any>>>;
+}>>, {
+    type: "checkbox" | "radio";
+    value: string | number | boolean;
+    disabled: boolean | undefined;
+    checked: string | number | boolean | undefined;
+    defaultChecked: string | number | boolean;
+    checkedValue: string | number | boolean;
+    uncheckedValue: string | number | boolean;
+    viewType: "default" | "primary";
+}, {}>;
+export default _default;

package/lib/toggle-button/src/ToggleButton.js

@@ -0,0 +1,134 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggleButtonProps = void 0;
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const styles_1 = require("../styles");
+const toggle_button_cssr_1 = __importDefault(require("./styles/toggle-button.cssr"));
+const _internal_1 = require("../../_internal");
+const Checkmark_1 = __importDefault(require("../../_internal/icons/Checkmark"));
+exports.toggleButtonProps = Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), _internal_1.checkboxBaseProps), { name: String, title: String, footer: String, description: String, type: {
+        type: String,
+        default: 'radio'
+    }, value: {
+        type: [String, Number, Boolean],
+        default: 'on'
+    }, viewType: {
+        type: String,
+        default: 'default'
+    } });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'ToggleButton',
+    props: exports.toggleButtonProps,
+    setup(props) {
+        const radio = (0, _internal_1.useRadio)(props);
+        const checkbox = (0, _internal_1.useCheckbox)(props);
+        const { inlineThemeDisabled, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('ToggleButton', '-toggle-button', toggle_button_cssr_1.default, styles_1.toggleButtonLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const viewType = props.disabled
+                ? 'disabled'
+                : props.viewType;
+            const { common: { cubicBezierEaseInOut }, self: { padding, borderRadius, titleFontSize, titleFontWeight, titleLineHeight, titleMarginBottom, descriptionFontSize, descriptionFontWeight, descriptionLineHeight, descriptionMarginBottom, footerFontSize, footerFontWeight, footerLineHeight, iconSize, iconMargin, [(0, _utils_1.createKey)('backgroundColor', viewType)]: backgroundColor, [(0, _utils_1.createKey)('backgroundColorFocus', viewType)]: backgroundColorFocus, [(0, _utils_1.createKey)('backgroundColorHover', viewType)]: backgroundColorHover, [(0, _utils_1.createKey)('backgroundColorChecked', viewType)]: backgroundColorChecked, [(0, _utils_1.createKey)('color', viewType)]: color, [(0, _utils_1.createKey)('colorFocus', viewType)]: colorFocus, [(0, _utils_1.createKey)('colorHover', viewType)]: colorHover, [(0, _utils_1.createKey)('colorChecked', viewType)]: colorChecked } } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-padding': padding,
+                '--u-border-radius': borderRadius,
+                '--u-background-color': backgroundColor,
+                '--u-background-color-focus': backgroundColorFocus,
+                '--u-background-color-hover': backgroundColorHover,
+                '--u-background-color-checked': backgroundColorChecked,
+                '--u-color': color,
+                '--u-color-focus': colorFocus,
+                '--u-color-hover': colorHover,
+                '--u-color-checked': colorChecked,
+                '--u-title-font-size': titleFontSize,
+                '--u-title-font-weight': titleFontWeight,
+                '--u-title-line-height': titleLineHeight,
+                '--u-title-margin-bottom': titleMarginBottom,
+                '--u-description-font-size': descriptionFontSize,
+                '--u-description-font-weight': descriptionFontWeight,
+                '--u-description-line-height': descriptionLineHeight,
+                '--u-description-margin-bottom': descriptionMarginBottom,
+                '--u-footer-font-size': footerFontSize,
+                '--u-footer-font-weight': footerFontWeight,
+                '--u-footer-line-height': footerLineHeight,
+                '--u-icon-size': iconSize,
+                '--u-icon-margin': iconMargin
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('toggle-button', undefined, cssVarsRef, props)
+            : undefined;
+        const UCheckboxGroup = (0, vue_1.inject)(_internal_1.checkboxGroupInjectionKey, null);
+        const isCheckbox = (0, vue_1.computed)(() => {
+            return UCheckboxGroup || props.type === 'checkbox' || false;
+        });
+        const mergedChecked = (0, vue_1.computed)(() => {
+            return isCheckbox.value
+                ? checkbox.renderedChecked.value
+                : radio.renderSafeChecked.value;
+        });
+        const mergedDisabled = (0, vue_1.computed)(() => {
+            return isCheckbox.value
+                ? checkbox.mergedDisabled.value
+                : radio.mergedDisabled.value;
+        });
+        const radioProperties = {
+            radioName: radio.mergedName,
+            radioHandleFocus: radio.handleRadioInputFocus,
+            radioHandleBlur: radio.handleRadioInputBlur,
+            radioHandleChange: radio.handleRadioInputChange
+        };
+        const checkboxProperties = {
+            checkboxHandleFocus: checkbox.focus,
+            checkboxHandleBlur: checkbox.blur,
+            checkboxHandleKeyUp: checkbox.handleKeyUp,
+            checkboxHandleKeyDown: checkbox.handleKeyDown,
+            checkboxHandleClick: checkbox.handleClick
+        };
+        return Object.assign(radioProperties, checkboxProperties, {
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
+            mergedChecked,
+            mergedDisabled,
+            mergedClsPrefix: radio.mergedClsPrefix,
+            isCheckbox
+        });
+    },
+    render() {
+        var _a, _b, _c;
+        const { $slots, mergedClsPrefix, onRender, description, title, footer, mergedChecked, isCheckbox, mergedDisabled } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        const iconNode = ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-toggle-button__icon` }, (0, _utils_1.resolveSlot)($slots.icon, () => [
+            (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(Checkmark_1.default, null) })
+        ])));
+        const titleNode = (title || $slots.header) && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-toggle-button__title` }, ((_a = $slots.header) === null || _a === void 0 ? void 0 : _a.call($slots)) || title));
+        const contentNode = (description || $slots.default) && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-toggle-button__description` }, ((_b = $slots.default) === null || _b === void 0 ? void 0 : _b.call($slots)) || description));
+        const footerNode = (footer || $slots.footer) && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-toggle-button__footer` }, ((_c = $slots.footer) === null || _c === void 0 ? void 0 : _c.call($slots)) || footer));
+        const Component = isCheckbox ? 'div' : 'label';
+        return ((0, vue_1.h)(Component, Object.assign({ class: [
+                `${mergedClsPrefix}-toggle-button`,
+                this.themeClass,
+                mergedChecked && `${mergedClsPrefix}-toggle-button--checked`,
+                mergedDisabled && `${mergedClsPrefix}-toggle-button--disabled`
+            ], style: this.cssVars }, (isCheckbox && {
+            onClick: this.checkboxHandleClick,
+            tabindex: this.mergedDisabled ? -1 : 0,
+            onKeyup: this.checkboxHandleKeyUp,
+            onKeydown: this.checkboxHandleKeyDown,
+            onFocus: this.checkboxHandleFocus,
+            onBlur: this.checkboxHandleBlur
+        })),
+            !isCheckbox && ((0, vue_1.h)("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input ${mergedClsPrefix}-toggle-button__input`, value: this.value, name: this.radioName, checked: mergedChecked, disabled: mergedDisabled, onChange: this.radioHandleChange, onFocus: this.radioHandleFocus, onBlur: this.radioHandleBlur })),
+            iconNode,
+            titleNode,
+            contentNode,
+            footerNode));
+    }
+});

package/lib/toggle-button/src/styles/toggle-button.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;