@nextui-org/react 1.0.1-alpha.7 → 1.0.2-alpha.2

package/cjs/spacer/spacer.styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledSpacer = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+const StyledSpacer = (0, _stitches.styled)('span', {
+  size: '1px',
+  variants: {
+    inline: {
+      true: {
+        display: 'inline-block'
+      },
+      false: {
+        display: 'block'
+      }
+    }
+  },
+  defaultVariants: {
+    inline: false
+  }
+});
+exports.StyledSpacer = StyledSpacer;

package/cjs/switch/index.d.ts

@@ -0,0 +1,5 @@
+import Switch from './switch';
+export type { SwitchProps } from './switch';
+export { StyledSwitchContainer, StyledSwitchInput, StyledSwitchCircle, StyledSwitch } from './switch.styles';
+export type { SwitchVariantsProps, SwitchContainerVariantsProps } from './switch.styles';
+export default Switch;

package/cjs/switch/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledSwitchInput = exports.StyledSwitchContainer = exports.StyledSwitchCircle = exports.StyledSwitch = void 0;
+
+var _switch = _interopRequireDefault(require("./switch"));
+
+var _switch2 = require("./switch.styles");
+
+exports.StyledSwitchContainer = _switch2.StyledSwitchContainer;
+exports.StyledSwitchInput = _switch2.StyledSwitchInput;
+exports.StyledSwitchCircle = _switch2.StyledSwitchCircle;
+exports.StyledSwitch = _switch2.StyledSwitch;
+var _default = _switch.default;
+exports.default = _default;

