naive-ui 2.35.0 → 2.37.0

package/es/styles.d.ts

@@ -10,6 +10,7 @@ export { breadcrumbDark } from './breadcrumb/styles';
 export { buttonDark, buttonRtl as unstableButtonRtl } from './button/styles';
 export { notificationRtl as unstableNotificationRtl } from './notification/styles';
 export { messageRtl as unstableMessageRtl } from './message/styles';
+export { DataTableRtl as unstableDataTableRtl } from './data-table/styles';
 export { buttonGroupDark, buttonGroupRtl as unstableButtonGroupRtl } from './button-group/styles';
 export { cardDark, cardRtl as unstableCardRtl } from './card/styles';
 export { cascaderDark } from './cascader/styles';
@@ -20,7 +21,7 @@ export { collapseTransitionRtl as unstableCollapseTransitionRtl } from './collap
 export { dataTableDark } from './data-table/styles';
 export { datePickerDark } from './date-picker/styles';
 export { descriptionsDark } from './descriptions/styles';
-export { dialogDark } from './dialog/styles';
+export { dialogDark, dialogRtl as unstableDialogRtl } from './dialog/styles';
 export { dividerDark } from './divider/styles';
 export { drawerDark, drawerRtl as unstableDrawerRtl } from './drawer/styles';
 export { dropdownDark } from './dropdown/styles';
@@ -28,6 +29,7 @@ export { dynamicInputDark, dynamicInputRtl as unstableDynamicInputRtl } from './
 export { dynamicTagsDark } from './dynamic-tags/styles';
 export { elementDark } from './element/styles';
 export { emptyDark } from './empty/styles';
+export { flexDark, flexRtl as unstableFlexRtl } from './flex/styles';
 export { formDark } from './form/styles';
 export { gradientTextDark } from './gradient-text/styles';
 export { iconDark } from './icon/styles';
@@ -51,7 +53,7 @@ export { progressDark } from './progress/styles';
 export { radioDark, radioRtl as unstableRadioRtl } from './radio/styles';
 export { rateDark } from './rate/styles';
 export { resultDark } from './result/styles';
-export { selectDark } from './select/styles';
+export { selectDark, selectRtl as unstableSelectRtl } from './select/styles';
 export { sliderDark } from './slider/styles';
 export { spaceDark, spaceRtl as unstableSpaceRtl } from './space/styles';
 export { spinDark } from './spin/styles';

package/es/styles.mjs

