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

package/cjs/checkbox/checkbox.styles.js

@@ -0,0 +1,563 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledIconCheckSecondLine = exports.StyledIconCheckFirstLine = exports.StyledIconCheck = exports.StyledCheckboxText = exports.StyledCheckboxMask = exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckboxGroup = exports.StyledCheckboxContainer = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+const StyledCheckboxLabel = (0, _stitches.styled)('label', {
+  d: 'inline-flex',
+  jc: 'flex-start',
+  ai: 'center',
+  position: 'relative',
+  w: 'auto',
+  cursor: 'pointer',
+  transition: '$default',
+  zIndex: '$1',
+  opacity: 1,
+  '@motion': {
+    transition: 'none'
+  },
+  variants: {
+    size: {
+      xs: {
+        $$checkboxSize: '$space$7'
+      },
+      sm: {
+        $$checkboxSize: '$space$8'
+      },
+      md: {
+        $$checkboxSize: '$space$9'
+      },
+      lg: {
+        $$checkboxSize: '$space$10'
+      },
+      xl: {
+        $$checkboxSize: '$space$11'
+      }
+    },
+    disabled: {
+      true: {
+        opacity: 0.75,
+        cursor: 'not-allowed'
+      }
+    },
+    animated: {
+      false: {
+        transition: 'none'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+});
+exports.StyledCheckboxLabel = StyledCheckboxLabel;
+const StyledCheckboxContainer = (0, _stitches.styled)('div', {
+  br: '$squared',
+  position: 'relative',
+  sizeMin: '$$checkboxSize',
+  opacity: 1,
+  transition: '$default',
+  zIndex: '$1',
+  '@motion': {
+    transition: 'none'
+  },
+  variants: {
+    color: {
+      default: {
+        $$checkboxColor: '$colors$primary',
+        $$checkboxColorHover: '$colors$primaryDark'
+      },
+      primary: {
+        $$checkboxColor: '$colors$primary',
+        $$checkboxColorHover: '$colors$primaryDark'
+      },
+      secondary: {
+        $$checkboxColor: '$colors$secondary',
+        $$checkboxColorHover: '$colors$secondaryDark'
+      },
+      success: {
+        $$checkboxColor: '$colors$success',
+        $$checkboxColorHover: '$colors$successDark'
+      },
+      warning: {
+        $$checkboxColor: '$colors$warning',
+        $$checkboxColorHover: '$colors$warningDark'
+      },
+      error: {
+        $$checkboxColor: '$colors$error',
+        $$checkboxColorHover: '$colors$errorDark'
+      },
+      gradient: {
+        $$checkboxColor: '$colors$gradient',
+        $$checkboxColorHover: '$colors$gradient'
+      }
+    },
+    rounded: {
+      true: {
+        br: '$pill'
+      }
+    },
+    disabled: {
+      true: {
+        opacity: 0.4,
+        cursor: 'not-allowed'
+      }
+    },
+    animated: {
+      false: {
+        transition: 'none'
+      }
+    }
+  },
+  defaultVariants: {
+    color: 'default'
+  }
+}, _stitches.sharedFocus);
+exports.StyledCheckboxContainer = StyledCheckboxContainer;
+const StyledIconCheckFirstLine = (0, _stitches.styled)('div', {
+  content: '',
+  background: 'transparent',
+  position: 'absolute',
+  width: '8px',
+  height: '1px',
+  transition: '$default',
+  br: '5px',
+  zIndex: '$1',
+  bottom: '0px',
+  '&:after': {
+    content: '',
+    position: 'absolute',
+    left: '0px',
+    width: '0%',
+    height: '2px',
+    background: '$white',
+    transition: '$default',
+    br: '5px 0px 0px 5px'
+  },
+  '@motion': {
+    transition: 'none',
+    '&:after': {
+      transition: 'none'
+    }
+  },
+  variants: {
+    indeterminate: {
+      true: {
+        display: 'none'
+      }
+    },
+    checked: {
+      true: {
+        '&:after': {
+          width: '100%',
+          transition: 'all 0.25s ease 0.1s'
+        }
+      }
+    },
+    animated: {
+      false: {
+        transition: 'none',
+        '&:after': {
+          transition: 'none'
+        }
+      }
+    }
+  }
+});
+exports.StyledIconCheckFirstLine = StyledIconCheckFirstLine;
+const StyledIconCheckSecondLine = (0, _stitches.styled)('div', {
+  content: '',
+  position: 'absolute',
+  h: '13px',
+  br: '5px',
+  bottom: '0',
+  right: '0',
+  zIndex: '$1',
+  background: 'transparent',
+  transition: '$default',
+  width: '2px',
+  '@motion': {
+    transition: 'none',
+    '&:after': {
+      transition: 'none'
+    }
+  },
+  '&:after': {
+    content: '',
+    position: 'absolute',
+    width: '2px',
+    height: '0%',
+    background: '$white',
+    transition: '$default',
+    left: '0px',
+    bottom: '0px',
+    br: '5px 5px 0px 0px'
+  },
+  variants: {
+    indeterminate: {
+      true: {
+        display: 'none'
+      }
+    },
+    checked: {
+      true: {
+        '&:after': {
+          height: '100%',
+          transition: 'all 0.2s ease 0.3s'
+        }
+      }
+    },
+    animated: {
+      false: {
+        transition: 'none',
+        '&:after': {
+          transition: 'none'
+        }
+      }
+    }
+  }
+});
+exports.StyledIconCheckSecondLine = StyledIconCheckSecondLine;
+const StyledIconCheck = (0, _stitches.styled)('i', {
+  size: '$$checkboxSize',
+  dflex: 'center',
+  br: 'inherit',
+  opacity: 0,
+  zIndex: '$2',
+  transition: '$default',
+  '&:after': {
+    content: '',
+    opacity: 0,
+    position: 'relative',
+    width: '10px',
+    height: '2px',
+    br: '1px',
+    background: '$white',
+    display: 'block'
+  },
+  '@motion': {
+    transition: 'none',
+    '&:after': {
+      transition: 'none'
+    }
+  },
+  variants: {
+    indeterminate: {
+      true: {
+        transform: 'rotate(0deg)',
+        width: 'auto',
+        height: 'auto',
+        margin: '0px',
+        '&:after': {
+          opacity: 1
+        }
+      },
+      false: {
+        width: '8px',
+        height: '14px',
+        display: 'block',
+        position: 'relative',
+        marginTop: '-4px'
+      }
+    },
+    size: {
+      xs: {
+        marginTop: '-2px',
+        transform: 'rotate(45deg) scale(0.5)'
+      },
+      sm: {
+        marginTop: '-2px',
+        transform: 'rotate(45deg) scale(0.5)'
+      },
+      md: {
+        transform: 'rotate(45deg) scale(0.8)'
+      },
+      lg: {
+        transform: 'rotate(45deg)'
+      },
+      xl: {
+        transform: 'rotate(45deg)'
+      }
+    },
+    checked: {
+      true: {
+        opacity: 1
+      }
+    },
+    animated: {
+      false: {
+        transition: 'none',
+        '&:after': {
+          transition: 'none'
+        }
+      }
+    }
+  },
+  compoundVariants: [// indeterminate && xs size
+  {
+    indeterminate: true,
+    size: 'xs',
+    css: {
+      scale: '0.5'
+    }
+  }, // indeterminate && sm size
+  {
+    indeterminate: true,
+    size: 'sm',
+    css: {
+      scale: '0.5'
+    }
+  }, // indeterminate && md size
+  {
+    indeterminate: true,
+    size: 'md',
+    css: {
+      scale: '0.8'
+    }
+  }, // indeterminate && lg size
+  {
+    indeterminate: true,
+    size: 'lg',
+    css: {
+      transform: 'none'
+    }
+  }, // indeterminate && xl size
+  {
+    indeterminate: true,
+    size: 'lg',
+    css: {
+      transform: 'none'
+    }
+  }]
+});
+exports.StyledIconCheck = StyledIconCheck;
+const StyledCheckboxMask = (0, _stitches.styled)('div', {
+  size: '100%',
+  position: 'absolute',
+  pe: 'none',
+  boxSizing: 'border-box',
+  dflex: 'center',
+  zIndex: '-$1',
+  br: 'inherit',
+  transition: '$default',
+  '&:before': {
+    content: '',
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    size: '100%',
+    br: 'inherit',
+    transition: '$default',
+    zIndex: '-$1',
+    border: '$borderWeights$normal solid $border',
+    boxSizing: 'border-box'
+  },
+  '&:after': {
+    content: '',
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    size: '100%',
+    bg: '$$checkboxColor',
+    scale: 0.5,
+    br: 'inherit',
+    opacity: 0,
+    transition: '$default',
+    zIndex: '-$1'
+  },
+  '@motion': {
+    transition: 'none',
+    '&:before': {
+      transition: 'none'
+    },
+    '&:after': {
+      transition: 'none'
+    }
+  },
+  variants: {
+    checked: {
+      true: {
+        '&before': {
+          opacity: 0,
+          scale: 1.2
+        },
+        '&:after': {
+          opacity: 1,
+          scale: 1
+        }
+      }
+    },
+    animated: {
+      false: {
+        transition: 'none',
+        '&:before': {
+          transition: 'none'
+        },
+        '&:after': {
+          transition: 'none'
+        }
+      }
+    }
+  }
+});
+exports.StyledCheckboxMask = StyledCheckboxMask;
+const StyledCheckboxText = (0, _stitches.styled)('span', {
+  position: 'relative',
+  dflex: 'center',
+  color: '$text',
+  opacity: 1,
+  pl: 'calc($$checkboxSize * 0.57)',
+  ln: '$$checkboxSize',
+  fontSize: '$$checkboxSize',
+  us: 'none',
+  '@motion': {
+    '&:before': {
+      transition: 'none'
+    }
+  },
+  variants: {
+    color: {
+      default: {
+        color: '$text'
+      },
+      primary: {
+        color: '$primary'
+      },
+      secondary: {
+        color: '$secondary'
+      },
+      success: {
+        color: '$success'
+      },
+      warning: {
+        color: '$warning'
+      },
+      error: {
+        color: '$error'
+      }
+    },
+    line: {
+      true: {
+        '&:before': {
+          content: '',
+          position: 'absolute',
+          width: '0px',
+          height: '2px',
+          background: '$text',
+          transition: '$default'
+        }
+      }
+    },
+    checked: {
+      true: {
+        '&:before': {
+          opacity: 0.8
+        }
+      }
+    },
+    disabled: {
+      true: {
+        color: '$accents4'
+      }
+    },
+    animated: {
+      false: {
+        '&:before': {
+          transition: 'none'
+        }
+      }
+    }
+  },
+  compoundVariants: [{
+    line: true,
+    checked: true,
+    css: {
+      opacity: 0.6,
+      '&:before': {
+        w: 'calc(100% - 10px)'
+      }
+    }
+  }]
+});
+exports.StyledCheckboxText = StyledCheckboxText;
+const StyledCheckboxInput = (0, _stitches.styled)('input', {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  top: '0px',
+  left: '0px',
+  margin: '0px',
+  padding: '0px',
+  opacity: 0,
+  zIndex: '$1',
+  cursor: 'pointer',
+  '&:active': {
+    [`& ~${StyledCheckboxMask}`]: {
+      bg: '$border',
+      '&:after': {
+        bg: '$$checkboxColorHover'
+      }
+    }
+  },
+  '&:hover': {
+    [`& ~${StyledCheckboxMask}`]: {
+      bg: '$border',
+      '&:before': {
+        border: '2px solid transparent'
+      },
+      '&:after': {
+        bg: '$$checkboxColorHover'
+      }
+    }
+  },
+  '&:disabled': {
+    cursor: 'not-allowed'
+  }
+});
+exports.StyledCheckboxInput = StyledCheckboxInput;
+const StyledCheckboxGroup = (0, _stitches.styled)('div', {
+  display: 'flex',
+  flexDirection: 'colunm',
+  variants: {
+    size: {
+      xs: {
+        $$checkboxSize: '$space$7'
+      },
+      sm: {
+        $$checkboxSize: '$space$8'
+      },
+      md: {
+        $$checkboxSize: '$space$9'
+      },
+      lg: {
+        $$checkboxSize: '$space$10'
+      },
+      xl: {
+        $$checkboxSize: '$space$11'
+      }
+    },
+    row: {
+      true: {
+        flexDirection: 'row',
+        mt: 0,
+        [`& ${StyledCheckboxLabel}`]: {
+          mr: '$$checkboxSize'
+        }
+      },
+      false: {
+        mr: 0,
+        flexDirection: 'column',
+        [`& ${StyledCheckboxLabel}`]: {
+          mt: '$$checkboxSize'
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    row: false
+  }
+}); // types
+
+exports.StyledCheckboxGroup = StyledCheckboxGroup;

package/cjs/checkbox/index.d.ts

@@ -0,0 +1,6 @@
+import Checkbox from './checkbox';
+export type { CheckboxProps, CheckboxEvent } from './checkbox';
+export type { CheckboxGroupProps } from './checkbox-group';
+export { StyledCheckboxLabel, StyledCheckboxContainer, StyledIconCheckFirstLine, StyledIconCheckSecondLine, StyledIconCheck, StyledCheckboxMask, StyledCheckboxText, StyledCheckboxInput, StyledCheckboxGroup } from './checkbox.styles';
+export type { CheckboxVariantsProps, CheckboxGroupVariantsProps, CheckboxTextVariantsProps, CheckboxMaskVariantsProps, CheckboxIconCheckVariantsProps, CheckboxIconCheckFirstLineVariantsProps, CheckboxIconCheckSecondLineVariantsProps, CheckboxLabelVariantsProps, CheckboxContainerVariantsProps } from './checkbox.styles';
+export default Checkbox;

package/cjs/checkbox/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledIconCheckSecondLine = exports.StyledIconCheckFirstLine = exports.StyledIconCheck = exports.StyledCheckboxText = exports.StyledCheckboxMask = exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckboxGroup = exports.StyledCheckboxContainer = void 0;
+
+var _checkbox = _interopRequireDefault(require("./checkbox"));
+
+var _checkboxGroup = _interopRequireDefault(require("./checkbox-group"));
+
+var _checkbox2 = require("./checkbox.styles");
+
+exports.StyledCheckboxLabel = _checkbox2.StyledCheckboxLabel;
+exports.StyledCheckboxContainer = _checkbox2.StyledCheckboxContainer;
+exports.StyledIconCheckFirstLine = _checkbox2.StyledIconCheckFirstLine;
+exports.StyledIconCheckSecondLine = _checkbox2.StyledIconCheckSecondLine;
+exports.StyledIconCheck = _checkbox2.StyledIconCheck;
+exports.StyledCheckboxMask = _checkbox2.StyledCheckboxMask;
+exports.StyledCheckboxText = _checkbox2.StyledCheckboxText;
+exports.StyledCheckboxInput = _checkbox2.StyledCheckboxInput;
+exports.StyledCheckboxGroup = _checkbox2.StyledCheckboxGroup;
+_checkbox.default.Group = _checkboxGroup.default; // export styled components
+
+var _default = _checkbox.default;
+exports.default = _default;

package/cjs/code/code.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CSS } from '../theme/stitches.config';
+import { CodeVariantsProps } from './code.styles';
+interface Props {
+    block?: boolean;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type CodeProps = Props & NativeAttrs & CodeVariantsProps & {
+    css?: CSS;
+};
+declare const _default: React.ComponentType<Partial<{
+    block: boolean;
+}> & Omit<CodeProps, "block">>;
+export default _default;

package/cjs/code/code.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _code = require("./code.styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const defaultProps = {
+  block: false
+};
+
+const Code = ({
+  block,
+  children,
+  ...props
+}) => {
+  if (!block) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_code.StyledCode, { ...props,
+    children: children
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_code.StyledPre, { ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_code.StyledCode, {
+      children: children
+    })
+  });
+};
+
+Code.toString = () => '.nextui-code';
+
+const MemoCode = /*#__PURE__*/_react.default.memo(Code);
+
+var _default = (0, _withDefaults.default)(MemoCode, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;