package/cjs/switch/switch.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { CSS } from '../theme/stitches.config';
+import { SwitchContainerVariantsProps } from './switch.styles';
+interface SwitchEventTarget {
+    checked: boolean;
+}
+export interface SwitchEvent {
+    target: SwitchEventTarget;
+    stopPropagation: () => void;
+    preventDefault: () => void;
+    nativeEvent: React.ChangeEvent;
+}
+interface Props {
+    checked?: boolean;
+    squared?: boolean;
+    bordered?: boolean;
+    animated?: boolean;
+    shadow?: boolean;
+    icon?: React.ReactNode;
+    iconOn?: React.ReactNode;
+    iconOff?: React.ReactNode;
+    initialChecked?: boolean;
+    preventDefault?: boolean;
+    disabled?: boolean;
+    onChange?: (ev: SwitchEvent) => void;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare const defaultProps: {
+    disabled: boolean;
+    bordered: boolean;
+    shadow: boolean;
+    squared: boolean;
+    animated: boolean;
+    preventDefault: boolean;
+    initialChecked: boolean;
+};
+declare type NativeAttrs = Omit<React.LabelHTMLAttributes<unknown>, keyof Props>;
+export declare type SwitchProps = Props & typeof defaultProps & NativeAttrs & SwitchContainerVariantsProps & {
+    css?: CSS;
+};
+declare const _default: React.ComponentType<Partial<{
+    disabled: boolean;
+    bordered: boolean;
+    shadow: boolean;
+    squared: boolean;
+    animated: boolean;
+    preventDefault: boolean;
+    initialChecked: boolean;
+}> & Omit<Props & {
+    disabled: boolean;
+    bordered: boolean;
+    shadow: boolean;
+    squared: boolean;
+    animated: boolean;
+    preventDefault: boolean;
+    initialChecked: boolean;
+} & NativeAttrs & import("@stitches/react/types/styled-component").TransformProps<{
+    color?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    borderWeight?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined;
+    disabled?: boolean | "true" | undefined;
+    animated?: boolean | "false" | undefined;
+}, {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xsMax: string;
+    smMax: string;
+    mdMax: string;
+    lgMax: string;
+    xlMax: string;
+    motion: string;
+    safari: string;
+    hover: string;
+    dark: string;
+    light: string;
+}> & {
+    css?: CSS | undefined;
+}, "squared" | "preventDefault" | "bordered" | "animated" | "disabled" | "shadow" | "initialChecked">>;
+export default _default;

package/cjs/switch/switch.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _useWarning = _interopRequireDefault(require("../use-warning"));
+
+var _useKeyboard = _interopRequireWildcard(require("../use-keyboard"));
+
+var _switch = require("./switch.styles");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _assertion = require("../utils/assertion");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  disabled: false,
+  bordered: false,
+  shadow: false,
+  squared: false,
+  animated: true,
+  preventDefault: true,
+  initialChecked: false
+};
+const preClass = 'nextui-switch';
+
+const Switch = ({
+  initialChecked,
+  checked,
+  disabled,
+  onChange,
+  squared,
+  bordered,
+  shadow,
+  icon,
+  iconOn,
+  iconOff,
+  animated,
+  preventDefault,
+  ...props
+}) => {
+  const [selfChecked, setSelfChecked] = (0, _react.useState)(initialChecked);
+
+  if (icon && _assertion.__DEV__ && (iconOn || iconOff)) {
+    (0, _useWarning.default)('Remove props "icon" if iconOn or iconOff exists.', 'Switch');
+  }
+
+  const changeHandle = (0, _react.useCallback)(ev => {
+    if (disabled) return;
+    const selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: ev.stopPropagation,
+      preventDefault: ev.preventDefault,
+      nativeEvent: ev
+    };
+    setSelfChecked(!selfChecked);
+    onChange && onChange(selfEvent);
+  }, [disabled, selfChecked, onChange]);
+  const {
+    bindings
+  } = (0, _useKeyboard.default)(event => {
+    changeHandle(event);
+  }, [_useKeyboard.KeyCode.Enter, _useKeyboard.KeyCode.Space], {
+    disableGlobalEvent: true,
+    preventDefault
+  });
+  const circleIcon = (0, _react.useMemo)(() => {
+    const hasIcon = icon || iconOn || iconOff;
+    const hasIconOn = Boolean(iconOn);
+    const hasIconOff = Boolean(iconOff);
+    if (!hasIcon) return null;
+    if (hasIconOn && selfChecked) return iconOn;
+    if (hasIconOff && !selfChecked) return iconOff;
+    return hasIcon;
+  }, [selfChecked, icon, iconOn, iconOff]);
+  (0, _react.useEffect)(() => {
+    if (checked === undefined) return;
+    setSelfChecked(checked);
+  }, [checked]);
+  const getState = (0, _react.useMemo)(() => {
+    return selfChecked ? 'checked' : 'unchecked';
+  }, [selfChecked]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_switch.StyledSwitchContainer, {
+    "data-state": getState,
+    disabled: disabled,
+    animated: animated,
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_switch.StyledSwitchInput, {
+      tabIndex: -1,
+      type: "checkbox",
+      className: (0, _clsx.default)(`${preClass}-input`),
+      "data-state": getState,
+      disabled: disabled,
+      checked: selfChecked,
+      onChange: changeHandle
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_switch.StyledSwitch, {
+      role: "switch",
+      tabIndex: disabled ? -1 : 0,
+      checked: selfChecked,
+      "aria-checked": selfChecked,
+      "aria-disabled": disabled,
+      animated: animated,
+      disabled: disabled,
+      squared: squared,
+      bordered: bordered,
+      shadow: shadow,
+      "data-state": getState,
+      className: (0, _clsx.default)(preClass, `${preClass}--${getState}`, {
+        [`${preClass}-checked`]: selfChecked,
+        [`${preClass}-disabled`]: disabled
+      }),
+      ...bindings,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_switch.StyledSwitchCircle, {
+        className: `${preClass}-circle`,
+        children: circleIcon
+      })
+    })]
+  });
+};
+
+Switch.toString = () => '.nextui-switch';
+
+const MemoSwitch = /*#__PURE__*/_react.default.memo(Switch);
+
+var _default = (0, _withDefaults.default)(MemoSwitch, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;