@@ -0,0 +1,81 @@
+export { commonDark, commonLight } from "./_styles/common/index.mjs";
+export { alertDark, alertRtl as unstableAlertRtl } from "./alert/styles/index.mjs";
+export { anchorDark } from "./anchor/styles/index.mjs";
+export { autoCompleteDark } from "./auto-complete/styles/index.mjs";
+export { avatarDark } from "./avatar/styles/index.mjs";
+export { avatarGroupRtl as unstableAvatarGroupRtl } from "./avatar-group/styles/index.mjs";
+export { backTopDark } from "./back-top/styles/index.mjs";
+export { badgeDark, badgeRtl as unstableBadgeRtl } from "./badge/styles/index.mjs";
+export { breadcrumbDark } from "./breadcrumb/styles/index.mjs";
+export { buttonDark, buttonRtl as unstableButtonRtl } from "./button/styles/index.mjs";
+export { notificationRtl as unstableNotificationRtl } from "./notification/styles/index.mjs";
+export { messageRtl as unstableMessageRtl } from "./message/styles/index.mjs";
+export { DataTableRtl as unstableDataTableRtl } from "./data-table/styles/index.mjs";
+export { buttonGroupDark, buttonGroupRtl as unstableButtonGroupRtl } from "./button-group/styles/index.mjs";
+export { cardDark, cardRtl as unstableCardRtl } from "./card/styles/index.mjs";
+export { cascaderDark } from "./cascader/styles/index.mjs";
+export { checkboxDark, checkboxRtl as unstableCheckboxRtl } from "./checkbox/styles/index.mjs";
+export { codeDark } from "./code/styles/index.mjs";
+export { collapseDark, collapseRtl as unstableCollapseRtl } from "./collapse/styles/index.mjs";
+export { collapseTransitionRtl as unstableCollapseTransitionRtl } from "./collapse-transition/styles/index.mjs";
+export { dataTableDark } from "./data-table/styles/index.mjs";
+export { datePickerDark } from "./date-picker/styles/index.mjs";
+export { descriptionsDark } from "./descriptions/styles/index.mjs";
+export { dialogDark, dialogRtl as unstableDialogRtl } from "./dialog/styles/index.mjs";
+export { dividerDark } from "./divider/styles/index.mjs";
+export { drawerDark, drawerRtl as unstableDrawerRtl } from "./drawer/styles/index.mjs";
+export { dropdownDark } from "./dropdown/styles/index.mjs";
+export { dynamicInputDark, dynamicInputRtl as unstableDynamicInputRtl } from "./dynamic-input/styles/index.mjs";
+export { dynamicTagsDark } from "./dynamic-tags/styles/index.mjs";
+export { elementDark } from "./element/styles/index.mjs";
+export { emptyDark } from "./empty/styles/index.mjs";
+export { flexDark, flexRtl as unstableFlexRtl } from "./flex/styles/index.mjs";
+export { formDark } from "./form/styles/index.mjs";
+export { gradientTextDark } from "./gradient-text/styles/index.mjs";
+export { iconDark } from "./icon/styles/index.mjs";
+export { inputDark, inputRtl as unstableInputRtl } from "./input/styles/index.mjs";
+export { inputNumberDark, inputNumberRtl as unstableInputNumberRtl } from "./input-number/styles/index.mjs";
+export { layoutDark } from "./layout/styles/index.mjs";
+export { listDark, listRtl as unstableListRtl } from "./list/styles/index.mjs";
+export { loadingBarDark } from "./loading-bar/styles/index.mjs";
+export { logDark } from "./log/styles/index.mjs";
+export { mentionDark } from "./mention/styles/index.mjs";
+export { menuDark } from "./menu/styles/index.mjs";
+export { messageDark } from "./message/styles/index.mjs";
+export { modalDark } from "./modal/styles/index.mjs";
+export { notificationDark } from "./notification/styles/index.mjs";
+export { paginationDark, paginationRtl as unstablePaginationRtl } from "./pagination/styles/index.mjs";
+export { pageHeaderRtl as unstablePageHeaderRtl } from "./page-header/styles/index.mjs";
+export { popconfirmDark } from "./popconfirm/styles/index.mjs";
+export { popoverDark } from "./popover/styles/index.mjs";
+export { popselectDark } from "./popselect/styles/index.mjs";
+export { progressDark } from "./progress/styles/index.mjs";
+export { radioDark, radioRtl as unstableRadioRtl } from "./radio/styles/index.mjs";
+export { rateDark } from "./rate/styles/index.mjs";
+export { resultDark } from "./result/styles/index.mjs";
+export { selectDark, selectRtl as unstableSelectRtl } from "./select/styles/index.mjs";
+export { sliderDark } from "./slider/styles/index.mjs";
+export { spaceDark, spaceRtl as unstableSpaceRtl } from "./space/styles/index.mjs";
+export { spinDark } from "./spin/styles/index.mjs";
+export { statisticDark, statisticRtl as unstableStatisticRtl } from "./statistic/styles/index.mjs";
+export { stepsDark, stepsRtl as unstableStepsRtl } from "./steps/styles/index.mjs";
+export { switchDark } from "./switch/styles/index.mjs";
+export { tableDark, tableRtl as unstableTableRtl } from "./table/styles/index.mjs";
+export { tabsDark } from "./tabs/styles/index.mjs";
+export { tagDark, tagRtl as unstableTagRtl } from "./tag/styles/index.mjs";
+export { thingDark, thingRtl as unstableThingRtl } from "./thing/styles/index.mjs";
+export { timePickerDark } from "./time-picker/styles/index.mjs";
+export { timelineDark } from "./timeline/styles/index.mjs";
+export { tooltipDark } from "./tooltip/styles/index.mjs";
+export { transferDark } from "./transfer/styles/index.mjs";
+export { treeDark, treeRtl as unstableTreeRtl } from "./tree/styles/index.mjs";
+export { treeSelectDark } from "./tree-select/styles/index.mjs";
+export { typographyDark } from "./typography/styles/index.mjs";
+export { uploadDark } from "./upload/styles/index.mjs";
+export { watermarkDark } from "./watermark/styles/index.mjs";
+export { rowRtl as unstableRowRtl } from "./legacy-grid/styles/index.mjs";
+// danger zone, internal styles
+export { scrollbarDark } from "./_internal/scrollbar/styles/index.mjs";
+export { internalSelectMenuDark } from "./_internal/select-menu/styles/index.mjs";
+export { internalSelectionDark } from "./_internal/selection/styles/index.mjs";
+export { scrollbarRtl as unstableScrollbarRtl } from "./_internal/scrollbar/styles/index.mjs";

package/es/switch/index.mjs

@@ -0,0 +1 @@
+export { default as NSwitch, switchProps } from "./src/Switch.mjs";

package/es/switch/src/Switch.d.ts

@@ -455,8 +455,8 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     readonly value: string | number | boolean | undefined;
-    readonly round: boolean;
     readonly size: "small" | "medium" | "large";
+    readonly round: boolean;
     readonly disabled: boolean | undefined;
     readonly loading: boolean;
     readonly defaultValue: string | number | boolean;

package/es/switch/src/Switch.mjs

@@ -0,0 +1,321 @@
+import { h, ref, toRef, defineComponent, computed, watchEffect } from 'vue';
+import { depx, pxfy } from 'seemly';
+import { useMergedState } from 'vooks';
+import { useConfig, useFormItem, useTheme, useThemeClass } from "../../_mixins/index.mjs";
+import { NBaseLoading, NIconSwitchTransition } from "../../_internal/index.mjs";
+import { call, createKey, warnOnce, isSlotEmpty, resolveWrappedSlot } from "../../_utils/index.mjs";
+import { switchLight } from "../styles/index.mjs";
+import style from "./styles/index.cssr.mjs";
+export const switchProps = Object.assign(Object.assign({}, useTheme.props), {
+  size: {
+    type: String,
+    default: 'medium'
+  },
+  value: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  loading: Boolean,
+  defaultValue: {
+    type: [String, Number, Boolean],
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: undefined
+  },
+  round: {
+    type: Boolean,
+    default: true
+  },
+  'onUpdate:value': [Function, Array],
+  onUpdateValue: [Function, Array],
+  checkedValue: {
+    type: [String, Number, Boolean],
+    default: true
+  },
+  uncheckedValue: {
+    type: [String, Number, Boolean],
+    default: false
+  },
+  railStyle: Function,
+  rubberBand: {
+    type: Boolean,
+    default: true
+  },
+  /** @deprecated */
+  onChange: [Function, Array]
+});
+let supportCssMax;
+export default defineComponent({
+  name: 'Switch',
+  props: switchProps,
+  setup(props) {
+    if (process.env.NODE_ENV !== 'production') {
+      watchEffect(() => {
+        if (props.onChange) {
+          warnOnce('switch', '`on-change` is deprecated, please use `on-update:value` instead.');
+        }
+      });
+    }
+    if (supportCssMax === undefined) {
+      if (typeof CSS !== 'undefined') {
+        if (typeof CSS.supports !== 'undefined') {
+          supportCssMax = CSS.supports('width', 'max(1px)');
+        } else {
+          supportCssMax = false;
+        }
+      } else {
+        // If you are using SSR, we assume that you are targeting browsers with
+        // recent versions
+        supportCssMax = true;
+      }
+    }
+    const {
+      mergedClsPrefixRef,
+      inlineThemeDisabled
+    } = useConfig(props);
+    const themeRef = useTheme('Switch', '-switch', style, switchLight, props, mergedClsPrefixRef);
+    const formItem = useFormItem(props);
+    const {
+      mergedSizeRef,
+      mergedDisabledRef
+    } = formItem;
+    const uncontrolledValueRef = ref(props.defaultValue);
+    const controlledValueRef = toRef(props, 'value');
+    const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
+    const checkedRef = computed(() => {
+      return mergedValueRef.value === props.checkedValue;
+    });
+    const pressedRef = ref(false);
+    const focusedRef = ref(false);
+    const mergedRailStyleRef = computed(() => {
+      const {
+        railStyle
+      } = props;
+      if (!railStyle) return undefined;
+      return railStyle({
+        focused: focusedRef.value,
+        checked: checkedRef.value
+      });
+    });
+    function doUpdateValue(value) {
+      const {
+        'onUpdate:value': _onUpdateValue,
+        onChange,
+        onUpdateValue
+      } = props;
+      const {
+        nTriggerFormInput,
+        nTriggerFormChange
+      } = formItem;
+      if (_onUpdateValue) call(_onUpdateValue, value);
+      if (onUpdateValue) call(onUpdateValue, value);
+      if (onChange) call(onChange, value);
+      uncontrolledValueRef.value = value;
+      nTriggerFormInput();
+      nTriggerFormChange();
+    }
+    function doFocus() {
+      const {
+        nTriggerFormFocus
+      } = formItem;
+      nTriggerFormFocus();
+    }
+    function doBlur() {
+      const {
+        nTriggerFormBlur
+      } = formItem;
+      nTriggerFormBlur();
+    }
+    function handleClick() {
+      if (props.loading || mergedDisabledRef.value) return;
+      if (mergedValueRef.value !== props.checkedValue) {
+        doUpdateValue(props.checkedValue);
+      } else {
+        doUpdateValue(props.uncheckedValue);
+      }
+    }
+    function handleFocus() {
+      focusedRef.value = true;
+      doFocus();
+    }
+    function handleBlur() {
+      focusedRef.value = false;
+      doBlur();
+      pressedRef.value = false;
+    }
+    function handleKeyup(e) {
+      if (props.loading || mergedDisabledRef.value) return;
+      if (e.key === ' ') {
+        if (mergedValueRef.value !== props.checkedValue) {
+          doUpdateValue(props.checkedValue);
+        } else {
+          doUpdateValue(props.uncheckedValue);
+        }
+        pressedRef.value = false;
+      }
+    }
+    function handleKeydown(e) {
+      if (props.loading || mergedDisabledRef.value) return;
+      if (e.key === ' ') {
+        e.preventDefault();
+        pressedRef.value = true;
+      }
+    }
+    const cssVarsRef = computed(() => {
+      const {
+        value: size
+      } = mergedSizeRef;
+      const {
+        self: {
+          opacityDisabled,
+          railColor,
+          railColorActive,
+          buttonBoxShadow,
+          buttonColor,
+          boxShadowFocus,
+          loadingColor,
+          textColor,
+          iconColor,
+          [createKey('buttonHeight', size)]: buttonHeight,
+          [createKey('buttonWidth', size)]: buttonWidth,
+          [createKey('buttonWidthPressed', size)]: buttonWidthPressed,
+          [createKey('railHeight', size)]: railHeight,
+          [createKey('railWidth', size)]: railWidth,
+          [createKey('railBorderRadius', size)]: railBorderRadius,
+          [createKey('buttonBorderRadius', size)]: buttonBorderRadius
+        },
+        common: {
+          cubicBezierEaseInOut
+        }
+      } = themeRef.value;
+      let offset;
+      let height;
+      let width;
+      if (supportCssMax) {
+        offset = `calc((${railHeight} - ${buttonHeight}) / 2)`;
+        height = `max(${railHeight}, ${buttonHeight})`;
+        width = `max(${railWidth}, calc(${railWidth} + ${buttonHeight} - ${railHeight}))`;
+      } else {
+        offset = pxfy((depx(railHeight) - depx(buttonHeight)) / 2);
+        height = pxfy(Math.max(depx(railHeight), depx(buttonHeight)));
+        width = depx(railHeight) > depx(buttonHeight) ? railWidth : pxfy(depx(railWidth) + depx(buttonHeight) - depx(railHeight));
+      }
+      return {
+        '--n-bezier': cubicBezierEaseInOut,
+        '--n-button-border-radius': buttonBorderRadius,
+        '--n-button-box-shadow': buttonBoxShadow,
+        '--n-button-color': buttonColor,
+        '--n-button-width': buttonWidth,
+        '--n-button-width-pressed': buttonWidthPressed,
+        '--n-button-height': buttonHeight,
+        '--n-height': height,
+        '--n-offset': offset,
+        '--n-opacity-disabled': opacityDisabled,
+        '--n-rail-border-radius': railBorderRadius,
+        '--n-rail-color': railColor,
+        '--n-rail-color-active': railColorActive,
+        '--n-rail-height': railHeight,
+        '--n-rail-width': railWidth,
+        '--n-width': width,
+        '--n-box-shadow-focus': boxShadowFocus,
+        '--n-loading-color': loadingColor,
+        '--n-text-color': textColor,
+        '--n-icon-color': iconColor
+      };
+    });
+    const themeClassHandle = inlineThemeDisabled ? useThemeClass('switch', computed(() => {
+      return mergedSizeRef.value[0];
+    }), cssVarsRef, props) : undefined;
+    return {
+      handleClick,
+      handleBlur,
+      handleFocus,
+      handleKeyup,
+      handleKeydown,
+      mergedRailStyle: mergedRailStyleRef,
+      pressed: pressedRef,
+      mergedClsPrefix: mergedClsPrefixRef,
+      mergedValue: mergedValueRef,
+      checked: checkedRef,
+      mergedDisabled: mergedDisabledRef,
+      cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+      themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+      onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+    };
+  },
+  render() {
+    const {
+      mergedClsPrefix,
+      mergedDisabled,
+      checked,
+      mergedRailStyle,
+      onRender,
+      $slots
+    } = this;
+    onRender === null || onRender === void 0 ? void 0 : onRender();
+    const {
+      checked: checkedSlot,
+      unchecked: uncheckedSlot,
+      icon: iconSlot,
+      'checked-icon': checkedIconSlot,
+      'unchecked-icon': uncheckedIconSlot
+    } = $slots;
+    const hasIcon = !(isSlotEmpty(iconSlot) && isSlotEmpty(checkedIconSlot) && isSlotEmpty(uncheckedIconSlot));
+    return h("div", {
+      role: "switch",
+      "aria-checked": checked,
+      class: [`${mergedClsPrefix}-switch`, this.themeClass, hasIcon && `${mergedClsPrefix}-switch--icon`, checked && `${mergedClsPrefix}-switch--active`, mergedDisabled && `${mergedClsPrefix}-switch--disabled`, this.round && `${mergedClsPrefix}-switch--round`, this.loading && `${mergedClsPrefix}-switch--loading`, this.pressed && `${mergedClsPrefix}-switch--pressed`, this.rubberBand && `${mergedClsPrefix}-switch--rubber-band`],
+      tabindex: !this.mergedDisabled ? 0 : undefined,
+      style: this.cssVars,
+      onClick: this.handleClick,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onKeyup: this.handleKeyup,
+      onKeydown: this.handleKeydown
+    }, h("div", {
+      class: `${mergedClsPrefix}-switch__rail`,
+      "aria-hidden": "true",
+      style: mergedRailStyle
+    }, resolveWrappedSlot(checkedSlot, checkedSlotChildren => resolveWrappedSlot(uncheckedSlot, uncheckedSlotChildren => {
+      if (checkedSlotChildren || uncheckedSlotChildren) {
+        return h("div", {
+          "aria-hidden": true,
+          class: `${mergedClsPrefix}-switch__children-placeholder`
+        }, h("div", {
+          class: `${mergedClsPrefix}-switch__rail-placeholder`
+        }, h("div", {
+          class: `${mergedClsPrefix}-switch__button-placeholder`
+        }), checkedSlotChildren), h("div", {
+          class: `${mergedClsPrefix}-switch__rail-placeholder`
+        }, h("div", {
+          class: `${mergedClsPrefix}-switch__button-placeholder`
+        }), uncheckedSlotChildren));
+      }
+      return null;
+    })), h("div", {
+      class: `${mergedClsPrefix}-switch__button`
+    }, resolveWrappedSlot(iconSlot, icon => resolveWrappedSlot(checkedIconSlot, checkedIcon => resolveWrappedSlot(uncheckedIconSlot, uncheckedIcon => {
+      return h(NIconSwitchTransition, null, {
+        default: () => this.loading ? h(NBaseLoading, {
+          key: "loading",
+          clsPrefix: mergedClsPrefix,
+          strokeWidth: 20
+        }) : this.checked && (checkedIcon || icon) ? h("div", {
+          class: `${mergedClsPrefix}-switch__button-icon`,
+          key: checkedIcon ? 'checked-icon' : 'icon'
+        }, checkedIcon || icon) : !this.checked && (uncheckedIcon || icon) ? h("div", {
+          class: `${mergedClsPrefix}-switch__button-icon`,
+          key: uncheckedIcon ? 'unchecked-icon' : 'icon'
+        }, uncheckedIcon || icon) : null
+      });
+    }))), resolveWrappedSlot(checkedSlot, children => children && h("div", {
+      key: "checked",
+      class: `${mergedClsPrefix}-switch__checked`
+    }, children)), resolveWrappedSlot(uncheckedSlot, children => children && h("div", {
+      key: "unchecked",
+      class: `${mergedClsPrefix}-switch__unchecked`
+    }, children)))));
+  }
+});

package/es/switch/src/interface.mjs

@@ -0,0 +1 @@
+export {};

package/es/switch/src/styles/index.cssr.mjs

@@ -0,0 +1,127 @@
+import { iconSwitchTransition } from "../../../_styles/transitions/icon-switch.cssr.mjs";
+import { c, cB, cE, cM, cNotM } from "../../../_utils/cssr/index.mjs";
+// vars:
+// --n-bezier
+// --n-button-border-radius
+// --n-button-box-shadow
+// --n-button-color
+// --n-button-width
+// --n-button-width-pressed
+// --n-height
+// --n-offset
+// --n-rail-border-radius
+// --n-rail-color
+// --n-rail-color-active
+// --n-rail-height
+// --n-rail-width
+// --n-width
+// --n-box-shadow-focus
+// --n-loading-color
+// --n-text-color
+// --n-icon-color
+export default cB('switch', `
+ height: var(--n-height);
+ min-width: var(--n-width);
+ vertical-align: middle;
+ user-select: none;
+ -webkit-user-select: none;
+ display: inline-flex;
+ outline: none;
+ justify-content: center;
+ align-items: center;
+`, [cE('children-placeholder', `
+ height: var(--n-rail-height);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ pointer-events: none;
+ visibility: hidden;
+ `), cE('rail-placeholder', `
+ display: flex;
+ flex-wrap: none;
+ `), cE('button-placeholder', `
+ width: calc(1.75 * var(--n-rail-height));
+ height: var(--n-rail-height);
+ `), cB('base-loading', `
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ font-size: calc(var(--n-button-width) - 4px);
+ color: var(--n-loading-color);
+ transition: color .3s var(--n-bezier);
+ `, [iconSwitchTransition({
+  left: '50%',
+  top: '50%',
+  originalTransform: 'translateX(-50%) translateY(-50%)'
+})]), cE('checked, unchecked', `
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
+ box-sizing: border-box;
+ position: absolute;
+ white-space: nowrap;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ line-height: 1;
+ `), cE('checked', `
+ right: 0;
+ padding-right: calc(1.25 * var(--n-rail-height) - var(--n-offset));
+ `), cE('unchecked', `
+ left: 0;
+ justify-content: flex-end;
+ padding-left: calc(1.25 * var(--n-rail-height) - var(--n-offset));
+ `), c('&:focus', [cE('rail', `
+ box-shadow: var(--n-box-shadow-focus);
+ `)]), cM('round', [cE('rail', 'border-radius: calc(var(--n-rail-height) / 2);', [cE('button', 'border-radius: calc(var(--n-button-height) / 2);')])]), cNotM('disabled', [cNotM('icon', [cM('rubber-band', [cM('pressed', [cE('rail', [cE('button', 'max-width: var(--n-button-width-pressed);')])]), cE('rail', [c('&:active', [cE('button', 'max-width: var(--n-button-width-pressed);')])]), cM('active', [cM('pressed', [cE('rail', [cE('button', 'left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));')])]), cE('rail', [c('&:active', [cE('button', 'left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));')])])])])])]), cM('active', [cE('rail', [cE('button', 'left: calc(100% - var(--n-button-width) - var(--n-offset))')])]), cE('rail', `
+ overflow: hidden;
+ height: var(--n-rail-height);
+ min-width: var(--n-rail-width);
+ border-radius: var(--n-rail-border-radius);
+ cursor: pointer;
+ position: relative;
+ transition:
+ opacity .3s var(--n-bezier),
+ background .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
+ background-color: var(--n-rail-color);
+ `, [cE('button-icon', `
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
+ font-size: calc(var(--n-button-height) - 4px);
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ line-height: 1;
+ `, [iconSwitchTransition()]), cE('button', `
+ align-items: center; 
+ top: var(--n-offset);
+ left: var(--n-offset);
+ height: var(--n-button-height);
+ width: var(--n-button-width-pressed);
+ max-width: var(--n-button-width);
+ border-radius: var(--n-button-border-radius);
+ background-color: var(--n-button-color);
+ box-shadow: var(--n-button-box-shadow);
+ box-sizing: border-box;
+ cursor: inherit;
+ content: "";
+ position: absolute;
+ transition:
+ background-color .3s var(--n-bezier),
+ left .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ max-width .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
+ `)]), cM('active', [cE('rail', 'background-color: var(--n-rail-color-active);')]), cM('loading', [cE('rail', `
+ cursor: wait;
+ `)]), cM('disabled', [cE('rail', `
+ cursor: not-allowed;
+ opacity: .5;
+ `)])]);

package/es/switch/styles/_common.mjs

@@ -0,0 +1,17 @@
+export default {
+  buttonHeightSmall: '14px',
+  buttonHeightMedium: '18px',
+  buttonHeightLarge: '22px',
+  buttonWidthSmall: '14px',
+  buttonWidthMedium: '18px',
+  buttonWidthLarge: '22px',
+  buttonWidthPressedSmall: '20px',
+  buttonWidthPressedMedium: '24px',
+  buttonWidthPressedLarge: '28px',
+  railHeightSmall: '18px',
+  railHeightMedium: '22px',
+  railHeightLarge: '26px',
+  railWidthSmall: '32px',
+  railWidthMedium: '40px',
+  railWidthLarge: '48px'
+};

package/es/switch/styles/dark.mjs

@@ -0,0 +1,38 @@
+import { changeColor } from 'seemly';
+import commonVars from "./_common.mjs";
+import { commonDark } from "../../_styles/common/index.mjs";
+const switchDark = {
+  name: 'Switch',
+  common: commonDark,
+  self(vars) {
+    const {
+      primaryColorSuppl,
+      opacityDisabled,
+      borderRadius,
+      primaryColor,
+      textColor2,
+      baseColor
+    } = vars;
+    const railOverlayColor = 'rgba(255, 255, 255, .20)';
+    return Object.assign(Object.assign({}, commonVars), {
+      iconColor: baseColor,
+      textColor: textColor2,
+      loadingColor: primaryColorSuppl,
+      opacityDisabled,
+      railColor: railOverlayColor,
+      railColorActive: primaryColorSuppl,
+      buttonBoxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)',
+      buttonColor: '#FFF',
+      railBorderRadiusSmall: borderRadius,
+      railBorderRadiusMedium: borderRadius,
+      railBorderRadiusLarge: borderRadius,
+      buttonBorderRadiusSmall: borderRadius,
+      buttonBorderRadiusMedium: borderRadius,
+      buttonBorderRadiusLarge: borderRadius,
+      boxShadowFocus: `0 0 8px 0 ${changeColor(primaryColor, {
+        alpha: 0.3
+      })}`
+    });
+  }
+};
+export default switchDark;

package/es/switch/styles/index.mjs

@@ -0,0 +1,2 @@
+export { default as switchDark } from "./dark.mjs";
+export { default as switchLight } from "./light.mjs";

package/es/switch/styles/light.mjs

@@ -0,0 +1,37 @@
+import { changeColor } from 'seemly';
+import commonVars from "./_common.mjs";
+import { commonLight } from "../../_styles/common/index.mjs";
+const self = vars => {
+  const {
+    primaryColor,
+    opacityDisabled,
+    borderRadius,
+    textColor3
+  } = vars;
+  const railOverlayColor = 'rgba(0, 0, 0, .14)';
+  return Object.assign(Object.assign({}, commonVars), {
+    iconColor: textColor3,
+    textColor: 'white',
+    loadingColor: primaryColor,
+    opacityDisabled,
+    railColor: railOverlayColor,
+    railColorActive: primaryColor,
+    buttonBoxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)',
+    buttonColor: '#FFF',
+    railBorderRadiusSmall: borderRadius,
+    railBorderRadiusMedium: borderRadius,
+    railBorderRadiusLarge: borderRadius,
+    buttonBorderRadiusSmall: borderRadius,
+    buttonBorderRadiusMedium: borderRadius,
+    buttonBorderRadiusLarge: borderRadius,
+    boxShadowFocus: `0 0 0 2px ${changeColor(primaryColor, {
+      alpha: 0.2
+    })}`
+  });
+};
+const switchLight = {
+  name: 'Switch',
+  common: commonLight,
+  self
+};
+export default switchLight;